Today’s Readings

Well, it appears that Net Neutrality has won the day… Yay!! Does this mean all those f-ing “Sign the Petition” emails can finally stop coming to me, please??? Something tells me that, while we may have won this battle, we have not yet won the war, that big money will simply lick its wounds until we lose focus, and this will all start up again, under yet another name…

Anyone else read Google+ in Chrome? If so, does it absolutely murder your browser after about 3-5 minutes? Yo, what up, Google+ and Chrome, don’t you guys, like, work for the same company??

OhSnap is a JS notification system “designed to be used in mobile apps” (but something tells me it would work pretty well in non-mobile browsers too). Simple method for sending new notifications that auto-dismiss or the user can click to dismiss.

In real life, the HTML5 Document Outline is apparently not all the spec is cracked up to be… While the spec says starting nested sections with a new h1 is fine, basically creating a new “scope”, apparently no browser currently supports that, so users really get a confusing garble of h1s… This has always been a bone of contention between HTML5 and SEO, so, I guess SEO wins here…

Interesting Windows font-family bugga-boo discovered by .

Blink and WebKit DevTools allow you to copy from their Console to your clipboard… No, you can’t use this to create a “Copy to Clipboard” button on a website, this is now the last useful purpose for Flash, but has some uses for this little-known feature.

Using Sass to create a SVG is probably never a good idea (as the author admits), but it is nice to know you can

Have you ever uploaded an image to WordPress and wondered why it looks pixelated on the front-end?

Why yes, yes I have… Now learn how to do something about it.

Several examples of Accessible modal dialogs. Like.

Got CSS pre-processor? Here’s a lengthy article on why you should, and how to go about switching to SCSS, even if you have a crap-ton of legacy CSS files.

Then read why CSS pre-processors are totally evil, and how we can save ourselves, by using CSS post-processors…

Okay, show of hands, who uses Linux as their OS? At home, I’m on Mac OS, and at work, typically, I’m on Windows. But several co-workers just changed over to Linux. I know it’s what all the cool kids do, but here are some solid reasons for doing it, and how to do it.

And finally, on October 31st, 2009, the last McDonald’s restaurant in Iceland closed. The day before that, bought a hamburger and french fries. And put them in his garage… They are now viewable via a live stream at the National Museum in Iceland

Happy reading,
Atg

Today’s Readings

We’ve seen this technique of no-JS modal overlays before, but every time I see it again, I always wonder why I am not using it… I guess the only real negative is the change in URL when you open/close a modal, but should we really care about that??

For whatever reason, I ended up in the Less camp, but Sass has always interested me, especially since it seems to be the only one of the two options that I ever hear anyone talking about… :-/ has put together a five-part series on Sass (links to the previous & next tutorials can be found at the end of each one).

I knew about jQuery namespaces, but using them to indicate where the click came from is kinda brilliant…

A rather extensive read about responsive fonts.

Well, this seems promising: Wifi Map, a free app containing over 2 million crowd-sourced hotspot locations and passwords, worldwide…

Start off by wrapping your data with clean, semantic HTML, add a little starter-CSS, add in some JS to create an SVG-version. Progressive enhancement at it’s best

Build & host your own URL shortener with YOURLS. Also has a link to a pretty cool site, Domainr, which helps you find available short URLs… Huh.

A ton of button :hover transitions for your hovering pleasure…

A run-through of a Twitter “fave”-like :hover animation

Pretty slick dynamic input field. More complex than I expected it to be, but the article explains it all quite nicely!

Some cool text effects using text-shadow, text-stroke, background-clip, and even SVG!

And here are a bunch of CSS-only :target UI interactions.

And finally, one of my all-time favorite webbies, here is Jeremy Keith’s presentation on The Long Web, from A List Apart. Always a good listen…

Happy reading,
Atg

Today’s Readings

So, here’s an article about using the lang attribute on the html element. It begins with a simple enough question, a rather short answer, then a curious mind (the author, ) does some interesting research, and finally there is a pretty good list of benefits for using the attribute. After all of which, I ask: Why not use it? To me this falls into the same category as microformats and the abbr element: Is it really that hard to simply use it? As a publisher, don’t you want your content to be as findable as possible and to be consumed by as many people as possible? And as a human being, if adding one stupid attribute to one stupid element can help one more person understand something better, why not do it??

