今天看到笑来一篇文章，讲的是做对的事情。

万事开头难
不对。难的是，觉得达不到那么好的水平。可是哪件事情，开始不是这样呢？
学说话，学写字，开始练字，开始骑自行车，开始拉小提琴。
反正，在今年以前，我是这样的人，开了头，就没办法继续下去，因为看不上，因为心里着急，因为难过，因为生气，因为拍别人说，因为希望自己不丢人。
到后来，就不敢开头了。另一个缺点是，以后再说吧。比如练习，比如作业，比如复习，比如…
这两个缺点，导致了我的行为，基本上不符合复利曲线.

学吉他小试牛刀

我今年取得了什么进步呢？ 弹吉他。

弹吉他,正确的事，是切和弦。

首先，我在google上搜索教程，得到了一个排名列表。经过筛选，我选择了Justin Guitar.跟着他的视频走，把自己切和弦的练习过程，用摄像头录下来，分析自己的情绪，手型，动作。并记录。有几次，觉得自己好笨，觉得自己练不下去了。但这个时候，恰恰是要突破的黑暗的前夜。
这个情况我遇到了两次。第一次，难过着继续弹。第二次，就有意识的了，忽然一乐，笨就笨，接着弹就好。果然，第二天，又突破了。啊哈哈哈。下面是我的一个记录：

到现在，吉他练习了三个月，我觉得进步蛮大的。现在每天时间少了，我还是会花10-20分钟，练习最难的和弦切换。 这也是Justin的建议。因为练习最难的，其他的和弦切起来，也会悄悄的进步。

从最难的和弦练起

换做以前的我，我会跟着视频弹一下，然后觉得手好疼，然后觉得自己好差，如果，十年前，上大学的时候开始练习，现在不就会了吗？ 真傻逼呀。哎，我大学又有很多遗憾啊，真难过。要刻苦练习，以后再说吧。三个月过去了，还是屁也不会。

这就是截然不同的两种想法，差距多大呀。才三个月，就有天壤之别了。所以，从这个意义上说，自己蠢得可以；所以现在看，自己又是非常幸运，终于走对了路。

更重要的是，做对的事情

一个公司成长了，一个人发达了，肯定是做对了什么事情，而做对的这个事情，也许是CEO都不知道的。一个人，也是这样。

这解释了我的一个困惑：有人常觉得自己没有发大财，然而她是一个非常努力的人，非常勤奋。她没有做对的事情。

也解释我的第二个困惑，明明自己那么明显的缺点，怎么还能拿那么大的offer。正式因为这件事的价值，超过了一份普通工作的价值。

现在开始练习写作

这个给我的启发，是接着做正确的事情罢，比如写作。开心的写，专心点写。写确实可以帮助思考，帮助理清思路，说不清楚的事，写下来最有帮助的。笑来来事是这个观点。张五常也是这么说的。

这又是我的一个反例，道理知道了没有用出来，那就是没用。

写出来，第二个好处，就是能帮助自己说出来。

我喜欢的球评作家李承鹏。世界杯的时候，我看他的球评，也看他的节目。做节目的时候，他说的话，就是他在文章里写的那些内容。

提到表达能力，会觉得要说的流畅，声音多么动听。然而，这也是误区。思考，内容，行为才是关键。

看看Elon Musk的视频就知道了，天哪，他说话怎么这么磕磕绊绊。

张五常也说，同学们听课，不要光看那些课堂气氛，还要看老师的真才实学。如果他确实很有学问，那么课上的不怎么样也要去听，就是这个意思。

写出来的，第三个好处，是方便分享。你写了，发出去，总有人看到，总能有那么一点点作用。

笑来的这些东西，不是方便的帮助了我吗？

写的最大的好处，最后说，写会越写越好的，哈哈哈

好吧，10年以后，看看效果吧，哈哈哈。

菜单

