~frontendfocus | Bookmarks (247)

You Might Not Have a Web Performance Problem — Some caution and caveats to consider when it comes to Lighthouse results and the performance picture they can paint.

[Workshop] How to Build Testing Culture on Your Team — Join our live session to learn strategies for gaining buy-in, balancing testing, and integrating it into daily workflows.

▶  HTML & CSS for Absolute Beginners — Kevin’s started the year by sharing this epic 50-video course — it explores everything from syntax, page structure, semantic HTML, CSS specificity, and much more. Assumes zero knowledge so, although entertaining and beneficial enough for us all, is perfect for a beginner — one to pass along to those starting out.

Easing Wizard: A CSS Easings Editor and Generator — We’ve shared tools like this before, but this one might be the best-designed one yet. You can copy the code as CSS or Tailwind and there’s an option to deep link to the current easing config settings.

Protect Against Bots, Fraud, and Abuse in Real Time — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today.

Open Props UI — A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Version 1.0 hit yesterday, adding a ton of components. Repo here.

Photo Gradient: An Online Tool to Generate & Customize Mesh Gradients From Any Image — The download is in PNG format and you can also just randomly generate and edit mesh gradients without uploading an image.

tailwind-to-inline: Transform Tailwind Classes to Inline Styles — This is an npm script you can run on your Tailwind-based templates should you want to convert them to inline styles, such as for use in HTML emails.

Knowing CSS is Mastery to Frontend Development — Frameworks come and go, so Anselm reminds us that understanding the underlying mechanisms of a language is the key to really mastering it.

CSS Variables Editor: A Chrome Extension for Managing Colors in CSS Variables — Works with any site that uses CSS variables, but is designed to work well with shadcn/ui or daisyUI. You can also use it to check color contrast accessibility scores and generate palettes via AI.

Flexoki — An Open-Source Color Scheme for Prose & Code — If you’re looking for a nice color palette to reach for beyond the Tailwind CSS usuals, this here is a solid option. Lots of nice inky colours, inspired by ink/paint pigments on paper. There’s a good explainer here too on the decisions made. Repo here.

Type Scale Generator: Interactive Type Scale Editor & Code Generator — Provides a live preview of the settings you choose and you can export the code as CSS, SCSS, Tailwind, or even JSON for use in WordPress.

The Future of Htmx — htmx is the new jQuery? Well, it’s an ideal that the htmx team are actually striving for, looking to emulate the “technical characteristics of jQuery that make it such a low-cost, high-value addition to the toolkits of web developers”.

Easing Graphs: A Gallery of Easing Graphs for CSS and Framer Motion — You can select any of the graphs to interactively customize the easing code as needed, and you can filter by the style of easing (in, out, in-out). Code can be copied as cubic-bezier-based CSS or Framer Motion component.

jsontr.ee: A Library to Visualize JSON Structures as Dynamic SVG Tree Diagrams — You can try it out on this playground, which provides the option to download the diagram as PNG, or use it in an app with customizable styles.

DOOM: The Gallery Experience — A game developer has created this amusing version of DOOM, parodying art gallery openings, complete with curated pieces, wine, fancy music, and even hors d’oeuvres. If you fancy starting the new year with some culture then this is playable directly in the browser (which gives me an excuse to share it here...).

Tipex: An Advanced Rich Text Editor for Svelte — Based on the popular Tiptap editor framework, it’s customizable, has theming support, and is Svelte 5-ready. Here’s a live example.

Principles of Web Accessibility: How to Approach Accessible Web Interface Design — A dozen, snappy high-level guiding principles for approaching web accessibility.

'HTML Is Actually a Programming Language. Fight Me' — “HTML’s promise is that we can build, make, code, and do anything we want.”

CSS Wants to Be a 'System' — “At the core of CSS is a series of cascading rules and classes marrying and mingling in an elegant symphony of style application.”

Product Management Is Broken. Engineers Can Fix It — How redefining how PMs and engineers work together helped PostHog optimize everything they do for speed and autonomy.

🗓️ CSS Selectors Knowledge — We shared a bunch of dev focused ‘advent calendars’ last month, but here’s one that we missed — of course the benefit of sharing now means all the doors are open 😉. This resource shares various CSS selectors along with a quick video explainer and quiz to help build out your knowledge.

▶  Reckoning: Frontend's Lost Decade — In this roughly hour long talk Alex discusses platforms, apps, and the mobile web and why it’s important for us to get frontend culture “refocused on users, rather than ‘DX’ snake oil”.

Publishing a Simple Client-Side JS Package to npm with GitHub Actions — As part of the process of building Prompts.js, a new library for creating simple await-able alternatives to alert(), confirm() and prompt(), Simon wanted to make it easy to publish as an npm package too.