Today’s Readings

The long-overdue death of a long-dead product…

Yahoo Directory, once the center of a web empire, will shut down at year’s end

The craziest bunch of hack-filled polyfills you’ve ever seen to make fonts responsive to window size. But, hey, it works…

Keeping it hacky (but in a totally modern, futuristic way), learn how to combine a JPG, a PNG, and an SVG to get a small(-ish) transparent image. (The article describes the process better than I do… :-)

One of the best things about SVGs is that they are comprised of actual DOM nodes, that you can twist, turn, tweak and torture with CSS and JS, right there in the browser. But creating SVGs, and then coding their animations, can be a bit intimidating (read: frustrating!). Until SVG Circus, that is…

But, if you just love coding your own shit, here’s a nice little walk-through on SVG light source filters.

Another great use for SVG is making text that expands and contracts to fit the screen on which it is being read. And here’s a nice little bit o’ JS to convert HTML text into SVG text.

Dedicated, protected bike lanes speed traffic, reduce accidents, and add a few trees along the way. Can every city just start dong this already???

PDFy is a cool service, giving you somewhere to upload, and share, PDFs Internet Archive! I’m sure some people need this, so cool! Would have been nice if you could upload other file types to be converted to PDFs in the process, but okay.

I know everyone is still aquiver from the explosion of flexbox onto the web (not), and now we have grid slowly coming of age too!

And as long as we’re looking into the future, let’s play with CSS Shapes a little!

This article is titled Challenge: Re-Imagining the Hamburger Icon, but it’s really more of a History of the Hamburger Icon. You may be surprised to learn it is more than 30 years old…

And as long as we’re looking into the past, let’s meet Ray Ozzie, ä man that worked on VisiCalc, then invented Lotus Notes (which he sold to IBM), then founded a collaboration app (which he sold to Microsoft). But why stop there??

vertical-align: middle. Huh, it didn’t work… Get to know all there is to know about vertical-align, that f-ing bastard

The Boring Designer. Would work with one, any time! (And someone that is better at writing than I should write the counterpart The Boring Developer article, which is just as badly needed…)

In the mean time, to help yourself get on better with your designer(s), from comes a few tools to help you help your designers help you

Why fight the trend? Fix content position after scrolling

Some pretty impressive CSS from Campaign Monitor:

How we designed and coded an animated banner ad with no images

There seems to be a little bit of a history theme going this issue, so quiz time: What do the University of Illinois in Champaign, IL and CERN in Meyrin, Switzerland have in common? They are probably the two most influential places on the face of the Earth when it comes to the Internet.

Explanations of some common JS code you see now-days, such as !! and var x = obj.x || 'foo'.

And a couple “fun” JS collections linked from the bottom of that article:

  1. JS Tips & Tricks
  2. Byte saving techniques

Ok, just one more, this time from , via ‘s site, on JS text replacement options.

From , 7 Habits of Highly Effective Media Queries. Yes! Especially #1! I hate when I see sites/frameworks using 320, 480, 768, etc. as @media query breakpoints, you know, “because those are the common screen widths”… This is no different, to me, than fixed-width sites using width: 800px;, or width: 1024px;, or width: 994px; for that matter! Look at your pages, let the content tell you when shit should change!

A few JS performance pieces for you!

And from , another quick JS-from-the-future demo on Service Workers!

Awesome Shell: A curated list of awesome command-line frameworks, toolkits, guides and gizmos.

When it comes to supporting old browsers, how low do you go? If it’s as low as IE8, then How to Build a Responsive Website That Supports Older Browsers might be of interest to you. Granted, it’s pretty much all JS add-ons, would have been nice to see a little more “content-first” / “small-screen-first” stuff in there, but if you need to support legacy browsers, this should be a big help.

Ever needed (or just wanted) a Can I Use for fonts? I have, and couldn’t find one. Neither could , so he build one

And finally, one last history-themed item, check-out all these first-generation websites for some really famous companies… Lest we forget just how far we have come, we have come pretty far…

Happy reading,
Atg

Today’s Readings

Wow. Debug desktop Chrome, Chrome on Android, or Safari on iOS, all from your desktop FirefoxFirefox; get back in the game!

Speaking of “not who you expected”:

