Today’s Readings

Jumping right in, the ever-hot topic of responsive images!

Keeping on with RWD, I’ve wanted so badly to start using CSS columns, but just haven’t found a place for them… You really need a defined section where columns can properly flow, ideally without causing users to scroll down, then up, then down, then up, when reading them… But if you have a place for them, here’s a great, easy to follow article on how to use them!

And once you get all your RWD sites set-up, let’s make sure they load fast! The Filament Group walks us through how they make RWD sites load super fast!

In case that wasn’t enough, here are a few checklist-style performance rules.

Interesting CSS-only image comparison slider. First time I’ve seen one work sans-JS. Also the first time I’ve heard of resize: horizontal;. Gotta look into that a bit more…

CSS Triggers. What a fantastic resource to help us understand the effects of changing CSS post-page-load. Paint and layout updates can be a bitch for browsers, so it helps to know which are the most expensive!

(Why do I feel like this issue is going to be nothing but CSS???)

The trend of exposing one’s CSS continues with Github and CodePen. Always nice to see how others do things!

HTML forms and tables. Hey! Wake-up!! Well, has some form and table CSS that will wake you up! Including things “we all knew already” like font-feature-settings: 'pnum'; and font-feature-settings: 'tnum';… Right?

Or try this full-page form. Nice transitions.

And speaking of transitions, how about some nice bouncy CSS transitions?

And now that we’ve had (probably more than) our fill of CSS for the day, let’s make sure we’re keeping it all organized so we can properly maintain it all!

And now for something completely different… This is a seriously sleek-looking electronic bike, and the built-in lock is brilliant! The only potential issue I see is that the headlight would be blocked by anything stacked on the front carrying platform, but love the look, and the “mud flaps”!

IE‘s got wood, and it’s looking for sheep

Working almost exclusively with mobile devices for the past few years, and having a device lab of literally hundreds of devices at work, I’ve talked with co-workers for some time about creating a list of known device bugs and work-arounds. Thankfully is a little more proactive than I am

Building on the API lists from the last issue, SitePoint provides 5 more JS APIs to help empower your mobile projects.

I linked to ‘s first post about re-tooling his site to improve performance, and now he’s back with a second post. Second helping, as delicious as the first!

And finally, anyone else feel like this at work??? :-)

Happy reading,
Atg

Today’s Readings

From Tuts+ come two articles regarding WordPress development:

Both appear to be the beginning of a series by the author, so expect to see the next posts here soon! :-) And as usual with such pages, there is great information for beginners, but there is also always something for the expert as well·

Asynchronously load CSS and JS with, well, loadCSS and loadJS, from the Filament Group.

I’ve said it before, and will likely say it again: I love . His writing is easy to read, and it’s nearly always spot-on with something I want to read about. So, his Compendium of SVG Information is right up my alley. I mean, it’s a freaking compendium, people! :-)

Ten CSS One-Liners to Replace Native Apps, from . (Spoiler alert: None of these are, or will be any time in the near future, ready for use. But the future’s always fun to think about…)

From SitePoint come three articles that deal with measuring performance of your code, page, and assets, via JavaScript:

http://blog.catchpoint.com/2014/07/25/navigation-timing-safari/

But is three APIs really enough? How about three more?? Meet Web Alarms, Presentation, and Standby.

And as long as we’re talking about performance, let’s hear from the master, , in his presentation from Velocity 2014: Advanced performance tooling in Chrome DevTools.

Try a bike map app that shows the best routes for the whole world

And once you have the best route, you need the best commuting bike to ride it!

Use command line? Forget commands?? Just ask Betty.

Intimidated by SVG code? I am, a little bit: first of all, I’m no designer, so creating something in the first place is a bit beyond me, and second of all, that code is just nightmarish-looking… is here with an online SVG Editor to try to make SVGs easier to edit.

And if the SVG you’re editing is an SVG sprite, and you’re concerned about it not working in all browsers, first of all, you’d be smart to be concerned, but second of all, there’s a polyfill for that! :-)

Some fun with JavaScript and dates

Erm, Sense.js has some pretty damned cool mobile sensor features…

Two very cool CSS-only form validation techniques!

OMG, how I have wanted DOM Flags when I’m working in Weinre for remote debugging, but I’m afraid, as is, it doesn’t solve the biggest problem it could overcome (unless you have access to the source code): persistence after reload (when the Elements panel refreshes and collapses, and you have to expand your way back to the element you were inspecting). Wonder if localStorage could help with that…