1. 沙拉
2. 拌秋葵
3. 烤羊排
4. 冬瓜排骨汤(清炖)
5. 土豆茄子豆角粉条五花肉块儿 小杂烩
6. 馒头、米饭、马生菜团子

---

采购清单：

1. 小冬瓜
2. 苦菊
3. 彩椒 红 黄各一个
4. 大米

行政总厨 Haydn

2016.7.2

2016.7.5
start to learn the javascript 三剑客嘛
JS is from 1995. It is used to change the view, the behavior of the page. It make a static page, into active.

interactive ruby , that’s funny!!!
Means responseitive for every moment!!!

2016.7.2

ruby seems like a script language, which has the thinking of object-oriented.

Maybe it is like the name, interactive, elegant.

Heard it for 13 years, i have gone through all of it, after 3 days. How many 3 days past, in the pasting 13 years?

Thanks to xiaoli.li, thanks to Xinshengdaxue.

2016.7.9

responsive website

1. use framework w3.css
2. use framework Bootstrap.
3. the temps are amazing .

@media

1. @media screen and (min-width: 480px) is often used.

flex

1. display:flex
2. justify-content:space-around/space-between is cool.
3. use flex to implementing the responsive website.

box-sizing

not really understand the meanin of box-sizing: border-box;. if this is true, what’s the meaning of padding ? margin?

CSS3 Multiple Columns

1. syntax: keyword?
2. frequent used methods?
3. amazing things?
4. questions?

too young to be used widely.

Button

1. 3 methods of button. <a> <input type="button" <button >
2. just one transition-duration: 0.4s; makes the :hover animatedly.
3. ul.breadcrumb li+li:before this is cool.

   filter

4. image filter, fucking amazing.

animation

1. keyframes hold the centain style of elements at certain times;
2. animation changes nothing, but show the process. what to do if change the property when animation finished.
3. :hover + transition:0.3 change the box-shadow animatedly.
4. in this example,, i don’t understand the transform:translate(-50%,-50%)

transition

1. the transition is nice and easily use in H5.

transform 2D / 3D

1. tanslate()
2. rotation(20deg)
3. transform: scale(2, 3);
4. a little silly of the parameter sequence of matrix() matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
5. rotateZ() and rotate() have the same effect.

   font

6. speficy the font used from net.

   1 2 3 4

   @font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

7. the bold font can be specified separately.

   1 2 3 4 5

   @font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; }

word wrap

1. word-wrap:break-work;

   shadow!!

2. text-shadow: 0 0 3px #FF0000; red neon shadow

   gradient

3. to right to left to bottom left this syntax is cool.
4. linear-gradient + angle is confused for me??? 180deg equals to bottom.
5. the rainbowl!!! background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);

   background image

6. center fixed is amazing.
7. background-origin+coutent-box/border-box/
8. background-clip+ coutent-box/border-box/
9. contain means stretching the image until the long side fits the viewport, short side is not cover all the space of course.
10. cover means stretching the image until the short side fits the viewport, long side is not all showed.

CSS3

1. CSS3 is latest. backward compatible.
2. eclipse corner 50px/15px what does it mean?
3. border-radius:25px

CSS counter

1. increase before use or after use, is the same effect. Because it’s an interpreted language.

   1 2 3 4

   h2::before { content: "Section " counter(section) ": "; counter-increment: section; }

   1 2 3 4

   h2::before { counter-increment: section; content: "Section " counter(section) ": "; }

2. this example is confusing for me.

   1 2 3 4

   li::before { counter-increment: section; content: counters(section,".") " "; }

CSS attribute selector

1. a[target] selects every <a>element which has target attribute.
2. a[target=_blank] the condition attribute has a value _blank
3. This is a example of lots of CSS @selectors.

4. *= and ~= the latter has the limit space-separated while the former is arbitary match.

5. the defaulted blue border of <input type="text"> looks really beautiful when correctly configured.

6. this animation is really cool.

   1 2	-webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out;

spirit

1. fucking easy!!! implement such a tech!!!!
2. to the right one, need add -47px,0 .