Quite a bit of buzz (and more than a few jabs, m`self included) was created recently when Microsoft announced their new web-browser, Project Spartan, that is to replace IE. Here is a description of the why and how, and what it all means to the future of the web; I highly recommend reading it, as I think it gives a really good snapshot of who Microsoft’s web browser team is, how they think, and where they are headed. For example, after the initial 45-minute forking of the code that allowed them to separate from IE‘s legacy:

… there was a liberating silence when we realized what this now enabled us to do: delete code, every developer’s favorite catharsis. In the coming months, swathes of IE legacy were deleted from the new engine. Gone were document modes. Removed was the subsystem responsible for emulating IE8 layout quirks. VBScript eliminated. Remnants like attachEvent, X-UA-Compatible, currentStyle were all purged from the new engine.

This all sounds beautiful, and in the years to come, could be viewed as another huge turning point for our industry. It just could be that, in a handful of years, we can stop using the term “modern browsers”, and simply say… “browsers”…

While it will certainly not win any design awards, if you take a peak under the hood, this website just might win a few development awards

Nice case study of Yelp adding animation to their mobile site, including initial attempts, tests, results, and improvements.

I’ve mentioned (and her seriously impressive CodePens!) before, and here she impresses with a combination SVG, SCSS and a freaking buttload of math…

The SVG/CSS work on these image-less wrist watches is inspiring (be sure to play with the location icons in the top-right, too). They also made me hope that one of the first apps that people can download to their smartwatches is something that shows the current time like these… :-)

How do you take, annotate and share images or screenshots? snapshot.io makes it pretty easy, allowing you to upload or drag-and-drop an image (mobile let’s you Take a Photo or Choose from an Existing), annotate, upload to their server, and get a URL that you can then share. Pretty simple.

Ever use Array.prototype.map or Array.prototype.reduce? Even know what they are?? If not, get to know them!

I’ve written about my hosting woes before, and for the most part am happy with my last move, but have always been curious about using Google App Engine to host my WordPress sites; anyone ever try it? Anyone have any thoughts or recommendations?

Hmm, and when you decide it’s time for another move, seems like Deploy4Me could help make the move easier…

Or, if you don’t need something too fancy, webservr will let you deploy via Dropbox!

No question, JSON is a really cool way to ship data to clients. It is also one finicky little bugger, just begging for errors to break your stuff… That’s why Hjson has come to save you, allowing comments, optional key/value quotes, no escaping necessary, and even making commas optional…

An introduction to Accessible Rich Internet Applications. It’s long, and filled with wonderful examples that should make everyone want to implement ARIA in all their websites & applications. Will it make you do it?

Leave it to to offer this improvement to a years-old solution: Simple CSS-Only Row and Column Highlighting.

And finally, our favorite overlords, Google, are proposing a new way of making information about everyday things available to anyone with a connected device. They’re calling it The Physical web. Discuss.

Happy reading,
Atg

Today’s Readings

Now back to our regularly-scheduled program…

brings us some rather uncommon units of measurement, like deg, rad, grad, and turn. Erm, yeah… we all knew those, right???

I don’t fully understand what is talking about with this node.js-powered automated JS profiling script, but I trust that it is good…

These animations are as impressive as they are over-the-top!

Several variations of responsive pagination, all based on the same HTML, and easily customizable.

So, we’ve all heard that sitting all day is bad for us, right? And we’ve all heard about the whole standing-desk craze, right?? Well, we now have desks that tell us when to switch positions, and then switch positions for us, even syncing with our Fitbits, so we can track, um, our standing and sitting… Oy…

I’m pretty sure we’ve covered object-fit before, but it’s worth repeating

An email from , via the W3.org respimg list-serve:

I’ve been working on a flow chart that might capture how someone decides which combination of responsive image features might make sense. I’m considering a separate flow chart on picking image breakpoints.

Here’s my current work in progress:
https://dl.dropboxusercontent.com/u/196424/images-flowchart.pdf

Yeah, it’s like that…

For a deep-read (have a long train ride or flight coming up?), offers a thorough collection of Design Principles that he continues to collect and curate. He also offers a bit of an introduction, but it too, I’m afraid, is a bit of a long-read… :-)

Speaking of deep-reads, Weighing SVG Animation Techniques (with Benchmarks). Wow, that’s thorough.

And speaking of SVG, wow, really nice intro-level walk-through on SVG Shapes; the next article in the series focuses specifically on the path element, nicely explaining what that massive d attribute means… Both are great reads!

I’m sure like most of you, I have hated the masked password field from the very first time I had to use it, and grumble to myself every time I mistype something and have to Backspace over the entire password and start again… So I rejoiced when I read ‘s first article on password unmasking, but felt certain it would never catch-on; after all, people are brainwashed into thinking it is necessary for the security of the planet! But with Luke’s latest article on the subject, Showing Passwords on Log-In Screens, he includes success stories and conversion rates. Hopefully this will help convince other sites to take this bold and beautiful step forward…

After far, far, far too long, YouTube is now using HTML5‘s video tag as their default player, not Flash… Huzzah!

And finally, I saw this on “The Facebook” the other day and just thought it was cute… :-)

Google and I are so close that we finish each other's sentences...
Google and I are so close that we finish each other's sen[tences]

Happy reading,
Atg

Today’s Readings

Some nice examples of adding motion to your transitions to provide a more natural, and intuitive, experience.

The Page Visibility API has been around for a while, so I was curious why Smashing Magazine was publishing an article about it now. But the author (the famed !) makes a nice, subtle transition for muting or unmuting a tab.

Get to know the Virtual Viewport. A change in Chrome 40, which actually catches Chrome up with… IE?

recently helped answer what is apparently a common question: Why do we need responsive image markup (i.e. the picture element or srcset attribute) when we have CSS and JS? Thank you, Bruce.

And between the two markup options, the srcset attribute certainly has better support than the picture element does

(Though, I am curious how the iOS column says that it requires a -webkit prefix… How do you prefix an attribute)?

So, for us WP users, we have a new plugin on the block that allows us to add the srcset attribute to our templates! (Also available via GitHub, if you prefer.) And here is a solid explanation of the new plugin, by one of the authors.

But just in case you still prefer to use the picture element, here is a little code to help add that to your WP templates too!

(Though, I am surprised to see both code bases only offering the functionality via PHP code in the templates, and not via a shortcode from within the editor, arguably where it would be much more useful…)

And while we’re so deeply-entrenched in WP-land, we all have those moments when we wonder why WP does something some way, or have some idea how we can make the code better. So, why not give them a hand?

Okay, just one more: Learn how to load previous or next posts via Ajax. Come one, that’s cool, right?

It’s no secret that I love SVGs, but I don’t think I have ever exported an SVG myself. So I will trust the author of this Illustrator SVG Exporter script that it is a pain, and that this script makes it much easier… Any takers?

Then I stumbled across this free online SVG editor. It’s certainly not going to win any design competitions, but how does it work? Using a sample image I found online (borrowed from here), it converted the initial 86.5 kb file to 71.1 kb, a savings of 82.2%… I wasn’t able to “combine paths”, as this broke the image somehow, but nearly 15.5 kb is nothing sneeze at! I also like how it updated the preview with each setting change, so I could easily see the effect without committing… I didn’t get into the actual editor, because I have no idea what the hell I’m doing there… :-/

Then I stumbled across ‘s SVGOMG… And OMG is right! Definitely a nicer interface, and more optimization options. Though this optimizer says the initial SVG was 84.46 kb and the optimized file was 48.88 kb (or 17.24 kb, if you toggle on Gzip), which is a savings of 42.13%… Impressive…

Most developers check their sites on at least a handful of mobile devices, if they’re lucky enough to have a few handy. Some, the adventurous, even bother testing on 3G. But who in the world tests on 2G? The good folks at 34 Cross, that’s who! And the site in question is the topic of this new performant, responsive, CSS-only site exposé on CSS Tricks. Oh, and get ready for some maths… Nicely done. Nicely done, indeed.

Speaking of RWD, has collected a whole slew of RWD resources, nicely grouped intro categories for your perusing pleasure…

And one you’ve got RWD in place, remember that it is only the beginning, and that you might also want to consider using a few ÄWD techniques. Luckily for you, literally wrote the book on it, and has now made that book available online, for free… I love our industry… :-)

I still keep thinking one of these days I’m going to wrap my head around design patterns. Hasn’t happened yet, but maybe this series on PHP design patterns will be what I need…

So far in my career I’ve been lucky enough to almost completely avoid custom fonts, and have been able to get designers to rely solely on web fonts. Some day that luck is going to run out, and when it does, I’ll be happy I know about this article from the Filament Group about responsible web fonts.

It’s not that I think this loading indicator is so practical, but I do think it is amazing that it is a single div and CSS-only… As in no-js

And finally, I have two articles that involve the U.S. Senate and votes regarding climate change. One cites that all but 1 Senator agreed that climate change is real, and the other actually lists which members of the Senate think humans actively contribute to climate change. (I’m actually pretty surprised to see so many in the right-column with an “R” beside their name…)

Happy reading,
Atg