Web Tools #397 - CSS Tools, VS Code, Uncats

Advertisement

I've been writing CSS for about 20 years and I've been building CSS-based layouts since around 2008. In the mid-2010s I got so comfortable with floats and other CSS hacks and workarounds, that I could pretty much create any layout I wanted and make it cross-browser (including old IE) with CSS.

With that type of experience with CSS layouts, it's no wonder it's taken me forever to get into newer specifications like Flexbox and Grid Layout! Old habits die hard.

Grid Layout in particular is one that's been a black box to me up until recently. While researching it, I wrote a beginner's tutorial for CodeinWP that covers the fundamentals of the Grid Layout spec:

As the post title alludes to, I've created CodePen demos for all the primary Grid Layout features. The more generic features (e.g. justify-items and align-items) that also apply to other specifications are not discussed in detail, partly to help keep the article a reasonable length, but also because I covered many of those in a Flexbox tutorial I wrote last year.

If you want to mess around with any of the CodePen demos, I've put them all into a CodePen collection.

Finally, CodeinWP has a Snippets section where I added a simple 2-column layout snippet using CSS Grid Layout that demonstrates how easy it is to create maintainable, flexible, and responsive layouts with these features.
 

Now on to this week's tools!

CSS and HTML Tools

Let's Hear It For The Builders
Expert builders and architects like you depend on the best tools. Nova is the smartest, most scalable, most secure app delivery platform on the market. Build bigger, faster and stronger with Nova. Test Nova today, see what you can build, and get $500 in credit.  sponsored 

CSS Stripes Generator
Online tool to configure, customize, and quickly grab the code for striped backgrounds built with linear gradients.

Tailwind CSS Plugins
A small collection of Tailwind plugins built by the team at Viget.

stencil
Responsive, customizable HTML email templates that work on all devices and have been thoroughly tested.

SmolCSS
A collection of minimal snippets for modern CSS layouts and components. Components use modern features like Flexbox, Grid, aspect-ratio, etc.

form.taxi
HTML form service that provides a back end for your forms, taking care of storage, spam filtering, and email notification.

blocks.css
Add a 3D, extrude or "block" effect to page elements, with the option to animate on hover/click. Even works on video embeds.

Glassmorphism CSS Generator
Create and customize CSS for a "frosted glass" aesthetic on page elements.

Prism --theme-vars
A customizable theme using CSS variables for Prism.js, the popular syntax highlighter solution. Includes a live playground so you can try it out.

Tailwind Config Viewer
A local UI tool for visualizing your Tailwind CSS configuration file. Keep it open during development to quickly reference custom Tailwind values/classes.

Neat CSS
A small (~1kb), opinionated CSS framework and HTML template inspired by minimalist websites and blogs.

Paremetric Color Mixer
Color palette generator that generates colors from a chosen color using a mathematical approach.

Text Editors, IDEs, etc.

Tech Productivity Newsletter
A brief weekly newsletter sent out every Monday that features productivity tools and articles on efficiency, well-being, remote work, and more.   promoted

Ray.so
A quick way to generate attractive images of code snippets for use in presentations. Choose color, background, dark/light, and code language, then download the PNG.

AlterNight
A modern, dark VS Code theme for developers who code at night.

ui-editor
A web based interface builder built in React, for rapid application development. Its primary aim is to forget learning framework syntax and focus on building components using JSX, state, events, etc.

Shuffle
Not free but this is an online editor to create templates built with Tailwind, Bulma, Bootstrap, and Material-UI.

Parcel
A code editor built for email development that streamlines your development workflow to help you rapidly code high-quality HTML emails.

Slack Theme
A VS Code theme inspired by Slack's colors and layout. Maybe you'll like it but I think it's weird.

Code Browser
A folding text editor for Linux and Windows, designed to hierarchically structure any kind of text file, especially source code, making navigation through source code faster and easier.

CodeSwing
An interactive coding playground for VS Code that allows you to build, explore, and learn, like having a traditional web playground (e.g. CodePen, JSFiddle), but directly in VS Code.

vim-skylight
Vim plugin to search asynchronously and preview file/symbol under your cursor in the floating window.

Bracket Pair Colorizer 2
A popular VS Code extension that allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.

Trailing Whitespace Visualizer
VS Code extension that highlights and removes trailing whitespace on any line to make easy to get rid of annoying invisible characters.

The Uncategorizables

Penpot
An open source design and prototyping platform meant for cross-domain teams, web based, and works with open web standards (SVG).

Firescrape
Not free. A web scraping API that provides a REST API that handles HTML parsing, proxy rotation, geotargeting, and JavaScript rendering.

Peekalink
An API to preview any link, useful for message apps, social networks, etc.
 
Screenstab
One-click tool to turn ordinary screenshots into beautiful image assets.

Speechly
Tools to help software development remove friction from the touch screen experience by bringing in voice modality.

Docxy
A React-based open source documentation website generator. Build beautiful, blazing fast documentation sites for your projects with just markdown.

Unix Timestamp Converter API
A web service to convert Unix Timestamps to DateTime objects and DateTime objects to Unix Timestamps.

Pika
An easy to use, open source, native colour picker for macOS that makes it simple to quickly find colours on-screen, in the format you need.

Fusuma
A zero-config tool to create browser-friendly slide presentations easily with Markdown/MDX, themes, syntax highlighting, and more.

Add to Calendar Generator
Generate an "Add to Calendar" link for Google Calendar, for placement in emails, web pages, etc.

A Tweet for Thought

I hope you haven't been on a video conference that sounds like this. I have to admit, he's pretty convincing.

 

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

Here's a 1992 Calvin and Hobbes that reminds us that aggressive, targeted advertising isn't new.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books