This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.
To capture the video (filesize: 19MB), using the free "QuickTime Player" application:
| SSH_USER = 'root' | |
| SSH_HOST = 'www.example.com' | |
| SSH_DIR = '/var/www/html/www.example.com' | |
| desc "Build the website from source" | |
| task :build do | |
| puts "## Building website" | |
| status = system("middleman build --clean") | |
| puts status ? "OK" : "FAILED" | |
| end |
| /* | |
| Make the Facebook Like box responsive (fluid width) | |
| https://developers.facebook.com/docs/reference/plugins/like-box/ | |
| */ | |
| /* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */ | |
| #fb-root { | |
| display: none; | |
| } |
| /* | |
| * Takes provided URL passed as argument and make screenshots of this page with several viewport sizes. | |
| * These viewport sizes are arbitrary, taken from iPhone & iPad specs, modify the array as needed | |
| * | |
| * Usage: | |
| * $ casperjs screenshots.js http://example.com | |
| */ | |
| var casper = require("casper").create(); |
| # Change YOUR_TOKEN to your prerender token | |
| # Change http://example.com (at the end of the last RewriteRule) to your website url | |
| <IfModule mod_headers.c> | |
| RequestHeader set X-Prerender-Token "YOUR_TOKEN" | |
| </IfModule> | |
| <IfModule mod_rewrite.c> | |
| RewriteEngine On |
| git checkout --orphan temp_master | |
| git rm -rf . | |
| git commit --allow-empty -m 'Make initial root commit' | |
| git rebase --onto temp_master --root master | |
| git branch -D temp_master |
| #!/bin/bash | |
| fn="$1" | |
| of=${fn%.*}.jpg | |
| lf=`ffprobe -show_streams "$fn" 2> /dev/null | awk -F= '/^nb_frames/ { print $2-1 }'` | |
| rm -f "$of" | |
| ffmpeg -i "$fn" -vf "select='eq(n,$lf)'" -vframes 1 "$of" 2> /dev/null |
| module ImagesHelper | |
| # Acts as a thin wrapper for image_tag and generates an srcset attribute for regular image tags | |
| # for usage with responsive images polyfills like picturefill.js, supports asset pipeline path helpers. | |
| # | |
| # image_set_tag 'pic_1980.jpg', { 'pic_640.jpg' => '640w', 'pic_1024.jpg' => '1024w', 'pic_1980.jpg' => '1980w' }, sizes: '100vw', class: 'my-image' | |
| # | |
| # => <img src="/assets/ants_1980.jpg" srcset="/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw" class="my-image"> | |
| # | |
| def image_set_tag(source, srcset = {}, options = {}) | |
| srcset = srcset.map { |src, size| "#{path_to_image(src)} #{size}" }.join(', ') |
| # config/initializers/compression.rb | |
| Rails.application.configure do | |
| # Use environment names or environment variables: | |
| # break unless Rails.env.production? | |
| break unless ENV['ENABLE_COMPRESSION'] == '1' | |
| # Strip all comments from JavaScript files, even copyright notices. | |
| # By doing so, you are legally required to acknowledge | |
| # the use of the software somewhere in your Web site or app: |