Browser Behavior – Peter Dillon

Chrome’s Refresh Tools

April 1, 2016April 1, 2016 Peter Dillon

Normal reload
This will use the cache but revalidate everything during page load, looking for “304 Not Modified” responses. If the browser can avoid re-downloading cached JavaScript files, images, text files, etc. then it will.

Hard reload
Don’t use anything in the cache when making the request. Force the browser do re-download every JavaScript file, image, text file, etc.

Empty Cache and Hard Reload
This does hard reload – but also looks for items downloaded and cached after the page has loaded, such as adding a new script tag to your DOM, or by using RequireJS etc. Any AMD-based library (such as RequireJS) basically loads its scripts lazily. In that case, you have to empty the cache to make sure that really everything gets a hard reload.

Keyboard command to open devtools: Cmd + Opt + I — or J if you want to focus the console when opening.

Interview Challenges

January 11, 2016April 16, 2016 Peter Dillon

I am in the process of interviewing and wanted to document all the code challenges I am confronted with.

For every repeating letter in a string, add a “*” between them.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”adwyLw” default_tab=”result” user=”peterdillon”]See the Pen String Manipulation JS Challenge by Peter (@peterdillon) on CodePen.[/codepen_embed]

Check if a given number is a power of 2:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”GoEvaa” default_tab=”result” user=”peterdillon”]See the Pen Check Power of 2 by Peter (@peterdillon) on CodePen.[/codepen_embed]

Presented with a photoshop design I was asked to code this in 20 minutes, making sure the bottom 3 elements were coded in flex-box: [codepen_embed height=”268″ theme_id=”0″ slug_hash=”ZQyzao” default_tab=”result” user=”peterdillon”]See the Pen Interview Code Challenge by Peter (@peterdillon) on CodePen.[/codepen_embed]

What does jQuery .delegate do? How is it the same or different than .on? What does .off do? What is bubbling?
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”jWGwKz” default_tab=”result” user=”peterdillon”]See the Pen Event Capturing with .on, .delegate and plain js by Peter (@peterdillon) on CodePen.[/codepen_embed]

How does css animation and transition work?
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”dGVWqw” default_tab=”result” user=”peterdillon”]See the Pen CSS Transform, Transition and Animation by Peter (@peterdillon) on CodePen.[/codepen_embed]

Photoshop Challenge:
I was asked to grab a layer with a drop shadow effect on it from within a full page layout design document and export it as a png with transparency and effect included.

Right click on desired layer and choose “Duplicate Layer”
In dialog “Destination” choose ‘New”
This gives you a new document the same height and width as the original with your new layer in it’s respective place
Choose menu “Image > Trim” (There are many options when trimming but for this purpose the default meets the requirement)
To save as, you have two choices, the classic “Ctrl+Alt+Shift+S” to open the “Save For Web” dialog or you can Right click layer and choose “Quick Export As PNG”
Compression varies – on small simple graphic QE was more compressed – on large colorful file – SFW was smaller.

Style, Layout, Paint and Composite

December 12, 2015January 5, 2016 Peter Dillon

I am blockquote-ing everything that is referenced, since I’ve borrowed some information from MDN and Google articles that are already worded perfectly.

Basic rules are:

Stick to ONLY transform and opacity changes for your animations.
Promote moving elements (or position:fixed elements) with will-change or translateZ.
Avoid overusing promotion rules; layers require memory and management.

There are two key factors in this area that affect page performance: the number of compositor layers that need to be managed, and the properties that you use for animations.

The best-performing version of the pixel pipeline avoids both layout and paint, and only requires compositing changes. In order to achieve this you will need to stick to changing properties that can be handled by the compositor alone. Today there are only two properties for which that is true: transforms and opacity:

Google Developers

The caveat for the use of transforms and opacity is that the element on which you change these properties should be on its own compositor layer. In order to make a layer you must promote the element. Google Developers

To promote an element onto it’s own layer, including elements that ‘stand still’ with position fixed – use the following:

.moving-element {
  will-change: transform;
}

.moving-element {

will-change: transform;

}

The will-change CSS property provides a way to hint browsers about the kind of changes to be expected on an element, so that the browser can setup appropriate optimizations ahead of time before the element is actually changed. Mozilla MDN

Given that we are allowed to animate opacity with no performance hit, I’m not sure why it’s included, but here are some values you can apply will-change: to:

will-change: transform;
will-change: opacity;
will-change: left, top;

will-change: transform;

will-change: opacity;

will-change: left, top;

For older browsers, or those that don’t support will-change:

.moving-element {
  transform: translateZ(0);
}

.moving-element {

transform: translateZ(0);

}

The translateZ(); CSS function moves the element along the z-axis of the 3D space as demonstrated in the pen below.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”KVWmGG” default_tab=”result” user=”peterdillon”]See the Pen KVWmGG by Peter (@peterdillon) on CodePen.[/codepen_embed]

Be cautious: Do not promote too many elements because it uses browser memory space and for devices with smaller allocation, it can have a negative impact on performance.

JS and Layout Engine Concurrent Race Condition

Just a note about JavaScript and browser layout engines:


var img = new Image();
img.src = "http://foo.com/pic.gif";
document.body.appendChild(img);
while(img.naturalHeight == 0) {
// loops forever with a single threaded semantic
}

var img = new Image();

img.src = "http://foo.com/pic.gif";

document.body.appendChild(img);

while(img.naturalHeight == 0) {

// loops forever with a single threaded semantic

}

This loops because the layout engine has not yet calculated the height (or any other attributes) of the the image.

JavaScript this, self, bind, call, and apply

December 6, 2015April 3, 2016 Peter Dillon

When a function is set and the this value is not assigned, it is always the window object. It can change depending on where the function is invoked.


console.log(this); // Window
function f1() {
  console.log(this); // Window
}
f1();
var f2 = function() {
  console.log(this); // Window
}

console.log(this); // Window

function f1() {

console.log(this); // Window

}

f1();

var f2 = function() {

console.log(this); // Window

}

The quirk is, why does javascript set the this value of a function, within a function within an object to the window object?


var o = {
  name: "Peter",
  myFunc: function() {
    this.name = "John";
    console.log(this);
    var setname = function(newname) {
      this.name = newname;
    }
    setname("Updated to Jim");
    console.log(this); // Not changed
  },
}
o.myFunc();

