The second life of SVG

Scalable Vector Graphics (SVG) have been around for a while now. As the name suggests, it is a vector image format, ie, SVG images can be resized at no quality loss, just like fonts, and defined in plain text, in an XML format. Back in the early 2000's, it's support was very spotty, and early versions of Internet Explorer just snubbed it... so it basically was a non-starter for web development. It sailed through most of the decade, essentially unnoticed to the greater public, until the stars aligned Google put it on the spotlight.

What happened to SVG in the past decade?

• Increased need for scalable graphics, independent of 3rd party? The boom of Internet connected devices created a jungle of screens of all shapes and sizes, likely making a workable vector image format much more appealing. Format specifications started evolving at a steadier pace, with version 1.1 being released in 2011, and version 2 underway.
• SVG Support vastly improved, to the point it is now a perfectly fine option on all major browsers.
• Other technologies have matured, such as CSS and javascript, to the point of leveraging the XML / txt nature of SVG by integrating it seamlessly to the structure of an HTML document. SVG elements can now be manipulated like any other HTML tags, styled, used for animation or even created on the fly, while retaining its sweet scalability.

Here's a sample SVG-based animation mimicking the type of skill cooldown commonly found in RPG games like World of Warcraft.

See the Pen EwoxL by Dod (@VoodooDod) on CodePen.

EDIT: Here's another sample showing SVG in action, using its native support for animations.

This isn't to say SVG has become the hammer to hit all your web nails with. When it comes to web drawing, HTML5 specs include canvas, essentially a drawing surface which is, in most cases, hardware accelerated. But as often in new technologies, it's not an exact overlap: for one, it's raster based, ie, drawn to-the-pixel for better rendering, but not resizing friendly. It is also very primitive in that all the drawing needs to be coded (SVG images can be vased in a separate file), and it doesn't integrate to HTML the way SVG does: what's in a canvas is not, for instance available to CSS styling or DOM events (click, roll-over, etc.); in short, it can make for great performances when used right, but becomes very tedious for the most basic tasks.

So SVG got a massive usability bump, but it still hasn't gained the level of visibility enjoyed by HTML5. While it can perform very similar functions to HTML5 canvas, they are not quite redundant either. As a rule of thumb, if you are using a limited number of shapes, and a big (or scalable) drawing area, SVG is the most convenient way to go; if you are dealing with picture perfect rendering, or with hundreds of animatable images, canvas is probably the only viable option to squeeze enough performance out of your browser. Either way, many javascript libraries exist to smooth the learning curve. I haven't dug too much into canvas-based libraries, but for SVG, I'd wholeheartedly recommend you to look into Raphael.js.

All things coconut

If I say "coconut", what comes to your mind? If you had asked me that very question about a month ago, my top 2 would probably have looked like:

These days however the picture has changed quite a bit. Since I decided to try out the paleo diet, I've had to give a serious look at my fridge and pantry, and still came short on occasions. What's the relation you say? Well it turns out coconut was the answer to most of my problems. Obviously not the only answer, since there are many alternatives in each case, but its ubiquity struck me, especially for something that seldom ever made it to my kitchen. A few cases in point below:

	One nemesis of the paleo diet is sugar, so cutting sugary drinks has been a priority. On a day-to-day basis, I did not find that to be so complicated; as for sport drinks, coconut water, while a bit over hyped, happens to be a very good alternative, packing plenty of electrolytes, and even better than water to keep you hydrated, if you don't mind the taste. It still comes with a decent amount of calories, so moderation! It could still add up.
Dairy products are a bit of a grey area for the paleo diet; purists apparently stay away from them, but overall they seem to be given a pass. With this said there are plenty of alternatives, such as almond milk, soy milk or... coconut milk! While richer than its water counterpart, its taste is mild (somewhat sweeter) and works great for cooking. Here's a paleo smoothie that now hits my blender every morning: 1 apple + 1 banana + 2 celery + 1/2 a cucumber + a fistful of kale + 1/2 a bunch of parsley + 1 squeezed lemon + a glass of coconut milk + a few ice cubes.
	Another nemesis of the paleo diet is grain / grain-based product. This turns out to be more of a bummer: no cereals, no dough, no pasta, no pizza, no cake nor cookies :'(  I didn't quite fathom this, until I realized there were options such as almond flour, chestnut flour or... coconut flour! What it really meant was more time cooking, assuming I really carved for a cake ^^ Here's another easy recipe variation I came up with: 2 eggs + 60g of sugar + 40g of coconut flour + 1/2 a glass of coconut milk + 40g of melted butter + some vanilla essence + couple pinches of salt + raspberries & blueberries (1 pack each) + cook for 20mn with some sugar atop + let it cool down and refrigerate.
The list wouldn't be complete without mention of coconut oil, though I personally didn't try it. As I understand it, it's not necessarily a healthier alternative to the more common olive or vegetable oil, but it is still supposedly better than butter or animal fat.

