Ajax

Ajax is ubiquitous. Look around at fackbook, twitter, gmail, outlook web, google maps, google instant search, whichone isn’t utilising Ajax?

What’s Ajax?

AJAX stands for Asynchronous JavaScript and XML. It’s a workaround for web app to communicate with server-side scripts. It can send as well as receive information such as JSON, XML, HTML, and even text files (CSS) and JavaScripts, i.e. JSONP. The most appealing characteristic of AJAX is its “asynchronous” nature, allowing update web page partially upon user events.

The basic idea of Ajax is to use XMLHttpRequest to transfer data asynchronously. Of course, you can also do this in a synchronous way.

The use of Ajax in Web development architecture vs. the traditional method:

When did Ajax come out?

In 2005, Jesse James Garrett coined this term in the article Ajax: A New Approach to Web Applications. The technique came out for many years as a way to avoid reloading the whole web page for better user experience.

How Ajax works?

Ajax uses XMLHttpRequest API. A simple Ajax code is in MDN: Ajax Getting Started. Basically, you create a HTTP request using GET or POST method in JavaScript, not through browser tab URL change of the client side, and with a server side code to match such request to response.

Issues

Since Ajax is requesting resources in browser, there is a Same Origin policy. Most browsers can’t  allow one domain to request data from other domains except specifically allowed (CORS), but JavaScript is a exception. So developers come up with JSONP to overcome this problem. JSONP returns data in a script manner to be executed immediately in browser through a callback function upon loaded. However, this will introduce security issues like Cross site request forgery as the attacker could use the fake web page to request data from the actual web page.

Browsers are implemented differently, and hence the support of XMLHttpRequest is not fully done. There are many libraries to help in writing Ajax such as jQuery, backbone, YUI,  or other big web frameworks like Angular, Dojo. Essentially, they try to detect the client browser and adopt the different underlining implementation of the XMLHttpRequest API.

 

Commonly Used CSS Reference

CSS Properties

  1. Color Props: color, opacity
  2. Background: background-color, background-image, background-attachment, background-repeat, background-size
  3. Border: border-bottom, border-bottom(top,left,right)-color, border-radius, border-shadow, border-image, border-style
  4. Basic box model: margin, border, padding, position, display, visibility, width, height, overflow, z-index, vertical-align
  5. Flexible box layout: (display: flex or inline-flex) defines a flex layout of a container. Note: flex layout is for small content, and grid layout is for large dimension.
    1. Props: order, flex-direction, flex-grow, flex-wrap, flex-basis, align-items, align-self, align-content, justify-content
  6. Font and Text: font, font-family, font-weight, color, font-size, @font-face, text-align, letter-spacing, line-height, word-wrap, word-break, text-decoration, text-shadow
  7. Table: border-collapse, border-spacing, empty-cells, table-layout
  8. List and Counters: list-style, counter-increment
  9. Transform: transform, transform-origin, transform-style (2D/3D, rotate)
  10. Transition: transition (animation)
  11. @media query to set different CSS for different  screen  sizes

CSS Questions

1. What is the difference between classes and IDs in CSS?

Class name can be used multiple times, ID should be unique, but not a must. Querying by ID (#div1) of a DIV has a higher priority than by its Class Name(.div1).  Selecting a document with multiple same IDs will result the first DIV.

2. What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Normalizing CSS

Resetting CSS

Normalizing means to make a consistent look and feel of document styles for various browsers, while resetting is to clear the default CSS style of DOM elements.

3. Describe Floats and how they work.

Floats

All about Floats

Floats 101

Float defines whether or not an element should float (left/right). In the simplest usage, the float can be used to wrap text around a image.

Float affects not only  the target element, but also its children.

4. Describe z-index and how stacking context is formed.

The z-index property specifies the stack order of an element, an element with greater stack order is always in front of an element with a lower stack order. Say two DIVs with the same parent, higher z-index will be displayed. It will inherit the z-index property of the parent. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Value can be negative.

5. Describe BFC(Block Formatting Context) and how it works.

BFC

Understanding BFC

A BFC is part of the visual CSS rendering of a web page in which block boxes are laid out. For effectively creating the block content, applying CSS like overflow: scroll/hidden, display: inline-block/flex/table, float:left/right to the container.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).

