An intro to web components with otters

Monica Dinculescu on web components and why we might care: … before web components came around, you had to wait on all browsers to agree on a new element (like, a date picker). And even after they agreed on a new element, it took them yeaaaaars to implement it… With web components, web developers get to write such elements, so that you don’t have to wait for 10 years before all browsers agree that they should implement a date picker. I struggle with trying to figure out if web components (with Polymer or not) are really “the future” or not. People definitely haven’t adopted them with the same ferocious appetite… Read More

Continue Reading
book-type

The Equilateral Triangle of a Perfect Paragraph

Still, too many web designers neglect the importance of typography on the web. So far, I’ve only met a few that really understand typography and know how to apply that knowledge to their work. And the lack of knowledge about typography doesn’t come from ignorance. I learned that web designers are commonly either self-taught and haven’t grasped the importance of typography yet, or they actually studied design but typography was just one of the classes they had to attend. I created the Better Web Type course to help raise awareness of the important role typography plays on the web. In my opinion, both web designers and web developers should learn… Read More

Continue Reading
content-trap

A Little Example of Data Massaging

I’m not sure if “data massaging” is a real thing, but that’s how I think of what I’m about to describe. Dave and I were thinking about a bit of a redesign for ShopTalk Show. Fresh coat of paint kinda thing. Always nice to do that from time to time. But we wanted to start from the inside out this time. It didn’t sound very appealing to design around the data that we had. We wanted to work with cleaner data. We needed to massage the data that we had, so that it would open up more design possibilities. We had fallen into the classic WordPress trap Which is… just… Read More

Continue Reading
grid-2

An Introduction to the `fr` CSS unit

With all the excitement around CSS Grid, I haven’t seen as much talk about the new fr CSS length unit (here’s the spec). And now that browser support is rapidly improving for this feature, I think this is the time to explore how it can be used in conjunction with our fancy new layout engine because there are a number of benefits when using it; more legible and maintainable code being the primary reasons for making the switch. To get started, let’s take a look at how we’d typically think of building a grid in CSS. In the example below, we’re creating a four column grid where each column has… Read More

Continue Reading
react_lecon_1

Formulaires en React.js : Dans quels cas Utiliser Refs?

React.js fournit deux manières de récupérer les valeurs depuis les éléments. La première méthode consiste à implémenter ce qu’on appelle les “controlled components” (voir ce billet sur le sujet) et la seconde est d’utiliser la propriété ref de React. Les “Controlled components” sont assez lourds à mettre en place. La définition des caractéristiques d’un controlled component est que la valeur affichée est liée à l’état du component . Pour mettre à jour la valeur on execute une fonction attachée à l’écouteur onChange sur l’élément form. La fonction onChange met à jour l’état de la propriété, qui à son tour met à jour la valeur de l’élément form. (Avant de s’enfoncer plus loin, si vous voulez… Read More

Continue Reading
offline-site

Simple Offline Website

A little while back, Nicolas Bevacqua wrote the fantastic article Making a Simple Site Work Offline with ServiceWorker. We kinda tag teamed the idea. Nicolas did all the work, but I put forth the idea (and designed the crappy little website) that we were going to make work offline. I wanted a site that wasn’t as complicated as a major web app with loads of resources and API usage, but wasn’t as simple as a single HTML page. Everything in that article is up-to-date and serves as a great reference to getting started with offline capabilities for a site. Just a few notes: I updated the repo to make sure… Read More

Continue Reading
field-notes

Websites We Like: May 2017

It’s been far too long since we rounded up some of the most interesting websites out there. But this time we have a diverse round-up of whacky interfaces and beautiful layouts to look at. Let’s dive straight in! Nick Jones’ Portfolio The portfolio of Nick Jones is one of the neatest personal websites I’ve ever seen. As you flip through each page and project that Nick has worked on, the interface rotates and zooms in as you get closer to the end. Not only that but the interface changes color and the tiny animation on the title of each post draws your eye to it. In fact, I think this… Read More

Continue Reading

Web Hosting with Media Temple

I find Media Temple to be a perfect fit for a mostly-front-end person like me. I’m not an idiot, I’m pretty experienced with web work, but I don’t really wanna be in charge of setting up and configuring a server. That’s a specialized set of knowledge that I think is well suited to the people that own, sell, and support servers. (I think that would be a pretty good career choice, FWIW, kids.) That’s what Media Temple does in spades. They own, sell, and support the heck out of servers. That’s true at all levels. They have super affordable WordPress-tuned servers and shared servers that cost less than a dollar… Read More

Continue Reading

Announcing JSON Feed

Manton Reece and Brent Simmons have just published their thoughts on JSON Feed which is a new standard for making a feed, like a collection of blog posts. The format itself is similar to RSS and Atom but since it’s in JSON it’s easier to read and a lot more familiar to developers: For most developers, JSON is far easier to read and write than XML. Developers may groan at picking up an XML parser, but decoding JSON is often just a single line of code. Our hope is that, because of the lightness of JSON and simplicity of the JSON Feed format, developers will be more attracted to developing… Read More

Continue Reading
good-bad-ugly

Easing Linear Gradients

Linear gradients are easy to create in CSS and are extremely useful. As we’ll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway! Here’s an example that shows how harsh a standard linear-gradient() can be compared to how smooth we can make it by easing it: Screencap from “The Good, the Bad and the Ugly” with gradients overlaid.Il buono (the good): Smooth gradients in CSS that blends into their context. Il cattivo (the bad): No text protection (bad accessibility). Il brutto (the ugly): Standard linear gradients with sharp edges. In this article, we’ll focus… Read More

Continue Reading
filter_and_clip_path

Methods for Contrasting Text Against Backgrounds

It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong. The demo actually uses clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white text above as the value of the content property (taken from a data attribute which gets updated via JS). These two are stacked one on top of each other (they completely overlap).… Read More

Continue Reading