Today’s Readings

So, let’s start off with a little science! :-) Inside of an accelerating vehicle, which direction would a helium-filled balloon move: in the direction the car is accelerating, or the opposite? Find out, and why.

How’s your CSS vocabulary?

I don’t remember Google I/O websites from years past, but this one is pretty cool, and more than just a little fun to play with

Ever need to filter or sort 100s of 1,000s of items in the browser? Me neither, but if we ever do, PourOver says they can help…

What about animated drop-shadows? Still, me neither, but Shine.js is at least fun to play with! And I could actually see using this for a main header or logo.

Impressive 3D solar system!

A case study for Unicef’s Tap web app. Many tips for dealing with mobile devices & browsers.

Not all that surprising, I think, but always a nice to see reasons explicitly listed why SVGs are so much better than icon fonts

Great news recently that the PictureFill polyfill has been updated to use the actual picture and source elements, and it should work in all browsers… Love!

And in other news from the Filament Group, comes PoliteSpace, an unobtrusive, accessibility-friendly method for creating input masks. I get the why, but would argue that, as a user, I want it to work exactly the opposite, where the formatting is there when I’m focused on the box; after that, I could care less what it looks like. But again, I get why they did it the way they did it, and it is for the greater good.

Vertical alignment: most hated CSS requirement ever? Well, here are four solutions to try to help. table-cell is probably best known, and works great, when you can use it. Flexbox is certainly the newest, and is probably the one most people will (and should) use. But the vertical-align and transform methods are not very practical, unless you know for sure that the text will never wrap…

And speaking of flexbox (as I so often do!), learn it in 5 minutes!

Did you know that an element with visibility: visible inside of something that has visibility: hidden will be visible? I did not…

What date format do you use? Well, if you live in one of these “many” red countries you do it like MM-DD-YYYY; those “other” countries apparently do something weird different… ;-P

The Right to Free Speech: Protecting you from your government, not giving you a guarantee to be loved (and paid) regardless of how fat-headed you are and how much stupid shit falls out of your mouth.

If you’re not already familiar with , get to know him! You’ll be glad you did…

Need/Want to copy code and paste it somewhere else, with all the highlighting you already have set-up in your IDE? Well, if you use Sublime Text and Keynote, you’re in luck.

A new approach to managing z-index, borrowing from game development, and making heavy use of CSS preprocessors. Beauty!

And finally, with more than a little home-sick-for-New-York, browse through some classic NYC numbers, and have a look at an attempt to revise NYC’s infamously impossible to decipher parking signs… Thanks, , for the nostalgic heart-tug… :-)

Happy reading,
Atg

Today’s Readings

New HTML5 hyperlink attributes. I was familiar with download, but not with media or ping, both of which seem really useful.

And speaking of downloading, until support for the native FileSaver is widespread, you can always use the FileSaver.js polyfill.

The biggest knock web apps typically get is speed: they simply can’t be as fast as native apps. Well, this new JS framework from Famo.us proports to disprove that belief…

Great all-around SVG presentation. Starts nicely with simple intro and basics, then moves into embedding, scripting, filters, animating and “other cool SVG stuff”.

And as a related note, while SVGs are natively responsive and scalable, it is possible for them to resize differently than desired. So check out Vlex, which lets you set-up rules to handle resizing.

Really nice “state of the union” for IE. Find out what is already in, what’s coming, or where it stands.

I have known for some time that you could hop from tab-to-tab in Chrome by pressing Cmd+Option+left/right-arrow, but did you know you could jump instantly to a specific tab by pressing Cmd+tab-number (they are 1-indexed)?
[Note: There is no link here, this is something I actually found out myself... ;-) ]

Are you a gamer? Then put your gamer skills to the test!

And in case you’re not the “gamer” type, and prefer to simply read things, here are 12 Little-Known CSS Facts from .

More than 85,000 videos, covering more than 80 years, is now available, for free, on YouTube. Wow.

And for something a little more palm-sweating and sphincter-tightenting, try this collection of downhill biking + helmet camera vids

You can now access and remote control your desktop/laptop from your Android phone. As I sit and watch my wife talk with Siri on her new iPhone, I ponder and fantasize where this combination of technologies will go… :-)

This solar phone charger seems pretty cool, but I’m having trouble finding anything more than the brief description on the Amazon page…

Great all-around Accessibility article, covering everything from forms and access keys to ARIA landmarks and video subtitles to colors and contrasts…

Or maybe you would prefer your very own personal, mobile, wind turbine?

A really inspiring article about design from , presenting what I feel is the greatest missing component of nearly every project I have ever had to work on: time. Time to think, revisit, tear apart, reconstruct, redefine. In short, make better.

Which led me to an article from where he also briefly discussed this article, but then went on to mention something that I have been wanting for a long time: the ability to link directly to a part of a webpage, even if the author didn’t provide a deep-link ID. Sadly, this is currently only doable via a Chrome extension, but still love it!

And if you feel your Extensions page is still a little too spartan, here are 4,000 comments discussing “must have” Chrome extensions

Nice, quick glimpse into the world of Google design, specifically the oft-under-considered search page. It is also the first of four times that I would encounter a quote from (“Any sufficiently advanced technology is indistinguishable from magic.”) in three days…

Adding subtle animations can really give an app that polished touch. And while these are all centered around a payment process, I think the transitions can be extended to all kinds of user interactions.

And finally, Did we just find Earth II?

Happy reading,
Atg

