Today’s Readings

If you’re a WP user, chances are that eventually you are going to need to do something manually in the database (add a new table, batch-alter some data, something), and when that time comes, PHPMyAdmin is certainly the way to go (in my opinion). Learn how to get it up and running for your WordPress installation.

And speaking of WP and databases, how often do you back-up your WP database? Probably not as often as you should, and that can be a big mistake. Here are several options for creating, and restoring from, back-ups, including a PHPMyAdmin option! :-)

There are plenty of reasons to switch from HTTP to HTTPS, but the thought alone can be daunting… is here to help ease the transition….

When I first saw the article titled Taking Chrome DevTools outside of the browser, I thought, “Why?” But as you read the article, the author, , suggests several situations where this could prove powerful, like using a single debugger in multiple, different browsers, using DevTools as a stand-alone dev tool (like Chrome kind of makes possible already), and even debugging iOS apps.

Wow, a seriously-deep article on How to Scale SVG. Covers a wide range of effects, attributes, and methods. Long, but worth the read.

And this drone shit just got scary

<link rel="import" href="component.html">
The above code allows you to “import” HTML files into other HTML documents. It’s like a SSI, but in native HTML. I guess I knew this was possible, from days of yore, but have never really considered using it… But this would allow you to create components, or blocks of markup that should always be served together, that you could then consistently import into any page in a project… The author, , discusses several options, alternatives, and use cases, as well as a few ¡Ojo! moments to be wary of.

I was not familiar with the concept of an HTML Inspector, but the concept seems really great: rather than a validator, it looks for things like classes that are not referenced in CSS, etc.

offers a great technique for showing form fields based on :checked status. I imagine this could also be extended for :not, :empty, etc. Nice!

Match that with some cool label effects, and you could have some pretty spiffy forms! :-)

Always looking for ways to improve performance, presents numerous Tips For Optimising SVG Delivery For The Web. And I now have more than a few code updates to do when I get back into the office Monday…

Honey, what color is it?” Maybe no real practical use, but if I had an iPad sitting beside my desk as a clock, this would be the clock… What a great idea… :-)

So, I use Grunt a bit now, but have heard some great things about Gulp, and have never tried it. This article makes me want to try it out. Any thoughts from anyone that has used both?

Are you a Backbone fan? I’ve never really had the pleasure, but this list of Backbone resources looks too impressive not to share…

You probably consider positioning a background image to be pretty simple stuff, until you have to do what tries to tackle: 20px from the right and 10px from the bottom… I had no idea that background-position: right 20px bottom 10px; was even an option, regardless of its support!

Cohesive UX. It has been a while since we had a new buzz-term, so why not! ;-) But going far beyond link-bait, discusses user experience across devices. A great topic and, as usual, well presented.

Responsive Design Weekly is an email newsletter to which I subscribe. Typically it would look fairly similar to these posts, with random links to bits found from across the Interwebs, stuff that I frequently scrape and regurgitate here for you. The above issue, however, is nothing but a brief description about how “, Technical Front End lead at the Guardian, and team has managed to break the 1000ms barrier by introducing a mixture of front end and backend techniques.” I’ve read about some techniques to help do this, but haven’t seen it all lumped together, so I went hunting and came up with a few resources:

That oughta get you started! :-)

And finally, I’m sure many of you remember the “end of the world” that wasn’t, Y2K, well we now have a similar issue fast approaching

On June 30th at precisely 23:59:59, the world’s atomic clocks will pause for a single second. Or, to be more precise, they’ll change to the uncharted time of 23:59:60 — before ticking over to the more worldly hour of 00:00:00 on the morning of July 1st, 2015. This addition of a leap second, announced by the Paris Observatory this week, is being added to keep terrestrial clocks in step with the vagaries of astronomical time — in this case, the slowing of the Earth’s rotation.

Shall we call it LS15??? ;-)

Happy reading,
Atg

Today’s Readings

