Host your own Google web fonts


The quick and easy way to host a Google Web Font is to link to Google’s hosted stylesheet for the font like this:

<link href=',latin-ext' rel='stylesheet' type='text/css'>

But if you want to host the font yourself, it’s a bit trickier. You can’t just download the fonts specified in the stylesheet because Google dynamically generates the stylesheet for your client browser. To ensure the right font type for the right browser, you’ll want to download all of the types available for the given font.

This link to the google-webfonts-helper provides “a hazzle-free way to self-host Google Fonts”. Check it out!

IBM Cloud Webinars

If you’re interested in IBM cloud offerings, a good source of information are the IBM Cloud Webinars. Register to attend an upcoming webinar or pick a recorded webinar from the archive. Topics include:

  • Getting Started on IBM Bluemix
  • Docker Containers
  • Web Applications
  • Internet of Things
  • Big Data & Analytics
  • Watson on Bluemix
  • API Management
  • and more…

Crunch! – a LESS editor and compiler that makes it easy

Less is a CSS pre-processor. It extends the CSS language by adding features that allow variables, mixins, functions and many other techniques that make your CSS more maintainable, themable and extendable. Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

One such tool is Crunch! It’s an extremely simple editor and compiler that can optionally minify the CSS output it generates. For a no-nonsense, get-the-job-done-quick solution, Crunch! can be a great addition to your toolbox. Check it out.


Living Language – IBM’s shared vocabulary for design

IBM Design

Recently I posted about Google’s visual design language, Material Design. Now, it seems that IBM Design has stepped in with their own shared vocabulary called, the Living Language. With new design centers in Austin, New York, Shanghai, Dublin, and Hursley, IBM has really been stepping up its design game. We’ve felt the impact recently with the Digital Experience software; the latest versions of IBM WebSphere Portal and IBM Web Content Manager are the slickest yet. Also, at Base22, we’ve been invited to provide our experience and feedback to the design team on several occasions. And yes – I’ve seen some of that feedback make it into the products.

I’m proud of IBM for the work they’ve been doing. They’ve recommitment to the value of design and the user-centered design process on a massive scale. They’re reaching out to real end-users, listening carefully to the feedback, and it’s starting to show. We salute you, IBM Design; keep plowing!

IBM Design's Living language

Awesome SVG

SVG, or Scalable Vector Graphics, is a XML-style markup driven vector graphic rendering engine for the browser. SVG is supported in every browser, except IE < v9 and Android < v3. Want to know more? Awesome SVG is a community curated list of awesome resources related to SVG.

Google’s new Material Design guidelines

Google Design

If the new Material Design from Google is to influence the design of all Google products, then its visual style and interactive metaphors have a good chance of influencing established web conventions. Google products are prevalent on so many desktops and devices that it’s reasonable to believe their look-and-feel will be influential – especially since they build upon the Flat Design trend that’s already become the new norm. Good designers know that following standard web conventions can help make products intuitive and easy to use. Perhaps it may be wise, therefore, for designers to take some cues from the stage that Google is now setting with these published guidelines.

Explore and master Chrome DevTools with this free course

Code School

School never ends for software developers. Ever! If you’re perfectly happy being mediocre, you can just sort of learn organically while you work. But if you want to be a bad-ass, then you’ve gotta be proactive in your studies. Luckily, there’s no shortage of really great tutorials and courseware out there. For Web Developers, I recommend this one, sponsored by Google, called Explore and Master Chrome DevTools. The course features 17 videos, which you can download for offline viewing. It also features over 75 interactive challenges, which are are assisted by the Discover DevTools Companion extension for Chrome.


Here’s what you’ll learn:

  • Chapter 1: Getting Started & Basic DOM and Styles
  • Chapter 2: Advanced DOM and Styles
  • Chapter 3: Working With the Console
  • Chapter 4: Debugging JavaScript
  • Chapter 5: Improving Network Performance
  • Chapter 6: Improving Performance
  • Chapter 7: Memory Profiling

For those of you who’ve been using Chrome DevTools for a long time and think you know all this stuff, I challenge you to go deeper. There are plenty of surprising little moments within the course that’ll make you go, “Oh, now that’s cool!”