Daniel – wattswork {devblog}

Get a single URL parameter by name /** * Get a single URL parameter by it’s name. */ function _get_url_parameter_by_name(name, url) { if (!url) { url = window.location.href; } name = name.replace(/[\[\]]/g, “\\$&”); var regex = new RegExp(“[?&]” + name + “(=([^&#]*)|&|#|$)”), results = regex.exec(url); if (!results) { return null; } if (!results[2]) { return

Getting a Self-Signed SSL Cert to Work Locally with Chrome and MAMP

These days websites and apps must use HTTPS for a number of reasons. To develop locally with SSL you must create a self-signed certificate and then tell the browser to trust it. Create a local self-signed certificate in MAMP Click on a host from the Hosts page. Go to the SSL tab. Tick the SSL

Using Google APIs

Flexible, RESTful access to Gmail features With the Gmail API, gone are the days of using raw sockets to talk to Internet email protocols. The API’s higher-level functionality lets developers access drafts, labels, folders, and of course messages, but also provide admin capabilities such as mass user migration. API overview Read and send messages, manage

Setup Node JS

Install the tools In order to run Node, it and the npm package manager must first be installed. A number of install methods exist including the pre-built installer available from nodejs.org and package managers like [Homebrew], but there are a number of reasons these methods are inferior. To properly install and manage Node use the

SVG Basics

What is SVG? The svg tag itself is the canvas or “viewport” through which the graphic is viewed. Don’t set the height and width parameters in the svg tag, use the viewBox attribute instead. The value of the viewBox attribute is a list of four numbers: — min-x — min-y — width — height The

Head Tags

September 2019

Minimum required <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <!– The above 2 meta tags *must* come first in the <head> to consistently ensure proper document rendering. Any other head element should come *after* these tags. –> <title>Page Title</title> More Resources HEAD: A free guide to HTML5 elements Complete List of HTML Meta Tags

Variables

May 2019

Test if a variable is defined typeof is safer as it allows the identifier to never have been declared before: // if (typeof neverDeclared === “undefined”) // no errors // if (neverDeclared === null) // throws ReferenceError: neverDeclared is not defined if (typeof variable_name !== ‘undefined’) { console.log(variable_name + ‘ exists!’); }

Development

May 2019

The Loop The Loop in Action (codex.wordpress.org) Action Hooks Actions Run During a Typical Request (codex.wordpress.org) How WordPress Actually Works (wpbeginner.com) Enqueue Files JS and CSS files should be loaded using the wp_enqueue_script() and wp_enqueue_style() functions from the themes functions.php file. Do not write link tags in the header.php template file. Enqueued files are pull-in

Images

http://codex.wordpress.org/Function_Reference/add_image_size Notes Using the ‘false’ setting will fail to produce a new image in the upload directory if one of the image dimensions of the uploaded image are equal to the new image size. If a registered image size is removed from functions.php, then any image uploaded before that point and then deleted from the

Comments

WordPress Codex: comments_template() comments_template() loads a comment template. Used primarily in single Post and Page displays, but will work outside of single displays if $withcomments is set to “1”.

Posts

Post types are the different ways a page can be built in WordPress. The most common post type is called the ‘post’, it builds an HTML page with lists of post types. For instance, most WordPress blogs have a homepage which lists the most recent posts, this page has the Post post type. Post Types

Sidebars

Call register_sidebar() for each sidebar you want to create. # Define the ‘main-sidebar’. add_action( ‘widgets_init’, ‘my_register_sidebars’ ); function my_register_sidebars(){ register_sidebar( array( ‘id’ => ‘main-sidebar’, ‘name’ => __( ‘Main Sidebar’ ), ‘description’ => __( ‘Widgets in this area will be shown on all posts and pages.’ ), ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’, ‘after_widget’ => ‘</aside>’,

Page Titles

# Default value. $page_title = ‘Untitled’; if (is_404()) { $page_title = ‘404 Page Not Found’; } elseif (is_search()) { if (get_search_query() == ”){ $page_title = ‘Search Results for Everything’; } else { $page_title = ‘Search Results for: “‘ . get_search_query() . ‘”‘; } } elseif (is_home()) { $page_title = get_bloginfo(‘name’); } elseif (is_single() || is_page())

Themes

A Theme defines the presentation or theming layer of the WordPress application. Many themes can be installed but only one can be active at a time. Themes are activated from within the WordPress admin panel. All files for each installed theme reside in their own directory in /wp-content/themes/. WordPress includes a default theme. Examine the

Templates

November 2018

Template Hierarchy The Template Hierarchy is how WP defines what template file will be served for a specific request. If the specific template file for the request does not exist, the theme falls-back to the next available file. Child theme files fall-back to parent theme files. All template files eventually fall-back to the index.php file.

Database

Using the WPDB Class The wpdb class can be used to execute SQL query statements which return PHP objects In order to work with the class you have to declare it as a global variable. global $wpdb; For OOP I’ve found it best to declare the wpdb object in a custom database class constructor and

Custom Admin Fields

Input fields on WordPress add/edit admin screens are called custom fields. Custom field data is called metadata. Custom fields are displayed inside meta boxes, containers which can be placed on WP add/edit admin screens. When a post is updated, all custom field data is sent along with the post data to be processed server-side.

JavaScript Fundamentals

Naming All JavaScript variables, keywords, functions, labels, and objects must be identified with unique names called identifiers. Identifiers can be short names (like x and y) or more descriptive (like age, average_height, total_volume). The general rules for constructing unique identifiers are: Identifiers can contain letters, digits, underscores, and dollar signs. Identifiers must begin with a

Module Pattern

// Standard module pattern enclosure. var module = (function(){ /* module code */ }()); // jQuery module pattern enclosure. var module = (function($){ /* module code */ })(jQuery); See a demo on codepen.io // jQuery Module definition. var module = (function($){ // Private variable. var privateValue = 0; // Public functions. function getValue() { return

JSON

JSON stands for JavaScript Object Notation. JSON is a string not a JavaScript object. JSON is a specification for formatting a text string so it can represent structured data. JavaScript objects can be converted to JSON strings and vice-versa but with limitations. functions are not allowed in JSON strings. If an object is converted it’s

Cookies

Create Cookies have four parameters name, value, expiration, and path. The name is a unique identifier for the cookie. The cookie name must be unique to the path it is set on. A cookie only holds one value and it must be a string. The expiration is the date and time after which the cookie

Date, Time and Timers

Date and Time // Create a new _Date_ object with the current time. var current_time = new Date(); Time-Out // Time-Outs // Calls a function or executes a code snippet after a specified delay. setTimeout( function(){ // Do something here. }, 5000); // Or… function message(){ alert( ‘Hi’ ); } setTimeout( message, 1000 ); Timed

Functions

Test for a local function if (typeof function_name === ‘function’) { console.log(function_name + ‘ exists!’); } Test for a chained function if (typeof window[class_name][sub_class_name][function_name] === ‘function’) { console.log(function_name + ‘ exists!’); } Call a function dynamically. var returned = window[class_name][sub_class_name][function_name](params);

Event Listeners and Binding