Issue #464 (DevTools Changes, Jamstack, JS Utils, Git/CLI)06/09/22
|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
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.
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
A set of powerful SDKs and intuitive tools to build web3 apps, 100% free but they may add premium features later.
An in-browser web app builder that empowers development teams to quickly create and launch custom web apps.
A free browser-based drag-and-drop website design tool that helps you create professional website mockups in minutes.
Online website builder that uses concepts and functions directly related to HTML and its API, like the DOM and CSSOM.
A hosting platform to create a website from a Git repository in one click. Supports Hugo, Jekyll, and even hand-rolled sites.
A minimal, modern, generic, hot-reloading local web server, from the Eleventy team.
Dynamic HTTP endpoints in your browser, with everything hosted locally via service workers.
Proof-of-concept that generates a beautiful book as HTML and PDF using Hugo and paged.js.
A marketplace for plugins used in Strapi apps (see releases below).
On the Release Radar:
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
A gallery of beautiful dark and light themes for CodeMirror, the popular embeddable code editor component.
A customizable emoji picker component with multiple language support built with custom elements and shadow DOM.
Fast unique ID generation for Node.js and the browser.
A self-hosted file storage server with a web interface and capabilities to edit files and view media directly in the browser.
Simple, lightweight at-runtime type checking functions, with full TypeScript support.
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
A library to convert MDX to Markdown, useful for generating README files for a GitHub repo.
A command-line tool to generate code images of your local code straight from the terminal.
The lazier way to manage everything Docker. A simple terminal UI for both Docker and Docker Compose, written in Go.
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.
A collection of handy Bash one-liners and terminal tricks for data processing and Linux system maintenance.
Build unique and beautiful PHP command-line applications using the Tailwind CSS API.
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.
– All-in-one platform to build and scale data-based apps.
– Minimal CMS with nothing to install that connects to your GitHub.
WebPageTest Pro – No-code website performance experiments. AD
– Build and host your documentation on your own domain.
– Git-based, no-code product editor for team collaboration.
– WordPress alternative with collaborative visual editing tools.
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 all for subscribing and reading!