2024-01-17-Inspirations

Read about the 10 most common issues our teams discovered using both automated and manual testing in 2023.

An interactive guide on designing better target sizes on the web.

In this post Matt discusses 16 accessibility issues and solutions we've encountered while building a bi-lingual website application for a public sector organisation.

(...) While htmx can be used as a framework, it’s a framework that deviates far less from the web’s semantics than the JavaScript frameworks do, and will benefit from improvements in those semantics with no additional work from the user, thanks to the web’s excellent backwards compatibility guarantees. If you want to build a website that lasts for a long time, these qualities make htmx a substantially better bet than many of its contemporaries.

HTMX Playground allows you to write code in a backend-like environment, running entirely inside the browser. You can define endpoints within server.js and render your own templates. It will run a mock server that intercepts outgoing requests from HTMX.

A showcase of what is possible with Progressive Web Apps today.

Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity.

You could pick a complex SPA framework that reinvents everything and forces you to learn patterns and concepts that are completely made-up. Or, you can use the Web platform as it was intended. Adding some thin layers on top of it, to add those last bits we need in order to match the user experience that people expect us to be able to deliver. The end goal is to make our life easier, simpler, because using this stack you can learn the few concepts htmx and Alpine require in an afternoon, and then that’s it.

A complete overview of the JavaScript landscape in 2023: trends about frontend, fullstack and Node.js frameworks, React and Vue.js ecosystems, build tools, state management...

Reflow issues can be tricky to fix. Knowing what the usual suspects are is half the battle. TPGi's Doug Abrams highlights 4 red flags to watch out for. (...) Keep an eye out for these red flags. They can make the difference between meeting the letter of the guideline and actually being helpful to people with disabilities.

The strength of this technique lies in its inheritence capabilities. You can easily provide some state to all descendant DOM nodes, while restricting access to ancestors. At any level, you can also override the state for a particular sub-tree. These kinds of things are quite difficult to do with just JavaScript.

You will discover how to use logical properties, flexbox, grid, subgrid and writing directions to create layouts that adapt to different screen sizes, orientations and languages. You will also explore the new color specs that allow you to work with a wider range of colors and color spaces, such as rgb, hsl, hsv, hwb, lch, lab, oklab and oklch. You will also learn about the new measurement units that can help you scale your typography and design elements. Finally, you will see how container and style queries can enable you to apply styles based on the size and state of the parent element or the component itself.

With browser support for @property nearing completion, we delve into the technical aspects of this CSS feature. Explore inner workings and uncover benefits of @property, ready for production use.

In my day job, I work on a JavaScript framework (LWC). And although I’ve been working on it for almost three years, I still feel like a dilettante. When I read about what’s going on in …

From table hacks to CSS kludges, these are some of the techniques that helped web developers get their fancy pages on the internet.