Today’s Readings

I was really excited to hear about Microsoft’s Pointer Events recommendation, then really disappointed to hear that Chrome decided not to support them, even after their okay argument

widows and orphans are important enough for print CSS, but says they have a place in screen CSS as well.

Sticking with Dudley for a couple more about image maps! Right? :-)

And now sticking with SVGs for a couple more…

all: initial; new to me, thanks !

The API Simulator simulates APIs to help with dev work; slick idea!

I could never figure out why .remove() didn’t exist in native JS… Glad it’s coming, and glad that until it is available everywhere, there are polyfills

Buggyfill is “not a polyfill” (because it fixes bad behavior rather than adding missing behavior), but if you want to use vw, vh, vmin and vmax, especially across mobile (where it is most needed), you might want to check it out.

Get to know map, filter, mergeAll, reduce, and zip better in this tutorial. Promises that “if you learn these 5 functions your code will become shorter, more self-descriptive, and more durable.” Sounds good to me!

As with all databases, WP databases can easily get bloated and sluggish. So find out how to set-up your WP DB to behave better, and clean itself up!

I was not familiar with the HTML5 menu and menuitem elements, but I’m glad I am now! I love coding semantically, so will be great to push these into future projects!

No one should be surprised to read that performance is terrible on e-commerce site, because performance has long been terrible on all sites.

And when we talk about performance, we always talk about compression. And when we talk about compression, we mostly think about Gzip, right? Okay, maybe deflate. Wow, there are a LOT more options than I ever knew

But before you compress, I guess, you should remove all the cruft from your images, starting with all your personal data!

And if you’ve still not had enough performance-related reading, here is more than you could possibly read in a week

And finally, Gaga isn’t the only one that was born a certain waySo was the web. :-)

Happy reading,
Atg

Today’s Readings

As CSS turned 20 years old (almost old enough to drink in most countries!), offers a nice look back, as well as a link to an interview with creator Håkon Wium Lie, and a link to Håkon’s 1994 thesis on CSS!

Pretty slick CL backup tool for Mac: Mackup. Moves all your config files to Dropbox, then creates an alias to them from the original location. restore simply recreates the aliases.

Whole bunch of great SVG links in the latest Smashing Magazine newsletter:

And, this one is funny timing, because I just finished converting all the SVG data-URIs on our company website back to SVG URLs to reduce the CSS file size! :-)

And, as long as we have the can of SVG wide open, let’s have a deeper look into animating SVGs!

does a little DevTools Timeline deep-dive to find that opacity is the cause of his janky scrolling. But way more interesting to me is just watching someone use DevTools to really dig into a performance investigation, and then to find that I am not the only person that has no idea what all those colored bars mean, or how to really make use of them to fix the problem… Whew! :-)

And speaking of CSS performance, here is a nice deep-look into how a browser renders your pages, and what affects your CSS has on rendering the critical path.

jsinspect… is a tool for detecting copy-pasted and structurally similar JavaScript. It also detects boilerplate and repeated logic, so you could use it to extract code into methods or help find dead code.

At first I thought “I already have tons of options for diffing files” but the “detects boilerplate and repeated logic” part is pretty darned useful!

And while we’re at it, why don’t we just “automatically fix linting errors“…

A very thorough and thought-provoking article about website navigtation wayfinding, specifically for mobile, but I think it really applies to all website navigation. This topic has been at the heart of some of my more… animated conversations with project managers… :-/

And speaking of project management, poor project planning has resulted in far more wasted time in my life than I would like to admit. ThoughtPlan seems like a great tool to help collect thoughts and make them usable really fast. “Signup for free!” always makes me nervous, but hey, we all need to pay the rent, and this does look cool. Wonder if it works on mobile, and offline with back-online-syncing…

And once we have our project organized, we can work on getting our editors and our CMS on the same page

Then, lest we hand our neighbors a basket full of rocks before walking into our glass houses, let’s talk about front-end developer planning

“Planning”… Why does that word make so many people squirm?

I’m usually quite leery about using JS to alter existing HTML elements / expected behavior, but I have to admit that this jQuery-enhanced select is pretty slick-looking! Also, I was not aware that you could create elements like this:

var li = $('<li>',{
    html: '<img src="'+option.data('icon')+'" /><span>'+option.data('html-text')+'</span>'
});

I always do it more like this:

var li = $('<li><img src="'+option.data('icon')+'" /><span>'+option.data('html-text')+'</span><li>');

