I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).
| // Looks an element up by CSS selector and keeps it centered in the viewport on window resize | |
| // Useful for testing responsive versions of specific DOM elements | |
| // if jquery isn't loaded on the page, paste this code into the console first to load it: | |
| var jqURL = 'http://code.jquery.com/jquery-latest.min.js'; | |
| var jqscript = document.createElement('script'); | |
| jqscript.type= 'text/javascript'; | |
| jqscript.src = jqURL; | |
| document.head.appendChild(jqscript); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> | |
| <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' /> |
| body { | |
| margin: 20px 0px 0px 50px; | |
| } | |
| .formattext { | |
| text-align: right; | |
| } | |
| .formatresult { | |
| text-align: left; |
So you're using gistup to create gists (and blocks) from the command line. If not, see this tutorial for a quick overview.
And now you want to add thumbnails to your gists so that your blocks portfolio looks all pretty, right. How?
To have a thumbnail associated with your gist you need to create a 230x120
pixel PNG image file named thumbnail.png and include this at the top-level of
your gist's repo (generated by gistup).
The main trick is in finding an appropriate image and then right-sizing it for
the 230x120 dimensions that the blocks site expects your thumbnail.png to
| license: gpl-3.0 |
| (function() { | |
| var π = Math.PI, | |
| degrees = 180 / π, | |
| radians = π / 180, | |
| ε = 1e-15, | |
| circle = d3.geo.circle().angle(90); | |
| d3.geo.voronoi = function(points, triangles) { | |
| if (arguments.length < 2) triangles = d3.geo.delaunay(points); |
| license: gpl-3.0 | |
| redirect: https://observablehq.com/@d3/zoom-to-bounding-box |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>d3 geo map</title> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| border: 1px solid #ccc; | |
| } |
| license: gpl-3.0 | |
| redirect: https://observablehq.com/@mbostock/time-zones |
