Friday Front-End

👋🏻 This account has moved! You can find us on Mastodon at @fridayfrontend" target="_blank" rel="nofollow noopener">hachyderm.io/@fridayfrontend or Bluesky at bsky.app/profile/friday…

Plain Vanilla: "An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just #HTML, #CSS, and #JavaScript." plainvanillaweb.com/index.html

Today's lunch video is "Please, don’t use viewport units for font sizes" - "When people find out about #CSS viewport units, one of the first things they often do with them is create fluid type, but there are some problems that can cause." youtube.com/watch?v=G1buM5…

Recipes For Detecting Support For #CSS At-Rules: "The CSSWG decided in 2022 to add the prior at-rule() wrapper function. Two years later we don’t have a lot of updates on when it will be added to browsers. So, how can we check for support in the meantime?" css-tricks.com/recipes-for-de…

#CSS Fan Out with Grid and @property: "A "fan out" animation involves sequentially revealing items from a stack with a bouncy effect. By using CSS grid, we save quite a bit of fiddly positioning work." frontendmasters.com/blog/css-fan-o…

A Local-First Case Study: "How I built a local-first #JavaScript app for planning trips, and what I learned about the current state of the local-first ecosystem along the way." jakelazaroff.com/words/a-local-…

The Golden Ratio in #CSS: "In this tutorial, we'll re-create the Golden Ratio Diagram in CSS, using a few grid-declarations and some additional tricks." dev.to/madsstoumann/t…

I wasted a day on #CSS selector performance to make a website load 2ms faster: "I felt like Indiana Jones staring at the holy grail. And yet, the phrase 'CSS selector efficiency is not something to worry about in 2024' kept ringing through my head." trysmudford.com/blog/i-spent-a…

Today's lunch video is "My process building websites from a design with #HTML & #CSS" - "It's a sped-up overview of my whole process, from setting up the project, interpreting the Figma design into code, and of course trouble shooting and problem solving." youtube.com/watch?v=Pj7wPj…

Building the Perfect Logo Strip: "We can adjust the height of each logo based on its aspect ratio. If a logo is wider than it is tall, we'll reduce its height. The wider the logo, the smaller its height. This way, all logos maintain a visual balance." #CSS 9elements.com/blog/building-…

Choosing a Masonry Syntax in #CSS: "Back in 2020, Firefox released a prototype for doing ‘masonry’ layout in CSS. Now all the browsers are eager to ship something, but there’s a hot debate about the best syntax to use." oddbird.net/2024/10/01/gri…

#WebComponents are not Framework Components — and That’s Okay: "The bottom line is, web components reduce the number of use cases where we need to reach for a framework, but complex large applications will likely still benefit from one." lea.verou.me/blog/2024/wcs-…

#CSS Split Effects with no Content Duplication: "But we can do something like this with no text duplication whatsoever… The trick here is to put the text fill, the text stroke and the progress area each on one RGB channel." frontendmasters.com/blog/split-eff…

Redesign Case Study: "A few days ago, I published a new design for my website. In this article, I will discuss why I redesigned it, the process, and a few highlights from the design in general." #CSS ishadeed.com/article/redesi…

Today's lunch video is about #CSS Masonry Layouts: "I hope I did justice to a complex topic people have *very strong* feelings about. I certainly tried to share both takes clearly and fairly." youtube.com/watch?v=3h6BCT…

Introducing TODS – "A new open source web typography project. The idea is to have a default #CSS file to set sensible typographic defaults for use on prose text, making particular use of the font features provided by OpenType." clagnut.com/blog/2433/

New Values and Functions in #CSS: "The CSS Working Group released the first Public Working Draft for the CSS Values and Units Module Level 5. It describes the values and units and the syntax used for them, and it comes with some interesting new features." alvaromontoro.com/blog/68062/new…

Solved by #CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up: "By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value." bram.us/2024/09/29/sol…

Orange You Accessible? A Mini Case Study on Color Ratio: "Join me as I qualitatively deconstruct why the white text on an orange button is more legible than the black text, despite what quantitative results such as contrast ratios would suggest." #a11y bounteous.com/insights/2019/…

#SVG Coding Examples: Useful Recipes For Writing Vectors By Hand: "You’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add 'SVG coding' to your toolbox." smashingmagazine.com/2024/09/svg-co…