Today’s Readings

Basic primer on how to Master Responsive Design Using CSS.

Then you could take a free Udacity course on responsive images! Can’t beat the price… ;-)

Regex. Done shuddering yet? Hopefully RegexOne can help you learn more, and thus hate less, about Regex. At least just a little…

And while we’re on the topic of learning, let’s gamify it up a bit!

  • git-game is a terminal game designed to test your knowledge of git commands.
  • JavaScript Scope Quiz is, well, pretty aptly-named…
  • shortcutFoo helps you practice, and thus learn, more shortcuts in a bunch of languages and applications.
  • exercism is a GitHub-based, crowd-sourced, exercise-based learning tool for a bunch of programming languages. (Okay, not really a game, but… sorta kind of… ;-) )

As the arrival Microsoft’s Edge browser nears, how can Mac and Linux developers test & debug? offers solutions.

This map shows the world’s buses & trains moving, in real-time… (Or at least where real-time data is available.) Freaking awesome!! Nice to know I can just watch this to know when my bus is coming in the morning… ;-) It gets really freaky when you zoom-out, and bump-up the speed… :-)

A pure-CSS filter by color demo. Great work! Now imagine those color names being categories or subjects or something-else-that-would-be-put-into-a-tabbed-interface, and toggling their visibilities, all with CSS-only… Love!

TextBlade for Smartphones & Tablets is seriously impressive, but I think I would accept a little more size, for a little bit bigger keys… Cool nevertheless!

I have mentioned BrowserHacks before, a long, long time ago, but it is incredible enough to mention again, and I am amazed at how it has grown!

A new newsletter has come to town, called SVG Weekly, and here are a few choice samples:

Looking very forward to reading much more from here!

And now that our SVGs and animations are all sussed out, let’s figure out how to animate Quadratic Bézier Curves

Chrome is adding GPU Rasterization that “can take your paint overheads from 100ms/frame to 4-5ms/frame”… But not everywhere, yet.

Telling the horrors of hydraulic fracking, with a lovely parallax scroll

And finally, I will be traveling (and relaxing!) over the upcoming long weekend, so your eyeballs and brains get a reprieve this coming Friday and Monday, as there will be no new issue either day. But I hope to have another installment ready for next Wednesday. ¡Hasta luego!

Happy reading,
Atg

Today’s Readings

Start using preload and its required as attribute today, because as soon as some browser implements it, your users win!

Sticking with standards for a sec, the sizes attribute is now required for any image that uses the srcset attribute, due to some performance hits that most developers were creating.

By now I’m sure everyone has heard the hubbub about Facebook’s new Instant Articles, created to improve the speed of browsing shared articles. Well now that this is live, maybe they could do something about the parallax image double-load happening on their own site, too (check in DevTools, note that each parallax sections has a background image, such as screen_fast.jpg, and an inline img tag, with a src something like screen_fast_mobile.jpg, and that both get downloaded by the browser)… I assume this is an attempt at doing something special for mobile, but there’s no need to ding everyone else.

Maybe a better approach would be to use something like Lazyr.js, to postpone the downloading of all images until you know the environment, and your user needs them (though, the old-curmudgeon in me wonders what happens for the 3 people on the planet that don’t have JS while browsing…).

Several great examples of Functional Animation In UX Design. I love what the long-overdue acceptance of SVGs has brought to our browsing experiences!

Bing will follow Google by giving mobile-friendly sites a boost in search results

Google and Bing… Reminds me of this Saturday morning cartoon…

And speaking of Google, huge news: Green lights for our self-driving vehicle prototypes. They will be hitting the streets of Mountain View (with test drivers, still) this summer! Cannot. Wait!

In two alternative-power-related stories:

Freaking awesomeness!

Although this video is slightly more than 10-minutes, and although the instructor only really offers a single loop optimization technique, and although most of us are probably sick of hearing and thinking about “What’s the fastest way to loop in JS?” (especially when the instructor starts off by telling us he had to use 500,000 items in his loops because browsers are so fast at iterating), this video on JS loop optimization has some interesting moments. Most interesting to me is that the data type you are looping through actually affects the loop speed, and changes which loop alternative runs fastest in each browser…