css tooltip

1. people are crazy. css draw a bubble via border-color:black transparent transparent transparent transparent . Then a arrow towards bottom is created.!!! Amazing~~~
2. border property type should not be bland. must be specified.
3. the content to generate the arrown should be empty "". I use " ", black transparent trick doesn’t work!!!
4. opacity: 0; transition: opacity 1s; works. But transition:visibility 1s does not work.

dropdown

1. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); is a CSS3 property. Giving shadows.
2. How to make a dropdown menu?

   Define dropdown and dropdownContent two classes. dropdown need to respond to :hoverstate, then dropdownContent set display:block to make the effect dropdown.

2016.7.8

dropdown

1. i can do dropdown btn;
2. who can explain this for me

   1 2 3 4

   .dropdown:hover .dropdown-content { }

It defines a css pseudo class：class dropdown with a state hover, then search the .dropdown-conten ‘s child.

1. what happen if descripe an element twice? seems no matter.
2. body{margin:0} hide the scroll bar white apperance.
3. how to implement a drop down menu in a navbar

   opaque/transparency

4. if div is somewhat transparent, the text in it still opaque. Of course not.

   pseudo element

5. really crazy. select the first line of p?? yes, that’s true. p::first-line{color:red;}
6. How to store every blog’s style?
7. this spicity can only be used on block element.
8. ::before, seems violates ghe style philosophy. because, it insert data.
9. selection is easily implemented.

pseudo class

1. pseudo class can be combined with class
2. hover and show hidden
3. p:first-child first p.
4. CSS Pseudo Elements is confused, cause there is no description.

CSS Combinators

1. descendant, not class relationship,but element contained in.
2. adjacent sibling is just look at the next, not the previous.
3. OK general sibling is next’ next, not the previous either.

align

1. inline-block is funny, it’s for convenient, and i don’t see any design philosophy.
2. inline-block can make 3 a looks like navigation bar.
3. the philosophy is 实用主义。
4. margin has an auto value.

float

1. for an horizonal list, display:inline has the same effect with float:left;
2. float+margin is cool and convenient than position+left/right.

position

1. static makes an element can’’t be adjusted by left, margin.
2. absolute is stupid, it’ relative to the nearest element.
3. element default position is relative, i think.
4. z-index is empty, exist in imagination.
5. z-index + position, can do the overlap.
6. overflow:auto means asking the browser to scroll it ? then what’s the difference?
7. cursor can be changed. just by cursor:crosshair
8. text-align have effect on all the elements, even it’s an image.
9. always declare the !DOCTYPE html

2016.7.7

1. selector of css can be element id
2. html elements can refer to more than one class, for example <div class="dropdown right"> div refers to two class, dropdown right.
3. css could use the fucking familiar slash + star things.
4. link rel=”stylesheet” type=”text/css” href=”mystyle.css”
5. background:red fixed right top url(“xx.jpg”); order seems not matter. but documets say order matters. color img repeat attachment position
6. border’s width color type could all be specified.
7. margin generates space around the elements.
8. margin collapse
9. powderblue is a nice color.
10. we practice our self to implements designs.
11. text-decoration often used to remove the underline of a link.
12. oh, text-indent is just first line??? oh, yeah, if all need indent, just set the parent element.
13. what’s the unit of line-height? unit of standard.
14. unicode-bidi + direction == multiple languages?
15. oblique is more slasher than italic.
16. font family variant small-cap
17. Do u know hot pink?
18. tr has an state it’s hover
19. overflow-x:auto; make a scroll table.
20. display:none; visibility:hidden are different;

2016.7.2

1. css start in style tag. css describes all the elements tags, that means
2. the same tag,has the same looks.
3. so it’s an convenient methods to control all the appearances of the html document.

5 days… about 12h
html quiz 92 23/25 yes!!
h5 quiz 84 point 21/25 yes!!!! acrosss
2016-7-7
4h

h5

