Des postes

Looks like all the content of MDN is on GitHub now. That’s pretty rad. That’s been the public plan for a while. Chris Mills:

We will be using GitHub’s contribution tools and features, essentially moving MDN from a Wiki model to a pull request (PR) model. This is so much better for contribution, allowing for intelligent linting, mass edits, and inclusion of MDN docs in whatever workflows you want to add it to (you can edit MDN source files directly

… Read article “MDN

The HTTP Archive looked at more than 7 million websites and compiled their annual report detailing how the sites were built. And there’s an enormous wealth of information about how the web changed in 2020. In fact, this report is more like an enormous book and it’s entirely fabulous. The data comes from making queries to the HTTP Archive and is broken down into various sections, such as Performance, Security, and the languages themselves, including how folks wrote HTML or … Read article &

Here’s a scenario. You start a banging Kendrick Lamar track in one of your many open browser tabs. You’re loving it, but someone walks into your space and you need to pause it. Which tab is it? Browsers try to help with that a little bit. You can probably mute the entire system audio. But wouldn’t it be nice to actually have control over the audio playback without necessarily needing to find your way back to that tab? The Media … Read article “Give Users Control: The Media Session A

This year I learned, or relearned maybe, that “normal” is subjective at best, and pretty misleading otherwise. If this forsaken year has taught us anything, it’s that there is no such thing as normal. Things change. People adapt. Everything is relative to everything else. Besides being quite metaphysical, this somewhat connects to front-end development, our industry, and the sort of expectations we have for people down there. Too often, it feels like we tend to apply our own insecurities onto &#

One thing I noticed about building websites in 2020: despite all the social networks and publishing platforms craving our content, our stories, and our attention, people are somehow still building personal websites. Over the course of the year, many of you have launched or relaunched your website. It indeed feels like the personal website is experiencing a little revival. To me, this comes as no surprise. The benefits of having your own personal site are enormous and appealing. As a … Read

An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pubsub. The idea is that components can listen to the event bus to know when to do the things they do. For example, a “tab panel” component might listen for events telling it to change the active tab. … Read article “Let’s Create a Lightwei

Connectivity has evolved beyond recognition since the beginning of the internet. We are lightyears past dial up, these days, and can watch a video in high resolution on our smartphone while being connected to a mobile network. But not all mobile connections are created equal – older generation networks (3G, 2G, etc.) are still quite dominant, accounting for almost half of all connections worldwide in 2020. Unfortunately, the phasing out process is very slow, and many people around the glob

I remember sitting in the back seat of our family’s Subaru station wagon. I was six and this was long before child carseats were a thing. My dad was at the wheel and my mom played 20 Questions with me while we drove to some vacation spot I can’t even remember. It was my mom’s turn as she and I played 20 Questions. She had an object in mind and I was asking the questions. “Is it big?” I asked.… Read article “It’s all relative.”

The post It&#

This year, I learned that there is a wide world of free stock imagery available beyond Unsplash and Pexels. You see, I’ve been working on designing WordPress themes this year, and all images need to be compatible with the GPL. Unsplash and Pexels both have free and open licenses, but unfortunately, aren’t compatible. Many other free stock photos sites don’t have the highest quality photos, so I’ve had to get creative about where I get the imagery I use in … Read article “Unconventio

Black isn’t always slimming. When recently testing a dark mode option for one of my sites, I experienced first-hand the issue that Robin Rendle addresses in this article. All of my page text — headings and body copy — appeared to bulk up when I switched to dark mode. And it didn’t matter what fonts I used or which browsers I tried. The same thing happened with all of them. For example, here’s what happens with Adobe’s Source Sans … Read article “Using CSS Custom Properties to Adjust

There, I said it. What did I learn about building websites in 2020? A lot. But what I learned is not nearly as important as how I learned it. So instead, I want to share a couple of strategies I used to unblock learning in less-than-ideal times. I spent almost a decade teaching design and, let me tell you, the conditions for curiosity were all wrong this year. You are not alone if you’ve found yourself battling brain fog, deep … Read article “2020 was not a good year for learning&#8

In 2020, I rediscovered the enjoyment of building a website with plain ol’ HTML, CSS, and JavaScript — no transpilin’, no compilin’, no build tools other than my hands on the keyboard. Seeing as my personal brand could be summed up “so late to the game that the stadium has been demolished,” I decided to start a podcast in 2020. It’s the podcast of my agency, Clearleft, and it has been given the soaringly imaginative title of The Clearleft Podcast… Read article “npm ruin dev”

I found this Free Favicon Maker the other day. It’s a nice tool to make a favicon (true to its name), but unlike other favicon generators, this one lets you create one from scratch starting with a character or an emoji. Naturally, I was curious to look at the code to see how it works and, while I did, it got me thinking in different directions. I was reminded of something I read that says it is possible to dynamically… Read article “How to Create a Favicon That Changes Automatically

I’ve always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I’m familiar with many of the tricks involved, but still find it surprising every time: the way people are able to make such fluid and beautiful images out of little boxes. I always end up digging around in dev tools to see how things are done, but I had never seen the process unfold. Any time CSS art starts getting attention, there is always … Read article “Very Extremely Practic

In our wide world of building for the web, we have every opportunity to talk about tools. We lunge to fill every gap we find in our projects with a definitive technological approach. Some of us are given “a seat at the table” feasting on even the most minuscule of technological debates. This marketplace of opinion is founded upon a desire to arrive, at least for the moment, at an optimum. We postulate about tooling so that we might achieve … Read article “TypeScript & Relevance&#822

Spoiler alert: There is no support for it yet. But it is defined in the Media Queries Level 5 spec that includes other recent, but more familiar user preference features, like prefers-color-scheme and prefers-reduced-motion. The Polypane blog goes into incredible depth on prefers-reduced-data, especially for something that we have yet to see in the wild. That’s actually what makes the Polypane team an ideal voice on the subject. It’s product is a browser that is able to emulate &#823

As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. But it is often easier to use a since they can be rather efficient and, with them, just about anything visual is possible. But what if you a need transparent background on that video, so that it could … Read article “Overlaying Video With Transpare

2020 brought another wave of logical property features to major browsers and I’ve thoroughly enjoyed my investment into logical, rather than physical, web styling. I feel like I’ve learned a new way to speak about the box model that results in less written code with more global coverage. p { / 🚫 / text-align: left; / 👍 / text-align: start;

/ 🚫 / margin-top: 1rem; / 👍 / margin-block-start: 1rem; } Like I described in the web.dev article I linked &#

In 2020, I learned about the power of web development for organizations and nonprofits outside of tech. I learned that you can leverage your skills to affect change and build long-lasting partnerships. This year, I joined the Board of Directors of the League of Women Voters San Francisco (LWVSF), which, despite its name, welcomes people of all genders. This century-old organization has over 800 branches that span cities and states across the United States and the world. Before joining the &#8230

The Web Performance Calendar just started up again this year. The first two posts so far are about, well, performance! First up, Rick Viscomi writes about the mythical “fast” web page:

How you approach measuring a web page’s performance can tell you whether it’s built for speed or whether it feels fast. We call them lab and field tools. Lab tools are the microscopes that inspect a page for all possible points of friction. Field tools are the binoculars

… Read article “Web Perform

Comment threads are one of those things that look really simple when executed right. When designing them yourself, you may find that they are rather deceptively simple. There is a lot that goes into designing nice and usable comment threads, and in this article, I will try my best to walk you through the steps to building a comment thread, that is great to look at, and a joy to use. What makes a good comment thread? Before diving into … Read article “Styling Comment Threads”

worth to watch

This is about a wildly specific combination of technologies — Eleventy, the static site generator, with pages with images on them that you ultimately want hosted by Cloudinary — but I just wanna document it as it sounds like a decent amount of people run into this situation. The deal:

Cloudinary has a fetch URL feature, meaning you don’t actually have to learn anything (nice!) to use their service. You have to have an account, but after that you

… Read article “Cloudinary

I had a unique requirement the other day: to build a layout with full-bleed elements while one element stays stuck to the top. This ended up being rather tricky to pull off so I’m documenting it here in case anyone needs to re-create this same effect. Part of the trickiness was dealing with logical positioning on small screens as well. It’s tough to describe the effect, so I recorded my screen to show what I mean. Pay special attention to … Read article “How to Get Sticky and Full-B

The Jamstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. The key aspects of a Jamstack application are the following:

The entire app runs on a CDN (or ADN). CDN stands for Content Delivery Network and an ADN is an Application Delivery Network. Everything lives in Git. Automated builds run with a workflow when developers push the code. There’s Automatic deployment of the prebuilt markup to the CDN/ADN. Reusable APIs make has

It’s kind of neat that we can do input:invalid {} in CSS to style an input when it’s in an invalid state. Yet, used exactly like that, the UX is pretty bad. Say you have . That’s immediately invalid before the user has done anything. That’s such a bummer UX that you never see it used in the wild. But if we could just avoid that one thing, that :invalid selector can do a ton of work … Read article “Happier HTML5 form validation in Vue”

The post Happier

Let’s take a look at how to combine the border-image property in CSS with animated SVGs that move around a border. In the process, we’ll cover how to hand-craft resizable, nine-slice animated SVGs that you can use not only re-create the effect, but to make it your own. Here’s what we’re making: Spooky skulls? Retro arcade? What’s not to like?! This is actually part of The Skull, a capture-the-flag riddle I’m working on that’s designed to explore the internals … Read article “How to

It’s sounding more and more likely that we’re actually going to get real container queries. Google is prototyping a syntax idea from David Baron and refined by Miriam Suzanne. Apparently, there has already been some prototyping done for a switch() syntax which is like container queries on values. Even now, there is stuff like the Raven technique which can do container query-esque values. This stuff will shake out over time. If you need solutions today, most of them involve JavaScript

State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we’re going to do exactly that. I recently built a website that included a “no client JavaScript” constraint and I needed one particular unique interactive feature. The key to all this is using and elements to hold a … Read article “A Complete St

Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible for an actual 0 to be returned) and 1 (exclusive, as in, it’s not possible for an actual 1 to be returned). Math.random(); // returns a random number lower than 1 This is incredibly useful for gaming, animations, randomized data, generative art, random text generation, and more! It can be used for … Read article “Lots of Ways

