Thursday, February 4

Notes : 15 Lessons From 15 Years In UX - JESSE JAMES GARRETT

Jesse James Garrett — 15 Lessons From 15 Years In UX (SmashingConf NYC 2014) from Smashing Magazine on Vimeo.

1. Go Broad
Work on different kinds of problems.

2. Go Deep
Work for the quality, focus on one problem at a time.
Research the founder of a company, to understand their thinking properly.

3. Go for a Walk
Shifting your sensory inputs in any direction. There is a science behind this, if people change their working environment, it gives them capability to think in different ways.

4. Go farther than you think you should
If is easy to fall in trap on limitations. Limitations are your own creations. It is dangerous for you to cut off your thought due to external limitations.

Your own ideas should scare you. There is risk of failure and certainly you may look stupid, however you should rely on your own guts to go forward and work on that idea. Try to rely on people around you and get inspiration.

Designers are creative people and they need to get out of their comfort zone.

5. Put away your notes
Believe in your instincts.

6. Learn to spot your assumptions

7. Stay Curious
Pursue opportunities to evolve

8. Be as curious about your clients as you are about your users
Your clients should be able to relate to your choices and decisions.

9. Hang with different crowds
Helps understanding the technology, improves your communications. Some things that you know but it is difficult to articulate, talking to different people helps.

10. Cultivate allies.

11. Pick your battles
There are always compromises that you have to make. You need to figure out what really matters, what are the load bearing walls, what are things that create structure and integrity of a design.

12. Good work does not speak for itself. 
You should be able to sell your work. You should be able to explain your design to the world. You should have the ability to persuade and convince your opinion.

13. Changing a design is easy, changing mind isn't
It is never about a single product, it is a never ending process.

14. Pay attention to your failures.
Every failure carries a message about how to improve yourself as a designer.
Scale of a lesson is not directly proportional to failure. Small issues teach big lesson and vice versa.

15. Everything is always changing.
Change is continuous. Only difference between one change and another is a mater of degree. Your assumptions at one time may not be applicable. So always remember that change is happening. Don't resign over change.

Tuesday, February 2

Notes : Everything You Need to Know about Design You Didn't Learn in School - JoonYong Park

Everything You Need to Know about Design You Didn't Learn in School

- A bad workman blames his tools.
- It starts with you.

01. If you wait for the perfect opportunity, it will never happen. It starts with you.

Everyone is afraid of something. Fear. The stress of being good, looking good to your coworker, colleagues etc.
Learning new things so that you can overcome the fear.

"Is someone different at age 18 or 60? I believe one stays the same." - Hayao Miyazaki
When you get older, you just become lazy.

The process needs to be organic. Not forced. 
Designers and Developers work in real time.

02. Crave the challenge.

Don't get stuck behind the desk. 
Be a good person. To friends, family, girlfriends and boyfriends. Explore different things in life. Travel. Do something you love. Experience everything.
It's not just about knowledge. You can't just read about life. you have to experience it.

Knowledge is just 1-Dimensional, Experience can be considered as 3-D. 

03. Life Experience = Creativity

04. You're not as good as you think you are. 
Give respect and you'll get it. You can take your work only so far - a great team can take it to a whole new level.
Surround yourself with good people.

Putting it all together
It starts with you. Crave the challenge. Experience everything. Be humble and nice to people.

Thinking that you will change job because you don't have a good manger, or changing job because you don't like what you work, is not the correct attitude. Remember, It always starts with you. You need to learn new things, challenge yourself and push those limitations and thus create your own opportunities.

Monday, February 1

Notes : Mathias Bynens: 3.14 Things You Didn't Know About CSS (Updated) - CSSConf.Asia 2015

!important has nothing do to with specificity. To fake !important, you can use the class multiple times.

Font Family
No need to have quotes in font family names which has white spaces.
Font family name beginning with integer are not correct, however you can fix this by giving quotes to such family names.

Attribute Values
Attribute values are usually quoted. It is not necessary to have quotes in HTML for attribute values, however for CSS you may require to have quotes. So the best practice is to use the quotes always.

CSS comments
CSS does not have single line comments. However for identifiers, if you give invalid text, spelling mistakes etc, it will be considered invalid however there will not be any parsing error.

HTML tags
You can omit closing tags in HTML and it is still valid. You can also omit the head and body tags and it will still be a valid HTML.

Using CSS without HTML - Refer nojs.css
We can use the body, head, before, after etc which are not part of HTML. To display some text, you can use the CSS content property.

Unicode in HTML and CSS
Every possible unicode value is valid for class and ID name in HTML. In ID it should not have a white space.  Eg of valid classes and ID

