Editor's Pick
Hide Data in PNG Files Using JavaScript: A Step-by-Step Guide
Hiding data inside images is an ingenious method of steganography, leveraging the PNG format's structure to store information inconspicuously. This article will explain how to embed and retrieve data within PNG files using the Least Significant Bit (LSB) technique, alongside practical JavaScript code examples.
Accessibility
FTC Order Requires Online Marketer to Pay $1 Million for Deceptive Claims that its AI Product Could Make Websites Compliant with Accessibility Guidelines
The Federal Trade Commission will require software provider accessiBe to pay $1 million to settle allegations that it misrepresented the ability of its AI-powered web accessibility tool to make any website compliant with the Web Content Accessibility Guidelines (WCAG) for people with disabilities.
Accessibility essentials every front-end developer should know
Many developers view accessibility as an overwhelming task, requiring a lot of extra effort or specialized knowledge. But a few basic practices can make a significant impact. In this article, I'll cover the key accessibility principles I believe every Front-end developer should apply when building components.
Why are my live regions not working?
Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work.
CSS
Easing Wizard - CSS Easing Editor
Generate and customize CSS easing functions with ease and magical precision using Easing Wizard.
Easing Graphs
A collection of easing graphs for web developers. You can completely customize each easing graph and the resulting code is available to copy out as plain CSS or a Framer Motion component.
Troubleshooting CSS sticky positioning
Fix sticky positioning issues in CSS, from missing offsets to overflow conflicts in flex, grid, and container height constraints.
Debug CSS with Gemini
Chrome DevTools gets the new experimental AI assistance panel where you can chat with Gemini and get help debugging your CSS.
CSS Flexbox Playground - Interactive CSS Flexbox Learning Tool
Interactive tool to learn and experiment with CSS Flexbox properties in real-time.
Cascading Spy Sheets: Exploiting the Complexity of Modern CSS for Email and Browser Fingerprinting
In an attempt to combat user tracking, both privacy-aware browsers (e.g., Tor) and email applications usually disable JavaScript. This effectively closes a major angle for user fingerprinting. However, recent findings hint at the potential for privacy leakage through selected Cascading Style Sheets (CSS) features. Nevertheless, the full fingerprinting potential of CSS remains unknown, and it is unclear if attacks apply to more restrictive settings such as email. In this paper, we systematically investigate the modern dynamic features of CSS and their applicability for script-less fingerprinting, bypassing many state-of-the-art mitigations. We present three innovative techniques based on fuzzing and templating that exploit nuances in CSS container queries, arithmetic functions, and complex selectors. This allows us to infer detailed application, OS, and hardware configurations at high accuracy.
A CSS-only clock showing the current time
What time is it? We can answer this question using only CSS. It's a single-element implementation powered by modern CSS.
A chrome-only experimentation for now.
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines
10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.
CSS Hover Effects: 40 Engaging Animations To Try
Discover 40+ CSS hover effects, from holographic cards to liquid buttons, all complete with live CodePen demos and code.
CSS Variables Editor - AI Browser Extension for managing colors in CSS Variables
Document your Color Palette: Quickly see all the reusable color values in your Design System. All global CSS variables are shown. Your codebase becomes its own documentation.
Change colors from the browser: Changing a color in the Browser Extension updates the CSS Variable in the webpage, showing you the changes in real-time.
Check Accessibility: Check the contrast of your color palette for WCAG guidelines. Easily adjust saturation and lightness when needed.
Export your changes: Export changed CSS Variables.
AI-generated color palettes: Generate color palettes in seconds and see the results in your actual app (requires a OpenAI or Anthropic API Key).
Running animations without keyframes
Using the new@starting-style you can create animations without using @keyframes. It's not a replacement for the classic way to create animations but it can be a useful CSS trick in some situations.
HTML
Relatively New Things You Should Know about HTML Heading Into 2025
Not all of this is like absolutely brand spanking new just-dropped-in-2024 stuff. Some of it is, but generally it’s relatively new stuff that’s all pretty great. I’m pointing things out that I think are really worth knowing about. It’s possible you haven’t kept up too much with HTML developments as it tends to, rightfully, move a lot slower than CSS or JavaScript.
JavaScript
But what is a DOM node?
What actually makes an object a DOM node? Is it the prototype? Or is it something else? It seems like a basic question, but the answer turns out to be surprisingly complicated. The best way to investigate what the browser sees as a DOM node is to use a function that’s supposed to accept one, and pass it various things, and see what happens.
JavaScript Best Practices from JetBrains
Learn about the latest JavaScript best practices. This blog post covers some of the recommended best practices when coding with JavaScript.
Hide Data in PNG Files Using JavaScript: A Step-by-Step Guide
Hiding data inside images is an ingenious method of steganography, leveraging the PNG format's structure to store information inconspicuously. This article will explain how to embed and retrieve data within PNG files using the Least Significant Bit (LSB) technique, alongside practical JavaScript code examples.
Using Forced Reflows, the Event Loop, and the Repaint Cycle to Slide Open a Box
Triggering smooth, reliable CSS transitions with JavaScript can be weirdly more complicated than you expect. We're gonna explore it more.
2024 JavaScript Rising Stars
The 9th edition of JavaScript Rising Stars, your guide to the top trends and projects that shaped the JS ecosystem in 2024.
JS-Confuser
JS-Confuser is a powerful JavaScript obfuscation tool that makes your programs impossible to understand, copy, re-use or modify without authorization.
21st.dev – The NPM for Design Engineers
Ship polished UIs faster with ready-to-use React Tailwind components inspired by shadcn/ui. Built by design engineers, for design engineers.
Miscellaneous
DoubleClickjacking: A New Era of UI Redressing
DoubleClickjacking is a new variation on “clickjacking” attacks - enabling malicious websites to trick users into clicking hidden or disguised buttons they never intended to click. Instead of relying on a single click, it takes advantage of a double-click sequence. While it might sound like a small change, it opens the door to new UI manipulation attacks that bypass all known clickjacking protections, including the X-Frame-Options header or a SameSite: Lax/Strict cookie. This technique seemingly affects almost every website, leading to account takeovers on many major platforms.
Knowing CSS is mastery to Frontend Development
There are countless articles why developers should not focus on Frameworks too much and instead learn to understand the underlying languages. But I think rarely we can find good reasons except that Frameworks come and go. To me, the main reason is different: You won’t be a master at frontend development if you don’t understand underlying mechanisms of a language.
Nowadays people can write great React and TypeScript code. Most of the time a component library like MUI, Tailwind and others are used for styling. However, nearly no one is able to judge whether the CSS in the codebase is good or far from optimal. It is magically applied by our toolchain into the HTML and we struggle to understand why the website is getting slower and slower.
And that means in the end again: If you know CSS, you also know the style framework. If you understand JavaScript, TypeScript is not a big problem for you. And that makes you a Senior or Principal.
Not every user owns an iPhone
As software engineers and technologists its common to have access to some powerful devices and super fast bandwidths. It’s highly likely that you will be developing/testing on a high end Mac (or similar) or pulling out an expensive mobile device such as an iPhone from your pocket.
But we need to be careful that this doesn’t lull us into a false sense of reality. We need to take care that we don’t end up sitting in ivory towers thinking performance of our applications is rosy, when in the wild our users are facing a different reality.