var o = {

myFunc: function() {

this.name = "John";

console.log(this);

var setname = function(newname) {

this.name = newname;

}

setname("Updated to Jim");

console.log(this); // Not changed

}

o.myFunc();

How do we deal with it? The self pattern: var self = this;
But before that let’s look at what a function contains.

A function contains properties:
1. name property (can be anonymous)
2. code property (invocalble “( )”
Every function also contains three special methods
1. call
2. bind
3. apply

Here is an example of the self pattern.


var o = {
  name: "Peter",
  myFunc: function() {
    var self = this; // The magic line
    self.name = "John";
    console.log(self);
    var setname = function(newname) {
      self.name = newname;
    }
    setname("Updated to Jim");
    console.log(self); // Without the self pattern this would remain "John"
  },
}
o.myFunc();

var o = {

myFunc: function() {

var self = this; // The magic line

self.name = "John";

console.log(self);

var setname = function(newname) {

self.name = newname;

}

setname("Updated to Jim");

console.log(self); // Without the self pattern this would remain "John"

}

o.myFunc();

.bind, .call() and .apply() are accessed by using the dot notation.

.bind creates a copy of the function you are calling, and passes the object you want to be the this property.


var car = {
  make: "Honda",
  model: "Pilot",
  year: "2013",
  carInfo: function() {
    var info =  this.year + ", " + this.make + " " + this.model;
    return info;
  }
}
var displayInfo = function(color, weight) {
  console.log("The info is: " + this.carInfo() + " " + color + " " + weight);
}

var showCarInfo = displayInfo.bind(car);
showCarInfo(); 
//-------------------------

displayInfo.call(car, "white", "10,000 lbs");
displayInfo.apply(car, ["white", "10,000 lbs"]);

var car = {

make: "Honda",

model: "Pilot",

year: "2013",

carInfo: function() {

var info = this.year + ", " + this.make + " " + this.model;

return info;

}

var displayInfo = function(color, weight) {

console.log("The info is: " + this.carInfo() + " " + color + " " + weight);

}

var showCarInfo = displayInfo.bind(car);

showCarInfo();

//-------------------------

displayInfo.call(car, "white", "10,000 lbs");

displayInfo.apply(car, ["white", "10,000 lbs"]);

With .call() and apply() you are not making a copy – you are invoking the function directly and passing it’s this property with parameters – .apply() requires an array of parameters and .call() requires a list.

Since .bind() is creating a copy of the function, you have some useful patterns at your disposal – function borrowing, and function currying.


//-------------------------
// Function Borrowing
var car2 = {
  make: "Chevy",
  model: "Traverse",
  year: "2016",
}
console.log(car.carInfo.apply(car2) );

//-------------------------
// Function Currying
function multiply(a,b) {
  return a*b;
}
var multiplyByTwo = multiply.bind(this, 2);
console.log( multiplyByTwo(4) );

var multiplyByThree = multiply.bind(this, 3);
console.log( multiplyByThree(4) );

//-------------------------

// Function Borrowing

var car2 = {

make: "Chevy",

model: "Traverse",

year: "2016",

}

console.log(car.carInfo.apply(car2) );

//-------------------------

// Function Currying

function multiply(a,b) {

return a*b;

}

var multiplyByTwo = multiply.bind(this, 2);

console.log( multiplyByTwo(4) );

var multiplyByThree = multiply.bind(this, 3);

console.log( multiplyByThree(4) );

HTML5 localStorage

December 5, 2015March 21, 2018 Peter Dillon

As an exercise, I wanted to use vanilla javascript and localStorage() to take two items from the input fields, store them in localStorage, then get those stored items and place them as values back into the inputs. Finally clearing all localStorage contents and the input fields.

The HTML looks like this:


<form id="localStorageTest" method="post" action="">
	    <label>Question 1</label><br>
	    <input type="text" name="q0" id="q0" class="q" value="" /><br>
	    <label>Question 2</label><br>
	    <input type="text" name="q1" id="q1" class="q" value="" /><br>
		<button type="button" id="storage">Store Items</button>
		<button type="button" id="retrieve">Get Items</button>
    <button type="button" id="clear">Clear Items</button>
</form>

<label>Question 1</label><br>

<label>Question 2</label><br>

<button type="button" id="storage">Store Items</button>

<button type="button" id="retrieve">Get Items</button>

<button type="button" id="clear">Clear Items</button>

</form>

The JS looks like this:


var stbt = document.getElementById("storage");
stbt.addEventListener("click", storeIt, false);

var rtbt = document.getElementById("retrieve");
rtbt.addEventListener("click", retrieve, false);

var clbt = document.getElementById("clear");
clbt.addEventListener("click", clear, true);

var elv = document.getElementsByClassName('q');

function storeIt() {
	for (var i = 0; i < elv.length; i++) {
		var theVal = elv[i].value;
		if(theVal == '') { 
			alert("Enter content, because localStorage will save empty stings."); 
			return false; 
		}
		var storeName = elv[i].className + [i];
		localStorage.setItem(storeName, theVal);
	}
	alert("You've stored items. Refresh and click 'Get Items' to re-populate the fields.");
}

function retrieve() {
	if (window.localStorage.length == 0) { alert("Nothing stored!"); }
	for (var i = 0; i < localStorage.length; i++){
    	var obj = localStorage.getItem(localStorage.key(i));
    	document.getElementById('q'+[i]).value = localStorage.getItem('q'+[i]);
	}
}
function clear() {
  localStorage.clear();
  var vlu = document.getElementsByClassName('q');
  for (var i = 0; i < vlu.length; i++){
    vlu[i].value = '';
  }
}

var stbt = document.getElementById("storage");

stbt.addEventListener("click", storeIt, false);

var rtbt = document.getElementById("retrieve");

rtbt.addEventListener("click", retrieve, false);

var clbt = document.getElementById("clear");

clbt.addEventListener("click", clear, true);

var elv = document.getElementsByClassName('q');

function storeIt() {

for (var i = 0; i < elv.length; i++) {

var theVal = elv[i].value;

if(theVal == '') {

alert("Enter content, because localStorage will save empty stings.");

return false;

}

var storeName = elv[i].className + [i];

localStorage.setItem(storeName, theVal);

}

alert("You've stored items. Refresh and click 'Get Items' to re-populate the fields.");

}

function retrieve() {

if (window.localStorage.length == 0) { alert("Nothing stored!"); }

for (var i = 0; i < localStorage.length; i++){

var obj = localStorage.getItem(localStorage.key(i));

document.getElementById('q'+[i]).value = localStorage.getItem('q'+[i]);

}

function clear() {

localStorage.clear();

var vlu = document.getElementsByClassName('q');

for (var i = 0; i < vlu.length; i++){

vlu[i].value = '';

}

And finally a Codepen.io if you’d like to play with it:

See the Pen Load JsonP File From Cross Domain Server And Store In localStorage() by Peter (@peterdillon) on CodePen.

The Definitive “Front-End Developer Job Interview Questions” And My Answers

December 3, 2015March 23, 2018 Peter Dillon

As seen on Github.

General Questions:

What did you learn yesterday/this week?
How to develop IOS and Android apps with the AngularJS powered Ionic framework. Read more about Ionic

"cordovaPlatforms": [ "ios", "android" ]

1
2
3
4

"cordovaPlatforms": [
    "ios",
    "android"
  ]
What is a recent technical challenge you experienced and how did you solve it?
Creating an interface (for Progressive Insurance) that allowed for users to filter results in a large list with a proprietary, hierarchical system. Users could then add or remove those items to another list of “saved” items. The filtering system could be adjusted, yet retain the saved list through the process until they “save” to DB or print. View the full prototype version (hit escape to remove spinner) or view a pen of the table manipulations:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”doKVjW” default_tab=”result” user=”peterdillon”]See the Pen Throw Rows of Data Between Tables by Peter (@peterdillon) on CodePen.[/codepen_embed]
What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
UI: Depending on your audience, accessibility can be your biggest challenge and resources such as http://a11yproject.com are great in suggesting patterns to achieve whats needed. Beyond that, a pleasant palette and intuitive interfaces are the foundation, which arise from well developed style guides containing code snippets that help developers quickly deliver features with pre-themed UI elements that alleviate common pain points such as non-conforming elements that may distract stake holders during the iteration and approval process.
Security:
- Login pages should be encrypted
- Data validation should be done server-side
- Manage your Web site via encrypted connections
Performance: Concatenation and minification of JS and CSS files, delivering SVG images wherever possible, icon fonts, use sprites as necessary and compressing images.
SEO: When it comes to SEO, I refer to my approach as “the new old school.” That is, I don’t believe there is any “magic in your meta” tags and I encourage business owners to simply create content that is relevant to your business, write clearly and often, advertise when necessary, make sure your site is mobile friendly, that sharing your content is easy, and you have control of your Google, Twitter, Facebook, Yahoo, Bing, Foursquare, Pinterest, Instagram (insert hot new here…) accounts, and everything really does fall into place. As your business grows, more visitors come, more people share and the search engines notice.
Maintainability and Technology Considerations: Use tooling that is more flexible and adhere’s to a standard. A great example of this is PostCSS, where the concept is, you write plain old CSS – and NEW CSS as well, including syntax not yet implemented in browsers and let a plugin process your css and manipulate the output so it’s browser ready. Then as time passes, W3C syntax is agreed upon, pre-fix use subsides, and you can re-process your CSS with less and less manipulation.
Talk about your preferred development environment.
Typically I use Sublime Text with a local server. As I state in my work history I have been involved in a vast variety of dev teams, each with it’s own flavor. Most recently I worked at Aspect Software, a Microsoft shop, where I embraced IIS, Visual Studio, Team Foundation Server, Office 365, One Drive, Share Point and more. As an aside, upon employment I was issued a Windows Phone and found the interface very exciting despite the lack of applications built for it.
Which version control systems are you familiar with?
Git, Bitbucket, SVN, TFS.
Can you describe your workflow when you create a web page?
Here I describe “My Process” in detail.
If you have 5 different stylesheets, how would you best integrate them into the site?
1. Break them up onto to different CDN servers to leverage domain sharding.
2. Employ the “new old” technique of adding “above the fold” css inline in the head of your document – reducing http requests and improve perceived performance.
3. Using SASS I would break up my files into related chunks – all of which are concatenated and compressed using compass, sass with gulp or grunt in your build process.
Can you describe the difference between progressive enhancement and graceful degradation?
Graceful degradation is when you initially serve the best possible user experience, with all modern functionality, but use feature detection to “gracefully degrade” parts of your application with a fallback or polyfill. You could use Modernizr like this:

if ($("html").hasClass("lt-ie9")) { // Earlier than IE9 // fallback here }

1
2
3
4
5
6

if ($("html").hasClass("lt-ie9")) {
// Earlier than IE9
// fallback here
}

Progressive enhancement ensures a page works at the lowest expected abilities of browsers. So if you have a JavaScript web application that enhances a persons ability to send information to a database with features like ajax – at the very least you need to provide the ability for a person to send that same information without JavaScript enabled. In this case a simple form with full-page refresh will do what you need.
How would you optimize a website’s assets/resources?
Concatenate and compress CSS, JavaScript and HTML files wherever possible, configure your server to deliver a Gzip files, cache resources, set longer expirations dates on http headers of resources you don’t expect to change often – such as a logo. Images can be some of the heaviest files we deliver, so compress wisely. Soon the picture element will be implemented across browsers, so we can optimize the delivery of image content. Also in the near future consider using WebP format for images – it is quite smaller in size than JPEG and PNG files. Finally, use a CDN or other domains to host your resources and leverage domain sharding.
How many resources will a browser download from a given domain at a time?
Approximately 6. IE leads the pack with 8.
What are the exceptions?
When downloading different resources from multiple domains – also known as “domain sharding.”
Name 3 ways to decrease page load (perceived or actual load time).
1) LocalStorage 2) Caching resources 3) dns-prefetch (sample below) 4) Keep resources on a CDN

<link rel="dns-prefetch" href="http://peterdoes.it"> <a href="http://peterdoes.it">My website</a>

1
2
3
4

<link rel="dns-prefetch" href="http://peterdoes.it">
<a href="http://peterdoes.it">My website</a>
If you jumped on a project and they used tabs and you used spaces, what would you do?
Get used to it and adjust. Adjusting and adapting are some of my greatest strengths.
Describe how you would create a simple slideshow page.
If you could master one technology this year, what would it be?
Angular ng-animate. I have been studying AngularJS and JavaScript very intensely, and being the “design guy” means I need to make applications pop and shine. When committing to a framework like AngularJS -it’s best to use their way of coding to maintain consistency and help future developers understand the “what, why and how” of the application. Furthermore, when you stick to the chosen framework’s way, you inherit documentation as well.
Explain the importance of standards and standards bodies.
To ensure new tools, and methods maintain backwards compatibility, and that new concepts and methods are well documented and agreed upon as THE best solution to certain issues – currently we can see this in action regarding responsive images.
What is Flash of Un-styled Content? How do you avoid FOUC?
When page content displays before styling resources are rendered. Being that CSS is a blocking resource, you can avoid FOUC by putting all of your <link> references in the head of your document – forcing CSS to download before the html.
Explain what ARIA and screen readers are, and how to make a website accessible.
Screen readers are software programs that provide assistive technologies that allow people with disabilities (such as no sight, sound or mouse-ing ability) to use web applications. You can make your sites more accessible by following ARIA standards such as semantic HTML, alt attributes and using [role=button] in the expected ways.
Tips
Using ARIA
A11Y Project
Explain some of the pros and cons for CSS animations versus JavaScript animations.
Regarding optimization and responsiveness the debate bounces back and forth but, the concept is:
- CSS animations allows the browser to choose where the animation processing is done, CPU or the GPU. (Central or Graphics Processing Unit)
- That said, adding many layers to a document will eventually have a performance hit.
- JS animation means more code for the user to download and for the developer to maintain.
- Applying multiple animation types on an element is harder with CSS since all transforming power is in one property transform
- CSS animations being declarative are not programmable therefore limited in capability.
What does CORS stand for and what issue does it address?
Cross Origin Resource Sharing. To address the fact that browsers restrict cross-origin HTTP requests initiated from within scripts. CORS gives web servers cross-domain access controls, which enable secure cross-domain data transfers.

HTML Questions:
What does a ‘doctype’ do?
Let’s the browser know the version of and language of the document.
What’s the difference between standards mode and quirks mode?
Quirks mode was to support websites built before standards became widely implemented.

Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older. MDN

I actually used this technique once to make sure IE8 would be able to function on an internal network…

because IE is… A) Detecting that this website is coming from the Local Intranet Zone (vs. the Internet Zone). B) And, in-turn, rendering the website in Compatibility View (usually in IE7 mode)

