OR 

Preload, prefetch and other link tags

Ivan Akulov has collected a whole bunch of information and know-how on making things load a bit more quickly with preload and prefetch. That‘s great in and of itself, but he also points to something new to me the as attribute: link rel="preload" href="/style.css" as="style" / Supposedly, this helps browsers prioritize when to download assets and which assets to load. My favorite part of this post is Ivan‘s quick summary at the end w

favicon of http://css-tricks.com

That Time I Tried Browsing the Web Without CSS

CSS is what gives every website its design. Websites sure aren‘t very fun and friendly without it! I‘ve read about somebody going a week without JavaScript and how the experience resulted in websites that were faster, though certain aspects of them would not function as expected. But CSS. Turning off CSS while browsing the web wouldn‘t exactly make the web far less usable... right? Or, like JavaScript, would some features not wo

favicon of http://css-tricks.com

Creating Reusable Base Classes in TypeScript with a Real-Life Example

Hey CSS-Tricksters! Bryan Hughes was kind enough to take a concept from an existing post he published on converting to TypeScript and take it a few couple steps further in this post to elaborate on creating reusable base classes. While this post doesn‘t require reading the other one, it‘s certainly worth checking it out because it covers the difficult task of rewriting a codebase and writing unit tests to help the process. Johnny-Five

favicon of http://css-tricks.com

Faking env() to Use it Now

There is already an env() function in CSS, but it kinda came out of nowhere as an Apple thing for dealing with "The Notch" but it has made it‘s way to be a draft spec. The point will be for UAs or authors to declare variables that cannot be changed. Global const for CSS, sorta. That spec doesn‘t seem to suggest how we‘ll actually set those env() values just yet. If you want them now, the easiest way to Read article The post F

favicon of http://css-tricks.com

Who Are Design Systems For?

Specific design systems, I mean. Design systems, as a concept, are something just about any site can benefit from. A lot of hype goes into design systems these days. Just the other day, an organization‘s published their design system publicly and I got a slew of DMs, emails, and Slack messages encouraging me to check it out. "Looks good to me," I said. But I‘m merely knocking on the hood of a new car, so to speak. I haven‘t sat

favicon of http://css-tricks.com

The Circle of a React Lifecycle

A React component goes through different phases as it lives in an application, though it might not be evident that anything is happening behind the scenes. Those phases are: mounting updating unmounting error handling There are methods in each of these phases that make it possible to perform specific actions on the component during that phase. For example, when fetching data from a network, you‘d want to call the function that handles the

favicon of http://css-tricks.com

Netlify Functions for Sending Emails

Let‘s say you‘re rocking a JAMstack-style site (no server-side languages in use), but you want to do something rather dynamic like send an email. Not a problem! That‘s the whole point of JAMstack. It‘s not just static hosting. It‘s that plus doing anything else you wanna do through JavaScript and APIs. Here‘s the setup: You need a service to help you send the email. Let‘s just pick Sparkpost out of a hat

favicon of http://css-tricks.com

Clever code

This week, Chris Ferdinandi examined a clever JavaScript snippet, one that‘s written creatively with new syntax features, but is perhaps less readable and performant. It‘s a quick read, but his callout of our industry‘s fixation on cleverness is worth... calling out: ...we‘ve become obsessed as an industry with brevity and clever code, and it results in code that‘s sometimes less performant, and typically harder to

favicon of http://css-tricks.com

Could Grouping HTML Classes Make Them More Readable?

You can have multiple classes on an HTML element: div class="module p-2"/div Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply: .module { } .p-2 { } const div = document.querySelector("div"); console.log(div.classList.contains("module")); // true console.log(div.classList.contains("p-3")); // false But what about grouping them? All we have here is a space-separated string. Maybe that‘s fine.

favicon of http://css-tricks.com

So, You Wanna Submit a Proposal to Speak at an Event

You‘ve been scouring the web for upcoming events. You‘ve subscribed to Developer Avocados and you‘ve bookmarked conferences.css-tricks.com. And now you‘ve found a call for proposals (CFP) that you can‘t wait to enter. You quickly fill out the online form and your pinky races towards the Enter button... Stop. Take a deep breath. And move slowly away from the keyboard. As a conference organizer, I‘ve gone through

favicon of http://css-tricks.com

WooCommerce in a Data-Driven World

(This is a sponsored post.) WooCommerce recently made an entire overhaul of its highly visible dashboard screen in the WordPress admin available as a new plugin that can be downloaded free from the WordPress Plugin Directory. The new design is gorgeous, of course. I mean, anytime WooCommerce touches an admin screen, other plugin developers really pay attention because it influences they way many of them approach UI in WordPress. But the real rea

favicon of http://css-tricks.com

The Power of Named Transitions in Vue

Vue offers several ways to control how an element or component visually appears when inserted into the DOM. Examples can be fading in, sliding in, or other visual effects. Almost all of this functionality is based around a single component: the transition component. A simple example of this is with a single v-if based on a Boolean. When the Boolean is true, the element appears. When the Boolean is false, the element disappears. Normally, this ele

favicon of http://css-tricks.com

A Website is a Car and Not a Book

I‘ve been wondering for a good long while why it feels like web design and development isn‘t respected as much as native app development, and why the front-end role in many organizations is seen as a nice-to-have rather than a vital part of the business. Why is it so hard to see that this gig we call "front-end development" is crucial for business and even the day-to-day lives of users? Is it just me that feels this way? We depend

favicon of http://css-tricks.com

Tabs: It‘s Complicated

I‘ve said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes. const button = document.querySelector(".my-button"); const element = document.querySelector(".content"); button.addEventListener("click", function() { element.classList.toggle("sparkles"); }); We could use that skill to build some tabs, right? Right. We got this. Say we have this changing classe

favicon of http://css-tricks.com

Inclusively Hidden

Scott O‘Hara recently published "Inclusively Hidden," a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when it comes to the web! What complicates this is that hidden begs the question: hidden for whom? Different answers to that have different solutions: Hidden for everyone? display: none; or visibility: hidden; or the hidden attribute. (But watch out for that hidden attribute, says Monica Dinc

favicon of http://css-tricks.com

How to Get a Progressive Web App into the Google Play Store

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be able to install the app using app stores?" The answer has traditionally been no, but this changed with Chrome 72 which shipped a new feature called TWA (Trusted Web Activities). Trusted Web Activities are a new way to integrate your web-app content such as your PWA with yourAndroid app Re

favicon of http://css-tricks.com