This re-introduction to JavaScript is fun to scroll through, if for no other reason than to remind yourself about all the little quirks you already work around, but forgot that you do… :-)

A “small” step up from that list, is JavaScript: The Extra Good Parts. My personal favorite from this bunch is getters and setters, so powerful. Also love the classic photo at the end of the article… :-)

And now that we’re all familiar, once again, with the “basics” of JS, How do you judge a Javascript programmer by only 5 questions? Yup, good questions… How did you do?

And finally, who doesn’t love a good map? So we should all love this interactive map that tracks rat sightings in NYC, right? And the only reason I can imagine there is so little red is that most NYers do not bother calling 311 when they see a rat, they just quickly hand over their lunch money and hope they don’t get assaulted by it…

Happy reading,
Atg

Today’s Readings

Bootstrap tabs that keep track of the history using the HTML5 History API. Smart stuff!

The Microsoft Edge team has started blogging about their F12 Developer Tools. Their first installment is all about the Network panel, and the additions and changes they’ve made there.

We’re probably all familiar with a few of CSS‘s “at-rules”, like @font-face, @media, and maybe @support if you’re adventurous. But there are a lot more to play with! Too bad @document isn’t better supported, that is pretty powerful!

A short note on ARIA‘s aria-labelledby and aria-describedby. Nice to know that you can make screen-readers call-out elements that are hidden to the visual user!

Next up are three HTML5 articles:

  1. First up is a lengthy article regarding sound on the web, discussing uses, meanings and choices for using the audio element. Far more in-depth than the article’s title suggests.
  2. Next is an explanation of the video element, all the various formats, which is best for what and where, and how to combine it with a video-hosting service.
  3. And finally, What’s the Difference Between Image and Figure Tags in HTML5? A good question deserves a good explanation.

And speaking of sound on the web, as a drummer, TypeDrummer is just plain fun! Check-out my rad chops! :-)

From comes a collection of comments and viewpoints on “the state of design tools”.

Speaking of design, I was already familiar with text-rendering: optimizeLegibility to try to help my text appear a little better, but I was not aware of the performance-hits this causes, or the option of text-rendering: optimizeSpeed… It’s nice to have options, and is something that one might make use of if you have a device-detection scheme in place, offering smaller screens better performance at the cost of slightly less-pretty text.

Wow, some very adventurous text hover effects! (Scroll down on the demo page to see the various effects.)

The incredible shows how to determine if and why your hero images may be downloading slowly, and how to improve the process… As usual, fantastic stuff!!

Local Storage Bridge is a very clever technique that uses local storage to communicate between tabs.

Speaking of clever, need a second monitor? Have an iPad?? That’ll work

A fascinating look into the past, and future, of CSS, but also into the origins of one of the greatest heroes in our web development universe, .

Skype has been working on real-time translations for some time now, but now “anyone can now use Skype Translator to translate English, Spanish, Italian, and Mandarin in real time“… Universal Translator, here we come! :-)

shows us how to Automatic Text Contrast with CSS Blend Modes via progressive enhancement methods. Typically awesome!

And finally, I first heard of Wolfram Alpha via my friend ; it is amazing, but most of what is so amazing about it is honestly somewhat beyond me… But its ability to identify images you upload is certainly not beyond me…

Happy reading,
Atg

Today’s Readings

For my designy peeps: Designing in Browser: A Real Workflow. In case you’re, you know, into that…

If a picture is worth a thousand words, how many words must a video worth? But they’re a pain to make, right? Maybe not, says Viosk

When you’re adding icons to a site, which is better: Font, Inline SVG or Background SVGs? You’ll have to click to find out, no free lunch. :-)

“Awesome” and “MySQL” are two words you don’t often hear connected to one another. But this Awesome MySQL is a “curated list of awesome MySQL software, libraries and resources”!

