a code learning blog @juneyin - Tumblr Blog

Git: Squash Commands

git rebase -i HEAD~ $numOfCommits

See

http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html

What is SVG

SVG is a graphic format which is written using a html like language. It is a great picture format for websites since its responsive and can be interactive.

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

SVG

Q: What is SVG?

SVG is an image format. It is drawn based on scale. When you make it larger, it will appear as nice as when it is small. It can also be interactive and be used to draw animation.

Q: How can I draw SVG?

You can html like language to draw complex and interactive shapes with svg.

CSS RESET

Bothered by all the white spaces of different websites? You should reset your css before start styling the webpage. Go to the link below and include the code in your style sheet.

http://meyerweb.com/eric/tools/css/reset/

D3学习笔记

Q：什么是D3?

D3是javascript的一个数据可视化函数库。它使用SVG, CSS, 和HTML技术来呈现数据，让原本枯燥的数据变成鲜活的可交互的图表，很适合网页开发。

Q： D3有多么强大？

一万行左右的代码 ( version 3.5.16 是9544行)

Q：除了D3，还有那些类似的工具。它们有什么区别？

processing, SPSS, excel, PPT,chart.js 、 highchart.js 、 amchart.js

Q：D3是怎么可视化数据的？

1. 在网页上创建几个DOM 元素

-选中已有元素（ds.select() or d3.selectAll()）

-enter

2. 把数据和DOM元素连接起来(.data([1,2,3]) )

3.修改这些DOM元素，利用数据的属性来让它们变化

Q3：怎么在你的网页上使用D3？

三种选择1）cdn 2）下载d3.js或者d3.min.js 3）通过github下载

Q3: 什么知识会帮助学习D3？

网页技术的基础，比如说HTML, JS, CSS, 一些函数库比如Jquery 都会对学习D3有帮助。

-D3 的selectors和CSS和Jquery的语法类似

-D3 也有类似

-D3 使用JS的语法来处理各种数据

推荐阅读： http://blog.infographics.tw/2015/03/d3js-the-introduction/

jquery like selection,control html DOM, use a css like language

creating SVG graphs， or html css

uses scales to create different graphs

work with external data

learning with Feynman Technique 用费曼技巧学习

今天我学习到了一个叫做费曼技巧的学习方法，分为三步。

1）学习前，先在纸上记录下你的问题。

2）学习中，想办法找这个问题的答案

3）检验，想象用简单明了的话写出答案。要是写不出答案，就继续学习。

不同的人有不同的学习方式，我想试验一下这个技巧对我是否合适。粗看下来，我觉得这可能是个有效的方法，因为它的每一步都很有意义。

第一步让你明确学习目标，第三步不仅能帮助你整合理解知识，而且能让你知道自己哪里还不清楚。有了这两步，学习就会更有效。

我打算用它来试学习D3.js

#learning techniques #Feynman Technique

git stash + git stash apply

You may have known that git stash means put your work aside.

This is handy when you want to checkout to another branch from your dirty working branch

git stash will enable you to get the changes back!

-go to master safely from a dirty working branch

$git stash

$git checkout master

-on master branch (you can get the new changes)

$git pull

-go back to your working directory

$git stash apply

How to fix the display issue with favicon in chrome

open finder

type this:~/Library/Application Support/Google/Chrome/

go to default and delete the Favicons file in there. It’s the cache.

How to add a favicon on webpage

1.put the image you like into the folder, and name it as “favicon.ico”

2. put this in your html header

#favicon

get a remote branch on local computer from github

$git checkout --track origin/theBranchYouWantToget

repeat a function in js

Repeat a function and stops it

var t1= setInterval(function(){console.log(1)},1000);

clearTimeOut(t1)

repeat a function once

var t1= setInterval(function(){console.log(1);clearTimeout(t1)},100)

repeat a function 4 times

var a=0;

var t1 = setInterval(function(){

console.log(1);

a++; if(a=4)clearTimeout(t1)},1000

})

#timers #js

HTML table

From W3schools http://www.w3schools.com/tags/tag_tbody.asp

The structure of a table is very similar to that of an html page,

it has a head, a footer, and a body.

In each section, there will be a table row, in each row, there will be table data or table head.

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>