Cool. But I do question appending each and every li inside the loop, that’s a lot of DOM-fondling… I would prefer to see them concatenated into either an HTML fragment or a single string, then appended to the DOM…

If you’ve watched ‘s CSS Performance Tooling video, you know how a large animated GIF can kill a site. Well, the good folks at Imgur have another way to fix that issue: GIFV, the animated-GIF-to-video-converter…

But if your CSS is actually SASS before it is CSS, you might want to meet Takana, a live SASS editor…

Okay, so, show of hands: who’s been paying attention to all the web components hub-bub? Well, if your hand, like mine, is still done, then maybe it’s time for you (and me) to meet Ellie

If you ever work with remote content, and have to do so via the command line, chances are, whether you know it, like it, or not, you’ve been inside of a Vim editor. And it probably sucked. is here to help you get to know Vim just a little better

And finally, one of the better definitions of programmer that I’ve encountered… :-)

Happy reading,
Atg

Today’s Readings

I’m going to start this issue off with a quick pat-on-the-back-selfie, by mentioning this article on adaptive web design which quotes my SitePoint article alongside such luminaries as , , , and ! Yay! :-)

But enough about me, let’s talk about my friends, instead! I couldn’t be more proud of my good friends , , and for taking The New Yorker into the world of RWD, including changing over from TeamSite and Movable Type to WordPress! The change has gotten some nice press, from this from-the-inside-out perspective from FastCompany to an interview with the queen of design herself! Seriously proud, you guys, great job!!

Speaking of WordPress, some great insights on how to best set-up your site, from initial set-up to custom configurations to plugins to help speed things up, lock them down, and make your WP site hum as best it can!

You can also get some help from Grunt with your WordPress dev process, including creating i18n files, minification, concatenation, linting and more… Great stuff!

And once you think you’ve got it all running as best it can, let the Google PageSpeed Insights plugin have a look and tell you just how well you’re doing!

A Tumblr for DevTools Tips! Read, rinse, repeat…

Similarly, offers a how to get started in web design article, but not like “how to get started in the business”, but more like “how to get set-up to start doing this”; I feel like I can always find some tip, something I can do differently, and ideally better!

We all know that, when animating an object across the page, using CSS transform/translate is better than top/left, right? Maybe some times, but maybe not always

All developers should print this (yes, on paper) and post it at their work station, so they can continuously re-read and re-learn this, as a mantra…

Got SVGs? Want to see diffs that actually mean something, rather than just a slew of alphanumeric characters? Github’s got you covered

Perfmap is a bookmarklet or Chrome Extension that adds heat map visualizations to pages to help track performance hotspots.

Part 1 of a JS best practices series, based on ‘s JavaScript “Best Practices” slideshow. Part 2 is linked from the end of Part 1…

A new jQuery plugin, FocusPoint, allows you to specify the most important region of an image, and it will make sure that region stays on-screen, regardless of changes in screen size. It’s a great idea, but still sends a single image to all devices, which is unlikely to be the best thing for your users. Perhaps if it were used in conjunction with picture, but then you would need a new config for each source

From the great comes the video of his CSSconf EU 2014 presentation CSS Performance Tooling. Start-to-finish, all great tips.

Keeping with the Google-smarties, here is a great introduction to Chrome’s DevTools Device Mode. I was not aware of all the adaptations DevTools makes to help mimic real-life devices, but keep in mind, it still cannot properly mimic “device-specific features” (aka bugs!). More info about Device Mode here.

For you non-cyclists out there, this is easily the best analogy to what it feels like to be biking happily along, and suddenly realize your bike lane is ending (usually with just as much warning). And lest you think I am exaggerating, this is exactly how the bike lane leaving my village ends, dumping me right onto a busy road, just as it heads into a blind curve. Beauty, boneheads!

And finally, Twitter introduces a way to play audio inside tweets. In other news, all MySpace users simultaneously yawn… ;-)

Happy reading,
Atg

Today’s Readings

Fascinating look at JavaScript parse and execution times across various devices. While these tests are based on jQuery, it gives a glaring insight into the variances your users will see depending on the device and browser they are using. Absolutely amazing!

With performance on our minds, offers us Critical, a Grunt or Gulp process that takes screen sizes via a config, determines and outputs the CSS required to render the critical CSS for the screen size, then lets you push that critical CSS into the page’s mark-up to be delivered to the device; the rest of the CSS can then be delivered via an external stylesheet. Seriously freaking awesome!

