Today’s Readings

Simple Flexbox implementation. At this point, no reason to say any more, you’re either interested or not… ;-)

And once you’ve got Flexbox mastered, you can add cool UI features like these animated reveal effects! (Hint: click the tiles to see the effect.)

Cut and Copy via JS… The final death-punch to Flash! Sadly, this is not ready for prime-time yet, but it is coming…

And first came Flash, then came Java`tis time…

A team at Columbia University’s School of Engineering and Applied Science has developed a camera that is self-powering:

When a camera sensor is exposed to light, the pixels use photodiodes to generate an electric current. That helps the sensor measure the intensity of the light, and those measurements are used to produce images. Solar cells, on the other hand, take the light and convert it into electric power.

The team at Columbia has created an image sensor with diodes that can alternate between these two functions… :-)

Ghostlab, now shipping with a customized version of Chrome’s DevTools… So, yeah: debugging your site, synched across multiple devices, inside of DevTools. Does it get any better??

Watching a TV show, a character said “thick as thieves”… I’ve never been one for breaking the law (aside from, like, jaywalking), but I really like that phrase… No link, just a cool phrase… :-)

Über-cool parallax background effects using nothing but CSS.

The path to performance: A podcast for everyone dedicated to making websites faster. Subscribed!

Web fonts: you either use the same old standard stuff, or you expose your users to a who-knows-what initial page load experience. Well, has drafted a proper font-rendering proposal to solve these issues. Please feel free to read and share your thoughts with Tab.

Awesome-looking new freeUdacity course by and : Browser Rendering Optimization. Enrolled!

Thanks to a comment I posted on a recent Ilya Grigorik post about my frustration with Google+’s sandbox mentality, I learned that you can get permalinks for Google+ posts, by clicking… the dateunder the poster’s name… beside the Share status… if (!intuitive) { this.click(); } But thanks to Andreas Koll for bothering to point this out to me!)

Think your commute sucks? If it’s less than 14,000 miles, quit your whining

Think your commute top speed is pretty high, just because you drive on the Autobahn?? If it’s less than 590 KPH, quit your bragging

As I am just starting a new RWD project at work, this article really piqued my curiosity: 5 ways to bridge the designer-developer gap on responsive web projects. Nice to know I am on the right track!

But, having planned on basing my font-sizes on vw (the width of the viewport), I now think I should revisit that approach

And now it seems that rem might be crap too?? What is going on here???

And finally, linked to the article Progressive enhancement with handlers and enhancers. I thought the title sounded interesting, so I gave it a read. But I am surprised. I cannot agree with these methods at all… To me, adding elements or attributes to my HTML, that are only there for JS, and are meaningless without it, is a bad practice; whatever happened to separation of markup and behavior? But I already do things like adding a class like “overlay” just so I can do something like $('.overlay').on('click', openOverlay);, which is pretty similar, but this just seems much more invasive… Any other thoughts?

And finally,

Happy reading,
Atg

2 Responses to Today’s Readings

  1. Hidde says:

    Hello Aaron, Thanks for sharing your thoughts about the progressive enhancement article I wrote.

    HTML is full of things that are only become useful when another layer is placed on top of it: a section element only gets its meaning when an algorithm recognises it and does stuff with, and are probably harmless if not. Classnames only become useful when a stylesheet applies stuff to them, and are harmless otherwise. The handler functions in my article work the same: they only get meaning when JS runs and does stuff with the function names. And, I would say, they are harmless otherwise (and not invasive :-))

    The difference between your overlay method and mine, is that you, in JS, query for elements (‘.overlay’), then run the overlay function on them, whereas I let the HTML element “tell” the JS a function needs to run on it. So the knowledge of what functions run on what is stored in mark-up instead of script (just like knowledge of what appearance should apply to what is stored in classes in the mark-up instead of the stylesheet). Also, my method uses one click handler instead of many.

    In my method, separation and mark-up are separated in the sense that JS is applied as a layer on top of the mark-up, which would work just fine without it. I agree with you that this is an important principle.

    • aarontgrogg says:

      @Hidde: Points well made, thanks for clarifying. I agree that there really isn’t much difference between using a class versus a data attribute hook to hang your JS on, but I guess with the class, you can also add CSS (but of course you can hang CSS on [data…]), and you could even argue that if you are not using the class for CSS, then it actually does not belong there…

      Yeah… :-)

      Cheers,
      Atg

Leave a Reply

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