1. you can create a new tag by script in IE 9.
2. lt IE 9, we use the js HTML5Shiv, authored by Sjoerd Visscher.
3. section and article are the same looks. NO Different.
4. 结构化 webpages header.
5. artticle section div, 少用 div 吧
6. Try to avoid code lines longer than 80 characters.
7. pace-less is easier to read, and groups entities better together:
8. a canvas has no border and no content. like a gl….
9. js 竟然可以画 东西 哈哈哈
10. how drag a text? p seems not draggable.
11. what’s the different between local storage and application cache?
12. js worker is funny too. Define a worker outside, and in the page, use instance a Worker, then handle the posted message.

form

1. form, sounds like a table or something 表格。but it is a container to collect user input. saic. let talk abou our new friend, tag element, form. let us check, what it will be inside a form pair.
2. input element is them most important form element.
3. what’s the different between the id and name attribute?
4. each input arean should have a name attribute.
5. fieldset + legend give a surounding box with a title too, grouping the input elements.
6. select+option givec you the dropdown menu.
7. button is als an element, peers to input select
8. input+datalist give a dropdown selection for an input area. the connection is a list=”id” attribute in input and an id attribute in datalist.
9. keygen is more secure. It will generate a private key and public key. Private key is stored locally, while the public key will send to sever. The sever will the generate a certificate, bo authenticate the user later.
10. name attribute in input is for parameter pair to post or get to server.
11. output is just for the calculatin??? it
12. input is a single element!!!!
13. radio is a single selection but checkbox is 0 or more.
14. My god, input type=”color” can easily select the color and give the rgb value!!!!!! fuck amazing!!!!
15. for the design principle, h5 has emplementd lots of modern requiment. such as the restrict attribute of inputbox, for an example, pattern, required, or step.
16. What’s the different between disable and readonly? the disable won’t submit as a parameter.
17. An input outside the form pair, can declare the relationship by form attribute.
18. the formenctype is cool.
19. siz and maxlength: size for apperance, and maxlength contols the real input.

2016.7.6
UtF8 计算机的字符编码，还是围绕人转呢。 描述人的字符。

responsive

cool cause it’s necessary!!!

javascript

the first thing is to use js with tag script, second is noscript to handle the exceptions.

iframe

1. it can be show different pages!!!!
2. it can be used for the target of an link!!

   block class

3. block has inline and block things such as div and span
4. div + class is powerful.
5. class canbe define withprefix . is there any name space?
6. can one element belongs to several class???

   image

7. height and width needs to be specified to avoid the flicker while the image loads.
8. 2 ways to specify the width and height. style=”width:12px;height:12px;” width=”12” height=”12”, but style wyas is recommended, because it prevent the style sheet changes the size of img.
9. float attribute is funny. to describe the posotion relation with text around
10. image map is fucking cool. the connetion between an img and map is usemap=”#mapname” name=”mapname

    table

11. table has tr td th sub element
12. style can be declared like table, td, th{ border:1px;}
13. table把1维的数据，二维展开
14. colspan rowspan
15. caption is the table header on top of the table.
16. table#t01 tr:nth-child(odd) 这个碉堡了。在style里，指定了#t01的id， 多一个空格会怎样？ 没事。

list

1. list show the format we want to show in our document
2. unordered list, mark type specified by, style=”list-style-type:circle”
3. ordered list, type 1,2,3 or a.b.c. type=”1” or type=”a”
4. dl dt dd show term description
5. The menu list is amazing!!!! ul#menu li a:hover{color:orange} li a 写在一起什么意思？ 不带li 效果也一样啊！！！！

2016.7.5 3hours

formating

1. elements such as sub sup and bold italic del ins, too heavry for just formating
2. I wonder ins looks like what? wechat name must support something like superscript
3. ao, strong is brighter than bold? NO, it’s the same. but atom renders different.
4. Itlic means without any importance!!!
5. H₂O this is super cool!!!!

quotation

