[Thesis Defense] SeeSS: Instant Change Impact Visualization for CSS developers

碩士論文〔SeeSS: 為 CSS 開發者設計之即時變更衝擊視覺呈現〕的口試頭影片。

Slides used in my the thesis defense, transcripts included.

Full Thesis: http://mrorz.github.io/files/thesis-seess.pdf
Repository: https://github.com/mrorz/seess

------

Related Work (CSS Testing Tools)

1. CSS Unit Testing Tools (Requires test spec written by developers)

* CSSunit - http://csste.st/tools/cssunit-shepard.html , http://csste.st/tools/cssunit.html
* CSSert - http://thingsinjars.github.io/cssert/
* Cactus - https://github.com/winston/cactus
* Hardy - http://hardy.io/

2. Regression Testing for Web (Automated test specs)
* Huxley - https://github.com/facebookarchive/huxley
* MogoTest (shutted down) - http://csste.st/tools/mogotest.html

Transcript

1.      SeeSS: Instant Change Impact Visualization for CSS developers 2 padding: 2em 1em; } .title { font-family: ‘Century Gothic’; color: #A9071E; width: } 400px; Presentor: Hsiang-Sheng (Johnson) Liang Advisor: Mike Y. Chen 3 Ƥ JohnsonƤMike ZÂ
   K(ƣ 
   æd¬òƤSeeSS: Instant…. ƞƣbƣ
2.      3 padding: 2em 1em; } .title { font-family: ‘Century Gothic’; color: #A9071E; width: } 100%; SeeSS: Instant Change Impact Visualization for CSS developers Presentor: Hsiang-Sheng (Johnson) Liang Advisor: Mike Y. Chen  uĜ¬
   Ŭ¥ý: 100 % okƤ ƣ N
   ¢ B87Ó CSS “JÅŋ
   ªĦƣ #uÆÚN SeeSSƤ‚ CSS
   eèƣ
3.      4 html { font-size: 100%; } body { color: #333; ! } ✖ ✖ CSS Ƥ_r Cascading style sheetƤ ƫÆB HTML dŸŏy“Ƥ: 
   |ćƣ _…¤
   Y |ćƤ  CSS
   m=ƣ
4.      4 html { font-size: 100%; } body { color: #333; ! } ✖ background: red; ✖ CSS Ƥ_r Cascading style sheetƤ ƫÆB HTML dŸŏy“Ƥ: 
   |ćƣ _…¤
   Y |ćƤ  CSS
   m=ƣ
5.      5 html { font-size: 100%; } body { color: #333; background: red; } ✖ ✖ tĘƤ |íIj&+ |ćƣ ƫ Æ#&1ʼn=kâ CSS dŸƤP€|ć Ņ
   ¦Čƣ 'Ƥyr|ćğùĈÊÂƤìŞ%
6.      5 html { font-size: 100%; } body { color: #333; background: red; } ✖ ✖ blue; ✖ ✖ tĘƤ |íIj&+ |ćƣ ƫ Æ#&1ʼn=kâ CSS dŸƤP€|ć Ņ
   ¦Čƣ 'Ƥyr|ćğùĈÊÂƤìŞ%
7. 
   
    6 ú],!ē¾ƣ ! ƫ |ć87ŶütĒěƣ
8. 7 ໢ทઃܭࢣ
   ͷ
   ೔ৗ |ćĈÊ Yj6 ™jP
   >Ũƣ
9. ✖ Picasa TM Login Password... E-mail... ✖ Picasa TM Login Password... E-mail... 8 ńĸA87
   |ć"Ƥƫ 7H ̘ŗƚ
   ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ
   ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ
10. ✖ Login Password... E-mail... ✖ Login Password... E-mail... 8 ńĸA87
    |ć"Ƥƫ 7H ̘ŗƚ
    ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ
    ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ
11. ✖ Login Password... E-mail... ✖ Login Password... E-mail... .login-button { ! ! } margin-left: 0; margin-top: 0; ⌛ 8 ńĸA87
    |ć"Ƥƫ 7H ̘ŗƚ
    ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ
    ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ
12. ✖ Login Password... E-mail... .login-button { ! ! } margin-left: 0; margin-top: 0; 8 ńĸA87
    |ć"Ƥƫ 7H ̘ŗƚ
    ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ
    ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ
13. 9 ✖ Picasa TM Login Password... E-mail... Login Password... E-mail... Login ánƤ kDĶĿƤ ƠƞƤ–u̘ćj
    ŗƚŭƏƪƥơ ƫ`'ıp
    CSS ĺwƢ=EÎ
    ªĦƤ #ÕgžĔœ¬
    ŵ$ƣ !
14. 9 ✖ Picasa TM Login Password... E-mail... Login Password... E-mail... Login git bisect git blame Chrome developer tool ánƤ kDĶĿƤ ƠƞƤ–u̘ćj
    ŗƚŭƏƪƥơ ƫ`'ıp
    CSS ĺwƢ=EÎ
    ªĦƤ #ÕgžĔœ¬
    ŵ$ƣ !
15. 10 Password... Login Password... E-mail... .login-button { ! } Login Login £ q
    ̘ŗƚī=k CSS ŘĻƤ q1#SnƗŠĚ˜ŗƚ
    "~Ƥk"ŭƏģ¦ ćj
    ̘ŗƚƣ
16. 10 .login-button { margin-left: 0; margin-top: 0; } Login Password... Login Password... E-mail... Login £ q
    ̘ŗƚī=k CSS ŘĻƤ q1#SnƗŠĚ˜ŗƚ
    "~Ƥk"ŭƏģ¦ ćj
    ̘ŗƚƣ
17. ! Unintended Changes 13 #†MƟ Ɲ
    šŨū{gqŰ
    ƠUnintended changesơ !  #H đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ
18. ! Unintended Changes .title { font-family: Lato; color: #A9071E; width: 100%; } 13 #†MƟ Ɲ
    šŨū{gqŰ
    ƠUnintended changesơ !  #H đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ
19. ! Unintended Changes 13 #†MƟ Ɲ
    šŨū{gqŰ
    ƠUnintended changesơ !  #H đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ
20. 14 CSS editing Change O Unintended changes «¼EÌE­42H|í
    Ö  R
    ĥďƣ @#ńĸļč
    ćjƢ7HD>²
    "@Ƥôô"oƣ #— ° ŀA“JF!ƣ
21. 14 CSS editing Change Navigate to broken page !!! Many hours O Unintended changes «¼EÌE­42H|í
    Ö  R
    ĥďƣ @#ńĸļč
    ćjƢ7HD>²
    "@Ƥôô"oƣ #— ° ŀA“JF!ƣ
22. 15 Navigate to broken page !!! Modify & fix! ✔ JƆ
    ƤĬ bug  MmhyƤ@ &ŭļ|ć
    ’?¶.Ƥ B#yƈĬ bug
    EħőƓƤààE¨ (ƣ
23. 15 Navigate to broken page !!! Modify & fix! ✔ !@#$%^&* Debug again! !!! JƆ
    ƤĬ bug  MmhyƤ@ &ŭļ|ć
    ’?¶.Ƥ B#yƈĬ bug
    EħőƓƤààE¨ (ƣ
24. 16 Unit / Regression Testing ªğ= Unit test } Regression test źĞĬð@
    ğùƤૠunintended changes. ! Unit test 5 regression test ÁƫĞ•ĉĮÛóÃÄh ÜĞ•ªĦÉŰƠŠŎơ
    ŝ”aƣ
25. 16 Unit / Regression Testing Test cases Referenced versions ªğ= Unit test } Regression test źĞĬð@
    ğùƤૠunintended changes. ! Unit test 5 regression test ÁƫĞ•ĉĮÛóÃÄh ÜĞ•ªĦÉŰƠŠŎơ
    ŝ”aƣ
26. Unit Testing CSSunit, Cactus, cssert, Hardy, etc 17 Ho`¡ªĦ N CSS
    unit testing ƫ ƃU% hardy
    test case ö- ™Pƣ ! CSS unit testing Á6ėƊ
    À[щ assertionƣ śŒĄƑŒ¦ČƤĻƛöĭŃêIJ© assertionƣ
27. Unit Testing CSSunit, Cactus, cssert, Hardy, etc 17 Feature: Website layout test As a user I want visual consistency on the http://csste.st/ website ! Scenario: Content layout Given I visit "http://csste.st/" Then "section > p" should have "color" of "rgb(68, 68, 68)" # Hardy test script Ho`¡ªĦ N CSS
    unit testing ƫ ƃU% hardy
    test case ö- ™Pƣ ! CSS unit testing Á6ėƊ
    À[щ assertionƣ śŒĄƑŒ¦ČƤĻƛöĭŃêIJ© assertionƣ
28. Regression Testing ≡ Functional testing ≡ Try replaying GUI manipulation ≡ Fail if cannot replay ≡ Ignore visual differences 18 Roset et al, Regression Testing Ajax Applications: Coping with Dynamism, ICST’10! Soechting et al, Syntactic regression testing for tree-structured output, WSE’09! Mesbah et al, Automated cross-browser compatibility testing, ICSE’11
 Roset et al, Harnessing Web-Based Application Similarities to Aid in Regression Testing, ISSRE’09! Roset, Automated Regression Testing of Ajax Web Applications, Master Thesis ÷n} web ˆ
    regression testing ŪŠƤźĞƠëŕŠ¼ơƣ ğù“JS@ƤÝĪŌ GUI 
    ũmƤUXE¨ŌĠ ũmƤ WçƠĞ•½œơƣ řė false alarmƤ€×ëĞ•ÝĪƤ*ĨeŴť¦Č
    ķůƣ
29. Regression Testing ≡ Visual regression testing ≡ PhantomCSS, Huxley 19 ·ýƠ¦ČơTîƠëơ
    regression testingƤƃU% PhantomCSS } Huxleyƣ ! ƫHuxley =- ™Pƣ87ÓNŒ HTML “J@ƤżM Huxley š?ŌSnĝŁ
    MmƣHuxley = selenium i8ńĸĽƤŌ€MmƤL@Ā ( diff
    §Ɖƣ Huxley ģ¦)ëƤMu diff §Ɖƀ commit message IƤB¤jĈÊÂ&1źÀP
    “J okƣ
30. Regression Testing ≡ Visual regression testing ≡ PhantomCSS, Huxley 19 http://www.youtube.com/watch?v=DtnQ36jwk30 ·ýƠ¦ČơTîƠëơ
    regression testingƤƃU% PhantomCSS } Huxleyƣ ! ƫHuxley =- ™Pƣ87ÓNŒ HTML “J@ƤżM Huxley š?ŌSnĝŁ
    MmƣHuxley = selenium i8ńĸĽƤŌ€MmƤL@Ā ( diff
    §Ɖƣ Huxley ģ¦)ëƤMu diff §Ɖƀ commit message IƤB¤jĈÊÂ&1źÀP
    “J okƣ
31. Regression Testing 20 Development Continuous Integration Local Repository Shared Repository Huxley ^ĈÊ: continuous integration 
    įƤĊąĕ
    CI server xƣ ț CI server nƤ“JÙñƤ玓 +pƤ TŃ87ÓçŽ
    "~Ƥ+&— o`űÞ"87
    $‘ƦflowƧ+àƣ
32. 21 Make edits Then check layout q1tĘƤ87ÓŹLÁĬðğù@Ƥ DìƜ¯4*ńĸĽŎãP
    “J?
    ƣ
33. 22 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Visualize after Change #B87ÓNŒ“J
    Ƥ  RĄ |í
    q“Jƣ ! U» Ƥś87Ó7HŮƤ ĕĨĵ£ÛJ›õĬðƤTŃk")ŚĔĄ |í
    q¦Čƣ
34. 22 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login margin-left: 0; margin-top: 0; Visualize after Change #B87ÓNŒ“J
    Ƥ  RĄ |í
    q“Jƣ ! U» Ƥś87Ó7HŮƤ ĕĨĵ£ÛJ›õĬðƤTŃk")ŚĔĄ |í
    q¦Čƣ
35. 23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login margin-left: 0; margin-top: 0; Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke   SeeSS ę@
    ¨ƣƫ SeeSS j
    v ĆCƩ ! ƫ cƤÆMōƖĄ |í
    q¦Č“Jƣ ƫ ’QƤÆÐŲË"
    À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
36. 23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke   SeeSS ę@
    ¨ƣƫ SeeSS j
    v ĆCƩ ! ƫ cƤÆMōƖĄ |í
    q¦Č“Jƣ ƫ ’QƤÆÐŲË"
    À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
37. 23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke ≡ Tracks the entire website   SeeSS ę@
    ¨ƣƫ SeeSS j
    v ĆCƩ ! ƫ cƤÆMōƖĄ |í
    q¦Č“Jƣ ƫ ’QƤÆÐŲË"
    À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
38. 23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke ≡ Tracks the entire website ≡ Provides visualization feedback   SeeSS ę@
    ¨ƣƫ SeeSS j
    v ĆCƩ ! ƫ cƤÆMōƖĄ |í
    q¦Č“Jƣ ƫ ’QƤÆÐŲË"
    À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
39. 23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke ≡ Tracks the entire website ≡ Provides visualization feedback ≡ Ranks the changes   SeeSS ę@
    ¨ƣƫ SeeSS j
    v ĆCƩ ! ƫ cƤÆMōƖĄ |í
    q¦Č“Jƣ ƫ ’QƤÆÐŲË"
    À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
40. Research Outline 24 Ideate Build Analyze #µ
    ŪŠŽ=P
    ğŔ ! ƫ#µ ÷Ėĕ prototypeƤ ƫL@š •=Ƣ.ƅ prototype ;
    =Ƥ ƫL@l ų6Áð›
    ¶.7 ƫlƒ2
    Ā‡ƣ
41. 25 #N SeeSS prototype P
    ÝĪ;687Ó=ƣ
42. 26 Text Editor Æï ƫ Őƍ
    open-source døŻňĽƤ z ƫ ޸ƍƘ
    §™ÒÀ[“Jł:ƣ
43. 26 Change Impact Visualization Æï ƫ Őƍ
    open-source døŻňĽƤ z ƫ ޸ƍƘ
    §™ÒÀ[“Jł:ƣ
44. 27 <html> </html> HTML 87ÓƫdøŻňĽi8 HTML dŸ"Ƥ Ɖţƫ^ț site crawlerƤ = headless webkit browser N
    |íŸƄƣ
45. 27 Site Crawler HTML 87ÓƫdøŻňĽi8 HTML dŸ"Ƥ Ɖţƫ^ț site crawlerƤ = headless webkit browser N
    |íŸƄƣ
46. 28 Site Crawler ŸƄº2Š87
    |íIƤ؀şˆé±
    |ćƣ k"ƤƫÆ° € HTML 5 CSS
    ʼn=Ŗƣ ! ƫ€|ć
    P/^ render :¹¹9ÃƤĤĉĮƐIxƣ #
    prototype IƤ€9à Ą |ć
    screenshotƣ
47. 28 Site Crawler <html> </html> <html> </html> <html> </html> <html> </html> ŸƄº2Š87
    |íIƤ؀şˆé±
    |ćƣ k"ƤƫÆ° € HTML 5 CSS
    ʼn=Ŗƣ ! ƫ€|ć
    P/^ render :¹¹9ÃƤĤĉĮƐIxƣ #
    prototype IƤ€9à Ą |ć
    screenshotƣ
48. 28 Site Crawler <html> </html> <html> </html> <html> </html> <html> </html> CSS ŸƄº2Š87
    |íIƤ؀şˆé±
    |ćƣ k"ƤƫÆ° € HTML 5 CSS
    ʼn=Ŗƣ ! ƫ€|ć
    P/^ render :¹¹9ÃƤĤĉĮƐIxƣ #
    prototype IƤ€9à Ą |ć
    screenshotƣ
49. 28 Site Crawler Render crawled pages Stores in Snapshot DB <html> </html> <html> </html> <html> </html> <html> </html> ŸƄº2Š87
    |íIƤ؀şˆé±
    |ćƣ k"ƤƫÆ° € HTML 5 CSS
    ʼn=Ŗƣ ! ƫ€|ć
    P/^ render :¹¹9ÃƤĤĉĮƐIxƣ #
    prototype IƤ€9à Ą |ć
    screenshotƣ
50. 29 Site Crawler Render crawled pages Stores in Snapshot DB CSS S@Ƥ87Óð CSSƢ@ ĤƉ"Ƥ
51. 30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Impact tracker  @ijÃ÷n°ĝ
    ʼn=ŖƤ º2ˆ
    HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0
    VŜ9ÃƤƨÊå’f
    ķůĭNĎ
    ƌúƣ ! łƌú'@
    9ÃIƤŗƚ
    Ŭ¥“Ŭƣ @LTP
    “JĴŅģ 4\
    ŗƚÞ8Æ£h
    ®ņƣ
52. 30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker CSS HTML HTML HTML Impact tracker  @ijÃ÷n°ĝ
    ʼn=ŖƤ º2ˆ
    HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0
    VŜ9ÃƤƨÊå’f
    ķůĭNĎ
    ƌúƣ ! łƌú'@
    9ÃIƤŗƚ
    Ŭ¥“Ŭƣ @LTP
    “JĴŅģ 4\
    ŗƚÞ8Æ£h
    ®ņƣ
53. 30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact tracker  @ijÃ÷n°ĝ
    ʼn=ŖƤ º2ˆ
    HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0
    VŜ9ÃƤƨÊå’f
    ķůĭNĎ
    ƌúƣ ! łƌú'@
    9ÃIƤŗƚ
    Ŭ¥“Ŭƣ @LTP
    “JĴŅģ 4\
    ŗƚÞ8Æ£h
    ®ņƣ
54. 30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact Visualizer Impact tracker  @ijÃ÷n°ĝ
    ʼn=ŖƤ º2ˆ
    HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0
    VŜ9ÃƤƨÊå’f
    ķůĭNĎ
    ƌúƣ ! łƌú'@
    9ÃIƤŗƚ
    Ŭ¥“Ŭƣ @LTP
    “JĴŅģ 4\
    ŗƚÞ8Æ£h
    ®ņƣ
55. 30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact Visualizer After Before Impact tracker  @ijÃ÷n°ĝ
    ʼn=ŖƤ º2ˆ
    HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0
    VŜ9ÃƤƨÊå’f
    ķůĭNĎ
    ƌúƣ ! łƌú'@
    9ÃIƤŗƚ
    Ŭ¥“Ŭƣ @LTP
    “JĴŅģ 4\
    ŗƚÞ8Æ£h
    ®ņƣ
56. 30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact Visualizer After Before Impact tracker  @ijÃ÷n°ĝ
    ʼn=ŖƤ º2ˆ
    HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0
    VŜ9ÃƤƨÊå’f
    ķůĭNĎ
    ƌúƣ ! łƌú'@
    9ÃIƤŗƚ
    Ŭ¥“Ŭƣ @LTP
    “JĴŅģ 4\
    ŗƚÞ8Æ£h
    ®ņƣ
57. Animated Thumbnails 31 # @ uĤƉn5ĤƉ@
    9ñ´:M
    Ƌ§ƣ prototype IƤ#=ġ˜ġ2
    MċƤ ƎHĤƉn5ĤƉ@
    “Òƣ
58. 32 CSS Visualization 0@Ƥ€Ƌ§ÏŔ@ƤƎHdøŻňĽ
    ޸ƣ Prototype I#= mean square error ÏŔ€Ƌ§ƣ
59. 33 (Actual screenshot) SeeSS prototype =- ™Pƣ ! 87ÓN“JS@ƤSeeSS †ƙĞ
    À[“J=ġ˜ġ2
    Ƌ§ƎHŻňĽ
    ޸ƣ ! Í=Ó&1=ƂƇ úĐƠĤƉnơ5ƠĤƉ@ơ
    Ƌ§ƣ !
60. Limitation of Prototype ≡ Static websites only 34 ïg ƊĂƤ#Ĺľæ CSS 87‘ğUÉðŊƤ N2
     prototype ’t+
    limitationƤ <=Yćk|ž
    ÿă|ćƤþƔH javascript based
    |ćƣ
61. User Study ☰ 4 web developers 35 ƫ#š  4 ®|ćğùĈÊ N lab studyƣ ƫ?#Y āV |íĺwƤY |í 5 CSS bugƣ ƫtĢ@Ƥ#=ŧĩ©Ž1ĔÔ±ƁùſŇƤ1äÒ
    \ùƤ³Ĺ36 SeeSS
    e‚ƣ
62. User Study ☰ 4 web developers ☰ 2 websites × 5 tasks 35 ƫ#š  4 ®|ćğùĈÊ N lab studyƣ ƫ?#Y āV |íĺwƤY |í 5 CSS bugƣ ƫtĢ@Ƥ#=ŧĩ©Ž1ĔÔ±ƁùſŇƤ1äÒ
    \ùƤ³Ĺ36 SeeSS
    e‚ƣ
63. User Study ☰ 4 web developers ☰ 2 websites × 5 tasks ☰ 5-point Likert scale + interview 35 ƫ#š  4 ®|ćğùĈÊ N lab studyƣ ƫ?#Y āV |íĺwƤY |í 5 CSS bugƣ ƫtĢ@Ƥ#=ŧĩ©Ž1ĔÔ±ƁùſŇƤ1äÒ
    \ùƤ³Ĺ36 SeeSS
    e‚ƣ
64. Results ✓ Helps fix CSS problems (all rated 4 out of 5)
    Paused for change visualization 36 ¯řüƭŢ½›
    \Ï. –Ž˜wǻ A#yq SeeSS ţsíĽ CSS ¬Àǻ #ňǑǼSeeSS Ė¡¯řü
    kǻ ǛZ$Ǽ¯řü SeeSS
    change visualization YŔC
    Q{ǻ Ā› SeeSS Ǧº
    øŐ7A# $Ő lČ
    Ǽƚ SeeSS ņ;EN ǻ

65. Results ✓ Helps fix CSS problems (all rated 4 out of 5) ☰ Paused for change visualization ☰ Not using “Find in project” anymore 37 , SeeSS Ǭţ"Ǽ [ïřüĒÞǠǝǐƉŹ
    Ǹfind in projectǹčǻ  project ïƩ‹đM
     ǡƤǼfind in project %2 ǡƤMLJƫś ĦǤǻ [ïřü? čǼ ƑĄCĖ
    Ò/çƍļ ‹đ
    þMǼŠ¯ř‹đŧ¯řüCƾ
    ‹đǻ ”ŽA#õ? SeeSS
    "ǼA#, zõ?Ǹfind in projectǹǻ SeeSS
    visualization ǴƩŕŅ
    ńƽǼDA#ǣŰ$C
    ¡NƔ7
    ǻ
66. Results ✓ Helps fix CSS problems (all rated 4 out of 5) ☰ Paused for change visualization ☰ Not using “Find in project” anymore ✓ Willing to use (all rated 4 out of 5) 38 
    ¯¦üĮqõ? SeeSS {:8¾Šǻ
67. Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails 39 OYǼSeeSS
    ĺ¸ŴűÔ qǻ ÓƯ 5.7 Ƌ
    é“ĺ¸Ǽ6ƁŲŹ*s 1 Ƌ
    render 帖™(PĂǻ
68. Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails ǽ Diverged opinion towards animation 40 ïřüĄŜ§Ŝ3QŇûìĬǸ¡Nǹ
    ǘıǼ”޹[ïřüŴĨÆ thumbnail >ǧL¡NB
    ơĻ ǼÙQ E annoyingǻ  \ĉǼA#H»œŜ§Ŝ3QŇ/ǮǸ¡N|ǹ6Ǹ¡NBǹįþ þ ǻ
69. Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails ǽ Diverged opinion towards animation ✖ Most important thumbnail isn’t 1st in list 41  ¯řüùǼA#Ą1ž
    thumbnail ŗ›
    1wǻ L
    impact ranking b»7¯řü $Ǽ6 random , [Uǻ
70. Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails ǽ Diverged opinion towards animation ✖ Most important thumbnail isn’t 1st in list ✖ Thumbnails too verbose 42 "Ǽ łwÌƃŦĖBn]Ǻ„łw AÌƃġǜ
    "ǼSeeSS Dzř½
    ÃƷ¡NǼļ thumbnail ŗ›. +žǁǻ ޹Ǽ?;åº~ðĆ
    ǦºŠ, ǮĄÌ°
    ^êǼ Ìƃ
    ¡N%2Ķ'ǁö thumbnailǼD¡NŬ NjƧǻ
71. Summary 43 ³Å|w
    <_ǻ Ȅ#
    ƲƠĚŖǼZîů² unintended changes ±K CSS :8ü
    Ɨǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡N
    µ­ǻRelated work
    õ?@Ż6#
    @ŻyǼSeeSS ĨÆn«:8ü
    L ¥ŝǻ @#R prototype 6ȄǔƇǼ WU
    āŤ ţ:8Ǽ”ljO öEĖ«ǻ
72. Summary 43 Unintended Changes ³Å|w
    <_ǻ Ȅ#
    ƲƠĚŖǼZîů² unintended changes ±K CSS :8ü
    Ɨǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡N
    µ­ǻRelated work
    õ?@Ż6#
    @ŻyǼSeeSS ĨÆn«:8ü
    L ¥ŝǻ @#R prototype 6ȄǔƇǼ WU
    āŤ ţ:8Ǽ”ljO öEĖ«ǻ
73. Summary 43 Unintended Changes Related Work Visualization ³Å|w
    <_ǻ Ȅ#
    ƲƠĚŖǼZîů² unintended changes ±K CSS :8ü
    Ɨǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡N
    µ­ǻRelated work
    õ?@Ż6#
    @ŻyǼSeeSS ĨÆn«:8ü
    L ¥ŝǻ @#R prototype 6ȄǔƇǼ WU
    āŤ ţ:8Ǽ”ljO öEĖ«ǻ
74. Summary 43 Unintended Changes Related Work Visualization Prototype #1 ³Å|w
    <_ǻ Ȅ#
    ƲƠĚŖǼZîů² unintended changes ±K CSS :8ü
    Ɨǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡N
    µ­ǻRelated work
    õ?@Ż6#
    @ŻyǼSeeSS ĨÆn«:8ü
    L ¥ŝǻ @#R prototype 6ȄǔƇǼ WU
    āŤ ţ:8Ǽ”ljO öEĖ«ǻ
75. Summary 43 Unintended Changes Related Work Visualization Prototype #1 Visualization helps ³Å|w
    <_ǻ Ȅ#
    ƲƠĚŖǼZîů² unintended changes ±K CSS :8ü
    Ɨǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡N
    µ­ǻRelated work
    õ?@Ż6#
    @ŻyǼSeeSS ĨÆn«:8ü
    L ¥ŝǻ @#R prototype 6ȄǔƇǼ WU
    āŤ ţ:8Ǽ”ljO öEĖ«ǻ
76. Review of
 Empirical Design Choices From the experience of 5 web developers — 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡
    :8hŝǙ§ SeeSS prototypeǼ{3w
    empirical design choiceǻ ! @ ĘĥǼ#„‹đ
    ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|B
    Ƶűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØš
    ØūX¹Ǽ( #œĐŏLj
    bÑǼƀ9 bÑNƜÜõ ?ü
    
    õ?ğƐǻ
77. Review of
 Empirical Design Choices From the experience of 5 web developers — ≡ Visual thumbnails to represent change 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡
    :8hŝǙ§ SeeSS prototypeǼ{3w
    empirical design choiceǻ ! @ ĘĥǼ#„‹đ
    ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|B
    Ƶűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØš
    ØūX¹Ǽ( #œĐŏLj
    bÑǼƀ9 bÑNƜÜõ ?ü
    
    õ?ğƐǻ
78. Review of
 Empirical Design Choices From the experience of 5 web developers — ≡ Visual thumbnails to represent change ≡ Change impact inside code editors 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡
    :8hŝǙ§ SeeSS prototypeǼ{3w
    empirical design choiceǻ ! @ ĘĥǼ#„‹đ
    ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|B
    Ƶűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØš
    ØūX¹Ǽ( #œĐŏLj
    bÑǼƀ9 bÑNƜÜõ ?ü
    
    õ?ğƐǻ
79. Review of
 Empirical Design Choices From the experience of 5 web developers — ≡ Visual thumbnails to represent change ≡ Change impact inside code editors ≡ Animations highlighting visual differences 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡
    :8hŝǙ§ SeeSS prototypeǼ{3w
    empirical design choiceǻ ! @ ĘĥǼ#„‹đ
    ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|B
    Ƶűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØš
    ØūX¹Ǽ( #œĐŏLj
    bÑǼƀ9 bÑNƜÜõ ?ü
    
    õ?ğƐǻ
80. 45 2 Brainstorming ŠÛǼ ƲƠo’Ò/Ǽ ! #\ ideate
    ǥĹǼƌŁ brainstorming sessionǻ
81. νОΫజ
    $44
    ᜊһ 46 brainstorming
    iÀǸZî\ĉ CSS ¡Nǹ
82. Brainstorming Session ≡ 8 developers (4 female) 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8
    idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀ
    ǼĤ CSS "ō&
    bugǼOBDžǞ brainstorming
    ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8
    ‹đǼþM. …
    Ǽ‡:8ü
    ǼĨÆāŤZî¿WU
    …ƵǼcD; 嫧ơƮǺùƼŕŅ
    ńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ
    8NƪdzǻʼnZ$ttĠ
     āŤǼ ‚H»/Ǯ ¡N7
    (…
    Ǽ9!‡:8ü
    ǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR
    ¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ
    ideaǺÿ1ĸ
    čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•
    48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ
83. Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8
    idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀ
    ǼĤ CSS "ō&
    bugǼOBDžǞ brainstorming
    ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8
    ‹đǼþM. …
    Ǽ‡:8ü
    ǼĨÆāŤZî¿WU
    …ƵǼcD; 嫧ơƮǺùƼŕŅ
    ńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ
    8NƪdzǻʼnZ$ttĠ
     āŤǼ ‚H»/Ǯ ¡N7
    (…
    Ǽ9!‡:8ü
    ǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR
    ¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ
    ideaǺÿ1ĸ
    čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•
    48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ
84. Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8
    idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀ
    ǼĤ CSS "ō&
    bugǼOBDžǞ brainstorming
    ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8
    ‹đǼþM. …
    Ǽ‡:8ü
    ǼĨÆāŤZî¿WU
    …ƵǼcD; 嫧ơƮǺùƼŕŅ
    ńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ
    8NƪdzǻʼnZ$ttĠ
     āŤǼ ‚H»/Ǯ ¡N7
    (…
    Ǽ9!‡:8ü
    ǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR
    ¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ
    ideaǺÿ1ĸ
    čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•
    48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ
85. Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8
    idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀ
    ǼĤ CSS "ō&
    bugǼOBDžǞ brainstorming
    ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8
    ‹đǼþM. …
    Ǽ‡:8ü
    ǼĨÆāŤZî¿WU
    …ƵǼcD; 嫧ơƮǺùƼŕŅ
    ńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ
    8NƪdzǻʼnZ$ttĠ
     āŤǼ ‚H»/Ǯ ¡N7
    (…
    Ǽ9!‡:8ü
    ǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR
    ¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ
    ideaǺÿ1ĸ
    čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•
    48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ
86. Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 3. “How can a system report changes?” 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8
    idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀ
    ǼĤ CSS "ō&
    bugǼOBDžǞ brainstorming
    ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8
    ‹đǼþM. …
    Ǽ‡:8ü
    ǼĨÆāŤZî¿WU
    …ƵǼcD; 嫧ơƮǺùƼŕŅ
    ńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ
    8NƪdzǻʼnZ$ttĠ
     āŤǼ ‚H»/Ǯ ¡N7
    (…
    Ǽ9!‡:8ü
    ǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR
    ¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ
    ideaǺÿ1ĸ
    čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•
    48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ
87. Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 3. “How can a system report changes?” ≡ Vote (5 votes/person) 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8
    idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀ
    ǼĤ CSS "ō&
    bugǼOBDžǞ brainstorming
    ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8
    ‹đǼþM. …
    Ǽ‡:8ü
    ǼĨÆāŤZî¿WU
    …ƵǼcD; 嫧ơƮǺùƼŕŅ
    ńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ
    8NƪdzǻʼnZ$ttĠ
     āŤǼ ‚H»/Ǯ ¡N7
    (…
    Ǽ9!‡:8ü
    ǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR
    ¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ
    ideaǺÿ1ĸ
    čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•
    48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ
88. Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 3. “How can a system report changes?” ≡ Vote (5 votes/person) ≡ Group ideas into (overlapping) concepts 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8
    idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀ
    ǼĤ CSS "ō&
    bugǼOBDžǞ brainstorming
    ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8
    ‹đǼþM. …
    Ǽ‡:8ü
    ǼĨÆāŤZî¿WU
    …ƵǼcD; 嫧ơƮǺùƼŕŅ
    ńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ
    8NƪdzǻʼnZ$ttĠ
     āŤǼ ‚H»/Ǯ ¡N7
    (…
    Ǽ9!‡:8ü
    ǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR
    ¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ
    ideaǺÿ1ĸ
    čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•
    48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ
89. 48  Brainstorming
    ‚Ʈǻ DĝŒü%2ċóǸ:8 CSSǹU
    @Żį8Ǽ ¤žƜ ǐƉŹŒƁŲŹ
    ǢºǼ""ùťA#Ǹ˜Ĥ‹łǹǻĝŒü%2Ǣº™ƙǼ›ĬCĠ
    µ­ǻ
 !
90. Concepts & Ideas (I) 49 Central Change List Ð ũĭ
     brainstorming Mfù3
    idea 6ž
    ǘıbÑǻ ! ĄǼ„ ¡Nų›ŗ™Ũ Ǽù3
    ǘı¨ Facebook
    QĻĜÁǼpĦǨƒ¡NǺ‰ºǻ  ĄÏá?pĦ ›Ĭ¡NǼǛZ$ǸŖÀġƷQ 10 pxǹǼpĦdXBǼǧL IDE b
    console wžǻ ! ޹ ù3
    idea Ą¡NÏáfˆ¡N3L
    5bǼǛZ$ƁŲŹM†ÙÐǭ. ¡N
    ÌƃǼÿüŎ<¡N
    ŚĪćįŇįěǼENǻ
91. Concepts & Ideas (I) 49 Changes in Context Central Change List Ð ũĭ
     brainstorming Mfù3
    idea 6ž
    ǘıbÑǻ ! ĄǼ„ ¡Nų›ŗ™Ũ Ǽù3
    ǘı¨ Facebook
    QĻĜÁǼpĦǨƒ¡NǺ‰ºǻ  ĄÏá?pĦ ›Ĭ¡NǼǛZ$ǸŖÀġƷQ 10 pxǹǼpĦdXBǼǧL IDE b
    console wžǻ ! ޹ ù3
    idea Ą¡NÏáfˆ¡N3L
    5bǼǛZ$ƁŲŹM†ÙÐǭ. ¡N
    ÌƃǼÿüŎ<¡N
    ŚĪćįŇįěǼENǻ
92. Concepts & Ideas (II) 50 In-Editor In-Browser ĝŒü/jhŝ"Ǽ
    ĝŒü$A#=Þ
    ¾{ŸŚŰ5 code editor Œ browser XrīŌǻ
  idea ± Ǹ„¡NŬĭƁŲŹǹ
    ǘıǼY  idea ǧLǐƉŹM†ǺƜÜŚĪć
    ǻ
93. Concepts & Ideas (III) Code / Rendered Property Ranking 51 ĝŒü8"Ǽù3ŶƄ impact ranking
    ǘıǻ ǛZ$ǼȄ?æuƬê
    commit Ǽcommit "rllŚĪć
    —ą ÷Ɠ¡NǼŠƚ¡Nçƍ A ÿ+Ă2|
    ŚĪćǼ9:8ü1 NJĴC
    ¡Nǻ ޹Ǽ@ ? ù3»Ǽ?ǸÌƃƔ6 AÌƃ7ǃǹlƁŲŹ render Å_
    —ą ÷Ɠ¡Nǻ
 !
94. Concepts & Ideas (III) Code / Rendered Property Ranking 51 ĝŒü8"Ǽù3ŶƄ impact ranking
    ǘıǻ ǛZ$ǼȄ?æuƬê
    commit Ǽcommit "rllŚĪć
    —ą ÷Ɠ¡NǼŠƚ¡Nçƍ A ÿ+Ă2|
    ŚĪćǼ9:8ü1 NJĴC
    ¡Nǻ ޹Ǽ@ ? ù3»Ǽ?ǸÌƃƔ6 AÌƃ7ǃǹlƁŲŹ render Å_
    —ą ÷Ɠ¡Nǻ
 !
95. Concepts & Ideas (III) Code / Rendered Property Ranking 51 ĝŒü8"Ǽù3ŶƄ impact ranking
    ǘıǻ ǛZ$ǼȄ?æuƬê
    commit Ǽcommit "rllŚĪć
    —ą ÷Ɠ¡NǼŠƚ¡Nçƍ A ÿ+Ă2|
    ŚĪćǼ9:8ü1 NJĴC
    ¡Nǻ ޹Ǽ@ ? ù3»Ǽ?ǸÌƃƔ6 AÌƃ7ǃǹlƁŲŹ render Å_
    —ą ÷Ɠ¡Nǻ
 !
96. Most Popular Idea 52  48 idea Ƿw
    o]ĩ ǻ ! ?ŶƄ safari
    Top sites
    ·wǼƁŲŹMwǼV„ ¡N.ǻ M†`ę?QŇ īŌĖ¡|6Ė¡Bǻ
97. 53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé
    ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ
    €Ũ]ǻ#Ð
    ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ …
    €Ǽ”+² ǻö ù
    idea > ǧLǸafterǹǼ  ǻ
98. 53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé
    ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ
    €Ũ]ǻ#Ð
    ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ …
    €Ǽ”+² ǻö ù
    idea > ǧLǸafterǹǼ  ǻ
99. 53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé
    ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ
    €Ũ]ǻ#Ð
    ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ …
    €Ǽ”+² ǻö ù
    idea > ǧLǸafterǹǼ  ǻ
100. 53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé
     ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ
     €Ũ]ǻ#Ð
     ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ …
     €Ǽ”+² ǻö ù
     idea > ǧLǸafterǹǼ  ǻ
101. Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 54 # ĝŒü
     ` ideaǼ¿Þ„þǘıǙÊ.ǻ כĭ[[ concept 3Ly× idea
     ö½ǻ ! #ĥ @ǸIn-browserǹǘıǼ¿Þ6J!U
     ǘı.3Lǻ 5 idea ƁŲŹwǼ„¡NǧL¡N8'
     5bǻ > 1 idea ƁŲŹwų›ŗ ¡NȂȄ& idea X|ù
     9 1]ĩ
     ideaǻ
102. Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 54 # ĝŒü
     ` ideaǼ¿Þ„þǘıǙÊ.ǻ כĭ[[ concept 3Ly× idea
     ö½ǻ ! #ĥ @ǸIn-browserǹǘıǼ¿Þ6J!U
     ǘı.3Lǻ 5 idea ƁŲŹwǼ„¡NǧL¡N8'
     5bǻ > 1 idea ƁŲŹwų›ŗ ¡NȂȄ& idea X|ù
     9 1]ĩ
     ideaǻ
103. Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 54 # ĝŒü
     ` ideaǼ¿Þ„þǘıǙÊ.ǻ כĭ[[ concept 3Ly× idea
     ö½ǻ ! #ĥ @ǸIn-browserǹǘıǼ¿Þ6J!U
     ǘı.3Lǻ 5 idea ƁŲŹwǼ„¡NǧL¡N8'
     5bǻ > 1 idea ƁŲŹwų›ŗ ¡NȂȄ& idea X|ù
     9 1]ĩ
     ideaǻ
104. Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 55 #ŸėǼƚ SeeSS ljOˆ code editor Mw
     dǼ:8ü‰§J!U
     ǘıǻ ! ŽāŤ6ǐƉŹļÊ.
     "ǼĝŒü
     č6ŚĪću‡ Ǽŧƀ„¡NÙÐǧL–ŚĪć
     džÕǻ ! SeeSS prototype
     bÑǼ ĝŒü“
     āŤǼ -Ĺűƶǻ
105. New Goals ≡ In-browser central change list 56 Ȅĕ brainstorming
     Å_Ǽ#ĽžƨǗ SeeSSǼDè¡< ƁŲŹÇǺų›ŗ ¡N
     Google Chrome Extensionǻ @ X| user study
     ĝŒüûq SeeSS
     é“ĺ¸ǻ ǥĹǼ#ĨÆ„ SeeSS vŎ< ùƼ Instant feedback
     ¾Šǻ
106. New Goals ≡ In-browser central change list ≡ Providing Instant feedback 56 Ȅĕ brainstorming
     Å_Ǽ#ĽžƨǗ SeeSSǼDè¡< ƁŲŹÇǺų›ŗ ¡N
     Google Chrome Extensionǻ @ X| user study
     ĝŒüûq SeeSS
     é“ĺ¸ǻ ǥĹǼ#ĨÆ„ SeeSS vŎ< ùƼ Instant feedback
     ¾Šǻ
107. 57 gÒǫŊžƱXBǼL
     SeeSSǼD:8ü%2õ?Cnj
     ǐƉŹǻ ǷǼõ?üØš„Ɩǵ
     padding ¡ǰǼŧƀ„Ħ¥Ƴ®œýƕm¤ǼĖ<Ǝ¤ǻ Ð-Ǽõ?üīŌƁŲŹǼ àaú¡NǻSeeSS „ÃƆ}ƴ¡úǼ6 A¨Ħ¥Ƴ®
     ¡úǼ?QŇŬĭǻ
108. 58  SeeSS ǧL¡N
     łwǻ ! E thumbnail %2ˆ ¡NǼĎ®ǭǭǧL
     ÃƆŒ}ƴ
     ¡úǼYĦ¥Ƴ® thumbnail M†ǂ¡ǻ ! ǿĎ®ȁĐ Dõ?ü%2сƳ®ǼĎ®Ƒ‚ E implyǸ…ƵǹȀ
109. 59 :ÝǼõ?üĥƖƖǵǼ@ © SeeSS ŘŽõ?ŸŚǻ èÄŘEƖ menuǼÿ modal dialog ll
     Q{ǻ ! Lõ?üĖQ HTMLǼ„ dialog M
     pĦĖ< 3 ǪĪǼşǡǼ  SeeSS report łw¡NǼE: %2N¼ƹßǪ
     Ńð¡< 3 Ǫǻ

110. 60 SeeSS %2? html5 R
     Ċç~Ǽ @ÿü Angular JS R
      todo list
     applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS
     ŋ?ƿŭǻ
111. 60 SeeSS %2? html5 R
     Ċç~Ǽ @ÿü Angular JS R
      todo list
     applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS
     ŋ?ƿŭǻ
112. 60 SeeSS %2? html5 R
     Ċç~Ǽ @ÿü Angular JS R
      todo list
     applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS
     ŋ?ƿŭǻ
113. 60 SeeSS %2? html5 R
     Ċç~Ǽ @ÿü Angular JS R
      todo list
     applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS
     ŋ?ƿŭǻ
114. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
115. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
116. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
117. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
118. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
119. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
120. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
121. 61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page 
     SeeSS U‚R
     ǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đ
     ư{Ǽ„ư{Œư{
     Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłw
     ļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?
     ¾ŠǼDzřǡƤāŤ
     ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS
     File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æu
     łwǼĶ' visual differenceǻ ! ļ SeeSS
     é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ
122. Instant Feedback Test 62 New SeeSS SeeSS Prototype 3 #<č{3 ƁŲŹRàa¡N
     āŤǻ # , Ĭ<Ş ĚŖ — K:8ü
     Ǽñ"
     feedbackǻ ! #?ƥ
     6
     SeeSS v:y 6 ĵĻłw‹đǻ7ļ ‹đ
     śTƖǵǼR–yIJ_
     ¡Nǻ$Ǽ[ü1Bƻ3
     ¡NƛĞǼÏá– y
     ǻ ! Ȅ:ÝǾæ SeeSS Ĝ 1 ƋŬĭ
     ¡NǼ”ƥæ SeeSS ⪠5.3 ƋcŇ3o ¡Nǻæ
     SeeSS ™ƥæ
     Nñ"Ŀǟ¡Nǻ ! 0.8s phantom :‹ł 2.4s render snapshot 1.9s / 4.3s Ķ' thumbnail
123. Instant Feedback Test 62 New SeeSS SeeSS Prototype <1s for all 5.3s for 1st 7.8s for all #<č{3 ƁŲŹRàa¡N
     āŤǻ # , Ĭ<Ş ĚŖ — K:8ü
     Ǽñ"
     feedbackǻ ! #?ƥ
     6
     SeeSS v:y 6 ĵĻłw‹đǻ7ļ ‹đ
     śTƖǵǼR–yIJ_
     ¡Nǻ$Ǽ[ü1Bƻ3
     ¡NƛĞǼÏá– y
     ǻ ! Ȅ:ÝǾæ SeeSS Ĝ 1 ƋŬĭ
     ¡NǼ”ƥæ SeeSS ⪠5.3 ƋcŇ3o ¡Nǻæ
     SeeSS ™ƥæ
     Nñ"Ŀǟ¡Nǻ ! 0.8s phantom :‹ł 2.4s render snapshot 1.9s / 4.3s Ķ' thumbnail
124. ≡ Feedback from real users 63 Future Work Đ Ž SeeSS šļ ǥĹXBǼ#ðƙڋł:8ü ¦?Ǻ\Éąú
     »Ǽ ǛZ animation ƔÊŋǼ2œĚ|
     ǦºƔ(âìĬNs¡N
     Ǩƒǻ !
125. ≡ Feedback from real users ≡ Hidden states 64 Future Work Compact Regular Extended Tools @ƮǼõ?ü
     ư{%¡N SeeSS ňř
     µ­ǼǛZ$ javascript Ç
     ś ¡öǼ«YçƍĐ UI
     ư{ŸŚǻ ! 2 ƖǵǛǼʼnZ$ menu ƖǵǼE)ŬĭU
     Øūǻ ʼnZ$õ?üE:ƖǵǼE CompactǼzE¹wǏ menuǼOBzũ:ǼRenderer Graph Ȅ}Uǻ ! SeeSS Lãĺ¸Ǽ? BFS
     bĪ traverse  renderer graphǼ%oƏ
     menu ŬĭJ!ǼÎ6 ś hidden state ǻT"Ǽÿħ ďƝšgƖåõ?ü
     ģǯ) replayǼ6 SeeSS
     é“ĺ¸ ¢ǎǻ
126. ≡ Feedback from real users ≡ Hidden states 64 Future Work click outside click click Compact Regular Extended Tools click Compact Compact Regular Extended Tools @ƮǼõ?ü
     ư{%¡N SeeSS ňř
     µ­ǼǛZ$ javascript Ç
     ś ¡öǼ«YçƍĐ UI
     ư{ŸŚǻ ! 2 ƖǵǛǼʼnZ$ menu ƖǵǼE)ŬĭU
     Øūǻ ʼnZ$õ?üE:ƖǵǼE CompactǼzE¹wǏ menuǼOBzũ:ǼRenderer Graph Ȅ}Uǻ ! SeeSS Lãĺ¸Ǽ? BFS
     bĪ traverse  renderer graphǼ%oƏ
     menu ŬĭJ!ǼÎ6 ś hidden state ǻT"Ǽÿħ ďƝšgƖåõ?ü
     ģǯ) replayǼ6 SeeSS
     é“ĺ¸ ¢ǎǻ
127. ≡ Feedback from real users ≡ Hidden states ≡ Improve thumbnail ranking 65 Future Work 1BǼàa¡N
     ÷Ɠlj :ˆ
     ƲƠ¬ÀǼâN‚ƅ
     CSS bug Ǜ02œƘƈ
     user studyǻ
128. 66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps #³ÅļăĈp
     Å_ǻ #
     o prototypeǼ¯¦üK#˜w
     Œøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹ
     ĚŖȁ1. Ŧ˜ SeeSS
     bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw
     SeeSS extensionǻ @żģ
     benchmarkŬĭĺ¸ –Ž
     «ģǼ”ljâǶų‚ƅõ?ü
     ąú»ǻ
129. 66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps Brainstorming #³ÅļăĈp
     Å_ǻ #
     o prototypeǼ¯¦üK#˜w
     Œøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹ
     ĚŖȁ1. Ŧ˜ SeeSS
     bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw
     SeeSS extensionǻ @żģ
     benchmarkŬĭĺ¸ –Ž
     «ģǼ”ljâǶų‚ƅõ?ü
     ąú»ǻ
130. 66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps Brainstorming Prototype #2 #³ÅļăĈp
     Å_ǻ #
     o prototypeǼ¯¦üK#˜w
     Œøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹ
     ĚŖȁ1. Ŧ˜ SeeSS
     bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw
     SeeSS extensionǻ @żģ
     benchmarkŬĭĺ¸ –Ž
     «ģǼ”ljâǶų‚ƅõ?ü
     ąú»ǻ
131. 66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps Brainstorming Prototype #2 5x Speedup #³ÅļăĈp
     Å_ǻ #
     o prototypeǼ¯¦üK#˜w
     Œøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹ
     ĚŖȁ1. Ŧ˜ SeeSS
     bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw
     SeeSS extensionǻ @żģ
     benchmarkŬĭĺ¸ –Ž
     «ģǼ”ljâǶų‚ƅõ?ü
     ąú»ǻ
132. 67 SeeSS
     ¶Ýć:ˆ github Ǽ˜ġ˜Īæ
     bÑŵeǼĨÆ%2 Chrome Web Store wƨǻ
133. /** SeeSS ! 1. Instant feedback of visual changes 2. Augment existing developing experience 3. Iterative design process ! Thank you for listening! */    
       SeeSS: Instant Change Impact Visualization for CSS developers 68 Presentor: Hsiang-Sheng (Johnson) Liang Advisor: Mike Y. Chen 2
     ĉijǻôô4ǻ
134. Backup Slides 69 notes.
135. Evaluation 70 #ķǚ© *4 ‹ł:8ü ¦? SeeSSǻ
136. Evaluation 70 #ķǚ© *4 ‹ł:8ü ¦? SeeSSǻ
137. Experiment Setup 71 ‚ŝǼ¯¦üw| [ DZƺǻ *  :-ǐƉŹǼ * Ş :-ƁŲŹǼ
138. Experiment Setup 71 ‚ŝǼ¯¦üw| [ DZƺǻ *  :-ǐƉŹǼ * Ş :-ƁŲŹǼ
139. Experiment Setup 71 ‚ŝǼ¯¦üw| [ DZƺǻ *  :-ǐƉŹǼ * Ş :-ƁŲŹǼ
140. Tasks 72 Website #1 w/ SeeSS #©¯¦üŦ˜ 2 ‹đM
     ¹ň…ƵǼ  1 SeeSS prototype
     ǬţǼ
141. Tasks 73 Website #2 w/o SeeSS YŞ , SeeSSǻ ‹đ6 SeeSS
     ŸƓ counter balanceǻ ! ` ‹đ 5 CSS task R
142. Tasks Design 74 #K¯¦üU
     ĢĭǼÕš<
     ¹ňƈUǼ ŞÕpĦ
     $mǻ
143. Tasks Design 74 Please make the text wrap around the images in the staff section of about.html. #K¯¦üU
     ĢĭǼÕš<
     ¹ňƈUǼ ŞÕpĦ
     $mǻ
144. Task Design 75 Please make the text wrap around the images in the staff section of about.html.  task h&ŃðǼƚ¯¦ü, Ŧ Ņ
     dǼ%Ŏ<N¹ň
     *…Ƶǻ
145. Task Design 75 Please make the text wrap around the images in the staff section of about.html.  task h&ŃðǼƚ¯¦ü, Ŧ Ņ
     dǼ%Ŏ<N¹ň
     *…Ƶǻ
146. Collecting Feedback 76 #©õ?üR CSS task
     "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąú
     bĪǼ
 Éų47 SeeSS
     q‘ǻ
147. Collecting Feedback ≡ Think-aloud 76 #©õ?üR CSS task
     "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąú
     bĪǼ
 Éų47 SeeSS
     q‘ǻ
148. Collecting Feedback ≡ Think-aloud ≡ 5-point Likert scale
 questionnaires 76 #©õ?üR CSS task
     "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąú
     bĪǼ
 Éų47 SeeSS
     q‘ǻ
149. Collecting Feedback ≡ Think-aloud ≡ 5-point Likert scale
 questionnaires ≡ Interviews 76 #©õ?üR CSS task
     "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąú
     bĪǼ
 Éų47 SeeSS
     q‘ǻ
150. 77 3 2 1 Action Flow in Browser 
      what needs to be done? 
      what needs to be done? 
      what needs to be done? cook Constructed Renderer Graph type ‘do laundry’ and click 
      
      what needs to be done? do laundry click type ‘do laundry’ and click 
      type ‘cook’ and click 
      click type ‘do laundry’ and click 
      4
151. 78 type ‘cook’ and click 
      type ‘do laundry’ and click 
      Original Reloaded Reloaded Original type ‘cook’ and click 
      type ‘do laundry’ and click 
      Reloaded Original type ‘cook’ and click 
      type ‘do laundry’ and click 
      Reloaded Original type ‘cook’ and click 
      type ‘do laundry’ and click 
      3 4 2 1