6. What are the various clearing techniques and which is appropriate for what context?

a. Create an empty DIV:

b. Set overflow: setting auto or hidden overflow property on parent will expand it to contain the floats.

c. Use psuedo class: uses the parent’s :after to add the clear: both property
.clearfix:after {
content: “”;
visibility: hidden;
display: block;
height: 0;
clear: both;
}

7. Explain CSS sprites, and how you would implement them on a page or site.

CSS sprites is the technique to combine all individual images into one big image so that it can help reduce HTTP requests and data size.

Usually, you don’t know how many images you need at the beginning, so it will be done at the stage of production launch. Locating of individual images is by using background image position index.

8. What are your favourite image replacement techniques and which do you use when?

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text.

Image Replacement

History of Image replacement methods

9. How would you approach fixing browser-specific styling issues?

IE conditional CSS fix

The principles of cross-browsers CSS

a. Use normalized CSS library

b. Implement vendor specific CSS fix

c. Test in all targeted browsers

10. How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

a. Reduce content and layout for feature-constrained browsers.

b. Add vendor-specific CSS fixes to the pages

c. Media query, browser detection (buggy)

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

When and how to visually hide content?

Invisible Content

12. Have you ever used a grid system, and if so, what do you prefer?

Yes. Bootstrap, MUI CSS

13. Have you used or implemented media queries or mobile specific layouts/CSS?

Yes. Using Media Queries

14. Are you familiar with styling SVG?

Not much experience in SVG except generating SVG images from JPG/PNG.

15. How do you optimize your webpages for print?

The simplest method is to create a style sheet for print only and test it well.

e.g <link rel=”stylesheet” type=”text/css” href=”/print.css” href=”/print.css” media=”print” />

Some steps:

Format heading and paragraph tags, links and tables, clear unnecessary contents and images.

16. What are some of the “gotchas” for writing efficient CSS?

a. Know different browsers have different CSS hacks

b. Cater for mobile devices or small screen size

c. Good HTML structure and CSS OOP rules with good naming

d. Avoid key selectors that match large numbers of elements (tag and universal selectors)

e. Prefer class and ID selectors over tag selectors

f. Avoid redundant selectors

g. Preferably don’t use * (universal selector)

h. Use framework (Bootstrap etc.)

17. What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.

Explained here.

Another one.

18. How would you implement a web design comp that uses non-standard fonts?

A study on Quora.

Use @font-face or link the webfont url as CSS.

19. Describe pseudo-elements and discuss what they are used for.

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-linepseudo-element targets only  the first line of an element specified by the selector.

20. Describe pseudo-classes

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

21. Explain how a browser determines what elements match a CSS selector.

Browsers read selectors from right-to-left. First looks for all elements matching the key selector (the right-most). Then checks if it matches or is under the next (left-most) element.

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

For display purpose, every element in the page is considered a box. The box model refers to the specification of the box attributes such as the width, padding, border and margin. Some browsers (such as Firefox) think the width should only include the the content itself, not the padding, boarder, nor margin. Other browsers (such as IE) think the width should include the content, padding, and boarder, but not the margin.

Content-box: width & height includes content but not padding/border/margin

Padding-box: include up to padding

Border-box: include up to border, but not margin

23. What does * { box-sizing: border-box; } do? What are its advantages?

box-sizing

content-box:This is the initial and default value as specified by the CSS standard. The width and heightproperties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).

border-box:The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g.  .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can’t be negative and is floored to 0, making it impossible to use border-box to make the element disappear.Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

The advantage of forcing all elements to adopt the border-box model is to unify the element width calculation regardless to browsers.

24. List as many values for the display property that you can remember.

block, inline, inline-block, none, inherit, table, table-cell, flex.

25. What’s the difference between inline and inline-block?

inline-block: Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

block:Displays an element as a block element