Reference and a list of quirks.
What’s the difference between HTML and XHTML?
The Extensible Hypertext Markup Language, or XHTML, has two important notes for front end developers. 1) It needs to be well formed, meaning all elements need to be closed and nested correctly or you will return errors. 2) Since it is more strict than HTML is requires less pre-processing by the browser, which may improve your sites performance.
Are there any problems with serving pages as application/xhtml+xml?
Strictly though, you should take into account the q values in the accept header that indicates the preference of the user agent to each content type. If a user agent prefers to accept text/html but will accept application/xhtml+xml as an alternate, then for greatest safety you should have the page served as text/html.
How do you serve a page with content in multiple languages?
Programmatically reset the:

<html lang="en"> // en=English, fr=French etc.

1

<html lang="en"> // en=English, fr=French etc.

You can even set the language on specific content blocks individually:

<blockquote lang="fr">

1

<blockquote lang="fr">

Le plus grand faible des hommes, c’est l’amour qu’ils ont de la vie.

Linking to other sites:

If the page you are linking to is written in a different language to the current page, you need to let people using assistive technologies know about this. This can be done by using the ‘hreflang’ attribute. The ‘hreflang’ attribute allows you to inform people the primary language of the page found when following the link is different to the current page.

For example to link to a page written in French from a page written in English, you would use:

<a hreflang="fr">French</a>

1

<a hreflang="fr">French</a>

Reference W3.org
Also note, the lang attribute is supported on all elements except:

<applet> <base> <basefont> <br> <frame> <frameset> <iframe> <param> <script>

1

<applet> <base> <basefont> <br> <frame> <frameset> <iframe> <param> <script>
What kind of things must you be wary of when design or developing for multilingual sites?
What are data- attributes good for?
For creating custom attributes that you can use to find elements or DOM nodes you want to manipulate. JavaScript frameworks use this feature a lot.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
more semantic text markup
new form elements
new video and audio elements
javascript API
canvas and SVG
geolocation API
new data storage

Here’s a couple pens exploring some of the new form elements:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”WrwRpO” default_tab=”result” user=”peterdillon”]See the Pen Common HTML5 Form Element Features by Peter (@peterdillon) on CodePen.[/codepen_embed]
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”MaovZd” default_tab=”result” user=”peterdillon”]See the Pen Datalist – for type ahead function by Peter (@peterdillon) on CodePen.[/codepen_embed]

Describe the difference between a: cookie sessionStorage localStorage
cookie: A text file saved on the users computer to store and retrieve data
sessionStorage: Is memory space in a browser to save temporary data until the window or tab is closed.
localStorage: Like cookie, where data can be saved and retrieved after browser sessions, but stored in memory like sessionStorage. Data is stored as plain key value pairs and can be stored as Json objects.

// Stored as Json
var dataToStore = JSON.stringify(data);
localStorage.setItem('someData', dataToStore);
// Retrieve
var localData = JSON.parse(localStorage.getItem('someData'));

// Stored as Json

var dataToStore = JSON.stringify(data);

localStorage.setItem('someData', dataToStore);

// Retrieve

var localData = JSON.parse(localStorage.getItem('someData'));

I made a pen exploring localStorage:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”vLYpjY” default_tab=”result” user=”peterdillon”]See the Pen LocalStorage Set/Get From/To Input Fields by Peter (@peterdillon) on CodePen.[/codepen_embed]

Describe the difference between: script – script async – script defer
Normal Execution: script:
Parsing of the HTML code pauses while the script is executing. For slow servers and heavy scripts this means that displaying the webpage will be delayed.

Deferred Execution: script defer
Delays script execution until the HTML parser has finished. A positive effect of this attribute is that the DOM will be available for your script. However, since not every browser supports defer yet, can’t rely on it.

Asynchronous Execution: script async
HTML parsing may continue and the script will be executed as soon as it’s ready.
Why is it generally a good idea to position CSS ‘link’ references between ‘head’ and JS ‘script’ just before closing body? Do you know any exceptions?
CSS goes in the head to calculate the styles and layout before DOM elements load to prevent flashes of un-styled content. Loading JS just before the body close means the DOM will be available for it.

However, modern browsers have implemented ‘speculative parsing’ – where the browser ‘looks ahead’ in the HTML and begins downloading resources before scripts download and execute. (reference)

