|
Issue #448 • February 17, 2022
The logical OR operator in any programming language can be abused to the point where code becomes pretty messy and harder to maintain. For example, take a look at the following:
|
if (myVar === 'one' || myVar === 'two' || myVar === 'three' || myVar === 'six' || myVar === 'seven') {
// do something...
}
|
Especially in a short-line environment like this one, that looks pretty awful. And I can tell you I've done that thousands of times in JavaScript, PHP, even back when I used to write classic ASP.
In a case like this, I can instead take advantage of the Array.includes() method to clean this up a bit. Of course, I'm not necessarily dealing with an array of objects, here, but that's alright. I can still do this:
|
let myVar = 'one';
let myArray = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
console.log(myArray.includes(myVar));
|
Try it on CodePen
As I've discussed in previous tips, Array.includes() will return a Boolean indicating whether the passed in item is found in the array. You can also pass in a second optional argument, an integer representing the position in the array at which to start searching.
Credit for this tip goes to Ravin, who presents the same basic idea in a Tweet image. I like this sort of tip because it goes against how I normally think when I'm coding. If I'm not actually dealing with an array, I'm not inclined to think about how I can turn a specific set of values into an array if I don't have to. I think I'd sooner consider a JavaScript object than I would an array.
Now on to this week's tools!
|
JavaScript Libraries and Frameworks
Choosing the Best WYSIWYG Editor for Styling Tables
Tables are perfect for representing data and information in an organized way, and it’s important to choose a WYSIWYG editor that makes the creation and editing experience with these tables simple for the user. Read for FREE! sponsored
Unpoly
An unobtrusive JavaScript framework for server-side web apps. Enables fast and flexible front ends for server-rendered HTML views, has no dependencies, and plays nice with existing code.
Fonoster
An open-source alternative to Twilio, the popular web service that enables programmable communication tools for making and receiving phone calls, text messages, etc.
Minze
A small, TypeScript-based and dead-simple framework to build portable web components compatible with React, Vue, and Angular.
API Platform
A set of tools to create REST and GraphQL APIs, scaffold Jamstack web apps, and stream changes in real time.
Dioxus
A React-like library for building fast, portable, and beautiful user interfaces with Rust. Runs on the web, desktop, mobile, and more.
GPU.js
A JavaScript acceleration library for GPGPU (General purpose computing on GPUs) in JavaScript for Web and Node that transpiles JavaScript functions into shader language and compiles them so they run on your GPU.
TinyBase
A multi-featured JavaScript library for structured state, with no dependencies, and features like tables, rows, and cells in your data stores.
Ohm
A JavaScript library for building parsers, interpreters, compilers, and parsing custom file formats.
Window.js
An open-source JavaScript runtime for desktop graphics programming that comes with APIs familiar to web and desktop developers.
FxTS
A functional library for TypeScript/JavaScript that features lazy evaluation, type inference, and simultaneous requests.
|
Git, GitHub, and CLI Tools
Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs. sponsored
cleye
An intuitive command-line interface (CLI) development tool that features a minimal API surface, powerful flag parsing, and strongly typed parameters and flags.
Lip Gloss
Style definitions with an expressive, declarative, CSS-like approach for nice terminal layouts, built with terminal UIs in mind.
Gluegun
A toolkit for building Node-based command-line interfaces in TypeScript or modern JavaScript, with support for a whole slew of features.
Bash-web-server
A web server built in pure Bash (no socat, Netcat, etc).
statuspage
A simple, zero-dependency, pure JS/HTML status page based on GitHub Pages and GitHub Actions.
GitHub Stars
A Chrome extension built by a 14-year-old developer that lets you hover over any GitHub link to see the number of stars the repo has.
Gitploy
Toolkit to enable your organization to build a deployment system around GitHub's deployment API in minutes.
Know Your Gitstats
Enter a GitHub user name and get a nice clean look at the user's GitHub numbers and activity, in a dark mode UI.
Dura
A background process that watches your Git repositories and commits your uncommitted changes without impacting HEAD, the current branch, or the Git index (staged files).
Awesome Actions
A curated and categorized list of GitHub actions.
Semverbot
A CLI that automates versioning using the popular method of Semantic Versioning (SemVer).
|
React Tools
Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs. sponsored
react-browser-navigator
A React implementation of the window.navigator interface, commonly used to get info like network connection, geolocation, etc.
Pure React Carousel
A highly impartial suite of React components to create a carousel with almost no limits on DOM structure or CSS styles.
transition-hook
An light-weight react transition animation hook that's simpler and easier to use than react-transition-group.
React-Grid-Layout
A grid layout system much like Packery or Gridster, for React, that's responsive and supports breakpoints.
react-inner-image-zoom
A React component for magnifying an image within its original container. Zoom behavior can be triggered on click or hover and the zoomed image can be moved by dragging on touch devices.
React Google Charts
A thin, typed, React wrapper for Google Charts.
Plock
A responsive masonry layout implementation for React, with a three-column default that can be easily changed.
Elf
A reactive immutable state management solution built on top of RxJS that uses custom RxJS operators to query the state and pure functions to update.
use-react-screenshot
React hook that allows you to make a component screenshot and get an image in various formats.
React Headless Hooks
A set of React hooks to build and design powerful components while retaining 100% control over markup and styles.
reactjs-calendar-heatmap
A React component to build a D3.js-based calendar heat map graph, to embed a visualization of dates/times.
react-md-editor
A simple markdown editor with preview and syntax highlighting support, implemented with React.js and TypeScript.
|
Commercial Tools and Classifieds
These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).
Niceboard - Modern job board software to start your own job board.
HyperTheme Editor - A Chakra UI-based theme editor for dashboards, etc.
vscode.email - Newsletter featuring tips/tools for VS code, coming soon. ad
Trunk - Tool to simplify checking, testing, and merging your code.
Advanced React - React course with 70+ HD videos across 11+ modules. ad
MergeQueue - A code quality tool to automate merge workflows for GitHub.
codeprints.dev - Framed, personalized prints of your GitHub contributions.
|
A Tweet for Thought
Apparently, browsers often make change that break old features, many of which go unnoticed. Emily Stark, who works on Chrome, explained a little about this in a Twitter thread back in August.
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
FakeYou lets you select a famous character or personality and it uses AI to generate a voice recording for whatever text you want the "person" to speak. And you promise to absolutely never use this for malicious purposes or memes that make fun of your least-favourite politicians.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@WebToolsWeekly
Support this newsletter:
PayPal.me / Patreon / GitHub Sponsors / E-Books / $5 Tip / $1 Tip
|
|
