Tags: github

35

sparkline

Wednesday, December 6th, 2017

The Times | data viz catalogue

Data visualisations created for The Times, complete with code.

Wednesday, November 29th, 2017

edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).

Monday, May 1st, 2017

Springer Nature frontend playbook: house style guide

I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.

Thursday, April 27th, 2017

SpeedTracker

This is a great free service for doing a bit of performance monitoring on your site. It uses WebPageTest and you do all the set up via a Github repo that then displays the results using Github Pages.

It won’t give you the power or control of Calibre but it’s a handy option for smaller sites. Here are the results for adactio.com running on a Moto G over 3G.

Obrigado, Eduardo!

Tuesday, April 25th, 2017

Replacing Disqus with Github Comments · Gazoo.vrv

If you’re using Disqus to power the comments on your blog, you might like to know that it’s pulling on loads of nasty tracking scripts. Bad for privacy and bad for performance.

Monday, April 3rd, 2017

adactio/ama: Ask @adactio anything!

I’ve made one of them there “ask me anything” things so that you can ask me, well …anything.

Friday, July 8th, 2016

Original Apollo 11 guidance computer (AGC) source code.

Margaret Hamilton’s code after scanning and transcribing.

The code is commented too. But there might still be issues.

Monday, October 12th, 2015

The Be Nice AMP Project

An alternate version of AMP HTML that works in more parsers and user agents.

The AMP project have “A new approach to web performance” making your website dependent on Google. The Be Nice AMP Project follow the old approach: Make your site fast following best practice guidelines and be independent of Google.

Monday, March 23rd, 2015

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

Wednesday, March 4th, 2015

yurivictor/typebetter

A really nifty little bit of JavaScript that converts to smart quotes, apostrophes, ellipses, and em dashes.

(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)

Monday, July 28th, 2014

GitHub’s CSS · @mdo

Mark Otto talks through the state of Github’s CSS and the processes behind updating it. There’s a nice mix of pragmatism and best practices, together with a recognition that there’s always room for improvement.

Wednesday, June 11th, 2014

Comparing two ways to load non-critical CSS

Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.

Monday, February 17th, 2014

jrcryer/generator-pattern-primer

Nice! A Yeoman generator for scaffolding your own pattern primer.

(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)

Sunday, December 8th, 2013

An Hour of Code spawns hours of coding

Here’s a heartwarming tale. It starts out as a description of processing.js project for Code Club (which is already a great story) and then morphs into a description of how anyone can contribute to make a codebase better …resulting in a lovely pull request on Github.

Friday, May 17th, 2013

Progressive enhancement in the Government Service Design manual

A nice description of progressive enhancement by Norm, as applied at GDS.

Friday, April 26th, 2013

joshje/svg-for-web · GitHub

If, like me, you’ve been using the “export to SVG” plugin for Fireworks and then opening up the resultant file to trim it down, Josh has got you covered: here’s a version of “export to SVG” that will result in much slimmer files.

Sunday, January 6th, 2013

phuu/sparksvg · GitHub

Remember when I made that canvas sparkline script? Remember when Stuart grant my wish for an SVG version? Well, now Tom has gone one further and created a hosted version on sparksvg.me

Not a fan of sparklines? Bars and circles are also available.

Sunday, December 30th, 2012

Canvas sparklines

I like sparklines a lot. Tufte describes a sparkline as:

…a small intense, simple, word-sized graphic with typographic resolution.

Four years ago, I added sparklines to Huffduffer using Google’s chart API. That API comes in two flavours: a JavaScript API for client-side creation of graphs, and image charts for server-side rendering of charts as PNGs.

The image API is really useful: there’s no reliance on JavaScript, it works in every browser capable of displaying images, and it’s really flexible and customisable. Therefore it is, of course, being deprecated.

The death warrant for Google image charts sets the execution date for 2015. Time to start looking for an alternative.

I couldn’t find a direct equivalent to the functionality that Google provides i.e. generating the images dynamically on the server. There are, however, plenty of client-side alternatives, many of them using canvas.

Most of the implementations I found were a little heavy-handed for my taste: they either required jQuery or Processing or both. I just wanted a quick little script for generating sparklines from a dataset of numbers. So I wrote my own.

I’ve put my code up on Github as Canvas Sparkline.

Here’s the JavaScript. You create a canvas element with the dimensions you want for the sparkline, then pass the ID of that element (along with your dataset) into the sparkline function:

sparkline ('canvasID', [12, 18, 13, 12, 11, 15, 17, 20, 15, 12, 8, 7, 9, 11], true);

(that final Boolean value at the end just indicates whether you want a red dot at the end of the sparkline).

The script takes care of normalising the values, so it doesn’t matter how many numbers are in the dataset or whether the range of the numbers is in the tens, hundreds, thousands, or hundreds of thousands.

There’s plenty of room for improvement:

  • The colour of the sparkline is hardcoded (50% transparent black) but it could be passed in as a value.
  • All the values should probably be passed in as an array of options rather than individual parameters.

Feel free to fork, adapt, and improve.

The sparklines are working quite nicely, but I can’t help but feel that this isn’t the right tool for the job. Ideally, I’d like to keep using a server-side solution like Google’s image charts. But if I am going to use a client-side solution, I’m not sure that canvas is the right element. This should really be SVG: canvas is great for dynamic images and animations that need to update quite quickly, but sparklines are generally pretty static. If anyone fancies making a lightweight SVG solution for sparklines, that would be lovely.

In the meantime, you can see Canvas Sparkline in action on the member profiles at The Session, like here, here, here, or here.

Update: Ask and thou shalt receive. Check out this fantastic lightweight SVG solution from Stuart—bloody brilliant!

Thursday, September 20th, 2012

Responsive Measure: A jQuery plugin for responsive typography

Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.

Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).

Sunday, June 24th, 2012

mattdiamond/fuckitjs

This is possibly the most horrifying piece of JavaScript ever written. The license is good too.