34) What is progressive rendering?
It is rendering the data as it’s being downloaded. This is particularly useful on documents that have tons of text. You can see it on a page that has a lot of text – and where the scrollbar will get shorter in length as more data comes in – increasing the vertical size of the document – yet, it would display the downloaded text immediately. As more data came down the pipe – the page would get longer. This didn’t rely on the closing body or html tag – and it certainly wouldn’t render the entire page on the server – then download – which is a standard complaint about modern frameworks. But there is a technique called “Flushing the Buffer” that can be implemented on the server. I don’t know that much about the technique, but found a few resources discussing it. Ref 1 Ref 2
Have you used different HTML templating languages before?
No. I’ve only yet written html in full. But, I am looking into Jade as I write this.

CSS Questions:
What is the difference between classes and ID’s in CSS?
Classes are reusable CSS reference selectors named class= in the HTML document and prefixed by a period in a stylesheet. ID’s are declared as id= in HTML and referenced by the # (hashtag.) ID’s are designed for unique specificity since they can only ever be used by JavaScript once. Though styles applied by ID through CSS do affect all instances of the ID.
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
Resetting is setting all default (user agent) tables, blockquotes, margins, padding, borders, ul, ol, to 0 – forcing the designer to re-style every element as it comes into play. Normalizing is a newer approach which leaves many of the default styles in place, some added opinions but most importantly, it addresses many of the cross browser quirks for you. I prefer using normalize as it can make creating forms much faster.
Describe Floats and how they work.
Floats are a position property that is handy in setting up flexible combinations of elements as well as page layouts. For layout, the clear: becomes essential in keeping things stacked as you expect. A floated element can misbehave, if it can squeeze up and in – it will. Of course the biggest quirk is the parent collapse issue. If you have several floated elements inside a parent – the parent will collapse to a height of 0. To address this, the ‘clear float’ method has become a varied science in itself. But usually I choose the overflow: auto;, or the pseudo element clearfix method. And mind you, flex-box is around the corner, so modern layout is about to get much easier.
Describe z-index and how stacking context is formed.
By default, an elements stacking order is how it appears in the html. Once positioning and z-index is added, each parent of a group of elements creates a new stacking context. Admittedly, it’s pretty complex, but I haven’t had many situations where more than two z-index / stacking arrangements were needed. I created a pen to illustrate this:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”mVPzPG” default_tab=”result” user=”peterdillon”]See the Pen Simple Z-index and Stacking Context by Peter (@peterdillon) on CodePen.[/codepen_embed]
Describe BFC (Block Formatting Context) and how it works.
What are the various clearing techniques and which is appropriate for what context?
As mentioned earlier in the ‘floats’ question, there are essentially three, 1) ‘add a div’ method, 2) the overflow:auto on the parent method, 3) the classic clearfix and now the 3a) micro clearfix. Both mimic the ‘add a div’ method except that it uses a pseudo element in place of an extra div for leaner HTML and better semantics.
Explain CSS sprites, and how you would implement them on a page or site.
Sprites are when you combine 2 or more images in one single graphic file in order to reduce http requests. You would then place the image into a specifically sized container, then adjust the background-position of your sprite-image to ‘show through’ the correct part of the image. Here is a pen to show it in action:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”eJZxJz” default_tab=”result” user=”peterdillon”]See the Pen Sprite Control by Peter (@peterdillon) on CodePen.[/codepen_embed]

What are your favorite image replacement techniques and which do you use when?
Chris Coyier of CSS-Tricks has created an historical record of all the different techniques used throughout the years. I have used this technique very seldom since most of the applications I have built didn’t require it. But here is the latest technique, initialized by Jeffery Zeldman and tweaked by Scott Kellum (Ref)


.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.screen-reader-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hide-text {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

}

.screen-reader-text {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

}

How would you approach fixing browser-specific styling issues?
Classically the biggest culprit was IE, (post-Netscape) and the easiest fix would be to load a supplementary stylesheet to add hacks and fixes for the css that needed it. A second technique was adding a second line of css with an ‘unrecognized by others’ character so it was ignored by all other browsers.


// Additional Stylesheet
<!-- [if IE]>
		<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
// Unrecognized Characters and 'End of Line /9' Hack.
// There are so many similar IE hacks like this
// Check Paul Irish's link below for the definitive list (2009)
.lte-ie8 .name {
  color: green; /* IE8 and older */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}
#name { color: blue\9; }

// Additional Stylesheet

<!-- [if IE]>

<![endif]-->

// Unrecognized Characters and 'End of Line /9' Hack.

// There are so many similar IE hacks like this

// Check Paul Irish's link below for the definitive list (2009)

.lte-ie8 .name {

color: green; /* IE8 and older */

*color: blue; /* IE7 and older */

_color: red; /* IE6 and older */

}

#name { color: blue\9; }

Paul Irish has an extensive list to refer to when and if these types of issues arise. Also to note, earlier I discussed using ‘normalize’ over ‘css reset’ – part of that reason is because it addresses many of the cross browser form element quirks you will find.

How do you serve your pages for feature-constrained browsers?
I use Modernizr as the check and then address issues like this:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”QbZaOw” default_tab=”js” user=”peterdillon”]See the Pen CSS3 Animated Alert Message – with IE8 Fallback by Peter (@peterdillon) on CodePen.[/codepen_embed]
What techniques/processes do you use?
One technique could be ‘UA sniffing.’ The UA String gives you the rendering engine version, the OS and the device so you can serve specific pages that way. I don’t have much experience with setting a server to accommodate browser constraints.

What are the different ways to visually hide content (and make it available only for screen readers)?


.hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important; 
  width: 1px !important; 
  overflow: hidden;
}

.hidden {

position: absolute !important;

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

clip: rect(1px, 1px, 1px, 1px);

padding: 0 !important;

border: 0 !important;

height: 1px !important;

width: 1px !important;

overflow: hidden;

}

Have you ever used a grid system, and if so, what do you prefer?
I’ve used Bootstrap, Foundation, Skeleton and rolled my own. I prefer rolling my own to keep a naming system that I prefer and not rely on (potentially) bloated systems that have a lot of css I would not use, but there are two advantages to using a framework/library: 1) They typically have a lot more eyes on the code as well as devices to test on, so it may be safer, particularly in edge cases 2) For prototyping you can’t beat the speed to discovery process.
Have you used or implemented media queries or mobile specific layouts/CSS?
At this point I think most front end designers and developers have experienced using media queries – either through a mobile framework or writing their own. I personally have used them for responsive applications and found with the help of SASS nesting, it can remove a lot of complexity. But there is much more to media queries than @media and screen(){} – so I spent some time setting up a codepen with all the media queries in action:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”RWvXxq” default_tab=”result” user=”peterdillon”]See the Pen All Media Queries by Peter (@peterdillon) on CodePen.[/codepen_embed]
Are you familiar with styling SVG?
The simplest implementation, uses a limited cascade which gives you have the ability to style the fill and color of SVG objects using the elements and attributes svg, use, symbol, path and inherit. Basically, you are setting up a a fill and path SVG object, reusing that math to repeat and add limited stylization. Here is an example:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”VeKdWM” default_tab=”result” user=”peterdillon”]See the Pen Simple SVG Styles. by Peter (@peterdillon) on CodePen.[/codepen_embed]
Being a designer, I’ve had awareness of Adobe Illustrator’s capability to output as SVG for many years. But being a designer for the web, I’ve never really had a use for the format. Now that the day of the SVG is upon us, I went ahead and successfully got the Grunticon build process working using the free Ballicons full color SVG icon set. The reason I built this boilerplate was to ensure that on my next project, I’ll have the desired flexibility of SVG with PNG fallback automated in the build process. I also made a pen to show the output. Ballicons Grunticon
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”dGMLNp” default_tab=”result” user=”peterdillon”]See the Pen SVG Grunticon Ballicons Build Output by Peter (@peterdillon) on CodePen.[/codepen_embed]
List of style-able SVG attributes and SVG 2
How do you optimize your webpages for print?
Remove and reduce colors to grayscale and black and whites if possible. Also printing gray’s can reduce the amount of black ink needed – so that’s a bonus if you want to really be nice. Add styling if you want the URLs to print out:

@media print{ a:after{content:" (" attr(href) ") "; font-size:0.8em; font-weight:normal; }

1
2
3
4
5
6

@media print{
a:after{content:" (" attr(href) ") ";
font-size:0.8em;
font-weight:normal;
}

Recently while building an application for Progressive Insurance it was expected that a user would be able to print the results of their schedule sorting. The requirements weren’t too challenging, the application opened a new window with table data that called a separate stylesheet.
Here is a codepen:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”ZQWZKN” default_tab=”result” user=”peterdillon”]See the Pen Basic Print Styles by Peter (@peterdillon) on CodePen.[/codepen_embed]
What are some of the “gotchas” for writing efficient CSS?
What are the advantages/disadvantages of using CSS preprocessors?
Advantages of SASS/LESS: Use of variables, mixins, nesting, looping, partials and more.
Advantages POSTCSS: Use of future syntax. Ability to select only the plugins you need for a particular project. Writing plain CSS and applying the plugin to output necessary syntax that suits your needs – which in turn allows for the ability to remove or update that plugin if at any time it is not useful anymore. In other words, POSTCSS offers a lot of flexibility AND all of the features SASS/LESS offer. Versions of POSTCSS have been developed for both Grunt and Gulp.
Disadvantage POSTCSS: Keeping track of plugins for older projects could get hairy, though you have a package.json to reference.
Disdvantages of SASS/LESS: They are monolithic, and you need to learn a new language. I found this succinct comment:

Post-processors have to be implicit to silently improve CSS (prefixes, fallbacks, etc.) and pre-processors have to be explicit (use its own language) to generate CSS. (Ref – comment #1)
Describe what you like and dislike about the CSS preprocessors you have used.
I’ve been nothing but impressed and content with the Compass/Sass workflow I’ve been using. Then when I began teaching myself Grunt, I was introduced to POSTCSS and I’ve been just as impressed and pleased to get on board. Maybe I’m too easy.
How would you implement a web design comp that uses non-standard fonts?
Okay this is a very contentious subject. Firefox and Opera, though at work on the issue, have an issue called FOUT “Flash Of Unstyled Text” The designer in me want’s every font choice there is. The developer and user in me says “I am only concerned with speed. I could not care less about that special font.” Let me put it this way, I land on both sides here. They are really easy to implement, but given that our devices are smaller and connections are not always reliable, you really need to consider your audience. If you want to squeeze people out that are on shaky connections – you better have a really good reason for it. Or you cold assume your audience always is in the toughest situation possible and design for that.
Explain how a browser determines what elements match a CSS selector.
It matches from right to left for computing efficiency. Searching up the descendant chain stops when a match is found. If you went down, the renderer would have to say “okay matched .a { }, now is there a .a .b { } match and continue downward.
Describe pseudo-elements and discuss what they are used for.
Pseudo element use has been described in a previous question as a more semantic float ‘clearfix’ solution. They can be used as extra styling nodes as well. They could be thought of as ‘free markup objects’ that you don’t have to markup. I have used it for some iconography placeholder for prototyping. CSS-Tricks again comes through with a thorough post on all the wonderful things pseudo elements can achieve.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
The box model is how browsers by default add border and padding sizes to elements with a specified width. To overcome this problem the short answer is:

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

1
2
3
4
5
6
7
8

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Which gives you the flexibility to say “Everything should be box-sizing: border-box but if I set this somewhere to box-sizing: content-box, there is a good reason and I would like the descendants to keep that style.” Here is my pen:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”yeOOxb” default_tab=”result” user=”peterdillon”]See the Pen The Box Model by Peter (@peterdillon) on CodePen.[/codepen_embed]
What does { box-sizing: border-box; } do? What are its advantages?
This is explained above.

List as many values for the display property that you can remember.
I remembered these: block, inline, inline-block, none.
So I went and looked in up on MDN – Quickly I remembered “Oh yeah, all those table ones…” but I had no idea there was this many:


display: contents;
display: list-item;
display: inline-list-item;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container ;
display: run-in;

/* Global values */
display: inherit;
display: initial;
display: unset;

display: contents;

display: list-item;

display: inline-list-item;

display: table;

display: inline-table;

display: table-cell;

display: table-column;

display: table-column-group;

display: table-footer-group;

display: table-header-group;

display: table-row;

display: table-row-group;

display: flex;

display: inline-flex;

display: grid;

display: inline-grid;

display: ruby;

display: ruby-base;

display: ruby-text;

display: ruby-base-container;

display: ruby-text-container ;

display: run-in;

/* Global values */

display: inherit;

display: initial;

display: unset;

So, what is a ‘ruby’ display property? ruby annotations are for showing pronunciation of East Asian characters. I made a pen exploring the magic of ruby.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”OMXroQ” default_tab=”result” user=”peterdillon”]See the Pen Using The Ruby Element by Peter (@peterdillon) on CodePen.[/codepen_embed]

What’s the difference between inline and inline-block?
Elements with display:inline-block elements are like display:inline elements, but they can have a width and height. Sounds simple, but these guys can push each other around forming some quite unexpected and ugly results.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”bEpyVJ” default_tab=”result” user=”peterdillon”]See the Pen Inline And Inline-Block by Peter (@peterdillon) on CodePen.[/codepen_embed]
What’s the difference between a relative, fixed, absolute and statically positioned element?
Static: is the default state. Elements stay in the flow of the document.
Relative: The position measurements will be relative to it’s containing div. Also stays in the document flow.
Fixed: Taken out of the document flow, position is relative to the window.
Absolute: Positions elements exactly relative to it’s parent. Without a parent it would act as fixed would.
The ‘C’ in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)?
How can you use this system to your advantage?
Priority
1. User agent declarations
2. User declarations
3. Author declarations
4. Author !important declarations
5. User !important declarations.

You can use cascading to your advantage by doing something as simple as this. You are now set up for flexible, web-safe, font variety for much of your blog:

body { font-size:100%; line-height:1.125em; } h1 { font: 1.5em Georgia; } p { font: 1em Palatino; }

1
2
3
4
5

body { font-size:100%; line-height:1.125em; }
h1 { font: 1.5em Georgia; }
p { font: 1em Palatino; }

I feel like I’ve been doing this so long, that it’s hard to put into words. It’s just understood. That said, we have all run into a “wtf” moment when you really need to dig into devtools to see why a thing is doing what you think it shouldn’t.

I just wanted to add one more part to this question. How is the CSS inheritance calculated?
Specified value: The user agent determines whether the value of the property comes from a style sheet, is inherited or should take its initial value.
Computed value: The specified value is resolved to a computed value and exists even when a property doesn’t apply. The document doesn’t have to be laid out for the computed value to be determined.
Used value: The used value takes the computed value and resolves any dependencies that can only be calculated after the document has been laid out (like percentages).
Actual value: This is the value used for the final rendering, after any approximations have been applied (for example, converting a decimal to an integer). Ref: Smashing Mag
What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
I’ve been satisfied with the ease of use of all the frameworks I alluded to earlier. Typically writing css for large proprietary systems I’ve often started from scratch.
Have you played around with the new CSS Flexbox or Grid specs?
Not that much, I’m still wrapping my head around a lot of it but I recently (slowly and with a lot of attention) went through the flexboxfroggy.com game application and found it was really helpful in acquainting myself with many of the most used layout controls. Of course as usage and acceptance grows – I will be getting back to give more thoughtful response to this question.
How is responsive design different from adaptive design?
Responsive uses media queries to adjust page layout, font size and more to customize a view for a user based on the size of their viewport. Adaptive is doing UA sniffing to adjust (possibly using media queries) the design, or the content delivered – based on their device and/or version of OS and browsers.

Have you ever worked with retina graphics? If so, when and what techniques did you use?
While SVG can cover all of your vector need by scaling beautifully – the responsive image battle (which includes retina) rages on. The picture element seems to be the winner and the syntax will look like this:


<picture>
	<source srcset="logo.svg" type="image/svg+xml" />
	<img src="logo.png" alt="my logo" />
</picture>
// But a real world situation for a fashionable site that 
// wants to deliver the cutting edge image formate (webP) but has strict 
// requirements to deliver the perfect size - will look more like this:
<picture>
	<!-- 16:9 crop (or 'desktop crop' you could say )-->
	<source srcset="myimage/detail/large.webp 1920w, myimage/detail/medium.webp 960w, myimage/detail/small.webp 480w" type="image/webp" media="(min-width: 36em)" />
	<source srcset="myimage/detail/large.jpg 1920w, myimage/detail/medium.jpg 960w, myimage/detail/small.jpg 480w" media="(min-width: 36em)" />
	<!-- square crop (or 'instagram crop' - you could say)-->
	<source srcset="myimage/square/large.webp 822w, myimage/square/medium.webp 640w, myimage/square/small.webp 320w" type="image/webp" />
	<source srcset="myimage/square/large.jpg 822w, myimage/square/medium.jpg 640w, myimage/square/small.jpg 320w" />
	<img src="myimage/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." />
