Front-End Web Development Questions – David Shariff

Original List

  • Execution context references the ‘environment’ a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object.
  • Lexical scope is the concept that every inner level can access its outer levels
  • Hoisting: 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. Here’s a list of different hoisting scenarios.

    Hoisting function variables:

    Hoisting regular variables:

  • Function expressions is declaring and assigning the function to a var at the same time:

  • .call, .bind and .apply:

  • Prototype and Constructors:

  • Event Delegation: You place the event listener on the parent to capture the bubbled event – imagine a table of 1000 rows. The callback function lets you handle it in any way.
    View example pen here.
  • typeof

  • Object.prototype.toString()

  • Traversal up, down, left and right: View Pen
  • Manipulation – add, remove, copy, and create nodes in the DOM tree.
  • Change the text content of a node and toggle, remove or add a CSS classname. View Pen
  • Explain: role=”button” Can make any element (span, div etc.) behave as a button control to a screen reader, role=”presentation” Removes any semantic meaning so screen readers don’t react to it semantically.
  • HTTP requests – GET and POST along with associated headers such as Cache-Control, ETag, Status Codes, and Transfer-Encoding.
  • Security – JSONP, CORs, and iFrame policies View Pen
  • REST vs RPC:
    The fundamental problem with RPC is coupling. RPC clients become tightly coupled to service implementation in several ways and it becomes very hard to change service implementation without breaking clients:

  • Clients are required to know procedure names;
  • Procedure parameters order, types and count matters. It’s not that easy to change procedure signatures(number of arguments, order of arguments, argument types etc…) on server side without breaking client implementations;
  • RPC style doesn’t expose anything but procedure endpoints + procedure arguments. It’s impossible for client to determine what can be done next.
  • On the other hand in REST style it’s very easy to guide clients by including control information in representations (HTTP headers + representation). For example:
  • It’s possible (and actually mandatory) to embed links annotated with link relation types which convey meanings of these URIs;
  • Client implementations do not need to depend on particular procedure names and arguments. Instead, clients depend on message formats. This creates possibility to use already implemented libraries for particular media formats. It’s possible to easily change URIs without breaking clients as far as they only depend on registered (or domain specific) link relations;
  • It’s possible to embed form-like structures in representations, giving clients the possibility to expose these descriptions as UI capabilities if the end user is human;
  • Support for caching is additional advantage;
  • Standardised status codes;

Interview Challenges

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.


  1. Right click on desired layer and choose “Duplicate Layer”
  2. In dialog “Destination” choose ‘New”
  3. This gives you a new document the same height and width as the original with your new layer in it’s respective place
  4. Choose menu “Image > Trim” (There are many options when trimming but for this purpose the default meets the requirement)
  5. 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”
  6. Compression varies – on small simple graphic QE was more compressed – on large colorful file – SFW was smaller.

CSS Attribute Selectors

Finding and selecting

Here is a list of attributes. In my career I’ve used exact values, ^, and * in many applications, so I’m making a personal list because it’s useful to know the other options available.

The three tough ones for me to remember are:
$ – ends with
| – (pipe) find dash separated value
~ – find space separated value
(Ref 1 Ref 2)

In use with div, class and id.

Multiple attribute selection

Style, Layout, Paint and Composite

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

st-ly-pa-cm and transform

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:

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:

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

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:

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

HTML5 localStorage

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:

The JS looks like this:

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

