CSS Preprocessors (Sass, LESS, Stylus)

Background of this post
On May 31st, @verekia gave a talk at SFHTML5 meetup about Deep dive into CSS Preprocessors. I heard of Sass and LESS for quite some time, but could not check them out to understand their syntax, features and flows.Our current project also plans to use LESS in v2.0 for CSS coding. So what is CSS preprocessor, why need CSS preprocessor and what are the main difference among these three great tools?

Fortunately after quick google, I found this great article answering all my questions.
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

What is CSS Preprocessor?
Preprocessors produce CSS that works in all browsers. They don't enhance CSS, but improve your CSS development workflow. They are tools for better CSS development and maintenance. Sass, LESS, and Stylus are the most popular Preprocessors. They are all great.

Why need CSS Preprocessor?
There are many reasons (use cases) for using CSS preprocessors. For large scale web site development, for modular CSS code structure, for efficient CSS coding,  vendor prefixes, 3D Text, Columns (math + variables for div widths) and so on.

Definitions (copied from official website)
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

Stylus, Expressive, dynamic, robust CSS

What are the differences among Sass, LESS & Stylus?
Language
Sass is written in Ruby
Less and Stylus are written in JS


Syntax
Sass and LESS both use the standard CSS syntax.
The syntax for Stylus is much more verbose, accepts other variations

Variables
$mainColor: #0982c1; - Sass
@mainColor: #0982c1; - LESS
mainColor = #0982c1 - Stylus

Nesting
All three preprocessors have the same syntax for nesting selectors
Don't nest too much (4 levels max)

Mixin
Mixins allow the reuse of properties throughout stylesheet.
@mixin mixinA(), @include mixinA() - Sass
.mixinA() - LESS (there is a dot in the front of mixinA)
mixinA() - Stylus

Function
Functions are a similar construct, only they are typically meant to perform an operation and return a value. All three preprocessors have function and built-in color functions. (see below for more info)
Functions like lighten() return a value
Mixins don't return anything but output CSS

Inheritance
Sass & Style @extend .block
LESS Use mixin, no real inheritance as of today

Importing
@import "file.{type}"; - Sass, LESS & Stylus

Color Functions
lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%);  /* returns a color 10% darker than 'color' */
saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */
and more functions

Operations
Doing math in CSS is quite useful, and now fully possible from all three preprocessors
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