</picture>

</picture>

// But a real world situation for a fashionable site that

// wants to deliver the cutting edge image formate (webP) but has strict

// requirements to deliver the perfect size - will look more like this:

</picture>

So all in all, it’s pretty hairy. There is lots of markup and future maintenance – but I admit it is the best solution I have seen so far and I appreciate all the effort that has been put into it.

Is there any reason you’d want to use ‘translate()’ instead of *absolute positioning*, or vice-versa? And why?
Translate puts the element on a new compositing layer which gives the browser a hint that this particular piece will be changing (which includes standing still: position: fixed;.) Furthermore, when ‘trbl’ absolute position are used and animated there is large hit on performance due to paint time. translate() puts the animation into GPU and no paint calculations are calculated at all.

JS Questions:

Explain event delegation
A common way I have used it is when I want find the item that is clicked on in a list – you add an event listener to the parent object. Then use the .target to reference the child object that emitted the event and react to it.


// HTML
<ul>
 <li id="li-1">Item 1</li>
 <li id="li-2">Item 2</li>
</ul>
//JS document.getElementById("parent-ul").addEventListener("click", function(e) { if(e.target) { console.log("Clicked on: ", e.target.id); } });

// HTML

<ul>

</ul>

//JS document.getElementById("parent-ul").addEventListener("click", function(e) { if(e.target) { console.log("Clicked on: ", e.target.id); } });

Explain how “this” works in JavaScript
‘this’ is a property inside a function or object that is a reference to itself. But ‘this’ can change depending on it’s execution context – e.g. like a function inside another function, that’s inside an object – attaches itself back to the global object. Some feel this is a bug. Though it can be avoided by setting the ‘var self = this;’ pattern, and just refer to the self var. In ES6 the let keyword will also fix this issue.


var c = {
    name: "c obj",
    log: function() {
        console.log(this); // Logs as 'Object' with name, etc
        this.name = "Updated c obj";
        console.log(this); // METHODS 'mutate' the object that I am contained in
        var setname = function(newname){
            this.name = newname; // This ODDLY attaches back to the WINDOW object - JS bug?
        }
        setname("Updated c once more!");
        console.log(this); // Output: "Updated c obj" again due to bug
        console.log(window.name); // Output: "Updated once more!"
    }
}
c.log();
//Rewritten to reference correct this
var d = {
    name: "d obj",
    log: function() {
        // To avoid the bug, we can set the this to self
        // as the first line of the object method and reference that instead
        var self = this;
        console.log(self); 
        self.name = "Updated d obj";
        console.log(self); 
        var setname = function(newname){
            self.name = newname; 
        }
        setname("Updated d once more!");
        console.log(self);
    }
}
d.log();

