Issue #463 (Web & JS, CSS/HTML, Testing, Uncats)06/02/22
Every once in a while I come across a social media thread, article, or forum post that's presenting some kind of polarizing view on JavaScript.
One that caught my eye recently was on Hacker News where the user is asking the question: Why is the web lately all about JavaScript? In this instance, the user is questioning the use of heavy DOM manipulation libraries or even server-side JavaScript for rendering all content, and questioning why natural back-end languages aren't used more.
The responses to the post are quite mixed but generally in favour of the concerns the user is expressing. The top comment in part says:
"JS isn't bad, it just feels like people think it can solve anything while not seeing issues it adds."
This is true. Now that the DOM is the closest it's ever been to a cross-browser API, I agree that developers should first try to solve problems with vanilla JavaScript rather than assuming every project should use React, Vue, or similar libraries.
Another user answers quite strongly against JavaScript:
"I think JS has actively harmed software development in the past 10 years. It's a bad language, designed and patched hastily that does not work well with humans nor machines."
He goes on to use callbacks progressing to Promises as an example. I don't think I agree with that, but I understand the frustration.
Libraries that help avoid the "JavaScript everywhere" approach
Another user says:
"I think this is largely because people are writing JS on the frontend, and it's easier to do SSR with the code you've already got, i.e. render JS on the backend too."
This user and some others point out the shift towards libraries like htmx, Hotwire, Stimulus, etc. (all of which I've featured in this newsletter before) as part of an improved JavaScript landscape.
Personally, I agree with the user who says:
"Mostly, I see the modern crop of JS frameworks as a breath of fresh air compared to what precedes them, though the complexity of what is imported when running an `npm install` is enough to give me pause and a wish for something more minimal."
In other words, we're in a good state right now, but maybe lighter approaches to the problems need to be taken more seriously. I think when people choose a simpler library like Vue over React, that's definitely a step in that direction.
Now on to this week's tools!
|
| |
CSS and HTML Tools
Stepsize: Fix Your Technical Debt and Ship 2x Faster
Create and view code issues directly from your VSCode and JetBrains editors. Add technical issues to Jira, GitHub, Linear, and Azure DevOps. Link issues to code without context switching and make technical work visible in your codebase. Get a 50% discount for the first 3 months on the team plan using code "WebToolsWeekly". SPONSORED
Symbols to Copy
A database of copy-paste HTML symbols, entities, characters, and codes in different formats including ASCII, HEX, CSS and Unicode.
System Font Stack
A simple resource that shares three serif, sans-serif, and monospace font stacks you can use in your CSS that only use system fonts.
Colors & Fonts
A set of color and typography-based tools, including color system, color palettes, gradients, and a font-pairing tool that uses Google fonts.
Color Legend Element
A Custom Element suitable for use as a legend in data visualizations, built with Lit/Lit-Element and D3.js.
canvas-datagrid
Canvas-based data grid web component capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single Canvas element.
Fluid Type Scale
Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any design system.
 |
AnimatiSS
A collection of drop-in CSS animations, each testable on the page, categorized under 10 styles, with multiple variations on each of the styles.
Tweetic
Convert Twitter posts to static HTML for embedding in just about any platform that takes plain HTML.
Free Code Tools
A small set of online tools including Markdown preview, word counter, code minifier, code beautifier, password generator, Twitter card generator, and more.
Non Boring Gradients
Web version of a Figma plugin that helps you create more attractive gradients by incorporating interpolation spaces other than sRGB.
On the Release Radar:
|
Testing and Debugging Tools
Learn How You Can Build Fintech Applications Faster With Lower Maintenance Costs
Download Sencha free guide to learn how to build applications faster, with lower maintenance costs, using charts and dashboards. Make better decisions by building and deploying sophisticated-looking, elegant, and enterprise fintech apps. SPONSORED
Contrast Grid
Online tool to simultaneously test many foreground and background color combinations for compliance with WCAG 2.0 minimum contrast.
Walker.js
An open-source JavaScript event tracker to capture user events in the browser and send them to any destination by setting HTML attributes.
Vest
A declarative validations framework inspired by unit testing libraries that allows you to express your validation logic in a simple and readable way that's also easy to maintain.
WebPageTest
The classic open-source web performance suite recently had an overhaul to suggest actionable opportunities, based on your test results, to quickly improve website performance for free.
nut.js
A cross-platform native UI automation and testing tool that allows for native UI interactions via keyboard and/or mouse, but additionally gives you the possibility to navigate the screen based on image matching.
MockRTC
Powerful and friendly WebRTC mock peer and proxy that lets you build automated tests for WebRTC traffic, simulate WebRTC errors in a reliable reproducible way, and more.
Dockside
A dev and staging environment in one that lets your team code from anywhere in a clone of your production environment so you can share and stage your work online.
@cypress/chrome-recorder
Export Cypress tests from Google Chrome's DevTools recorder.
Pee.js
A JavaScript library for testing memory leaks by allowing you to leak a set amount of memory.
React Native Accessibility Engine
Make accessibility-related assertions on React Native code using React Test Renderer.
React Hooks Testing Library
Simple and complete React hooks testing utilities that encourage good testing practices.
Cucumber
A Node.js tool for running automated tests written in plain language so they're easier to read by all team members.
On the Release Radar:
|
The Uncategorizables
Learn How You Can Build Fintech Applications Faster With Lower Maintenance Costs
Download Sencha free guide to learn how to build applications faster, with lower maintenance costs, using charts and dashboards. Make better decisions by building and deploying sophisticated-looking, elegant, and enterprise fintech apps. SPONSORED
Tab Maker
Create your own custom tab extensions for Chrome with no coding required.
Dotdrop
A dotfiles manager to save your dotfiles once and deploy them everywhere.
Xbin Playground
A serverless CLI toolkit that gives you a cloud version of /bin, /usr/bin.
Dokkio
A cross-platform tool to find, organize, and understand all your online files. Has a good free plan and the Pro plan is currently free as well.
Accessibility Annotation Library
Figma file that provides a hands-on, efficient, and scalable way for designers to communicate accessibility needs to engineers.
Fief
A highly secure and open-source user management platform for adding registration, login, and social auth to your apps. Free during Beta but self-hosted is free forever.
Heaps.io
A mature cross-platform graphics engine written in Haxe, designed for high performance games.
Laravel Nova
A beautifully-designed administration panel for Laravel.
nginx-common-configuration
A Dockerfile that provides useful default configs nginx.
Hermit
Go-based project that installs tools for software projects in self-contained, isolated sets, so your team, your contributors, and your CI have the same consistent tooling.
Right-Click Borescope
Chrome or Firefox extension that lists all the images under your mouse cursor. Useful for websites that bury image sources in nested HTML.
|
Commercial Tools and Classifieds
These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).
Text Compare – Instant text and PDF diffs for macOS.
Meticulous – Easily create front-end tests without writing code.
WebPageTest Pro – No-code website performance experiments. AD
Plutoview – A co-browsing API that enables collaboration at scale.
Tailwind Weekly – Newsletter that levels up your Tailwind CSS skills. AD
Assistive Labs – Ensure your websites and apps work with assistive tech.
EpicRuler – Design utility tools to measure distance, dimension, and more.
|
A Tweet for Thought
Chris Coyier started a thread on server-side rendering (SSR) vs. client-side rendering (CSR) and how the terms and technologies have evolved over the years.
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 want to learn to repair your electronic devices, you might want to bookmark iFixit, an online searchable resource that includes repair guides "for everything, written by everyone".
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
