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
550
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
伴走から自律へ： 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
460
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
Avatar for coconala_engineer coconala_engineer
1
4.3k
Autify Company Deck
Avatar for Autify autifyhq
2
44k
LLM拡張解体新書/llm-extension-deep-dive
Avatar for oracle4engineer oracle4engineer
PRO
23
6.2k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
2
230
振り返りTransit Gateway ～VPCをいい感じでつなげるために～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
210
Data Engineering Study#30 LT資料
Avatar for tetsuroito tetsuroito
1
160
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
260
【あのMCPって、どんな処理してるの？】 AWS CDKでの開発で便利なAWS MCP Servers特集
Avatar for yoshimi0227 yoshimi0227
6
940
VS CodeとGitHub Copilotで爆速開発！アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
Avatar for Yusuke Yamada yamachu
3
460
Figma Dev Mode MCP Serverを用いたUI開発
Avatar for zoothezoo zoothezoo
0
230
対話型音声AIアプリケーションの信頼性向上の取り組み
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
3
1k

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
108
19k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
520
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
750
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k

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 