From the blog

✻ To kick things off this week Sarah wrote an introduction to mo.js, “a motion graphics toolbelt for the web”, or rather a JavaScript library that helps developers do neat things with animations:

You can animate a bunch of different CSS and SVG properties but one of the neatest things about mo.js are the developer tools it gives you. For example, a player can quickly be added to the bottom of the screen which let’s you debug the animation step by step.

✻ ✻ ✻

✻ Next up, Chris looked at the browser support for copying text to the clipboard and things are looking pretty good:

It wasn't that long ago where you couldn't programmatically copy text to the clipboard from the web without using Flash. But it's getting pretty well supported these days. IE 10+, Chrome 43+, Firefox 41+, and Opera 29+, says Matt Gaunt in writing about it on Google's developer site.

Safari 10 works as well. Clipboard.js is a tiny JavaScript library that provides a clean API. One small drawback: you need to try to copy before you know if it works or not on the client side, so not the cleanest progressive enhancement ever.
✻ ✻ ✻

✻ In a guest post, David Attard writes in about leveraging a CDN on your website:

Thankfully, the process for integrating a CDN does not have to be hard. Ideally, you get things configured and then things like Google PageSpeed shriek with glee in the form of high performance scores which, in turn, yield to better search engine rankings, higher revenue, a raise for you get the point.

This tutorial is all about integrating a CDN by yourself, rather than having a plugin do things transparently.
✻ ✻ ✻

✻ Next up, Osvaldas Valutis describes how to lazy load responsive Adsense ads, but also in a responsible way, too:

You can respect user's mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can also serve ads in the right size in accordance to the screen of the device. That would be nice of you. That would not only be responsive but also responsible.

✻ ✻ ✻

✻ Alicia Sedlock describes monkey testing with gremlins.js and goes on to explain how and why you might want to incorporate it into your tests:

Monkey testing is a method of testing that generates random user input - clicks, swipes, entering input - with the sole purpose of finding issues with, or entirely breaking, your application. Unlike unit and acceptance testing, where you are writing test cases that occur in a specific order or set of conditions, which ultimately creates bias in how your interface is tested. Developers have less control over how a monkey test will execute, and since they are random every time they are run, you'll never be testing for just one scenario, but rather an infinite combination of interactions.

✻ ✻ ✻

✻ And finally, Geoff looked at all the myriad ways in which to get SVGs out of Illustrator and gives us all some helpful advice which can be easily overlooked:

Be careful here. Saving as SVG from Illustrator is fine, but the file is absolutely not ready for direct use on the web. When you "Save As..." from Illustrator as SVG, Illustrators primary concern is that you can open that file again in Illustrator just as you left it. […] The file size of "Save As..." saved Illustrator SVG's can be several orders of magnitude larger than a really web-ready version. Take a look at the CSS-Tricks logo "Save As..."'d and one exported for the web.

This week around the web

Jake Archibald wrote about how complicated media queries can get with SVG.

✻ ✻ ✻

Last month James Bridle published welcome.js, a script that helps folks learn about the console. This was inspired by the warning that pops up on Facebook when you try to open the console and peek under the hood:

James writes:

I understand why Facebook has done this: their users are subjected to many different and many nasty attempts to hack them, some of which include persuading them to do stuff in the console they shouldn’t do, like Self-XSS attacks. I also understand – but cannot condone – the way they’ve phrased their warning.

See, view source is a human right. Since the beginning of the web, thousands, probably millions, of users have bootstrapped their way to technical understanding through exploring the way the existing web is put together. I did. You might have done. And you, we, should be able to. And more than that, we should be encouraged to. For fun, for experience, for education, for revolution.

This is what welcome.js looks like when you open the console of a website running the script:

✻ ✻ ✻

Typekit published a piece about color fonts, a new font format that gives developers control over different parts of a single character:

Adobe’s new color fonts use an innovative font technology that allows built-in SVG (Scalable Vector Graphics) to enhance the way the fonts appear. This new standard allows color information to be stored inside a font and could change the way people interact with type.

Make sure to check out the demo in Firefox 26+ or Microsoft Edge 38+ to see the effect.

What have you learnt this week?

Robin Rendle:  Maciej Cegłowski published his talk called Who Will Command the Robot Armies? where he talks about the scary implications of the Internet of Things — where every device is connected to the web:

Here is the Internet connected kettle! There was a fun bit of drama with this just a couple of weeks ago, when the data scientist Mark Rittman spent eleven hours trying to connect it to his automated home.

The kettle initially grabbed an IP address and tried to hide:

3 hrs later and still no tea. Mandatory recalibration caused wifi base station reset, now port-scanning network to find where kettle is now.

Then there was a postmodern moment when the attention Rittman's ordeal was getting on Twitter started causing his home system to go haywire:

Now the Hadoop cluster in the garage is going nuts due to RT to @internetofshit, saturating network + blocking MQTT integration with Amazon Echo

Finally, after 11 hours, Rittman was able to get everything working and posted this triumphal tweet:

Well the kettle is back online and responding to voice control, but now we're eating dinner in the dark while the lights download a firmware update.

Internet connected kettle, everybody!

Sure, that’s pretty funny, and lots of Internet of Things devices are really weird and confusing at the moment. But I’m not entirely sure that the idea itself is a bad one. Check out the talk below by Scott Jenson on what Google is calling the Physical Web:

The Physical Web enables you to see a list of URLs being broadcast by objects in the environment around you. Any object can be embedded with a Bluetooth Low Energy (BLE) beacon, which is a low powered, battery efficient device that broadcasts content over bluetooth.

Push through the beginning of that video because it’s quite awkward at first; at a quick glance, it appears that the technology isn’t solving a real problem at all. But! The idea that certain objects in the world can broadcast a URL isn’t necessarily a crazy, dangerous, or useless one.

Building an interconnected system of cement arteries between cities and carving the landscape up so that tiny, four-wheeled machines can buzz around is a crazy idea to folks that are ok with horses. I don’t know. Talking about technology with this kind of scope in mind is extraordinarily complex and nuanced. I see the dangers of a connected world but I can imagine how useful this technology would be for moving through an environment, for learning a new language, for seeing links between things that are impossible to see by just looking at a physical object.

“Web 3.0” is a terrible phrase that I can only apologize for making you read, but maybe the next step for the web is for it to embed itself in the world around us.

Or maybe not.

Until next time!
Team CSS-Tricks

Chris: I'll make ya a little handshake deal here. You buy my book Practical SVG (which I'm confident will help you reach for SVG more often, which is a good thing for everybody) and I'll answer any question you might have for me. Or try to, anyway. just shoot me an email at with the subject "Practical SVG - Question - ...".
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list