Today’s Readings

Posted on May 2, 2013 by aarontgrogg

I’ve never been a fan of pre-built grid layouts, I feel like there’s always too much “other stuff” included. Then along came the ptb/flexgrid. Looks very promising, with fallback-support as far back as IE6/7, and weighing just 3.6k, including a customized Modernizr build.

While we thought we were being so smart using our fancy JS-based RWD image fixes, we’ve actually been breaking one of the best browser performance enhancements. So, what’s the right method now, other than sitting and waiting for srcset or picture to finally land? The comments suggest a few approaches, but I think all fail in one place or another…

There’s no question that SVG is bad-ass and should be used SO much more than it currently is, especially for cool filters and shapes and stuff, right? But it’s a pain in the ass, right?? Nope, not really.

It’s always fun to (quickly) scroll through lists of old, nostalgic JS oddities. But here’s a list of a few current JS oddities; coder beware!

Though not updated since 1.6.2, this is nevertheless a fantastic way to read through the jQuery source code! I really hope it gets updated to a more current version, though there is arguably more to learn from older version of jQuery, since it was fixing more things…

A lot of very fun animation and interactions!

Clowncar seems an interesting option for responsive images, though not very practical for editorial images… And I love when authors include the problem/solution/thought process in their descriptions, it is so encouraging and inspiring to see others encounter problems, and clearly work to solve them…

I could stare at this for hours…

A fine collection of coding style standards.

From James Edwards (Brothercake) comes a clever tactic to synch a video and audio track to aid with accessibility.

And lest you think low-vision isn’t an issue on the web, check out the latest low-vision survey from WebAIM.

You’ll likely know most of these, but it can’t hurt to have a quick scan, never know when you’ll find some previously-unknown performance nugget!

Sweet animations, nicely educational, and deeply depressing…

Hmm, the download attribute, how did I not pick-up on this earlier? Like the type="email" or type="url HTML5 enhancements, there is really no drawback, as browsers that don’t support it will simply do things the same stupid way they’ve always done things. Love!

Camping. I know lots of people that don’t do it, but they should. It’s a great way to get away from life, get back to basics. THere’s something very primitive, yet soul-charging about sitting around a campfire at night, listening to the wood crackle, watching the sparks fly, and the flames dance. <sarcasm>And now you can charge your cell phone while you’re doing it!!!!!!!</sarcasm> Ugh…

I’ve heard about plenty of Google Reader replacement options, and I’ve tried nearly all of them, yet none so far has provided me with exactly what I want, which is an exact replacement for Google Reader… There is still hope, as Digg takes a stab at being relevant again…

Hmm.. I have to say, morphees are a great concept, but I think the promo video was a little ahead of its time…

And finally, take a fun scroll through “what could have been” in some of your fave movies & TV shows… As bad as some were, they could have been worse… :-)

Happy reading,
Atg

Today’s Readings

Posted on April 29, 2013 by aarontgrogg

Hallelujah, might we finally have a (hopefully-soon-to-be) reliable replacement for Google Reader?? The article specifically references iPhone, not sure what that means for Android…

And here are a couple of alternative lists if Reader doesn’t quite quench your thirst, one from LifeHacker and one from ExtremeTech… I haven’t tried any of them yet, but NewsBlur looks promising…

Closed-captioning is (some-day-soon) coming to the web! Okay, well at least someone’s talking about it…

Wow, TraceGL is mindblowing! If you’re like me (read: “words hurt my head, please show pictures and talk”), scroll down and watch the video. Mindblowing!

This is pretty amazing, with only HTML & CSS… And I had no idea you could do for loops in SASS… I’m suddenly interested…

Initially this might seem a little OCD, but some times you just need to re-order your browser tabs, right? And maybe some times you’d like to move several tabs, right?? I just found out that, at least in Chrome, you can click one tab, hold Shift, click another tab (with several tabs between them), then drag all those tabs at once… FTW!

Nice combination of tabindex and :focus to create a simple game, but the possibilities for allowing tabbed interaction, or click interaction is pretty cool!

