Today’s Readings

Okay, I know I’m a little late getting to these, so let’s dive right in: Here are 10 advent calendars for designers and developers.

The Fundamentals of Mobile Web Development: learn, build and iterate. Yup. Every day. It’s one of the things that I love about my job: I learn something new nearly every single day, and the landscape is always changing.

And just in case that didn’t quench your thirst for Chrome Dev Summit 2014, here is a playlist of all the conference vids!

Starter course of Clipping and Masking in CSS, by .

From The Old/Decrepit to The Fresh/Powerful, an Introduction to Service Worker.

Page bloat update: The average top 1000 web page is 1795 KB in size… Good God…

12 HTML5 tricks for mobile. Most are pretty standard, but there are several that will give your sites a nice touch in specific devices.

Seriously thorough collection of touch/pointer events test results across multiple browsers.

I love this floating label pattern!

Cyclists: the Copenhagen Wheel turns any normal bike into an e-bikeDay-am that’s cool!!

From a recent Web Tools Weekly newsletter comes something I was not familiar with, and am still not sure how I would use, but it seems cool enough that someone smarter than me could probably find a great use for it: document.elementFromPoint. (Note that you might have to scroll down in the far right panel to see the buttons and output section…)

a11y.css: This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site’s quality by simply including it as an external stylesheet.

There’s a bookmarklet, too. Which I used on my own home page. And was shown two broken links (malformed vcards with missing hrefs). Gee thanks! (Wish the little “count” box in the lower-left of the screen helped me somehow find the stuff it had counted for me, though…)

A new app, PushBullet, helps interconnect your phone with your computer, like getting a push notification when you receive a call or text (my phone is almost always on silent mode, so this does happen to me!), and send files from your computer to your phone. Nice idea!

I don’t think necessarily think Elastic Stroke is practical in any way, but I am absolutely impressed by what one svg and a bit of CSS (read: no JS) can do…

A configurable, command-line RWD performance test. Well okay then.

Seems like that could be a pretty useful tool in helping you to create your performance budget

“This has to be above the fold!” Maybe not so much

Now, I know I’m an old curmudgeon, but I hate conversing with computers. I’m okay touch, click, and even type, but I hate speech interfaces. Wonder if that will ever change… I hope others do not feel the same as me, though, and that speech continues to advance. I love it in sci-fi, I just don’t want to deal with it myself… :-/

