Editor's Pick
RealWorld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
See how the exact same Medium.com clone (called Conduit) is built using different frontends and backends. Yes, you can mix and match them, because they all adhere to the same API spec.
While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it.
RealWorld solves this by allowing you to choose any frontend (React, Angular, & more) and any backend (Node, Django, & more).
Accessibility
Accessibility overlays are evil and they need to die
An accessibility overlay (sometimes called an accessibility widget) is a piece of software that promises to make your website accessible without you lifting a finger. They let users change accessibility settings while on your website and customize the browsing experience.
All you need to do is add it to your website through a couple of lines of code and boom! Your website is accessible!
Isn’t it?
Everybody loves quick and easy solutions. But unfortunately, website accessibility isn’t that simple.
Why is reaching WCAG level AAA not recommended?
I am totally for implementing parts of WCAG AAA, even for general purpose websites and web applications. I would even argue that legislation is too permissive and that more AAA ought to be required, but that will remain just a wish when we consider current state of accessibility maturity of most of organizations (that can’t even conform to levels A and AA).
A Step-by-Step Guide to Conducting a Web Accessibility Audit
The idea of an accessibility audit might sound overwhelming, especially if you’ve never conducted one before. But if you’re serious about making your digital content accessible to everyone, it’s an essential step.
In this guide, you’ll learn how to audit your website or application to verify accessibility and uncover how audit data can help you make meaningful improvements that benefit all users.
CSS
CSS performance optimization
When developing a website, you need to consider how the browser is handling the CSS on your site. To mitigate any performance issues that CSS might be causing, you should optimize it. For example, you should optimize the CSS to mitigate render-blocking and minimize the number of required reflows. This article walks you through key CSS performance optimization techniques.
cssnano - Deliver your website's styles, faster
cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.
Two CSS Properties For Trimming Text Box Whitespace
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the first formatted line of text and below the last formatted line of text in a text box, making the text box vertically larger than the content within.
This whitespace is called leading, and it appears above and below (so it’s two half-leadings, actually) all lines of text to make the text more readable. However, we only want it to appear in between lines of text, right? We don’t want it to appear along the over or under edges of our text boxes, because then it interferes with our margins, paddings, gaps, and other spacings.
20 Super Useful CSS Animation Libraries
A hand-picked collection of the best 20 CSS animations curated from various sources around the web.
Most of them will generate pure CSS code without requiring any external libraries.
HTML
Handling datetime entries with native HTML inputs
Recently I needed to handle datetime objects in a small web application. In the past I've reached out for some JavaScript polyfill library to have a visual input widget for the user. But trying to keep the dependencies small this time, I've checked what new input types HTML 5 has to offer and how well they are supported out of the box.
While the current support is surprisingly good, you may still want to fall back to a JavaScript alternative, especially when support on iOS mobile is required. Following is a summary of the experience (in 2024) for different HTML input types related to date and time.
JavaScript
Understanding Concurrency, Parallelism and JS
Up until now, I was not aware that concurrency and parallelism were actually different things since they are often used interchangeably by some. I just learned that this is not the case while reading Chapter 9 of the book “Clojure for the Brave and True.”
This made me want to learn more about concepts related to concurrency and parallelism, especially concerning the programming language I know best: JavaScript. So this essay is basically a collection of notes I made during this learning process.
UAParser.js - Abstracts Away The Hassle of User-Agent Detection
UAParser.js filters the noise away and only extracts the most meaningful data in a well-structured format. Also available as jQuery plugin & TypeScript-ready development.
Oruga - a lightweight UI components library for Vue.js without any dependency
Oruga is a lightweight UI components library for Vue.js without any dependency. It offers a set of easily customisable components and doesn't depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS, etc). Therefore, it doesn't provide a grid system or CSS utilities, but you can integrate any CSS framework you like.
How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite
Creating a Chrome extension can be a fun and rewarding project, especially when you combine powerful tools like React, TypeScript, TailwindCSS, and Vite. In this article, we'll walk you through the entire process step-by-step, ensuring you have a clear understanding of how to build your own Chrome extension in 2024.
date-fns v4.0 is out with first-class time zones support
date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. It has 200+ functions for all occasions.
UX
Struggling with tech? User interfaces are too complex for many — and it’s widening the digital divide
Practice alone is not enough to guarantee ease-of-use, say researchers.
The research findings also show that age remains the most important factor in how well an individual can use applications. Older people clearly took more time to complete their tasks, and they also felt that the assignments were more burdensome
Miscellaneous
Kimmy's interview/job search tracking spreadsheet template
An example spreadsheet to use for job search tracking. Keep track of where you are with a company, when you applied, where the role is located, salary range, etc. Very useful for record keeping and especially any unemployment insurance compliance.
RealWorld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
See how the exact same Medium.com clone (called Conduit) is built using different frontends and backends. Yes, you can mix and match them, because they all adhere to the same API spec.
While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it.
RealWorld solves this by allowing you to choose any frontend (React, Angular, & more) and any backend (Node, Django, & more).
An incomplete list of skills senior engineers need, beyond coding
For varying levels of seniority, from senior, to staff, and beyond.