The IE Web Driver Tool enables developers to create automated tests that simulate users interacting with webpages and report back results in Internet Explorer 11. It can also manage testing across multiple windows, tabs, and webpages in a single session.

There has been a lot written as to whether JS or CSS is better for browser-based animation. As with most things in our development world, the answer is resoundingly: it depends… But one thing is for sure, and that is that if you need JS to do your animation, animating without jQuery is preferred.

BuyPartisan, a free app for iOS (Android version is coming soon), allows shoppers to scan the bar code of a product they’re considering buying, which brings up that company’s political spending information, including the donations of the CEO, Board of Directors, employees, and political action committees (PACs).

BAM!! I love this!! And for the icing on the cake:

The app also allows users to compare that info from several companies, in order to find products from companies that best support their values and beliefs.

I always love seeing how other people do stuff that I also do; I always feel like there is something to be learned. And there are plenty of possibilities for learning in this two-part series on the complete web design toolkit (but it’s actually all about web development; Part 2). The series covers everything from picking an IDE, to version-control, pre-processors, task automation, command line, local dev environments, device testing, and continuous deployment…

Speaking of how others do stuff, very thorough performance review and improvement article from Smashing Magazine.

And speaking of version-control, if you’re still not convinced that it makes sense, or you’re still struggling with that initial learning curve, here is a nice, simple starter on Git from A List Apart.

How do you add CSS on the fly? Adding directly to the element via .style or .css(...)? I have created style blocks and appended them as well, when I needed large changes at once, that maybe need to be replaced all at once. But shows us how to easily append styles to stylesheets, whether pre-existing or created on the fly, including @media queries!

Map Glyphs has hundreds of scalable vector map icons of the world, continents, globes, countries and states.

Holy crap, that’s awesome! :-)

From comes an element @media query polyfill. Need to look a little more closely, on a bigger screen than my laptop, not sure it was working 100% correctly, but it’s an interesting approach, and keeps all the breakpoint info in the CSS (as opposed to using something like data attributes in the HTML), which is nice. Thoughts?

A four-step tutorial on how to reduce image sizes for the web. It’s so easy, yet it is still probably beyond what most people will bother doing…

Kinda weird that this comes from PayPal, but they’re created an Accessible HTML5 Video Player, offering custom controls (based on native HTML5 form elements), VTT caption support, and keyboard-only and screenreader support… But, from PayPal? Are there even videos on the PayPal site??

Pretty nifty-looking site tour, nicely highlights parts of your pages, walking users through interactions. I like the animations from item to item.

Serious collection of performance-oriented… things. From bookmarklets to Chrome extensions to Node modules to Gulp plugins and more! (And since when is .today a top-level domain?? I guess since all of these became top-level domains too… Wow…)

And finally, I’ve mentioned a few classic games in past issues, and now we also have Jenga! Really well done! Can’t decide if watching the tower fall in seemingly slow-motion is worse or not… ;-)

Happy reading,
Atg

Today’s Readings

The Google Developers Web Fundamentals series is a collection of really great reads and resources, and I really like their take on animation, CSS vs. JS.

From SitePoint, comes Five pretty useful JS APIs, especially for mobile.

Spaced-out is a cool menu toggle effect, but it fails pretty badly on my mobile; how about yours?

Points of Interest is a nice way to highlight sections of your website. What I really like most is actually the CSS look and effects. What I like less is that you have to add CSS classes to your mark-up, and the user cannot dismiss these highlights when “they get it”…

Just activated JetPack’s Monitor feature. No reason to think I need it, but I guess Monitor will tell me… ;-)

Nice little online SVG optimizer (unfortunately the author didn’t bother to make deep-links, so you’ll need to manually click the Optimise link at the top of the page). The savings on the example SVG are pretty impressive!

Stumbled across this MDN article on the MouseEvent whilst reading another article, and was surprised to see .altKey, .ctrlKey and .shiftKey… Somehow I was not aware these Boolean values were available… :-/

Memory Management Masterclass with Addy Osmani (LOVE that it is also captioned!). Nice live walk-through of a memory leak investigation. Slides also available.

Impulse is a really impressive JS library for creating some very common UI patterns. And performance is pretty good on the mobile devices I tried.

Are we finally at a point where we can start building things using IndexedDB? This Smashing Magazine article thinks we are. With a little polyfill help to proxy our code for WebSQL in older iOS, this is a pretty simple implementation, but it shows the strength nicely!

