Tobias Ahlin / Blog

@tobiasahlin

10 Chart.js example charts to get you started

Read more

Chart.js is a powerful data visualization library, but I know from experience that it can be tricky to just get started and get a graph to show up. There are all sorts of things that can wrong, and I often just want to have something working so I can start tweaking it.

This is a list of 10 working graphs (bar chart, pie chart, line chart, etc.) with colors and data set up to render decent looking charts that you can copy and paste into your own projects, and quickly get going with customizing and fine-tuning to make them fit your style and purpose.

Read more

Google Web Font Inspiration with TypeSource

Read more

If you’ve been looking through Google’s directory of Web Fonts in search for fonts to use in your next project, you might have felt your inspiration quickly drain. It can be difficult to imagine how a font would look in use when you’re left with a long list of black text on white.

I built Typesource to make it easier to find and match Google Web Fonts. I’ve carefully crafted each example, exploring different styles, combinations, and color schemes in every composition. In addition to the feed of inspiration, the HTML/CSS is available for all examples, so you can copy and paste the code into your project and quickly get started with your web type compositions.

Read more

Copy Lorem Ipsum from your Menu Bar with Loremify

Read more

Kalle Persson and I just built and released a small utility app for OS X. Loremify is a free mac app to quickly copy Lorem Ipsum to your clipboard. It lets you wrap the dummy text in html or markdown, specify the amount of text, and copy it to your clipboard—all in one click. It sits in your OS X menu bar, and it’s available on the App Store.

Read more

Common Mac OS X Cursors as PNGs

Read more

If you’re ever creating user interface mockups for desktop apps or web apps, you’ve likely been looking for mouse cursors to demonstrate different ways of interacting with your design. I have, at least, but have had a hard time finding pixel perfect PNGs.

I dug around in OS X’s System Library and managed to find the vectors used for rendering the most common cursors (including for pointing, drag and dropping, resizing, etc.), and exported them all as PNGs. If you can’t find the cursor you’re looking for in the table below, I’ve prepared a zip with all cursors.

Read more