How to turn a local git repo into a normal one

$cd targetRepo

$rm -rf .git

Creating a new branch

git branch

git checkout master

git pull(update the current master branch)

git checkout –b branch name

git push origin branch name

git branch --set-upstream-to=origin/branch name

How to uninstall npm packages globally using command line?`

1. Check all the globally installed packages

$npm ls -g --depth=0

2. uninstall the specific package

$ npm uninstall -g thePackageToUninstall

Create a github branch and merge using command line

1. change into the working directory

$cd DIRNAME

2. check what branch you are on

$git branch

>> *master work1

Note that the star signifies the current branch

3. switch to master branch (if necessary) and make sure you are update on the master branch

$git checkout master

if you are not on master branch, this switches you to the master branch

$git pull

this updates the master branch

4.create a new branch

$ git checkout -b newBranch

this creates a new branch named “newBranch”, and switches to it

5. push the git push

git push origin newBranch

6. set upstream of the branch

git branch --set-upstream-to=origin/branch name

7. work on that branch for a while

8. add the work

$git add .

It adds all work

7.commit the work

$git commit -m “the commit message”

It commits the work, and creates a commit message

8.check the git status

$git status

check to make sure the branch is clean

9. switch to master branch again and make sure it’s updated

$git checkout master

$git pull

10. switch to newBranch and merge master

$git checkout newBranch

$git merge master

11. push it to github

$ git push

12. go to github website and make a pull request

13. on the github website compare and review

14. on the github website create a pull request

15.on the github website send the pull request to your team mate for them to review

16. If anything goes well, your team mate will click on the confirm merge

17. Then s/he will delete the branch on the github website

18. Now delete the branch on your local computer

$git branch -d newBrach

#git #create new branch #create pull request #merge request #delete branch

JS: For Loops and While Loops

This blog post explains for loops and while loops in javascript in the English language. If you have much experience in programming, you don’t need to read it. If you are new to the field and want to understand what are loops, and the differences between for loops and while loops, hopefully this blog post will help you. Feel free to skim through the part that you already know. I will use the example of chocolate cake over and over in the post. Please bear with me if you hate chocolate cakes.

What are loops and why we use them?

Loops are computers’ way to do things repeatedly.

For human beings, doing similar tasks repeatedly is tiring and error prone. Imagine you are asked to box one chocolate cake, you may happily do it. What if it’s 10,000 chocolate cakes?

Computers don’t mind repetitive work as human beings! They use loops to handle repetitive work. According to the definition on W3 school, "Loops can execute a block of code as long as a specified condition is true.”

The logic of a loop is like tasks in real life:

pack the cake →pack the cake →pack the cake→ ....→pack the cake

It will happen 10,000 times.

How to write loops in javascript?

Broadly speaking, there are two kinds of loops in javascript: for loops and while loops.(There is also for in loop , for in loop, and do while loop. They are not discussed here. You can learn them here ) Let’s read a while loop and a for loop of printing numbers from 0 to 99.

while loop

```

var num = 0;

while (num<100) { console.log(num);

num ++

}

```

Click on this like to see and run the above code

https://repl.it/BZca

for loop

```

for (var i =0; i<100; i++) {

console.log(num);

}

```

Click on this like to see and run the above code

https://repl.it/BZca/1

All loops need a starting point, a end point, and a task.The syntax can be generalized like this:

while loop

var currentStatus = startingPoint;

while (currentStatus is not the end point ){

do the task;

change the currentStatus;

}

Please note that the while loop will keep running as long as the condition in the () is true.

for loop

```

for (var currentStatus =startingPoint; i<end point; change i) {

do the task;

}

```

Use for loops or while loops?

It’s better to use for loop when you know how many times you want to repeat the task. Otherwise, while loops are more effective.

For example, if you are going to pack 1,000 cakes, you shall use for loop:

``` for (var cake =0; cake< 1,000; cake++){

pack the cake

}

```

If you are going to pack as many cakes as people give to you, you shall use while loop:

```while(get a cake){ pack it } ```

This is the end of the blog post. Feel free to leave comments and ask questions.

#javascript #loops #while loop #for loop #learn

Trending Blogs

Recently Viewed Blogs

a code learning blog