Yay, it’s here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We’ve had grid-gap support for some time, but true to its name, it’s limited to grid layouts. Now we can use gap in either type … The post Safari 14.1 Adds Support for Flexbox Gaps appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

Jim Nielsen quoting Eric Bailey: He references an example on Twitter where someone noted you can use the <details> element to “create a native HTML accordion,” to which someone responded: “this works without Bootstrap? 🤯” What’s the problem here? From … The post Web Languages as Compile Targets appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

Jenny B Kowalski has been posting a-letter-a-day on Instagram exploring multi-axis variable/responsive letterforms. They are very clever in that one of the axes controls an uppercase-to-lowercase conversion, literally morphing the shape of the letters from an uppercase version to a … The post Jenny B Kowalski’s A-Z (and a-z) as Variable Letterforms appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 1 min

Labels are a feature that have existed since the creation of JavaScript. They aren’t new! I don’t think all that many people know about them and I’d even argue they are a bit confusing. But, as we’ll see, labels can … The post You Can Label a JavaScript `if` Statement appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 5 min

This is another excerpt from my new and updated APIs and Asynchronous JS pocket guide. Yesterday, we looked at API credentials and security with vanilla JS. Near the end of the article, I noted… Sometimes, APIs require credentials but don’t provide short term tokens. For example, the Mailchimp API uses a permanent API key with basic auth to authenticate every request. Alternatively, you made need to make an authenticated API call that does not require any input from a user.

Read · 2 min

Do you need a little inspiration boost? Well, then our new collection of wallpapers is for you. Designed with love by the community for the community, the wallpapers are available with and without a calendar for May 2021.

Read · 7 min

I’ve got a podcast that will be 10 years old this coming January! Most of those episodes have one or more guests (plus me and Dave). Despite fancy modern options for recording podcasts with guests, like Riverside.fm or Zencastr… The post Sending Large Files appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 4 min

Raygun is an error and performance monitoring software for websites and mobile apps. In the case of websites, you install their JavaScript snippet onto your site, which takes 2 seconds, and now you’ve got monitoring in place. Why? Well now … The post How to Monitor Core Web Vitals and Take Action with Raygun appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling control, we turn off the list’s markers completely with list-style-type: none, and start … The post List Markers and String Styles appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

This is another excerpt from my new and updated APIs and Asynchronous JS pocket guide. Yesterday, we looked at different ways to authenticate APIs with vanilla JS. Whenever you’re dealing with credentials, you need to be concerned about security. In the article, I had a few examples where the API credentials were hard-coded into the JS file, with this following note… IMPORTANT: You should not store your API credentials in a JS file like this.

Read · 2 min

Beyond the severe toll of the coronavirus pandemic, perhaps no other disruption has transformed user experiences quite like how the tethers to our formerly web-biased era of content have frayed. We’re transitioning to a new world of remote work and digital content. We’re also experimenting with unprecedented content channels that, not too long ago, elicited chuckles at the watercooler, like voice interfaces, digital signage, augmented reality, and virtual reality. Many factors are responsible. Perhaps it’s …