26. What’s the difference between a relative, fixed, absolute and statically positioned element?

How they differ?

relative: relative to itself, combine to use top/left..

fixed: fixed at the position to the viewport, like top nav, no change when window scrolls.

absolute: An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. You use it to position element to the exact location. It’s relative to the parent.

static: default position

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

Specs

CSS Specificity and Inheritance

Order in ascending order of importance:

  1. User agent declarations,
  2. User declarations,
  3. Author declarations,
  4. Author !important declarations,
  5. User !important declarations.

Specificity: Every CSS rule has a particular weight (as mentioned in the introduction), meaning it could be more or less important than the others or equally important. This weight defines which properties will be applied to an element when there are conflicting rules.

The following list of selector types is by increasing specificity:

  1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #example)
  4. Universal selector (*), combinators (+, >, ~, ‘ ‘) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

28. What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

Bootstrap. MUI. Can split out component by component by a tiny piece of CSS ?

29. Have you played around with the new CSS Flexbox or Grid specs?

No.

Flexbox

The defining aspect of the flex layout is the ability to alter its items’ width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow. For small-scale layout. A guide to flexbox.

Grid specs

For large-scale responsible layout. A guide to Grid CSS.

30. How is responsive design different from adaptive design?

Difference

Make a Choice

Responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device such as display type, width, height etc., and only one of these is necessary for the site to adapt to different screens.

Adaptive design, on the other hand, uses static layouts based on breakpoints which don’t respond once they’re initially loaded. Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths (320,480,760,960,1200,1600)

31. Have you ever worked with retina graphics? If so, when and what techniques did you use?

NO.

About retina graphics.

32. Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?

No experience. But he said this.

HTML5 Questions

1.Basic blocks of HTML 5 page

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header>
    <!-- header content goes in here -->
  </header>
  <nav>
    <!-- navigation menu goes in here -->
  </nav>
  <section id="sidebar1">
    <!-- sidebar content goes in here -->
  </section>
  <section id="main">
    <!-- main page content goes in here -->
  </section>
  <aside>
    <!-- aside content goes in here -->
  </aside>
  <footer>
    <!-- footer content goes in here -->
  </footer>
</body>
</html>

2. Web Forms 2.0

Input element with new types:

Type Description
datetime A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
datetime-local A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
date A date (year, month, day) encoded according to ISO 8601.
month A date consisting of a year and a month encoded according to ISO 8601.
week A date consisting of a year and a week number encoded according to ISO 8601.
time A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
range The range type is used for input fields that should contain a value from a range of numbers.
email This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
url This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

New output tag in forms.

And additional attributes:

autofocus, required, and placeholder.

http://www.tutorialspoint.com/html5/html5_web_forms2.htm

3. Some new HTML5 markup elements

<article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>,<wbr>.

4. What’s Page Visibility API? 

The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. When the user minimizes the webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of the page. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it would pause the moment the user looks at another browser, and plays again when the user returns to the tab. The user does not lose their place in the video and can continue watching.

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Demo

5. HTML 5 Render Engines

https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

6. HTML5 Offline Storage

http://www.html5rocks.com/en/tutorials/offline/storage/

https://developer.chrome.com/apps/offline_storage

7. Web page communication cross tabs ?

Use localStorage, window.postMessage

8. Web Workers

A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.

Use Cases:

  • Prefetching and/or caching data for later use
  • Code syntax highlighting or other real-time text formatting
  • Spell checker
  • Analyzing video or audio data
  • Background I/O or polling of webservices
  • Processing large arrays or humungous JSON responses
  • Image filtering in <canvas>
  • Updating many rows of a local web database

Here’s a summary of what Web Workers do and don’t have access to.

  • Can use:
    • navigator object
    • location object (read-only)
    • importScripts() method (for accessing script files in the same domain)
    • JavaScript objects such as Object, Array, Date, Math, String
    • XMLHttpRequest
    • setTimeout() and setInterval() methods
  • Can’t use:
    • The DOM
    • The worker’s parent page (except via postMessage())

http://www.html5rocks.com/en/tutorials/workers/basics/

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

