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 Brian Kardell, Steve Faulkner, Charles McCathieNevile and Léonie Watson 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.

Heydon Pickering recently offered two articles with some really good opinions about Things To Avoid When Writing CSS (Part 1 and Part 2). Then Mihael Šafarić 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 Ana Tudor 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 Sara Soueidan 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?? Nicolas Bevacqua 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,
Atg

Top⇪