When starting a new year, it is important to make sure we are excited about new things coming our way! And here are some very exciting CSS features we can hope to see, and use, soon! I am particularly excited about :has, because it finally provides an option I have wanted for some time, being able to apply CSS based on what is inside of an element! This example, from the article, would apply a border to any a element that has an img inside of it:
a:has( > img ) { border: 1px solid #000; }
Sweet!

Speaking of exciting CSS, Flexbox continues to grow and excite, but also frustrate, because of its staggered, and varying, implementation across various browsers. writes about Normalizing Cross-browser Flexbox Bugs, and even created a Github repo called Flexbugs to help catalog issues, and ideally, solutions!

Continuing with a couple features from that first article, and adding more, presents on Cutting-edge CSS Features for Graphics: CSS Masking, Blending and Shapes. Yeah!

Skype Live Voice Translation Gets Public Launch. Yes, after you register, and only on couple variations of Windows set-ups, but nonetheless, it is an impressive claim, I can’t wait to try it and see if it does a better job at translation than Google Translate or Bing Translator… (Both of which are impressive, just not quite great…)

The hamburger menu… Still hate the name, but I personally think that, if it is working correctly, it is a nice way to roll menus out of the way on small screens, but still keep them pretty accessible. Two articles that conducted tests have a grab bag of results. (Note that the tests conducted in the second article are actually included in the first article, and I would actually argue on that one the burger icon was really hard to see, and that that could explain at least part of the poor performance…)

Interesting responsive image situation I hadn’t really thought of yet: Trying to change alt and figcaption based on the image being shown. A few comments seemed to think it doesn’t matter, which could be the case on some images, but others (mostly art-direction, maybe) I would say it certainly could matter.

And speaking of responsive, here is a nice discussion about preparation for a responsive project. So often, I find, the developer gets a series of mocks, definitely a large-screen, probably a small-screen, and maybe a medium-screen, and then it is up to the developer to fill-in the gaps. Would be nice to see an entire “plan” in place before development actually starts…

Sticking with the responsive theme for another minutes, here are three presentations covering four very hot responsive design topics from .

And now sticking with Andreas for another minute, he writes another responsive article, this time about how @media queries inside of your SVG files can be a great way to control the behavior of your SVG images.

And finally moving beyond responsive (but still sticking with it too!), recently released his book Adaptive Web Design on the web, for free

A fantastically-detailed article on Pinned Apps (websites that act like native apps by letting users create icons on their mobile device home screens), including why this is a good practice, basic steps for getting started, and questions about moving forward.

Another fantastically-detailed article, this time on AngularJS, converting a prototype to a functioning product. I still haven’t dipped my toes into Angular, but am (somewhat) eager to try… :-)

Do you Grunt or Gulp? Lots of us do now-days, but here is a suggestion that we simply do it all in Node, including several how-tos… Thoughts?

Leave it to to author an article titled The Applied Science of Runtime Performance, walking us through a pretty slick animation he created, keeping it all under 60 fps, of course…

And speaking of 60 fps, writes a bit more on the topic, with Hardware Accelerated CSS: The Nice vs The Naughty, discussing what we should, and shouldn’t, try to leverage the GPU for…

And finally, for all those people out there that at some point in the past have screamed that should eat [excrement], would watching him drink it be good enough? ;-)

Happy reading,
Atg

Today’s Readings

Not sure if you’re a fan of SMACSS or not, but if you use WordPress, the same principles of modularizing your CSS classes could be implemented for any number of OOCSS styles.

Image sprites have long been known, and used, to help reduce HTTP requests and improve performance, but now tells us how to use SVG sprites in the same manner, including referencing an external SVG file, and a polyfill to make this work in IE!

And once we have our HTTP requests reduced, let’s make sure anything fancy we want to do, like animation, is as performant as possible too!

Have to admit, I was not aware of “code snippets” in Chrome’s DevTools, but this article on performance measuring using code snippets is really impressive!

A recent Smashing Magazine newsletter suggests that flexbox’s time has finally come, and Can I Use seems to agree! Borrowing a couple links from the newsletter, here are common design pattern problems that can be easily solved by flexbox and a cheatsheet to help you cope with the old/new CSS mix that is required.

And speaking of our old friend flexbox, here are a few “flexbox adventures” for you! Enjoy!! :-)

In a previous issue I listed links to all of the Tuts+ 50 Filters of WordPress articles, so I feel I would be remiss not to link to their 50 Actions of WordPress! (Thankfully, I found one link for all of the articles this time… ;-)

MBaaS is a new term to me (and a bit of a crazy-pants term), but it is well-defined and well-described in this Smashing Magazine article.

Although the article is titled A Designer’s Sublime Text Setup, any developer that is currently using Sublime Text, or is looking for a new IDE, is going to find something they can use.

