Skip to main content
Fresh Article

CSS-Only Marquee Effect

You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.

You’ll probably want to aria-hidden all but one of them if you need to duplicate the text. Or, you could use a very clever CSS trick to “duplicate” the text using text-shadow.

Nice to see prefers-reduced-motion in there stopping the effect when it should be. … Read article “CSS-Only Marquee Effect”

Article

Getting JavaScript to Talk to CSS and Sass

JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind — something not involving a structural change, but rather putting CSS custom properties and even Sass variables to use.… Read article “Getting JavaScript to Talk to CSS and Sass”

Link

Google’s Technical Writing Guide

Article

Accessibility Links

Austin Gil has kicked off the first in a five-part series about “HTML Forms Right” and to starts with semantics. It’s talking to the “we build our front-ends with JavaScript” crowd. The first block of code is an example of an Ajax form submission where the data submitted is gathered through the JavaScript API FormData.… Read article “Accessibility Links”

Link

typespecimens.io

Article

Why Do Some HTML Elements Become Deprecated?

The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things have gotten phased out as newer and better alternatives have been created, and we say that they have been deprecated.

Deprecated. It’s a word we use and see often. But have you stopped to think about what it means in practice? What are some examples of deprecated web elements, and why … Read article “Why Do Some HTML Elements Become Deprecated?”

Article

Rethinking Code Comments

Justin Duke asks if treating code comments like footnotes could help us understand the code in a file better. In his mockup, all the comments are hidden by default and require a click to reveal:… Read article “Rethinking Code Comments”

Article

Web Performance Checklist

The other day, I realized that web performance is an enormous topic covering so very much — from minimizing assets to using certain file formats, it can be an awful lot to keep in mind while building a website. It’s certainly far too much for me to remember!

So I made a web performance checklist. It’s a Notion doc that I can fork and use to mark completed items whenever I start a new project. It also contains a … Read article “Web Performance Checklist”

Link

An Annotated Docker Config for Front-End Web Development

Article

Cloudinary Studio

I knew that Cloudinary worked with video as well as images but, the other day, I was curious if Cloudinary offered a video player embed just like other video hosts do (e.g. YouTube, Vimeo, etc). Like an <iframe> that comes with a special player.

I was curious because, as much as I appreciate the simplicity of just tossing a <video> on a page, there is one little hurdle that I always forget: you have to use a poster attribute if … Read article “Cloudinary Studio”

Keep browsing in the archives

Monthly Mixup

Article

Ideas Behind Responsive Emails

Article

Design Systems and Portfolios

Snippet

Triangular List Bullets

Monthly Sponsor
Thanks, Frontend Masters!