Friday, February 19

Notes : Brings Up Strong Reasons to Use React.js



- Search wise, in Google trends, React is most widely searched

- Angular is going a major re-write and looks more similar to React. So Angular 2.0 will have lots of API's broken for Angular 1.0, does it mean it is back to square one for Angular 1.0 users?

- Pick up a framework when you know you are building a Web application. Don't use it for making static websites.

- jQuery is still valid, so for web developers can it can be used very productively.

- Unlike Google, facebook is using React on their critical projects.

Wednesday, February 17

Notes : Introduction and Getting Started with React.js - JSConf 2015



1) Install Node.js

2) http://codewinds.com/jsconf-react-win

What makes react.js special?
- Simple to learn - Mostly it is the View.
- Composable components
- Declarative - Rather then doing jQuery manipulation, it is easily done via React.
- Easy to use with existing projects

React.js core concepts
- Just the view
- Virtual DOM - Keeps track of what is changed in DOM and updates it accordingly
- Components
- Top down data flow

You can use ES6

Just the view
class Greeting extends React.Component {
  render(){ // the heart of React.js
    // pass in any type of js objects, methods, or functions.
    return <div>{ this.props.user.name }</div>;
  }
}

Virtual DOM
- Render Virtual tree
- Fast Diff
- Adapters to DOM, ...

Components
Everything is components. You can have your code in different file, you can just import it and use it.



<Name value={this.props.name} /> => JSX code. It is a components.
props is built in react properties set up for you.

Top Down data flow

// from main.js
<App name={appName} items={items} />

// elsewhwere in App's render()
return (<div>
          <MainTitle title={this.props.name) />
          <div/>);


React.js API - JSX


Render, prop



React.js - State, events

when rendering, you can use this.state and this.props



React.js family

- react-router
- Flux
-React Native





Sunday, February 7

Notes : CSSconf EU 2014 | Addy Osmani: CSS Performance Tooling

When you want to be fast, you have to give up the things slowing you down.



3 Tiers of Optimization Tooling

1. Baseline
Minification, concatenation, Image optimization, Compression (Gzip, Zopfil), Asnyc scripts, Leverage caching, WOFF2 for fonts, Spriting. Avoid redirects

2. Get fast, Stay fast.
Inlining critical css, deferring non-critical assets to avoid render blocking, removing unused CSS, visual regression testing to verify changes. Performance bench-marking.

3. Nice to haves
Reduce duplicate colors, selectors, font-families, sizes.

Try to ship something in the range of 0 - 1000ms time. Sites that are slow to load loose visitors.

Step 1 : Measurement
Speed Index - The average time at which visible parts of the page are displayed. Expressed in milliseconds and dependent on size of the viewport.

Lower speed index score is better.

Step 2 : Performance Budget
It is basically you saying that I have this minimum expectations. For example, trying to get 1 sec page load.
Max 200ms server response.

Use webpagetest webapp..

Google's pagespeed app is also very useful. Ideally you should have a pagespeed of 85 on mobile and 90 on desktop.

The average page size is 1.8MB. Most of the size is due to images.

Use gulp image minification tools, css minification tools etc.
Optimizing HTML, CSS, Javascript etc.

What else advanced techniques that we can do to improve performance.?

1) Removing unused CSS.
Google devtools has an option which tells you how much unused CSS you have.

UNCSS - Powerful tool.



CSS Regression testing
Use phantomcss and regression.js

2) Optimize critical path CSS
Optimize critical rendering path. Just render visible content.
To do that, we can do inline css instead for it to fetch for the CSS file.
This is not just a scripting problem and it cannot be solved alone with javascript. This problem is a Multi part problem and needs to be automated. What do we really need to do?



a) Extract stylesheets from HTML - Choice of extraction of defining *.css files upfront

b) Generate the above the fold CSS - Decide on target viewports. Multiple? One sweet spot? Keep it small and lightweight under 14kb

c) Inline critical-path CSS in

d) Asynchronously load the rest of your styles - Remove them from the critical path.

3) Optimizing Images
Tools available and can be used
ImageOptim, GIFBrewery, Packed Image Diffs

Is it important for you to show animation on screen? Will just a jpeg not work? Important question when developing a website.

4) Use of mod_pagespeed enabled on your server.

===================================================================

Automate Performance measurement
1) WebPageTest CLI
2) Grunt-PerfBudget
3) PageSpeed Insights CLI
4) Grunt-PageSpeed
5) Phantomas CLI

Stylesheet complexity Analysis
Easiest way to keep CSS minimal is to minimize the repeatations.
Some tools like
1) Parker
2) Grunt-ColorGaurd
3) Stylestats



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
!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