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
620

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
330
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
550
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
850
A girl with no patience
Avatar for Mu-An Chiou muan
18
1.9k

Other Decks in Technology

See All in Technology
LLMエージェント時代に適応した開発フロー
Avatar for Yuya Hirayama hiragram
1
410
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
Avatar for Kazuyuki Miyazawa kzykmyzw
0
310
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
Avatar for ryo kawamataryo
1
130
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
Avatar for Yuji Hato dekatotoro
0
650
夢の印税生活 / Life on Royalties
Avatar for とみたまさひろ tmtms
0
280
実践データベース設計 ①データベース設計概論
Avatar for Recruit recruitengineers
PRO
2
200
帳票Vibe Coding
Avatar for terurou terurou
0
140
サービスロボット最前線：ugoが挑むPhysical AI活用
Avatar for Ken Matsui kmatsuiugo
0
190
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの３つのシナリオ
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
170
Backboneとしてのtimm2025
Avatar for yu4u yu4u
4
1.4k
事業価値と Engineering
Avatar for Recruit recruitengineers
PRO
1
190
mruby(PicoRuby)で ファミコン音楽を奏でる
Avatar for Katsuhiko Kageyama kishima
1
220

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
338
57k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k

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 