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
610

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

Other Decks in Technology

See All in Technology
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
Avatar for Hiroshi Ito itohiro73
1
430
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for ape1422 airtravelguide
0
340
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
150
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
33k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
170
生成AI開発案件におけるClineの業務活用事例とTips
Avatar for Shinya Masadome（東京AI祭） shinya337
0
240
FOSS4G 2025 KANSAI　QGISで点群データをいろいろしてみた
Avatar for kou_kita kou_kita
0
380
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
Avatar for 弁護士ドットコム bengo4com
0
1.6k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
Avatar for MasahiroKawahara masahirokawahara
0
430
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
2
920
asken AI勉強会(Android)
Avatar for 佐藤忠 tadashi_sato
0
180
AIの全社活用を推進するための安全なレールを敷いた話
Avatar for ShoheiMitani shoheimitani
2
420

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
730
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k

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 