Today’s Readings

Everyone knows who Stephen Hawking is, but I’m not sure that many people outside of a physics department could actually tell you what he did or that much about Hawking himself. We know that he speaks through a computer, we know that he’s largely unable to move, and we know that somewhere along the way, he proved himself to be a genius. But what did he actually do? And how did he wind up this way?

A new biopic about the legend hopes to answer these, and other, questions, can’t wait. I hope it won’t be too Hollywood-ized, but I will watch it anyway…

The great Tuts+ has created a series of tutorials highlighting 50 WP Filters:

  1. The First 10 Filters
  2. 11-20
  3. 21-30
  4. 31-40
  5. 41-50

Got Grunt? Most of us do, so here are 8 ways to improve your Grunt set-up from the good folks at BBC News.

And while we’re grunting away, let’s see how we can use Grunt to open and run PhantomJS, a “headless web browser” that allows you to render a page “without having a visible window” and “see its results in the command line” or “even render snapshots of pages without having to open a browser and do it manually”…

Some really slick drag-and-drop interaction ideas! Going waaaaaayyyy beyond simple highlighted drop zones…

offers ~199 slides on Front-end Tooling Workflows. How many are you taking advantage of?

And another li’l bit of Addy, here is his Advanced CSS Performance Tooling presentation from CSSConf EU 2014.

Hmm, native modal support, via the dialog element… Me like!

A clever animation simulation using nothing more than images, a little JS and a little CSS…

7 CSS Units You Might Not Know About” I’m sure I knew about them all at some point, but have certainly forgotten about some. Though, the examples in this article make me think I should revisit things like ex and possibly ch

Fantastic, practical examples of ARIA, ready for you to use in the wild!

And speaking of a11y, here is a great online site accessibility validation tool, helping us help the Internet be better for everyone!

Proposal for fn.displayName to permanently avoid anonymous function. Love.

This Lossless PNG Optimization You’re Probably Not Using Shrunk One File an Extra 39%

Go on…

My friend forwards a fantastic journey through the universe, scrolling provides scale, and clicking provides deeper insights into our surroundings. A fantastic voyage, indeed! But sadly, it’s Flash… :-(

The Art of UI Animations has some great take-aways, including actual learning-stuffs, like some history, some terminology, and some guidelines/principles/recommendations, and finally some real-world examples. One of those very rare presentations that stands perfectly fine without the presenter being, well, present. Nicely done.

Wow, it’s a style guide guide… Impressive collection!

9 basic principles of responsive web design. Great comparison GIFs that help to illustrate the different options one has while developing, also helping to highlight the pros and cons of each option. Though, I still have a problem with what the author seems to be saying Adaptive Design is: based on the animation, it would appear he is saying that adaptive is JS-driven or something, while I tend to think of Adaptive from the server-side… Am I missing something?

A recent Smashing Magazine Newsletter offered a nice collection of form-helper libraries, a few I like so much I wanted to offer as well:

And finally, I thought this was one of the funnier, albeit crueler, browser comparisons I’ve seen… :-)

Cruel, yet funny, comparison of web browsers
We love you, IE, really we do…

Happy reading,
Atg

Today’s Readings

Image sprites are a great, basic, performance win, especially when it comes to icons. But with some iconography moving to SVGs, what to do? shows how SVG Fragment Identifiers work like SVG sprites!

With all the articles flying around about srcset and picture now arriving in modern browsers, here is a great walk-through on actually implementing these new features, in a real-life scenario, including which to choose, when, and why.

19 iPhone Tricks And Tips. The full title of the article is annoying link-bait, but these are actually all great tips for iPhone users!

So, the next time you have like a month of free time, have a look at this seemingly-never-ending list of CSS resources, from simple to advanced.

From comes TMI. No, not that TMI. Addy’s is “Too Many Images“, a command-line utility that analyzes a URL for the number of images, compares that number to the HTTP Archive average (not sure if that’s really useful, or even helpful), then notifies you of any images that could be optimized further.

In my opinion, UX is still a field that has yet to be recognized, and implemented, everywhere it should be. But if you happen to be one of the lucky ones that has a chance to bake UX testing into your projects, here is a walk-through for mobile UX testing.