<div id="#id">Good luck styling me!</div>

<div class=".class">heh</div>

<div id="#id.class:hover{}">huh</div>

<div id="[attr='value']">not</div>

However how you would style it in css. So in CSS, you need to escape the character.

XSS - Cross site scripting
Execute custom javascript code. If you have control over the css of a website, it is possible to do all sorts of things like hitting the performance of a website, inserting your own content etc.

How to avoid CSS expression vulnerabilities?
1) Sanitize user input before injecting it in a CSS context
2) Disallow framing using the HTTP header
x-Frame-Options: Deny
3) use

Friday, January 29

Notes : Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015

So how does the browser actually render a website?
Browser - A complex software.

Components that make up a browser
1) Bindings - Based on OS, the API etc. Talking to Network etc.

2) Rendering - Parsing, layout, painting etc.
Constructing a webpage.

3) Platform -  Depends on OS.

4) Javascript VM

1) Parsing HTML
a) HTML is forgiving by nature, if you forget to close a tag, it will not throw an error.
b) Parsing isn't straightforward - In most languages if you make an error, it will not work
c) It can be halted.
d) It will do speculative parsing

Valid HTML5

My first Website
Visitor Count : 0

In above code, even though it is not complete HTML, browser will parse it correctly.

Parsing flow

P.S : The last step is the DOM creation.


Parse Tree
Representation of your HTML

Dom Tree
Create a DOM tree where there is interaction of Javascript.

 HTML parsing can be halted by
at the bottom
a) Parse is uninterrupted
b) Faster to render
c) Defer and async attributes . These are alternative to not putting script tag at bottom.
Defer will stop DOM content loading.
d) Trade off

CSS Parsing
It is pretty standard. We have a CSSOM i.e CSS Object Model.

2. Render/Frame tree
a) Combines the two object models, style rsolutions
b) This is the actual representation of what will show on screen
c) Not a 1 to 1 mapping of your HTML

So parsing of HTML and CSS can happen in parallel, Javascript can affect the parsing by interrupting.

Render tree has multiple trees as below
a) RenderObjects - Actual Node itself i.e the DOM node
b) RenderStyles
c) RenderLayers - The browser needs to know about the object if it is positioned absolute and if there is a z-index applied to it
d) Line boxes - Wrapping text, font size etc.

Things that are not in render tree
a) Non-visual elements head, script, title etc.
b) Nodes hidden by display: none;

Render Object has reference to DOM node
a) Visual output
b) Geometric info
c) Can layout and paint
d) Holds style an computed metrics

Calculating Visual Properties
a) Combine all styles
b) Defaults, external, style elements and inline
c) Complexity around matching rules for each element - CSS computation
d) Style computation - How much width, height etc to apply

3. Layout
Also called as reflow, re layout. It is a recursive process.
Traverse render tree
Nodes position and size
layout its children

Will batch layouts, incremental layouts
The browser will intelligently batch changes
Render tree items will flag themselves as dirty
The batch will traverse the tree and find all dirty trees
This happens asynchronously

Immediate layout
Doing a font size change will re-layout the entire document
same with browser re-size
Accessing certain properties via java script eg. node.setHeight

Performance Insight 2
Take note from the browser and batch
a) Act like the browser and batch your DOM changes
b) Do all your reads in one pass
c) Followed by writes

Takes all information from render tree and paints.
a) Will take the layed out render trees
b) It will create layers
c) Incremental process - Paint background color, background image, shadows etc.
d) Builds up over 12 phases.

a) Produces a bitmap from each layer. Bitmap is uploaded to the GPU as a texture, these texture will be composites into a final image

Performance Insight 3
Inline critical CSS
a) The most important bits of your site/app
b) Speeds up first paint times
c) External js and css can block
d) Delta last bitmap

Notes : Performance Beyond the Page Load by Ryan Seddon

Performance beyond the page load
Slow sites loose people

UI Performance

Browser Rendering Pipeline - 4 stages
1) Style Recalculation
Eg, Browser resize, Hover on button etc. The browser needs to figure out.

2) Layout/Reflow
This does not happen always. Figure out the position, layout etc on certain activity.

Reflow is the process by which the geometry of the layout engines formatting objects are computed - Chris waterson

3) Paint/ Rasterize paint 
Figure out where everything lies on the page. The browser then draws the graphic. Paint is about setting up the instructions. Paint does not always happen.

4) Composite
Takes all the instructions and gives to GPU to render the graphics.

60FPS/16.6MS matches with a average display i.e 60Hz

Use the transform and oapacity (CSS properties) so that browser does not have to do much and the animations load real fast. Refer

When using transform and opacity, the graphics card comes into picture, i.e the GPU