From the Washington Post comes a pretty fun read about Internet security (yes, you read that right, “fun” and “Internet security”, in the same sentence!). Labeled as “part 1″, with interviews from the founding fathers and photos of some of the earliest equipment, it’s an interesting glimpse back at the the early thoughts, plans and processes. My two fave quotes are regarding the idea that the founders should have planned ahead and been able to avoid the security issues we face today:
VintCerf: “You could argue with hindsight that we should have, but getting this thing to work at all was non-trivial.”
DaveCrocker: “I believe that we don’t know how to solve these problems today, so the idea that we could have solved them 30, 40 years ago is silly.”
Translation of both statements: “Shut-up!” :-)
A couple cool accessibility bookmarklets:
tota11y wins the prize for cleverest name, and also collects any a11y concerns into a nice little floating panel for you.
HTML_CodeSniffer does basically the same thing, but seems to collect a lot more issues; it’s up to you to decide which collects a more useful list
An interesting conversation summary from ChrisCoyier about whether we still need CSS files, or whether we should be applying inline styles via JS… Initially I just about choked on the concept, but, while there are valid points raised, I still feel like the method we have, of separating HTML, CSS and JS, and affecting page states by changing CSS classes via JS, is a powerful, tried-and-true approach. The biggest issue people seem to raise is global cascading, which can be easily resolved by using element IDs as namespaces in your style sheets.
Chris’ article above links to GlennMaddern‘s Interoperable CSS article, which discusses enhancements to CSS to try to make it less “cascady”… He lost me the moment he used the word “compile”… :-/ (Though, I guess that really is what Less and Sass are already doing…)
The problem here isn’t How do we style this?, it’s Why has this been designed like this in the first place?. Put another way, the problem here doesn’t exist in code, it exists in design… The design issue here is solved by subtly inverting the problem: instead of saying The buttons need to be smaller when they’re in the header, we need to be saying We have a smaller variant of our buttons, and it’s these that we use in the header… It’s that subtle. They’re not smaller because they’re in the header, they’re smaller and they’re in the header.
10 Tips for Keeping a Squeaky Clean WordPress (and Multisite!) Database walks through cleaning old crap out of your WP DB, but does so via direct SQL commands… This is WAY too risky for me, so I wouldn’t recommend this approach. Nearly all of the suggested clean-up steps can be handled much more safely via the plugin that is tossed in at the very end of the article, WP Optimize. I’ve used it for years and never once ran into an issue. Maybe it is not as thorough, but you are also never going to accidentally delete all the content from one of your WP DB tables…
Speaking of WP, and continuing with the above CSS theme, here are several ways to add animation to your WP site. The article takes some time to get around to anything that is WP-specific, but further down the author does get to WP Plugins that help add animation to themes.
Okay, just one last WP post, this time showing how to use WP for rapid prototyping. Includes discussions on multiple variations of prototypes, and finally offers a 45-minute how-to video!
Anybody using vw or vh units for their font-size? I do, for headings mostly, but as EduardoBoucas points out, at some point those tend to get too big or too small, and you have to craft custom @media breakpoints to change the font-size. That’s why Eduardo created this Sass mixin to automagically create breakpoints for you. Okay, it doesn’t really fix the problem (and you still have to find the desired breakpoint and pass it into the mixin), but as with most things preprocessors do, it makes getting around the problem much easier… :-)
And finally, further proof that there are only two kinds of people… And if I had any ability to draw, I would add one more example: eating corn-on-the-cob… There are those that eat like a typewriter (eating the length of the cob, then rotating to eat the next “row”), and those that eat like a lathe (rotating the cob as they eat, then moving on to the next “column”). But in this example, there is actually a third kind of person: those that randomly bite at the cob, in no systematic order whatsoever… Watch out for these people, they are clearly not to be trusted… ;-)
SVG on the Web is freaking awesome! From suggesting a ton of customizations and optimization options, to discussing a bunch of implementation options and the pros and cons of each method, to manipulations via CSS and JS, to dealing with responsiveness, to animations via SVG and CSS, to spriting, and even fallbacks… What a great resource!
Infographics are cool because they present data in a format that is fun to read. But on mobile, they pretty much suck: big images, with embedded text, all scrunched down to fit inside the palm of your hand… So these animated infographics make SO much sense!
What the hell, let’s just keep yapping about animation… ValHead‘s talk from An Event Apart on Putting Your UI in Motion with CSS. It starts a little slow, but by about 1/3 of the way through, she starts really getting into what works best, and why.
Earlier this month I mentioned LandonSchropp‘s Flexbox course. I also mentioned that I had already signed-up. So, quick update: Great course! I have created my six dice, worked out a totally light 12-column layout, then broke free from those confining columns, and found great new methods for dealing with an unknown number of wrapping elements. I have also discovered some great tools that I’ve learned of:
We all know about preprocessors, right? Less and Sass are easily the most common, but there are plenty out there. Well Autoprefixer is a postprocessor, which means you get to write CSS from the future (you can still use Less and Sass, but you don’t need to use all the prefixes and old/wrong versions (like for gradients and Flexbox))! Autoprefixer uses Can I Use data (you can also customize your requirements) to analyze and alter your output CSS (thus the post in postprocessor) to provide all the necessary prefixes and alterations for you! It’s a sweet little deal, and one I cannot wait to play with!
I have not yet had a chance to dig as deeply into Prepos yet, but it is an alternative to CodeKit (which smart people like Chris Coyier seem to really love!), that at first glance seems to offer (at least nearly) all of the same functionality, only also on PC and Linux (while CodeKit is Mac-only), and for a couple teeny little bucks less (currently $29 vs. $32). If you’re in the market (and if you’re not, take a closer look at what they both offer, maybe you should be!), check-out both!
I have never liked the concept of the e-bike (entirely because I am a grumpy old curmudgeon), but I do fancy getting one for my wife (and probably eventually for me, because, as I said, I am old), so I’ve been keeping my eye out for good options. And so the Maxwell E-PO has certainly caught my eye. Lightweight (even by normal bicycle standards), sleek design, a pretty impressive battery life, quick recharge, and planning to start at only $1,500! (As soon as the ubiquitous Kickstarter campaigns is announced, and eventually closes… :-/ )
And to try to make cycling safer in their fair city, Toronto(ans?) staged a die-in, in the most Canadian way possible: trying really, really hard not to disturb or bother anyone… :-)
BruceLawson does a great job of collecting several opinion pieces on the state of HTML, what is lacking and what is needed. I agree with much of the comments in Bruce’s article, but strongly disagree with the ideas of dropping some HTML5 elements (such as article and footer) or adding more vendor styling to HTML elements (such as adding a drop cap to article or floating sidebar (I’ll assume the author meant aside, since there is no sidebar element) to the right); I am so annoyed every time I have to override a vendor style! This is what I do for a living, if I wanted a margin on this stupid thing, I would have added it!!
LeaVerou really likes conical gradients. When I saw the first example in her article, I wondered if she also really likes LSD… :-) When I saw her second example, I suddenly got it. And when I saw her polyfill page, I totally got it… Note that each example is one HTML element…
While the first several groups in this Introduction to CSS Selectors article may be pretty basic, there are also less-common selectors (to me, anyhow). I guess I used to avoid things like p ~ a and such back in the day because they were so new and not well enough supported, and I just never really got into them. But, according to Can I Use, support for CSS2.1 and CSS3 selectors are all quite good!
Here is a great interactive SVG Filters demonstration, complete with copy/paste code samples. Granted, aside from sepia and maybe one or two others that could be appropriate for portfolio sites or something, most of these filters are not very practical, but you just never know…
And I hesitate to share these SVG clipPath examples, because I am afraid someone would actually implement them on a live site, and that would absolutely be a horrible user experience, but I felt I had to share them because the tech is so impressive… :-/ So, please, enjoy them and be inspired by them as a demonstration of possibilities, but never actually put something like this on a live site…
Awesome, tiny two-way binding library from RemySharp. Less than 2k compressed, supported by IE9+, and only a few intentional limitations to keep things small and simply. Love it!
An impressively-detailed article on, IMO, one of WordPress’ strongest, yet simplest, advanced features: Custom Page Templates. Strong; because you can literally create a complete different page layout and design by simply creating a new template; and simple, because to make it work all you have to do is name the PHP file properly. There are a lot of other hooks and whistles discussed in the article.
And speaking of ECMAScript, if, like me, you’ve been mostly ignoring ES6 because, well, the compatibility table looks like this, but, like me, you’re starting to have this searing, gnawing, scraping feeling crawling up from the depths of your midriff because you fear you are slowly falling behind the times, then maybe this ES6 in Depth series will be just right for you (and me)!