Today’s Readings

I’m a hard-core Chrome DevTools fan, and as great as it is, there are extensions and apps that can make us even better at what we do. Here are 12 of them. The only one I don’t really get is the Window Resizer: you shouldn’t be developing for specific window sizes, you should be setting breakpoints and transitions based on how your content’s look and usability; and to that end, just grabbing and dragging the width of your browser works pretty darned well… :-)

And to my point, here is a great extension that, rather than forcing your page into pre-determined breakpoints, displays your page at the breakpoints you chose: Emmet Re:View. I love the “Sync Scrolling” option! Though, my site actually has breakpoints for super-sized screens (on the home page, the five posts will display side-by-side), and that is not displaying here for some reason…

Okay, just one more for Chrome: “Object.observe() is now in Chrome stable!” Yowzah!

Jenkins is a continuous integration and deployment service. We use at work. It’s really powerful, saves us a ton of time, protects us from a ton of possible human error, and I am woefully lacking in knowledge about it. But Tuts+ is gong to help me set-up my very own installation!

8 ways to improve perceived performance. Not all are new, but it’s worth remembering what we can do to help our users.

A clever approach to making credit card forms suck less. The comments talk about several issues, but seems like a big step in a nice, new direction.

And a series of best practices and recommendations for forms in general, especially when dealing with mobile.

Pretty slick approach to replace if/else and switch statements with Object literals! Really nice.

Full width responsive menu, converts from collapsed on small screens, to two-column tiles, then four-column tiles, then a full-screen single-row. Looks great!

I love TheCodePlayer “walkthrough”s, they’re such a great way to demo and learn code! And this example of the ripple-click effect.

Getting to know Streams in Node.js with . This is exactly the kind of thing I frequently tell myself I really want to learn. And then never do…

The problem I see with using libraries is that we don’t often know what is really happening behind the scenes, and jQuery is no exception. Some time ago told us about first 10, then 11 more, things he learned from the inner-workings of jQuery, and here are 18 more.

As yet another knife in the hearts of those that think their old-school website is good enough for the modern web, Google will now warn users when they deem a site “might not work” on a user’s device… Aaahhhhh, day-am!

How’s your WordPress security? Good?? You sure???

This picture shizzle just got serious as both Chrome and Firefox announced their “Intent to Ship« picture!

So get up-to-snuff with picture now!

And finally, Benedict Cumberbatch stars as Alan Turing in first trailer for ‘The Imitation Game’… I’m getting in line now!

Happy reading,
Atg

Today’s Readings

To anyone still shying away from flexbox, or confused by the various unintuitive names and values, has a fantastic intro primer for a basic flexbox layout.

And if you’re worried about browsers that don’t support flexbox (and you should), you can obviously choose when to switch to flexbox using something like Modernizr, or simply use a JS fallback, like did!

Walk-through of the simple and subtle click-ripple effect from the Google Design site.

And once you have a basic grasp on SVG animation, you can apply that to clipPath to make some cool UI effects.

Or to make a sweet little animated burger icon!

Or add some rad image filters via SVG (please do not create text filters like these…).

Of course, you can also do cool image transitions using CSS blend modes

Some time ago people started talking about, and then Google’s PageSpeed started recommending that, dividing your CSS into above- and below-the-fold, and adding you above-the-fold CSS right in the page. I get the idea, and it’s a great idea, but I’ve never bitten the bullet to try it. Thank goodness someone else did, and wrote about it! I love the web!! :-)

Or you could just use auto-magically extract and inline your above-the-fold CSS with Critical and Gulp. I was curious how they would handle varying screen sizes, then was a little dismayed that you have to manually specify width and height in the init, but I’m really not sure how else you would do it… I guess for a single-site-for-all-devices site you might want to go with the max screen sizes… Still better than naught, I would say!

And for CSS help from another angle, StyleStats will parse your CSS, analyze against a URL, and give you a run-down of what is used how often, and more. I do wish the URL box would accept simply “aarontgrogg.com” and add the “http://” if I didn’t (or at least not clear the box after the error!), and some kind of tooltip explaining what each section title means (like “Unqualified Attribute Selectors”) would be nice enhancements. (Would also be nice if the input and “Parse” button worked by just hitting Enter…)

A couple neat hacks for first ideally avoiding specificity issues, and then inevitably dealing with them.

More CSS tricks! (Some silly ones, of course, but also some really cool ones, including how to do XSS using nothing but CSS… Wha???)

And even more CSS tricks, these specifically for mobile!

Cross-browser, CSS-only, native-looking select elements! A lot of work went into this, so really impressive!

Must-watch videos about javascript. Indeed! Going all the way back to 2009!

Tappy is a minimal, normalized “tap” event that works with touch, mouse, keyboard, and more.

Works with (actually, requires) jQuery, eliminates the 300ms delay, and will even fire for mouse, enter key or space bar interactions.

16 really useful responsive design tutorials. From the classic Smashing Magazine article Responsive Web Design: What It Is and How To Use It, to grids, typography, images, video, and JavaScript.

Nice, quick run-through on the similarities, differences and semantics of the a, input and button tags.