Read · 18 min

Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from [Addy's new book](https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/) (also, check a [free PDF preview](http://provide.smashingmagazine.com/eBooks/image-optimization-sample-chapter.pdf)).

Read · 18 min

This post was written for engineering managers, but anyone is welcome to read it. Let’s talk for a moment about how we talk about our teams. This might not seem like something that needs a whole article dedicated to it, … The post Your Team is Not “Them” appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 6 min

Click, drag, release: you’ve just selected some text on a webpage — probably to copy and paste it somewhere or to share it. Wouldn’t it be cool if selecting that text revealed some options that make those tasks easier? That’s … The post How to Create Actions for Selected Text With the Selection API appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 5 min

This is an excerpt from my new and updated APIs and Asynchronous JS pocket guide. Some APIs—like the Ron Swanson Quotes Generator and Random Dog—work by simply calling an endpoint. Others—like the New York Times and many endpoints for the GitHub API—require you to authenticate who you are before you can make API calls. How to authenticate an API To authenticate you, the API may require: Your username and password.

Read · 2 min

The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance.

Read · 7 min

I was just Hoping for Better Native Page Transitions, and Bramus commented that Chrome is working on something. Looks like it has some fresh enthusiasm for it, as there is a brand new repo, and you can literally test … The post Shared Element Transitions appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as "CSS Variables" but that's not their real name. The post A Complete Guide to Custom Properties appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 18 min

There’s two features I look for in good sci-fi: 1. something I hadn’t imagined before and 2. something that anticipates the automobile, as well as the traffic jam. The YouTube gods smiled up me and surfaced a channel called DUST, a massive collection sci-fi short films. The quality is much better than what you might expect from “free sci-fi” but one of their films, The OceanMaker, is an absolute standout that raptured me and took me somewhere I’ve never been. Extrapolating on the near future Water Wars, The…

Read · 1 min

Over the last few days, we’ve learned about how to create custom events, how to cancel them, and how to create a helper function to make them easier to work with. Today, we’re going to learn about naming conventions: things to do, things to avoid, and some common gotchas. Prefix event names To help prevent naming collisions between the custom events in your library and others, it’s a good idea to prefix them with your library name.

Read · 1 min

You’re probably used to displaying radio buttons in a list format. However, list formats aren’t optimal for scaled items and can slow users down. Scaled items are items that can be quantified or measured on a scale. When they’re in a list format, users need to read each item and think about how they relate […] When You Shouldn’t Display Radio Buttons in a List Format first appeared on UX Movement.

Read · 1 min

When it comes to item selection, items are a list in code. However, that doesn’t mean the items always need to look like a list in pixels. Sometimes users can make selections more efficiently when your items aren’t in a list format. Thinking beyond lists for selecting scaled items will enable you to design forms […] Why You Should Stop Using Radio Buttons for Scaled Items first appeared on UX Movement.

Read · 2 min

Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. In this article, we’re going to take a deep dive into easing functions and see how we can use them to create those natural and stunning animations.

Read · 9 min

The goal of this article is to walk you through use-cases where CSS variables shine.

Read · 6 min

I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate here. As far as I know, no other browser supports this yet … The post Exploring color-contrast() for the First Time appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

I love to make CSS do stuff it shouldn’t. It’s the type of problem-solving brain training you’d get building a calculator in Minecraft, except you probably won’t get a job working with Minecraft Redstone no matter how good you … The post Generating (and Solving!) Sudokus in CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 15 min

Last week, we looked at how to create custom events with vanilla JS, and how to cancel custom events with event.preventDefault(). Today, I’m going to share a helper function I use to make emitting custom events a little bit easier. Creating an emitEvent() helper function To get started, let’s create an emitEvent() function. When emitting custom events, there are three things we may need: an event type, any details we may want to attach to the event, and an element to emit the event on.

Read · 2 min

Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to "layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early — when it’s easier and cheaper to fix them.

Read · 11 min

Robert Nyman and Philip Jägenstedt: Google is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid, position: sticky,  … The post Eliminating five top compatibility pain points on the web appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 4 min

In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The project was done following the ongoing developmental version of WPGraphQL and an excellent tutorial by Henrik … The post Using New Gatsby Source WordPress Plugin appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 20 min

Yesterday, we looked at how to create custom events for your libraries, components, and scripts. Today, I wanted to explore how to cancel custom events. Let’s dig in. What is canceling an event? If your custom event has the cancelable option set to true, you can use the Event.preventDefault() method to cancel it. document.addEventListener('my-custom-event', function (event) { // Cancel the event event.preventDefault(); }); Inside the bit of code that emitted the event, you can then detect if…

Read · 1 min

The CSS Working Group Editor’s Draft for [Selectors Level 4](https://drafts.csswg.org/selectors-4/) includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today!

Read · 8 min

There are some Unicode characters that some browsers just decide they are going to turn into emojis for you. I couldn’t tell you why exactly, but here’s what I see: Chrome on the left. Safari in the simulator on top… The post Text That Sometimes Turns to Emojis appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

Here’s Jess B. Peck writing all about Google’s Core Web Vitals: Let’s step back one. CLS is when you’re about to click on a link, and the whole page shifts and you click on a different link instead. It’s when … The post The Almost-Complete Guide to Cumulative Layout Shift appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 26 min

Try Hotjar for free today! An enjoyable user experience and high conversion rates go hand-in-hand. It makes sense then, that if you want to improve conversion rates, your first task is to improve user experience. To improve UX, deeply understanding … The post Tools to Improve UX and Win Over Your Customers appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 5 min

Not a typical one, at least. Each character is an HTML element, built with CSS. A true web font! Let me elaborate. This is a way to render text without using any font at all. Random text is split with … The post The Making (and Potential Benefits) of a CSS Font appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 12 min

In your JavaScript libraries, components, and snippets, you can emit a custom event that developers can listen for with the Element.addEventListener() method. This provides a way for developers to hook into your code in ways that you didn’t expect or plan for. Let’s look at how it works. The CustomEvent object The CustomEvent object provides a way to create and emit custom events, as well as pass in custom event details.

Read · 1 min

Sometimes it’s the little things in web life that make us look twice. From carousels to documentation to cookie disclaimers, here are some sites taking the mundane and sprinkling in a little magic.

Read · 6 min

Global markets give you access to new customers. All you need to do is inform potential buyers about your product or service.  Your website is a good place to introduce your product or service outside your locale. Localizing your web content sounds like the right way to reach out to the global market. Localization will bridge the language barriers, or the wider scope of differing cultures.  Before we move on further with the discussion, let’s focus on the definition of “localization.”  What i…

Read · 10 min

It would be nice to be able to animate the transition between pages if we want to on the web without resorting to hacks or full-blown architecture choices to achieve it. I could imagine an API that would run stuff… The post Still Hoping for Better Native Page Transitions appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

Page Laubheimer says that if you’re going to do a sticky header… Keep it small. Visually contrast it with the rest of the page. If it’s going to move, keep it minimal. (I’d say, respect prefers-reduced-motion.) Consider “partially persistent … The post Sticky Headers: 5 Ways to Make Them Better appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 8 min

Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it … The post How to Add a Double Border to SVG Shapes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

Yesterday, I wrote about how to get all direct descendants that match a test condition. A substantial number of folks wrote to me asking why I would use the Array.filter() method with the Node.children property instead of using a nested selector with the document.querySelectorAll() method. let tuna = document.querySelectorAll('#sandwiches > .tuna'); This absolutely works when… The parent element has a unique selector, and You want to filter child elements based on a CSS selector.

Read · 1 min

Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more.

Read · 6 min

As designers, we are often burdened by the responsibility of producing and managing website content. It’s not our job to write it, but it’s not the client’s either. We can avert disaster by including content production in the design process.

Read · 10 min

Let’s say you have some HTML like this. <div id="sandwiches"> <div id="one" class="tuna">This will match</div> <div> Hello, world! <div id="two" class="tuna">This will not</div> </div> <div id="three" class="tuna">So will this</div> </div> You want to get only direct descendants of the #sandwich element that have the .tuna class: #one and #three. The #two element also has the .tuna class…

Read · 1 min

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. … The post Intrinsic Typography is the Future of Styling Text on the Web appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 6 min

Container queries are finally here! Now available behind a flag in the latest version of Chrome Canary, you can go ahead and experiment to your heart’s content. Oh, and if you’re not familiar with container queries then check out … The post Say Hello to CSS Container Queries appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 7 min

Let’s explore the plugins providing GraphQL servers to WordPress. When should we use WPGraphQL, and when the GraphQL API for WordPress? Is there some advantage of one over the other, or some particular task that is easier to accomplish with one of them? In this article, we will find out.

Read · 12 min

Online shopping has become an international phenomenon. Users from all over the world now go online to buy their favorite products. A common UX issue international users face is not knowing how much a product and shipping costs because they are in a foreign currency. Stores that don’t convert their currencies give off the impression […] ExchangeRatesAPI: Convert Your Prices to Foreign Currencies for Free first appeared on UX Movement.

Read · 2 min

There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why: When there is CSS available for a page, whether it’s inline or an external stylesheet, the browser delays rendering … The post How to Improve CSS Performance appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 7 min

Need to lay out an element to the right or the left, such that text wraps around it? That’s an easy task for the float property. But what about if you also want to push that element (let’s call it … The post Float an Element to the Bottom Corner appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 5 min

The Element.classList API provides methods that you can use to add(), remove(), toggle() and check if an element contains() a class or classes. let elem = document.querySelector('#sandwich'); // Add the .turkey class elem.classList.add('turkey'); // Remove the .tuna class elem.classList.remove('tuna'); // Toggle the .tomato class on or off // (Add the class if it's not already on the element, remove it if it is.) elem.classList.toggle('tomato'); // Check if an element has…

Read · 1 min

How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out.

Read · 24 min

When I was working on a project that needed an editor component for source code, I really wanted a way to have that editor highlight the syntax its typed. There are projects like this, like CodeMirror, Ace, and … The post Creating an Editable Textarea That Supports Syntax-Highlighted Code appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 6 min

There’s a whole lot of accessibility in this week’s news, from the nuances of using :focus-visible and input placeholders, to accessible typefaces and a Safari bug with :display: contents. Plus, a snippet for a bare-bones web component that supports … The post Platform News: Using :focus-visible, BBC’s New Typeface, Declarative Shadow DOMs, A11Y and Placeholders appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 5 min

The default browser style for <hr> is so weird. It’s basically: border-style: inset; border-width: 1px; The default border-color is black, but the border doesn’t actually look black, because the inset border “adds a split tone to the line … The post Not Your Typical Horizontal Rules appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 7 min

Let’s imagine you have a URL with some query string parameters, and you want to get an object with all of the key/value pairs in that string. let url = 'https://sandwich-shop.com?sandwich=chicken%20salad&bread=wheat&topping=tomato&topping=spicy+mayo'; Today, let’s learn how to do that. Creating a helper function Let’s start by creating a helper function, getParams(). We’ll accept a url as an argument, but use the window.location as a default if one is not provide…

Read · 2 min

If you got 25 minutes to spare, here’s a great episode of Matt Wojciakowski ’s “Tabs vs. Spaces” show where I talk together with my colleagues Erica Draud and Rachel Simone Weil about Edge Developer tools, accessibility, PWAs and what we’re doing to make it easier for beginners to get started.

Read · 1 min

It’s no secret that the technical interview process leaves something to be desired; it’s often riddled with anxiety and stress. In this article, we’ll take a look at seven of the most common mistakes candidates make in their technical interviews and explore ways you can avoid them.

Read · 10 min

There is a lot to think about when implementing a dark mode theme on a website. We have a huge guide on it. There are some very clever quick wins out there, but there are also some quite tricky things … The post Flash of inAccurate coloR Theme (FART) appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

The title of this article is misleading. It’s not actually very important for an Engineering Manager to use career laddering, per se, or my process. It is, however, very important that an Engineering Manager is clear with their employees… The post The Importance of Career Laddering appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 8 min

Svelte is a free and open-source front end JavaScript framework that enables developers to build highly performant applications with smaller application bundles. Svelte also empowers developers with its awesome developer experience. Svelte provides a different approach to building web apps … The post How to Build a FullStack Serverless HN Clone With Svelte and Fauna appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 4 min

JavaScript and the browser environment have changed quite a bit since I first released the Vanilla JS Pocket Guides a few years ago. A lot of the techniques and approaches I recommended in them have been replaced by newer, modern ones that result in less code and a better developer experience. IE is now a deprecated browser. Today, I released a completely updated set of Pocket Guides, with new methods and modern JS approaches.

Read · 3 min

Selling is key to growing your web design business, but it doesn’t have to be complicated! With clear goals, customer research, and proven closing techniques, anyone can find new clients.

Read · 12 min

At Smashing, we’ve been busy over the last few months. We’ve set up new workshops, redesigned our navigation, refined performance and improved accessibility. There are subtle UX changes coming in, and we’d love to share what we’ve been cooking.

Read · 3 min

This is a tremendous CSS-focused tutorial from Adam Argyle. I really like the “just for gap” concept here. Grid is extremely powerful, but you don’t have to use all its abilities every time you reach for it. Here, Adam … The post Building a Settings Component appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 11 min

This is a tremendous CSS-focused tutorial from Adam Argyle. I really like the “just for gap” concept here. Grid is extremely powerful, but you don’t have to use all its abilities every time you reach for it. Here, Adam … The post Building a Settings Component appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 4 min

I‘m not sure how this one came about. But, it‘s a story. This article is more about grokking a concept, one that’s going to help you think about your animations in a different way. It so happens that this particular … The post Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 14 min

A few weeks ago, Dwayne Charrington tweeted: Despite what the gatekeepers tell you, it actually does not matter what Javascript framework or library you use. Whether it’s Angular, Aurelia, React, Svelte, Vue, or even vanilla JS, use whatever does the job and works. And he’s right… sort of. When you’re learning, and when you’re trying to prototype, whatever gets you from “I have no idea what I’m doing” to “whoa!

Read · 1 min

One thing that keeps amazing me about Visual Studio Code is how much it helps you automate annoying tasks when you write code. For example, if you add an img tag to the document you need to know the src and find out the width and height to avoid reflow issues when the image was […]

Read · 1 min

In this article, we will explore the causes of overflow issues and how to solve them. We will also explore how modern features in the developer tools (DevTools) can make the process of fixing and debugging easier.

Read · 6 min

This Robin Sloan fella is an interesting character. Not only have I read his one of his fiction novels, the tremendous Mr. Penumbra’s 24‑Hour Bookstore, but I also use the olive oil he makes with partner Kathryn Tomajan. … The post Cloud study appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

I think it’s fair to think of Netlify as a CDN-backed static file host. But it would also be silly to think that’s all it is. That’s why I think it’s smart for them to have pages like this, comparing … The post Why Netlify? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 1 min

One of the ways you can classify a programming language is by how strongly or weakly typed it is. Here, “typed” means if variables are known at compile time. An example of this would be a scenario where an integer … The post CSS is a Strongly Typed Language appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 7 min

Since 1996, the Space Jam website has remained online, unchanged, a time capsule of the web 25 years ago. In advance of the sequel, Space Jam: A New Legacy, the website has been updated for the first time in over two decades (with the old one thankfully archived at the link above). With both websites available online, Max Böck decided to run a performance test to see how the web from 25 years ago performs against the modern web.

Read · 1 min

In this article, we’ll be building a video streaming app using Nuxt.js and Node.js. Specifically, we’ll build a server-side Node.js app that will handle fetching and streaming videos, generating thumbnails for your videos, and serving captions and subtitles.

Read · 10 min

The location of an interface element plays a crucial role in how much attention it’ll get. Users scan certain screen areas more than others. If you were to use an eye-tracking device to track their eye fixations, you would notice a common scanning pattern. Users of left-to-right languages tend to fixate in the top left […] Diagonal Hierarchy Grid: A Method to Optimize Any Interface Layout first appeared on UX Movement.

Read · 2 min

Let's learn about how CSS container queries work with lots of examples and use-cases.

Read · 7 min

Let’s look at the Fullscreen API in JavaScript. It allows you to do a pretty powerful thing: full screening exactly one particular element you want it to. Not only that, but CSS can help as well with a special selector.… The post How to Leverage the Fullscreen API… and Style It appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 4 min

Get it? Because this blog post is about Around, the wonderful new video call software. I’ve been using it for my video calls and I’d be happy to deliver you a TLDR right off the bat: It’s nice. It … The post See You Around appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 4 min

Like JavaScript, CSS has come a long way over the last few years. Stuff that used to be really hard is now a lot easier, and can be handled in just a few lines of code instead of many. Cross-browser support is great, too! The amazing Stephanie Eckles from Modern CSS has put together an incredibly useful cheat sheet of tiny code snippets for modern CSS layouts and components called SmolCSS.

Read · 1 min

Recently we’ve covered CSS generators, SVG generators and accessible front-end components. This time we look into HTML email, with tools, templates and guides for designers and developers.

Read · 10 min

When you want to save a GIF from Twitter, the interface plays a cruel joke on you. If you context-click the GIF you get a menu that states “Copy GIF address”. All it does though is copy a link to the tweet with the GIF in it, which is pretty pointless. Under the hood Twitter […]

Read · 1 min

UX practitioners can play an important role in growing the UX maturity of the organizations and product teams they work with. This final article in a three-part series presents two additional tactics: education of staff on UX principles and processes.

Read · 20 min

Yesterday, we looked at the Element.getBoundingClientRect() method, and how you can use it to get details about an element’s position in the viewport. Today, let’s look at how to get the height and width of the viewport itself. This one is short-and-sweet. You can use the window.innerHeight property to get the viewport height, and the window.innerWidth to get its width. let viewportHeight = window.innerHeight; let viewportWidth = window.innerWidth; Here’s a demo.

Read · 1 min

If you’re building a WordPress site, you need a good reason not to choose a WordPress form plugin. They are convenient and offer plenty of customizations that would take a ton of effort to build from scratch. They render the … The post Headless Form Submission With the WordPress REST API appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 8 min

I didn’t know this was a thing until Stefan Judis’s post: <a href="https://www.stefanjudis.com/popular-posts/" ping="https://www.stefanjudis.com/tracking/"Read popular posts</a You give an anchor link a URL via a ping attribute, and the browser will hit that URL with a web request … The post The `ping` attribute on anchor links appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app. These new … The post Comparing the New Generation of Build Tools appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 23 min

You can use the Element.getBoundingClientRect() to get information about the size of an element and its position relative to the viewport. For example, let’s say you have an element with the #app ID somewhere in the DOM. <div id="app">Looking for me?</div> You can call the Element.getBoundingClientRect() method on the element to get details about its position in the viewport. let app = document.querySelector('#app'); let details = app.getBoundingClientRect(); Here’s …

Read · 1 min

Have you ever struggled to get the green light on your design proposals? Do you feel like your design process needs to be formalized? Is the COVID19 era becoming a challenge for you when working remotely as a designer? Then keep reading to get to know a methodology to document your design process in this article.

Read · 6 min

You’ve seen the iconic image. Perhaps some of what makes that image so iconic is that people see what they want to see in it. If you see it as a critique of CSS being silly, weird, or confusing, you … The post CSS Is, In Fact, Awesome appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

Rich Harris: Think of it as Next for Svelte. It’s a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on. Great move. I find … The post SvelteKit is in public beta appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 3 min

This post is an introduction to XState as it might be used in a Svelte project. XState is unique in the JavaScript ecosystem. It won’t keep your DOM synced with your application state, but it will help manage your application’s … The post Coordinating Svelte Animations With XState appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 10 min

I’m going to try to show you some things I think are useful and important about axe™ DevTools and use as few words as possible. axe DevTools includes a browser extension which you need no special expertise to use. You … The post axe DevTools Pro appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

Let’s say you have a h1 element with a greeting, like this. <h1>Good evening</h1> You want to replace it with a paragraph that says, “Good morning.” You can use the Node.replaceWith() method to replace an element (and all of its HTML elements and content) with another. Call the Node.replaceWith() method on the target node, and pass in one or more elements or strings as arguments. // Get the target element let h1 = document.

Read · 1 min

Unreliable tests are a living nightmare for anyone who writes automated tests or pays attention to the results. Flaky tests have even given folks nightmares and sleepless nights. In this article, Ramona Schwering shares her experiences to help you get out of this hell or avoid getting into it.

Read · 13 min

One of the best gifts we have as front-end developers is inspect element.

Read · 4 min

It’s certainly worth noting that the Space Jam website, which made its way into umpteen conference talks for being fabulous evidence of the web’s strength in backward compatibility, has been replaced. We could have saw that coming. Everything is … The post Space Jam appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 6 min

“Good news about display: contents and Chrome” — Rachel Andrew notes that the accessibility danger of using display: contents; is fixed in Chrome. The problem was that, say you had a parent div that is laid out as a grid … The post Some Articles About Accessibility I’ve Saved Recently appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

At first, there were flexboxes (the children of a display: flex container). If you wanted them to be visually separate, you had to use content justification (i.e. justify-content: space-between), margin trickery, or sometimes, both. Then along came grids (a … The post Gaps? Gasp! appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 4 min

(This is a sponsored post.) Ten years! That’s a huge milestone for a project, especially one that had a pretty simple goal in mind from the start: give self-hosted WordPress sites many of the same features and functionality enjoyed … The post Jetpack Turns 10! appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 1 min

With many options comes many decisions, and it is easy to drown in all the many benefits of headless CMS. How do we approach evaluating these options? Let’s figure it out.

Read · 14 min

The Element.innerHTML and Element.outerHTML properties can be used to get and set HTML as a string on an element. Today, we’re going to look at how they’re different, and which one you should use. Let’s dig in. The Element.innerHTML property You can use the Element.innerHTML property to get and set the HTML content inside an element as a string. For example, lets say you have some HTML, like this.

Read · 2 min

Recently, I set up unit and integration tests for a Node API in TypeScript, and I couldn't find a lot of resources for setting up and…

Read · 4 min

Three packages of arrived to my door last month and I realized they all have something in common, they’re all visualizations of data and algorithms, so I thought I’d share. W.E.B. Du Bois’s Data Portraits: Visualizing Black America At the turn of the twentieth century W.E.B. Du Bois set out to visualize the black population of Georgia after the Civil War. These colorful charts and graphs, presented at the 1900 Paris Exposition, tell the story of the racial divide in America. Their creator, their place in h…

Read · 1 min

At each company I’ve worked, we have had a split between time spent on Product initiatives and Engineering work. The percentages always changed, sometimes 70% Product, 30% Engineering, sometimes as much as a 50/50 split. The impetus is to make … The post Splitting Time Between Product and Engineering Efforts appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 9 min

It’s <dfn. Jen Kramer and Erika Lee are doing a #30DaysofHTML email list thing-y on Substack, which is an easy subscribe. It’s only been a few days and all of them have little gems, even for someone like me … The post Definition Tag appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read · 2 min

Today, we’re going to look at how to build a query string using a data object with vanilla JS. This used to be kind of tedious, but a few new JavaScript methods have made it a lot easier. Let’s dig in! An example Let’s say you have an object of data, like this. let petfinderData = { key: '12345', shelterID: 'abc00', count: 20, animals: ['dogs', 'cats'] }; You want to convert it into a query string that you can send along with an API request, like this.

Read · 1 min

A guide to vanilla JavaScript code snippets — with resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.

Read · 7 min