Today’s Readings

Wow, just freaking wow!!

Responsive images: Okay, let’s all get this straight, right now…

Now, we all got it??

Expanding on the images issue, presents three techniques for dealing with background Retina images. I share a concern with a commenter regarding Option 3, as it looks like Retina screens would download both images, but maybe I’m wrong?

And shows a pretty easy method for creating a circular navigation, if you’re in need of that. (The text might make more sense if you jump to this animated example first…)

Great, basic intro article on Flexbox, providing a great visual aid to help get the concept of some basic order and layout concepts.

Here are four tips to help you make great themes in WordPress. I will bet you know the first three, but the fourth introduced me to something new: get_template_part(). Handy!

And then you can peruse through these 14 Tips for Making the WordPress Admin Client-Proof (So They Don’t Break Their Site!). This is a really, really good list, even if your client is your own marketing department… ;-)

Nice-looking new cross-OS GitHub Desktop app!

For my designy-peeps: I know you don’t get much love here, so I’ve got a few items for you:

Nice, quick tutorial on CSS counter properties, and how to get custom stuff, pretty easily!

Fantastic collection of very easy to implement accessibility tips for SVGs.

Browser stats. You know them, right? Chrome rocks, Firefox is keeping up, IE was lagging for a while, but Edge has already started grabbing a foothold. And on mobile, well, it’s Safari and Chrome, right? Well, after you take a look at these worldwide browser stats, and you might have to download a few more browsers on your testing devices!

And finally, I’m glad I’m not the only one that has this fictional conversation about progressive enhancement with himself…

Happy reading,

Today’s Readings

As a back-room-wanna-be fictional writer, and as a raving UX nut, I found this analogy of UX to storytelling to be quite fascinating.

And speaking of UX, here is a great approach to dealing with the less-than-ideal states of a UX. All too often I, as the developer, have to prod my designers to get the design for these states (and often I have to do the design itself based on the designs I did get).

A freaking awesome feature that is currently only available on Firefox, the CSS element() function, allows live samples of websites, which allows for some incredible UI opportunities!

And by the way, the above three bits came from ‘s fairly new Links section, which is slowly becoming my preferred Twitter, added right into my RSS reader… No cruft, just great referrals…

Fantastic collection of performance-related resources from a host of Googlers.

Although this list of user-entered data strings that can break things will likely make my QA testers giddy, and then immediately make my life worse, I am still willing to share it…

Adding hyphen support to your site’s text does indeed seem like a great idea, but I wish there were a way to more finely tune the threshold at which words hyphenate (like, “the hyphen must have at least 4 letters on each side, otherwise keep the word together”) would be nicer, but that’s just me being picky… ;-) I’m going to give it a try on this site for a while, see what I think…

Nice, lengthy article on the basics of Flexbox, followed by several great resources for more in-depth info.

An interesting series from Tuts+: Building a Mini, API-Driven Web App.

There’s no denying that MVC-style development is all the rage right now, what with AngularJS, EmberJS, ReactJS, etc. practically taking over the JS world. Of course, MVC started long before JS was born, but that’s certainly where it is hottest right now. But this CSS Tricks article about using Twig and Timber within WordPress might get WordPressers just as excited!

brags about the newly-constructed dConstruct conference website. And justifiably so! The site is gorgeous, performant, responsive, and works perfectly well on the classic Lynx browser! I especially love the space elevator and I almost missed the floating platforms! :-)

And finally, the concept of the standing desk is all-the-rage, but what if you can’t afford to drop a couple to a few thousand dollars on the ideal set-up? As long as you don’t care what the other kids might say, this option seems highly doable… :-)

Happy reading,

Today’s Readings

I have an upcoming project in which I hope to use ‘s Critical to separate my critical CSS from my not-so critical CSS. And was kind enough to create a nice little tutorial on the subject, (seemingly) just for me!

document.implementation.createHTMLDocument() is definitely new to me, but it turns out to be a great way to parse an HTML response without loading any images.

Do you use a Mac? I do. And Windows 10 is tantalizing, but also beyond my OSs’ reach. Until now. Mac’s Bootcamp now officially supports Windows 10.

From comes a nice truncation tip to avoid the disappointment of a “Read more” link revealing only 2-3 more words… I think you could also try counting spaces to find the actual number of words, but the idea is there.

An interactive explanation of the CSS animation matrix. Still not sure I get it…

But once you have that down, you can perfect your CSS animation!

And if perfection isn’t good enough for you, then make your animation flawless!! :-)

Need a mobile framework, but not sure which to choose? This mobile framework comparison chart could help! However, it’s more about comparing which environments they run in, and not so much about what features they provide. Seems that would be a useful bit, once you’ve narrowed down to a few options.

Some pretty sexy 3D progress bars… Look great in Chrome, good in FF, surprisingly not-too-bad in Safari, but have no IE to test with. Anyone?

Have to admit, I’ve never really had a problem with an italic font’s slant, but if you ever do, here is a very clever, yet very simple solution.

Sequence.js: The responsive CSS animation framework

There’s something unpleasant tasting about a JS CSS framework, but you cannot argue with the results, very nice!

But if you prefer to roll your own, then maybe this CSS Transitions Cheatsheet will be helpful!

again, this time with DevTools Tips For Sublime Text Users. Great stuff!

Interesting mobile browser stats from around the world… How well do you know your audience?