I also thought I might add 2 special mentions, so you can learn from my mistakes: coconut cream, and cream of coconut... I mistook them for one and the same, thus completely screwing up an attempt at Thai curry (shoulda coulda tasted it first!), but really, they are vastly different:

• coconut cream is essentially thickened coconut milk, so that its taste is just as mild, but creamy instead of watery; you could reasonably use either in a cooking recipe, if texture is not an issue.
• cream of coconut is a mix of coconut cream and cane sugar, in equal part... so it's massively sweet! You might use it to bake a cake or even in your pina colada, but well, not in a curry!

Icon font-ing

It is now common place that mobile device have favorable wind in their sails, and have become the dominant tool to consume web content. This isn't to say that good old desktop PCs and laptops are going anywhere soon: while they have been slowly giving way to their mobile counterpart, they remain the unchallenged tool to produce content. And this leaves designers/developers with an interesting challenge: how to create content that fits everyone, in a jungle of screens of all sizes and shapes? This is, obviously, a vast topic to tackle in one post, but this is where I was coming from when I started tinkering with icon fonts.

As any MS Word user already knows, fonts are normally used for lettering. But what are they? Essentially geometrically simple representations, defined as combinations of vectors, ie, they don't carry any notion of size. This means they are designed to be resized at no quality loss, and tend to be fairly lightweight. A picture being worth a thousand words:

*

Great! But... why, then is this not standard on all picture formats? You can find a detailed breakdown here, but basically, vectorized images, when looked up close (no resize), tend to be too blocky / pixelated, while their rasterized counterpart are closer to picture perfect but degrade poorly when resized up; so it boils down to a balancing act between quality and file size.

For all things web, size matters, especially for a visitor on a data plan! And icons, the kind of low detail mostly geometrical symbols, meant to be recognizable at a glance (just like letters), are what vectorized images were designed for in the first place. Packaging them in fonts also provides a nice added value by easing up the download / cache process (only 1 file to handle). But before looking into the gory details, what does that look like in practice? I made a canonical sample below, extracted from the very best demo I found on the web, to make it more inspection friendly (props goes to Chris Coyier, with the related post).

See the Pen iuxEs by Dod (@VoodooDod) on CodePen.

If you made it this far, you will probably be interested to know how to package your own images! As it happens, it is surprisingly easy with very little graphic design background required (full disclosure: I have none); here's a step-by-step:

• Gather a suitable image set: remember these images will be vectorized, so be aware that a rasterized image (bitmap) with excessive details may look quite bad after conversion. Also, fonts store shapes, not colors! Turn your images to black and white (no greyscale) to get a feel of the final result; in the above sample, I used an image from the excellent 700+ RPG Icons collection by Lorc, posted there in the PNG format.
• Vectorize your images: if you started out with a vector format (say SVG), you're good to go. Otherwise, check out potrace by Peter Selinger, an outstanding command-line conversion tool. In addition to outright conversion, it also allows to perform some transformations, and it lends itself nicely to batch operations; for instance, I batch converted Lorc's icons and inverted them in the process. It's worth playing with the various options for complex images to improve quality.
• Compose your font: several online tools automate this process for you, but IcoMoon stood out in the crowd, especially since it is free to use, and rights are waived for your own images. IcoMoon requires the files to be provided in SVG (supported by potrace), and produces a ready-to-use package which comprises various font formats, leveraged by a generic CSS file using them as fallbacks to ensure broad browser support, and a sample web page demonstrating usage, in the form of a dictionary for your icon font. I generated this on Lorc's collection, feel free to check it out.

Enjoy!

EDIT: this post covers some of the same ground but focuses more on the creation process, with tools such as Inkscape.

* "Bitmap VS SVG" by Yug. Licensed under Creative Commons Attribution-Share Alike 2.5 via Wikimedia Commons

Dod Goes Paleo

I've always had a knack for sports. I run fairly regularly (including 2 NYC marathons), swim during the winter season (when my odds of having a lane for myself are higher) and play tennis, where my partners know me for my spotless technique my athletics on court. So it is somewhat frustrating when my wife describes my belly as "under control"... especially since it does look that way. In fairness, I've been willing to push myself doing a lot of cardio, but uncompromising with my eating... I did grow up in France after all!

But it has dawned on me that I can't outrun my eating habits. I had already ruled out anything along the lines of miraculous pills, wacky proto-food or magical sporting accessories; I also thought somewhat unrealistic (for me) to start counting calories or cram any significant additional sporting habit (a day only lasts so long). And so I went roaming about the web, placing my tall order to Mr Google, rewording a few time. Google feels sometimes like it has a life of its own, and I did sense some twist of dark humor when it eventually zeroed in on Nerd Fitness... but it so happens that it's a perfectly legit website, with some interesting nuggets at that. While a lot of it has to do with workout routines and the like, a surprisingly strong emphasis is made on the diet, going as far as stating that "your diet is at least 80% of your success or failure", leaving workouts to a near cosmetic 20%. Nothing scientific there, of course, but it did catch my attention, and I ultimately came away with 2 points stressed by the author:

• Cardio is one of the least efficient methods of burning calories. Shorter, but more intense interval runs would be more beneficial, though still not as effective as strength training. So much for all the running ^^
•  A "paleo" diet is recommended as a great way to trim down by avoiding some foods, but with no real restriction on quantities / calorie count; to make a long story short, if a caveman couldn’t eat it, neither can you. As the reasoning goes, our ancestors strove for most of the past couple hundreds of thousands years as hunter-gatherers, until agriculture developed about ten thousands years ago; so grain-based food, preeminent today, has become common in man's diet only very recently (from an evolutionary perspective), and our bodies haven't yet adjusted to that steady supply of rich food.

I honestly can't say how accurate this is, but the website does have a pretty accurate take down of my own experience, and it promotes the kind of balance I could manage. So I've decided to give it a shot for at least a couple of month, and see the outcome!

Converging to HTML5

I haven't had, in so far, much exposure to HTML5. There are some explanations to that: one is that my jobs in most the past few years have had me work on thick clients or back ends, the kind of heavy lifting done against proprietary systems / architecture, targeted to internal customer only; another is that the specs on HTML5 are still evolving, and in the corporate world, most of the existing body of work rely on established solutions (or at least perceived so). Still, the web has become ubiquitous, and I had my fair share of ASP .NET, peppered with javascript / JQuery and CSS, just not the bleeding edge kind of project.

Increasingly, though, the HTML5 specs are taking shape, and javascript and CSS have matured in amazing ways since the days where I did full time web development (2004!). And while I'm getting seriously curious, there are 2 other converging factors that are also getting me there:

• If you are a bit familiar with the .Net scene, it's unlikely you've missed the ongoing community drama that surged with (to put a timeline) the advent of Windows 8, and signs pointing at a shift of focus towards HTML5...  more than raising a few eyebrows, Microsoft's mighty fumble on the future of the .Net platform lead to posts like these. If you bought into the technology for a living, that's quite some incentive to diversify.
• While I still revere my almighty desktop PC, there's no denying mobile devices have become dominant in the computing market place. It's now more likely for a non IT person to own a laptop than a desktop, and fairly common to own both a phone and a tablet. But it is, for IT people, such a Babel tower, where making an hybrid app running everywhere (or at least on iPad/iPhone, Android, and winRT) has become a Holy Grail; interacting with the device requires platform specific layers so far, but a number of solutions have otherwise emerged to try to keep code bases unified, to name a few:
• Xamarin: a .Net C# based development tool that lets you code your app in Visual Studio (or not) to have the compiler do the cross-platform heavy lifting; UIs still need to be coded separately though.
• DevExtreme: a proprietary solution from a company (DevExpress) historically committed to Microsoft products. It leverages Visual Studio as well, but relies on a combination of HTML / javascript / CSS for development, resorting to a 3rd party library (PhoneGap) for interactions with the device. Interestingly, it provides conditional stylesheets to emulate a native look and feel, and packages the entire application so that it installs just like a native app.
• Appcelerator: an open source XML / Javascript based solution, which compiles to native target code; its company has become the largest third-party app publisher on the Apple store and Android store
• Adobe Air: With the fall of Flash on Mobile devices back in 2011, with HTML5 as the obvious successor, Adobe side-stepped the problem of having a browser hosted plugin and came up with it own solution, using a side install on one hand, and relying on ActionScript (its legacy proprietary language), HTML, CSS, JavaScript on the other.
• Rho Mobile: Ruby / HTML / javascript / CSS based solution
• ...

See a pattern there? While this conveys a feel a bit reminiscent of the browsers' war of the late 90s, there seem to be a fairly clear trend towards the HTML / javascript / CSS trifecta for mobile cross-platform development.

Post #0

My friends call me Dod. Since you made it to my small corner of the web, you're welcome to it! Nothing to do, by the way, with the good old Day of Defeat (I get that a lot), just an actual diminutive that stuck from my teenage years. I live in the New York area these days, but I grew up in France so if you're looking for the reason for my odd figures of speech, look no further. I'm a programmer by trade, a decent one I believe, though it's a vocation that came to me in the late, fed by a healthy dose of Cartesian logic a nerdy fascination for gadgets and computer games. While most of my school days were spent on open systems (NetBSD mostly), I started out as a web developer using classic ASP (yes, VBScript), and moved on to embrace C# and the various iterations of the .Net framework.

So what got me to start this up? I find myself often popping up with ideas, things to do or to dig up, but somehow life always seems to get in the way, and they come to pass. So this starts up for me as an experiment; I'm making the bet that getting outside of my comfort zone, writing down what's going though this mind wandering of mine and giving it some structure will make something good come out of it. It's a process, and I think the act of sharing may help too.

What's to be expected on this blog then? Well this may cover a vast array of topics, but this is clearly work in progress. Obviously, there will be some nerdy stuff, computer / programming and the like, but I also have a keen interest in sporty topics, food/cooking, reading and traveling. Expect any of this to pepper the geeky stuff at any time!