paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

squarism

Tabs and Windows

Function	Shortcut
New Tab	⌘ + T
Close Tab or Window	⌘ + W (same as many mac apps)
Go to Tab	⌘ + Number Key (ie: ⌘2 is 2nd tab)
Go to Split Pane by Direction	⌘ + Option + Arrow Key
Cycle iTerm Windows	⌘ + backtick (true of all mac apps and works with desktops/mission control)

ghaiklor

iTerm2

NOTE: this gist is outdated, refer to this repository instead - https://github.com/ghaiklor/iterm-fish-fisher-osx

Install iTerm 2

• Download and install iTerm2 (it has better color fidelity than the built in Terminal).

Install Color Scheme

fabricelejeune

Efficient font stack with Sass

The strength of Sass is the mixins and functions. Being able to automate many of the repetitive coding for CSS is both amazing in building and maintaining a clean and efficient code. I often find many developers creating complex systems for simple tasks, such as managing a font stack. This can be tedious to set up and employ. In this article, I will explain how I automate this system.

The font stack is one of those problems which are often solved by simple variables. In this instance, it makes a lot of sense and is easy enough to work with. But when you work with our (beloved) designers from Dogstudio, you can be sure of having to use lot of font variants. It quickly happens that I do not remember all the properties of each variants. And when I say "use lot of font variants", I mean at least 15 in most cases.

Sass maps to the rescue

Instead of simply define variables, I will ceate a font stack map and a mixin to use the map easily.

monkeymonk

<?php

/**
 * Helper to work with Wordpress admin notices
 *
 * @example
 * Notice::success('All is good!');
 *
 * @example
 * Notice::warning('Do something please.', true);

treetrum

<?php
/**
* Gets the next post in the current post type, even if is last post
* Inspired from https://gist.github.com/banago/5603826
* 
* @method get_next_post_looped
* @return WordPress Post Object
*/
function get_next_post_looped() {
    $post_type = get_post_type();

tankbar

<?php
/* ADD GTM TO HEAD AND BELOW OPENING BODY */

add_action('wp_head', 'google_tag_manager_head', 20);
function google_tag_manager_head() { ?>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

acidtib

<?php
// Source: http://goo.gl/aZ1h8v
$file_headers = @get_headers($url);
if ($file_headers[0] == 'HTTP/1.0 404 Not Found'){
	$file_exists = false;
} else {
	$file_exists = true;
}
?>

m-e-h

/**
* Flexible media embeds
*
* For use with media embeds – such as videos, slideshows, or even images –
* that need to retain a specific aspect ratio but adapt to the width of their
* containing element.
*
* Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
*/

jaclyntan

<?php
	$counter = 0;
	while ( have_posts() ) : the_post();
		$counter++;
		if ($counter === 1) {
	        echo '<div class="row">';//start the row
	    }
	    
		    echo '<div class="col-sm-__NAME__">';//start the col//
			get_template_part( 'template-parts/content', 'page' );