Today’s Readings

Another fine example of how to implement flexbox on a real-world site, with the proper fallbacks for older browsers.

Aside from being aware that they exist, I’ve been kind of ignoring web components so far, until they get better support. But if you’re ready to dive into the deep-end, this article from Dave Walsh should help you get started. I especially love the power of the extend / is combination!

A web-based WebGL image editor. Upload, edit, save. Nice!

A really impressive demo of… apparently something to do with CSS… I hate to pick on this one developer, but I see this fairly often, and it just floors me: you spend all the time & energy to create something that you think is awesome, pub it to the web and promote it, but then give the user no idea what they’re supposed to be seeing or doing… Maybe it’s just me…

Chainless electric bike folds up to fit under your desk, doesn’t look dorky.” As the old saying goes, “dorky is in the eye of the beholder,” and I have yet to work somewhere that was cool with me bringing my street-ridden bike into the office and to my desk, but I love the innovation!

The 101 Most Useful Websites. Wow.

And thanks to for the pointer, and for this nice little vidcast for mass-converting non-linked URLs into linked URLs.

Mobile, sun-absorbing, woven-fabric, disaster shelters

Scientists can now see back to almost the very instance that the Big Bang happened

And speaking of space, astronomers have now found an asteroid with a ring! Somebody wants to grow up and be just like Saturn!!! ;-)

And how about a new planet[oid] in our solar system?

Holy crap, these doctors are talking about suspended animation (albeit, briefly suspended).

10 vital OSX keyboard shortcuts.” Not sure if they’re all vital, but Shift + highvolume and Shift + lowvolume (adjusting the volume without the quack) are alone worth the price of admission…

All the big names are behind this new initiative to give the web a proper database. Thanks to for the pointer.

And finally, why did need an entire orchestra to play the Star Wars theme, when one guy on a Wurlitzer seems to do just fine?

Happy reading,
Atg

Today’s Readings

Flexbox. I know, right? Can we use it? Are the fallbacks reliable? What about mobile?? This article about flexbox in the real world offers three scenarios where you can use it, right now, and one where you can, but maybe shouldn’t (or at least, will need another old-IE-only set of CSS to make IE8/9 look properly).

Then, if you’re still on the band wagon, have a look at ‘s presentation from the Smashing Conference in Oxford. The article contains her slides and a TON of resource links!

Then once you have all of that mastered, you can dive into the deep-end and play with flexbox as a grid layout!

Now take all that delicious, nutritious flexbox goodness and stir it together with some width- and height-based @media queries, and you could have some pretty slick, responsive content!

Firefox for Android just upped-the-ante for mobile browsers by making web apps installable the same way native apps are installed, finally lowering the confusion rate for end-users!

Wow, some people go through an awful lot for an underline… I have to agree, even with my developer-eyes, those initial underscores look like poopookaka, but I just don’t think would never spend that much time on something like that… And that, boys and girls, is why we have designers and developers… :-)

I don’t know that self-driving cars would make people okay with long commutes, but they sure would be cool for longer roadtrips!

This Instagram-like gallery with slideshow/carousel overlay is pretty slick-looking, but since the slideshow/carousel relies on JS anyway, I would probably prefer to see the content sent to the user only once, they JS creating the duplication…

The Halfbike looks full-on bad-ass!! Would be awesome for short commutes or errands!

How often does your design team ask you to make the select box in a page look different than native, or the same in all browsers? Pain the butt, right? Maybe not anymore

When it comes to the web today, content may be king, but performance rules. And if you’re tweaking performance for a WordPress site, it’s easy to try throwing everything you find at the site, in hopes it will help. But be careful, there are performance improvements that can do more harm than good.

Worried about your privacy? Tell the President.

Think much about the type of cursor you see when you move around webpages? I didn’t either, until I read this article about cursor-over-text behavior. Now it’s got me thinking about it… I personally hate the I-beam cursor, in all instances, it’s just too hard to find…

Ever work on a project where multiple hands are in the CSS? I have, and I can verify it is really easy for code to get messy with varying coding styles creating code that’s nearly impossible to decipher. And some times all that varying code comes from me alone… :-) Here is a nice, simple set of CSS coding guidelines. Some may seem odd at first, but get to the sample, and it all makes sense…

And now that we have our CSS all in order, let’s talk about a few WTF moments with CSS and HTML.

By why leave JavaScript out, especially when it has so many WTF moments? Here are just a couple, relating to comparing objects.

And now that we have our entire HTML/CSS/JS house in order, let’s stash them all in the browser’s localStorage so we have fast loading pages on all our lovely devices…

