Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Project Lab Squirrel #2

Avatar for Mu-An Chiou Mu-An Chiou
May 25, 2014
Technology
1
640

Project Lab Squirrel #2

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

Avatar for Mu-An Chiou

Mu-An Chiou

May 25, 2014
Tweet

More Decks by Mu-An Chiou

See All by Mu-An Chiou
Details on <details>
Avatar for Mu-An Chiou muan
0
350
Publishing and Hosting on GitHub pages
Avatar for Mu-An Chiou muan
4
150
Having no patience(Japanese)
Avatar for Mu-An Chiou muan
1
380
JSDC
Avatar for Mu-An Chiou muan
2
550
Design with Code
Avatar for Mu-An Chiou muan
5
560
Having no patience
Avatar for Mu-An Chiou muan
1
300
Design in GitHub
Avatar for Mu-An Chiou muan
5
370
Project Lab Squirrel #1
Avatar for Mu-An Chiou muan
8
870
A girl with no patience
Avatar for Mu-An Chiou muan
18
1.9k

Other Decks in Technology

See All in Technology
30分であなたをOmniのファンにしてみせます～分析画面のクリック操作をそのままコード化できるAI-ReadyなBIツール～
Avatar for Sagara sagara
0
170
Reinforcement Fine-tuning 基礎〜実践まで
Avatar for Morita ch6noota
0
190
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
Avatar for maaaato maaaato
0
280
プロンプトやエージェントを自動的に作る方法
Avatar for shibuiwilliam shibuiwilliam
12
9.9k
今からでも間に合う！速習Devin入門とその活用方法
Avatar for Izumu KUSUNOKI ismk
1
740
.NET 10の概要
Avatar for tomokusaba tomokusaba
0
110
2025年 開発生産「可能」性向上報告 サイロ解消からチームが能動性を獲得するまで/ 20251216 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
200
今年のデータ・ML系アップデートと気になるアプデのご紹介
Avatar for Nayuta S. nayuts
1
430
初めてのDatabricks AI/BI Genie
Avatar for Takaaki Yayoi taka_aki
0
190
MLflowダイエット大作戦
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
140
SREには開発組織全体で向き合う
Avatar for k-nagase koh_naga
0
350
AWSセキュリティアップデートとAWSを育てる話
Avatar for cm-usuda-keisuke cmusudakeisuke
0
290

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.3k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k

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 