Web Tools #464 - Jamstack, JS Utilities, Git/CLI Tools

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #464 • June 9, 2020

Advertisement
Beautiful Link Previews Automagically
Mugshot Bot creates stunning link previews automatically. No more fussing with design tools or wading through thousands of stock photos. With Mugshot Bot, you take control of how your link previews are presented, increase click-through rates and make a good first impression right from scratch. Try it out and create your free account today and get 1 month PRO for free [Promo: WebTools22].

Get Started For Free Today
Mugshot Bot

While tweaking a design, I often make multiple CSS changes in my browser's developer tools, sometimes making changes that aren't physically close to each other in the CSS panel. If all the changes are in a single CSS selector, and I'm happy with them, it's easy enough to copy and paste the styles into the real CSS file after all the visual tweaking.

But if I've made multiple changes in different places that aren't contiguous (and I don't even remember all the changes I've made!) there's a neat little feature in Chrome's DevTools that lets me easily see and grab those changes.

To use this feature, in your DevTools, first make all the CSS changes you need to make. You can make the changes in the "Sources" tab, viewing the files directly, or by inspecting individual elements and adjusting the CSS in the "Styles" panel. The same would apply to other types of files, but I'm using CSS as the example here.

Once you're happy with the changes, in DevTools use the three-dots icon in the top right area to open more options. From there, hover over "More tools", then choose the "Changes" option from the menu.

Opening the Changes Panel in DevTools

This will open the Changes panel and you'll be able to see the files you've changed on the left, and a diff view of the changes on the right.

Viewing the Changes Panel in DevTools

For whatever reason, Chrome doesn't allow you to directly copy and paste any of these lines. But there is a "Copy" button at the bottom of the panel that lets you "Copy all changes from current file". This gives you a single snippet with all the changes from the selected file, which you can then drop into your live CSS file.

Of course, when you close DevTools or refresh the page, those changes will be gone, so you have to grab them before doing any kind of page refresh or navigation.

This is just a simple way to make on-the-fly edits and move them over to the real code base, but Chrome also has a Workspaces feature (beyond the scope of this little intro) that lets you connect DevTools to a real codebase, which you can read about here.
 

Now on to this week's tools!

Jamstack, CMS's, etc.

Mugshotbot.com
Create beautiful link previews automatically. No more fussing with design tools or wading through thousands of stock photos. With Mugshot Bot, you take control of how your link previews are presented, increase click-through rates and make a good first impression right from scratch. Try it out and create your free account today and get 1 month PRO for free [Promo: WebTools22].  SPONSORED 

thirdweb
A set of powerful SDKs and intuitive tools to build web3 apps, 100% free but they may add premium features later.

Veryfront
An in-browser web app builder that empowers development teams to quickly create and launch custom web apps.

Lightning Builder
A free browser-based drag-and-drop website design tool that helps you create professional website mockups in minutes.

TilePieces
Online website builder that uses concepts and functions directly related to HTML and its API, like the DOM and CSSOM.

MarkdownSIte
A hosting platform to create a website from a Git repository in one click. Supports Hugo, Jekyll, and even hand-rolled sites.

eleventy-dev-server
A minimal, modern, generic, hot-reloading local web server, from the Eleventy team.

Coolify
An open-source and self-hostable Heroku or Netlify alternative that lets you deploy JavaScript apps with databases, Git sources, and more.

Coolify

Actually Serverless
Dynamic HTTP endpoints in your browser, with everything hosted locally via service workers.

testbook
Proof-of-concept that generates a beautiful book as HTML and PDF using Hugo and paged.js.

Strapi Market
A marketplace for plugins used in Strapi apps (see releases below).

On the Release Radar:

JavaScript Utilities

Radically Different Remote Job Search Where Companies Apply To You
Get featured to companies and land a remote job in 14 days. No job applications, speak directly to hiring managers. It's fast and effective, receive multiple offers in 2 weeks. Our talent partners will help you stand out across borders. Join Arc today!    SPONSORED 

strip-literal
Strip comments and string literals from JavaScript code.

ThemeMirror
A gallery of beautiful dark and light themes for CodeMirror, the popular embeddable code editor component.

SunCalc
A tiny JavaScript library for calculating sun and moon positions and phases.