A quick explanation of the CrowdPilot home page, with all its animated SVG glory!

And while we’re making totally cool SVG stuff, how about using dynamic content from WordPress, to create SVG text nodes, so they can be responsive? Say what??

Use CSS animations much? I have started using them a lot as progressive enhancements to UIs (background fades and scaling for updated content, scaling for hovering over panels, etc.), and they’re a really nice touch. Not at all required or necessary, just polish. But how do the various CSS animation thingies compare, performance-wise?

And finally, did you just say sweet-and-spicy bacon popcorn????

Happy reading,
Atg

Germany: Two Years and Counting…

I’m a little late getting around to this, but somehow it has now been more than two years since Marianne, Schatze and I hurriedly packed our belongings and hopped on a plane bound for Germany.  Not much, and yet many things, have changed since then…

Marianne’s job, the reason we were able to move over here in the first place, has changed from a government employee to a civilian contractor. And while she still works at the U.S. military hospital, and still gets to help the military and their family members, she now works in a completely different therapy clinic, with completely different patients: she no longer works specifically with hands, but now works solely with TBI patients, which requires quite a different skill set and approach. Much credit to her for a) making a change that would allow us stay over here longer, and b) for just hopping from one speeding train to another, without missing a beat; she continues to impress.

As for me, I still work at Netbiscuits, but the company recently went through a pretty dramatic, and traumatic, downsizing, one I was quite happy to have survived. But 39 friends and co-workers were not so lucky. Many of them have had to move to other geographical regions to find work, and nearly all of them speak German fluently. So finding work would have certainly been a lot tougher for me. And with this downsize, came a role change for me: my team was shuffled redefined, now supporting a completely different product, so there is much for me to learn as well.

But with all that shake-up, we both still work more-or-less in the same place, we still live in the same place, and we still have the same cat (now 17 years old, Schatze is still bounding up the stairs each night to cuddle and watch TV with us).

Quite naturally I think, we were initially bewildered and beguiled by our new homeland. Everything seemed so new and different, at the same time exciting and intimidating. We soon found ourselves completely enamored with the people and much of their way of life.

Happily, all of the things we immediately fell in love with have remained dear to us: we still love Weihnachtsmarkts and Glühwein; we still love BBQing and hanging out in our back yard; we still love driving on the Autobahn; we still avoid as much of “Little America” (as this area is sometimes called) as much as possible; we both still get an occasional chuckle from the word Ausfahrt

Sadly we both still rely far too heavily on Sprechen sie Englisch, bitte?… We have tried a couple classes, we have tried independent study, and it just will not stick. Our last consideration is a private tutor; we shall see.

Also quite naturally, I think, after a bit of time passes, we have also come across a few things that we’re not so crazy about, too… Such as:

  • The German culture holds very tightly to the concept that Sunday is a day of rest, so nearly all businesses are closed on Sunday. Some restaurants might open for dinner, but all gas stations, grocery stores, etc. will be closed all day. Sunday is also a “quiet day”, which is actually quite nice, but also means no mowing the yard or anything else that makes loud noise. This means everyone has to do everything they need to get down on Saturday… Which tends to make for mad-houses! This philosophy can actually be expected if you look at the German calendar, which starts on Monday and ends on Sunday, so you can easily see how Saturday would almost feel like the last workday, and Sunday, as the final day of the week, when you would rest. But personally, after working all week, some times I would rather rest on Saturday, then use Sunday to start getting ready for the upcoming week. At any rate, that’s the way it is, so that’s the way it goes.
  • While I cannot hardly complain about the number of holidays I get working for the German economy, it is frustrating that some of my holidays (which I read as “day-off from work”) fall on Saturday or Sunday. Where the American system might let the holiday happen there, we would get either the preceding Friday, or following Monday, off of work; here, I simply lose that holiday…
  • But by far the most frustrating thing we are still trying to come to grips with, and maybe it’s because it runs so counter to everything else we have come to expect from the normally orderly German people, is the complete and total lack of respect for “the line”… Where Germans are typically meticulous about passing on the left then moving as far-right as possible, or about keeping their house and yard in order (they even sweep the sidewalks and gutters in front of their houses!), when it comes to queuing up for the bus, or at the bakery counter, or any-other-place-where-people-have-to-wait-for-something, it becomes a horde… So we simply learn to “gently” maneuver ourselves into our proper place, and “go with the flow”…

