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
650

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
360
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
390
JSDC
Avatar for Mu-An Chiou muan
2
550
Design with Code
Avatar for Mu-An Chiou muan
5
570
Having no patience
Avatar for Mu-An Chiou muan
1
310
Design in GitHub
Avatar for Mu-An Chiou muan
5
380
Project Lab Squirrel #1
Avatar for Mu-An Chiou muan
8
880
A girl with no patience
Avatar for Mu-An Chiou muan
18
2k

Other Decks in Technology

See All in Technology
【NGK2026S】日本株のシステムトレードに入門してみた
Avatar for 高橋かずひと kazuhitotakahashi
0
130
クラウドセキュリティの進化 — AWSの20年を振り返る
Avatar for kei4eva4 kei4eva4
0
160
AIとともに歩む情報セキュリティ / Information Security with AI
Avatar for Hokuto Hoshi kanny
3
1.2k
kintone開発のプラットフォームエンジニアの紹介
Avatar for Cybozu cybozuinsideout
PRO
0
590
Databricks Free Edition講座 データエンジニアリング編
Avatar for Takaaki Yayoi taka_aki
0
2.8k
GitHub Copilot CLI 現状確認会議
Avatar for Toru Makabe torumakabe
12
4.5k
フロントエンド開発者のための「厄払い」
Avatar for OPTiM optim
0
170
いよいよ仕事を奪われそうな波が来たぜ
Avatar for kazzpapa3 kazzpapa3
2
220
Riverpod3.xで実現する実践的UI実装
Avatar for Fumiya Sakai fumiyasac0921
2
340
なぜCREを8年間続けているのか / cre-camp-4-2026-01-21
Avatar for missasan missasan
0
1.3k
[Iceberg Meetup #4] ゼロからはじめる: Apache Icebergとはなにか？ / Apache Iceberg for Beginners
Avatar for Databricks Japan databricksjapan
0
420
AI時代にあわせたQA組織戦略
Avatar for Masami Yajiri masamiyajiri
5
2.2k

Featured

See All Featured
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
150
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
850
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
130
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
88
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
220
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
47
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
57
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
230
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k

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 