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

Project Lab Squirrel #2

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Mu-An Chiou Mu-An Chiou
May 25, 2014
Technology
670
1

Project Lab Squirrel #2

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

Avatar for Mu-An Chiou

Mu-An Chiou

May 25, 2014

More Decks by Mu-An Chiou

See All by Mu-An Chiou
Details on <details>
Avatar for Mu-An Chiou muan
0
380
Publishing and Hosting on GitHub pages
Avatar for Mu-An Chiou muan
4
170
Having no patience(Japanese)
Avatar for Mu-An Chiou muan
1
410
JSDC
Avatar for Mu-An Chiou muan
2
560
Design with Code
Avatar for Mu-An Chiou muan
5
580
Having no patience
Avatar for Mu-An Chiou muan
1
320
Design in GitHub
Avatar for Mu-An Chiou muan
5
390
Project Lab Squirrel #1
Avatar for Mu-An Chiou muan
8
900
A girl with no patience
Avatar for Mu-An Chiou muan
18
2k

Other Decks in Technology

See All in Technology
Datadog 認定試験の概要と対策
Avatar for Uechi Shingo uechishingo
0
210
テストコードのないプロジェクトにテストを根付かせる
Avatar for Toru Takahashi tttol
1
240
Java正規表現エンジン（NFA）の仕組みと パフォーマンスを維持するための最適化手法
Avatar for 竹内 雅和 takeuchi_132917
0
160
GitHub Copilot CLIでWebアクセシビリティを改善した話
Avatar for tomokusaba tomokusaba
0
140
なぜハノーバーメッセに行くべきなのか 〜初参加だから語れること〜
Avatar for 田中 聖也 tanakaseiya
0
190
「気づいたら仕事が終わっている」バクラクAIエージェント本番運用の裏側 / layerx-bakuraku-aie2026
Avatar for Yuya Matsumura yuya4
4
670
JJUG CCC 2026 Spring　AI時代の開発こそ標準化を武器に！ ― 方式・プロセス・プラットフォームの標準化
Avatar for WatanabeShun s27watanabe
2
650
ChatworkとBPaaS 異なる特性で学んだAI機能開発の ベストプラクティス
Avatar for kubell kubell_hr
2
570
Gradle×GitHub_ActionsでCI時間を約50%短縮 ジョブ分割の設計と落とし穴 / Cutting CI Time by ~50% with Gradle and GitHub Actions: Job-Splitting Design and Pitfalls
Avatar for 冨澤宝斗 takatty
0
570
さきさん文庫の書籍ができるまで
Avatar for H.Saki sakiengineer
0
320
Unlocking the Apps
Avatar for Tim Perry pimterry
0
150
AIが変えた"品質の守り方"
Avatar for kkakizaki kkakizaki
13
5.5k

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
240
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.8k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
55k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
930
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
240
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
240
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k

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 