12 HTML5 tricks for mobile. Certainly not all necessary, but you never know what you’re going to need until you need it…

I’d add the HTML5 Page Visibility API into that list, though, great way to save on performance when tabs aren’t the active one.

Centering in CSS: A Complete Guide. You’ve just got to love , always so thorough… :-)

The concept of proportional design involves using percentage units for anything that contributes to “the combined width of the document” (width, margin-left, padding-right, etc.) and using rems for everything else (which, unintuitively, also includes max-width and min-width, since they help limit, but do not contribute to the doc width). This approach has some great benefits, give it a read.

I don’t know what your mobile testing situation is, but unless you’re as fortunate as I am and have literally hundreds of devices in a lab at work, this article on emulators, simulators and remote debugging might be pretty useful.

Must-Watch CSS: A useful list of must-watch videos about CSS. Indeed.

Haven’t talked about flexbox in some time… Well, here are a bunch of typical, annoying design layouts that are solved, rather simply, and all hack-free, using flexbox. So, enjoy!

And once you’re convinced and are finally ready to start coding your own flexbox layout, don’t. Let this incredible web-based tool do it all for you! Seriously powerful, and makes it so simple!! (Hint: Hover over the “workspace” area to get add/split controls, then click one area to adjust its settings in the left-column.)

And finally, in case all the hype and waiting for the upcoming Star Wars installment is just too much for you to handle, here is a little something to help pacify

Happy reading,
Atg

Today’s Readings

The last issue started with a classic game created solely with HTML & CSS. This issue starts with another classic game, but this time with just a sprinkling of JS.

A robotic butler (dubbed a Botlr) has started work at the Aloft hotel in Cupertino, California.

How long, do you think, until they start grumbling about lousy tips??

Humin is a phone app, on steroids! (Skip to the 4th paragraph, where the author starts talking about the actual app.) Humin automatically adds where & when you added contacts so you can later find them by searching for things like “met in New York last summer”; it “even does some clever work finding a photo for each of your friends, their work experience, when your next meeting with that person is, and even which friends you have in common.” Worth checking out!

Lots of developers use Git. At work. But how many use it home, for personal projects? I know I don’t. Setting up and managing your own version is not always easy. But Bitbucket might be the way around it!

I was not previously familiar with , but this video of his Effortless Style presentation from CSS Day is not only pretty entertaining, but suggests several CSS tips to allow editors to just write, and have their content just look good… (He really gets into the gist of the topic at about 6:40, but those first 6:40 do a really good job of setting the stage for his suggestions.)

And if you like that CSS thing, here are all the videos I could find from that conference:

offers a new tool for creating all the various icons you need with just a simple drag-and-drop and a button click. Handy!

Sticking with Christian for another tool, this one is called Make Thumbnails, and it does just that! Though, only a single crop at a time, you can customize the size, and since the whole thing is available for download, you could probably configure a set of crop sizes and have it return the lot.

smoothState.js lets you add really cool page transitions to your site, so users don’t have to deal with that flash of white page until your actual content starts appearing. The animated GIFs in the above demo are good, but the actual smoothState.js site is an even better demo of the transition effects.

And speaking of CSS animation, once your page has elegantly loaded, here are 22 CSS3 animations that will hopefully inspire you, or at least give you something to rip-off… ;-)

It seems to me that position: sticky is really what most people have wanted position: fixed to do all along… And while browser support isn’t very good yet, this SitePoint article shows how to implement it natively, test for support, and apply a polyfill when needed.

Sticking with SitePoint for a moment, shows 5 uses for a vertical media query. Good tips!

How well do you know your favicon? I’ll bet not well enough to get the correct answer for every question on this favicon quiz from

How do you get your sites to load faster? Download them before the user asks for them, that’s how!

If you’re a WordPress user, and want to get some insight into your server’s current status, this tutsplus tutorial will show you how to create a Server Dashboard with 9 widgets to keep an eye on things!

The good folks from appendTo, like many of us I imagine, got annoyed with the responsive framework options that are bloated, overbearing, and require a ton of overrides to customize, so they built their own:

BareKit is a super minimal, open source, responsive framework. Unlike most frameworks, it comes with zero “styling”. It uses CSS, but only for positioning and display properties.

