Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Project Lab Squirrel #2

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

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
370
Publishing and Hosting on GitHub pages
Avatar for Mu-An Chiou muan
4
160
Having no patience(Japanese)
Avatar for Mu-An Chiou muan
1
400
JSDC
Avatar for Mu-An Chiou muan
2
560
Design with Code
Avatar for Mu-An Chiou muan
5
570
Having no patience
Avatar for Mu-An Chiou muan
1
320
Design in GitHub
Avatar for Mu-An Chiou muan
5
380
Project Lab Squirrel #1
Avatar for Mu-An Chiou muan
8
890
A girl with no patience
Avatar for Mu-An Chiou muan
18
2k

Other Decks in Technology

See All in Technology
内製AIチャットボットで学んだDatadog LLM Observability活用術
Avatar for k.masachika mkdev10
0
110
AI時代の「本当の」ハイブリッドクラウド — エージェントが実現した、あの頃の夢
Avatar for Masahiko Ebisuda ebibibi
0
120
クラウド × シリコンの Mashup - AWS チップ開発で広がる AI 基盤の選択肢
Avatar for Hiroshi Tokoyo htokoyo
2
250
「Blue Team Labs Online」入門 - みんなで挑むログ解析バトル
Avatar for Noriaki Hayashi v_avenger
0
180
CyberAgentの生成AI戦略 〜変わるものと変わらないもの〜
Avatar for katayan katayan
0
220
AI駆動AI普及活動 ～ 社内AI活用の「何から始めれば？」をAIで突破する
Avatar for oracle4engineer oracle4engineer
PRO
1
100
マルチアカウント環境でSecurity Hubの運用！導入の苦労とポイント / JAWS DAYS 2026
Avatar for GENDA genda
0
710
AWS CDK「読めるけど書けない」を脱却するファーストステップ
Avatar for Makky12 smt7174
3
120
わからなくて良いなら、わからなきゃだめなの？
Avatar for kota oue kotaoue
1
360
Claude Code 2026年 最新アップデート
Avatar for Oikon oikon48
13
10k
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用～設計で可視化、AIで加速する「楽に回る」運用設計のコツ～
Avatar for s-hata shoki_hata
0
3k
AIエージェント、 社内展開の前に知っておきたいこと
Avatar for oracle4engineer oracle4engineer
PRO
2
140

Featured

See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
480
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
73
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
830
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
160
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
76

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 