~frontendfocus | Bookmarks (255)

Relative Color Syntax — Some Basic Use Cases — We now have broad support for the relative color syntax. Chris Coyier takes a look a this “extremely powerful way to manipulate colors in CSS” in relation to colors you're already using.

The Puppeteer Browser Control Library Announces Official Firefox Support — As of version 23, the Puppeteer browser automation library now has first-class support for Firefox.

How Google Handles JavaScript In Its Indexing Process — At one point if you wanted Google to index your content it needed to be directly in the HTML and not dynamically rendered with JavaScript. Things have since changed of course , but how much?

▶  Start Over-Engineering Your CSS — An interesting talk from the recent CSS Day conference about purposely going “over the top and embracing complexity” as a way to deepen our understanding of CSS.

▶  Japanese Web Design: Weird, But It Works. Here's Why — “beneath the overwhelming user interface lies undeniable psychology”.

HTML Web Components Can Have a Little Shadow DOM, As A Treat — Scott notes that some of the current discourse around Web Components “tends to conflate a couple of things”, chiefly around augmenting HTML via custom elements and how the Shadow DOM comes into play.

Create Interactive Tutorials in the Browser — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure.

ObsoHTML: Node and CLI Tool to Find Obsolete HTML — ObsoHTML is a Node.js script designed to scan HTML, PHP, JavaScript, and TypeScript files within a specified directory for obsolete or proprietary HTML attributes and elements. Should help keep things tidy.

tailwindcss-highlights: A Tailwind Plugin to Add Highlights to Text — The term “highlights” here refers to an effect similar to a highlighter pen for marking up an actual paper document. Includes 20 variants of the effect, which you can see here.

▶  Inter 4.0: A Big Font Update for UI Design — Now with true italics, optical sizing changes, and stylistic alternatives. However, this version 4.0 update doesn’t appear to be on Google Fonts yet.

Slab: A Programmable Markup Language That Simplifies The Creation of HTML — An alternative to tools like Pug, claiming to offer advantages like improved readability, built-in programming constructs, integration with JSON data, and an easy learning curve.

Formatify: Free Client Side Media Conversion on Any Device — Upload any type of media file for a quick and simple way to convert to different formats, including 12 different image formats, 16 video, and 7 audio.

Is It Time To Talk About “CSS5”? — The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3 way back in 2009.

A Rube Goldberg HTML Form — A fun, complicated chain-reaction HTML machine in the Rube Goldberg style. Just start typing into the form fields to watch it kick into.. gear.

The Art of Dithering and Retro Shading for the Web — A lot of time spent building a striking effect for the Web has turned into an equally fantastic deep dive on the concepts around rendering graphical effects using shaders. This is advanced stuff, but it’s great to know it’s possible.

The First Newsletter Dedicated to Product Engineers — The fastest growing startups increasingly rely on product engineers. These are engineers with the skills to figure out what to build. Product for Engineers is dedicated to sharing the skills and strategies needed to succeed in this role.

The EU's 'AI Act' is Here — Not particularly frontend focused, but this EU legislation could well have far reaching ramifications. The Artificial Intelligence Act is the first-ever legal framework on AI, attempting to address its risks along with positioning Europe as a leader in AI legislation.

Video with Alpha Transparency on the Web — Native ways of tackling rendering video with transparency are said to be “inefficient and buggy”, but Jake has a solution (and a ~2kB npm package to boot).

What If You Used Container Units For… Everything? — An interesting experiment, but Chris notes “that it’s not that easy. There are plenty of things that container queries are awkward at or just not the right unit for”.

HTML Web Components Make Progressive Enhancement And CSS Encapsulation Easier — A look at three specific examples that show off key features of Web Components, including CSS style encapsulation and opportunities for progressive enhancement.

▶  3D Scene → Object → Chicken: A Complete 3D CSS Guide — A new video series looking at creating 3D scenes and objects with CSS.

Browsers, Cookies and Surfing the Web: The Quirky History of Internet Lingo — As new technologies develop, we adopt words or create novel ones to fill in the linguistic gaps.

Learn Web Components — If you’re looking to scrub on your web components know-how, this road map should prove useful. It’s a curated collection of third party articles covering a wide range of related knowledge.

Calendar Link: Dynamically Generate Event Links for Calendars — Generate event links for Google Calendar, Yahoo Calendar, Outlook, etc.