1. q, browser add quation marks around, while blockquote indent.
2. blockquote has an attribute cite, which contains the URL of the quotation.
3. bdo is a pitty element tag. has an attribute, dir=”rtl/ltl”
4. I think abbr is fun, casue i have an abbregative nickname B.A.D.

computer code

1. kbd, is a strange abbregation for keyboard input. File | Open…
2. samp sample output, my god , such a funny nickname.
3. code var is great. FUCK
4. int i = 100;

comment

2. can you see the comment above?
3. This is conditional comments. reeally some sense of programming.
   ######

color

1. rgb(255,144,22)

css

1. css is for color and style. cascade styles sheet.
2. There are 3 kinds. inline, internal, external, style attribute, style element, and css document specified by link.
3. Stye element inside a header section, what if there is no header section? Nothing, it still works. Color means text color, not others.
4. External styling can define styles for many pages, and if you change it, the entire website appears different!
5. Link element is a single one. It has two attribute. One is rel, one is href. I don’t know what does it mean, whatever, I will learn it in css tutorial.
6. hr border:1px solid rgb(255,122,22)
7. Oh, No.6 is the htlm box model, the box has border padding key value pair.
8. Margin defines the spaces outside the box, and padding defines the inside spaces.
9. id attribute is funny. ID specifies the element, and it could be referenced in css. It’s amazing that several elements could share the same id.
10. css is amazing. The id thing, is just what i am thinking about. I am defining a Macro. every elements can use it!!!!
11. There is also a class attribute, i think it can be down by id too. of course. In my opinion, id is more flexible here. But of course, class make the code more neat and readable.

link

1. Now it’s the most important part of html, links!!!!!
2. why the tag name is a?? because it’s the NO.1 thing in HTML.
3. href can be a local link.
4. the css style can define state of a, using format as: a:visited{color:red;background-color:transparent;text-decoration:underline}
5. I love the w3cschool turorial, because, for the second time, it hits what I am thinking about!!! This time, it the target attribute. Target speifies where to open the page, blank, for an example.

6. Maybe, i am really good at coding.

   remove the underline appears in the link

   a:link{
   text-decoration:none;
   }

2016.7.4

1. Meta data means the data about data.
2. html meta tag contains head title style and link.
3. Stye tag specifies the css things inner, while the link tag tell the outside css document.
4. The pre tag keeps/preservers the linebreak and space for, i think , poems.
5. style seem to an attribute also. note only tag ,but also attribute? not only element but also attribute!
6. style has some name:value; pairs such as:
   • color
   • background-color
   • font-family
   • font-size 200%
   • text-align 这个 为什么不是 text-alignment 呢，瞎鸡巴简写

2016.7.2

1. br means line break. I have use a p /p pairs. haha
2. element is things like html p
3. all elements have attribute
4. img is a non-pare element
5. the src in img, the value of src can like a local path, or a network uri
6. title attribute is for every elemnts, used for tool tips.

---

attributes often used they are:

title

src

style inline css

id the unical id for an element

href the url for an adrress used in tag ‘a’

disabled

alt

2016.7.2
Tomorrow, start from Headings.

version 0.1

1. 参考 如何判断文章好坏里的格式化写作

2. 检查是否已 添加链接。

对我来说，全栈意味着，在CTO的路上，往前走踏实的一步。做技术总监的时候，总是觉得没有写过后端的代码，而感到心虚。跟服务器的同志们开会的时候，特别心虚。毕竟，我不能提枪上阵，这个感觉还是非常差的。所以，这次有机会，在这里开练，我感到非常开心。

哈哈，特别要感谢李笑来，他是我行动派的旗帜！

学习成果

1. 在github搭建 Hexo 静态博客站点.

   这篇发表在github的个人站点。

2. 用了markdown的语法，在atom里，写作。

明日计划

1. 继续学习李笑来全栈工程师博客的下一篇。花费时间预计在1小时。但阅读文档的时间，可能会稍长。慢慢来吧。不着急。
2. 继续写总结。
3. 解决效果问题。