A bunch of SVG icons (of popular things) all under 1KB. SVG is awesome for golfing. I was going to add a CodePen logo but there is already one in there at 375 Bytes. I’ve got one at 208 Bytes, based on a logo update David DeSandro did for us a couple years back. Direct Link to Article — Permalink… Read article “Super Tiny Icons”

The post Super Tiny Icons appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

https://github.com/edent

Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order. So that’s what this new ability will solve in addition to it just being less hacky in general. You can already test a partial implementation … Read article “Native CSS Masonry L

I first blogged about responsive data tables in 2011. When responsive web design was first becoming a thing, there were little hurdles like data tables that had to be jumped. The nature of elements are that they have something a minimum width depending on the content they contain and that can easily exceed the width of a small screen device. This image I made then still covers the issue pretty well: Except… maybe they don’t equally suck. If that … Read article “Under-En

Some HTML elements come with preset designs, like the inconveniently small squares of elements, the limited-color bars of elements, and the “something about them bothers me” arrows of the elements. We can style them to match the modern aesthetics of our websites while making use of their functionalities. There are also many elements that rarely get used as both their default appearance and functionality are less needed in modern web designs. One such HTML element is … Read article &#82

We made one! It’s open source if you want to make it better or fix things. There are quite a few purpose-built fonts for writing code. The point of this site is to show you some of the nicest options so you can be aware of them and perhaps pick one out to try that suites your taste.

