Great DevTools performance debugging article by Jake Archibald.
And another tool for performance debugging is the continuous painting mode, nice quick intro.
Vertically-centering something inside it’s parent. Most annoying requirement in all of CSS? Well here is a somewhat-brief article, and very-lengthy discussion in the comments, of many, many, many alternatives, including a new solution from Chris Coyier (of course).
And while you’re at the above article, be sure to swipe your mouse across the flag in the upper-left corner. I saw and figured, since this is some big HTML5/CSS site, must be something like <canvas>
or <svg>
, right? Nope, just a plain old PNG sprite with background-position
animation. Nice. Classic. :-)
Ever have to write CSS animations? And have to support all the vendors of the world? And have to support old-as-shit browsers? Sucks to be you. Well, Rekapi is here to help, with their CSS Prerender. Adds any prefix that is needed, and falls-back to JS if that is needed. From the article title and use of the word “prerender”, I assumed this would have a performance boost, but I didn’t get that from the article anywhere… Just me?
Speaking of performance (and it seems like I always am!), here are seven videos from the Edge Conference covering everything from offline, to networking, to performance.
“Rich tools for instrumenting, analyzing, and visualizing web apps.” Sounds good! “Make your app jank-free at 60fps!” Sounds great!! Web Tracing Framework. From Google.
My new workflow. Or at least it will be, as soon as I get it all set-up, just wish Chrome had decided to support LESS first… :-)
And integrate this little beauty to have back-and-forth CSS updates!
Here’s another write-up on that LiveStyle bit…
And here’s one that builds on top of some of the performance concepts mentioned in that article, specifically the re-use of JS objects to make better use of memory allocation & reduce garbage collection.
Don’t fall prey to these 8 Mobile Performance Assumptions.
Performance is a journey, not a destination
I rather like that idea, that we should always be thinking about, and looking for, ways to improve the speed of our sites. If a new performance option hits the horizon, do you immediately wonder if it could speed your site? Do you at least try it? Good article on testing, comparing Real User Measurements with the Navigation Timing API.
Web Performance Crash Course, including network bottlenecks, the document parsing and evaluation pipeline, visual layout, javascript, and more, with Ilya Grigorik.
Anyone that has ever had to migrate a WordPress installation from one server to another, especially from one domain to another, will appreciate this article on developing a migration plan. And anyone that has never had to migrate a site, read the article so you know that you will need a plan when you do need to migrate a site…
And speaking on WordPress, Yotta recently published performance comparison tests on 8 major CMSs, and WordPress appeared to suck rotten eggs when it came to speed. Now they publish that apparently WordPress is so slow because lazy developers are pushing too much JS and not optimizing their sites. Hmm, could be, thoughts?
Use overflow: hidden
to create a new block formatting context. Pretty slick non-hack!
Famous sayings, after an auto-upgrade. Cute.
Buses that recharge while they drive. Cool. Now, we’re going to need to re-lay the pavement for every street in the city…
A pretty cool, easy-to-follow intro to building a custom scroller, using CSS3 and JS.
I’m not entirely sure why, but this new app coming from VW actually seems kind of cool to me…
From some of the brightest minds in our industry, come several presentations on responsive web performance.
Has anything thrown a larger wrench into our responsive lives than dealing with images? Here is one solid CSS-only technique.
And demosthenes is a new site to me, but I found a few other articles that intrigues me:
- Animated CSS3 Navigation With Overlapping Elements
- Make A Responsive CSS3 Image Slider
- Art-Directed Adaptive Images With SVG and JavaScript
RSS feed, added.
Haven’t had the need for jQuery in most of my recent projects, but if you’re a jQuery plug-in developer (or, I imagine, simply a JS developer), you could likely find some golden nuggets of goodiness in jQuery Boilerplate.
7 JavaScript Basics Many Developers Aren’t Using (Properly). Always like these lists. Even if you know them all, there’s likely at least one or two that make you say “oh yeah, that!”.
Conditioner.js is a pretty cool idea, straight from the old-school, early days of progressive enhancement: put something basic in the page, then “if something”, make it BLAM.
For as many times as I’ve mis-quoted this Thomas Edison quotation:
I have not failed, not once. I’ve discovered ten thousand ways that don’t work.
it’s nice to know what the real quote actually is… :-/
From the man that brought us iScroll and more, comes CardView. Slick presentation and animation, nice work, Matteo!
A nice, quick, easy-to-understand 3D Cube demo.
Series of navigation hover effects. Most are silly, a couple are cool, but as always with a demo like this, it is meant to show possibilities and inspire us to come up with good uses.
And finally, ever wonder what 60-seconds of the Internet would look like?
Happy reading,
Atg
I was excited first time I saw html5hub logo and as I was inspecting the source I was praying so it be done using CSS shaders or something magical … that fat png disappointed me!
@Ahmad: ha, yeah, i hear what you’re saying, but with all these fancy-shmancy techniques out there, there’s something refreshing about an old-school background image animation… :-)