And for more on optimizing for the critical path, check-out ‘s presentation on the subject!

As a kid I loved Saturday morning cartoons! (Who am I kidding, I still love cartoons!) So when I saw these Æsop’s Fables written using Google Fonts, I was it with a wave of nostalgia… Nice fonts, too. :-)

3 Essential Sublime Text Plugins for Node & JavaScript Developers

Not sure I’d say the slight highlighting differences make JavaScriptNext essential, but there’s no arguing that JSHint is, and JsFormat will certainly save me lots of trips to jsbeautifier.org

5 Array Methods That You Should Be Using Now

Similarly, not sure I can throw my full support behind reduce (maybe because, even after the author’s description I still don’t get what it does), but you can’t argue with indexOf and filter. And if those five aren’t enough for you, be sure to check the full list of ES5 functions.

Ok, web components… I guess it’s time that I really dig in, right? And if you’re with me, Google is with us, offering a new Polymer / web components podcast series to help us all get going.

I’ve stated before that, no matter how basic the topic of an article, I will usually at least skim it, knowing that often I will find some nugget that I did not know before. As was the case with ‘s article on JS Comments. I mean, // single-line comment, /* multi-line comment */, done, right? Yes, but, I never knew why /*@cc_on @*/ was in the HTML5 Boilerplate opening html block and I also did not know that you can preserve some comments in most JS minifiers by using @preserve or @license. So there. ;-)

The Internet Explorer team is looking for feature requests from the web developer and designer community.

Yes, that Internet Explorer team, from that Microsoft company…

Having never been that big of a fan of parallax sites, okay, the coding is impressive, and I have seen some nifty “parlor-tricks”, but I’ve never really thought (most of) them all that practical. But sticking solely with fun, and impressive coding, parallax.js, throwing in gyroscope events (mimicked by mouse events on non-touch devices), is all that and more!

Standard HTML page transitions have always seems a bit abrupt to me, but the short-lived practice of using meta transitions is thankfully passé. But I think a sprinkle of Animsition could really make for an elegant-looking effect…

A basic intro to how to start planning for a RWD project. It can be a bit to wrap your head around if you’ve not done one before…

Going back to Addy again:

CSS Layout Debugger: A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page [with] a random (valid) CSS hex color.

Could be useful. He also links to pesticide.io, which uses a set color per tag type. Either could be useful for remote debugging.

At first this sounds great:

RWDPerf: Performance testing for Responsive web design websites

Then you read that the tests are based on emulation (what else could it do, I suppose). Still worth a look, I’d say.

`nother repo for you, `cause, you know, why not…

GifShot: JavaScript library that can create animated GIFs from media streams, videos, or images

And finally, who wants to go ride a roller coaster?

Happy reading,
Atg

Today’s Readings

FixMyJS “aims to automatically fix linting errors in a non-destructive way”… Seriously impressive!

There is a change in the iOS8 scroll event that you should be aware of…

Is a JS library that generates responsive stylesheets a good idea? You decide…

Microsoft has a new WYSIWYG… Can’t be any worse than FrontPage, can it?

Everything You Need to Know About HTML’s ‘pre’ Element

Now if someone can please just explain to me why I can’t put HTML tags inside of pre tags…

And now everything you need to know about @font-face, including the difference between content fonts and icon fonts, and what to do differently for each.

jQuery obviously gets a lot of things right, but animation has never been its best quality. Learn a few simple options for using CSS animations instead of jQuery animations.

discusses the process of change and shares his new workflow (part 1).

Tired of always schlepping my belongings on my back while biking, I recently invested in a set of panniers. And as soon as they arrived I realized how much weight they added to my ride, not to mention the need to remove the bag every time I stop anywhere with my bike (for fear of them being stolen). This seems like a simple solution to both of these issues

We all know repaint is a totally evil bastard, right? And that it should be avoided at all costs, right? But how do you know if the CSS you’re using will cause a repaint? Well, has made CSS Triggers to help you out… And for a thoroughly nerdy conversation about the website & topic, he even recorded a video about this topic. Nerds... ;-)

For more tips & tricks, focused more on mobile this time, we go to one of the best sources for mobile information, , and his free book Mobile & Multi-Device Design: Lessons Learned.

And finally, keeping it short and sweet for this Friday issue (and I do hate to make you actually think on a Friday), this is an interesting proposal about a new kind of conference, or at lest adding some new topics to already existing conferences… Anyone interested?

Happy reading,
Atg