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
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
20年以上続く PHP 大規模プロダクトを Kubernetes へ ── クラウド基盤刷新プロジェクトの4年間
Avatar for Yuichi Sugiyama oogfranz
PRO
0
180
スピンアウト講座03_CLAUDE-MDとSKILL-MD
Avatar for overflow ,Inc overflowinc
0
1.2k
LLMに何を任せ、何を任せないか
Avatar for an cap120
10
5.2k
【PHPerKaigi2026】OpenTelemetry SDKを使ってPHPでAPMを自作する
Avatar for Futoshi Endo fendo181
1
190
TUNA Camp 2026 京都Stage ヒューリスティックアルゴリズム入門
Avatar for terry-u16 terryu16
0
260
Embeddings : Symfony AI en pratique
Avatar for Grégoire Pineau lyrixx
0
210
Change Calendarで今はOK？を仕組みにする
Avatar for tommy tommy0124
1
100
形式手法特論：SMT ソルバで解く認可ポリシの静的解析 #kernelvm / Kernel VM Study Tsukuba No3
Avatar for y_taka_23 ytaka23
1
780
スピンアウト講座02_ファイル管理
Avatar for overflow ,Inc overflowinc
0
1.3k
Astro Islandsの 内部実装を 「日本で一番わかりやすく」 ざっくり解説！
Avatar for Wu Kenji knj
1
270
The Rise of Browser Automation: AI-Powered Web Interaction in 2026
Avatar for Marc Thompson marcthompson_seo
0
310
君はジョシュアツリーを知っているか？名前をつけて事象を正しく認識しよう / Do you know Joshua Tree?
Avatar for Y-KANOH ykanoh
4
120

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
320
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
150
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
94
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
290
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.5k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
140

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 