https://developers.google.com/web/updates/2011/09/Workers-ArrayBuffer

9. Video tag usage

<video width="640" height="360" controls>
  <source src="">
</video>

10.Canvas usage

<canvas id="myCanvas" width="200" height="100" > </canvas>

11. Geolocation API

getCurrentPosition, watchPosition, clearWatch

Lat/Lng/alt detection, speed detection, tracking

12. Realtime API

WebSockets and Server-Sent Events

HTML Questions

1. What does a doctype do?

Document Type Declaration, aka. DOCTYPE, is an instruction code that associates a particular SGML or XML document with a Document Type Definition, aka. DTD.

SGML, aka. Standard Generalized Markup Language, defines the generalized markup languages for documents, likeXML, HTML.

DTD, aka. document type definition is a set of markup declarations that define a document type for an SGML-family markup languages, e.g. SGML, XML, HTML. It defines the legal building blocks of these documents.

Basically, DOCTYPE tells the browser how to render the web page, i.e. in standard mode or quirks mode in web.

Before HTML5, there are many DOCTYPE declarations with various DTDs, like HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset. However, HTML5 is not SGML-based, use the DOCTYPE only for mode selection, seems useless but required.

http://w3c.github.io/html/introduction.html#history-0

https://www.w3.org/TR/html4/intro/sgmltut.html

2. What’s the difference between full standards mode, almost standards mode and quirks mode?

Almost standards mode is only available for some version of rendering engines which implements the vertical sizing of table cells traditionally and not according to the CSS2 specs, while full standards mode is chosen to render web page with a valid DOCTYPE and quirks mode is vendor specific implementation of parsing HTML in an old-school way.

Quirks mode is the default compatible render mode of web pages if the browser can’t detect the doctype of the page. It differs from browser to browser due to different implementations of old-school rendering engines.

In the Standards mode the browsers try to give documents the specification-wise correct treatment to the extent implemented in a particular browser.

Firefox, Safari, Chrome, Opera (since 7.5), IE8, IE9 and IE10 also have a mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally and not according to the CSS2 specification. Mac IE 5, Windows IE 6 and 7, Opera prior to 7.5 and Konqueror did not need an Almost Standards mode, because they didn’t implement the vertical sizing of table cells according to the CSS2 specification in their respective Standards modes anyway. In fact, their Standards modes are closer to the Almost Standards mode than to the Standards mode of newer browsers.

http://reference.sitepoint.com/css/doctypesniffing

https://developer.mozilla.org/en/docs/Gecko’s_Almost_Standards_Mode

https://hsivonen.fi/doctype/

3. What’s the difference between HTML and XHTML? Are there any problems with serving pages as application/xhtml+xml?

XHTML, aka. Extensible Hypertext Markup Language,  is designed to extent HTML for better web with more stricter rules of syntax, but failed in doing so.

HTML5 has two parsing modes or syntaxes: HTML and XML. The difference depends on whether the document is served with a Content-type: text/html header or a Content-type: application/xml+xhtml header.

If it’s served as text/html, the following rules apply:

  • Start tags are not required for every element.
  • End tags are not required for every element.
  • Only void elements such as br, img, and link may be “self-closed” with />.
  • Tags and attributes are case-insensitive.
  • Attributes do not need to be quoted.
  • Some attributes may be empty (such as checked and disabled).
  • Special characters, or entities, do not have to be escaped.
  • The document must include an HTML5 DOCTYPE.

HTML5 can also be written using a stricter, XML-like syntax. XHTML 1.0 was “a reformulation of HTML 4 as an XML 1.0 application.” That isn’t quite true of what is sometimes called “XHTML5”. XHTML5 is best understood as HTML5 that’s written and parsed using the syntax rules of XML and served with a Content-type: application/xml+xhtml response header.

The following rules apply to “XHTML5”:

  • All elements must have a start tag.
  • Non-void elements with a start tag must have an end tag (p and li, for example).
  • Any element may be “self-closed” using />.
  • Tags and attributes are case sensitive, typically lowercase.
  • Attribute values must be enclosed in quotes.
  • Empty attributes are forbidden (checked must instead be checked="checked" or checked="true").
  • Special characters must be escaped using character entities.