But these new-found frustrations also come with new-found loves:

  • While those Sundays do mean that we cannot get some of our chores down when we feel like it, they are also fantastic days to be out-and-about: The Germans are rabid about their walking and hiking, and Sunday is the chief day to do it! There are hiking trails all over the countryside here, and regardless of age or weather, on any given Sunday, you will see individuals with their dog, couples, even entire families, dotting the hills and horizons, out getting their fair share of exercise & whatever weather Mother Nature has decided to offer that day. It is pretty impressive and inspiring.
  • And when one finishes that Sunday hike, one partakes in another new-found, newly-in-love-with tradition: kaffee und kuchen… This is mostly for the older crowd now, it seems, but “since Marianne and I love tradition so much…” we occasionally participate… :-) This ritual happens on Sunday, somewhere between 14:00-16:00, at your favorite Konditorei oder Bäckerei (and thanks to the gracious German neighbors that introduced us to this tradition, ours is Café Schäfer (what up, Schaefers?! :-) )), where one surveys the pastry counter, carefully selects exactly the right pastry for today, then sits and waits for it, and the accompanying hot beverage, to be brought to your table. Then you sit in wonderful bliss, enjoying the relaxing sweets with friends and/or family. Or by yourself, I’m sure, would also work just fine… ;-)
  • Which connects nicely to another new-found love: German desserts.  Though we discovered this one pretty quickly, we have really come to love it as time marches on. We often hear Americans complain that the desserts here are not sweet enough, but that is exactly what we have come to love! The desserts are not too sweet, they are simply perfectly sweet… No, sorry, if you disagree, you are simply wrong… ;-) But seriously, for a country often thought of as Bier und Bratwurst, the pastries here are as good as anywhere, they never have that sickeningly-sweet taste, and never have that chemical-sweet taste you can only come to recognize in American foods after you’ve been away from it for a while.
  • The last item I will add to this list is not related to any of the above-mentioned items, but goes back to one of our earliest loves: the Autobahn. While we still greatly love the freedom and personal-responsibility the Autobahn provides, and while we are both still completely blown-away at how the culture passes on the left, then shifts as far-right as possible as fast as it is safe to do so, we have come to recognize more and more that some drivers will jump into the passing lane seemingly without even looking… I will grant you, learning to drive at 130-160kph and properly gauge when it is safe to pass is not easy, especially when cars in the passing lane could be approaching you at speeds of up to 180-200kph or more… But more than once I have been driving (fast-ish) and had people pull out in front of me where I had to practically slam on the brakes… This has proved frustrating enough (and nerve-wracking enough), that for the most part we have slowed our speeds down to more match the slower traffic. And while this makes sense, and is safer… it just isn’t as much fun… But again, there it is, so there we are…

And so that brings to close another update of our lives living in Germany. Friends, family, we miss you all dearly, and think of you all often (regardless of how infrequently you actually hear that from us, we know we suck at keeping in regular contact…). We are having a great time, and it will end over here one day, bringing us back home, but until then, we are still having a blast traveling and getting to know all the various cultures, foods, people, and places here; it is magical how different we all are, and yet how absolutely identical we can all be: a smile and a laugh is exactly the same, no matter where we’re been.

So, a few of you have come to visit, but so many more have not. If you can make the way, we have plenty of space, and would love to be your host. While we are not in one of the hottest tourist locations, we are pretty central to several destinations that could be easy day-trips, and we’re obviously happy to tour around as much as our work schedules allow. We’re also quite open to traveling elsewhere and meeting people, if you find yourself heading somewhere close, but not exactly here

Okay, enough for now, alles Gute, tschüss!

Atg

Today’s Readings

By now you likely know what a waterfall chart is, but if not, here is not only a great primer, but also a great deep-dive into the bits and pieces of a waterfall chart; all of it required knowledge if you plan to debug performance.

And speaking of waterfall charts, here’s Paul Irish’s keynote from Fluent 2014, where he explains the Speed Index, how the HTTP process works, and how all that affects the lines on a waterfall chart… All in less than 25 seconds… Whew!

I like reading posts from a lot. His writing is just easy to read, but filled with good examples of good designs & development. Thus, I present his approach to creating a Pinterest-like (or Masonry-like) gallery using only CSS. (Yes, it uses flexbox, but also provides solid CSS-only fallbacks.)

And speaking of flexbox, another nice run-down of how to implement spanning and flowing boxes.