var c = {

log: function() {

console.log(this); // Logs as 'Object' with name, etc

this.name = "Updated c obj";

console.log(this); // METHODS 'mutate' the object that I am contained in

var setname = function(newname){

this.name = newname; // This ODDLY attaches back to the WINDOW object - JS bug?

}

setname("Updated c once more!");

console.log(this); // Output: "Updated c obj" again due to bug

console.log(window.name); // Output: "Updated once more!"

}

c.log();

//Rewritten to reference correct this

var d = {

log: function() {

// To avoid the bug, we can set the this to self

// as the first line of the object method and reference that instead

var self = this;

console.log(self);

self.name = "Updated d obj";

console.log(self);

var setname = function(newname){

self.name = newname;

}

setname("Updated d once more!");

console.log(self);

}

d.log();

Explain how prototypal inheritance works:
It is an easy way to give methods to many objects at once. A practical example would be:


function Person(fn, ln) {
 this.fn = fn;
 this.ln = ln;
}
var peter = new Person("Peter", "Dillon");
Person.prototype.getFullName = function() {
 return this.fn + " " + this.ln;
}
console.log(peter.getFullName());

function Person(fn, ln) {

this.fn = fn;

this.ln = ln;

}

var peter = new Person("Peter", "Dillon");

Person.prototype.getFullName = function() {

return this.fn + " " + this.ln;

}

console.log(peter.getFullName());

Rather than wasting memory space attaching the method to every instance of Person(), now anytime an instance of Person() needs that method they can just call the prototype method.

What do you think of AMD vs CommonJS?
Explain why the following doesn’t work as an IIFE: function foo(){ }();.
Because there is no containing parenthesis to alert the compiler that this is to be invoked.
What needs to be changed to properly make it an IIFE?
(function foo(){ }());
What’s the difference between a variable that is: null, undefined or undeclared?
null is an object, undefined means it is declared but has no value, undeclared means it is trying to be referenced before it’s existence.
How would you go about checking for any of these states?
typeOf, ===, or == null (Ref)

What is a closure, and how/why would you use one?
The concept of a closure is that variables are only available within the context of the function in which they are created. You can use closures to mimic “private” method that keeps a variable unexposed, but then use a return statement to give the scope outside access to only what you want it to have.


var Module = (function() {
  var privateMethod = function(num) {
    var num;
        num = num;
    alert(num);
  };
  return {
    func_1: function() { console.log("func 1"); },
    func_2: function() { console.log("func 2"); },
    publicMethod: function(num) {
      privateMethod(num);
    }
  }
})();

Module.func_1();
Module.func_2();
Module.publicMethod(5);
Module.privateMethod(2); 
// Output of above: Uncaught TypeError: Module.privateMethod is not a function
// Inaccessible - it's private!

var Module = (function() {

var privateMethod = function(num) {

var num;

num = num;

alert(num);

};

return {

func_1: function() { console.log("func 1"); },

func_2: function() { console.log("func 2"); },

publicMethod: function(num) {

privateMethod(num);

}

})();

Module.func_1();

Module.func_2();

Module.publicMethod(5);

Module.privateMethod(2);

// Output of above: Uncaught TypeError: Module.privateMethod is not a function

// Inaccessible - it's private!

What’s a typical use case for anonymous functions?
As a callback and ways to implement private methods. When they are declared inline they can access variables in the parent scopes.
How do you organize your code? (module pattern, classical inheritance?)
What’s the difference between host objects and native objects?
Native objects: Object (constructor), Date, Math, parseInt, eval, string methods like indexOf and replace, array methods, …
Host objects: (assuming browser environment): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, .
What is the difference between:
function Person(){} // Declaration
var person = Person() // Declaration and assignment to ‘person’ var
var person = new Person() // ‘new’ is an operator that creates an empty object that invokes the Person function – and changes the ‘this’ variable which now points at the empty object (ONLY if the original function doesn’t return anything!) Using ‘new’ is a way to use a function to create an object – this is called a ‘function constructor.’
What’s the difference between .call and .apply?
.apply takes parameters as an array – .call takes comma separated parameters.
Explain Function.prototype.bind.
This is a way to add a function or method up the chain so that is is available to all members who share the same Prototype.
When would you use document.write()?
When you want some plain html text to appear in the DOM.
What’s the difference between feature detection, feature inference, and using the UA string?
Feature detection is using modernizr (or similar product) to detect the front-end web technologies (e.g. localStorage or css property) your browser supports.
The UA String gives you the rendering engine version, the OS and the device.
Feature inference is…

Explain AJAX in as much detail as possible.
Asynchronous Javascript and XML. Is a way to send and retrieve data without a page refresh.

$.ajax({
    url: 'http://your-app.com/api/news/today',
    dataType: 'JSONp',
    success: function(data, status) {
        $.each(data, function(key, value){
            //handle the data                
        });
    },
    error: function() {
        //handle the error
    }
}

$.ajax({

url: 'http://your-app.com/api/news/today',

dataType: 'JSONp',

success: function(data, status) {

$.each(data, function(key, value){

//handle the data

});

error: function() {

//handle the error

}

Explain how JSONP works (and how it’s not really AJAX)
You would use JS to inject a script tag into your html document – which has a src url that the browser makes an HTTP GET request to. The P is referred to “padding” which is a function that contains the JSON data. It is supposed to be a work around for cross domain ajax scripting
Have you ever used JavaScript templating?
If so, what libraries have you used?
Explain “hoisting”
Hoisting describes the way in which the JavaScript interpreter declares variables at the top of the function it is contained in (the current scope.) And to clarify – declared not initialed (assigned) a value. This results in some variables being accessible even though they are not yet physically declared in the code. Common practice in JS is to always declare your vars at the top of your scope to avoid confusion.
Describe event bubbling.
Event bubbling is the way an event (such as click) that is nested in html elements actually triggers an event on all of it’s parent elements as well as itself. You can ‘capture’ a bubbling event on any of the parent elements. To stop the bubbling effect you can use event.stopPropagation()

What’s the difference between an ‘attribute’ and a ‘property’?
Properties are in the DOM and can be manipulated. Attributes are in the HTML and do not change – even if it was edited by a script:

If an element has a default value, the attribute shows the default value even if the value has changed (Ref)


<input name="username" type="text" value="user123" />
$('input').prop('value', '456user');
$('input').prop('value'); // returns "456user"
$('input').attr('value'); // returns "user123"

$('input').prop('value', '456user');

$('input').prop('value'); // returns "456user"

$('input').attr('value'); // returns "user123"

Why is extending built-in JavaScript objects not a good idea?

In the future, if a browser decides to implement its own version of your method, your method might get overridden (silently) in the browser’s implementation. Ref:
Difference between document load event and document ready event?
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn’t have to wait for all content to load.

window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera), jQuery provides document.ready, which abstracts those away, and fires as soon as the page’s DOM is ready (doesn’t wait for images etc.).

$(document).ready (note that it’s not document.ready, which is undefined) is a jQuery function, wrapping and providing consistency to the following events:
document.ondomcontentready / document.ondomcontentloaded – a newish event which fires when the document’s DOM is loaded (which may be some time before the images etc. are loaded); again, slightly different in IE and in rest of the world
and window.onload (which is implemented even in old browsers), which fires when the entire page loads (images, styles, etc.)
What is the difference between == and ===?
Double equals returns true if the operands are equal and may perform a type conversion when comparing two things. Triple equals compares the object type and operands are equal.
Explain the same-origin policy with regards to JavaScript.
You cannot load assets from another domain from within JS code.
Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

function duplicate(arr) { arr = arr.concat(arr); console.log(arr) } duplicate([1,2,3,4,5]);

1
2
3
4
5
6
7

function duplicate(arr) {
arr = arr.concat(arr);
console.log(arr)
}
duplicate([1,2,3,4,5]);
Why is it called a Ternary expression, what does the word “Ternary” indicate?
Ternary means three. In terms of JS, it refers to shortcut expressions that perform three functions: condition, if true, if false. The syntax is: condition ? true : false;
What is "use strict";? What are the advantages and disadvantages to using it?
Strict has many features, some useful ones are: stops global vars from being created and it turns mistakes (like mistypes) into errors.

Create a for loop that iterates up to 100 while outputting fizz at multiples of 3, buzz at multiples of 5 and fizzbuzz at multiples of 3 and 5


for (var i = 0; i &lt; 100; i++) {
    if (!(i % 3) &amp;&amp; !(i % 5)) { console.log( i + " FizzBuzz") }
    else if (!(i % 3)) { console.log( i + " Fizz") }
    else if (!(i % 5)) { console.log( i + " Buzz") }
    else { console.log(i) }
};

for (var i = 0; i < 100; i++) {

if (!(i % 3) && !(i % 5)) { console.log( i + " FizzBuzz") }

else if (!(i % 3)) { console.log( i + " Fizz") }

else if (!(i % 5)) { console.log( i + " Buzz") }

else { console.log(i) }

};

Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
Too avoid polluting the global namespace with variables that may crash into each other and be very difficult to debug.
Why would you use something like the load event? Does this event have disadvantages?
Do you know any alternatives, and why would you use those?
Explain what a single page app is and how to make one SEO-friendly.
What is the extent of your experience with Promises and/or their polyfills?
I’ve used promises only in angular, for doing $http calls and use the .then as a cleaner way (by avoiding extensive nesting) to handle success and errors.
What are the pros and cons of using Promises instead of callbacks?
PRO: 1) Cleaner handling and chaining of methods. 2) Events can perform synchronously and send their result as it becomes ready.
CON: 1) Once you start a promise chain – you cannot exit out of it. 2) Callbacks need to be nested and can be difficult to debug.
What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
You can use features that are not yet implemented.
What tools and techniques do you use debugging JavaScript code?
devtools, jshint, jslint, track.js.

What language constructions do you use for iterating over object properties and array items?
forEach() is great for iterating over arrays – which are actually interpreted as objects by the compiler.


// Simple forEach
function logArrayElements(element, index, array) {
 console.log('a[' + index + '] = ' + element);
}
[2, 5, , 9].forEach(logArrayElements);
//  Output: 
// a[0] = 2
// a[1] = 5
// a[3] = 9
// -----------------------------------
// hasOwnProperty()
var o = {
 name: "my name",
 date: "today",
 myFunc: function() { log(name + " " + date) }
}
for (prop in o) {
  if (o.hasOwnProperty(prop)) {
  console.log(prop + ": " + o[prop])
  }
}
// Output: 
// name: my name
// date: today
// myFunc: function () { log(name + " " + date) }
// -----------------------------------
// Combo
var myObj = { name : "Jim", age : 32, title : "Mr." }
Object.getOwnPropertyNames(myObj).forEach(function(val, idx, array) {
  console.log(val + ' -&gt; ' + myObj[val]);
});
// Output:
// name -&gt; Jim
// age -&gt; 32
// title -&gt; Mr.

// Simple forEach

function logArrayElements(element, index, array) {

console.log('a[' + index + '] = ' + element);

}

[2, 5, , 9].forEach(logArrayElements);

// Output:

// a[0] = 2

// a[1] = 5

// a[3] = 9

// -----------------------------------

// hasOwnProperty()

var o = {

date: "today",

myFunc: function() { log(name + " " + date) }

}

for (prop in o) {

if (o.hasOwnProperty(prop)) {

console.log(prop + ": " + o[prop])

}

// Output:

// name: my name

// date: today

// myFunc: function () { log(name + " " + date) }

// -----------------------------------

// Combo

var myObj = { name : "Jim", age : 32, title : "Mr." }

Object.getOwnPropertyNames(myObj).forEach(function(val, idx, array) {

console.log(val + ' -> ' + myObj[val]);

});

// Output:

// name -> Jim

// age -> 32

// title -> Mr.

Explain the difference between mutable and immutable objects.
Mutable can have their properties changed. Immutable objects cannot be changed. It means the memory space once assigned cannot be changed.
What is an example of an immutable object in JavaScript?
Numbers and strings. Once it is instantiated, you cannot change it. You can reassign a new value to the original object – which is basically issuing a new memory space.
What are the pros and cons of immutability?
How can you achieve immutability in your own code?
Object.freeze();
Explain the difference between synchronous and asynchronous functions.
What is event loop?
(reference)

JavaScript runtimes contain a message queue which stores a list of messages to be processed and their associated callback functions. These messages are queued in response to external events (such as a mouse being clicked or receiving the response to an HTTP request) given a callback function has been provided. If, for example a user were to click a button and no callback function was provided – no message would have been enqueued.
What is the difference between call stack and task queue?
TODO: REF: MDN

Testing Questions:
What are some advantages/disadvantages to testing your code?
TODO:
What tools would you use to test your code’s functionality?
Jasmine
What is the difference between a unit test and a functional/integration test?
TODO:
What is the purpose of a code style linting tool?
To help maintain a standard within your team, so code is easier to read between members.

Performance Questions:
What tools would you use to find a performance bug in your code?
devtools has a lot of statistics to analyze, and if you can, run your site through web page test
What are some ways you may improve your website’s scrolling performance?
Avoid fixed position elements, though soon the CSS property will-change:transform will hint the browser to these elements and reduce the jank.
Explain the difference between layout, painting and compositing.
STYLE CALCULATIONS: The browser matches each style rule to their elements by class and id names and applies the rules.
LAYOUT: Is when a browser calculates how much space is needed to apply the matched CSS rules.
PAINTING: Is when the browser draws text, color, images, border and shadows – essentially every visual element you see on the screen which can be spread across “layers.”
COMPOSITING: Is when the browser draws these blocks onto the screen, accounting for layer order.

Screen refresh ideally happens at 60fps (frames per second.) When an animation or scroll is happening, the screen tried to put up 1 picture per frame. Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms) In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms. (reference)

Network Questions:
Traditionally, why has it been better to serve site assets from multiple domains?
This is a technique called “domain sharding” which takes advantage of a browsers ability to download multiple files (6) from each single domain at a time. So spreading assets across multiple domains (such as CDN’s) can give a performance boost by downloading many assets synchornously.
Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen.
What happens and why it’s so slow:
DNS lookup, Socket Connect (TCP Handshake,) HTTP Request(s), Content Download (begin slow-start.) I’ve also written about it here.
Bandwidth (can always be increased, so not so important) This is how much data we can transfer at once, i.e. in one packet, from the source to the destination. We measure this in KBPS, MBPS or even GBPS if you have lots of money.
Latency (can change, but relies on physical network restraints) This is how long a packet takes to travel from the source to the destination. This is limited by the laws of physics. An electron can only travel at 1 speed on a copper wire. Increasing bandwidth has no affect on this. A photon on a fibre link can only travel at the speed of light. Even if we could increase this speed, Einstein tells us that this would negatively affect the latency! Finally, devices that process the data at various hops, e.g. routers, switches and firewalls, also add to latency. So, the further apart a client and server are, the longer a transmission takes. Adding in more network devices, e.g. transmissions between different ISP’s, worsens this.
Aidan Finn
What are the differences between Long-Polling, Websockets and Server-Sent Events?
Explain the following request and response headers:

HTTP Actions
Diff. between Expires, Date, Age and If-Modified-…
- Do Not Track
- Cache-Control
- Transfer-Encoding
- ETag
- X-Frame-Options
- What are HTTP actions? List all HTTP actions that you know, and explain them.
Coding Questions:

Rather than run, copy, paste – I will try to explain why each results in the way it does.
What is the value of foo?

var foo = 10 + '20';

1
2

var foo = 10 + '20';

ANSWER: 1020 – As a result of type coersion, the compiler sees a string last and says okay make that first one a string too. Another example: boolean == integer
the boolean operand will be converted to an integer: false becomes 0, true becomes 1. Then the two values are compared.

How would you make this work?

add(2, 5); // 7
add(2)(5); // 7

add(2, 5); // 7

add(2)(5); // 7

Two make line 2 work: Create a function that takes the params and adds them in a nested IFFE with a return. But to make line 1 work you have to do a check to see b is defined, if not you invoke the IFFE with the second parameter. ANSWER:

function add(a,b){
        var d = function(b) { return a + b; };
        if(typeof b == 'undefined') {
            return d;
        } else {
            return d(b);
        }
    }
console.log(add(2)(3)); // 5
console.log(add(2,3)); // 5

function add(a,b){

var d = function(b) { return a + b; };

if(typeof b == 'undefined') {

return d;

} else {

return d(b);

}

console.log(add(2)(3)); // 5

console.log(add(2,3)); // 5

What value is returned from the following statement?

"i'm a lasagna hog".split("").reverse().join("");

1
2

"i'm a lasagna hog".split("").reverse().join("");

It takes the string and returns it in reverse palindrome style – includes the spaces. “goh angasal a m’i”
What is the value of “window.foo”?

(window.foo || (window.foo = "bar"));

1

(window.foo || (window.foo = "bar"));

This assigns the string “bar” to a global (window) variable named foo. The initial window.foo || does nothing.

What is the outcome of the two alerts below?
I will answer in the code for clarity.

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar); // Output: Hello World
})();
alert(foo + bar); // Uncaught ReferenceError: bar is not defined

