Today’s Readings

Some huge news from the world of responsive images (via the RICG newsletter):

A few months after landing in the Microsoft Edge developer preview releases, picture made its way into an official Windows 10 auto-update.

So: every desktop browser except for Safari is shipping picture. For the fruit company, we wait.

Add to that the fact that the RICG responsive images WordPress plugin is being merged into WordPress 4.4’s core functionality, and we have some HUGE gains in responsive images!

But at least Safari 9 has added a responsive option for your favicon… The good news is that you can use SVGs, so we don’t need to cut multiple images, and provide multiple links again…

How many different times have you coded, or even encountered, tab sets, carousels, and accordions in projects? I’ll bet tons. Well, apparently , , and were talking about this and thought that they are all really just differing visualizations of the same thing, and this got them thinking about a consistent markup, and even default behaviors, for these page elements. They’re suggesting panels and panelsets; what do you think? (There is even a polyfill linked to, if you would like to start playing with this, in order to help the spec writers!)

Is the new Browser War going to be Safari versus Chrome? Thoughtful article, raising some good questions!

A really nice CSS Transitions Cheatsheet! Clear and simple examples, easy for quick copy-paste situations.

recently offered two articles with some really good opinions about Things To Avoid When Writing CSS (Part 1 and Part 2). Then offered his opinions about Things to NOT avoid when writing CSS. Read them all, and feel free to make your own list… ;-)

Got background gradients in your CSS? If you work on a commercial site, it’s pretty likely that you do! And how many of you hand-roll your own background gradient CSS statements? I thought so… But that means you are probably pushing something like this for each gradient:

background: #d2b48c; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyYjQ4YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmQ3MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #d2b48c 0%, #ffd700 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2b48c), color-stop(100%,#ffd700)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2b48c 0%,#ffd700 100%); /* IE10+ */
background: linear-gradient(to bottom, #d2b48c 0%,#ffd700 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2b48c', endColorstr='#ffd700',GradientType=0 ); /* IE6-8 */

When you could, and should be pushing something like this…

background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(#d2b48c,#ffd700); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#d2b48c,#ffd700); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

(And I would hope that you’re removing all those comments via Grunt or something!) Let show you how, and why, you should be hand-coding your own CSS!

I know some JSers REALLY want true private methods, but is this worth it?

When it comes to optimizing SVGs, we usually see things like “remove the XML tag”, “remove the comments about Adobe Illustrator” and “run it through a minifier”. And these are good, but encourages us to dig a bit deeper into some technical SVG optimization options.

Anybody working with WebSockets yet? Anybody wanna?? Here’s a nice video intro.

Anybody working with AngularJS yet? Anybody wanna?? offers a two-part in-depth AngularJS series on Smashing Magazine: Part 1, Part 2.

I can remember how excited I was when Google Maps first announced their “offline access” some years ago! I also remember how disappointed I was when I tried using it… The exact area you told it to save was indeed available offline, but nothing else was, including new details from zooming in, business details, or custom data points within that area; it was basically a dumb map. But Google Maps has now started rolling out true offline data to their maps! Cannot wait to try this, as soon as “soon” arrives, and it is available on iOS… :-/

I have never been a fan of custom web fonts for all the obvious reasons (latency, bandwidth, FOUT), and the benefit of having some fancy text was just never worth it to me. But, for some, the idea of another Times New Roman, Helvetica or Verdana site is just as revolting. So, exciting news as-of-late, as most major browsers are delivering with new system fonts, that we can use today. This gives us all the benefits of native fonts, plus the benefit of still looking fresh! Designers, what d’ya think, you see anything you can work with??

With the latest release of Microsoft Edge, the browser we all loved to hate continues to impress…

We all know Can I Use, right? Supremely helpful! But What Can We Do Today seems immensely helpful too, not only providing stats (from Can I Use), but also code examples and live CodePen demos that you can test in whatever browsers you might have at hand!

I would imagine most developers, if they have a lot of DOM traversal to do, will be adding some library (jQuery, Zepto, or similar) to help. But do you need it? And more importantly, do you know if you need it? Do you know how to traverse and manipulate the DOM without your fave library? This SitePoint article offers a lengthy list of native JS functions that do most of what we need to do.

I think we’re all pretty familiar with console.log, right? But what about console.table? Pretty darned useful!

And finally, globes and maps are just plain fun to look at, but did you know that typical flat maps are misleading, when it comes to the size of countries? If you think about it, it totally makes sense: since the planet is round, you cannot properly represent that roundness on a flat piece of paper, which is why you end up with those annoying “cut-up” maps… Well, The True Size is a really fun site to play with, letting you grab a country and drag it around the map, resizing it to the proper relative size as you do so…

Happy reading,

Today’s Readings

Polyfill as a Service is freaking brilliant!! And I imagine would also be a freaking nightmare to maintain…

Some fantastic examples of Flexbox layouts and how to implement them, from Smashing Magazine.

Sprinkle in some margin auto and you’ve got some real layout magic!

And for a little better understanding, Flexbox Tester will help you “Understand how to calculate the width of flex items.”

And if you want to understand browser actually renders a website, watch Ryan Seddon’s JSConfEU 2015 presentation!

If you’re looking to dig into Service Workers, walks us through his first Service Worker.

Then he walks us through Cache-limiting in Service Workers!

And if those don’t do it for you, talks about his experience with Service Workers.

Then shares another presentation from JSConfEU 2015, where and present on using Service Worker and browser storage to handle offline (or not-so-online) situations.

And if you still need more Service Worker stuff, offers a few Offline Recipes for Service Workers!

But what if you already have and app and want to add Service Workers to it? Well, Google Developers has you covered there!

So, how’s your ES6 doing? Find out with this ES6 quiz.

It’s always fun to see what other developers use, hopefully to find something useful for our own tool belt. So let’s see what WordPress Plugins CSS Tricks uses!

Might also have a look through this list of WordPress plugins for security, search engine optimization and performance.

Okay, show of hands, who physically tests their products in screen readers? Okay, you, the one person in the back, on how many screen readers?? While not proving actual testing in all screen readers, this work in progress provides examples of “[t]ypical support patterns of HTML elements by screen readers”, so you at least have some idea what your screen reader users might encounter. Very damned nice!

I love this deconstruction process: stop thinking in pages, and instead think in patterns!

Got jQuery? Then make sure you know (at least) these jQuery tips.

Creating Alpha Channel JPEGs Using SVG. At first I thought, “So what, and why??” Then I saw the example, support matrix, and compression results and thought, “What? Why not???” Impressive option!

And finally, this is a seriously impressive, and entertaining, example of SVG and JS animation (caution: this has sound)!

Happy reading,

Series Part 4: A beginner’s guide to comparing, and getting started with, MVC frameworks: React

This is the fourth part of my series on MVCs, where I will be collecting and offering links for getting to know, and get started with, MVCs.

I will be focusing on what I consider to be the big four right now (each will become a link as I publish that part):

  1. Intro
  2. AngularJS
  3. Ember.js
  4. React (this post)
  5. Backbone.js
  6. Summary


I suppose you should really start with React’s own Getting Started page, but, once again, it is so dry I’m afraid you will fall asleep, or get intimidated, before you really get going! You may need to come back later, to get download, installation, set-up, etc. instructions, but for now…

offers an equally informative, but far-more enjoyable, introduction.

For a really good quick run through all the basics of React, Learn React offers a very brief, but easy to follow, list of videos. I think this is a good way to get the core concepts before diving into the thorough documentation.

But things get really sweet when you crack open Build with React! Very easy to read along with, and each short page has an embedded JS Bin quiz for you to do! I have to admit, I found myself quite addicted, wanting to keep clicking on to the next exercise, and trying alternatives within the JS Bins! (Enough fun, in fact, to help me ignore all the XML and inline handlers cluttering up my JavaScript…)

As an added benefit to React, there is also React Native, which allows you to use React to build native apps. Yeah, use JS to build iOS and Android apps… I have not dug too deeply into this yet, but if you are interested, here are a couple of resources.

Bottom Line

Initially I was a little put-off because React is so JS-heavy and seemed a little awkward, but when I saw JSX I thought “Things just got much better…” It is very friendly, being able to essentially write HTML in your JS, kind of like one would with jQuery, with something like:

$('body').append('<div><h1>Hello World!</h1></div>');

And once I saw createClass, I was pretty much in love: React basically does what we’re all pretty used to (Object-Oriented JS), with very little alteration (though I did get tripped up a few times by forgetting to wrap variables and methods inside of { and }

I was also quite enthused to learn that React can also be rendered server-side, which helps to satisfy my old-curmudgeony ways, allowing actual pages to be rendered on the server, sent to the client, then interacted with there as a SPA

I hope you enjoyed getting to know React, up next is Backbone.js!

Happy learning,

Today’s Readings

Interesting, wm-html-include.js is a polyfill let’s you include HTML until the W3C HTML Import is ready for prime time. Here are a couple of ideas of how that might be useful.

Some really great examples of fluid type using CSS‘s calc. While calc might still feel like it’s too experimental, Can I Use says (mostly) otherwise, with IE9‘s note not being as bad as it looks, but Android’s note making it pretty much useless there…

offers links to four SVG presentations from CSS Dev Conf, enjoy!!

I love project walk-throughs, no secret there!! From CSS Tricks again, this time a guest-post from , walks us through the intricate background image shapes he had to create for the new Britain on Film website. Love seeing the attempts, seeing what didn’t cut it and why, and finally the successful outcome!

And speaking of elegant solutions to tricky situations, offers her Flexbox solution to a tricky video player responsive layout bug. Nice.

Light and clean tooltips with smooth 3D animation
No framework required

Very elegant, and don’t let the browser support at the bottom of the page put you off, check the notes on the GitHub page for better details.

Really fantastic run-down of JS Promises by ! I am instantly in love with Promises.all (note the minor code correction in the comments)!! The browser support is not a very pretty picture, but I found a number of polyfills, including this one from , so maybe it’s not all bleak…

Multi-Level Sliding Accordion Only with CSS. Yup, sure is!

Any inspired writers out there, looking to make a few extra bucks? Tuts+ is looking for writers on a few different subjects, why not give it a go?

And finally, ever wonder how some people get those sort of odd jobs, like voice-overs for videos games, for instance? Well, The Verge has a series called How Did You Get That Job? that answers exactly that question, and more!

Happy reading,

Series Part 3: A beginner’s guide to comparing, and getting started with, MVC frameworks: Ember.js

This is the third part of my series on MVCs, where I will be collecting and offering links for getting to know, and get started with, MVCs.

I will be focusing on what I consider to be the big four right now (each will become a link as I publish that part):

  1. Intro
  2. AngularJS
  3. Ember.js (this post)
  4. React
  5. Backbone.js
  6. Summary


I guess the logical starting point for any new topic is the topic’s own “official” website, so here is Ember.js’ Getting Started guide. I think the first thing to note is the version dropdown at the top of the left menu. Not sure why anyone would choose an older version to get started with, unless maybe you are starting a new job and they are already behind the times a bit; it certainly happens, so I guess it is nice to have.

Well, like all the other MVC framework sites we’ll be looking at, the official docs are a bit dry… Though the left navigation menu does seem to nicely walk you through everything, subject-by-subject, but the page titled Guides and Tutorials is a bit light on, well, guides and tutorials… So let’s scrounge around for a few more elsewhere…

I started with the Code School Ember.js course, which interestingly explicitly states that, in addition to HTML, CSS and JavaScript, you need to know jQuery (not a blocker, but dependancies are just annoying). This Code School tutorial seems a bit disjointed compared to others I have used, referencing things that they had not talked about yet, etc., but it is certainly not un-followable, and once again, I love their interactive coding quizzes at the end of each topic, it really helps solidify what you just learned before moving on.

As an experienced Ember.js developer, tries to debunk a few Ember.js myths, while also offering a concise 10 Steps for Ramping into Ember.js Quickly. Most steps are outbound links, but, hey, nothing wrong with articles like that, am I right [looks at self in mirror…]?! ;-)

provides a nice, high-level intro to Ember.js. Not sure why the numerous references to Rails, other than as a comparison, and maybe most of his audience is already familiar with Rails, but it is not required for Ember.js. Richard also mentions, repeatedly, about Ember.js’ steep learning curve. I would agree that very little of Ember.js felt intuitive, but I also didn’t feel like any of it was confusing; there is just a lot of “the Ember.js way” type of stuff to learn. His post ends with a really nice list of additional resources.

Continuing with lists of additional tutorials, offers a good collection, including a link to a slew of YouTube video tutorials! Erik also points out an important note, that Ember.js “has been changing fast” and that “A lot of tutorials out there are already out of date” so be careful of what you choose to use as you learn.

As an example, while this Smashing Magazine in-depth introduction is only two years old (I know, that’s an eternity in the tech world), it is pretty out-of-date now. Many of the topics introduced are still relevant, so this might be a good article to skim through, for concepts and vocabulary and such, before really digging deeply into a more—current tutorial.

One last resource is an intro to Ember.js’ CLI, which seems to be a pretty powerful, and somewhat new, interface for working with Ember.js. (I would like to give the author, Andy, more credit, but unfortunately the blogging platform he is using only lists his first name, and links all of those first names back to the page you are already viewing…). The article is long, and all text-based, but there are plenty of code samples, and the text is pretty light-hearted and thorough. (Plus, I like any author that readily admits that “I’m not as funny as I think I am”… Somehow, I think I can relate… ;-)

Bottom Line

I read quite often about how much of “a steep learning curve” Ember.js has. Again, I agree that it is not necessarily intuitive, but it is not a blocker to me; all of the concepts follow standard MVC practices, and once you learn “the Ember.js way”, things move along pretty swimmingly.

Also, I love any framework that builds stuff to make my job easier, like the the built-in console log feature, and their Chrome and Firefox inspector extensions.

All of that being said, based on market-share, I would say Ember.js is worth being familiar with, but maybe not the first one I would focus on. AngularJS is certainly currently the king for that right now, but I think that , as we will see shortly, React is going to be taking over eventually…

I hope you enjoyed getting to know Ember.js, up next is React!

Happy learning,