Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Project Lab Squirrel #2
Search
Mu-An Chiou
May 25, 2014
Technology
680
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Project Lab Squirrel #2
Location: My home
Time: 25 May 2014 (Sun)
Mu-An Chiou
May 25, 2014
More Decks by Mu-An Chiou
See All by Mu-An Chiou
Details on <details>
muan
0
410
Publishing and Hosting on GitHub pages
muan
4
180
Having no patience(Japanese)
muan
1
410
JSDC
muan
2
570
Design with Code
muan
5
590
Having no patience
muan
1
330
Design in GitHub
muan
5
390
Project Lab Squirrel #1
muan
8
920
A girl with no patience
muan
18
2k
Other Decks in Technology
See All in Technology
「重なり」は迎える側がつくる ― 人もAIエージェントも歓迎するプロダクトエンジニアリング ―
go0517go
PRO
0
280
なぜSRE・セキュリティは評価されないのか?守りの組織を事業成長エンジンに変えた実践
cscengineer
PRO
3
2.5k
AI時代だからこそ、スケールしないことをやろう
yutashigemura
1
150
安心して変更できるWebフロントエンドの作り方
pirosikick
3
870
2026/09/10 Spring Bootから Jakarta EE/MicroProfileへの移行
megascus
0
320
enechainの内製セルフサービスプラットフォーム
hiyosi
0
160
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
1
260
module Synths; end
asonas
1
130
日経電子版を支えていく Kasane Design System/fec_fukuoka
nikkei_engineer_recruiting
0
900
Omarchy Quattro の日本語設定周り
simosako
2
150
From Vanilla Kubernetes to a Batteries-Included Platform: Developer Experience at 1,300+ Clusters
yosshi_
0
680
GoCon2026 - Open Source, Open World
sanposhiho
4
3.2k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
515
110k
It's Worth the Effort
3n
188
29k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
45k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
BBQ
matthewcrist
89
10k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
220
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
270
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
520
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