The popular open-source contract for web designers and developers by Stuff & Nonsense
- Originally published: 23/12/2008
- Revised date: 15/12/2013
- Original post
| gifify() { | |
| if [[ -n "$1" ]]; then | |
| if [[ $2 == '--good' ]]; then | |
| ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png | |
| time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif | |
| rm out-static*.png | |
| else | |
| ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif | |
| fi | |
| else |
| /* | |
| * LilyPad tutorial: sensing (sensors) | |
| * | |
| * Reads data from a LilyPad light sensor module | |
| * and then sends that data to the computer | |
| * so that you can see the sensor values | |
| * | |
| * Original: http://web.media.mit.edu/~leah/LilyPad/08_sensors.html | |
| */ |
| // Define a breakpoint. outputs a media query: | |
| // | |
| // @include breakpoint($wide) { | |
| // stuff | |
| // } | |
| // | |
| // ... becomes ... | |
| // | |
| // @media (min-width: 502px) { | |
| // stuff |
| .clip--hero { | |
| margin: 0 auto; | |
| .thumb { | |
| width: 100%; | |
| } | |
| // Leave room for title/desc on desktop. | |
| @include eq('desktop') { | |
| .thumb { |
| Command | URL | Example | Comment | |
| --------+-----------------------------------------------------------------+---------------------+------------------- | |
| gh | https://github.com/%s | gh rupl/unfold | GitHub repo | |
| npm | https://www.npmjs.com/package/%s | npm gulp-sass | npm module | |
| wpt | http://www.webpagetest.org/?url=%s | wpt example.com | WebPageTest.org | |
| psi | https://developers.google.com/speed/pagespeed/insights/?url=%s | psi example.com | PageSpeed Insights | |
| acme | https://client.atlassian.net/browse/ACME-%s | acme 1234 | Clients' tickets |
| SELECT node.title, body.body_value | |
| FROM node | |
| LEFT JOIN node_revision ON node.vid = node_revision.vid | |
| LEFT JOIN field_revision_body AS body ON node_revision.vid = body.revision_id; | |
| -- WHERE node.type = 'whatever' | |
| -- etc |
| $ curl -i "https://github.com/team-sass/breakpoint" | |
| HTTP/1.1 301 Moved Permanently | |
| Server: GitHub.com | |
| Date: Mon, 20 Jul 2015 11:42:31 GMT | |
| Content-Type: text/html; charset=utf-8 | |
| Transfer-Encoding: chunked | |
| Status: 301 Moved Permanently | |
| Content-Security-Policy: default-src *; script-src assets-cdn.github.com collector-cdn.github.com; object-src assets-cdn.github.com; style-src 'self' 'unsafe-inline' 'unsafe-eval' assets-cdn.github.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com; media-src 'none'; frame-src 'self' render.githubusercontent.com gist.github.com www.youtube.com player.vimeo.com checkout.paypal.com; font-src assets-cdn.github.com; connect-src 'self' live.github.com wss://live.github.com uploads.github.com status.github.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com | |
| Public-Key-Pins: max-age=300; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; pin-s |
| // Paste this into your console to give it a try! | |
| (function($){ | |
| $(window).resize(function() { | |
| $('<img src="http://placekitten.com/g/' + (window.innerWidth - 100) + '/' + (window.innerHeight - 100) + '">') | |
| .css({'position': 'absolute', 'top': '50px'}) | |
| .appendTo('body'); | |
| }); | |
| })(jQuery); |
| <ul> | |
| <li>1.0 | |
| <li>2.0 | |
| <ul> | |
| <li>2.1 | |
| <li>2.2 | |
| ^ this would render incorrectly | |
| VS. |