A couple of new, interesting-looking television/internet interactions coming soon, one from ABC and the other from NBC. Neither sounds like a show I would watch, but the tech could be interesting…

Ok, the slide/push from left/right navigation menu is suddenly everywhere… So here’s another!

Wow, quite thorough Usability checklist for your next project… Wow…

By now you should have already read All You Need to Know About CSS Transitions. Now read what I would have titled All You Need to Dread About CSS Transitions… Good read, though.

From Remy Sharp comes a really worthwhile article about when, and when not, to add jQuery to a project. It’s something that has been preached for some time, especially in the world of mobile, but Remy does a nice job of concisely explaining his reasoning.

A really, really long list of JS best practices. But I’m sure we all do all of these perfectly, already, right??

And to make sure your team follows all of the above practices, why not push their code through Sgt Donowitz?

And finally, a new Budweiser cup makes toasting drinkers instant friends on Facebook… While the concept is cute, how many situations can you think of where this just goes horribly wrong? The a-hole running around a party or bar doing sneak-attack clinks; That awkward hesitation when someone tries to cheers someone that isn’t quite as interested in Friend-ship; People pulling their glasses away to avoid a “Cheers!”… Yes, they’re all beautifully uncomfortable drinking situations, brought to you by the Crap of Beers…

Happy reading,
Atg

Today’s Readings

Posted on April 25, 2013 by aarontgrogg

Wow, fattest site on the web? Anyone got any fatter??

Initial numbers may not look like much (“shaved 1.57 seconds from our average page load, dropped our bounce rate 1%, and our exit percentage 2.5%”), but when you put those on an enterprise-level site, and start thinking of $$$, this seems a little more impressive…

And speaking of PageSpeed, WebPagetest is now offering a page that compares how your site currently loads, and would load, if you were using PageSpeed Service. The comparison numbers for my site didn’t show much difference, but the video and filmstrip certainly showed a better experience with PageSpeed.

Snap.js makes creating mobile-style navigation menus a “snap” (ha, get it)! There are several variations and several configuration options, tap the icon or swipe left or right to try them all. Very slick!

Is motion control navigation here? Google Earth says it is…

How is it that at 43 years old, I am just now learning of this apparently famous science experiment? Oh, and the prospects of using this to make safer glass is pretty cool too…

Most of this presentation is well beyond me, but the idea of combining these two and getting better performance is all I need to hear…

The question of whether or not to include ARIA in a project should never get raised, and yet it still does. So here’s a simple-to-follow tutorial on helping non-buttons look and act like real-buttons to those that might have trouble realizing it.

For any other “uninitiated” FEDs like me out there, here’s a very thorough guide for getting to know Package Managers.

From Craig Buckler at SitePoint comes a really cool way to horizontally-center responsive images, complete with fallbacks for IE<9, those that still give a shit about them.

It’s like PhoneGap, but from Intel… I started testing it out, but stopped when they required Java… Seems like a fair idea, not sure what they offer that PhoneGap doesn’t, but might be worth a deeper look if you’re into deploying native apps.

Initially using Web Workers to “outsource” heavy JS to another thread and improve browser responsiveness seems like a great idea, until you realize Android has not supported the feature since… 2.1? Why in the world would you include it, then remove it??

Yet another Chrome DevTools video. And yet another well-worth-the-time Chrome DevTools video.

A simple responsive layout with some fancy page transitions. The layout and open/close works fine on my old HTC Desire with Android 2.3.5, but sadly the panel content does not scroll because overflow: auto; is not supported on this device… But otherwise, looks really beautiful!

Wow, the Responsive Inspector extension for Google Chrome is chock-full of cool features, beyond what it initially seems, scroll down and watch the vid.

And finally, I WANT PIZZA, NOW!

Happy reading,
Atg

Today’s Readings

Posted on April 22, 2013 by aarontgrogg

I’ve been wanting to write this article about RWD for so long, glad someone better at writing finally did it for me!

Beautiful collection of animated, responsive navigation menus. Demo 4 is my personal fave…

Hilarious!

Bah! Ligature Icon Font is exactly what I was looking for when I added the icon fonts to my sidebar, but when all my searches back bonk, convinced myself I had dreamt it! Okay, project for my next free time…

