CSS Keynotes

Specs:
http://www.w3.org/TR/css-2010/

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

1. CSS Box Model
Margin, border, padding, content
http://www.w3schools.com/css/css_boxmodel.asp

Inline elements: normally displayed without line breaks, e.g. b, td, a, img
Block level elements: normally start with a new line, e.g. h1, p, ul, table

2. “reset” CSS

A reset CSS is to style all the HTML elements in a consistent manner.
http://www.cssreset.com/what-is-a-css-reset/
pros: maintain a consistent design for all browsers
cons: too much work, may override cause confusions

3. CSS define methods
a. <link rel=”stylesheet” type=”text/css”>
b. <style></style>
c. <span style=””></span>
d. <style> @import url(‘a.css’)</style>
@import css will start to load after page download completed

4. Floats and z-index
An element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it’s containing box or another floated element.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
z-index works to stack elements like layers in Photoshop.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

5. CSS sprites
Image sprites are used in apps where multiple icons are used to save memory and bandwidth. It helps reduce HTTP requests.
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Set background position to locate the icons in CSS.

6. Grid system
CSS grid for page layout
http://code.tutsplus.com/tutorials/which-css-grid-framework-should-you-use-for-web-design–net-25
Bootstrap Grid Template
http://getbootstrap.com/css/

7. CSS preprocessors, SASS, Stylus, LESS, pros and cons ?
Preprocessed CSS is aim to reduce the work of writing repetitive CSS. You can write CSS in a manner of programming with designed syntax, and let the compiler to decode for you.
http://sass-lang.com/

8. SVG
http://www.w3.org/TR/SVG/styling.html

9. Media query and how to handle CSS for different IEs ?
Media query allow the presentation of content be tailored to a specific range of output devices without changing the content.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
IE conditional Comments
You are using Internet Explorer.

<![if !IE]>
You are not using Internet Explorer.
<![endif]>
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

10. CSS selector: how a browser determines what elements match a CSS selector ?
Class Selector
ID Selector
Pseudo Class Selector
:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
Selector based on Relationship
A E
Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > E
Any E element that is a child of an A element
E:first-child
Any E element that is the first child of its parent
B + E
Any E element that is the next sibling of a B element (that is: the next child of the same parent)

Attribute Selector: input [type = ‘text’]
Element Selector: div, ul, ect.
* Universal Selector: for all elements

11. CSS Specificity
CSS specificity determines the CSS rule for the element to use in styling.
The more specific the CSS rule goes for the element, the more weight it will have.
A selector’s specificity is calculated as follows:
count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are stylesheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
!important declaration has the highest weight.
http://www.w3.org/TR/CSS21/cascade.html#specificity
http://www.sitepoint.com/web-foundations/specificity/
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

12. * { box-sizing: border-box }, resize, outline-offset
box-sizing: border-box is to tell the browser to include the border and padding for the all elements for the width.
CSS3 User Interface: box-sizing, resize, outline-offset
resize:true will allow the div to resize by drag
outline-offset: offset a outline and draw beyonds border
http://css-tricks.com/almanac/properties/b/box-sizing/
http://www.w3schools.com/css/css3_user_interface.asp

13. CSS Flexbox ?
Flexbox model
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

14. Responsive design vs Adaptive Design
Responsive Design makes use of media query to changes CSS according to the width/height of the device.
Adaptive Design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a stylesheet.
http://alistapart.com/article/responsive-web-design
http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

15. Center a DIV
http://www.w3.org/Style/Examples/007/center.en.html#block

HTML Keynotes

HTML Specs:

https://html.spec.whatwg.org/multipage/#toc-introduction

http://www.w3.org/TR/html5/Overview.html#contents

HTML Guide:

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

1. Doctype, DTD, HTML, XHTML definitions and usages

The <!DOCTYPE> declaration must be the very first thing in HTML document, before <html> tag, and it is not a HTML tag but an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> refers to a DTD, because it was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML 5 is not based on SGML, and not require a reference to a DTD.

On DTD

http://www.w3.org/TR/html4/sgml/dtd.html

On SGML and  HTML

http://www.w3.org/TR/REC-html40/intro/sgmltut.html

On Doctype

http://www.w3schools.com/tags/tag_doctype.asp

On HTML and XHTML

http://www.w3schools.com/html/html_xhtml.asp

2. Difference between standards mode and quirks mode ?

Render web page in quirks mode is to make the CSS rules compatible for then-fashioned browsers.

On Standards Mode and Quirks Mode

https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

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

http://www.quirksmode.org/css/quirksmode.html

3. Limitation on XHTML

Unlike HTML, XHTML is an XML-based markup language. The syntax is slightly different, and it needs well-formedness, i.e. closing every tag, and IE 8 and below doesn’t support it. Many XHTML is served as text/html MIME type so that the most browsers can read.

