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
CSSの最新トレンド Ver.2025
Avatar for tonkotsuboy_com tonkotsuboy_com
11
4.3k
Monorepo Error Management: Automated Runbooks and Team-Targeted Alert Distribution
Avatar for Shota Iwami biwashi
1
140
これならできる！Kotlin・Spring・DDDを活用したAll in oneのマイクロサービス開発術
Avatar for 株式会社出前館 demaecan
0
250
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
38k
ハッカー視点で学ぶサイバー攻撃と防御の基本
Avatar for Nomizo Nomizo nomizone
0
1.2k
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
12k
Oracle Cloud Infrastructure データベース・クラウド：各バージョンのサポート期間
Avatar for oracle4engineer oracle4engineer
PRO
48
33k
データベースの引越しを Ora2Pg でスマートにやろう
Avatar for Yuichiro Narita jri_narita
0
190
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
Avatar for Chihiro Ito chiroito
2
1.3k
vLLM meetup Tokyo
Avatar for jpishikawa jpishikawa
1
120
キャッシュレス決済のプロダクトから決済基盤への進化
Avatar for Ryosuke Uchitate b1a9id
0
230
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
770

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
269
20k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
42
2.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k

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 