.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

See the Pen avNqoe by CSS-Tricks (@css-tricks) on CodePen.

Remember opacity and visibility still leave an element in the document flow. If you need to remove it from flow, there is more work to do. In fact here's a way to think about them...

If you need to change the display value of an element after a fading, that's tougher. Not really possible in CSS since display isn't transitionable. Snook has written about this, including some JavaScript to help.

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

Turns out like this:

Credit to Thierry Koblentz for digging this gem out of Jon Neal's Sanitize.css.

python -m SimpleHTTPServer 8000

Navigate to the project directory in the terminal and do that command. Then http://localhost:8000 will server up that directory (as in, it's `index.html` file).

.face:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

See the Pen "Shake" CSS snippet for CSS-Tricks by Sarah Drasner (@sdras) on CodePen.

if ($(selectionOne) === $(selectionTwo)) {

}

You can compare DOM objects though...

if ($(selectionOne)[0] === $(selectionTwo)[0]) {

} 

But that's only really useful if you're comparing a single element, not a collection.

If you need to compare a collection of elements, this StackOverflow thread has the answer:

var divs = $("div");
var divs2 = $("div");

if (divs.length == divs2.length && divs.length == divs.filter(divs2).length) {         
  // They are equal
}

A StackOverflow thread has some pretty good solutions.

Get the attribute, check the value

var attr = $(this).attr('name');

// For some browsers, `attr` is undefined; for others, `attr` is false. Check for both.
if (typeof attr !== typeof undefined && attr !== false) {
  // Element has this attribute
}

Native JavaScript has a way

If you only have a jQuery reference...

$(this)[0].hasAttribute("name");

jQObject[0].hasAttribute("name");

Filter the selection

$(this).is('[name]');

$(this).filter("[name='choice']");

As of today, the best (and so far only valid way) to do so is as follow:

.button {
  @at-root a#{&} {
    // Specific styles for `a.button`
  }
}

Wow, definitely not really elegant, is it? Ideally, you might want to hide this kind of horrific syntax behind a mixin so that you keep a clean and friendly API, especially if you have rookie developers in your team.

Doing so is extremely simple of course:

/// Since the current way to qualify a class from within its ruleset is quite
/// ugly, here is a mixin providing a friendly API to do so.
/// @author Hugo Giraudel
/// @param {String} $element-selector - Element selector
@mixin qualify($element-selector) {
  @at-root #{$element-selector + &} {
    @content;
  }
}

Now, rewriting our previous snippet:

.button {
  @include qualify(a) {
    // Specific styles for `a.button`
  }
}

Much better, right? Still, qualify can sound a bit tricky for inexperienced Sass tinkerers. You could provide an alias when a more descriptive name, such as when-is.

/// @alias qualify
@mixin when-is($args...) {
  @include qualify($args...) {
    @content;
  }
}

One final example:

.button {
  border: none;
  
  // Qualify `.button` with `button`
  @include qualify(button) {
    -webkit-appearance: none;
  }
  
  // Qualify `.button` with `a`
  @include when-is(a) {
    text-decoration: none;
  }
}

var DOMReady = function(a, b, c) {
  b = document
  c = 'addEventListener'
  b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a)
}
    
DOMReady(function () {
  alert('The DOM is Ready!');
});

Minimized:

var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}

Dustin Diaz's version:

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

He also had a repo for it where the code is a bit different (and looks newer) so you might wanna try that, although I've found the above pretty effective as-is. His 0.3.0 branch is required for IE 6-7-8.

The native DOM function is:

document.addEventListener('DOMContentLoaded', function() {

});

In case you're cool with only needing to support browsers that support that.

For those new to em values, The Mozilla Developer Network does an excellent job of explaining ems:

...an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px.

If you still prefer to think in px, but like the benefits of em, no need have your calculator handy, you can let Sass do the work for you. There are a variety of ways to calculate ems with Sass.

Inline math:

h1 {
  font-size: (32 / 16) * 1em;
}

p {
  font-size: (14 / 16) + 0em;
}

Note: We need the "* 1em" there for Sass to correctly append the unit value. You can also use "+ 0em" for the same purpose.

Result:

h1 {
  font-size: 2em;
}

p {
  font-size: 0.875em;
}

This works, but we can make it easier.

The em() Sass function

There are quite a few different ways to write this function, this one from a Web Design Weekly article:

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em;
}

Super clever! This function uses Sass' string interpolation to append em to the value. Note that the $context parameter has a default value of $browser-context (so, whatever you set this variable to). This means that when calling the function in your Sass, you only need to define the $pixels value and the math will be calculated relative to $browser-context - in this case - 16px.

Example Usage:

h1 {
  font-size: em(32);
}

p {
  font-size: em(14);
}

Result:

h1 {
  font-size: 2em;
}

p {
  font-size: 0.875em;
}

A similar function using math instead of string interpolation from The Sass Way can easily be modified to accept variables like our string interpolation function:

//un-modified

@function calc-em($target-px, $context) {
  @return ($target-px / $context) * 1em;
}

// and modified to accept a base context variable

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
  @return ($pixels / $context) * 1em;
}

Another using Sass' unitless() method:

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1em;
}

This allows us to either include the px unit or not in the function call.

h1 {
  font-size: em(32);
}

// is the same as:

h1 {
  font-size: em(32px);
}

Bourbon - a popular Sass mixin library, comes pre-packaged with all of the timing functions declared as variables. If you're not using Bourbon, feel free to grab these:

$ease: (
  in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530),
  in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190),
  in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220),
  in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060),
  in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715),
  in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035),
  in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335),
  in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045),
  out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940),
  out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000),
  out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000),
  out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000),
  out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000),
  out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000),
  out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000),
  out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275),
  in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955),
  in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000),
  in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000),
  in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000),
  in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950),
  in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000),
  in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860),
  in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550)
);

@function ease($key) {
  @if map-has-key($ease, $key) {
    @return map-get($ease, $key);
  }

  @warn "Unkown '#{$key}' in $ease.";
  @return null;
}

Example usage

.example {
  animation: there-and-back 2.5s ease(in-quad) infinite alternate;
}

Demo of all

Thanks to Sean Dempsey (@thatseandempsey).

See the Pen Easing Map Get Function by Sean Dempsey (@seanseansean) on CodePen.

Order deny,allow
Deny from All
Allow from xxx.xxx.xxx.xxx
Allow from xxx.xxx.xxx.xxy

Allow except from specific IPs

Order deny,allow
Allow from All
Deny from xxx.xxx.xxx.xxx
Deny from xxx.xxx.xxx.xxy

If you have a proxy in front of your server performing TLS termination:

RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

Here's a Sass mixin that simplifies the math a bit.

@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

The mixin assumes you'll be nesting an element with the class of content inside your initial block. Like this:

<div class="sixteen-nine">
  <div class="content">
    insert content here
    this will maintain a 16:9 aspect ratio
  </div>
</div>

Using the mixin is as easy as:

.sixteen-nine {
  @include aspect-ratio(16, 9);
}

Result:

.sixteen-nine {
  position: relative;
}
.sixteen-nine:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.sixteen-nine > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Demo

Here's a demo showing the above code in action. The animation is added to show the element maintaining the assigned aspect ratio as it resizes.

See the Pen Maintain Aspect Ratio Demo by Sean Dempsey (@seanseansean) on CodePen.

Thanks to Sean Dempsey (@thatseandempsey) for this one!

The Mixin

Ana Tudor explained how she managed to do it in a Stack Overflow answer, using chained CSS transforms. Thereafter I turned her solution into a Sass mixin to make everything a breeze.

/// Mixin to place items on a circle
/// @author Hugo Giraudel
/// @author Ana Tudor
/// @param {Integer} $item-count - Number of items on the circle
/// @param {Length} $circle-size - Large circle size
/// @param {Length} $item-size - Single item size
@mixin on-circle($item-count, $circle-size, $item-size) {
  position: relative;
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%; 
  list-style: none;       
  
  > * {
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -($item-size / 2);
  
    $angle: (360 / $item-count);
    $rot: 0;

    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: 
          rotate($rot * 1deg) 
          translate($circle-size / 2) 
          rotate($rot * -1deg);
      }

      $rot: $rot + $angle;
    }
  }
}

Caution! Vendor prefixes have been omitted from this code snippet. Be sure to prefix transform if you do not use Autoprefix.

Demo

For demo purposes, we'll consider a list of 8 images but basically anything could work.

<ul class='circle-container'>
  <li><img src='http://lorempixel.com/100/100/city' alt="..." /></li>
  <li><img src='http://lorempixel.com/100/100/nature' alt="..." /></li>
  <li><img src='http://lorempixel.com/100/100/abstract' alt="..." /></li>
  <li><img src='http://lorempixel.com/100/100/cats' alt="..." /></li>
  <li><img src='http://lorempixel.com/100/100/food' alt="..." /></li>
  <li><img src='http://lorempixel.com/100/100/animals' alt="..." /></li>
  <li><img src='http://lorempixel.com/100/100/business' alt="..." /></li>
  <li><img src='http://lorempixel.com/100/100/people' alt="..." /></li>
</ul>

.circle-container {
  @include on-circle($item-count: 8, $circle-size: 20em, $item-size: 6em); 
  margin: 5em auto 0;
  border: solid 5px tomato;
  
  img { 
    display: block; 
    max-width: 100%; 
    border-radius: 50%;
    filter: grayscale(100%);
    border: solid 5px tomato;
    transition: .15s;
    
    &:hover,
    &:active {
      filter: grayscale(0);
    }
  }
}

See the Pen Items on circle by Hugo Giraudel (@HugoGiraudel) on CodePen.

I was in a position where I was using a few Jetpack features but actually needed none of the CSS. This is what was able to completely stop any Jetpack CSS for me (for functions.php, or functionality plugin):