As seen on Github.

    General Questions:

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

  2. 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]

  3. 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.

  4. 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.

  5. Which version control systems are you familiar with?
    Git, Bitbucket, SVN, TFS.

  6. Can you describe your workflow when you create a web page?
    Here I describe “My Process” in detail.

  7. 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.
  8. 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:

    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.

  9. 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.

  10. How many resources will a browser download from a given domain at a time?
    Approximately 6. IE leads the pack with 8.

  11. What are the exceptions?
    When downloading different resources from multiple domains – also known as “domain sharding.”

  12. 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

  13. 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.

  14. Describe how you would create a simple slideshow page.
  15. 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.

  16. 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.

  17. 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.

  18. 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

  19. 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.

  20. 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:

  21. What does a ‘doctype’ do?
    Let’s the browser know the version of and language of the document.

  22. 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.

  23. 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.

  24. 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.

  25. How do you serve a page with content in multiple languages?
    Programmatically reset the: You can even set the language on specific content blocks individually:

    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:

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

  26. What kind of things must you be wary of when design or developing for multilingual sites?

  27. 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.

  28. 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]

  29. 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.

    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]

  30. 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.

  31. 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

  32. 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:

  33. 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.

  34. 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.

  35. 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.

  36. 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]

  37. Describe BFC (Block Formatting Context) and how it works.
  38. 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.

  39. 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]

  40. 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)

  41. 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.

    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.

  42. 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]

  43. 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.

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

  45. 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.

  46. 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]

  47. 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

  48. 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:

    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]

  49. What are some of the “gotchas” for writing efficient CSS?
  50. 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-­proces­sors have to be implicit to silently improve CSS (prefixes, fall­backs, etc.) and pre-­processors have to be explicit (use its own language) to gen­er­ate CSS. (Ref – comment #1)

  51. 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.

  52. 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.

  53. 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.

  54. 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.

  55. 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:

    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]

  56. What does { box-sizing: border-box; } do? What are its advantages?
    This is explained above.

  57. 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:

    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]

  58. 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]

  59. 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.

  60. 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:

    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

  61. 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.

  62. 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.

  63. 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.

  64. 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:

    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.

  65. 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:

  66. 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.

  67. 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.

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

    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.

  69. What do you think of AMD vs CommonJS?
  70. 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(){ }());

  71. 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.

  72. How would you go about checking for any of these states?
    typeOf, ===, or == null (Ref)

  73. 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.

  74. 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.

  75. How do you organize your code? (module pattern, classical inheritance?)
  76. 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, .

  77. 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.’

  78. What’s the difference between .call and .apply?
    .apply takes parameters as an array – .call takes comma separated parameters.

  79. 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.

  80. When would you use document.write()?
    When you want some plain html text to appear in the DOM.

  81. 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…

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

  83. 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

  84. Have you ever used JavaScript templating?
  85. If so, what libraries have you used?
  86. 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.

  87. 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()

  88. 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)

  89. 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:

  90. 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.)

  91. 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.

  92. Explain the same-origin policy with regards to JavaScript.
    You cannot load assets from another domain from within JS code.

  93. Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

  94. 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;

  95. 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.

  96. 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

  97. 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.

  98. 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?

  99. Explain what a single page app is and how to make one SEO-friendly.
  100. 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.

  101. 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.

  102. 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.

  103. What tools and techniques do you use debugging JavaScript code?
    devtools, jshint, jslint, track.js.

  104. 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.

  105. 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.

  106. 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.

  107. What are the pros and cons of immutability?
  108. How can you achieve immutability in your own code?
    Object.freeze();

  109. Explain the difference between synchronous and asynchronous functions.
  110. 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.

  111. What is the difference between call stack and task queue?
    TODO: REF: MDN

    Testing Questions:

  112. What are some advantages/disadvantages to testing your code?
    TODO:

  113. What tools would you use to test your code’s functionality?
    Jasmine

  114. What is the difference between a unit test and a functional/integration test?
    TODO:

  115. 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:

  116. 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

  117. 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.

  118. 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:

  119. 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.

  120. 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

  121. What are the differences between Long-Polling, Websockets and Server-Sent Events?
  122. Explain the following request and response headers:

    HTTP Actions

  123. 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.

  124. What is the value of foo?

    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.


  125. How would you make this work?

    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:


  126. What value is returned from the following statement?

    It takes the string and returns it in reverse palindrome style – includes the spaces. “goh angasal a m’i”


  127. What is the value of “window.foo”?

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


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


  129. What is the value of “foo.length”?

    .length starts from 1 (not 0) so output = 2.


  130. What is the value of “foo.x”?

    undefined – the prop foo.x is never created anywhere.


  131. What does the following code print?

    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:

  132. What’s a cool project that you’ve recently worked on?
    Progressive Insurance Schedule Ranking System

  133. What are some things you like about the developer tools you use?
    They help me do stuff.

  134. 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.

  135. 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:

  136. 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]

  137. Do you have any experience turning After Effects animations into code? When would you use JS over CSS and why?

  138. 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.

  139. What’s the difference between these two click mechanisms?
    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

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.
paint-flashing
Read about will-change on Mozilla Dev Network.

The plain CSS looks like this:

The browser hint copied MDN JS code:

Adding A Logo in the WordPress “TwentyFifteen” Theme

If you have a mobile ready logo, (that is one that’s approximately less than 300px wide) you can just edit the header.php file and replace:

With:

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

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.

HTTP Actions

(Rewritten and taken from http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)

  1. OPTIONS
  2. GET
  3. HEAD
  4. POST
  5. PUT
  6. DELETE
  7. TRACE
  8. CONNECT

1) OPTIONS

The OPTIONS method represents a request for information about the communication options available on the request/response chain identified by the Request-URI. This method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

Responses to this method are not cacheable.

If the OPTIONS request includes an entity-body (as indicated by the presence of Content-Length or Transfer-Encoding), then the media type MUST be indicated by a Content-Type field. Although this specification does not define any use for such a body, future extensions to HTTP might use the OPTIONS body to make more detailed queries on the server. A server that does not support such an extension MAY discard the request body.

If the Request-URI is an asterisk (“*”), the OPTIONS request is intended to apply to the server in general rather than to a specific resource. Since a server’s communication options typically depend on the resource, the “*” request is only useful as a “ping” or “no-op” type of method; it does nothing beyond allowing the client to test the capabilities of the server. For example, this can be used to test a proxy for HTTP/1.1 compliance (or lack thereof).

If the Request-URI is not an asterisk, the OPTIONS request applies only to the options that are available when communicating with that resource.

A 200 response SHOULD include any header fields that indicate optional features implemented by the server and applicable to that resource (e.g., Allow), possibly including extensions not defined by this specification. The response body, if any, SHOULD also include information about the communication options. The format for such a

body is not defined by this specification, but might be defined by future extensions to HTTP. Content negotiation MAY be used to select the appropriate response format. If no response body is included, the response MUST include a Content-Length field with a field-value of “0”.

The Max-Forwards request-header field MAY be used to target a specific proxy in the request chain. When a proxy receives an OPTIONS request on an absoluteURI for which request forwarding is permitted, the proxy MUST check for a Max-Forwards field. If the Max-Forwards field-value is zero (“0”), the proxy MUST NOT forward the message; instead, the proxy SHOULD respond with its own communication options. If the Max-Forwards field-value is an integer greater than zero, the proxy MUST decrement the field-value when it forwards the request. If no Max-Forwards field is present in the request, then the forwarded request MUST NOT include a Max-Forwards field.

2) GET

The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI. If the Request-URI refers to a data-producing process, it is the produced data which shall be returned as the entity in the response and not the source text of the process, unless that text happens to be the output of the process.

The semantics of the GET method change to a “conditional GET” if the request message includes an If-Modified-Since, If-Unmodified-Since, If-Match, If-None-Match, or If-Range header field. A conditional GET method requests that the entity be transferred only under the circumstances described by the conditional header field(s). The conditional GET method is intended to reduce unnecessary network usage by allowing cached entities to be refreshed without requiring multiple requests or transferring data already held by the client.

The semantics of the GET method change to a “partial GET” if the request message includes a Range header field. A partial GET requests that only part of the entity be transferred, as described in section 14.35. The partial GET method is intended to reduce unnecessary network usage by allowing partially-retrieved entities to be completed without transferring data already held by the client.

The response to a GET request is cacheable if and only if it meets the requirements for HTTP caching described in section 13.

3) HEAD

The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response. The metainformation contained in the HTTP headers in response to a HEAD request SHOULD be identical to the information sent in response to a GET request. This method can be used for obtaining metainformation about the entity implied by the request without transferring the entity-body itself. This method is often used for testing hypertext links for validity, accessibility, and recent modification.

The response to a HEAD request MAY be cacheable in the sense that the information contained in the response MAY be used to update a previously cached entity from that resource. If the new field values indicate that the cached entity differs from the current entity (as would be indicated by a change in Content-Length, Content-MD5, ETag or Last-Modified), then the cache MUST treat the cache entry as stale.

4) POST

The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI in the Request-Line. POST is designed to allow a uniform method to cover the following functions:

  • Annotation of existing resources
  • Posting a message to a bulletin board, newsgroup, mailing list,
    or similar group of articles
  • Providing a block of data, such as the result of submitting a
    form, to a data-handling process
  • Extending a database through an append operation.

The actual function performed by the POST method is determined by the server and is usually dependent on the Request-URI. The posted entity is subordinate to that URI in the same way that a file is subordinate to a directory containing it, a news article is subordinate to a newsgroup to which it is posted, or a record is subordinate to a database.