XHTML is good for processing data since it is well validated.

On serving XHTML and HTML

http://www.w3.org/International/articles/serving-xhtml/

4. Meta Tag in HTML
Meta tag defines the meta data for HTML document, not displayed on the page but used by browsers, search engines or other web services.
Includes: description, viewport, keywords, author, last modified date, etc.
http://www.metatags.info/meta_http_equiv_cache_control

Apple Specific Meta

5. data-* attribute?

The data-* attribute is used to store custom data private to the page or application, giving developer the ability to embed custom data attributes on all HTML elements.

http://www.w3schools.com/tags/att_global_data.asp

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

http://ejohn.org/blog/html-5-data-attributes/

6. Building blocks of HTML5 ? new semantics in HTML5?

http://lacquer.fi/radidoc/The_building_blocks_of_a_HTML5_web_page

new semantics

http://www.w3schools.com/html/html5_semantic_elements.asp

A semantic element clearly describes its meaning to both the browser and the developer.

non-semantics: div, span etc, tells nothing about its content

semantics: form, table, img etc, clearly defines its content

HTML 5 offers new ones:

header, nav, section, article, aside, figure, figcaption, footer, details, summary, mark, time

7. Difference between cookies, sessionStorage and localStorage

Cookies: data stored in text files in system, can set expiration date. Accessible through document.cookie.
example: document.cookie=”username=Al Jor; expires=Thu, 18 Nov 2012 12:00:00 UTC; path=/”;

http://www.w3schools.com/js/js_cookies.asp

localStorage: window.localStorage is a object to store data in browser in name/value pairs.

It is more secure and faster, and capable to handle at least 5MB data size. There is no expiration date and won’t be deleted when user closes the browser.

sessionStorage: is equal to localStorage except that it stores data for only one session, and data is deleted when user closes the browser window/tab.

http://www.w3schools.com/html/html5_webstorage.asp

8. Difference between GET and POST ? error code 404 ?

GET: query strings sent through URL of request:

  1. can be cached
  2. remain in browser history, can be bookmarked
  3. have length restrictions, max 2048
  4. never be used with sensitive  data

POST: query strings sent in the HTTP message body of a request

  1. never cached
  2. Don’t remain in history, can’t be bookmarked
  3. no length restrictions

http://www.w3schools.com/tags/ref_httpmethods.asp

HTTP error code

http://www.w3.org/Protocols/HTTP/HTRESP.html

http://www.w3schools.com/tags/ref_httpmessages.asp

9. Web page three layers of structure:

HTML/XHTML: structural layer

CSS: presentation layer

JS: behaviour layer (manipulate BOM/DOM)

Technical reading list to complete by end of 2014

Below is the technical reading list I target for my year of 2014 to complete:

1. The Java Language Specification SE7

2. Thinking in Java 4th Edition

3. CPE 105 Data Structures and OOP

4. ECMA JavaScript Definition (25 April)

5. Professional JavaScript for web developers (1 Mar)

6. ArcGIS JavaScript API

7. Node.js in Action

8. The Design of Everyday things (25 June)

9. Programming Pearls

10. Design Patterns by Gang of Four (9 Sep lost in reading, too complex as too abstract)

As 2014 enters the last quarter, and I haven’t finish books in point 1, 2, and 9.

However, I am reading more on HTML, JavaScript and CSS, aka. the web stack.

1. CSS3 Anthology from SitePoint

2. JavaScript Definitive Guide 6th Edition

3. AngularJS

4. JavaScript Design Patterns

I will write a serie of summaries after reading by end of this year.

Stateless vs Stateful and Mutable vs Immutable

Stateless means there is no memory of the past. Every transaction is performed as if it were being done for the very first time.

Stateful means that there is memory of the past. Previous transactions are remembered and may affect the current transaction.

      Stateless:
       //The state is derived by what is passed into the function
        function int addOne(int number)
        {
          return number + 1;
        }

        Stateful:
        //The state is maintained by the function
        private int _number = 0; //initially zero
        function int addOne()
        {
         return _number++;
        }

 

Mutable Objects: When you have a reference to an instance of an object, the contents of that instance can be altered.

Immutable Objects: When you have a reference to an instance of an object, the contents of that instance cannot be altered.

        Point myPoint = new Point( 0, 0 );//mutable
	System.out.println( myPoint );//print out 0, 0
	myPoint.setLocation( 1.0, 0.0 );
	System.out.println( myPoint ); //print out 1.0, 0.0

	String myString = new String( "old String" );//immutable
	System.out.println( myString );//print out old String
	myString.replaceAll( "old", "new" );
	System.out.println( myString );//print out old String

Ref:
1. http://programmers.stackexchange.com/questions/101337/whats-the-difference-between-stateful-and-stateless
2. http://www.javaranch.com/journal/2003/04/immutable.htm