ellm

<?php

/** 
 *	List Users Alphabetically
 *
 *	Create a list of all authors of a WordPress blog.
 *	Names are grouped by first name with a single letter
 *	as a header character.
 *
 *      Call the function with <?php ngtj_list_users_alphabetically(); ?>

ellm

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];

    function doSomething() {
        console.log( something );
    }

    function doAnother() {
        console.log( another.join( " ! " ) );

ellm

var ModuleExample = {
  init: function() {
    var _self = this;
    var varExample = $('form.variations_form');
    
    function exampleFunction() {
      console.log(this);
    }
  }
};

ellm

// Check to see if an element is in the viewport
  function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while (el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;

ellm

<h1>Heading 1</h1>
Nulla eu erat dolor. <strong>Vestibulum</strong> vel eleifend libero. Donec molestie urna posuere egestas suscipit. Nunc id porttitor nulla. Nulla facilisi. In hac habitasse platea dictumst. <a href="http://www.google.com" target="_blank">Maecenas</a> quis condimentum ipsum. Suspendisse potenti. Cras eget <em>tristique</em> nulla, nec tempus arcu. Donec pulvinar sapien a sapien lobortis, eget egestas augue interdum. Curabitur imperdiet urna et pellentesque convallis. Morbi id risus ex. Morbi condimentum gravida odio. <del>Vestibulum</del> fermentum molestie vestibulum. Phasellus pretium nulla arcu, at pellentesque diam efficitur vitae.
<h2>Heading 2</h2>
Nulla eu erat dolor. Vestibulum vel eleifend libero. Donec molestie urna posuere egestas suscipit. Nunc id porttitor nulla. Nulla facilisi. In hac habitasse platea dictumst. Maecenas quis condimentum ipsum. Suspendisse potenti. Cras eget tristique nulla, nec tempus arcu. Donec pulvinar sapien a sapien lobortis, eget egestas augue interdum. 

ellm

Podcasts

• Shop Talk Show
• JavaScript Jabber

People

• Harry Roberts
• Paul Irish
• Chris Coyier
• Matt Mullenweg
• David Walsh

ellm

Php Snippets and Notes

printf

I need to escape/translate text that also requires HTML within in the copy. Use printf()

    <h3><?php printf( esc_html__( 'Get our exclusive newsletter—the best of %1$s The Dude %2$s every day!', 'localdude' ), '<span>', '</span>' ); ?></h3>

ellm

Webpack 3.0

Code spliting in webpack to help decrease loaded dependencies on load.

• UI that gets displayed as a callback from an event can benefit.
• We can async. load a ES6 import() and code after it is returned using a promise.

// At top of file, assign an `import()` that is returned from a function.
const getBloodhound = () => import('bloodhound-js');

// Add an event that will trigger loading the module.

ellm

JavaScript Notes and Snippets

Promises

• promise.all() can be used to queue up a few asynchronous calls to load before a subsquent script is called.
• This can be useful for preloading libraries before some scripts that depend on the library are called.

this.searchTrigger.addEventListener('click', () => {
 // Lazyload Typeahead and Bloodhound libraries.

ellm

CSS notes and snippets

Push elements off screen

• for UX where navigation flies in from the side of the screen or a rollup that swoops in from the bottom of the screen, use translate3d().
• the advantage is that you do not need to know the height or width. Whereas using negative margin or top, bottom, etc requires that an exact measurement to push off screen
• add transition: transform 0.5s to have it smoothly move in and out.

transform: translate3d(0, 100%, 0); // push off screen