And with a total CSS weight of 10kb and JS weight of 7kb, it is easily worth a shot, to see if it can do all you need.

The 11 most exciting open source projects on the web. (Interestingly, the URL says 10, guess they found one more just before publishing?) Most you already know, maybe one or two might not really be “exciting”, but hopefully you find something new and interesting.

My wife recently downloaded a new iPhone app, Photo Sphere Camera,
by Google, that let’s you take and stitch together 360-degree photos, for a very cool image. Unfortunately, the only thing you can then do with that image is upload it to Google Maps (I guess how else would you look at a 360-degree photo?), and unfortunately you will look like a complete dork taking all those photos, but what you get is actually very cool.

Waves is a cool CSS click effect for a, button, or input elements. Minified CSS and JS are each around just 3kb.

Minuum is “[t]he little keyboard for big fingers” that uses a “revolutionary auto-correct” so you can “worry less about typing”… I’ve seen a lot of variations of keyboards and typing, but I just don’t know if I could do it… Could you?

And finally, ever thought about lying in a hammock listening to waves crashing on the beach while you’re coding? Then check-out Nomad List: the best cities to live and work remotely. :-)

Happy reading,
Atg

Today’s Readings

Let’s start off with something that we’re probably all familiar with, but would probably think isn’t possible: Pure CSS Tic-Tac-Toe… The first secret is an insane amount of mark-up, the second is having all that mark-up be siblings, the third is a very clear understanding of which patterns constitute a win, and the last is some wicked-clever CSS! Nicely done!!

And speaking of pure CSS, Slick sliding-highlight navigation effect, sans-JS.

And now for something completely absurd: Changes to the IE11 User-Agent string. Oh, that’s not the absurd part; the actual URL is! Only a Microsoft engineer would think that’s a good idea… (facepalm)

Some of the bigger news on the web-dev front recently has been the support of the picture element in both Chrome and Firefox. And the majority of thanks for that goes to . Here is a video interview and workshop with Yoav!

And here is an article from Yoav about the same subject, also discussing some history, other attempts, and use cases.

I despise litter. Nay, I doth loath litter. And cigarette butts are some of the most loathsome litter there is. So an article with the title Used cigarette butts turned into high-performing energy storage material really made my heart go pitter-patter. Finally, a useful use for all those damned things…

I am slowly coming to terms with the name “hamburger icon”… I tried hard to give all my support to “navicon“, but every time I said it to someone, they just said “Huh?”. So, let’s at least find out how to get this cholesterol-filled navigation menu icon into our pages properly

Continuing the idea of “how to”, Secrets of the Browser Developer Tools is an incredible treasure trove of web dev deliciousness! Resources, how-tos, and more. Read them all!

Then see if you can find any they missed from this video Secrets of the Chrome Developer Tools! :-)

Got inline SVGs? Must say, I don’t use SVG inline very much, I typically use background-image and data-URIs. But if you are, then has several good options for swapping inline SVGs on-the-fly.

Sticking with CSS-Tricks for a moment, a guest post from addresses CSS Columns. I’ve always liked the concept, but have avoided them because a) support is still pretty bad, and b) I don’t like how they can make users scroll down to read the bottom of the first column, then scroll back up to continue reading from the top of the next column… Well, Katy nicely provides code that fixes my second problem, and my first problem is solved by the lovely graphic at the bottom of the article… :-) (Or by the polyfill references in the Comments, your call.)

Great primer on OOJS. Compares old-school examples, and thoroughly explains when/where/why OOJS is better.

CSS Animations can make a huge difference over simple, A/B, on/off transitions. Fades, slides, etc., are just more pleasing to the eye, and less jolting to the user. But linear transitions look so mechanical, and Beziers are just too damned difficult to figure out! Not so, not anymore anyway! ‘s article Bouncy Transitions does a nice walk-through of the basic CSS Animations, and then points us to ‘s cubic-bezier tool which, with a little playing, allows even a design-challenged fool like me to create a cool animation like this!

And finally, if you are reading this post, you simply have to know who is, and if you do anything that helps to create a website experience, then you owe Jeffrey, whether you know it or not. This documentary about the man, myth and legend is well worth the ~40 minutes to watch and learn more…

Happy reading,
Atg