Fantastic RWD performance audit, walk-through, critique, and solution planning, from , on his own site. I love, love, love when authors not only show the problems they find, but also options on how they can solve those problems. It’s like watching someone else’s mind work… :-)

And as long as we’re talking about RWD and performance, this is a nice kick-in-our-collective-pants to change our mindset from “Mobile First” to “Performance First”. Like.

Anybody using Emmet? Well, if you are, here is a nice little shortcut reminder list.

And finally, love this screengrab on web security… Man, if you un-ordered enough books, you’d be rich! :-)

Happy reading,
Atg

So what’s the different between Responsive Web Design, Adaptive Web Design and RESS?

The web is constantly awash with buzz terms and acronyms, and keeping pace with them can be challenging. Three fairly similar-sounding terms now exist for three fairly similar approaches: Responsive Web Design (RWD), Adaptive Web Design (AWD), and Responsive Web Design + Server Side Components (RESS). Part of the confusion is that there is actually some overlap in all three of these. I am going to try to clear a little confusion here, and hopefully not add more…

But first, lets talk about me…

Having just written an article about AWD, I was surprised by some of the responses, with regards to AWD being old-hat, and terrible because it meant maintaining multiple layouts at once, and many other issues that just didn’t jive with my understanding of AWD. So I thought I should clarify my perspective…

My understanding of AWD matches this Wiki page, which quotes , who I believe to be the one that coined the phrase. In that Wiki page, AWD is described as making decisions on the server as to which components, CSS, JS, etc., that the user should get, based on the device they are using to view the page at this moment. This approach reduces the delivered assets to only those that are needed for this user on this device.

Some other interpretations of AWD that I have found around the web involve maintaining different layout templates for different devices, which would be horrible, as I know, because I have done that before. It’s painstaking, frustrating, and extremely expensive, because you are basically maintaining multiple websites, all at once. This approach, to me, sounds like the exact antithesis of “Adaptive”. I’m not sure what it should be called, maybe “Redundant” or “Reiterative”.

Okay, now that that‘s cleared up…

So what is the difference between these three?

I’m glad you asked.

Responsive Web Design

RWD was coined by in one of the seminal articles of web development. In it, he builds upon what is perhaps the seminal article of web development, A Dao of Web Design, by , by stating loosely that websites could work across all devices if they follow a pattern of a fluid grid, responsive images & videos, and the use of CSS media queries to make adjustments to the layout, depending on screen size.

RWD is basically one set of templates that is designed and coded to work on all devices, flowing from screen-size to screen-size, perhaps changing the appearance of things on the page, but always working with the same set of HTML, CSS and JS on all devices. This doesn’t mean you can’t fetch different content or display things differently from device-to-device, but you deliver the same set of templates to all devices.

Adaptive Web Design

As mentioned above, AWD was coined by in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.

As also mentioned above, Aaron basically describes a server-side process that decides what components and assets to send to the device, based on what the device is. This means that desktop browsers might not get a “Call Us” component, and that mobile phone browsers might not get some crazy, large-screen, interactive map, but instead get a link to a store’s address, so their device’s navigation system can find that location itself.

Responsive Web Design + Server Side Components

Finally, RESS was coined by in his article RESS: Responsive Design + Server Side Components. In it, Luke describes essentially the same thing that Aaron Gustafson describes with AWD: letting the server make choices, do the heavy-lifting, and customize the user experience based on their current device.

This is where AWD and RESS differ drastically from RWD: RWD users get all components and assets, regardless of their device, and then there is usually something on the front-end to make choices and perhaps alter the experience based on the device; AWD and RESS users get only what they need for their device. It’s really all about reducing deliverables, thus saving bandwidth, thus improving download speeds and time to render, thus making for a better user experience.

So, RWD sucks and I should use AWD or RESS, right?

Well here’s where I throw it all back in your face: you should use whichever approach works best for your project. :-)

As with most things web-development-related, there is no right or wrong answer, only lots and lots of shades of gray. If your project can work nicely via RWD (as this site does), then there’s really no need to build a bunch of elaborate server-side stuff. But if your project needs fancy components and modules on the desktop that won’t work very well on feature phones, maybe you should try to find an alternative. Even more, maybe you can mostly get away with RWD, but that “one component” is a real hassle; if it’s small enough maybe you can put it in the page and hide it for devices that shouldn’t get it, or maybe you leave it out and fetch it via Ajax for devices that can handle it. You’re the developer, you make the decision.

Happy devving,
Atg

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 ^