Issue #344 (Architecture, CSS Tools, Site Builders, JS Utilities)
On a discussion thread on Hacker News covering a recent article on front-end architecture, there were some pretty strong statements made by a few users that I see once in a while in these types of forums.
A lot of developers seem to feel that what we call "front-end development" has been corrupted by "back-end" programmers. Here's how the exchange went:
"... I understand there's a cost to [using React] but that cost will greatly be overshadowed [by] development & maintenance costs."
I assume the last part was meant to say "savings", to which a user responded:
"Whatever happened to the 'think of the user experience first'. I am sad this shift to 'it's easier for me to develop, who cares about the users' happened."
Then, as I mentioned, there is this comment:
The user further comments on CSS and HTML being corrupted by the back-end.
There's definitely some truth to what is being said here, but I think the solution to the problem lies somewhere in between. There's no need for us to go back to 2005 when nobody knew what a build tool was, but there's also too many problems with CSS turning into a full-fledged programming language like Sass.
Now on to this week's tools!
CSS and HTML Tools
40% Off Everything at Manning.com
Looking to make your web apps shine? It doesn’t matter which tools or frameworks you love using, now you can take your skills to new heights with insight from Manning books and videos—all available at 40% off with the exclusive discount code nlimpressive on manning.com! sponsored
A slew of color tools including a palette generator, color picker, a CSS file color extractor, gradient generator, and lots more.
CSS Scan Pro
An extension to "Inspect Element" for Chrome, Firefox, and Safari that lets you instantly get styles, font info, dimensions, animations, and selector for any element on the page.
Provides a dedicated page for every color code. Use it to find matching color variants, learn more about color properties, or convert color values.
The popular CSS-in-JS solution is currently at version 5+. Includes lots of speed optimizations with no breaking changes.
A small CSS library with a focus on fluid typography, recommended for blogs, portfolios, documentation, and other simple projects.
Web Code Tools
Another large set of code generators: CSS effects (gradients, animation, shadows, etc.), HTML tools (audio, video, etc.), Microdata, Twitter Cards, and more.
Small, natural color palettes generated from random Unsplash images, with easy one-click copying of any color generated.
Another CSS-in-JS solution. Not much of a description on the README, but there are some code examples to give you an idea how it would be used.
My Text Converter
Converts plain text into various unicode versions including bubble text, emoji, upside down, script, and lots more.
Static Sites, CMS's, etc.
Develop, test, and deploy your secure static or dynamic personal web site with zero configuration.
A blogging platform with no interface. Turns a folder into a blog. Drag and drop ﬁles inside to publish. Images, text ﬁles, Word Docs, Markdown and more become blog posts automatically.
A running start for web projects with Eleventy for site generation, Tailwind for utility-first CSS, PurgeCSS, UglifyJS, and more.
The best way to build and maintain Gatsby sites.
A static site generator for Angular projects looking to embrace the JAMStack.
An Eleventy starter kit designed to help you add rich features to a blog or website without the need for a complicated build process.
Headless CMS for the JAMstack. Provides instant, intuitive, adaptable, and collaborative services to power JAMstack projects of any size, shape, or complexity.
Use a drag-and-drop editor to build templates based on the Tailwind CSS framework.
The popular blogging platform is now at version 3+. One of the major new features is recurring revenue subscriptions, similar to something like Patreon, but integrated with publishing.
Build front-end apps based on a custom design system. A low-code platform that saves you from costly front-end development.
A dark mode toggle that switches the mode depending on the user's time of day or system scheme.
Also great for accordions.
A tooltip and popover library, now at version 2. Includes some API changes, and a modular approach that makes it smaller.
A tiny utility to generate calendar views. Optionally accepts a date in exchange for a calendar view of that date's month.
A small and fast utility to deep clone Objects, Arrays, Dates, RegExps, and more.
A fraud detection API. Use this with caution, in light of GDPR and other privacy laws. Includes browser fingerprinting, user ID, incognito detection, geolocation, and more.
A Tweet for Thought
I believe it's fair to say this thread
illustrates the problems inherent in automation.
Got a Tool Suggestion?
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...
Google Fonts now has an analytics page. and it live updates font views worldwide (lol seriously). I think they should rename the page to "Please Stop Using Roboto and Open Sans, kthxbai".
Thanks to all for subscribing and reading!