Issue #514 (JS Increment, Jamstack, AI Tools, React)05/25/23
The Terminal for the 21st Century ⚡
Warp is a Rust-based terminal with IDE-style input that lets you point, click, and select – like a modern text editor. Navigate through your terminal output command-by-command instead of scrolling through a wall of text. Copy a command, output, or both (with formatting!) to share with your team.
Warp integrates with zsh, fish, bash, and requires zero configuration out of the box. Customize the look and feel with themes, fonts, and where you position your input. Warp is completely free and available today on Mac.
Download Warp Today!
|
The only place I've ever personally used JavaScript increment and decrement operators (++ and --, respectively) is in the traditional for loop. I'm sure many of you who have been writing JavaScript for some time also might be in the same boat. And since I almost exclusively use other types of loops nowadays, I would say it's rare that I ever use either of those operators.
As with many things, even though you may have used these operators many times (most often ++), you may not know exactly how they work. I'll mainly focus on the increment operator (++) but the same basic facts apply to decrement as well.
First, the increment operator adds 1 to a variable's value (it can also be used on an object property), as in this example:
|
let num = 5; num++; // Increment num by 1
console.log(num); // Output: 6
|
When used as a 'postfix' operator (as in the example above, which means it follows the variable name), it returns the value of the variable before it increments it.
When used as a 'prefix' operator (which you may not see as often, placed before the variable), it will increment the value before it returns the result. The following code demonstrates this:
|
let x = 5;
console.log(x++); // Output: 5
console.log(x); // Output: 6
let y = 5;
console.log(++y); // Output: 6
console.log(y); // Output: 6
|
Notice when you first log the variable with a postfix increment, the value stays the same. This is because it's evaluated and returned prior to incrementing. The reverse happens when you prefix the operator, which in this case seems to be the more expected result.
In the case of a traditional for loop, you'll almost always see the operator used as a postfix, even though it doesn't seem to make any difference in that context if a prefixed increment is used. It only matters if you used the operator in the body of the loop, where you're actually dealing with the variable on each iteration.
That being said, you could do something kind of funky with your for loop and get unexpected results, like the following:
|
for (let i = 0, j; i < 5; j = i++) {
console.log(j); // 0 1 2 3
}
for (let i = 0, j; i < 5; j = ++i) {
console.log(j); // 1 2 3 4
}
|
Notice the variation in the logged numbers. But this isn't very practical or sensible code, so I wouldn't worry too much about this. In most (if not all) cases, you're not going to be assigning the incremented variable to another variable in the for loop's definition.
Now on to this week's tools!
|
Jamstack Tools, CMS's, etc.
eleventy-activity-feed
An Eleventy plugin to create one centralized RSS feed for all of the content you create across the web (aggregates from Twitter, RSS, Atom, Mastodon, YouTube).
Tina
An open-source, Git-backed headless CMS with a visual editor powered by Markdown, MDX, and JSON, and compatible with popular tools like Gatsby, Hugo, Eleventy, Jekyll, and more.
The Terminal for the 21st Century ⚡
Warp is a Rust-based terminal that works like a modern app. Edit your commands like in an IDE, with selections, autosuggestions, and completion menus. Warp integrates with zsh, fish, bash, and requires zero config out of the box. Warp is completely free and available today on Mac. SPONSORED
ultramatter
A tiny library for parsing frontmatter, has zero dependencies, and is compatible with any JavaScript runtime.
Astro Jekyll Compatibility Package
Allows Astro to understand Markdown formatted in the manner that Jekyll to make transitioning from Jekyll to Astro easier.
Minimum Viable Hugo
A single static HTML page to start you off with a Hugo project with no CSS or JavaScript.
bearclaw
A tiny Go-based static site generator (SSG) with RSS support that makes it easy to convert Markdown to HTML.
Nobelium
A fast and responsive static blog template built on top of Notion and Next.js and deployed on Vercel.
Gustwind
An experimental site generator built on top of JSON definitions using Deno, to allow component-oriented development of large scale sites.
 |
