nathansmith

Resources for learning web design & front-end development:

---

ONLINE

Design

• http://52weeksofux.com
• http://thedesigncubicle.com

bentruyman

/**********************************************/
/*
/* IR_Black Skin by Ben Truyman - 2011
/*
/* Based on Todd Werth's IR_Black:
/* http://blog.toddwerth.com/entries/2
/*
/* Inspired by Darcy Clarke's blog post:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/*

anthonyshort

@mixin border-radius($radius, $prefixes: -moz -webkit -o) {
	@each $prefix in $prefixes {
		#{$prefix}-border-radius:$radius;
	}
	
	border-radius:$radius;
}

#id {
	@include border-radius(5px, -moz -webkit);

twe4ked

@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);

  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($file + '@2x.' + $type);
      -webkit-background-size: $width $height;
    }
  }
}

BronsonQuick

<?php
/* gform_pre_submission will do all forms. gform_pre_submission_1 will do a form with an ID of 1
*  Keep an eye on the priority of the filter. In this case I used 9 because the Salesforce plugin we used ran a presubmission filter at 10 so we needed this to happen before it
*/
add_filter( "gform_pre_submission_1", "add_salesforce_campaign_id_footer", 9 );
function add_salesforce_campaign_id_footer( $form ){
    foreach($form["fields"] as &$field)
        if($field["id"] == 2){
                    /* Set the variable you want here - in some cases you might need a switch based on the page ID.
                    * $page_id = get_the_ID();

davatron5000

Make it useful

• Install Package Control. For SublimeText 2, paste the following in Terminal:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. ⌘+Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

sergejmueller

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

blogjunkie

<?php
	
/**
 * Custom page titles for Guest Authors with WordPress SEO
 * Returns "[author name]&#39;s articles on [site name]"
 * 
 */
add_filter('wpseo_title', 'my_co_author_wseo_title');
function my_co_author_wseo_title( $title ) {
	

ericakfranz

<?php
/**
 * Return 'medium' image for mobile devices since that is what we're 
 * loading to display as the featured image on each post.
 */

//* Filter WP SEO's OpenGraph image output
add_filter('wpseo_opengraph_image_size', 'disi_opengraph_image_size');
function disi_opengraph_image_size($val) {
	if( wp_is_mobile() ) {

wesbos

// paste in your console
    speechSynthesis.onvoiceschanged = function() {
      var msg = new SpeechSynthesisUtterance();
      msg.voice = this.getVoices().filter(v => v.name == 'Cellos')[0];
      msg.text = Object.keys(window).join(' ');
      this.speak(msg);
    };