// First, make sure Jetpack doesn't concatenate all its CSS
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// Then, remove each CSS file, one at a time
function jeherve_remove_all_jp_css() {
  wp_deregister_style( 'AtD_style' ); // After the Deadline
  wp_deregister_style( 'jetpack_likes' ); // Likes
  wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
  wp_deregister_style( 'jetpack-carousel' ); // Carousel
  wp_deregister_style( 'grunion.css' ); // Grunion contact form
  wp_deregister_style( 'the-neverending-homepage' ); // Infinite Scroll
  wp_deregister_style( 'infinity-twentyten' ); // Infinite Scroll - Twentyten Theme
  wp_deregister_style( 'infinity-twentyeleven' ); // Infinite Scroll - Twentyeleven Theme
  wp_deregister_style( 'infinity-twentytwelve' ); // Infinite Scroll - Twentytwelve Theme
  wp_deregister_style( 'noticons' ); // Notes
  wp_deregister_style( 'post-by-email' ); // Post by Email
  wp_deregister_style( 'publicize' ); // Publicize
  wp_deregister_style( 'sharedaddy' ); // Sharedaddy
  wp_deregister_style( 'sharing' ); // Sharedaddy Sharing
  wp_deregister_style( 'stats_reports_css' ); // Stats
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
  wp_deregister_style( 'jetpack-slideshow' ); // Slideshows
  wp_deregister_style( 'presentations' ); // Presentation shortcode
  wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions
  wp_deregister_style( 'tiled-gallery' ); // Tiled Galleries
  wp_deregister_style( 'widget-conditions' ); // Widget Visibility
  wp_deregister_style( 'jetpack_display_posts_widget' ); // Display Posts Widget
  wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar Widget
  wp_deregister_style( 'widget-grid-and-list' ); // Top Posts widget
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

Thanks to Jon Bellah, TJ Kelly, George Stephanis, and everyone else who chimed in to help me.

I suspect this will change over time. It seems to me the best possible way to do this would be to serve a concatenated stylesheet for just the featured you have turned on, and have a single named thing you can deregister.

No such event exists in native JavaScript.

You can fake it by setting a timeout to run the code you want to run when resizing stops. Then clear that timeout every time a resize event fires. That way the timeout will only finish if that timeout actually finishes.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

Similar to debouncing.

The grid property in CSS is the foundation of Grid Layout. It aims at fixing issues with older layout techniques like float and inline-block, which both have issues and weren't really designed for page layout.

You start by establishing a grid context on an element:

.area {
  display: -ms-grid; /* prefix for IE 10 */
  display: grid; /* or inline-grid */
}

Then you define what that grid layout will be like. Think columns and rows like a spreadsheet (or table). Then, you can define for each child a column and a row (resulting in a cell). No markup changing is involved; everything is done through CSS.

Along with the fact this method fixes the issues we encounter with older layout techniques, its main benefit is you can display a page in a way which can differ from the flow order.

Properties

Since CSS Grid Layout is a whole module and not a single property, it gathers a bunch of properties meant to be used together. Some are meant to be set on the parent (grid) element, others on the children.

• grid-row / grid-column
• grid-row-align / grid-column-align
• grid-row-span / grid-column-span
• grid-rows / grid-columns

The `fr` Unit

The fr unit can be used for grid-rows and grid-columns values. It stands for "fraction of available space". Think of it as percentages for available space when you've taken off fixed-sized and content-based columns/rows. As the spec says:

The distribution of fractional space occurs after all 'length' or content-based row and column sizes have reached their maximum.

Coming Soon

The properties listed so far are the very basics to use the grid layout; they are also the first (and currently only) properties to be supported in this module.

According to the official specifications, there are a lot more involved including:

• grid-template: allows grid definition through a template of identifiers
• grid-column-position: current grid-column since grid-column is supposed to be a shorthand for grid-column-position and grid-column-span
• grid-row-position: same as above
• grid-position: shorthand for grid-column-position and grid-row-position
• grid-span: shorthand for grid-column-span and grid-row-span
• grid-area: shorthand for grid-column-position, grid-row-position, grid-column-span and grid-row-span
• grid-auto-columns: change default size for columns
• grid-auto-rows: change default size for rows
• grid-auto-flow: allows grid-items to automatically flow in available cells

Unfortunately, these properties are currently unsupported. We'll update this article over time to document and include examples.

Example

Consider a structure like the following:

<div class="main">My awesome content here</div>
<footer class="footer">Some informations here</footer>
<header class="header">My site title goes here</header>
<aside class="sidebar">Here is my side content</aside>

Note how the markup order has absolutely no impact on the final rendering.

body {
 /* First, we define body as a grid element */
 display: grid;
   
 /* Then, we define the number of columns we want by setting their dimensions */
 /* Beware, gaps between columns will be actual columns too */
 /* 1. This means there are 3 columns: 
  * the first one is 200px wide
  * the second one will be a margin (1%) 
  * the third one will occupy the remaining space 
  */
 grid-columns: 200px 1% 1fr; /* 1 */
   
 /* Now we define the number of rows and their dimensions */
 /* 2. this means there are 5 rows: 
  * the first one will be sized according to its content
  * the second one will be a margin
  * the third one will be sized according to its content
  * the fourth one will be a margin as well
  * the last one will be sized according to its content 
  */
 grid-rows: auto 15px auto 15px auto; /* 2 */
   
 /* The body element is now a 3*5 grid. */
}
 
/* Both the header and the footer will be full width, so we have to make them occupy the 3 columns */
.header, 
.footer {
  grid-column-span: 3;
}

/* Let's define in which row the header will be: the first one */
.header {
  grid-row: 1;
}
 
/* Same for the footer: the last one so the fifth (remember margins count as cols/rows */
.footer {
  grid-row: 5;
}
 
.sidebar {
  /* The sidebar will occupy the first column which is 200px wide */
  grid-column: 1;
  /* And the 3rd row (there are the header and a margin before) */
  grid-row: 3;
}
 
.main {
  /* The main content will be on the 3rd column and the 3rd row */
 grid-column: 3;
 grid-row: 3;
}

With a few other lines of CSS to handle styling issues, we have a decent layout with absolutely no floats, no inline-blocks, no defined widths, no defined heights and no margins and completely independant of the flow order. Pretty neat, right?

Check out this Pen!

Now let's add a 2nd sidebar to, for instance, display ads. It will be on the right side of the main content. There are a few tweaks to do in order to make everything works.

/* We first change the grid-columns definition on the grid element to add 2 new columns: one margin and one sidebar */
body {
  display: grid;
  grid-columns: 200px 1% 1fr 1% 100px;
  grid-rows: auto 15px auto 15px auto;
  /* We could have writen grid-rows: auto (15px auto)[2] */
}

/* Both the header and the footer will expand to 5 columns instead of 3 */
.header, .footer {
  grid-column-span: 5;
}

.ads {
  grid-column: 5;
  grid-row: 3;
}

Done! We now have a layout with full-width header and footer, 3-columns on the main part including 2 fixed-width columns with about 13 lines of CSS.

Check out this Pen!

What about responsive design? Easy as a pie. Let's slightly tweak our design when under 600px device width.

@media all and (max-width: 600px) {
  body {
    /* First, we make the body 1-column and 5 rows spaced by 4 margin rows */
    grid-columns: 1fr;
    grid-rows: auto (1% auto)[4];
    /* This is the same as:
     * grid-rows: auto 1% auto 1% auto 1% auto 1% auto;
     */
  }
  
  /* Then we say to all elements they belong in the only existing column */
  .header, .ads, .sidebar, .main, .footer {
    grid-column: 1;
  }
  
  /* Now we define their row; don't forget spacing rows! */
  .header  { grid-row: 1; }
  .ads     { grid-row: 3; }
  .main    { grid-row: 5; }
  .sidebar { grid-row: 7; }
  .footer  { grid-row: 9; }
  
  /* We even can create grids inside grids */
  .ads {
    display: grid;
    grid-columns: 1% (32% 1%)[3]; /* 1% 32% 1% 32% 1% 32% 1% */
    grid-rows: 2; /* One for the title, one for the images */
  }
  
  .ads h2  { grid-row: 1; grid-column-span: 3; }
  .ads img { grid-row: 2; }
  .ads img:nth-of-type(1) { grid-column: 2; }
  .ads img:nth-of-type(2) { grid-column: 4; }
  .ads img:nth-of-type(3) { grid-column: 6; }
}

Have a look at this Pen and resize your browser to see the magic!

Here is a grid system made with CSS Grid Layout and Sass:

Check out this Pen!

If you feel uncomfortable with the idea of having columns and rows as margins, I guess you can still use actual margins on element but that defeats the purpose a bit. Or you could use a CSS preprocessor to ease you the calculations; here is a demo.

Related

• Flexbox

Other Resources

• CSS Grid Layout in the CSS specifications
• CSS Grid Layout by Microsoft
• Microsoft's CSS Grid layout playground
• CSS Grid Layout by 24Ways
• Future of CSS Layout: Grids

Browser Support

Support coming in WebKit/Blink and Gecko (currently in some nightly builds).

// Increase number of meta fields shown in dropdown
add_filter('postmeta_form_limit', 'customfield_limit_increase');
function customfield_limit_increase($limit) {
  $limit = 100;
  return $limit;
}

Otherwise, the dropdown for Custom Fields is capped at 30 (alphabetically).

Before:

After:

$(".remove-me").remove();

But there is no direct equivalent in JavaScript. Instead you'll need to select the parent element and use removeChild.

So if you have:

<div class="module">
  <p>Stuff.</p>
  <div class="remove-me">...</div>
</div>

You'll need to do:

var thingToRemove = document.querySelectorAll(".remove-me")[0];

thingToRemove.parentNode.removeChild(thingToRemove);

Or if you had a reference to an element and wanted to empty out all the elements inside it, but keep it:

mydiv = document.getElementById('empty-me');
while (mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

/* Will Not Work */
document.querySelectorAll('.module').forEach(function() {
  
});

That's because what you get back from querySelectorAll isn't an array, it's a (non-live) NodeList.

Here's a quick way to iterate over all the found elements:

var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

Fair warning, Todd Motto explains why this method is a rather hacky, detailing over 10 problems with it.

You could also use a classic for loop:

var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Todd's suggestion is to make your own method:

// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

// Usage:
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll('li');
forEach(myNodeList, function (index, value) {
  console.log(index, value); // passes index + value back!
});

There are also for..of loops, but...

/* Be warned, this only works in Firefox */

var divs = document.querySelectorAll('div );

for (var div of divs) {
  div.style.color = "blue";
}

This is pretty intense (probably dangerous and generally not recommended) but you could make NodeList have the same forEach function as Array does, then use it.

NodeList.prototype.forEach = Array.prototype.forEach;

var divs = document.querySelectorAll('div').forEach(function(el) {
  el.style.color = "orange";
})

There is a bit more information in the MDN article.

function exclude_post_categories($excl='', $spacer=' ') {
  $categories = get_the_category($post->ID);
  if (!empty($categories)) {
    $exclude = $excl;
    $exclude = explode(",", $exclude);
    $thecount = count(get_the_category()) - count($exclude);
    foreach ($categories as $cat) {
      $html = '';
      if (!in_array($cat->cat_ID, $exclude)) {
        $html .= '<a href="' . get_category_link($cat->cat_ID) . '" ';
        $html .= 'title="' . $cat->cat_name . '">' . $cat->cat_name . '</a>';
        if ($thecount > 1) {
          $html .= $spacer;
        }
        $thecount--;
        echo $html;
      }
    }
  }
}

Plus as long as you have that, you can alter the output however you want which is nice.

Usage is like:

<?php exclude_post_categories("4"); ?>

Which would list all categories excluding the one with the ID of 4.

<meta name="viewport" content="width=device-width">

Although I see this is recommended a lot:

<meta name="viewport" content="width=device-width, initial-scale=1">

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Note: don't use a responsive meta tag if your website isn't specifically designed to be responsive and work well at that size, as it will make the experience worse.

There are more attributes this tag supports:

It's generally recommended that you don't prevent scaling, as that's annoying and potentially an accessibility problem.

You'll probably want this in your CSS as well:

@-ms-viewport{
  width: device-width;
}

Good to know: changing the value of this meta tag with JavaScript does work, the page will react to the new value. Either out the entire tag and replace, or change the content property. Not a super common need, but it can come up.

function print_r(o) {
  return JSON.stringify(o,null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;'); 
}

So if you have an object like:

var myObject = {
   "lunch": "sandwich",
   "dinner": "stirfry"
};

You could do:

var putHere = document.getElementById("#put-here");

putHere.innerHTML = print_r(myObject);

to see the result on screen.

Also, console.table() is sometimes much better than console.log() for this kind of thing.

jQuery.extend({

  getQueryParameters : function(str) {
	  return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }

});

So if the URL is:

http://codepen.io/chriscoyier/pen/uszCr?lunch=sandwich&dinner=stirfry

You can do:

var queryParams = $.getQueryParameters();

And queryParams will be an object like:

{
   "lunch": "sandwich",
   "dinner": "stirfry"
}

add_theme_support('post-thumbnails'); 

To a theme's functions.php file and you'll get a Featured Image module on the admin screen for posts which allows you to select one.

It is also very easy to output that image as an HTML <img>:

the_post_thumbnail();

But what if you just need the URL? Say, you're going to use it as a background-image on an element rather than a content image. Unfortunately there is no super easy/obvious function for that.

Within the loop, you'll have to do:

$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];

Then $thumb_url will be that URL.

This adds that category "nice" name:

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
  if (is_single() ) {
    global $post;
    foreach((get_the_category($post->ID)) as $category) {
      // add category slug to the $classes array
      $classes[] = $category->category_nicename;
    }
  }
  // return the $classes array
  return $classes;
}

Add this to your .htaccess file at the root to fix it:

AddType image/svg+xml .svg .svgz

Usage

var iconFontHonored = checkFont('icomoon');

Check out this Pen!

<?php

  list($width, $height, $type, $attr) = getimagesize("url/to/image.jpg");

  echo "Image width " . $width;
  echo "Image height " . $height;
  echo "Image type " . $type;
  echo "Attribute " . $attr;

?>

<meta name="robots" content="noindex">

To prevent just Google:

<meta name="googlebot" content="noindex">

If you have control over it, you probably want to add nofollow to links that point to that page as well:

<a href="privatepage.html" rel="nofollow">Link to private page</a>

Theoretically that's not needed for Google, which claims to drop all pages with noindex from their directory. But there are more search engines out there and it doesn't hurt.

A complete explanation at Kroc Camen's site, the originator of this technique.

<?php 

  if(!function_exists('el_crypto_hmacSHA1')){
    /**
    * Calculate the HMAC SHA1 hash of a string.
    *
    * @param string $key The key to hash against
    * @param string $data The data to hash
    * @param int $blocksize Optional blocksize
    * @return string HMAC SHA1
    */
    function el_crypto_hmacSHA1($key, $data, $blocksize = 64) {
        if (strlen($key) > $blocksize) $key = pack('H*', sha1($key));
        $key = str_pad($key, $blocksize, chr(0x00));
        $ipad = str_repeat(chr(0x36), $blocksize);
        $opad = str_repeat(chr(0x5c), $blocksize);
        $hmac = pack( 'H*', sha1(
        ($key ^ $opad) . pack( 'H*', sha1(
          ($key ^ $ipad) . $data
        ))
      ));
        return base64_encode($hmac);
    }
  }

  if(!function_exists('el_s3_getTemporaryLink')){
    /**
    * Create temporary URLs to your protected Amazon S3 files.
    *
    * @param string $accessKey Your Amazon S3 access key
    * @param string $secretKey Your Amazon S3 secret key
    * @param string $bucket The bucket (bucket.s3.amazonaws.com)
    * @param string $path The target file path
    * @param int $expires In minutes
    * @return string Temporary Amazon S3 URL
    * @see http://awsdocs.s3.amazonaws.com/S3/20060301/s3-dg-20060301.pdf
    */
    
    function el_s3_getTemporaryLink($accessKey, $secretKey, $bucket, $path, $expires = 5) {
      // Calculate expiry time
      $expires = time() + intval(floatval($expires) * 60);
      // Fix the path; encode and sanitize
      $path = str_replace('%2F', '/', rawurlencode($path = ltrim($path, '/')));
      // Path for signature starts with the bucket
      $signpath = '/'. $bucket .'/'. $path;
      // S3 friendly string to sign
      $signsz = implode("\n", $pieces = array('GET', null, null, $expires, $signpath));
      // Calculate the hash
      $signature = el_crypto_hmacSHA1($secretKey, $signsz);
      // Glue the URL ...
      $url = sprintf('http://%s.s3.amazonaws.com/%s', $bucket, $path);
      // ... to the query string ...
      $qs = http_build_query($pieces = array(
        'AWSAccessKeyId' => $accessKey,
        'Expires' => $expires,
        'Signature' => $signature,
      ));
      // ... and return the URL!
      return $url.'?'.$qs;
    }
  }

?>

Usage

<?php echo el_s3_getTemporaryLink('your-access-key', 'your-secret-key', 'bucket-name', '/path/to/file.mov'); ?>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Or a black one:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

php_value auto_prepend_file "/real/path/to/file/functions.php"
php_value auto_append_file "/real/path/to/file/footer.php"

http://css-tricks.com/index.php/teachers/a/

The actual page rendered by the server would be:

http://css-tricks.com/index.php?search=teachers&sort=a

RewriteEngine on
RewriteRule ^index/([^/]+)/([^/]+).php /page.php?search=$1&sort=$2 [NC]