And once you get Sublime Text installed, you’re going to want to pimp it out

Free WebPageTest API Keys: CI Perf Tests Made Even Easier. Any questions?

So, red is heavier than blue? Read to find out why, and what to do about it…

interact.js: JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+)

And the minified version is just 17.1KB, gzipped… Hmm.

And if the above gets you thinking that you might easily replace at least parts of jQuery, well, how about replacing a few more, with these easy, native JS methods?

Still not convinced? Maybe these will help

Wow, a tiny little OSX command line tip, shortly turns into the mother of all command line tip lists

Some Obscure JavaScript Pitfalls. Always good to be reminded of such issues…

And finally, I want really, really badly not to make fun of this, or belittle whatever efforts may come, or lay any shadow of doubt before anything is even seen from them, but how can Microsoft building a new browser possibly come to any good????? #facepalm #couldnothelpmyself

And finally, finally, I really don’t want to end this post with a negative, so instead I’m going to link to one of the many newsletters I read regularly, because they have collected such a nice list of sites that are doing things properly, and impressively! Let’s take a moment to read about them and show appreciation for the work down to make these works of art!

Ok, finally, finally, finally, I feel like I actually need to end this issue with the standard bit of sarcasm found here at the end… ;-) I am routinely amazed at the amount of free time that some people have, and commit, to projects such as the Star Wars API… Much wow…

Happy reading,
Atg

Today’s Readings

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, 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 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.

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. 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

Today’s Readings

Okay, I know I’m a little late getting to these, so let’s dive right in: Here are 10 advent calendars for designers and developers.

The Fundamentals of Mobile Web Development: learn, build and iterate. Yup. Every day. It’s one of the things that I love about my job: I learn something new nearly every single day, and the landscape is always changing.

And just in case that didn’t quench your thirst for Chrome Dev Summit 2014, here is a playlist of all the conference vids!

Starter course of Clipping and Masking in CSS, by .

From The Old/Decrepit to The Fresh/Powerful, an Introduction to Service Worker.

Page bloat update: The average top 1000 web page is 1795 KB in size… Good God…

12 HTML5 tricks for mobile. Most are pretty standard, but there are several that will give your sites a nice touch in specific devices.

Seriously thorough collection of touch/pointer events test results across multiple browsers.

I love this floating label pattern!

Cyclists: the Copenhagen Wheel turns any normal bike into an e-bikeDay-am that’s cool!!

From a recent Web Tools Weekly newsletter comes something I was not familiar with, and am still not sure how I would use, but it seems cool enough that someone smarter than me could probably find a great use for it: document.elementFromPoint. (Note that you might have to scroll down in the far right panel to see the buttons and output section…)

a11y.css: This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site’s quality by simply including it as an external stylesheet.

There’s a bookmarklet, too. Which I used on my own home page. And was shown two broken links (malformed vcards with missing hrefs). Gee thanks! (Wish the little “count” box in the lower-left of the screen helped me somehow find the stuff it had counted for me, though…)

A new app, PushBullet, helps interconnect your phone with your computer, like getting a push notification when you receive a call or text (my phone is almost always on silent mode, so this does happen to me!), and send files from your computer to your phone. Nice idea!

I don’t think necessarily think Elastic Stroke is practical in any way, but I am absolutely impressed by what one svg and a bit of CSS (read: no JS) can do…

A configurable, command-line RWD performance test. Well okay then.

Seems like that could be a pretty useful tool in helping you to create your performance budget

“This has to be above the fold!” Maybe not so much

Now, I know I’m an old curmudgeon, but I hate conversing with computers. I’m okay touch, click, and even type, but I hate speech interfaces. Wonder if that will ever change… I hope others do not feel the same as me, though, and that speech continues to advance. I love it in sci-fi, I just don’t want to deal with it myself… :-/

These SVG loading icons are awesome! Why am I only now seeing this idea? We’ve had (mostly) ugly and clunky GIF images forever, we were never really given a chance to try animated PNGs, and we even tried mark-up-only and CSS-only loaders. `bout time..·

And finally, while it is universally agreed upon that the world can never have too many Haikus (okay, maybe this is just my opinion, but I’m pretty sure I’m right), we sadly do have a finite number of IP addresses. So let’s help those sad, finite IP addresses have a little more fun with life, and convert them into Haikus

Happy reading,
Atg