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 authorß 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

Today’s Readings

I read through ‘s LazySizes pretty thoroughly and it seems really great! Providing lazy-loading functionality for anything with a special class (lazyload by default, but you can change that), that reacts to the element’s parent’s size, uses standard HTML and data attributes, and promises to be “jank-free at 60fps”. Well worth a deeper look!

A few gotchas from mobile development from . All worth knowing about. Wish there were a better way to keep track of things like this. Like, in my IDE, in the form of “hints”… :-)

So, on top of those few little items, here is an entire deluge of tips for everything from Sublime Text, Sass, CSS, Terminal and more. Good luck.

Great work-around for styling radio elements without killing accessibility!

rel="mention". New to me. But sounds fun!!

In case you haven’t already heard about, and fallen in love with, the lobotomized owl selector, please do so now…

Although I have yet to implement any flexbox layouts myself, I absolutely love that you can do things like this dynamic photo gallery so easily

And as much as I already love flexbox, I’m pretty sure I am going to grow to love grid layout just as much

Or, you could just use display: table

Although I am a LESS-man by fate, I could easily switch to Sass when I see things like Takana

Print CSS is always the last thought, if even that, when new projects prepare for launch. Need to look more deeply into Hartija, and compare it to HTML5 Boilerplate, but at first glance, it looks quite good!

Two JS APIs that we should all familiarize ourselves with are Battery Status API and Navigation Timing API. Our users will thank us!

‘s Styling and Animating Scalable Vector Graphics with CSS presentation from CSSconf EU 2014. Love her talks!

scrollReveal.js Easily reveal elements as they enter the viewport.

Really love these transitions. And the demo? Just fun to watch… :-)

shows how to add Retina support via srcset.

And offers a very thorough responsive images run-down.

But reminds us that in most cases srcset is probably all we need

The 6 Plus is the first iPhone that sports a “Retina HD” display…

Shit… This means beyond our 1x and 2x images, we also now need a 3x… Great. Better learn how to set-up PhotoShop for that!

Get to know object.observe.

Netflix is apparently a huge fan of A/B Testing!

Very simple, yet effect, JS method for creating a dynamic download file.

And finally, in the name of Halloween, I offer a “scary” e-commerce performance graph for you… Ok, maybe not so scary, unless you work in e-commerce… :-)

Happy reading,
Atg