Today’s Readings

Quite a collection of quirks and resources regarding touch/pointer/mouse events across a plethora of devices, browsers, and interfaces.

Video presentation on JS scope and this; this is another of those “you can always find something you didn’t know or forgot videos for me…

Which leads nicely into trying to fake private and public methods in JavaScript.

And once you have all your fancy JS up and live, demonstrates how to use Google Analytics to track errors, regardless how unlikely they may be… ;-)

Does adding bike lanes make traffic slower? No, if done right, and in fact, can reduce the number of cars and make the sidewalks and streets safer. Duh.

As developers, we’re often accused of being mean, but what we might really need is BMEAN. It adds Breeze to the MEAN development stack, which adds client-side caching to the stack. This lets the author create an offline-first app that syncs with the DB when able. Pretty slick mash-up!

Detailed walk-through for using flexbox as the layout for a chat app. (Note that this is not a functioning chat app, this is just about using flexbox for the layout.)

And speaking of flexbox, have you met Flexplorer yet? Awesome! Be sure to scroll down and check the code as you make changes; what a beautiful monster flexbox is…

Ever want to animate a cork-screw, loopty-loop roller-coaster? Well, it’s not so hard, with SVG… Oh, and probably other, useful things too… ;-)

Speaking of SVG, a whole slew of CSS clip masks that you can use with SVG (some times).

Do you know your Git? I certainly don’t as well as I’d like, and I guarantee you can find something on this GitHub cheatsheet that you didn’t know, or your money back…

The Magic of CSS is am amazing know-it-all and teach-it-all wrapped-up-in-one…

How many of these programmer replies are you regularly guilty of? I can personally claim several… ;-)

Make your list items cooler.

Also Much cooler form labels

And finally, I made a lot of things out of cardboard when I was a kid, but never anything anywhere close to this stuff

Happy reading,
Atg

Today’s Readings

Well, the news has certainly cycled around by now, but it was announced just as I was pushing the Publish button on the last Today’s Readings post: IE6 is no longer supported by MicrosoftGüte Nacht

What? I have to wait 30 seconds to charge my phone???

A doctor saves a man’s life by using Google Glass during surgery. Now that is the kind of use I have to imagine Sergey and Larry were imagining when they envisioned Glass…

How and why to create style guides, one of the often skipped-over aspects of a large project. Sure could have used it for the most recent project at work… :-/

And then and present a case-study on creating and developing based on Style Guide Driven Design, as well as discussing some end-benefits. Really great approach!

A nice case study for a Unicef web app, using several JavaScript hardware APIs.

Very cool circular submit/progress buttons!

And some nice CSS transition animations for selected elements. My wife actually had a great idea for something similar to one of these, to have a modal appear to zoom out from the element you clicked to trigger it.

From this list of 11 great WordPress plugins for designers I found these two particularly interesting:

  1. Manual Image Crop, to create custom crops of images as you add them to the Media Library, and
  2. Easy Pricing Tables, to create pricing tables

I don’t know why I have such a soft spot for maps, but I do, and always have. This update to Google Maps makes creating infographics much easier! Be sure to check-out the demo. Wow, California, right up there with Texas and… Mississippi, huh? Oof…

Um, did anyone else know that <a href="sms:"> is a thing? And some times even <a href="sms://+12125551212">?? And maybe even <a href="sms://+12125551212?body=I%27m%20interested%20in%20your%20product.%20Please%20contact%20me.">??? Come on!

And finally, for the Star Wars fan who has everything, including far too much money, the life-size Han Solo in carbonite, for your very own home…

Happy reading,
Atg

Today’s Readings

A nice primer on the physics of animation, including one more attempt to try to figure out which direction ease-out and ease-in go…

I know some people are sick of hearing about flexbox, but the ease with which responsive grid layouts can be created is not to be underrated!

Night-vision goggles are a mainstay in any sci-fi-military type movie, but how about night-vision contact lenses?

And if that isn’t cool enough, how about a robotic kangaroo that is controlled via a wristband? Sure, why not.

Google has added a new set of tools to its Cloud Platform.

Brunch… compiles your scripts, templates, styles, lints them, wraps the scripts and templates in common.js / AMD modules, concatenates scripts and styles, generates source maps for concatenated files, copies assets and static files, shrinks the output by minifying code and optimizing images, watches your files for changes, notifies you about errors via console and system notifications

Then it does your laundry, walks the dog, makes your morning cappuccino, and carries you to work while you finish sleeping. Wow!

Not sure what the practical uses for GridList are, but the the demo sure is fun to play with!

You buying into web components yet?

If you said no, you need to get to know them better

The largest collection of 007 cars“… [drool...] :-)

Geeky jokes are always cool, right? Right??

A pretty cool frosted-glass CSS filter effect. Initially, I would have thought this would be easy, using a simple background rgba, but then you wouldn’t get the blur, which is key to helping make the text more readable.

Keeping with CSS Tricks for another second, [Chris Coyier http://css-tricks.com/] offers a new take on how to scale your font-sizes sitewide, mixing px, rem and em. It does make sense…

Small-scale wind-generator, based on the reverse-engineering of a bird’s wings… Awesome! And, fittingly, probably a lot less likely to take-out birds than the typical huge propeller-type wind turbines!

Designs that use 3D and the z-index. It’s a great concept, especially how different parts of the “page” (but really the app/site) can scale and transition independently of one another…

And finally, best… coffee… mug… ever…

Happy reading,
Atg