The latest CSS Generator everyone is raving about. Seems good enough, but I’m still a solid fan of Ultimate CSS Gradient Generator.

Really nice justification for responsive and walk-through for building you own responsive grid system.

[Batteries that] are expected to last twice as long as lead-acid batteries and cost about the same to make. They won’t require air-conditioning and will use nontoxic materials.

Use Chrome? Of course you do. Want to do it better? Of course you do! 50 tips and tricks for Chrome power users.

Now this is something I have been waiting for: Paul Lewis walking us through his performance audit workflow! An in-depth look at how to find performance issues, using Chrome’s DevTools.

Sitespeed.io is an open source tool that helps you analyze your website speed and performance based on performance best practices and metrics.

I’m not sure what the advantage of having a command-line-installable tool like this is over, say using something already publicly available like WebpageTest, but I’m probably missing something.

I know web components are supposed to be one of the “next big things,” and I’m excited by their progress (I’m actually working on a project right now where we’re templating in the browser, so this could be useful), but I just can’t bring myself to get too excited until they’re going to be better supported… Nevertheless:

• A Detailed Introduction To Custom Elements
• Custom Elements for Custom Applications – Web Components with Mozilla’s Brick and X-Tag

I get how they’re scaling and centering these images with only CSS, just not sure why the big fuss over doing it using translate. Been doing this for some time using margin. Is there a big performance benefit to this new method, or just the cool factor?

I am a sucker for a good map, even better if its an old-timey map, and if you can throw some cool tech in too, well… The Evolution of the World Map is a pretty fine mixture for all these components… And love that there is someone forever known to history as “Henry the Navigator”… :-)

Who’s making great strides in alternative energy right now? Two of the countries that could most use it: Chine and India. Nice going, guys!

I can’t think of another CSS feature that has had more trouble than flexbox getting to a usable state, and I’m not sure we’re 100% there even yet, but I like seeing these simple, yet very useful demonstrations!

Truth be told, I still don’t understand the Aurora Borealis, but at fullscreen, in HD, it really doesn’t matter…

Once you get past the “wow factor” that you could possibly improve page load speeds by up to 70%, you get into the “creepy factor” with the line that “[t]he FastView engine observes and records every single user path made by every single user who visits a website”, then you slowly come back around to “well, it’s my users that are being tracked, not me…” :-)

While not very mind-blowing, this simple animation of a fish caught my eye and had me watching several iterations of the animation… Maybe my coffee hasn’t fully kicked in yet… :-) But I am happy that I now know how a fish is built:

<div class="fish">
  <div class="fish-body">
    <div class="eye">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="fin"></div>
  <div class="fin fin-bottom"></div>
</div>

<rant>
Which brings me to something that has annoyed me since I first learned to code HTML and tried to display a tag in the rendered page: why do I always have to convert my < to & l t ;? I mean, I get it in the normal flow of a page, but the place where it really ruffles my under-garments is when inside of the pre tag… The very definition of the pre tag says:

“The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.”

So why do I have to keep converting all those damned opening and closing brackets?
</rant>

K, thanks… Onward!

There are plenty of tools that scour a page and tell you about unused CSS selectors in your CSS. But the problem is that a single page rarely contains every element covered by a single CSS file. So now we have ucss, which offers a config that enables complete site crawling (or limited scope, your choice), compare pages as both logged-in and not logged-in, and even reports on response times, redirects, and dead links. Nice! Now can it get me another cup of coffee?

And then I tripped across uncss. Anyone tried both? Any thoughts/preferences/recommendations?

I remember when I first saw www.booking.com flip from ltr to rtl (try changing the language to something like Arabic). Not only does the language change, but the entire layout flips as well (as it should, but I was thankful I haven’t asked to do that to any site I have to maintain!). Well, from the same author as the above ucss comes flipcss to help me, in case I ever need to do just that…

Genetically engineered white blood cells could be the future of HIV treatment

Go on… please!

As much as I yammer-on about SVGs, all you typically see are static objects that scale perfectly in all window sizes. But the real beauty comes form the fact that the shapes that comprise an SVG file are actually DOM elements, which means you can create a single set of elements and apply @media queries and just have a ball making something dance! While the author references that fact that you can then also apply JS, he doesn’t do it himself; shame, would’ve like to see that!

WOW! From the Yeoman! project comes a slew of performance tasks to help you gulp and grunt your way to beautifully performant websites!

Speaking of SVGs, and Grunt, and performance… A nice write-up about comparing the performance of sprites versus data URIs versus icon fonts versus SVGs, resulting in a winning combination, and then grunting that to be as performant as possible.

Did you know you can use getComputedStyle on :pseudo elements? You can.

Got JSON? Then you’re fine. Need JSON? More problematic. How often, when developing something, do you need the JSON results before they exist? Now you can fake it, til they make it.

I’ve seen a few articles/posts/ flying around lately asking developers to ask themselves if they really need jQuery? I assume these titles are meant to drive conversation (and thus users) to their sites, as I think most of us are intelligent enough to know when/if we need jQuery for a project or not. Well, in case you are having trouble with that decision, here is a “small” list of things jQuery does, so you don’t have to… Hmm, maybe I need it more often than I think…

And finally, remember the last time your were on a phone call and suddenly needed to whittle some wood? Me neither, but in case you ever do, there is now an iPhone case that turns your iPhone into a 22-tool Swiss Army Knife! Finally!!

Happy reading,
Atg

Top⇪