Today’s Readings

I have an upcoming project in which I hope to use ‘s Critical to separate my critical CSS from my not-so critical CSS. And was kind enough to create a nice little tutorial on the subject, (seemingly) just for me!

document.implementation.createHTMLDocument() is definitely new to me, but it turns out to be a great way to parse an HTML response without loading any images.

Do you use a Mac? I do. And Windows 10 is tantalizing, but also beyond my OSs’ reach. Until now. Mac’s Bootcamp now officially supports Windows 10.

From comes a nice truncation tip to avoid the disappointment of a “Read more” link revealing only 2-3 more words… I think you could also try counting spaces to find the actual number of words, but the idea is there.

An interactive explanation of the CSS animation matrix. Still not sure I get it…

But once you have that down, you can perfect your CSS animation!

And if perfection isn’t good enough for you, then make your animation flawless!! :-)

Need a mobile framework, but not sure which to choose? This mobile framework comparison chart could help! However, it’s more about comparing which environments they run in, and not so much about what features they provide. Seems that would be a useful bit, once you’ve narrowed down to a few options.

Some pretty sexy 3D progress bars… Look great in Chrome, good in FF, surprisingly not-too-bad in Safari, but have no IE to test with. Anyone?

Have to admit, I’ve never really had a problem with an italic font’s slant, but if you ever do, here is a very clever, yet very simple solution.

Sequence.js: The responsive CSS animation framework

There’s something unpleasant tasting about a JS CSS framework, but you cannot argue with the results, very nice!

But if you prefer to roll your own, then maybe this CSS Transitions Cheatsheet will be helpful!

again, this time with DevTools Tips For Sublime Text Users. Great stuff!

Interesting mobile browser stats from around the world… How well do you know your audience?

And once you get to know your audience a little better, maybe it is time to consider the Graceful Improvement approach

If you are not already familiar with Git, here is a nice 3-part intro course.

Ever try to upgrade Node on Windows? Pain, right?? Apparently not any more

Anyone else out there been avoiding ES6? Maybe now’s the time, with this intro article

And finally, after all that, I think you deserve a little full-screen space station view of the Aurora Borealis

Happy reading,
Atg

Today’s Readings

W3C, along with SAP, TCD and KUL, is partner in a European project called STREWS. The goal is to bring research and standardization in the area of Web security together. The project is funded by the European Commission (7th Framework Programme). It organizes workshops, writes reports, and, as its main goal, writes a “European Roadmap for Research on Web Security”.
Participate in a survey on Web security by the STREWS project

Lend a hand, and complete this survey, won’t you?

Article about the technology behind Facebook’s preview photos. Which basically involves using a thumbnail image and scaling it up to be blurry, then replacing it with the properly-sized image. No questioning the perceived performance gains, but I wonder how a progressive JPG would have fared…

Here are huge batch of fixes to help get rid of a host of the most annoying things about WordPress

And, if you are a WordPress plugin author, here is a fantastic method for updating WordPress plugins via GitHub releases using WordPress Transients! It’s a little complex, meaning there are a few moving pieces, but the process is actually really elegant, and a helluva lot better than having to deal with SVN! :-)

Okay, just one more WordPress thingy: The WordPress Template Hierarchy is an interesting diagram, but I’m not sure I fully get it’s function… Personally, I would really love to see the hook/filter version of that… :-)

An interesting idea for Generating Alternative Stylesheets for Browsers Without @media.

Automagically make your site’s HTML editable

A couple of new (to me) methods for debugging in Chrome’s DevTools.

As I say often, even of you think you know a subject really well, it can never hurt to at least skim through a beginner’s-level article on that subject. With that in mind, I pass along this .bind() For Dummies article; you never know what tidbit you might glean.

So, we already have scrolling to read more (duh), and we have scrolling that causes animation (a la parallax), now shares scrolling to draw shapes! :-)

How fonts affect your website’s performance is less about how fonts affect your website’s performance than it is about how to use systems fonts on small screens and use a media query to load custom fonts are larger screens… But it does also mention a cool site, Tinytype, which tells you which system fonts are include on the major device OSs. That’s handy.

I have been passively following (and drooling over) ITER and the concept of fusion reactors for a very long time, but there has been very little (substantial / marketable) progress. But now there is the possibility of having a working fusion reactor in the next five years?!?! That would be… so… huge…

Appears ‘s site has undergone a pretty slight redesign and much more serious rebranding! New site, new name, but still great articles, with cool topics, and helpful tips. This time around he shows us how to reveal images via a scribble effect, using SVG and blend modes.

And finally, a new documentary about the history of National Lampoon is coming our way… For anyone that was born in the last 50-60 years, or will be born any time in the future, and likes to laugh, you owe a lot to the nutball humor of National Lampoon. Cannot wait for this one…

Happy reading,
Atg

Today’s Readings

And from the “Wait, who did what?” and “Is that browser still in active development?” category, Safari has made some cool changes to their Web Inspector tabs.

Got Git? I’m sure you do… And here are several cool options for dealing with pull requests, including a link to some very useful aliases you can add to your local Git installation!

Some great tips for Debugging CSS Keyframe Animations.

While it is true that most performance-related issues are front-end-related, a lot of those front-end issues originate with design choices. So let’s all learn how to Design for Performance.

guides us through using srcset‘s w descriptor to suggest the proper image.

