Issue #482 (Code From Hell, CSS/HTML, Media, React)10/13/22
Powerful Application Monitoring!
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow downs. Scout quickly shows you the exact endpoint causing the issue.
Start Free Trial!
|
|
Inheriting old code is always a challenge. Even if the code is easy to read (which it often isn't), it's most likely using out-of-date features and technologies, which present their own challenges and maintainability learning curves.
With all that said, take a gander a this Hacker News thread, likely posted using a throwaway account. The developer describes an inherited PHP codebase-from-hell and requests advice on how to handle a full code rewrite.
Some of the problems with the code include:
- No source control just old-school stuff like index-new.html, etc.
- No framework or any kind of dependency management
- Nothing gets deleted, new code is always added and seems to be edited directly on production
- The front-end code includes multiple conflicting versions of jQuery
- The PHP is "2003 style" with no templating
The developer also describes problems with the small team involved with the code including lack of productivity, resistance to change, and so on. The ultimate question the developer wants answered is:
"I know a full rewrite is necessary, but how to balance it?"
Anyone who inherits this kind of project is going to desperately want to overhaul the entire thing, no matter how long it takes. But the advice in the comments is quite the opposite of what the original developer was probably expecting.
The top comment advises:
"First off, no, a full rewrite is not only not necessary, but probably the worst possible approach. Do a piece at a time. You will eventually have re-written all the code, but do not ever fall into the trap of a 'full re-write'. It doesn't work."
But the comment goes on to recommend something before starting:
"[G]et some testing in place. Or, a lot of testing. If you have end-to-end tests that run through every feature that is currently used by your customer base, then you have a baseline to safely make changes. You can delete code as long as the tests pass. You can change code as long as the tests pass."
If you took a peak at the thread already, then you likely saw the incentive for keeping the codebase running smoothly through the rewrite:
"[T]his code generates more than 20 million dollars a year of revenue."
Yeah, that's definitely a reason to not mess with the code too much too fast.
Of course, the internal resistance faced when attempting to refactor, even a little at a time, may prevent even the most basic refactors and may even prevent setting up proper testing.
I mean, if this beast, no matter how ugly, is making a fortune, nobody's gonna want to throw a wrench into it. It reminds me of a friend years ago here in Toronto who had one of the top local window cleaning businesses via Google search. But his website was horrific.
He asked me about revamping the design and I basically told him "If it ain't broke, don't fix it". He eventually did a redesign but it was a long time coming, and for good reason. He was doing fine with the old, retched, and clunky design (at one point he was using HTML frames well after they had gone out of style!). So why mess with what's working?
One of the other top comments in the Hacker News thread summed things up nicely in response to the revenue numbers:
"From a business perspective, nothing is broken. In fact, they laid a golden goose... The ROI here is insane."
Now on to this week's tools!
|
CSS and HTML Tools
Powerful Application Monitoring!
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow downs. Scout quickly shows you the exact endpoint causing the issue. SPONSORED
john-doe
A website in a single HTML file. It uses #hashes in the URL along with the :target pseudo-class to show and hide pages/content.
WebC
Single File Web Components. Includes a framework-independent standalone HTML serializer for generating markup for Web Components, among other features.
Tailwind CSS Hyphens
The `hyphens` property isn't currently included in Tailwind CSS's utility classes, but this plugin adds it.
CSS Shapes Examples
A gallery of different shapes you can create with pure CSS, going beyond the standard ovals, stars, and so forth.
Onion
This little tool is actually based on an article that I wrote demonstrating how to animate from display: none to display: block (which you can't do in CSS). The author has put the solution into a little JavaScript utility.
Alphredo
An online tool that allows you to generate transparent colors for your designs in a more attractive fashion.
 |
Fallback Font Generator
Add a font to the page along with a fallback font and this tool allows you to interactively adjust the size and other features to ensure you're minimizing Cumulative Layout Shift (CLS).
remix-vanilla-extract-prototype
An npm package that allows you to use Remix with vanilla-extract, the popular TypeScript-based CSS-in-JS solution.
PostCSS Media Minmax
A PostCSS plugin that allows you to write media queries that use <= or >= to replace the min-/max- prefixes.
Wakamai Fondue
In other words "What Can My Font Do?" Add a font to the page (or pick a Google Font from the dropdown) and you'll get various bits of info along with on-page examples, and more.
Radix Colors
An open-source color system for designing beautiful, accessible websites and apps.
|
Media Tools (SVG, Images, etc.)
Meet the Tesla of Productivity Apps
Sunsama helps you prioritize and focus on the work that matters, instead of dumping everything on a to-do list. With weekly objectives, daily planning, and shutdown rituals, you can create ‘atomic habits’ that propel you towards success. SPONSORED
excalidraw-animate
An external tool to convert an Excalidraw drawing into animation. Just load the saved Excalidraw file or enter a shareable URL on the Excalidraw website. Also available as an npm package.
codepng
Convert code snippets into attractive images of code. Supports 10 coding languages, two themes, and custom backgrounds.
Pixlr E
A powerful online Photoshop-like image editor that has a nice UI and just about every feature you'd want in an advanced image editor.
OkSo
A minimalistic online drawing app to express, grasp, and organize your thoughts and ideas. You can save drawings in the app's native format or export as SVG, PNG, JPEG, and WebP.
Upscayl
A free and open-source AI-powered image upscaler for MacOS, Windows, and Linux and built with a Linux-first philosophy.
Humbleicons
A set of 220+ simple, neutral, carefully crafted SVG icons that you can use in personal and commercial projects.
 |
Illustration Link
A one-stop resource you can bookmark that lists 80+ websites to find free illustrations for your project.
Sinwaver
A simple sine waves (math-based curved lines) generator that lets you export the waves as SVG.
Mapbox GL JS
A JavaScript library for interactive, customizable vector maps that takes map styles that conform to the Mapbox Style Specification.
mux.js
A set of lightweight JavaScript utilities for inspecting and manipulating video container formats.
shrink.media
An online image compression tool that supports PNG, JPEG, and WebP and lets you adjust the output quality and the dimensions of the image before saving the optimized file.
|
React Tools
Meet the Tesla of Productivity Apps
Sunsama helps you prioritize and focus on the work that matters, instead of dumping everything on a to-do list. With weekly objectives, daily planning, and shutdown rituals, you can create ‘atomic habits’ that propel you towards success. SPONSORED
dark-mode-toggle
A dark mode toggle component for React, inspired by a Dribbble shot.
React on the Edge
Server-rendered React that uses esbuild for bundling and Vercel Edge Functions for SSR.
React Search Box
An autocomplete search box for React that uses Fuse.js for fuzzy search functionality.
Design Editor
A React-based editor that lets you edit images, presentations, and video.
dayzed
Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components.
React Spring Bottom Sheet
An accessible and performant bottom-sheet navigation component for mobile apps with animation powered by react-spring.
Unglitch
A straightforward, unwanted-side-effect-avoiding store for React.
react-timeago
A simple component that takes a date prop and returns a span with live updating date in a time-ago format.
React Ape
An experimental React renderer to build UI interfaces using Canvas and WebGL.
React PIN Field
A React component that adds an input on the page so the user can enter a PIN code.
react-collapsible
A React component to wrap content inside a collapsible accordion-style component.
On the Release Radar:
|
Commercial Apps and Classifieds
These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.
MediaCMS – Modern, fully featured open source video and media CMS.
Poly – Create unlimited high-res, custom, commercially-licensed textures.
Emerging Tech Brew - A 3-times weekly email with the latest tech news. AD
Drawpoint – Interactive maps and images with no coding required.
The Sample – One link every morning that matches your interests. AD
Simple File Upload – An easy-to-use file uploader widget with cloud storage.
KoolChart – Canvas-based JS charting library with 400+ sample charts.
|
A Tweet for Thought
A coding joke that makes Elon Musk laugh is pretty good in my book. But come on, var instead of let or const? Major fail right there.
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 like the Bible, then you might also like bAIble, the first version of the Scriptures completely illustrated by artificial intelligence. Select any Bible verse to see the AI-generated graphic depicting the verse. The images are pretty accurate and not as abstract as I was expecting!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