And speaking of UX, talks about enhancing tap interfaces with Fluid Touch Gestures. TL;DR: Allow touch-interface users to tap-and-drag to the next “touch hotspot”, converting a bunch of tap-tap-taps into tap-drag-drags. Would take some learning I think, but the end result reminds me of the Swype keyboard, which is said to be much quicker than standard typing…

And speaking of , his From the Front Lines of Multi-Device Web Design presentation from WordCamp SF 2014 starts off quite well, I especially like the “expando” chart at about 3:00, but then my laptop fan went nuts and everything nearly crashed, I imagine thanks to WordPress.tv having served this video via a Flash player… Who still does such things???

I imagine most devs today are quite familiar with console.log, but did you know there are lots of other features hidden under the console hood? Have a look at these five, to whet your appetite

And if you are a developer, there’s a good chance you’re using Sublime Text. If you are, here are a few Sublime Text 3 shortcuts to help your dev-life a little faster

One of the harder things for me, as a developer to deal with is when a certain feature, formerly known to be unusable because it is not supported well enough, finally comes of age. It often takes articles like ‘s article about CSS’s calc to goad me into checking CanIUse.com one more time and finally seeing the support in is really not bad!

Sticking with Dudley for one more quick one, he shows an easy method for responsively moving page elements around in the DOM to take your responsive designs beyond clear: left.

JavaScript: So hated, and yet so loved… Answering such questions as:

  • Should JavaScript be used to replace browser functions like history, navigation and page rendering?
  • Is the backend dying? Should I render HTML at all?
  • Are Single Page Applications (SPAs) the future?
  • Is JS supposed to augment pages for websites, but render pages in web apps?
  • Should techniques like PJAX or TurboLinks be used?
  • What’s the precise distinction between a website and a web application? Should there be one at all?

7 Principles of Rich Web Applications tries to help us understand the language, its pros and cons, and best uses-cases.

The Financial Times has built a Polyfill Service, which is basically what most of us thought Modernizr was going to do when it first came out: it modernizes the user’s browser for you, so you don’t have to worry about it! Read the article, it is a seriously brave undertaking, and will be fascinating to learn more about, I think!

Once again, Jeremy sums it up best, helping to properly define progressive enhancement. To me, this is yet another term, like responsive design, that should disappear from our vernacular; in both cases, it’s called web development… If you’re not building responsive sites, and you’re not building progressively, you’re not building websites.

I read every word on every page I could find on the Framote website, and still couldn’t understand what it did. So I tried it. And (mostly) love it! It is basically a remote control for remote devices, and would typically be used for testing cross-device. Here’s how it works: you enter a URL into their site, and they give you two URLs in return: 1) the “control” URL, and 2) the “reactive” URL; you load the “reactive” URL in all your test devices, and the “control” URL in, say, your desktop/laptop; when you make changes to the URL in the “control” browser, the “reactive” URLs will change to mimic it. Simple, easy-to-use, and (once you’ve tried it) easy-to-understand cross-device testing.

You down with TLS? Well, I’m not, yet, but hope to be soon, and so should you… And this article can help.

And while not ready yet, Let’s Encrypt.org is on its way to help with “free, automated, and open” certificates! Yeah!!

The Guardian describes the concept of content containers, how they chose to follow this method, and how and why they implemented it in their Beta site.

pseudo-element “alt”: New to , new to me… Would be nice, though!

And for Mac users, I just accidentally discovered this: Shift + Option + Delete deletes entire word to left with one click; Shift + Command + Delete deletes entire sentence to left with one click. Can’t wait to get to work and see if the typical Control-version works on a PC!

And finally, I go back-and-forth about whether I like the original version of this song, but I am all-in when it comes to this parody! :-)

Happy reading,
Atg

QR Code Bookmarklet

I created this QR Code creator some time ago, but did nothing more with it than use. Then a former co-worker, saw it and wanted it!

Then he improved it, which inspired me to share the code with anyone interested.

Peter’s article does a great job of explaining how it works, so go read that there… :-)

Happy scanning,
Atg

Today’s Readings

It’s easy, when we live-and-breathe (and sometimes sleep) inside our own industry, to think that concepts like progressive enhancement are “known well enough” that we no longer need to explain them. It is therefore healthy to be reminded that it is not necessarily the case, and always nice to have someone like to help remind us…