Blowfish
A powerful, lightweight theme for Hugo. It's built using Tailwind CSS with a clean and minimalist design that's forked from another project called Congo.
eleventy-plugin-webmentions
A plugin for Eleventy to fetch and filter webmentions from Webmention.io.
On the Release Radar:
|
AI and ChatGPT Tools
Xero.AI
An AI platform that allows you build end-to-end Machine Learning projects in natural language.
AutoRepl
A no-code chatbot builder where anyone can create free chatbots that they can easily use and integrate into all platforms. Unlimited bots and 300 chats in the free version.
Safurai
An AI-based IDE extension designed to assist developers with coding, debugging, and refactoring. Free for individuals with 350 requests per month.
FlowiseAI
An open-source visual UI tool to build your customized LLM flow using LangchainJS.
Securely Share 2FA Tokens With Others, No Phone Needed
A browser-based 2FA authenticator for you and your team. Easy import from Google Authenticator, user management, read-only access, backups, and more. 2FA your team will love! SPONSORED
Open LLMs
A list of open LLMs available for commercial use (e.g., Apache 2.0, MIT, OpenRAIL-M, etc).
Toolkit AI
An easy way to generate and use AI plugins. Generate code for LangchainJS plugins by just describing what they should do.
Window
A Chrome extension that lets you configure AI models in one place and use them on the web.
ChatFiles
An OpenAI-based project that you can host locally, upload your files to it, then have a conversation about your files with the AI bot.
What The Diff
An AI-powered code review assistant that helps you and your team write better pull request descriptions, reviewing and merging them faster. Free plan has a limit of 25,000 tokens per month.
|
React Tools
react-three-offscreen
An experimental package that allows you to render your react-three-fiber scene with an offscreen canvas in a web worker.
react-declassify
A codemod that automatically transforms React class components into React functional components using Hooks.
Securely Share 2FA Tokens With Others, No Phone Needed
A browser-based 2FA authenticator for you and your team. Easy import from Google Authenticator, user management, read-only access, backups, and more. 2FA your team will love! SPONSORED
forgetti
An auto-memoization Babel plugin to solve your hook spaghetti, inspired by React Forget.
BSMNT Scrollytelling
A library for creating scroll animations, powered by GSAP ScrollTrigger, but it abstracts away some things to make it work better with React.
react-timezone-select
An React time zone selector component that's more usable, dynamic, and has automatic Daylight Saving Time in the selections.
React-Clock
A live analog clock component you can add to your React apps and customize each part of the clock as needed.
React ProseMirror
A full-featured library for safely integrating React with ProseMirror, the popular rich-text editor toolkit for the web.
React Code Input
A small React component that allows you to create a lightweight textarea element that will automatically syntax highlight the code the user types in it.
Impala
A bare-bones static-site framework, powered by Vite, that supports React and Preact.
React I18nify
A set of simple internationalization, translation, and localization components and helpers for React.
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
CodeWP – An AI-based code generator for WordPress with support for WooCommerce.
|
|
Meco – Enjoy newsletters in a space built for mindful reading and give your inbox space to breathe. AD
|
Atua – Unlock the power of ChatGPT with a single shortcut key on any Mac app.
|
|
Unite – Turn any website into a deeply customizable app on your Mac.
|
Bytes – An informative and entertaining JavaScript newsletter for web developers. AD
|
|
Divize – A challenge-based platform to learn to write concise HTML/CSS for building UIs.
|
Reviewly – A developer hiring platform to create and send take-home projects to candidates.
|
|
|
A Tweet for Thought
Some interesting thoughts from a lawyer talking about ChatGPT and the future of his profession.
Send Me Your Tools!
Made something? Reply to this email or 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...
Album Whale is a website that lets you create curated lists of music albums that you can share with others and you can "like" and "save" album lists, similar to a social network.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
