Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Project Lab Squirrel #2
Mu-An Chiou
May 25, 2014
Technology
1
400
Project Lab Squirrel #2
Location: My home
Time: 25 May 2014 (Sun)
Mu-An Chiou
May 25, 2014
Tweet
Share
More Decks by Mu-An Chiou
See All by Mu-An Chiou
Details on <details>
muan
0
120
Publishing and Hosting on GitHub pages
muan
4
98
Having no patience(Japanese)
muan
1
330
JSDC
muan
2
450
Design with Code
muan
5
480
Having no patience
muan
1
260
Design in GitHub
muan
5
340
Project Lab Squirrel #1
muan
8
630
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
僕の Microsoft Teams (+α) 便利技紹介 2022年春
taichinakamura
0
2.4k
失敗しない条件付きアクセス Season 3
sophiakunii
0
1.2k
完全に理解した incremetal 〜そして、何もわからないへ〜
mashiike
0
210
Who owns the Service Level?
chaspy
5
710
成長を続ける組織でのSRE戦略:プレモーテムによる信頼性の認識共有 SRE Next 2022
niwatakeru
7
2.3k
TypeScript 4.7と型レベルプログラミング
uhyo
5
3k
#BabylonJS5 の祭ツイートまとめ Let's take a look at what people create with the latest #BabylonJS5
chomado
0
600
The Real MVP: Going from idea to users' hands
adavis
0
600
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
2
2.7k
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
7.1k
Power Query 日時の変換でちょっと焦ったケース +1 / Power Query Some cases
ishiayaya
0
140
20220510_簡単にできるコスト異常検出(Cost Anomaly Detection) /jaws-ug-asa-cost-anomaly-detection-20220510
emiki
2
310
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
63
7.5k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Agile that works and the tools we love
rasmusluckow
319
19k
Optimizing for Happiness
mojombo
365
63k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Docker and Python
trallard
27
1.5k
We Have a Design System, Now What?
morganepeng
35
2.9k
Producing Creativity
orderedlist
PRO
333
37k
How to name files
jennybc
39
58k
Transcript
ḱᙿᖳᔚᩲᤍ Project Lab Squirrel #2
layout
FROM IMAGE TO HTML ᷡṍኈ
<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>
<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>
<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>
<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>
<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>
<div class="content"> ... </div> .content { padding: 50px; height: 100%;
overflow: scroll; } <div class="menu"> ... </div> .menu { float: left; width: 20%; height: 100%; } TADA!
Wait, float?
JUST LIKE WRAPPING! WORD. Ⴐ᠏የ᠏Ⴐ᠏የ
CSS BOX MODEL ᷱᥘኦṞ
CSS BOX MODEL ᷱᥘኦṞ box-sizing: content-box CONTENT PADDING BORDER
MARGIN WIDTH
CSS BOX MODEL ᷱᥘኦṞ box-sizing: border-box CONTENT PADDING BORDER
MARGIN WIDTH
GIT
GITHUB FOR MAC/WINDOWS GIT ON THE COMMAND LINE
Git REPOSITORY ఔࣜࢿྉᇄ BRANCH ࢧฏߦੈք COMMIT ঝఏަ
DIFF ࠩҟ
ADD a BRANCH ᙮ᬓᵪḝᕴ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
git add css/style.css ਗЪ ᏦࣩЗѧ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html git checkout
style.css ਗЪ ᏦࣩЗѧ modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
git add css/style.css ਗЪ ᏦࣩЗѧ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html git commit
-m “修改css” ਗЪ ܸ֛ৃࢹ modified: style.css ৃࢹ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html 83ca17b style.css
commit sha
PUBLISH BRANCH ᓓ᧵ᵪḝᕴ
PULL REQUEST
PULL REQUEST
TADA!
᷀ᮈ Project Lab Squirrel #2