These SVG loading icons are awesome! Why am I only now seeing this idea? We’ve had (mostly) ugly and clunky GIF images forever, we were never really given a chance to try animated PNGs, and we even tried mark-up-only and CSS-only loaders. `bout time..·

And finally, while it is universally agreed upon that the world can never have too many Haikus (okay, maybe this is just my opinion, but I’m pretty sure I’m right), we sadly do have a finite number of IP addresses. So let’s help those sad, finite IP addresses have a little more fun with life, and convert them into Haikus

Happy reading,
Atg

Today’s Readings

A friend recently asked if one could send push notifications without an app. I said “No” of course, because you can’t. Then he sent me a link he found online, for Roost, which claimed it could. Hmpf. Okay, download script, beautify, dig around, find reference to new easyXDM.Socket… Look-up easyXDM, be appropriately impressed… Through a couple very clever workarounds, you can now do push-notifications, originating from your website. Awesome!

All the videos from ffconf2014!

50 Hidden iOS Features. These are always so good, and then I immediately forget them…

JS scope is something that most JS devs are at least slightly familiar with, but I think it is another of those topics that can never be revisited too often. In that spirit, here is a really nice, easy-to-understand article about JS scope. Thanks to for the link.

And speaking of JS, some say it is never too early to get kids interested (or at least help them be not afraid of) coding. In that spirit, I present JavaScript for Kids. And while that title (and the writing) is certainly geared toward children, just like any language book (like the German language on my bedside table), that simply means it is simply written, so anyone that you know, at any age, would likely find it quite easy to understand and follow along!

And once the kids have the hang of all that, let’s throw them in the deep-end, with all the ins-and-outs of this! :-)

Okay, just one more for the JS fans out there (come on, it’s for the kids!): Constructors as Functions. You know you live it…

Wildcard sounds like an interesting concept, I especially like the reference to “an alternative RSS Reade[r]”. Too bad it requires iOS 8 or higher… Anyone try it and want to share their thoughts?

All the glamour of the picture element is around serving different image crops based on the device’s screen-size. But, as one JSBin user points out, it is also a dead-simple way to try to help your users with a webp image

Do you know how to build a website?

Every relative of every web developer

Also not the theme of the 24 Ways article What It Takes to Build a Website, by . Instead, Drew focuses on the actual prep work, planning, and thinking, before getting into the actual coding.

So… SVG Morpheus is pretty sweet… Though, with a name like that, I would have expected the demo to include a blue pill morphing into a red pill, but nevermind…

I love when JS and physics combine… I can still remember the first time I encountered that, at a SXSW conference, watching a then-unknown-to-me Seb Lee-Delisle… It changed how I thought about JS… Anyhow, the article that made me wax so nostalgic, Creating Animations and Interactions with Physical Models, should really start with a disclaimer to stop reading it on a desk-/laptop and grab your phone, because the first two times I started reading it, I was thoroughly under-impressed. Then, realizing he mentioned iOS pretty early-on, I grabbed my iPhone. Das ist besser

Sticking with JS and physics for a minute, let’s play with a few more transitions

Okay, just one more physics-like piece, this time regarding making animation look real, with CSS Core Animation Skills: Gravity, Squash and Stretch, from .

An online SVG editor, with localStorage capabilities… Bwah… Now if only I had the inspiration and know-how to create really, really slick SVGs all by m’lonesome… :-/

I read some time ago about Specificity Graph, but for some reason it just didn’t quite click, exactly how to use the info to better my CSS… This article from helped…

CSS Shapes. That’s still something from the future, right? Well, maybe not, especially if you don’t mind adding Adobe’s polyfill for the couple places you’d still need it… Exciting news, if you ask me! So, let’s learn how to use shapes & masks!

A nice collection of Git “emergency tips”.

Automating Web Page Rendering Performance. Sounds great, can’t wait to try it!

MixItUp is a pretty slick sort & filter jQuery plugin. Be sure to play with the various settings options, and be sure yo note the logo, a nice subtle touch… :-)

I like the look of Chartist, the idea of animated charts is quite fun. But I hesitate as soon as I see the browser support, especially for foreignObject, which seems like one of the only ways to get advanced text in SVG…

And finally, want to get a seriously birds-eye view of what your visitors are doing? Then just record them! Wow.

Happy reading,
Atg

Today’s Readings

A couple weeks ago in Mountain View, CA, the Chrome Dev Summit 2014 went down. They’ve very kindly made available online videos for all the sessions.

Or for the TL;DW crowd, here are ‘s notes from the conference.

Snap Tomato seems like a seriously cool way to get your code on any device for testing. But it does require that you be able to paste your HTML into their online editor. Would be super cool if you could also pass them a URL, but then again, this actually lets you paste code that doesn’t currently exist on a public URL…

Nome (pronounced know me) is a JavaScript library that leverages the power of HTML5 geolocation and location data.

While that may sound a little weak on first-read, scroll down their homepage to see all the data you can easily get from their API… Nome is impressive.

Have to admit, I had not heard of window.fetch before, but this polyfill from GitHub (and the browser support it helps provide) makes me want to get to know it better!

Ever want to watch your users use your page? K, maybe not, but you do want to know how they interact with your page, right? Well we can at least make a pretty good guess how their eyes scan your page

How readable is your CSS? Ever go back and look at something that you wrote like a year ago? Yeah. offers a few solutions to help make your CSS better.

Based on the incredibly-awesome Can I Use website’s data, I Want to Use is a very cool spin, allowing you to enter something that you want to use, and see what percent of the current browser market will be able to support it… I do wish the site had a better way of dealing with someone (like me) looking for something that isn’t available, like vmin

Stop Writing Stateless HTML: The basic concept is that only non-user-oriented HTML should actually be in the mark-up initially delivered to the browser; any user-oriented (log-in forms, geolocation info, shopping cart, any type of status indicator, etc.) should be added via JS… The initial benefit is a single code base for all users, less initial HTML to download, and this stuff isn’t needed by bots for search indexing anyway. Of course, many of you will scream “But what about actual users that don’t have JS?”, which is always a good point, but there is plenty of research saying that the number of users worldwide is about 1%. Then again, if your audience is big enough, 1% could be a significant number of people…

Wow, thorough run-down of how various browsers, and versions, deal with rounding and truncating percentages and pixels.

Got Git? I do, and I know our team can pick-up a thing or two from this team workflow with Git article.

When we hear regression testing we usually think back-end code, or maybe JS, but pretty much never CSS. BackstopJS just might change your mind

I’ve always felt like a rep from each part of the team should be involved in the design process, not only so everyone can chime-in on easy, not-so-easy, etc., but also just because different people have different ideas and preferences, that can only help to make the overall project better. Smashing Magazine agrees… :-)

Sticking with Smashing, How To Create Your Own Front-End Website Testing Plan. Some good ideas and resources. I for one did not know you could use Shift + Command + 4 on a Mac to create screenshots! I use Skitch, which I love on a PC, but hate on a Mac, because it tries to shove everything through Evernote, which I do not use! Nice to now know this alternative…

Okay, so Smashing Magazine was on a roll, what can I say… A nice walk through creating a polyfill for the HTML5 detail element.

And finally, I finally found the reason for the annoying Facebook bug where opening a photo and canceling out of it bumps you back to the top

Happy reading,
Atg

Today’s Readings

Coloured lightmaps with CSS blend modes. I don’t claim to understand it at all, but impressive-looking none-the-less…

ran some CSS media query tests, seeing whether browsers download linked CSS files when they shouldn’t.

Whether you call it a “dialog”, “overlay”, “pop-up”, “alert”, or just “thingy that jumps up in my face”, these are some good inspirations for making… one of them…

I have always been fascinated with how things work, and Google Maps is no exception. Now you can get a slight peek at how it all comes together

was one of the first Web Dev Gods I worshipped, and he continues to guide the way. His latest article from 24 Ways, Responsive Enhancement, is a nice compilation of several enhancement methods.

Title says it all: There is no fold.

Cool CSS-only, light switch-style toggles!

Or, if you prefer to customize your very own, Proto.io has you taken care of, including presets for iOS5, iOS4, Android, Windows 8, or custom-roll your own!

A nice collection of real-world issues (and solutions) from adding offline-capabilities to an AngularJS project.

The two mad Googlers themselves, and are here to introduce us to the Time Framing API, which will be coming some day soon from the W3C.

And speaking of W3C APIs, check-out the State of Animation, which, after a brief history lesson, introduces us to the Web Animations, which Chrome and Firefox have already started rolling into their nightlies, and the other guys, well, are working on… But until then, the article even shares some polyfills with us! What a nice article! :-)

The web is finally starting to play nicely with mobile: Google is now telling users which search results they deem “mobile-friendly”, and Android and iOS are finally converting their respective native app webviews into something that can be updated via their app stores, so no more long waits for OS updates! Shucks that’s swell!

Perf.Rocks: Resources that help you build lightning fast websites. But more importantly, .rocks is really a valid top-level domain??? I think it might be time to do a little shopping… for aarontgrogg.rocks!!!!!

Airbus Unveils Transparent Plane Of The Future For An Incredible In-Flight Experience

Personally, I’d much rather have a glass-bottom plane, but would easily settle for enough leg-room in Coach so I do not have numb feet when I arrive somewhere…

I was reading this article on ordered lists from and was inspired to play with another option for ordered (or their un- cousins): making comma-separated, inline lists… The HTML would be something like this:

JS Fiddle

I’m a huge fan of adaptive design. It has to start with responsiveUI however, is ‘s presentation from Smashing Conference 2014: Adaptive Input. His talk starts off discussing the importance of responsive UI, then moves on to what we really consider the divisive characteristic between devices, which is the input, and how we can start to think about dealing with different input options on different devices. As usual, good stuff.

Pretty Diff: An online diff, beautify, and minify tool.

And finally, normally I try to end with something pretty silly down here at the end, but I’m going to instead point you to an article titled Stop Making Users Explore, in which author points out that “Nobody cares about your product. Fundamentally, what users care about is themselves”… I could not agree more, and the sooner we learn this, the sooner we get to the point and start making connections…

Happy reading,
Atg

Today’s Readings

I am an American that currently lives in Germany. And I can tell you first-hand that Germany is doing a lot of things right. So when I read that German Chancellor Angela Merkel is against net neutrality, I was aghast! Then I read her reasons, and was slightly less-so, but am still quite pessimistic that her reasons would hold true over time…

Pagination and lists; HTML doesn’t get much more boring (unless we want to talk about forms, and who does?). But you can have fun with counters!

So you really want to talk about forms? Okay, fine. Let’s at least make it fun by using currentColor and pseudo-elements with our form controls.

A plethora of performance measuring tools, from websites to bookmarks to command line, including Grunt and Gulp… Whew!

The Polaroid camera was iconic. And digital cameras totally ruined it! Well, Prynt is here to try to set things right again…

Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements. Wow, that title’s a mouthful, but the end results is quite nice indeed! Though, in the last section, Chris demonstrates how display: table could be used to provide support for older IE, which looks pretty identical to me… My questions would be: Why not just use display: table in the first place? I realize you can’t do the shuffled order, but I can’t imagine ever wanting to do that anyway…

Great two-part series on modern debugging options & techniques:

  1. Part 1
  2. Part 2

Speaking of modern debugging techniques, my good friend , who regularly writes great tutorials on modern web development techniques, has another great piece about using Firefox’s emulator.

With all the hub-bub about Google now indicating “Mobile-friendly” pages in search results, it makes sense to at least run your projects through their Mobile-friendly test tool. Depending on the results, you might also want to consult the crap-load of resources offered on their Web Fundamentals page.

If you’ve been looking for a good AngularJS tutorial, it seems like Treehouse just might have it for you.

Or maybe you’d prefer an alternative, like Zurb’s Foundation for Apps?

icdiff… Would love to see this replace the existing git diff viewer!

A thorough run-down on all the various classes WP natively makes available to you.

9 eye-popping images created purely in CSS3” Impressive, indeed!

And finally, it seems someone was kind enough to write my Christmas List for me! ;-)

Happy reading,
Atg