Today’s Readings

Huge, huge news from the world of WordPress, with 4.4 bringing us built-in responsive images, that couldn’t be easier

Sticking with responsive images, here’s a clever technique to use Service Workers to interrupt images fetches, replacing JPGs with WebPs if the browser supports them!

And sticking with Service Workers, here’s a clever technique to user Service Workers to serve offline content when your site’s users lose their connection!

takes on a walk through several of the AMP Project’s best performance optimizations. All stuff you can incorporate into your own projects.

I had never heard of font: caption before, and it doesn’t appear to work, at least on my Windows 7 machine… I get Arial…

A ton of CSS, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web

Got Sass? I, do not, but I would like to. So I’m thankful for ‘s Learning Sass with CodePen reading list.

Sticking with Dudley, as he presents a veritable cornucopia of JavaScript randomness! Good stuff!

I had never thought about animating a pseudo element’s content before… Brilliant!

Smashing Magazine is well known for its lengthy articles, and here is another, this time for a collection of “layout patterns well suited to flexbox”, including code samples! :-)

Wanna travel back in time? CSS Tricks walks us backward through the history of image replacement techniques

Along with so many other new things we have to think about since the arrival of web-capable phones & tablets, how users hold their little devices should be of major concern to UI designers and developers.

Sticking with A List Apart, , of ClearLeft fame, takes us From Pages to Patterns: An Exercise for Everyone, exploring the new direction we as designers and developers should be thinking…

And finally, a sobering view of the world wide web by , from his presentation at the Velocity Conference in Amsterdam. How will you plan for the future?

Happy reading,

Today’s Readings

With all the hub-bub that Google’s AMP Project made when it was first announced, and all the confusion the lack of proper details created, it is nice to see offer up a collection of resources and facts about the project.

We are releasing today W3C Developers avenue, a one-stop page featuring the offerings and tools W3C has for Web developers, to guide them to what they need for their work. We are doing this to encourage greater developer engagement with W3C due to their increased importance leveraging the Open Web Platform.

As well as W3Cx, free online courses from the W3C! Loving it!!

And as long as we’re all school-minded, how about a quiz to find out how well you understand Object-Oriented JavaScript with ES6?

Shared by , The Toast’s style guide is a first-class example of how these should be created, and maintained…

presents an interesting interactive image effect using SVG to sort of create image map hot spots

For just about any situation in life, offers sage advice: Be comfortable looking like an idiot

Very cool interactive card stacks ideas, really cool!

If you’re working with AngularJS, Tuts+ offers a look into 1.4’s ngAnimate to add a little animation to your projects.

Or maybe you’re looking to push onward to AngularJS 2.0… That upgrade is no small feat, but ngUpgrade might help make that no small feat just a little bit smaller

But I don’t want the AngularJS developers to have all the fun! Hopefully this React cheatsheet will be helpful for any React developers out there!

I mentioned ServiceWorker: Revolution of the Web Platform in any earlier issue of Today’s Readings, and here is the follow-up article, ServiceWorker and Progressive Networking, “dealing with stale cached content in a ServiceWorker.”

And finally, reader shared his article on WordPress SEO tips. While I’m no longer sold on the concept of “SEO“, at least not by its original definition, Matt goes beyond those old keyword-stuffing, only-one-H1, link-sharing tactics, and gets into modern concepts such as improving page performance and content structure that actually do affect your search engine listings in today’s indexes. His list also goes well beyond just WordPress and is worth at least a scan for any content provider.

Happy reading,

Series Part 2: A beginner’s guide to comparing, and getting started with, MVC frameworks: AngularJS

This is the second part of my series on MVCs, where I will be collecting and offering links for getting to know, and get started with, MVCs.

I will be focusing on what I consider to be the big four right now (each will become a link as I publish that part):

  1. Intro
  2. AngularJS (this post)
  3. Ember.js
  4. React
  5. Backbone.js
  6. Summary


Ironically, the tutorial from itself, is probably not the one I would recommend for the beginner; while thorough, is pretty dry, and it just might bore you before really get going…

I started with Shaping up with Angular JS, from Code School. Yet another fine example of online education, taught through video lectures and automated coding challenges, this tutorial walks you through everything from the very basics to creating your own custom directives and how to structure your code. You won’t walk right into a full-time AngularJS job with just this intro, but you will be ready to start thinking up, and working on, your own personal projects! offers an incredible list of AngularJS tutorials, including a really nice getting started section that covers all the vocabulary and basic functions of each “part” of AngularJS, each accompanied by a short video. They also offer a nifty Cheat Sheet, for your quick-reference needs.

Lastly, Thinkster has a very lengthy AngularJS tutorial, though a lot of the links point to the Documentation I mentioned above, or to pay-only sections, but there are also several in-page videos and external resources that you might find useful.

Bottom Line

What I like about AngularJS is the low cost of entry. All of the tutorials that I found begin with an HTML file, add a few custom attributes and values, maybe a couple curly braces here and there, and eventually get into Controllers and such, but the initial task always starts with a basic HTML doc. This is a very comfortable introduction.

Something you might want to read before you get too deeply into AngularJS, however, is ‘s Things I Wish I Were Told About Angular.js. Some of it may not make sense until you get started, but if you read it first, hopefully as you encounter something Ruoyo warns about, you will remember it.

I hope you enjoyed getting to know AngularJS, up next is Ember.js!

Happy learning,

Notes from The State of Front-End Dev Hangout

Really enjoyed watching The State of Front-End Dev Hangout, hosted by none other than . Chris’ guests included , , , and .

The video is just over an hour, but makes for some mighty fine, and pretty humorous, infotainment! To follow are a few notes I made while listening (there were many more), the bits that really caught my ear, mixing pieces of what the panel members said with my interpretations and thoughts on the matter. So, don’t take any of this as direct quotes… :-)