The action performed by the POST method might not result in a resource that can be identified by a URI. In this case, either 200 (OK) or 204 (No Content) is the appropriate response status, depending on whether or not the response includes an entity that describes the result.

If a resource has been created on the origin server, the response SHOULD be 201 (Created) and contain an entity which describes the status of the request and refers to the new resource, and a Location header (see section 14.30).

Responses to this method are not cacheable, unless the response includes appropriate Cache-Control or Expires header fields. However, the 303 (See Other) response can be used to direct the user agent to retrieve a cacheable resource.

POST requests MUST obey the message transmission requirements set out in section 8.2.

5) PUT

The PUT method requests that the enclosed entity be stored under the supplied Request-URI. If the Request-URI refers to an already existing resource, the enclosed entity SHOULD be considered as a modified version of the one residing on the origin server. If the Request-URI does not point to an existing resource, and that URI is capable of being defined as a new resource by the requesting user agent, the origin server can create the resource with that URI. If a new resource is created, the origin server MUST inform the user agent via the 201 (Created) response. If an existing resource is modified, either the 200 (OK) or 204 (No Content) response codes SHOULD be sent to indicate successful completion of the request. If the resource could not be created or modified with the Request-URI, an appropriate error response SHOULD be given that reflects the nature of the problem. The recipient of the entity MUST NOT ignore any Content-* (e.g. Content-Range) headers that it does not understand or implement and MUST return a 501 (Not Implemented) response in such cases.

If the request passes through a cache and the Request-URI identifies one or more currently cached entities, those entries SHOULD be treated as stale. Responses to this method are not cacheable.

The fundamental difference between the POST and PUT requests is reflected in the different meaning of the Request-URI. The URI in a POST request identifies the resource that will handle the enclosed entity. That resource might be a data-accepting process, a gateway to some other protocol, or a separate entity that accepts annotations. In contrast, the URI in a PUT request identifies the entity enclosed with the request — the user agent knows what URI is intended and the server MUST NOT attempt to apply the request to some other resource. If the server desires that the request be applied to a different URI,

it MUST send a 301 (Moved Permanently) response; the user agent MAY then make its own decision regarding whether or not to redirect the request.

A single resource MAY be identified by many different URIs. For example, an article might have a URI for identifying “the current version” which is separate from the URI identifying each particular version. In this case, a PUT request on a general URI might result in several other URIs being defined by the origin server.

HTTP/1.1 does not define how a PUT method affects the state of an origin server.

PUT requests MUST obey the message transmission requirements set out in section 8.2.

Unless otherwise specified for a particular entity-header, the entity-headers in the PUT request SHOULD be applied to the resource created or modified by the PUT.

6) DELETE

The DELETE method requests that the origin server delete the resource identified by the Request-URI. This method MAY be overridden by human intervention (or other means) on the origin server. The client cannot be guaranteed that the operation has been carried out, even if the status code returned from the origin server indicates that the action has been completed successfully. However, the server SHOULD NOT indicate success unless, at the time the response is given, it intends to delete the resource or move it to an inaccessible location.

A successful response SHOULD be 200 (OK) if the response includes an entity describing the status, 202 (Accepted) if the action has not yet been enacted, or 204 (No Content) if the action has been enacted but the response does not include an entity.

If the request passes through a cache and the Request-URI identifies one or more currently cached entities, those entries SHOULD be treated as stale. Responses to this method are not cacheable.

7) TRACE

The TRACE method is used to invoke a remote, application-layer loop- back of the request message. The final recipient of the request SHOULD reflect the message received back to the client as the entity-body of a 200 (OK) response. The final recipient is either the

origin server or the first proxy or gateway to receive a Max-Forwards value of zero (0) in the request (see section 14.31). A TRACE request MUST NOT include an entity.

TRACE allows the client to see what is being received at the other end of the request chain and use that data for testing or diagnostic information. The value of the Via header field (section 14.45) is of particular interest, since it acts as a trace of the request chain. Use of the Max-Forwards header field allows the client to limit the length of the request chain, which is useful for testing a chain of proxies forwarding messages in an infinite loop.

If the request is valid, the response SHOULD contain the entire request message in the entity-body, with a Content-Type of “message/http”. Responses to this method MUST NOT be cached.

8) CONNECT

This specification reserves the method name CONNECT for use with a proxy that can dynamically switch to being a tunnel (e.g. SSL tunneling [44]).