Serving XHTML Problems:

Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML well.

XHTML does not have the same content type as HTML. The proper content type for XHTML is application/xhtml+xml. Currently, many web servers don’t have this content type reserved for any file extension, so you would need to modify the server configuration files or use a server-side scripting language to send the header manually. Simply specifying the content type in a meta element will not work over HTTP.

The CSS and DOM specifications have special provisions for HTML that don’t apply to XHTML when it’s treated as XML, so your page may look and behave in unexpected ways.

Inline JavaScript must include //<![CDATA[ ..//]]> for some special characters (<, &).

http://www.webdevout.net/articles/beware-of-xhtml#content_negotiation

SitePoint: Differences between HTML and XML

4. How do you serve a page with content in multiple languages? What kind of things must you be wary of when design or developing for multilingual sites?

If you wanted to include a passage in French on your page you would need to use the ‘lang’ attribute to mark the change in language. The ‘lang’ attribute can be used with almost every HTML element, making it very easy to change languages within a page.

<blockquote lang=”fr”>

<p>Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.</p>

</blockquote>
  1. First of all you will need to choose the primary language for your pages. This is the language the majority of your content is written in.
  2. Language direction e.g dir = “rtl”
  3. Character encoding
  4. Font sizes in CSS consistence
  5. Length of words

http://www.nomensa.com/blog/2010/7-tips-and-techniques-for-multi-lingual-website-accessibility/

https://www.w3.org/International/questions/qa-html-language-declarations

https://support.google.com/webmasters/answer/189077?hl=en

https://support.google.com/webmasters/answer/182192?hl=en&ref_topic=2370587

http://www.pro-tekconsulting.com/blog/how-do-you-serve-a-page-with-content-in-multiple-languages/

5. What are data- attributes good for?

It was built to store sensitive or private data that is exclusive to a page or application, for which there are no other matching attributes or elements.

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as classList, non-standard attributes, extra properties on DOM, or setUserData.

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

How to use data-attributes in HTML5?

6. Consider HTML5 as an open web platform. What are the building blocks of HTML5?

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

  • It is a new version of the language HTML, with new elements, attributes, and behaviors,
  • and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

So as an open web platform, it provides:

  • Semantics: HTML5 new elements, attributes, and behaviours  are allowing you to describe more precisely what your content is.
  • Connectivity: allowing you to communicate with the server in new and innovative ways.  (Web Sockets, Server-sent events, WebRTC)
  • Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.(Application Cache, IndexedDB, sessionStorage, localStorage, File API)
  • Multimedia: making video and audio first-class citizens in the Open Web.
  • 2D/3D graphics  and effects: allowing a much more diverse range of presentation options. (SVG, Canvas, WebGL)
  • Performance and integration: providing greater speed optimization and better usage of computer hardware. (Web Workers, Drag and Drop, XMLHttpRequest level 2)
  • Device access: allowing for the usage of various input and output devices. (Geolocation, Touch, Camera, etc.)
  • Styling: letting authors write more sophisticated themes. (CSS3)

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

7. Describe the difference between a cookie, sessionStorage and localStorage.

Cookies are small text files that websites put in client browser to store user data. It will be carried in the HTTP request.

localStorage and sessionStorage are designed for the same purpose of storing data in client side, but vary in the scope and duration of the data availability. localStorage is permanent, i.e. exist even close browser, while sessionStorage lasts as long as the tap is open.

All have data size limitations.

http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

http://diveintohtml5.info/storage.html

8. Describe the difference between <script>, <script async> and <script defer>.

<script> is the default behaviour of adding JavaScript to HTML. Parsing of HTML code pauses while the script is downloading and executing. Hence, a slowness of displaying web page may occur due to slow network or server.

<script async> is loading and executing the JS asynchronously, which doesn’t block the HTML parsing. This should only deal with external JS files.