lax.js
Simple and lightweight (under 4kb gzip'd) vanilla JavaScript library to create smooth and beautiful animations when the user scrolls.

Emoji Mart
A customizable emoji picker component with multiple language support built with custom elements and shadow DOM.

Emoji Mart

hyperid
Fast unique ID generation for Node.js and the browser.

chroma.js
A zero-dependency JavaScript library to do all kinds of color conversions and color scales.

droppy
A self-hosted file storage server with a web interface and capabilities to edit files and view media directly in the browser.

ScrollMovie
JavaScript library to animate a background as the user scrolls the page, based on selected images used for the animation.

pheno
Simple, lightweight at-runtime type checking functions, with full TypeScript support.

equivalent-exchange
Transmute one JavaScript string into another by way of mutating its abstract source tree (AST), powered by Babel and recast (a syntax tree transformer).

Git, GitHub, and CLI Tools

Get Featured To Companies and Land a Remote Job in 14 Days
Arc is a radically different remote job search where companies apply to you. Sign up and complete the vetting process. Your profile gets featured to companies for 2 weeks. Receive offers and get hired. Our talent partners will help you stand out across borders. Join Arc today!    SPONSORED 

mdx-to-md
A library to convert MDX to Markdown, useful for generating README files for a GitHub repo.

Rayli
A command-line tool to generate code images of your local code straight from the terminal.

lazydocker
The lazier way to manage everything Docker. A simple terminal UI for both Docker and Docker Compose, written in Go.

Zed
Go-based tooling for super-structured data; a new and easier way to manipulate data.

Awesome Readme Template
A README template for your GitHub repositories. This repository's README itself is the template that you can fork and add your project info.

Bash-Oneliner
A collection of handy Bash one-liners and terminal tricks for data processing and Linux system maintenance.

Termwind
Build unique and beautiful PHP command-line applications using the Tailwind CSS API.

Termwind

Truegit
Markdown-based blogging platform powered by your GitHub repository. The paid plan is free for a limited time.

Directs for GitHub
Receive direct messages from other users on GitHub, securely. For example, you can get a message from Doug Crockford telling you that you wrote "insanely stupid code".

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Contember – All-in-one platform to build and scale data-based apps.

Spinal – Minimal CMS with nothing to install that connects to your GitHub.

WebPageTest Pro – No-code website performance experiments.   AD 

Dewstack – Build and host your documentation on your own domain.

FlyCode – Git-based, no-code product editor for team collaboration.

Storipress – WordPress alternative with collaborative visual editing tools.
 

A Tweet for Thought

This is certainly one of the coolest JavaScript one-liners I've seen! There's a CodePen demo in the thread where you can check it out live too.

A Tweet for Thought
 

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...

If you're looking for programmer-friendly music, check out musicForProgramming();, a directory of songs that are conducive to doing think-heavy work like writing code, and which I assume are all (or  mostly) instrumentals.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #463 - JS Overkill, CSS Tools, Testing, Uncats

Thursday, June 2, 2022

Web Tools Weekly WEB VERSION Issue #463 • June 2, 2022 Advertisement Stepsize: Fix Technical Debt and Ship 2x Faster Create and view code issues directly from your VSCode and JetBrains editors. Add

Web Tools #462 - Media, SVG, Git/CLI, React

Thursday, May 26, 2022

Web Tools Weekly WEB VERSION Issue #462 • May 26, 2022 Advertisement Build a Predictable Path To Engineering Leadership The On Deck Engineering Fellowship is a curated community designed to help

Web Tools #461 - Mergify, Frameworks, React Tools, Uncats

Thursday, May 19, 2022

Web Tools Weekly WEB VERSION Issue #461 • May 19, 2022 The following intro is a paid product review for Mergify, a GitHub-based service for automating your pull requests and code merges. If you're

Web Tools #460 - CSS Tools, JS Utilities, JSON, Databases

Thursday, May 12, 2022

Web Tools Weekly WEB VERSION Issue #460 • May 12, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

Web Tools #459 - JS Utilities, Build Tools, React

Thursday, May 5, 2022

Web Tools Weekly WEB VERSION Issue #459 • May 5, 2022 Advertisement Stepsize – Issue Tracking Made for Engineers Create and view code issues directly from your VSCode and JetBrains editors. Add

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your