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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Modern Font Stacks */ | |
| /* System */ | |
| font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; | |
| /* System (Bootstrap 5.2.0) */ | |
| font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
| /* Times New Roman-based serif */ | |
| font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; |
davidtheclark
/ dumb_to_smart_quotes.py
Created
May 5, 2013 17:10
Convert dumb quotes to smart quotes in Python
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| def dumb_to_smart_quotes(string): | |
| """Takes a string and returns it with dumb quotes, single and double, | |
| replaced by smart quotes. Accounts for the possibility of HTML tags | |
| within the string.""" | |
| # Find dumb double quotes coming directly after letters or punctuation, | |
| # and replace them with right double quotes. | |
| string = re.sub(r'([a-zA-Z0-9.,?!;:\'\"])"', r'\1”', string) | |
| # Find any remaining dumb double quotes and replace them with | |
| # left double quotes. |
earlonrails
/ getBrowser.js
Last active
December 15, 2015 13:19
Get Browser type and version, cleaned up from http://stackoverflow.com/a/5918791/1354978. Now also checks if it is a mobile device. Now works with IE11!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var getBrowser = function(){ | |
| var navigatorObj = navigator.appName, | |
| userAgentObj = navigator.userAgent, | |
| matchVersion; | |
| var match = userAgentObj.match(/(opera|chrome|safari|firefox|msie|trident)\/?\s*(\.?\d+(\.\d+)*)/i); | |
| if( match && (matchVersion = userAgentObj.match(/version\/([\.\d]+)/i)) !== null) match[2] = matchVersion[1]; | |
| //mobile | |
| if (navigator.userAgent.match(/iPhone|Android|webOS|iPad/i)) { | |
| return match ? [match[1], match[2], mobile] : [navigatorObj, navigator.appVersion, mobile]; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <dti:story:element:exist field="WebText"> | |
| <script language="cache" runat="server"> | |
| set storyText = ##class(dt.cms.support.Rules).extractStoryElement("WebText",gStory,0) | |
| </script> | |
| <dti:else> | |
| <script language="cache" runat="server"> | |
| set storyText = ##class(dt.cms.support.Rules).extractStoryElement("Text",gStory,0) | |
| </script> | |
| </dti:story:element:exist> |
cballenar
/ wrap-around.css
Last active
December 14, 2015 03:58
Create the illusion an element wrapping around a container.
While this technique has been around for a while. It reamins a very interesting style that can help certain pieces of content pop-up.
Depending on the class you select the code will pull an element off to the left, right or both sides, and add a triangle for the wrap around illusion. Vi…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Wrap Around - http://jsbin.com/agegux/2/ | |
| --------------------------------------------------------------------------------- | |
| The following code allows you to create the illusion an element | |
| wrapping around a container. | |
| While this technique has been around for a while. It reamins a very | |
| interesting style that can help certain pieces of content pop-up. | |
| Depending on the class you select the code will pull an element |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
mchogan
/ Toggle Hidden File Visibility
Last active
December 13, 2015 22:18
Toggle visibility of hidden files and folders in Mac OS X
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html class="no-touch no-js"> | |
| <head> | |
| <script> /* PUT `no-x.js` here, as early as possible, before any other CSS or JS calls ... */ </script> | |
| </head> | |
| ... |
dergachev
/ GIF-Screencast-OSX.md
Last active
October 31, 2025 16:45
OS X Screencast to animated GIF
cballenar
/ css-baseline-grid.css
Last active
October 14, 2015 00:08
/* This gist was inspired by DigitPaint [ http://advent2012.digitpaint.nl/13/ ] */ This is a baseline grid created using some (perhaps all) of the new CSS background properties. it simulates a baseline grid based on ems which will allow you to size according to your site's font size. A clear disadvantage is that it is limited to be a background.…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --------------------------------------------------- | |
| Production Versions ( Minified ) | |
| --------------------------------------------------- */ | |
| /* Background */ | |
| /**/ .baseline{font-size:1em;background:none;background-image:-webkit-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-size:100% 1.5em;background-origin:content-box;background-attachment:local} | |
| /**/ .baseline *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)} | |
| /* Overlay + Hover switch */ | |
| /**/ body{position:relative}body:hover:before{width:100%;height:100%;display:block;content:"";position:absolute;z-index:9999;pointer-events:none;background-size:100% .75em;background-origin:content-box;background-attachment:local;background-image:-webkit-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);bac |