Editor's Pick
The Modern Guide For Making CSS Shapes
In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.
CSS
Introducing the CSS anchor positioning API
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements relative to other elements, known as anchors. This API simplifies complex layout requirements for many interface features like menus and submenus, tooltips, selects, labels, cards, settings dialogs, and many more. With anchor positioning built into the browser, you'll be able to build layered user interfaces without relying on third-party libraries, opening a world of creative possibilities.
Pushing CSS :has() to its limits - hover-highlighted parentheses, variable bindings, and more
An old saying goes, "if you can do it with CSS, don't do it with JavaScript". With the new additions of :has() and :not() in CSS, I decided to test this theory.
The CSS stepped value math functions are now in Baseline 2024
All major engines now support the CSS stepped value math functions— round(), mod(), and rem().
The Modern Guide For Making CSS Shapes
In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.
JavaScript
Digging for SSRF in NextJS apps
At Assetnote, we encounter sites running NextJS extremely often; in this blog post we will detail some common misconfigurations we find in NextJS websites, along with a vulnerability we found in the framework.
As the world increasingly adopts static single-page apps and frameworks, it may be tempting to overlook testing them. The term 'static' might imply a lack of functionality and minimal risk. Yet, these frameworks often rely on numerous underlying APIs and logic, presenting a considerable attack surface.
Ultimately, vulnerabilities such as the one above highlight that modern frameworks are not a complete solution to the security challenges faced by earlier CMS technologies.
Using the Page Visibility API
This post takes a look at what page visibility is, how you can use the Page Visibility API in your applications, and describes pitfalls to avoid if you build features around this functionality.
tsParticles - TypeScript Particles
Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
Various samples here.
Build your own HTMX
Crafting a minimalist eighty-percent-of-HTMX-like library from scratch, in under 300 lines of code, focusing on the essential features and a straightforward implementation.
Miscellaneous
Protecting your email address via SVG instead of JS
Conventionally, email addresses published on webpages may be protected from email-harvesting spambots via various HTML, CSS & JS-based techniques. This alternative technique is SVG-based.
Live demo of this accessible, no-javascript technique here.
The Dilemmas You'll Face When Creating a Component Library
Building a component library is a challenging and rewarding experience, but there’s more to it than writing great-looking components. At every step of the journey, you’ll need to make choices to ensure your library is built appropriately for its intended audience.
Visual design rules you can safely follow every time
You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every time.