<script defer> is to delay script execution until the HTML parser has finished. However, not every browser supports this. Think of DOM ready event JS call.

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async anddefer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

WebKit explanation.

http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

Script Tag breakdown

9.Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before</body>? Do you know any exceptions?

Browser renders web page from the top to bottom. Putting CSS in head will set the style first so that user won’t see HTML  elements without style. Loading JS is slow if the file is large, and usually it’s blocking the rendering process, user will feel the delay of displaying the web page.

Exception of adding JS in header, e.g. load library Modernizr.

10. What is progressive rendering?

Progressive HTML rendering is a relatively old technique that can be used to improve the performance of websites. The idea is simple: give the web browser a head start in downloading and rendering the page by flushing out early and multiple times.

Browsers have always had the helpful feature of parsing and responding to the HTML as it is being streamed down from the server (even before the response is ended). This feature allows the HTML and external resources to be downloaded earlier, and for parts of the page to be rendered earlier. As a result, both the actual load time and the perceived load time improve.

http://www.phpied.com/progressive-rendering-via-multiple-flushes/

eBay rethink progressive rendering

Good JavaScript Charting APIs

1. D3
This is the root of web data visualization. There are many examples to follow but coding is tedious. It’s easy to start but very difficult to master.d3
2. C3
A light-weighted library based on D3.
C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart.
c3
3. ECharts
Charting API from Baidu Inc. It has many geo-charts target to China.
The most comprehensive charting API so far.
ec
4. Hightchart It’s a carefully designed charting tool.Free for non-commercial. Pretty easy to take on.
high
5. Google Charts From Google. A lots of examples and still growing for improvements. However, you can’t use it in intranet environment.
google
6. AMCharts Like highcharts, this is designed by a group of commercial people.
am
7. EJS charts  You need to buy the license to use.
ejs

Mobile Web Development Notes from Google Udacity

1.Chrome Developer Tools:

DOM Inspector

CSS/JavaScript Live update

Network: HTTP requests and responses

Profiles: Record JavaScript object allocations to detect memory leaks

Mobile devices emulator

 2.Mobile UI and Viewport

Mobile First Design

Fixed width problem set viewport: width=device-width

Mobile app specific meta data

font-size: vw/vh

3.Fluid Design

Flexbox

Bootstrap CSS

Responsive Design:adapting to different devices use media queries

 4. Media Queries

@media  CSS3

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

example:

@media only screen and (min-device-width:768px) and (max-device-width:1024px)

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)

 5.Responsive Images

Image rendering in different screens: as beautiful as it is using minimal  bandwidth

Use SVG

Use Icon Font

Use Canvas

CSS gradient, borders, etc

Cheat: Use high quality but highly compressed image

 Server side to sniff client side to send correct definition image

Client side to request correct definition image

Use device-pixel-ratio

 CSS3

background-image: image-set();

http://css-tricks.com/which-responsive-images-solution-should-you-use/

 Helper tool Picturefill: https://github.com/scottjehl/picturefill

 7.Optimizing Web Performance

See Yahoo YSLOW.

 8.Touch event

Both mobile and desktop

Don’t :hover

Don’t disable mouse support

Do use large hit target

Don’t detect ontouchstart

Fix click delay, i.e. quick twice click for zoom: -user-scalable=no, but can’t scale view

Support touch directly

Two touches spontaneously: add id

IE: Pointer Events

http://msdn.microsoft.com/en-us/library/ie/dn433244%28v=vs.85%29.aspx

9.Input

HTML5:

color, date, datetime, datetime-local,email,month,number,range,search,tel,time,url,week

This will trigger different keyboard in mobile device.

pattern = “regex” for simple client side validation, all input in form must validate in server side.

10.Device Access

navigator.getUserMedia

Sensors in mobile

Camera

Audio

GPS/Geolocation

Compass

Orientation

Motion

 11.Offline and Storage

navigator.online detection is not stable

Client cache

Server cache

AppCache vs HTTP cache

Cache manifest

sessionStorage

localStorage

IndexedDB

http://www.html5rocks.com/en/tutorials/appcache/beginner/