Joined August 2015
1,645 Photos and videos
👋🏻 This account has moved! You can find us on Mastodon at hachyderm.io/@fridayfrontend or Bluesky at bsky.app/profile/fridayfront…
1
2
438
Plain Vanilla: "An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just #HTML, #CSS, and #JavaScript." plainvanillaweb.com/index.ht…

443
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=G1buM51f…

487
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-d…

240
#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…
2
224
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-loc…
206
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/the-gold…
1
2
242
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…
1
164
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=Pj7wPjFR…

1
186
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-…
1
200
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/grid-…
3
172
#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/spl…
199
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/redesig…
167
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=3h6BCTgQ…
152
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/
1
184
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…
163
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/solved-by…
2
195
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/…
1
164
#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…
163