Google’s new PageSpeed Service makes some pretty drastic rewrites of your pages in order to make them as fast as possible, especially for mobile. Sign-up for an invite if you think it’s right for your site!

An animated flexbox sure makes a pretty accordion…

Google Chrome Extension DevTools Redirect is a nice, simpler replacement for Fiddler. Though, I could only get it to work with absolute web-based URLs, not localhost files… Anyone get that to work?

Not sure what my standard smirk-in-sunglasses pic says about me, but this is still pretty funny…

Some bad performance news from the <video> front from Steve Souders, followed further bad performance news from Christian Heilmann.

8 Guidelines and 1 Rule for Responsive Images. Learn it. Know it. Live it.

Infograph comparing HTML5 vs. Native vs. Hybrid. Where do you fit in?

Alway fun to hop in the WABAC Machine and see what our forefathers thought was worthy code. Animated GIFs, <table> layout, and <meta name="GENERATOR" content="Microsoft FrontPage 6.0">. I can only imagine what will be thought of ours in 10 years…

The concept of using custom fonts is cool, and even using them for things like icons (like I do on this site) can be a cool touch, but downloading complete font files can cause a real performance hit. Chris Coyier collects a few work-arounds for this issue.

Got Pong?

This is just plain bad ass!

American geeks, tired of your elected representatives representing their financial backers, and not you? Then help get rid of them!

See if you can find any new tips on using Google Chrome Dev Tools. I usually find at least one…

And finally, yeah, too true…

And finally finally, the history of music, “as captured throughout history”, on video, a cappella-style…

Happy reading,
Atg

Today’s Readings

Posted on April 19, 2013 by aarontgrogg

Using cookies to track customer visits to your site before is fairly common practice. Using cookies to then display higher prices to them in order to scare them into hurrying to buy your product now, means you fucking suck. I will never shop for plane tickets, hotel rooms, or rental cars without being in Incognito-mode ever again.

The fact that jQuery 2.0 is now available is no longer news, nor is the fact that it no longer supports IE<9 (or that version 1.9.1 does still support those legacy browsers). But one of the strongest features, I think, is the custom build option that comes with 2.0! With this option, you can shrink jQuery down to less than 10kb (compressed). That’s HUGE! Er, small… Well, you know what I mean…

And speaking of small, a smaller keyboard on my phone? Are you crazy?? Minuum says they’re not, and this review from The Verge agrees with them…

I have long been curious as to how various similar CSS approaches perform in the browser, but never knew how to go about testing. Thankfully, not only has Colt McAnlis done it for me, but he also tells us all how to do our own! See how your fave CSS declarations stack up!

In his article What does the web platform need next?, Bruce Lawson addresses several quotes from others on the matter, as well as talks about what’s coming, how it’s evolving, and what we should expect in the months and years to come. Personally, I look most forward to reliable offline capabilities and a complete overhaul of the lowly <img> tag, to provide proper responsive and as-needed behavior natively, without a bunch of JS voodoo magic BS…

Great walk-through on what worked, and what didn’t, as LinkedIn developed their latest iPad app. Yes, it’s a native app, but the issues they faced, and techniques they used to get around them, exist and work in the web app world too!

Extensive list of generated-content options, included an awesome collection of counter options!

The HTML5 <video> preload attribute is pretty fickle, but here’s how it behaves across a few leading browsers.

Breaking the 1000ms Time to Glass Mobile Barrier… Yes, please!

An interesting take on mark-up validation, Holmes is a CSS file that will “highlight potentially invalid, inaccessible or erroneous HTML(5) markup” in your pages.

Finally, a job site that focuses on what’s really important when choosing which jobs to focus on Perks.io scrubs just the perks for a given job. “commuting & gym benefits”, nice. “time off between Christmas & New Year”, sweet! “Free on-site catered lunch”, well alright!!

TowTruck might be a strange name for collaborative software, but who cares! Being able to share a URL, see each other’s mouse-movement, and communicate via chat and voice, is pretty awesome…

And finally, beware of… the Internet!

Happy reading,
Atg