Moving beyond flexbox, we see that Chrome has made its lesser-heard-of cousin grid available, albeit under the “experimental features” flag. (And if you thought flexbox support was bad, wait until you see grid support… Way to go IE!

And as long as we’re talking about CSS from the future, how about CSS Regions? While support here is as you might have expected, at least there is a nice-looking polyfill!

An open-source CDN… What a freaking fantastic idea! Thanks to for sharing this find!

Interesting take on SVG background generation. Note that clicking the “Generate” button takes you to an editing screen where you can change all kinds of aspects to create completely SVGs that look completely different from the initial sample.

There is a lot of nay-saying going on about the usefulness of a glow-in-the-dark bicycle, primarily that it is a product of fear-mongering or that “no color can make you visible to someone that’s not looking for you”, but to me, anything that provides a little better chance of not getting hit, makes it worth while. Great concept, and interesting idea, I think.

Like most Smashing Magazine articles, this one’s lengthy, but it speaks about a subject dear to my heart: actually planning a responsive or mobile site, not just throwing something together, chopping out bits from “the real site”, or reducing your content to the point of being nearly a worthless experience. I’m so sick of getting mocks for desktop layouts, with notes like “and make it work on all devices” (“devices”, not even “screen sizes”).

Exploding cells in your brain certainly doesn’t sound like a good thing, but if the cells being exploded are cancer cells, it starts sounding not so bad… Will be interesting to see the results of further research.

And finally, when was the last time you had to copy a file to a portable external drive? Now where did I put that USB… Next time, just grab one of these 32GB post-it notes

Happy reading,
Atg

Use a shortcode to add a vcard to your WordPress content

I got no time for your rambling, old man, show me the code

The rambling

Does anybody remember vcards? Does anybody still use them?? Does anybody still care??? And why are vcards called hcards, or is it the other way around??

Anyhow! I guess the only question that really matters is: Does Google care? It would appear that they do.

I know Microformats have lost some of their shine to the now-favored (at least by Google) microdata, but they both are still mined, as are RDFa apparently, for search results, and who knows what else.

I use them pretty regularly, mostly just for people’s names when I mention them in a post, but if I’m working on a client site that renders data that can be marked-up with “rich snippets” (as the collection of these meta-mark-ups are known), I add them. I suppose mostly because I’m kind of a geek, but also because I feel like “why not, someday to someone, it just might be useful.”

So, to the point of this post! It didn’t take long for me to get tired of trying to remember how to properly structure vcards, so I went on the hunt for a WP Plugin that would let me enter the data I wanted to add. And of course, they exist.

Or at least they did… The only one I can find reference to now is Micro Anywhere, which adds a button to your editor toolbar. When clicked, a panel appears allowing you to enter data into form fields, and, based on what you enter, an appropriate vcard is inserted into your content. However… Micro Anywhere assumes I want a div, which I rarely do, so I had to manually go and change all the divs to spans. Annoying.

Then I stumbled on Post Snippets, which allowed me to insert a boilerplate-version of a vcard, then manually add the person’s details. Again, still doing manual editing, though at least this time I was editing content not code, but then I installed a color scheme plugin for the editor, and the Post Snippet button no longer appears in the “Text” edit mode… Annoying, again.

So, now to the point of this post!

The code

This is primitive, but it suits my needs. I will likely push it to GitHub at some point, and perhaps even enhance it to handle more data. But for now, what I need is a vcard that displays first and last name and links to the person’s URL.

To do this, I created the following function:

if (!function_exists( 'atg_vcard_shortcode' )) {
	function atg_vcard_shortcode( $atts ) {
		return '<span class="vcard" itemscope="" itemtype="http://data-vocabulary.org/Person"><a class="url" itemprop="url" href="'.esc_attr($atts[2]).'" rel="v:url"><span class="fn n" itemprop="name"><span class="given-name">'.esc_attr($atts[0]).'</span> <span class="family-name">'.esc_attr($atts[1]).'</span></span></a></span>';
	}
}
add_shortcode( 'vcard', 'atg_vcard_shortcode' );

Then use that function thusly:

[vcard Aaron Grogg http://aarontgrogg.com/]

And get output like this:

<span class="vcard" itemscope="" itemtype="http://data-vocabulary.org/Person">
	<a class="url" itemprop="url" href="http://aarontgrogg.com/" rel="v:url">
		<span class="fn n" itemprop="name">
			<span class="given-name">Aaron</span> 
			<span class="family-name">Grogg</span>
		</span>
	</a>
</span>

Über simple, the shortcode simply sends three variables (they can also be wrapped in single- or double-quotes, if either name has a space in it) to the vcard shortcode. The vcard shortcode calls my function atg_vcard_shortcode. That function returns a string that inserts the three variables from the shortcode into the vcard mark-up I created, which is a mash-up of microdata & Microformats.

Easy-peasy, super-simple, feel free to harvest. Put the function part in your functions.php and enter the shortcode into any Post of Page, and you get nice, valid, “useful” rich snippets for your users (and Google) to consume.

Happy vcarding,
Atg