We’ve all heard the rumors that Google could crawl sites and use JS, but no one was ever quite sure, until now…

We Tested How Googlebot Crawls Javascript And Here’s What We Learned

CSS Preprocessors have made us pretty familiar with the concept of a source map, but what about a source map for minified and obfuscated JS? Sounds like a good idea to me!

SymDiff (symmetric difference) is a Gulp project that is meant to help you identify, and thus reduce, CSS you no longer need. Not sure how well it would work on dynamic (fragmented) code bases, but certainly worth a try!

Nice collection of animation transitions. Be sure to also check-out the Animate Popups (subtle button in the bottom-right).

Learning to love BEM. I have to agree with Jonah on this one: on a current project I decided to try BEM, and I really like it. (Actually, I personally wish the __ and -- were switched, but that’s my personal taste; I also don’t necessarily add the “child” classes to everything single element, if I don’t expect them to need any CSS.) Even though I am a single developer building this site, I expect one day for it to be inherited by someone else; I’d like to think BEM will make that developer’s job a little easier. (I’m actually combining the BEM classes with ‘s SMACSS; I really like it a lot too!)

On a bit of CSS run here, so let’s keep it going, with five pseudo-classes that you may not typically use, but could be quite useful.

The pros, cons, and how-to for using CSS clip-path to create custom shapes, without having to rely on PhotoShop. Rarely do such demos create interesting shapes, in interesting UIs, so use your imagination… ;-)

Hmm, also from Smashing Magazine, comes an interesting responsive font-size possibility, combining calc, em, vw and vh. And support for calc and support for vw / vh seem to be pretty good now…

And finally, just in case these little posts don’t fulfill your thirst for web dev content, click on over to wwwhere.io for a seemingly-never-ending scroll of content related to our industry…

Happy reading,
Atg

Today’s Readings

I remember reading some time back about a clever technique for including JS in a page, but having it not be immediately interpreted, by enclosing that JS in HTML comments, then eval-ing it when needed. Slick, though I never actually tried it. This JS Bin shows an easy way to create, and grab the contents of, HTML comments; it does look pretty easy…

Svidget.js is a JavaScript framework for creating immersive and fully interactive SVG widgets. By componentizing your data visualizations as widgets, you can quickly and easily embed them on any website while keeping a clean separation between SVG and HTML.

Bikers: Trying to pick the best route from “A” to “B”? We often want the fasted or the one with the least-traffic, and perhaps some times we want the one that is the least hilly, but what about the least polluted?? Sounds rather nice to me…

As much as I do not like the term “hamburger icon”, I do have to admit that it is a very practical, and now well-established, method for collapsing menus on small screens. And this burger-icon-to-fullscreen-menu is pretty elegant

If you are considering switching your site to HTTPS, here is an intro-level article, good for getting you up-to-speed on terminology and options, but won’t really get you up and live.

Once you are convinced that you want to do this and have a basic understanding of the process and grammar, check-out this article to get your site secured.

Or maybe you would prefer a more detailed explanation by someone that just finished the process, including problems, frustrations and fixes.

And if you’re working on securing a WordPress site, including a Multisite, maybe this article is best for you.

A woman and her children were being held hostage by her boyfriend. Apparently he did allow her to order some food, from Pizza Hut, so along with her pizza and garlic bread order, she included a message to “Please help. Get 911 to me” and “911hostage help!”… This is, by far, the best use of a native app I have ever heard of…

The new Tuts+ series, A Walkthrough on Conditional Tags in WordPress, looks quite promising, looking forward to future installments!

Ever need, or want, to access your WP content via an API?

What are allergies? How are they caused, and what can people do to prevent them?

And finally:

A new project aims to create a space to address systemic issues such as wealth inequality, environmental degradation, a broken political system, and rampant racial and sexual discrimination.

This project is called The Next System Project; you can read more about it here. Like.

Happy reading,
Atg