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 Jeremy Keith 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 Simurai.
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, Kevin Chisholm, 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