Fantastic demonstration of progressive enhancement at its finest! Although Gov.uk‘s Performance Dashboard is a pure-JS web app, it also works for legacy browsers, non-JS browsers, and is accessible to all users. How can this be? Because the entire site is rendered first on the server, via Node.js, then, in browsers that can handle the dynamic updates, those same JS components are loaded in the front-end. Just gorgeous!

Nice write-up of how to use Grunt to automate your development environment. Not theory, suggestions or best practices, but actual code and explanations of a real-world example.

Another great real-world example, this time creating and animating SVG icons using CSS and a library from Adobe called Snap.svg. From setting up Adobe Illustrator, to optimizing your SVGs, to adding the JS needed, as well as a few tips & tricks that the authors learned along the way…

Of course, if you’re just making sure things are responsive, you can do that with just CSS. And a little work…

How many bookmarks does your favorite browser have stored in it? Any that are specifically “cool stuff” for web developers? Of course! Well, here are a few more for you, from .

And organizing all those bookmarks has always been a pain. Even making use of folders, in no time at all we end up with a seemingly never-ending list of links that we can no longer find anything in. A new Google Chrome Extension promises to fix that. Not completely sold, but it certainly is an improvement over the default Chrome Bookmark Manager…

Probably the three most common UI features you come across now-days are hamburger icons (I tried to fight for navicon, but I give up…), off-screen navigation, and sticky headers. Thanks small–screen devices! Well, if we’re stuck with them, let’s at least check-out a few inspirations for your next sticky header

Another recently-common UI pattern is the nearly full-screen section. Here are several implementation options, starting with using JS to calculate and maintain heights, then moving on to simply using CSS to do the job!

Some ideas just seem like they were sitting there waiting for someone to trip across them. Like solar-powered headphones… :-) How long until all things are plastered with something that captures sunlight and converts it to energy? Clothes? Shoe laces?? Fingernail polish??? :-)

A good friend, , writes about SweetAlert, a better JS alert. Way better, and being just plain mark-up, you can even customize them to match your site’s theme!

I have yet to dig deeply into this, but RemoteIE let’s you test the latest IE on Windows, Mac OS, iOS, and Android… Huh.

And finally, the inevitable tagline for this new carry-on bag writes itself: “This is the carry-on you’re looking for“… And in case you get thirsty while traveling, “This is the can cooler you’re looking for“. And the lunch bag. And the trash can. And the USB hub. And the folding chair… Wow, I sure hope that little guy is making some royalties on all this shit… :-)

Happy reading,
Atg

Today’s Readings

Did you know you could add a datalist to (nearly) any input? Neither did I…

From comes his The Things Browsers Can Do presentation. Fun stuff, and guaranteed a few surprises!

Interesting idea: a full-page menu

Triggering JavaScript Actions With CSS Media Queries. Slick…

And once you have that set-up, Dudley show you how to move elements around based on media queries.

The Godfather of JS, Mr. , offers an update to his JavaScript: The Good Parts, with JavaScript: The Better Parts.

Not completely unlike the “good parts” and “better parts” comes Web Components: The Right Way

And once you’ve got all the “right ways” to do things, why not spend some time at the spa? Er, Single Page App, that is, using those fancy web components

Two methods for creating gradient borders. I could see this being very useful, with better colors, or course… ;-)

If, like me, you dig maps, then you, like me, will dig Beautiful Maps

Great demo page for all the various cursor types you can use! Not all supported everywhere, of course, but as a progressive enhancement, could add a nice finishing touch.

Speaking of progressive enhancement-type finishing touches, these subtle hover effects are quite nice, I think.

And lest yee thinks “progressive enhancement” is just for “those hippy developers”, points out that Google is now watching, too

Turned on to JSCritic by my friend ; I can see why he liked it, pretty awesome!

Practical, schmactical, I say! Shape blobbing is straight-up fun!!

Have to admit, I don’t think of SVG when I think of “what could fit inside a pocket-guide?” But here it is

As long as we’re talking about animating SVGs:

Walkway: An easy way to animate simple SVG elements.

Back to once again to learn how to easily concatenate WP Theme & Plugin CSS and JS files, and when it makes sense to do so.

Responsive Issues Community Group. The next frontier…

And finally, may of you will be too young to remember a decade we called “the 80s”, but this is what it might have been like, if two time periods had collided

Happy reading,
Atg