Comments
When compiling with a CSS preprocessor, any double-slash comment gets removed (e.g. //comment) and any slash-asterisk comment stays (e.g. /* comment */). So after compiling, we need minify CSS.

What tools are for CSS Preprocessors?

There are a bunch of tools and editors to support CSS preprocessors. Different platforms (Windows, Mac OS, Linux) may have different availability. Here are some options, better to check out their website. Codekit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess. From google search result, Codekit, Campass seems to be more popular.

Sass: Sass + Compass + FireSass
LESS: there is no similar Compass for LESS, but twitter bootstrap uses LESS
Stylus: Nib + Stylus


Side notes
OOCSS is heavy for DOM but efficient in terms of CSS file size
LESS client is for development purpose only, never use it in production
Recommended blog for Sass: The Sass Way

中美创业感悟 by Dr. Datong Chen

第一次在湾区听成功人士的创业感悟，而且是中文的。这个周一晚上，在InnoSpring 公司(类似国内的孵化器) ，陈大同博士介绍了他在美国和中国先后创业的个人感悟和宝贵经验。此前不了解陈博士，尽管当年在国内的时候听说过展讯公司。在近2个小时的介绍中，他剖析了2次成功创业的历程、经验和心得。可能就像他说得那样，没有被成功和荣誉捧杀的他，创业中的艰辛、挫折、挑战、机遇、激动、成功，从他口中出来，没有激情昂扬，只是低调叙述。葛优说的淡定，就是说得这个境界吧。

那什么是创业呢？在回家的路上，反复琢磨他演讲中一些印象深刻的话。我从字面意思上理解，创业应该是创新＋企业。湾区说的startup就是创业，少数几个人为了共同的目标信念开个公司，做些有意义的事情。陈博士说的”不安分“是创业的催化剂，当你看到未来10年的生活时，应该感到彷徨和危机，当初他离开国家半导体，就是不想一直做半导体工艺，而是想创新，做半导体设计。“被创业”其实也是他内心的想法，Follow your heart，做有挑战，有风险，有创意的事情，是创业者的特征。一直做程序员的人我，不能完全体会他所有的话，但有些印象深的还是罗列出来供以后参考。

不安分 （有冲动）－ 在OmmiVision前，他还介绍了新岛的故事，时刻思考着，寻求改变。
不满足 （有想法）－ 2个公司都上市了，没有退休享乐，而是去做风投，帮助新一代的追梦者创业。（优秀的运动员退役后会做教练员，优秀的创业者成功后会做投资人）
不信邪 （爱挑战）－ 不懂设计，自学设计，不知co-founder而做co-founder， 不了解3G，偏做3G
用最新的技术做最新的产品，没有见到成功的
对市场机遇的把握非常重要
预测一年后的市场比较容易，三年后的就很难了
分析家对新产品的预测总是太乐观了，实际需要的时间是预期的两倍
唐僧是优秀的CEO
做80％用户接受的产品，太完美会错过市场机遇
挂羊头卖狗肉－应对市场需求和风投期望
世界经济向中国转移，中国市场潜力无穷
创业是折寿的实验，Co-founder的生活跟常人不一样
创业失败被抹杀，创业成功被捧杀
烧尽在黎明前的黑暗中（资本风险）
做个蓝海企业，不要红海企业
大企业靠品牌和收购，小企业靠创新和速度

创业的故事，能够讲出来的只有百分之一，因为创业大约百分之九十的时间是用来开会，做研究等繁琐的事情，剩下的百分之十， 又有百分之九是不能说的故事，真正讲出来而且大家又感兴趣听的，就剩百分之一了。这是他的开场白。在他的叙述中，也感到了这点，但其中的百分之一也有不少可以让人琢磨的了。

Stay hungry, stay foolish! 他用乔布斯的话结束了他的演讲。

Scrum Fundamentals for Teams

Today I joined one day training about "Scrum Fundamentals for Teams". Throughout the sessions and exercises, I got some general idea about Agile and Scrum from delivery team perspective. The learning course included the following areas

Principles of Agile
Agile - uncovering better ways of developing software by doing it and helping others do it. There are 12 principes behind the Agile manifesto.

Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan

Agile & Scrum Vocabulary
User stories - lightweight requirements structure focusing on stakeholders and value (who, what, why)
Acceptance Criteria - agreements of functional expectations between PO and delivery team (DT), represents external quality
Definition of Done - description of the work that is accomplished by the team for each story, represents internal quality
Points - a relative estimate of product backlog items
Velocity - the measure of work from product backlog accepted by PO each sprint
Impediments - blocking problem preventing team achieving higher performance
Sprint - a timebox a.k.a an iteration
Sprint Goal - business value based desc of each sprint goal

Scrum Framework
Scrum is a framework, extremely simple, part of Agile umbrella, based on self-organizing, cross functional teams iterative & incremental delivery.

Scrum Roles
Product owner (PO) - vision, roadmap, prioritize backlog, acceptance criteria
Delivery Team (DT), a.k.a. Development Team
ScrumMaster - servant leader, removes impediment
Functional manager - support scrum team following scrum framework and each role's responsibility
   
Scaling Scrum
Scrum of scrums
Scaling product ownership (chief PO, product line owners, PO)
Scaling teams (component teams, feature teams, hybrid mode)
Distributed teams (best practices)

Preparing Product Backlog
User stories
Acceptance Criteria
Grooming meetings
Estimate and sizing

Key takeaways
Don't go agile just because of agile is popular
High performance team is key to success (self-organizing or functional manager arrangement)
Iteration development and continuous integration enables workable software after each Sprint
Prioritize work and deliver potentially shippable product in each Sprint
Daily stand up (daily scrum) meeting is very important for transparency
Definition of Done is very important for achieving Sprint goal (satisfying customer requirements)
2 weeks Sprint is the recommended timebox
Sprint goes planning, iteration, review and retrospective
Make things simple (maximizing product backlog)
Scale scrum for large product

Email Protocols

When sending or receiving emails, email client needs certain protocol to talk to email servers. In general, there are five protocols for incoming and outgoing emails, namely IMAP, POP3, SMTP, MAPI and HTTP.

IMAP (Internet Message Access Protocol), latest version is 4, so also called IMAP4. It is a client/server protocol in which e-mail is received and held for you by your Internet server. It is two way, so changes on client will reflect on server as they are connected (online).

POP (Post Office Protocol), latest version is 3, so also called POP3. It provides a simple, standardized way for users to access mailboxes and download messages to their computers, then act on the downloaded messages without needing to stay connected (online). It is always one way, from server to client.

SMTP (Simple Mail Transfer Protocol) protocol is used by the Mail Transfer Agent (MTA) to deliver your email to the recipient's mail server. The SMTP protocol can only be used to send outgoing emails, not to receive incoming emails.

MAPI (Messaging Application Programming Interface) is Microsoft's proprietary email protocol.  It provides greater functionality than IMAP for Outlook email clients interacting with an Exchange email server. It only works on this combination, not others.

HTTP (Hypertext Transfer Protocol) is the application protocol for web communication, but it can be used for accessing mailbox, a.k.a. web based email. For instance, Exchange server can be accessed by Outlook Web Access (OWA), Hotmail/Gamil etc can be accessed using browsers.

DNS Record Types

A Record - address record, contains a domain to IP address mapping
CNAME - Canonical name record, alias of one name to another canonical domain name. useful for creating multiple subdomains like docs.mysite.com, home.mysite.com, news.mysite.com for different purpose
MX Record - Mail exchange record, direct email to servers (hosts providing MTA services) for a domain
NS Record - Name server record, determines which servers will communicate DNS information for a domain (delegates a DNS zone to use the given authoritative name servers)
TXT Record - contains arbitrary text but can also be used to define machine readable text.

For details and complete record type list, look at wikipedia List_of_DNS_record_types