Today’s Readings

I started the last post with an article about making WordPress easier by using modern web dev tools. This time I would like to share an awesome WordPress / Gulp starter kit repo that my friend shared with me:

This is not meant to be a starter theme or framework (although I have included a minimum viable theme to demonstrate some of the possibilities). It is, instead, a kind of project scaffolding and example workflow for modern and efficient WordPress theme development.

Speaking of WordPress, Tuts+ shows us how to build a plugin that adds an expiry date to posts!

Well it looks like the Edge browser will indeed be a worthy browser, what with the picture element and srcset sizes attribute now in the browser, and their published intent to include CSS image-set().

(Of course, we still sit waiting patiently for Safari to implement picture, anywhere…)

And while is happy to tell us that Client Hints are now enabled by default in Chrome 46, it seems we might still have to wait awhile for them to creep into Edge… But a quick look at the picture element code samples in Ilya’s article shows the power of Client Hints and why they will be huge when they are finally broadly supported! Sadly, we are still a long, long way off

Now that the HTML5 audio and video elements are nearly ubiquitous on the web, the last real functionality that gives Flash any breath of life is “copy to clipboard”. And while there is the new HTML5 Clipboard API and events making its way into browsers, progress is not only slow, but incredibly spotty… (When I tested this feature a few weeks ago in just the major desktop browsers, the API failed in all of them, in completely different ways… ) So I was quite excited to see, and test, clipboard.js, which promises “A modern approach to copy text to clipboard… No Flash. No dependencies. Just 2kb.” A few quick tests revealed the following:

  • Everything worked great on Desktop Chrome (Mac and PC), Desktop Opera (PC), and Desktop Firefox (Mac)!
  • Desktop Opera (Mac), Desktop Firefox (PC), and Desktop Safari (Mac and PC) present the fallback “Press Ctrl+[?]…” message, but do select the content properly, so the Copy and Cut functionality works just fine. (And yes, the message even says “Ctrl” on Mac… :-)
  • IE asks permission for the page to access your clipboard, but then works just fine.
  • iOS Safari and Chrome gave me “No support” messages, but then did at least place my cursor inside the content I was trying to copy/cut, so I could still touch/hold to get to the copy/cut options.
  • I did not test on any versions of any Android devices, just because none were handy…

All-in-all, not a very consistent cross-browser user experience, but that shouldn’t matter; what should matter is that, while it wasn’t a great improvement everywhere, it did work perfectly in some places, and still made it easier to copy/cut content on all other devices, without Flash, and with only 2kb added to your JS. This is pretty much the definition of beautiful progressive enhancement… Nice job!

A lot of hubbub was made when AMP HTML was announced, and rightly so: clearly a lot thought and consideration was put into trying to make Accelerated Mobile Pages. And while I find it interesting, the concept of web components has always seems to me to be a bit like reinventing HTML… I much prefer the idea of developers learning how to code properly, and then doing that…

Then there is the Be Nice AMP Project, which is pretty similar, only without having to be “dependent on Google”…

A good bit on using frequent flushes to improve (at least perceived) render times, but it gets a bit crazy toward the end (for me); not sure if all that shuffling of DOM elements really makes much sense, but then, it must some times, or people wouldn’t be doing it, right??

Wow, preprocessor reference imports are freaking incredible! You get to reference, and make use of, only the bits you need from a code base, but don’t have to include the entire code base! How have I not heard of this before??

And finally, it turns out all New Yorker comics can be re-captioned with the exact same caption… :-)

Happy reading,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.