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

Advertisement

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.

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.

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.

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:

• Strapi – Open-source headless CMS now at version 4+
• Eleventy – The popular static site generator now at version 1+
• Gatsby – The popular React-based framework is now at version 4+

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.

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.

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.

 

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