despecial

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Cross-browser kerning-pairs & ligatures</title>
	<style>
	body { font-family: sans-serif; background: #f4f3f3; color: rgba(40, 30, 0, 1); width: 500px; margin: 80px auto; padding: 0px; }
	a { color: rgba(15, 10, 0, 0.8); text-decoration: none; border-bottom: 1px solid; padding: 1px 1px 0px; -webkit-transition: background 1s ease; }
	a:hover { background: rgba(0, 220, 220, 0.2); }
	p, li { line-height: 1.5; padding: 0em 1em 0em 0em; margin: 0em 0em 0.5em; }

	# Settings
	WORDPRESS=/var/www/sites/jerome.tamarelle.net/web/blog
	VERSION=3.1
	BACKUP=/var/www/sites/jerome.tamarelle.net/backup

	# Backup files
	BACKUP_NAME=$(command date +"%Y-%m-%d")
	mkdir ${BACKUP}
	command tar -cjvf "${BACKUP}/${BACKUP_NAME}-files.tar.bz2" ${WORDPRESS}

	<?php

	/**
	* Define type of server
	*
	* Depending on the type other stuff can be configured
	* Note: Define them all, don't skip one if other is already defined
	*/

	define( 'DB_CREDENTIALS_PATH', dirname( ABSPATH ) ); // cache it for multiple use

	<?php
	/**
	* Turn all URLs in clickable links.
	*
	* @param string $value
	* @param array $protocols http/https, ftp, mail, twitter
	* @param array $attributes
	* @return string
	*/
	public function linkify($value, $protocols = array('http', 'mail'), array $attributes = array())

	// Opens a pop-up with twitter sharing dialog

	var url = "http://google.com";
	var text = "Replace this with your text";
	window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');

	#
	# Sources:
	# http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites
	# http://codex.wordpress.org/Output_Compression
	# http://www.perun.net/2009/06/06/wordpress-websites-beschleuinigen-4-ein-zwischenergebnis/#comment-61086
	# http://www.smashingmagazine.com/smashing-book-1/performance-optimization-for-websites-part-2-of-2/
	# http://gtmetrix.com/configure-entity-tags-etags.html
	# http://de.slideshare.net/walterebert/die-htaccessrichtignutzenwchh2014
	# http://de.slideshare.net/walterebert/mehr-performance-fr-wordpress
	# https://andreashecht-blog.de/4183/

	<?php

	//returns a big old hunk of JSON from a non-private IG account page.
	function scrape_insta($username) {
	$insta_source = file_get_contents('http://instagram.com/'.$username);
	$shards = explode('window._sharedData = ', $insta_source);
	$insta_json = explode(';</script>', $shards[1]);
	$insta_array = json_decode($insta_json[0], TRUE);
	return $insta_array;
	}

	<?php

	/**
	* [list_searcheable_acf list all the custom fields we want to include in our search query]
	* @return [array] [list of custom fields]
	*/
	function list_searcheable_acf(){
	$list_searcheable_acf = array("title", "sub_title", "excerpt_short", "excerpt_long", "xyz", "myACF");
	return $list_searcheable_acf;
	}

	<?php


	/**
	* Callback for WordPress 'pre_get_posts' action.
	*
	* If doing a search, set the post type to 'post'.
	*
	* @author Ryan Meier http://www.rfmeier.net/
	*