And finally, I’ve been through some tricky launches before, but nothing like the one that happened Top ^

My article got published by SitePoint: Moving Beyond the Responsive Web to the Adaptive Web

It’s a real honor to have an article that I wrote get published on SitePoint.com:
Moving Beyond the Responsive Web to the Adaptive Web

Obviously the web is a subject that I’m passionate about, and having the chance to write about it, and practice it everyday, is (mostly) a real joy…

Thanks to the at SitePoint and at Netbiscuits for helping get this done!

Happy developing,
Atg

Today’s Readings

A nice run-through on Structuring, Grouping, and Referencing in SVG.

Then dive a little deeper into SVG with SVG Design Patterns!

Chrome has add a few new cool features to its Offline mode.

Bike riders: Ever get a flat tire? (It’s like asking “Humans: Ever breathe air?”) A new gizmo called Patchnride acknowledges that “flat tires suck,” but aims to make them “suck less,” by helping you patch the tire, without removing it, in less than 60-seconds. Though, you do have to find the hole and be able to insert their device into that hole, then you do still have to manually inflate the tire again, but it definitely does look cooler than the old, standard patch method…

A new Google Maps-based game, called SmartyPins, let’s you learn while you travel around!

table-layout: fixed;. Awesome!

Finally, an actual use for Yo: Find out if your server is down!

Everything you need to know about CSS for images.

Indeed phones and tablets are less than ideal for doing dev work, but these iOS apps might make some tasks more doable.

Another great presentation by titled Pixels are expensive, but the first major header is a bit more apt as a title, I think: What Developer Need to Know About Webpage Rendering. Either way: watch, learn and put into practice!

Some fancy-ass, CSS-only, 3D animated text.

What do you get when you combine donkeys, Turkish sheepherders, and solar panels? Apparently the Internet.

Larry Page and Sergey Brin on stage together for an intimate interview. I remember the Excite search engine… I used it for about 3 days… Then I found out about Google… :-/

Free download of Mobile Design Patterns book.

Crazy table of all HTML elements that have ever been, what versions included them, and links to their W3C spec.

And here are several options for customizing that ugly select element.

And if you’re bored with all the existing HTML elements, why not start making your own!

Deb.js is impressive even before you see that it is only 1.5kb, or that you can add it to any page by using their Chrome Extension! Been looking for something like this for some time!

And now for a responsive web blow-out sale!

Maybe you want a new responsive theme to get started with on some new project? How about Bootstrap 386? It’s a classic look…

And finally, Mr. Potato Head R2-D2 Action Figure… `nuff said??

Happy reading,
Atg

Today’s Readings

Not only has Chrome 38 Canary introduced a responsive design view that allows you to view various device-specific-breakpoint window sizes, but it “also introduces network throttling to produce near real device simulations for development.” Huge!

Fast.js is faster versions of native JS functions. Note the caveat that this is focused on V8, so you’d want to test it yourself, but worth looking into.

Got jQuery? Chances are you do. But do you use all of that jQuery you push on your users? Chances are you don’t. Then why not slim it down by removing the parts you don’t need?

And while I was looking into customizing jQuery, I ran into this custom jQuery builder. Haven’t used it myself yet, but a nice idea!

width: min-content; and width: max-content;. Both news to me!

favicons… Every client wants one, we know we need them, but a real pain, right? Especially since all this mobile crap came about! Well, Favicon Generator is here to help. They even offer a slick Favicon Checker to see how your existing favicon stack holds-up. Mine could use a little help

The entire Human JavaScript book online, free. But, of course, you should buy it

I saw this form-filling bookmarklet some time ago, but didn’t really dig it. Now that I’ve been filling forms for the past few weeks on my current project, it seems a lot cooler…

No matter how much you (think you) know about page rendering, I think articles like What Every Frontend Developer Should Know About Webpage Rendering are always worth at least a skim. I nearly always find something interesting or new.

Being fairly new to command line, things like Vim regularly befuddle me. Well no more, I say!

How mobile-friendly are your sites? We all know the numbers, the market is growing, blah-blah-blah, so why are so many sites still designed so terribly for mobile devices? This presentation from Google I/O 2014 would like to help

I’ve always hated the concept of native apps on mobile devices; the web is the web, and it shouldn’t be fragmented like that. But I also recognize the incredible benefits of installed apps, especially when I’m trying to read something like RSS feeds with a poor connection. So installing web apps has always intrigued me…

And speaking of web apps that can work offline, provides a thorough, if not too fast, demo on how to create a basic offline-first web app using serviceWorkers. Crazy powerful stuff!!

And another powerful JS feature that is rarely used is MutationObserver, which is the replacement for the dreaded MutationEvent. Check-out this demo.

But back to basics for just a moment:

Simplest possible examples of HTML, CSS and JavaScript

Advanced Uses for Chrome DevTools

I’m regularly blown-away at how powerful our browser dev tools have become in such a short time…

And finally, most of you chitlins are too young to remember the Trapper Keeper, but for some of us it was a staple, and status symbol, in the Junior High halls… Now you kids can relish in the same classism and judgement!

Happy reading,
Atg