A couple weeks ago Netflix published an article explaining how they improved perceived performance by testing with a new “page ready” indicator, performance.timing.domInteractive. has a few concerns about their test results, but is also quick to mention that the test cases he uses could be creating issues that not everyone has…

walks us through how to set-up an opt-in push notification system, at least for Chrome, for now…

Flexible Grid System is a Responsive CSS Framework. This framework will let you create your web applications in a flexible way that you’ve never experienced before.

Not so sure about “never experienced before” but it is an interesting collection of options!

HTTP Security Report is kind of like WebPagetest, but for security issues. Ran this site through it; something tells me “26” is not a good score…

The JavaScript Looping Evolution is an interesting read on the history, and future, of JS loops.

I think one of the few things designers and developers can agree upon is that native HTML select element sucks when it comes to trying to make something look nice, across browsers; it is easily the most bastardized appearance of any HTML element. Which is why CSS Only Dropdowns With The Checkbox Hack is not a bad idea at all…

Not so sure about the practical effects of this, but show us how to create random fuzzy edges on SVG elements. It looks cool enough, for a background, and I can imagine a very slow, random animation on each circle looking pretty cool…

One of the irritating things about CSS-only animations is that you can’t do a callback when the CSS animation is done, you have to rely on JS… Well, here is a cool little JS library that helps you animate via CSS, and use as little JS as possible, and includes a begin and complete callback

I really like the CSS naming convention of BEM. I really do. And Harry Roberts think we should take it one step further with BEMIT. At some point my head starts to spin… So maybe CSS modules can actually help here a bit, eh?

Oh … From where do you come up with so many wonderful CSS animation ideas???? Here is yet another

And finally, NASA has a Tumblr account… Okay then.

Happy reading,
Atg

Today’s Readings

The accepted answer to this StackOverflow question about the difference between call and apply is easily the best I have ever read! But it’s so simple, is that really all there is to it?

The Hitchhiker’s Guide to Modern JavaScript Tooling is a fantastic round-up and run-down of the current JS tools out in the wild. Not a tutorial in any of them, more like a glossary for each…

The videos for Responsive Day Out 3: The Final Breakpoint are out! Begin consumption!

Bikers: Ever run out of water mid-ride? Of course you have. Well now, you can refill as you ride, from moisture in the air

Nice tutorial comparing CSS and SVG Text Effects from .

Using Bootstrap for your layout? walks through the benefits, and pitfalls, of using Grid and Flexbox instead.

Breakpoint Tester is an interesting RWD method: it scans your same-domain CSS files for breakpoints, then loads the current page in iframes of those sizes.

Some cool CSS background filters that you cannot use anywhere… Yet.

How well do you know HTML semantics?

A few pointers on How to Become a Great Front-End Engineer, from a great front-end engineer, .

Series of notes and starting points for checking your site’s performance.

And what better point to start thinking about performance, then when the site is being designed???

A Visual Introduction to Machine Learning is not only a fantastically well-thought out, and plainly explained, introduction to data analysis, but it’s also a simply gorgeous site to scroll through!

12 Ways to Secure Your WordPress Site goes way beyond 12, because it starts with a plethora of tips that everyone “should” know according to the author, but I guarantee many site owners are not doing. Worth at least a skim, regardless how up on WP security you think you are!

And finally, a day in the life of any web developer that has ever had any client ever… :-)

Happy reading,
Atg

Today’s Readings

walks us through creating animated pie charts using HTML & CSS, or using SVG. The choice is yours. :-)

What the Flexbox? is a 20 video tutorial on, well, flexbox, of course. Can’t wait to dive in!

I recently did a very macro-level write-up on Service Workers (and Web Workers and WebSockets) and have since been thinking about integration possibilities. Well, like all new tech, we should be sure it makes sense before pushing it on our users. And a big part of making sense is performance. So here is a nice Service Worker performance test already done for you!

Hmm, rotationAngle and touchRadius do seem useful, though for some pretty high-level interaction.

And apparently the Web Bluetooth API and Web NFC API are both slowly gaining some traction in browsers too!!

presents us with The pro’s guide to responsive web design. If you’re already working on RWD sites, then you will recognize these as the bare-necessities required to get your site running beautifully, everywhere. Nice collection!

A nice idea to be able to Position an element relatively to another element from anywhere in the DOM. I have often wanted a position: fixed element to be relative to a parent element

Windows 10 certainly made some noise with its recent release. But how do we Mac people go about trying it out? VM? (puke!) Here’s a nice option: use Mac OS‘s Boot Camp to Windows 10 in its own partition.

Quantity Queries is another new tool for creating CSS nth-child selectors. Yeah, that crap is hard to just hand-write…

offers an update on front-end ops.

shares a couple quick ways to make Better Diagrams with SVG and Blend Modes.

gives a somewhat tongue-in-cheek, though completely appropriate close-up look at CSS frameworks. BEM, OOCSS, SMACSS, and more, all equally poked. But it’s not their fault, its ours!

A quick history of, and brief discussion about, vendor prefixes.

CSS Motion Paths allow you to animate along SVG-like paths, versus simple in-place (fade-in/-out) or linear paths (top/left) with just CSS (no JS needed)! Chrome-/Opera-only so far, but an interesting concept!

And finally, as usual, collects all the right quotes, from all right sources, to aptly summarize the true state of the web today. Bottom line? We all own at least some part of the suckage of the web… offers a nice companion piece.

Happy reading,
Atg