Another recent trend is using web fonts where they’re not appropriate. Don’t use web fonts if you don’t need them. They’re not the right answer for everything. If you find yourself wrapping each letter or word in a
spanelement in order to style them — stop. Use SVG.
Most of the times when you’re wrapping words and characters in
spanelements you are actually attempting to do lettering in HTML and CSS. There is a fine line between type and lettering, and web browsers are not great at the latter. SVG on the other hand is a great fit for lettering. It’ll give you absolute control over kerning, tracking, position, gradients, masking, and colour. As an added bonus, the resulting SVG file size will be smaller than loading several fonts.
Anselm Hannemann also has a take on webfont loading best practices.
Ever wondered why we have CSS color names like
darkgoldenrod? Ars Technica on the evolution (and convolution) of the "Named Colors" spec:
Backlash ensued. The color database had been subjected to the whims of so many different programmers that it became deeply disorganized, leading some to argue it had no place in CSS. Critics attacked its naming scheme: “dark gray” was lighter than “gray”; there was a “medium violet red” but no “violet red”; “light goldenrod yellow” had no corresponding “goldenrod yellow.” In total 17 colors had dark versions, but only 13 had light ones. Color distribution was also uneven, skewing toward reds and greens and away from blues.
Nerds having trouble naming things? You don't say.
There are murmurs from the deep about future versions of color naming with a more standardized approach. Where variations like "dark", "light", "deep", or "dull" have specified meaning, and certainly come off the fingers easier than programmatic coloring like rgb or hsl.
I really want to be a better musician. Someday, I will be. I know what it takes: practice.
I want to get really good. I want people to hear me play and say to themselves "hey that guy really knows how to play." I want to be able to sit down with other musicians and make things happen. I want to understand music in a lot deeper way than I do now. That's going to take a boatload of practice.
Say the day comes I'm really motivated about this. My life has morphed such that this is my top priority. I'm gonna get good at this. I'm gonna do whatever it takes.
There is a weird barrier in my way. I can't practice eight hours a day. I'm not good enough to practice eight hours a day.
New Google thing, aimed at unsucking the "mobile" web:
The Accelerated Mobile Pages (AMP) Project is an initiative to improve the mobile web and enhance the distribution ecosystem. If content is fast, flexible and beautiful, including compelling and effective ads, we can preserve the open web publishing model as well as the revenue streams so important to the sustainability of quality publishing.
Beyond that, you can control what they call the
shapeIndex, which controls which point on the previous shape moves to which point on the new shape, which has drastic impact on the way the animation plays out, so you can make it smooth and intuitive rather than awkward and forced. Not to mention that can convert your typically-non-morphable shapes into a morphable shape for you.
They have a collection of examples to check out. You have to be a member of Club GreenSock to use it in production, but you can play with it for free on CodePen. I have a simple template to get you started.
I'm going to be moderating an online panel (Google Hangouts) on Wednesday, November 4, 2015 with Jina Bolton, Una Kravets, Rebecca Murphey, and Marco Rogers all about front end stuff. We held a little planning and prep session for it the other night and a lot of interesting discussion was had, so I bet y'all will enjoy it.
The "trick" of sliding backgrounds in CSS is not new. In fact, the first time I came across it might have been a couple of years ago on the Valio Con site (the current design doesn't have it anymore). I happened to notice it on a couple of new sites I visited today, however, and thought it would be worth sharing.
I love An Event Apart conferences, and I bet you would too.
It's where ideas like responsive design and mobile first were launched, and where this year's attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything.
San Francisco is coming up November 2-4. If you can't make that, they just released the 2016 schedule with cities all over the U.S., including a first-time visit to Nashville and an extra-special Orlando event at Disney.
I have a sneaking suspicion you'll be seeing a bit more of Dave Rupert and I doing things like this.
Speaking of in-development software targeted at screen design. Also check out the videos in Khoi Vinh's post. The repeat grid demo is pretty compelling.
You know about responsive images. It's about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It's fantastic for performance.
You know that to get the most out of responsive images you should polyfill it with Picturefill. You download it, you include it on your page.
You have …Watch Video →