Issue #344 (Architecture, CSS/HTML, Jamstack, JS Utils)02/20/20
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!
Huge discount at Manning.com
|
|
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:
"This is because Front-end web development has been taken over by back-end developers. Few developers complained about JavaScript until Back-end developers became 'Fullstack' and had to start working with it and tried to apply the same mental model they had used with Java or Python etc."
The user further comments on CSS and HTML being corrupted by the back-end.
( Source thread)
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.
Like anything, balance is needed. We can embrace the purity of CSS while still taking advantage of improvements in JavaScript or the addition of UI Libraries that make developing complex web apps a breeze.
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
Hex Colors
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.
calcolor.co
Provides a dedicated page for every color code. Use it to find matching color variants, learn more about color properties, or convert color values.
styled-components
The popular CSS-in-JS solution is currently at version 5+. Includes lots of speed optimizations with no breaking changes.
Fluiditype
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.
Image Hues
Small, natural color palettes generated from random Unsplash images, with easy one-click copying of any color generated.
Bepis
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.
 |
Site.js
Develop, test, and deploy your secure static or dynamic personal web site with zero configuration.
Blot
A blogging platform with no interface. Turns a folder into a blog. Drag and drop files inside to publish. Images, text files, Word Docs, Markdown and more become blog posts automatically.
ElevenTail
A running start for web projects with Eleventy for site generation, Tailwind for utility-first CSS, PurgeCSS, UglifyJS, and more.
Gatsby Cloud
The best way to build and maintain Gatsby sites.
Scully
A static site generator for Angular projects looking to embrace the JAMStack.
Supermaya
An Eleventy starter kit designed to help you add rich features to a blog or website without the need for a complicated build process.
TakeShape
Headless CMS for the JAMstack. Provides instant, intuitive, adaptable, and collaborative services to power JAMstack projects of any size, shape, or complexity.
Tailwind Builder
Use a drag-and-drop editor to build templates based on the Tailwind CSS framework.
Ghost
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.
Boomla
A drag-and-drop website builder with a JavaScript programmable backend.
UI Bakery
Build front-end apps based on a custom design system. A low-code platform that saves you from costly front-end development.
|
JavaScript Utilities and Modules
 |
x-spreadsheet
A web-based JavaScript spreadsheet. Demo works pretty well and the feature set is pretty extensive, mimicking a real spreadsheet app.
DarkModeJS
A dark mode toggle that switches the mode depending on the user's time of day or system scheme.
Aria Tablist
Dependency-free plain JavaScript module for a WCAG-compliant tab switcher.
Also great for accordions.
WebCola
JavaScript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries.
Popper
A tooltip and popover library, now at version 2. Includes some API changes, and a modular approach that makes it smaller.
noUiSlider
Now at version 14+. Lightweight, accessible JavaScript range slider with full touch and mobile support.
SplitEase.js
A JavaScript function to compose separately timed variable acceleration, constant-speed, and deceleration segments in a single continuous interpolation.
Calendarize
A tiny utility to generate calendar views. Optionally accepts a date in exchange for a calendar view of that date's month.
Klona
A small and fast utility to deep clone Objects, Arrays, Dates, RegExps, and more.
d3-color
JavaScript module that provides representations for various color spaces, allowing you to convert and manipulate color values programmatically.
FingerprintJS
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!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
