Shaun Bent shaunbent

## README.md

      
              2 files
            
          
              51 forks
            
          
              21 comments
            
          
              355 stars
            
          
                necolas
                / README.md
            
            
              Last active
              March 28, 2024 20:34
            
              
                Experimenting with component-based HTML/CSS naming and patterns
              
          
    NOTE I now use the conventions detailed in the SUIT framework
Template Components

Used to provide structural templates.
Pattern
t-template-name


## gist:1623487

      
              1 file
            
          
              321 forks
            
          
              53 comments
            
          
              1086 stars
            
          
                saetia
                / gist:1623487
            
            
              Last active
              July 16, 2024 05:56
            
              
                Clean Install – OS X 10.11 El Capitan
              
          
    OS X Preferences


most of these require logout/restart to take effect
# Enable character repeat on keydown
defaults write -g ApplePressAndHoldEnabled -bool false

# Set a shorter Delay until key repeat

  
## SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

//
// map-fetch($map, $keys)
//
// An easy way to fetch a deep value in a multi-level map. Works much like
// map-get() except that you pass multiple keys as the second parameter to

## ttf2woff2.md

      
              1 file
            
          
              33 forks
            
          
              35 comments
            
          
              408 stars
            
          
                sergejmueller
                / ttf2woff2.md
            
            
              Last active
              March 9, 2024 13:37
            
              
                WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
              
          
    Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2
TTF to WOFF2 converting


http://www.fontsquirrel.com/tools/webfont-generator


## how to screencapture and make animated gifs or whathaveyou.md

      
              1 file
            
          
              30 forks
            
          
              23 comments
            
          
              301 stars
            
          
                paulirish
                / how to screencapture and make animated gifs or whathaveyou.md
            
            
              Last active
              March 31, 2024 22:07
            
              
                Screencapture and animated gifs
              
          
    Screencapture and animated gifs


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).

Capturing (Easy)


Launch quicktime player
do Screen recording


## SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Nasty as hell way of automating our spacing helpers.

$properties: (
  "margin",
  "margin-top",

## .stylelintrc.json
{
  "plugins": [
    "stylelint-declaration-use-variable"
  ],
  "rules": {
    "color-hex-case": ["lower", {"severity": "warning"} ],
    "color-hex-length": ["short", {"severity": "warning"} ],
    "color-named": ["never", {"severity": "warning"} ],
    "time-no-imperceptible": [true, {"severity": "warning"} ],
    "max-nesting-depth": [5, {"severity": "warning"} ],

## slackspotify.sh
#!/bin/bash
APIKEY="From Here https://api.slack.com/custom-integrations/legacy-tokens"
SONG=$(osascript -e 'tell application "Spotify" to name of current track as string')
URLSONG=$(echo "$SONG" | perl -MURI::Escape -ne 'chomp;print uri_escape($_),"\n"')

while true
do
curl -s -d "payload=$json" "https://slack.com/api/users.profile.set?token="$APIKEY"&profile=%7B%22status_text%22%3A%22"$URLSONG"%22%2C%22status_emoji%22%3A%22%3Amusical_note%3A%22%7D"  > /dev/null
sleep 60
done
	// ----
	// Sass (v3.3.0.rc.2)
	// Compass (v1.0.0.alpha.17)
	// ----

	//
	// map-fetch($map, $keys)
	//
	// An easy way to fetch a deep value in a multi-level map. Works much like
	// map-get() except that you pass multiple keys as the second parameter to
	// ----
	// Sass (v3.4.12)
	// Compass (v1.0.3)
	// ----

	// Nasty as hell way of automating our spacing helpers.

	$properties: (
	"margin",
	"margin-top",
	{
	"plugins": [
	"stylelint-declaration-use-variable"
	],
	"rules": {
	"color-hex-case": ["lower", {"severity": "warning"} ],
	"color-hex-length": ["short", {"severity": "warning"} ],
	"color-named": ["never", {"severity": "warning"} ],
	"time-no-imperceptible": [true, {"severity": "warning"} ],
	"max-nesting-depth": [5, {"severity": "warning"} ],
	#!/bin/bash
	APIKEY="From Here https://api.slack.com/custom-integrations/legacy-tokens"
	SONG=$(osascript -e 'tell application "Spotify" to name of current track as string')
	URLSONG=$(echo "$SONG" \| perl -MURI::Escape -ne 'chomp;print uri_escape($_),"\n"')

	while true
	do
	curl -s -d "payload=$json" "https://slack.com/api/users.profile.set?token="$APIKEY"&profile=%7B%22status_text%22%3A%22"$URLSONG"%22%2C%22status_emoji%22%3A%22%3Amusical_note%3A%22%7D" > /dev/null
	sleep 60
	done