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

[Thesis Defense] SeeSS: Instant Change Impact V...

Johnson Liang
September 25, 2014

[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

Johnson Liang

September 25, 2014
Tweet

More Decks by Johnson Liang

Other Decks in Research

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. ✖ Picasa TM Login Password... E-mail... ✖ Picasa TM Login

    Password... E-mail... 8 ńĸA87|ć"Ƥƫ 7H ̘ŗƚ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ
  8. ✖ Login Password... E-mail... ✖ Login Password... E-mail... 8 ńĸA87|ć"Ƥƫ

    7H ̘ŗƚ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ
  9. ✖ 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Ž ßĘƣ
  10. ✖ Login Password... E-mail... .login-button { ! ! } margin-left:

    0; margin-top: 0; 8 ńĸA87|ć"Ƥƫ 7H ̘ŗƚ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ
  11. 9 ✖ Picasa TM Login Password... E-mail... Login Password... E-mail...

    Login ánƤ kDĶĿƤ ƠƞƤ–u̘ćjŗƚŭƏƪƥơ ƫ`'ıp CSS ĺwƢ=EΪĦƤ #ÕgžĔœ¬ŵ$ƣ !
  12. 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žĔœ¬ŵ$ƣ !
  13. 10 Password... Login Password... E-mail... .login-button { ! } Login

    Login £ q̘ŗƚī=k CSS ŘĻƤ q1#SnƗŠĚ˜ŗƚ"~Ƥk"ŭƏģ¦ ćj̘ŗƚƣ
  14. 10 .login-button { margin-left: 0; margin-top: 0; } Login Password...

    Login Password... E-mail... Login £ q̘ŗƚī=k CSS ŘĻƤ q1#SnƗŠĚ˜ŗƚ"~Ƥk"ŭƏģ¦ ćj̘ŗƚƣ
  15. ! Unintended Changes 13 #†MƟ ƝšŨū{gqŰƠUnintended changesơ !  #H

    đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ
  16. ! 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ƣ
  17. ! Unintended Changes 13 #†MƟ ƝšŨū{gqŰƠUnintended changesơ !  #H

    đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ
  18. 14 CSS editing Change O Unintended changes «¼EÌE­42H|íÖ  Rĥďƣ

    @#ńĸļčćjƢ7HD>²"@Ƥôô"oƣ #— ° ŀA“JF!ƣ
  19. 14 CSS editing Change Navigate to broken page !!! Many

    hours O Unintended changes «¼EÌE­42H|íÖ  Rĥďƣ @#ńĸļčćjƢ7HD>²"@Ƥôô"oƣ #— ° ŀA“JF!ƣ
  20. 15 Navigate to broken page !!! Modify & fix! ✔

    JƆƤĬ bug  MmhyƤ@ &ŭļ|ć’?¶.Ƥ B#yƈĬ bug EħőƓƤààE¨ (ƣ
  21. 15 Navigate to broken page !!! Modify & fix! ✔

    !@#$%^&* Debug again! !!! JƆƤĬ bug  MmhyƤ@ &ŭļ|ć’?¶.Ƥ B#yƈĬ bug EħőƓƤààE¨ (ƣ
  22. 16 Unit / Regression Testing ªğ= Unit test } Regression

    test źĞĬð@ğùƤૠunintended changes. ! Unit test 5 regression test ÁƫĞ•ĉĮÛóÃÄh ÜĞ•ªĦÉŰƠŠŎơŝ”aƣ
  23. 16 Unit / Regression Testing Test cases Referenced versions ªğ=

    Unit test } Regression test źĞĬð@ğùƤૠunintended changes. ! Unit test 5 regression test ÁƫĞ•ĉĮÛóÃÄh ÜĞ•ªĦÉŰƠŠŎơŝ”aƣ
  24. 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ƣ
  25. 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ƣ
  26. 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Ŵť¦Čķůƣ
  27. 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ƣ
  28. 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ƣ
  29. 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Ƨ+àƣ
  30. 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¦Čƣ
  31. 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¦Čƣ
  32. 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 jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
  33. 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 jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
  34. 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 jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
  35. 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 jv Ć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 ≡ Tracks the entire website ≡ Provides visualization feedback ≡ Ranks the changes   SeeSS ę@¨ƣƫ SeeSS jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ
  37. Research Outline 24 Ideate Build Analyze #µ ŪŠŽ=PğŔ ! ƫ#µ

    ÷Ėĕ prototypeƤ ƫL@š •=Ƣ.ƅ prototype ;=Ƥ ƫL@l ų6Áð›¶.7 ƫlƒ2Ā‡ƣ
  38. 28 Site Crawler ŸƄº2Š87|íIƤ؀şˆé±|ćƣ k"ƤƫÆ° € HTML 5 CSS ʼn=Ŗƣ

    ! ƫ€|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ€9à Ą |ć screenshotƣ
  39. 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ƣ
  40. 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ƣ
  41. 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ƣ
  42. 30 Site Crawler Render crawled pages Stores in Snapshot DB

    Impact Tracker Impact tracker  @ijÃ÷n°ĝʼn=ŖƤ º2ˆ HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ
  43. 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 ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ
  44. 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 ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ
  45. 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 ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ
  46. 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 ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ
  47. 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 ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ
  48. Limitation of Prototype ≡ Static websites only 34 ïg ƊĂƤ#Ĺľæ

    CSS 87‘ğUÉðŊƤ N2  prototype ’t+ limitationƤ <=Yćk|žÿă|ćƤþƔH javascript based |ćƣ
  49. User Study ☰ 4 web developers 35 ƫ#š  4

    ®|ćğùĈÊ N lab studyƣ ƫ?#Y āV |íĺwƤY |í 5 CSS bugƣ ƫtĢ@Ƥ#=ŧĩ©Ž1ĔÔ±ƁùſŇƤ1äÒ\ùƤ³Ĺ36 SeeSS e‚ƣ
  50. 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‚ƣ
  51. 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‚ƣ
  52. 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ŔCQ{ǻ Ā› SeeSS ǦºøŐ7A# $Ő lČǼƚ SeeSS ņ;EN ǻ

  53. 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ǻ
  54. 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¾Šǻ
  55. 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Ăǻ
  56. 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ǹįþ þ ǻ
  57. 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ǻ
  58. 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Ƨǻ
  59. 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Ė«ǻ
  60. 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Ė«ǻ
  61. 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Ė«ǻ
  62. 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Ė«ǻ
  63. 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Ė«ǻ
  64. 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¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ
  65. 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¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ
  66. 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¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ
  67. 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¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ
  68. 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 %ïƩ+ǘıǻ
  69. 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 %ïƩ+ǘıǻ
  70. 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 %ïƩ+ǘıǻ
  71. 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 %ïƩ+ǘıǻ
  72. 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 %ïƩ+ǘıǻ
  73. 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 %ïƩ+ǘıǻ
  74. 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 %ïƩ+ǘıǻ
  75. 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ˆ¡N3L5bǼǛZ$ƁŲŹM†ÙÐǭ. ¡NÌƃǼÿüŎ<¡NŚĪćįŇįěǼENǻ
  76. 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ˆ¡N3L5bǼǛZ$ƁŲŹM†ÙÐǭ. ¡NÌƃǼÿüŎ<¡NŚĪćįŇįěǼENǻ
  77. Concepts & Ideas (II) 50 In-Editor In-Browser ĝŒü/jhŝ"Ǽ ĝŒü$A#=Þ¾{ŸŚŰ5 code

    editor Œ browser XrīŌǻ
  idea ± Ǹ„¡NŬĭƁŲŹǹǘıǼY  idea ǧLǐƉŹM†ǺƜÜŚĪćǻ
  78. 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ǻ
 !
  79. 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ǻ
 !
  80. 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ǻ
 !
  81. Most Popular Idea 52  48 idea Ƿwo]ĩ ǻ !

    ?ŶƄ safari  Top sites ·wǼƁŲŹMwǼV„ ¡N.ǻ M†`ę?QŇ īŌĖ¡|6Ė¡Bǻ
  82. 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ǹǼ  ǻ
  83. 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ǹǼ  ǻ
  84. 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ǹǼ  ǻ
  85. 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ǹǼ  ǻ
  86. 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ǻ
  87. 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ǻ
  88. 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ǻ
  89. 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 MwdǼ:8ü‰§J!Uǘıǻ ! ŽāŤ6ǐƉŹļÊ."ǼĝŒüč6ŚĪću‡ Ǽŧƀ„¡NÙÐǧL–ŚĪćdžÕǻ ! SeeSS prototype bÑǼ ĝŒü“āŤǼ -Ĺűƶǻ
  90. New Goals ≡ In-browser central change list 56 Ȅĕ brainstorming

    Å_Ǽ#ĽžƨǗ SeeSSǼDè¡< ƁŲŹÇǺų›ŗ ¡N Google Chrome Extensionǻ @ X| user study ĝŒüûq SeeSS é“ĺ¸ǻ ǥĹǼ#ĨÆ„ SeeSS vŎ< ùƼ Instant feedback ¾Šǻ
  91. 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 ¾Šǻ
  92. 58  SeeSS ǧL¡Nłwǻ ! E thumbnail %2ˆ ¡NǼĎ®ǭǭǧLÃƆŒ}ƴ¡úǼYĦ¥Ƴ® thumbnail

    M†ǂ¡ǻ ! ǿĎ®ȁĐ Dõ?ü%2сƳ®ǼĎ®Ƒ‚ E implyǸ…ƵǹȀ
  93. 59 :ÝǼõ?üĥƖƖǵǼ@ © SeeSS ŘŽõ?ŸŚǻ èÄŘEƖ menuǼÿ modal dialog llQ{ǻ

    ! Lõ?üĖQ HTMLǼ„ dialog MpĦĖ< 3 ǪĪǼşǡǼ  SeeSS report łw¡NǼE: %2N¼ƹßǪŃð¡< 3 Ǫǻ

  94. 60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo

    list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ
  95. 60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo

    list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ
  96. 60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo

    list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ
  97. 60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo

    list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ
  98. 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 Ƿ†ǻ
  99. 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 Ƿ†ǻ
  100. 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 Ƿ†ǻ
  101. 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 Ƿ†ǻ
  102. 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 Ƿ†ǻ
  103. 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 Ƿ†ǻ
  104. 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 Ƿ†ǻ
  105. 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 Ƿ†ǻ
  106. 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
  107. 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
  108. ≡ Feedback from real users 63 Future Work Đ Ž

    SeeSS šļ ǥĹXBǼ#ðƙڋł:8ü ¦?Ǻ\Éąú»Ǽ ǛZ animation ƔÊŋǼ2œĚ|ǦºƔ(âìĬNs¡NǨƒǻ !
  109. ≡ 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 é“ĺ¸ ¢ǎǻ
  110. ≡ 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 é“ĺ¸ ¢ǎǻ
  111. ≡ Feedback from real users ≡ Hidden states ≡ Improve

    thumbnail ranking 65 Future Work 1BǼàa¡N÷Ɠlj :ˆƲƠ¬ÀǼâN‚ƅ CSS bug Ǜ02œƘƈ user studyǻ
  112. 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âǶų‚ƅõ?üąú»ǻ
  113. 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âǶų‚ƅõ?üąú»ǻ
  114. 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âǶų‚ƅõ?üąú»ǻ
  115. 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âǶų‚ƅõ?üąú»ǻ
  116. /** 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ǻ
  117. Tasks 73 Website #2 w/o SeeSS YŞ , SeeSSǻ ‹đ6

    SeeSS ŸƓ counter balanceǻ ! ` ‹đ 5 CSS task R
  118. Tasks Design 74 Please make the text wrap around the

    images in the staff section of about.html. #K¯¦üUĢĭǼÕš<¹ňƈUǼ ŞÕpĦ$mǻ
  119. Task Design 75 Please make the text wrap around the

    images in the staff section of about.html.  task h&ŃðǼƚ¯¦ü, Ŧ Ņ dǼ%Ŏ<N¹ň*…Ƶǻ
  120. Task Design 75 Please make the text wrap around the

    images in the staff section of about.html.  task h&ŃðǼƚ¯¦ü, Ŧ Ņ dǼ%Ŏ<N¹ň*…Ƶǻ
  121. Collecting Feedback 76 #©õ?üR CSS task "Ņ * think-aloudǻ *

    ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ
  122. Collecting Feedback ≡ Think-aloud 76 #©õ?üR CSS task "Ņ *

    think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ
  123. Collecting Feedback ≡ Think-aloud ≡ 5-point Likert scale
 questionnaires 76

    #©õ?üR CSS task "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ
  124. Collecting Feedback ≡ Think-aloud ≡ 5-point Likert scale
 questionnaires ≡

    Interviews 76 #©õ?üR CSS task "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ
  125. 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
  126. 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