Jumping right in, the ever-hot topic of responsive images!
- With the news of
pictureandsrcsetbreaking into the major browsers, this run-through ofpictureandsrcsetoptions starts off nice-and-easy, and finishes with a whole lot of how-am-I-supposed-to-remember-that??? (But luckily you don’t have to, because it’s all on the Internet…) - And if you’re ready to dive right into this new tech, there’s a Grunt task to help you create all those new image sizes you need and create the code to display them!
- Or, for us WordPress people, here’s a great walk-through on getting WordPress to create your images and output your fave responsive image code for you, too!
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, Dudley Storey 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 Scott Jehl 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 Dave Rupert‘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