Grant Palin grantpalin

Answering the Front-end developer JavaScript interview questions to the best of my ability.

Explain event delegation

Sometimes you need to delegate events to things.

Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

Explain how prototypal inheritance works.

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

$/
  artifacts/
  build/
  docs/
  lib/
  packages/
  samples/
  src/
 tests/

How WordPress Plugins Should Handle Front End Resources

This is a WORK IN PROGRESS intended for fleshing out and feedback

It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link> element to that CSS. If the plugin needs JavaScript, it will add a <script> to that JavaScript.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.

But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.

Bottom-Aligned Footer in Foundation 5 Pages

This CSS and jQuery will align a <footer> element to the bottom of a given HTML page when the content of the page does not fill the entire window height. This is designed around a page using Foundation 5 with an off-canvas menu.

Page content goes inside ``. If the contents of this element are not enough for its height to equal the window height, then the jQuery adds CSS classes to make the container elements' height equal 100% and the footer is positioned absolutely at the bottom of the page.

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

Templating in EE vs. Craft CMS.

Here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft CMS.

	/*
	* Start by creating a few image sizes for us to use
	*/
	add_image_size('smallest', 479, 9999);
	add_image_size('small', 768, 9999);
	add_image_size('largest', 1800, 9999);


	/*
	* Enqueue our Picturefill Javascript

	<?php
	/**
	* Debugging WordPress things.
	*
	* All of this belongs in your wp-config.php file.
	*
	* This will make sure that the code you release is, at a minimum,
	* relatively free of PHP notices and warnings.
	*
	* - WP_DEBUG: This turns on debugging mode.

	<?php
	add_action( 'envira_gallery_before_output', 'envira_enable_foobox' );
	function envira_enable_foobox() {

	// Allow FooBox to overwrite fancybox global so that it can take over lightbox responsibilites.
	add_action( 'wp_footer', array( $GLOBALS['foobox'], 'disable_other_lightboxes' ), 200 );

	}