$30 off During Our Annual Pro Sale. View Details »

Project Lab Squirrel #2

Mu-An Chiou
May 25, 2014
Technology
1
570

Project Lab Squirrel #2

Location: My home
Time: 25 May 2014 (Sun)

Mu-An Chiou

May 25, 2014
Tweet

More Decks by Mu-An Chiou

See All by Mu-An Chiou
Details on <details>
muan
0
290
Publishing and Hosting on GitHub pages
muan
4
130
Having no patience(Japanese)
muan
1
360
JSDC
muan
2
520
Design with Code
muan
5
530
Having no patience
muan
1
290
Design in GitHub
muan
5
360
Project Lab Squirrel #1
muan
8
810
A girl with no patience
muan
18
1.9k

Other Decks in Technology

See All in Technology
コーポレートデータマスター構築への道
kworkdev
PRO
0
130
Atelier BlueHats : Migration de l’application COBOL MedocDB de GCOS à GnuCOBOL sur GNU/Linux
bluehats
0
120
検証と資産化を形にするプロダクト組織へ/tapple_pmconf2024
corin8823
1
8.4k
241130紅白ぺぱ合戦LT「編集の技術」
toya524287
5
620
PostgreSQL Conference Japan 2024 A4 Comparison of column-oriented access methods
nori_shinoda
0
130
深層学習のリペア技術の最新動向と実際 / DNN Repair Techniques for AI Performance Alignment for Safety Requirements
ishikawafyu
0
440
Raspberry Pi 秋の新製品をチェックしてみよう / 20231202-rpi-jam-tokyo
akkiesoft
0
380
Oracle Base Database Service：サービス概要のご紹介
oracle4engineer
PRO
0
15k
Nihonbashi Test Talk #3_WebDriver BiDiと最新の実装状況 / WebDriver BiDi latest status
takeyaqa
1
140
ファインディの4年にわたる技術的負債の返済 / Repaying 4 Years of Technical Debt at Findy
ma3tk
7
3.7k
間違いだらけのポストモーテム - ホントに役立つレビューはこうだ!
jacopen
5
970
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
ryochike
0
160

Featured

See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Code Review Best Practice
trishagee
64
17k
Docker and Python
trallard
40
3.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Facilitating Awesome Meetings
lara
50
6.1k
Designing Experiences People Love
moore
138
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
410
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k

Transcript

  1.  ḱᙿᖳᔚᩲᤍ࿴ Project Lab Squirrel #2 

  2. layout 

  3.  FROM IMAGE TO HTML ᨜ᷡṍኈ

  4. <body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>

    <a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>

  5. <body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>

    <a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>

  6. <body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>

    <a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>

  7. <body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>

    <a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>

  8. <body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="">PARTICIPANTS</a>

    <a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>

  9. <div class="content"> ... </div> .content { padding: 50px; height: 100%;

    overflow: scroll; } <div class="menu"> ... </div> .menu { float: left; width: 20%; height: 100%; } TADA!

  10. Wait, float?

  11. JUST LIKE WRAPPING! WORD. Ⴐ᠏የ᠏Ⴐ᠏የ

  12.  CSS BOX MODEL ᷱᥘኦṞ

  13.  CSS BOX MODEL ᷱᥘኦṞ box-sizing: content-box CONTENT PADDING BORDER

    MARGIN WIDTH

  14.  CSS BOX MODEL ᷱᥘኦṞ box-sizing: border-box CONTENT PADDING BORDER

    MARGIN WIDTH

  15.  GIT       

  16. GITHUB FOR MAC/WINDOWS GIT ON THE COMMAND LINE

  17. Git  REPOSITORY ఔࣜࢿྉᇄ  BRANCH ෼ࢧฏߦੈք  COMMIT ঝ୚ఏަ

     DIFF ࠩҟ

  18.  ADD a BRANCH ᙮ᬓᵪḝᕴ຅

  19. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

  20. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

  21. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

    git add css/style.css ਗЪ ᏦࣩЗѧ

  22. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

  23. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

  24. WOrking area STAGING AREA GIT DIRECTORY modified: index.html git checkout

    style.css ਗЪ ᏦࣩЗѧ modified: style.css

  25. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

  26. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

    git add css/style.css ਗЪ ᏦࣩЗѧ

  27. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

  28. WOrking area STAGING AREA GIT DIRECTORY modified: index.html git commit

    -m “修改css” ਗЪ ܸ֛ৃࢹ modified: style.css ৃࢹ

  29. WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css

  30. WOrking area STAGING AREA GIT DIRECTORY modified: index.html 83ca17b style.css

    commit sha

  31.  PUBLISH BRANCH ᓓ᧵ᵪḝᕴ຅

  32.  PULL REQUEST

  33.  PULL REQUEST

  34.  TADA!

  35. ᷀ᮈ฼ Project Lab Squirrel #2 