As a bucket-term, what is included in Front-End Development?

Everyone easily agreed that it absolutely includes HTML CSS, and JS (though there was discussion about “back-end” JS, a la Node, etc.). Everyone agreed it does not include Ruby, Python, or PHP. Grunt files were considered part of front-end, as were pre-processors. Accessibility was a resounding yes from everyone, though as you might expect, it was immediately followed by the same sheepish “but..”s that you and I and nearly every other front-end developer would give… The opinions started to get a little fuzzy when asked about SEO, performance tactics such as image optimization and other network metrics.

What job title should we be using now?

The title “Front-End Developer” comprises… what? A few different terms would tossed about, but the consensus was that this single term cannot effectively describe what a job would require, and that we don’t really have definitive titles for all the jobs we have to do. Basically, job ads can use any title they want, but the job description is where you will really find out what the job is all about. Personally, I like the boring old “Web Developer” term. I know it sounds flat, but I agree with the approach above, something like “You will be working on things that live on the web”… And then “You will be required to know… and we would like you to know…”

“Jack of all trades, master of none”

This brought up the question of whether it is okay to be a generalist, or should everyone be a specialist in something? And further, can being a generalist itself be a speciality? Maybe, as an architect or manager, someone who knows what questions need to be asked, what possibilities exist, then directs specialists to do special things. It was even suggested that perhaps this is the best place to start, so developers can try everything, sample all the skill sets, taste all the specialties, then maybe eventually find a specialty that they really love… I envision this as being similar to like kids that are exposed to soccer, football, baseball, piano, guitar, painting, biology, mathematics, etc., etc., etc. Ideally those children will find something that excites them and inspires them, pulling them into a field they will be impassioned about, and ideally prosper in!

Skills list on job ads

It was said that skills on a job listing are often just a “wish list”, not necessarily requirements. It is unlikely that any developer has all the skills listed, and it’s impossible to get to know all the new stuff that comes out seemingly every-other second… Ideally, we are all at least aware of what is out there, we know the names, maybe the core concepts, perhaps have a chance to dabble a bit, and then we are all flexible enough to learn one if it is required of us, or switch from something we do know (like AngularJS) to another similar skill that we do not already know (perhaps React).

What makes the switch from Junior to Senior Developer?

Most everyone agreed that he biggest determining factor is someone that is able to enhance those around them (like a teacher), who can be a “force multiplier”, making those around them better! And while this change from Junior to Senior cannot be achieved merely with time (“It’s been 5 years, now I’m Senior!”), there is a time relation, because you cannot cram 5 years of experience into 2 months… The experience you would gain from working 5 years in the industry, cannot be compressed. The lessons you would learn over 5 years cannot be passively-learned.

One of the final notes is that Front-End Dev means “there are no rules”… Our field is ever-expanding, ever-changing, and we all need to be ever-growing… But isn’t that why we chose it? I know it was for me. I remember standing at the fork in my road, when I had to decide between three jobs: front-end, back-end, or database. I thought quite a bit, and in the end obviously decided on front-end, and the reason was that I considered it “sexier”… I saw our industry as one where I would learn something new everyday, that I would be challenged everyday, and I would have the chance to grow everyday. And I have to say, I was pretty much right. :-)

Happy growing,

Today’s Readings

One of the most problem areas as JS developers move from absolute-beginner to just-a-nudge-above-absolute-beginner is dealing with this. It is confusing at first (and even sometimes well after “at first”), and the arrival of ES6 will only help to confuse things even further. Again, at first, maybe. But is here to help clarify the =>‘s this; pretty simple once you get(-ify) it… [snarf-snarf…]

Sticking with JS for a bit, tests us with 5 Typical JavaScript Interview Exercises. Good list, I know I’ve seen a few of those during interviews… :-)

Ever needed to code a measurement in HTML? You know, something simple, like: 10 kg. Turns out, if you’re trying to be semantic (which we always try to do, right?), it’s not as easy as you might like… But is here to help with Marking Up Measurements Correctly in HTML5.

Got images? Wanna lazy-load them?? Here are several options, from rolling your own vanilla JS, to grabbing someone else’s jQuery.

Speaking of images, Guide To Using WebP Images Today: A Case Study takes a good bit of time making the case for using WebP, then tests four possible solutions, and finally offers their suggestion, albeit with issues they deem acceptable; you will have to decide if it makes sense for you.

Kudos to Washington, DC for pushing protected bicycle lanes. Would love to have some form of separation on my daily commute; typical drivers simply are not looking for bicycles, and pull out in front of me all the time…

2,995 miles, from Redondo Beach, California to NYC, in a Tesla, using autopilot… #gottaloveit :-)

Awesome collection of accessibility wins!

Awesome collection of DevTools wins! :-)

chart.css: A Simple CSS Chart System

And with no JS, that is simple and elegant…

aims to improve UX by disabling the selection of “action items” to prevent that annoying highlight you get when you click too fast, or accidentally move a smidge when you click. He makes use of user-select, which is non-standard, but quite well-supported. I guess the only question would be, “What if some user, for some reason, does want to highlight and copy that element?” Guess, as a developer, it’s up to you to decide.

Two clever uses of the ubiquitous pull-down, opening the doors for lots of options.

CSS quantity query selectors might take a minute to wrap your head around, but once you do, you are going to love the flexibility they give your UI!

CSSgram: A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.

And finally, “In a 74 to 21 vote, the Senate has voted to pass the Cybersecurity Information Sharing Act, or CISA“… I guess this is how you eventually win in politics, just keep pushing the same old shit until people get sick of fighting you and stop paying attention… Well, onward.

Happy reading,