And once you get to know your audience a little better, maybe it is time to consider the Graceful Improvement approach

If you are not already familiar with Git, here is a nice 3-part intro course.

Ever try to upgrade Node on Windows? Pain, right?? Apparently not any more

Anyone else out there been avoiding ES6? Maybe now’s the time, with this intro article

And finally, after all that, I think you deserve a little full-screen space station view of the Aurora Borealis

Happy reading,

Today’s Readings

W3C, along with SAP, TCD and KUL, is partner in a European project called STREWS. The goal is to bring research and standardization in the area of Web security together. The project is funded by the European Commission (7th Framework Programme). It organizes workshops, writes reports, and, as its main goal, writes a “European Roadmap for Research on Web Securityā€¯.
Participate in a survey on Web security by the STREWS project

Lend a hand, and complete this survey, won’t you?

Article about the technology behind Facebook’s preview photos. Which basically involves using a thumbnail image and scaling it up to be blurry, then replacing it with the properly-sized image. No questioning the perceived performance gains, but I wonder how a progressive JPG would have fared…

Here are huge batch of fixes to help get rid of a host of the most annoying things about WordPress

And, if you are a WordPress plugin author, here is a fantastic method for updating WordPress plugins via GitHub releases using WordPress Transients! It’s a little complex, meaning there are a few moving pieces, but the process is actually really elegant, and a helluva lot better than having to deal with SVN! :-)

Okay, just one more WordPress thingy: The WordPress Template Hierarchy is an interesting diagram, but I’m not sure I fully get it’s function… Personally, I would really love to see the hook/filter version of that… :-)

An interesting idea for Generating Alternative Stylesheets for Browsers Without @media.

Automagically make your site’s HTML editable

A couple of new (to me) methods for debugging in Chrome’s DevTools.

As I say often, even of you think you know a subject really well, it can never hurt to at least skim through a beginner’s-level article on that subject. With that in mind, I pass along this .bind() For Dummies article; you never know what tidbit you might glean.

So, we already have scrolling to read more (duh), and we have scrolling that causes animation (a la parallax), now shares scrolling to draw shapes! :-)

How fonts affect your website’s performance is less about how fonts affect your website’s performance than it is about how to use systems fonts on small screens and use a media query to load custom fonts are larger screens… But it does also mention a cool site, Tinytype, which tells you which system fonts are include on the major device OSs. That’s handy.

I have been passively following (and drooling over) ITER and the concept of fusion reactors for a very long time, but there has been very little (substantial / marketable) progress. But now there is the possibility of having a working fusion reactor in the next five years?!?! That would be… so… huge…

Appears ‘s site has undergone a pretty slight redesign and much more serious rebranding! New site, new name, but still great articles, with cool topics, and helpful tips. This time around he shows us how to reveal images via a scribble effect, using SVG and blend modes.

And finally, a new documentary about the history of National Lampoon is coming our way… For anyone that was born in the last 50-60 years, or will be born any time in the future, and likes to laugh, you owe a lot to the nutball humor of National Lampoon. Cannot wait for this one…

Happy reading,

Today’s Readings

And from the “Wait, who did what?” and “Is that browser still in active development?” category, Safari has made some cool changes to their Web Inspector tabs.

Got Git? I’m sure you do… And here are several cool options for dealing with pull requests, including a link to some very useful aliases you can add to your local Git installation!

Some great tips for Debugging CSS Keyframe Animations.

While it is true that most performance-related issues are front-end-related, a lot of those front-end issues originate with design choices. So let’s all learn how to Design for Performance.

guides us through using srcset‘s w descriptor to suggest the proper image.

A couple weeks ago Netflix published an article explaining how they improved perceived performance by testing with a new “page ready” indicator, performance.timing.domInteractive. has a few concerns about their test results, but is also quick to mention that the test cases he uses could be creating issues that not everyone has…

walks us through how to set-up an opt-in push notification system, at least for Chrome, for now…

Flexible Grid System is a Responsive CSS Framework. This framework will let you create your web applications in a flexible way that you’ve never experienced before.

Not so sure about “never experienced before” but it is an interesting collection of options!

HTTP Security Report is kind of like WebPagetest, but for security issues. Ran this site through it; something tells me “26” is not a good score…

The JavaScript Looping Evolution is an interesting read on the history, and future, of JS loops.

I think one of the few things designers and developers can agree upon is that native HTML select element sucks when it comes to trying to make something look nice, across browsers; it is easily the most bastardized appearance of any HTML element. Which is why CSS Only Dropdowns With The Checkbox Hack is not a bad idea at all…

Not so sure about the practical effects of this, but show us how to create random fuzzy edges on SVG elements. It looks cool enough, for a background, and I can imagine a very slow, random animation on each circle looking pretty cool…

One of the irritating things about CSS-only animations is that you can’t do a callback when the CSS animation is done, you have to rely on JS… Well, here is a cool little JS library that helps you animate via CSS, and use as little JS as possible, and includes a begin and complete callback

I really like the CSS naming convention of BEM. I really do. And Harry Roberts think we should take it one step further with BEMIT. At some point my head starts to spin… So maybe CSS modules can actually help here a bit, eh?

Oh … From where do you come up with so many wonderful CSS animation ideas???? Here is yet another

And finally, NASA has a Tumblr account… Okay then.

Happy reading,