We used screenshots of the code to display just so we could show off some of the paid fonts without managing a … Read article “A Microsite Showcasing Coding Fonts”

The post A Microsite Show

Matthias Ott, comparing how painter Gerhard Richter paints (do stuff, step back, take a look) to what can be the website building process and what can wreck it:

[…] this reminds me of designing and building for the Web: The unpredictability, the peculiarities of the material, the improvisation, the bugs, the happy accidents. There is one crucial difference, though. By using static wireframes and static layouts, by separating design and development, we are often limiting our ability to hav

You might know a few ways to create charts with pure CSS. Some of them are covered here on CSS-Tricks, and many others can be found on CodePen, but I haven’t seen many examples of “area charts” (imagine a line chart with the bottom area filled in), particularly any in HTML and CSS alone. In this article, we’ll do just that, using a semantic and accessible HTML foundation. Let’s start with the HTML To simplify things, we will … Read article “How to Make an Area Chart With CSS&#

First, quickly: AWS Amplify has a new Admin UI. Amplify always had a CLI that helps you build projects by setting up stuff like auth, storage, and APIs. That’s super useful, but now, you can do those things with the new Admin UI. And more, like model your data (!!), right from a local UI. That’s great for people like… me (I like my GUIs). Now, slower. Let’s start with the idea of Jamstack. Static Hosting + Services, right? … Read article “Amplify, Amplified&

Generovanie realistickych fotiek.

https://github.com/NVlabs/stylegan2