Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Project Lab Squirrel #2

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Mu-An Chiou Mu-An Chiou
May 25, 2014
Technology
690
1

Project Lab Squirrel #2

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

Avatar for Mu-An Chiou

Mu-An Chiou

May 25, 2014

More Decks by Mu-An Chiou

See All by Mu-An Chiou
Details on <details>
Avatar for Mu-An Chiou muan
0
410
Publishing and Hosting on GitHub pages
Avatar for Mu-An Chiou muan
4
180
Having no patience(Japanese)
Avatar for Mu-An Chiou muan
1
410
JSDC
Avatar for Mu-An Chiou muan
2
570
Design with Code
Avatar for Mu-An Chiou muan
5
600
Having no patience
Avatar for Mu-An Chiou muan
1
330
Design in GitHub
Avatar for Mu-An Chiou muan
5
400
Project Lab Squirrel #1
Avatar for Mu-An Chiou muan
8
920
A girl with no patience
Avatar for Mu-An Chiou muan
18
2k

Other Decks in Technology

See All in Technology
パスキーの自動テストはどこまでいけるのか
Avatar for teamLab teamlab
PRO
0
130
Post AI時代のリファクタリング実践記 / Refactoring in the post AI era
Avatar for 株式会社カミナシ kaminashi
1
220
LambdaWebFunctionsを試してみた / exploring-lambda-web-functions
Avatar for koukihosaka koukihosaka
0
290
味覇で作るパスタが美味い - 20261001_yabaubuki.dev
Avatar for Livesense Inc. livesense
PRO
0
130
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
240
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
940
10年後、Engineering 行為を剥奪されるとして、わたしたちは、どう、何を創ればいいだろうか。 / If Engineering Is Taken Away in 10 Years, How and What Should We Create?
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
180
USB PDを使ってスマホを労わりたい
Avatar for らすぴー raspython3
0
170
Claude の新機能を、 出た日に触って社内に届けるまで
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
160
夫婦で子育てするための育児標準化
Avatar for コドモン開発チーム codmoninc
PRO
0
210
宣言型部分更新は何を解決しどこへ向かうのか
Avatar for did0es shuta13
1
430
初海外で注意すべきこと12選！！！安全快適なre:invent生活にするために
Avatar for Yuuuuuuu yuuuuuuu168
1
110

Featured

See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
330
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.7k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
500
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
2
2k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.9k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k

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 