var foo = "Hello";

(function() {

var bar = " World";

alert(foo + bar); // Output: Hello World

})();

alert(foo + bar); // Uncaught ReferenceError: bar is not defined

What is the value of “foo.length”?

var foo = []; foo.push(1); foo.push(2);

1
2
3
4

var foo = [];
foo.push(1);
foo.push(2);

.length starts from 1 (not 0) so output = 2.
What is the value of “foo.x”?

var foo = {n: 1}; var bar = foo; foo.x = foo = {n: 2};

1
2
3
4

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

undefined – the prop foo.x is never created anywhere.
What does the following code print?

console.log('one'); setTimeout(function() { console.log('two'); }, 0); console.log('three');

1
2
3
4
5
6

console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');

Even though setTimeout is set to 0 – it gets pushed to the end of the line in the callstack. In testing I discovered that all of the following asynchronous IFFE’s were also processed before the setTimeout.

Fun Questions:
What’s a cool project that you’ve recently worked on?
Progressive Insurance Schedule Ranking System
What are some things you like about the developer tools you use?
They help me do stuff.
Do you have any pet projects? What kind?
BeerSnob – Coming soon to an appstore near you! It will be an AngularJS, Ionic, PostCSS coding pleasuresphere.
What’s your favorite feature of Internet Explorer?
That they are now one of the biggest (loudest, to be more accurate) proponents of “following standards.” They have evangelism teams now that have made rounds on the podcasts touting IE (11+) as having some of the highest percentage of standard specs implemented.

My Additional Questions:
How does window.requestAnimationFrame work?
requestAnimationFrame is a recent feature added to browsers that asks the current window if it is active or visible. It has a callback function that will run your animation when the current window is active, matching your browser’s frames-per-second ratio and the result is smoother animation. The benefits can be less battery usage, and preventing a memory sensitive looping animation from draining your CPU. You can see it work in the pen below, by tabbing away, and when you come back the animation will be at the frame you left it.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”MKjBOo” default_tab=”result” user=”peterdillon”]See the Pen requestAnimationFrame() in plain js by Peter (@peterdillon) on CodePen.[/codepen_embed]
Do you have any experience turning After Effects animations into code? When would you use JS over CSS and why?
What’s wrong with setTimeout and setInterval?
- setTimeout doesn’t take into account what else is happening in the browser. The page could be hidden behind a tab, hogging your CPU when it doesn’t need to, or the animation itself could have been scrolled off the page making the update call again unnecessary. Chrome does throttle setInterval and setTimeout to 1fps in hidden tabs, but this isn’t to be relied upon for all browsers.
- setTimeout only updates the screen when it wants to, not when the computer is able to. That means your browser has to juggle redrawing the animation while redrawing the whole screen, and if your animation frame rate is not synchronized with the redrawing of your screen, it could take up more processing power. That means higher CPU usage and your computer’s fan kicking in, or draining the battery on your mobile device. Nicolas Zakas explains the impact timer resolution has on animation.
What’s the difference between these two click mechanisms?

el.onclick = function() {} el.addEventListener('click', start , false);

1
2
3

el.onclick = function() {}
el.addEventListener('click', start , false);

Inline events (line 1) may only have one inline event assigned. Inline events are stored as an attribute/property of the element, meaning that it will be overwritten by a second onclick event. addEventListener can have an unlimited succession of events fired.

Browser Paint Render And CSS The “will-change” Property

December 1, 2015December 6, 2015 Peter Dillon

Recently a fun article was passed around showing how to achieve silky smooth rendering on box-shadow:
http://tobiasahlin.com/blog/how-to-animate-box-shadow

The next day, (as the internedz are wont to do) a scathing, yet friendly article followed up on the hanky-janky terrible-ness of that demo and how using the will-change property solves all your ills – particularly on position:fixed elements.
Troubleshooting rendering performance issues

So I further researched the will-change property myself and of course MDN puts everything back into perspective with a strong suggestion to not use will-change very much at all. And when you do, use JavaScript to add and remove it when needed because “this can cause the page to slow down or consume a lot of resources.”

I did learn one great devtools feature, “enable paint flashing” in the rendering panel. I use it almost all the time now.

Read about will-change on Mozilla Dev Network.

The plain CSS looks like this:

.sidebar {
  will-change: transform;
}

.sidebar {

will-change: transform;

}

The browser hint copied MDN JS code:

var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

var el = document.getElementById('element');

// Set will-change when the element is hovered

el.addEventListener('mouseenter', hintBrowser);

el.addEventListener('animationEnd', removeHint);

function hintBrowser() {

// The optimizable properties that are going to change

// in the animation's keyframes block

this.style.willChange = 'transform, opacity';

}

function removeHint() {

this.style.willChange = 'auto';

}

Traditionally, why has it been better to serve site assets from multiple domains?

December 1, 2015December 6, 2015 Peter Dillon

Keeping images and assets on a geographically dispersed CDN allows for faster resource requests by reducing round trip time. It also leverages “domain sharding” benefits – which means rather than loading from a single domain, browsers actually load faster when requesting resources from several domains by allowing each domain connection to download up to the maximum allowed – 6 concurrent downloads.

More info: Quora and MaxCDN.

JS and Layout Engine Concurrent Race Condition

General Questions:

HTML Questions:

CSS Questions:

JS Questions:

Testing Questions:

Performance Questions:

Network Questions:

Coding Questions:

Fun Questions:

My Additional Questions: