Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Project Lab Squirrel #2

Mu-An Chiou
May 25, 2014
Technology
1
590

Project Lab Squirrel #2

Location: My home
Time: 25 May 2014 (Sun)

Mu-An Chiou

May 25, 2014
Tweet

More Decks by Mu-An Chiou

See All by Mu-An Chiou
Details on <details>
muan
0
310
Publishing and Hosting on GitHub pages
muan
4
130
Having no patience(Japanese)
muan
1
370
JSDC
muan
2
530
Design with Code
muan
5
530
Having no patience
muan
1
290
Design in GitHub
muan
5
360
Project Lab Squirrel #1
muan
8
830
A girl with no patience
muan
18
1.9k

Other Decks in Technology

See All in Technology
Redefine_Possible
upsider_tech
0
260
17年のQA経験が導いたスクラムマスターへの道 / 17 Years in QA to Scrum Master
toma_sm
0
400
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
バックエンドエンジニアによるフロントエンドテスト拡充の具体的手法
kinosuke01
1
710
大規模サービスにおける カスケード障害
takumiogawa
1
120
頻繁リリース × 高品質 = 無理ゲー？ いや、できます！/20250306 Shoki Hyo
shift_evolve
0
150
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
440
OPENLOGI Company Profile
hr01
0
61k
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
110
問題解決に役立つ数理工学
recruitengineers
PRO
7
2.1k
Explainable Software Engineering in the Public Sector
avandeursen
0
360
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
2k

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Docker and Python
trallard
44
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
12
610
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Writing Fast Ruby
sferik
628
61k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Scaling GitHub
holman
459
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
KATA
mclloyd
29
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
The Cult of Friendly URLs
andyhume
78
6.3k

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 