Happy New Year to all those that celebrate the first day of the Gregorian calendar! It’s been a couple weeks since my last posting, so some of these might be familiar, but I want to make sure you don’t miss anything… :-) Now let’s get on with it!
Perf tooling is a collection of powerful resources which will help you to improve your workflow and to deliver better and faster websites.
And with 89 Tools, 39 Articles, 21 Videos, and 10 Slidedecks, surely we can all find something useful here!
And everyone should know that the first step to any performance improvement should be to test the current situation. How else can you know if your “improvements” actually did any good, and more importantly, did cause any harm? But testing kind of sucks… All that manual URL entering, test running, waiting, then copying of test results into some later-useful format… Well, why not automate all that testing & data collection, using a Google Spreadsheet?
But before you start your next project, the Filament Group offers a nice set of performance test results regarding MVC frameworks. See how your fave stacks up, before you just toss it into your next project.
A nice high-level article regarding the pain-points of responsive projects, whether it be a ground-up or retrofit project.
And speaking of responsive sites, one of the bigger pain-points, after media is somehow dealt with, if font-sizes, such as making sure your headers don’t fill the entire screen on smaller devices. This article discusses implementing a responsive font-size solution, which shouldn’t surprise anyone to be viewport-based sizes, but it may surprise a few of us to find out how well-supported viewport-based font-sizes are already!
As exciting as AppCache seemed when it first hit the Interwebs, it quickly became that much of a disappointment. And while we still don’t have a really great all-in-one, out-of-the-box offline solution, Jake Archilbald has put together a great collection of offline options & resources and a walk-through of how we can roll our own offline solutions.
And speaking of solutions, this collection of ARIA examples for dynamic content leaves no excuse for not making our pages sing for our audible users while they dance for our visual users!
WordPress users: 15+ Must-Have Tools For Every WordPress Admin. (That’s 15 plugins, and 2 tools, to be precise.) Several I have heard of before, many I had not, and a couple I can see immediate benefit from!
From Chris Coyier comes a new take on using the :checked pseudo class, moving beyond the “checkbox hack” to pure CSS hide/show techniques. Love!
Bootstrap gets a lot of recognition for being so flexible and solid. It also gets a lot of flack for being so darned bloated… Maybe you’d like something thinner? Well, it doesn’t get much thinner than a skeleton, does it? With only about 400 lines of code, mobile-first and requiring no compiling, it might not be a bad starting place…
The problem with CSS pre-processors. Not a flame-war-instigation, but a thoughtful concern about the problems that pre-processors can create if developers are not careful. Worth the short-read.
Wow, a UA-sniffing, CDN-hosted, polyfill service that delivers only the polyfills the user’s browser needs, minified and compressed… The list of added features is impressive… Now that is something the web can use!
The JSON Selector Generator is freaking awesome! :-) Paste in a JSON object (or click the “example” button), then click the “Process” button. You can then click any node value and get the selector string you would use to fetch that value. Really slick idea…
Is SEO still a thing? This 24 Ways article seems to think it is.
Dudley Storey offers a nice approach to dealing with varying sized images on varying sized screens. While object-fit is certainly not ready for primetime, it is an easier option when dealing with a CMS than the far-more-reliable option of background-size.
Really thorough intro to CSS animation. Might be a bit basic for some, but as always, I highly recommend at least a skim, cause you never know what you might trip across.
Then, once you have the basics down, you can push forward into animating responsibly.
And speaking of responsibility, 24 Ways continues their concern with responsive responsibility, moving beyond just layout and proper image sizes, and into the areas of accessibility, usability, sustainability, and performance. Heady stuff, that.
And while we’re talking about responsive and being heady, let’s talk about Responsive Philosophy… Wow, this business is really getting deep!
And jumping back to accessibility, the CSS, Accessibility, and You presentation is chock-full of good info, ideas, and approaches. This type of information always amazes me, because, as it usually turns out, if you start with semantic, small-screen-first coding, you’re going to fix all kinds of problems before they even pop-up…
Text over images… Designers love it, developers hate having to code it, because dealing with single-colored text of multi-colored images is going to be hard to read, and to counter that issue, inevitably, the phrase “we’ll just always [fill in stupid thing that will never always happen here]” will be uttered and you will have to physically bite your fist to prevent yourself from saying what you really think about this idea. Well, maybe these options could help create a situation that could always work…
Ever have to embed an interactive map into a page? Most likely. Ever test that page on a small-screen device? If so, you’ve also likely encountered the issue of page-scrolling vs. map-panning, or maps getting lost on resize or orientation-change. Brad Frost offer a few options to get around such issues, including my personal fave, offering a simply link initially, then progressively enhancing to either add a static image or interactive map, based on the device.
And finally, the 2014 Daily JS JavaScript Developer Survey results are in! See how you stack up against the industry, and maybe consider if you need to learn a few new tricks…
Happy reading,
Atg