transforming front-end disaster code™ into a maintainable masterpiece
DESCRIPTION
A story about what happens when you don't design your front end for the future, and how it make it better when things get messy.TRANSCRIPT
![Page 1: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/1.jpg)
Transforming Front-end Disaster Code™ Into a Maintainable Masterpiece
@dangribbin
![Page 2: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/2.jpg)
Hi, I’m Dan Gribbin
Software Engineer brand networks
Web Development Teacher rochester brainery
![Page 3: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/3.jpg)
front end js + css + html
![Page 4: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/4.jpg)
design is critical to the development process
![Page 5: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/5.jpg)
.psd
![Page 6: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/6.jpg)
design (a plan)
![Page 7: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/7.jpg)
![Page 8: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/8.jpg)
best available solution | constraints
![Page 9: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/9.jpg)
get requirements → write code → ship?
![Page 10: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/10.jpg)
get requirements → write code → ship?
no.
![Page 11: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/11.jpg)
plan system→ then write code
yep
![Page 12: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/12.jpg)
![Page 13: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/13.jpg)
disaster!
![Page 14: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/14.jpg)
alpine
![Page 15: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/15.jpg)
alpine*internal name - not actual thing name
![Page 16: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/16.jpg)
initial launch
- tight deadlines- limited front-end resources
![Page 17: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/17.jpg)
- good - fast - cheap
(pick two)
![Page 18: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/18.jpg)
our plan lacked detail it needed for the future of the front-end
![Page 19: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/19.jpg)
Technical Debtpoor engineering complicates future work
![Page 20: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/20.jpg)
software entropy
complexity will increase unless an effort is made against it
![Page 21: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/21.jpg)
we set our front end up for failure
![Page 22: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/22.jpg)
alpine launch → SDLC
2 week sprintsrequirements → code →release
![Page 23: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/23.jpg)
technicalDebt++;
sprint : function() {
},
![Page 24: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/24.jpg)
performance
![Page 25: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/25.jpg)
page load times
15 seconds
: (
![Page 26: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/26.jpg)
poor engineering → poor user experience
![Page 27: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/27.jpg)
effects on our page load- render-blocking scripts - loading all resources on all pages - lots of code, no minification
![Page 28: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/28.jpg)
maintainability
![Page 29: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/29.jpg)
Time and ease of… - fixing a bug - developing a new feature
![Page 30: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/30.jpg)
impact?
![Page 31: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/31.jpg)
↑ feature work dev time ↓ velocity
![Page 32: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/32.jpg)
costs of an unmaintainable codebase to you and your stakeholders - time - money - frustration
![Page 33: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/33.jpg)
influences on maintainability
JS - globals - intermixed functionality
![Page 34: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/34.jpg)
SASS/CSS- long, overly specific selectors - confusing naming conventions
![Page 35: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/35.jpg)
- Styles not logically separated- Hitting IE9 selector limit
![Page 36: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/36.jpg)
moraleentropic products affect the teams that work on them
![Page 37: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/37.jpg)
our software problems don’t just belong to one person
![Page 38: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/38.jpg)
your disaster is your team’s disaster too.
![Page 39: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/39.jpg)
disasters affect morale (relationships), motivation, and productivity
![Page 40: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/40.jpg)
initial fixes
![Page 41: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/41.jpg)
initial fixes … mostly unsuccessful : /
![Page 42: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/42.jpg)
we needed a do-over
![Page 43: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/43.jpg)
1UP
![Page 44: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/44.jpg)
design!
![Page 45: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/45.jpg)
neptune
![Page 46: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/46.jpg)
much of our JavaScript wasn’t terrible, just terribly organized
![Page 47: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/47.jpg)
reorganization was top priority
![Page 48: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/48.jpg)
separation, actually
![Page 49: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/49.jpg)
MVC
![Page 50: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/50.jpg)
Some MVC frameworksember, backbone, angular, knockout, dojo, YUI, CanJS, Maria, Polymer, React, cujo, Montage, Ext, Sammy, Stapes, Epitome, soma, DUEL, Kendo UI, PureMVC, Olives, Plastron, Dijon, rAppid.js, Deft, Aria, Exoskeleton, Atma, Ractive, ComponentJS
![Page 51: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/51.jpg)
MVC frameworksember, backbone, angular, knockout, dojo, YUI, CanJS, Maria, Polymer, React, cujo, Montage, Ext, Sammy, Stapes, Epitome, soma, DUEL, Kendo UI, PureMVC, Olives, Plastron, Dijon, rAppid.js, Deft, Aria, Exoskeleton, Atma, Ractive, ComponentJS
was one of these right for us?
![Page 52: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/52.jpg)
constraints time + experience
![Page 53: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/53.jpg)
AMD + RequireJSdefine([’controllers/article-controller.js’], function(ArticleController) { ArticleController.init(); } );
![Page 54: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/54.jpg)
neptune’s front end stack
![Page 55: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/55.jpg)
resultscut page load time by 80% cut JS per-page by 70% cut CSS per-page by 75%
![Page 56: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/56.jpg)
-huge maintainability gains -framework for future work -testable code
![Page 57: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/57.jpg)
where did we suck?
![Page 58: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/58.jpg)
estimation.seriously. ouch.
![Page 59: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/59.jpg)
![Page 60: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/60.jpg)
awesome team-building experience
![Page 61: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/61.jpg)
Things you can do right now to clean up your front end
![Page 62: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/62.jpg)
Cleaning up means…-optimizing for performance -promoting maintainability -ensuring reliability
![Page 63: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/63.jpg)
optimize for performance
![Page 64: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/64.jpg)
developer tools are your best friends
![Page 65: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/65.jpg)
![Page 66: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/66.jpg)
![Page 67: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/67.jpg)
using an image sprite? you should be! !
one request → all your icons
![Page 68: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/68.jpg)
![Page 69: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/69.jpg)
no <script>’s in your <head>
<head> <title>Bad Ideas, Inc.</title> <script src=“main.js”></script> </head>
![Page 70: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/70.jpg)
Instead…… <script src=“main.js”></script> </body>
![Page 71: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/71.jpg)
use a build toolget some help optimizing
![Page 72: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/72.jpg)
In the beginning, was make
![Page 73: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/73.jpg)
then, this guy stuck his nose in
![Page 74: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/74.jpg)
a challenger appears?
![Page 75: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/75.jpg)
which one should you use?
![Page 76: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/76.jpg)
whichever one makes you happy.
![Page 77: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/77.jpg)
minimize and defer resource loading !
![Page 78: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/78.jpg)
track down unused CSSgrunt-uncss gulp-uncss
![Page 79: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/79.jpg)
minify & combinegrunt-contrib-concat grunt-contrib-uglify !
gulp-uglify gulp-concat
![Page 80: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/80.jpg)
optimize imagesgrunt-contrib-imagemin gulp-imagemin !
or, use an app like ImageOptim for manual operations
![Page 81: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/81.jpg)
cache jQuery selections in your code
var galleryItems = $(‘.gallery-item’)
http://training.bocoup.com/screencasts/the-importance-of-caching-jquery-selections/
![Page 82: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/82.jpg)
promoting maintainability
![Page 83: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/83.jpg)
a hallmark of a maintainable codebase is organization
![Page 84: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/84.jpg)
short term fixes
![Page 85: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/85.jpg)
using less/sass?be careful of the nesting trap.
Check your styles
![Page 86: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/86.jpg)
instead of !
li { display: block; } !
li img { width: 50px; }
![Page 87: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/87.jpg)
you can write !
li { display:block; !
img { width: 50px; } }
![Page 88: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/88.jpg)
which is awesome! but be careful.
![Page 89: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/89.jpg)
the following Disaster SASS™ is real code pulled from alpineviewer discretion is advised
![Page 90: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/90.jpg)
body.single { .outer-wrapper { #content{ #content_column{ ul { li{ a{ img { width: 50px !important; } } } } } } } }
![Page 91: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/91.jpg)
which compiles to…body.single .outer-wrapper #content #content_column ul li a img { width: 50px !important; }
![Page 92: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/92.jpg)
to override that, we’d need a selector with a higher specificity and importance
![Page 93: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/93.jpg)
see how this might get out of hand quickly?
![Page 94: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/94.jpg)
what if all your styles were so messy? ours were.
![Page 95: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/95.jpg)
.gallery img { width: 50px; }
how about this instead?
readable, reusable, maintainable
![Page 96: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/96.jpg)
also, don’t use !important
if you need !important, you have bigger problems to solve
![Page 97: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/97.jpg)
Collaborate on a standards document
![Page 98: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/98.jpg)
helpful for getting the entire team thinking about quality and consistency
![Page 99: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/99.jpg)
involvement increases buy in
collaboration can be an effective and positive teamwork experience
![Page 100: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/100.jpg)
long term goals
![Page 101: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/101.jpg)
organization through separation(and avoiding their opposites)
![Page 102: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/102.jpg)
modularize
JavaScript - AMD / MVCCSS - SASS/LESS
![Page 103: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/103.jpg)
modular code will help you create extensible features
![Page 104: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/104.jpg)
enforce separation of: -style -presentation -behavior
![Page 105: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/105.jpg)
use class names for on-the-fly style adjustments
![Page 106: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/106.jpg)
.addClass(‘error’)
.css(‘border’, ‘red’)
instead of
![Page 107: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/107.jpg)
✓ reusable ✓ consistent \o/ ✓ maintainable
![Page 108: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/108.jpg)
keeping JavaScript out of HTML means only having to look in one filetype
![Page 109: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/109.jpg)
onclick=“doThing()”
el.on(‘click’, doThing)
instead of
![Page 110: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/110.jpg)
navigating stakeholder relations
![Page 111: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/111.jpg)
clear, understandable communicationhow is what you’re saying relevant to business goals?
![Page 112: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/112.jpg)
the quicker solution will often lead to more cost down the road
![Page 113: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/113.jpg)
negotiation
![Page 114: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/114.jpg)
great client relationships are possible!
![Page 115: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/115.jpg)
remember
this is effort against complexity
![Page 116: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/116.jpg)
making effort against complexity benefits:
- you- future you - your team - your stakeholders
![Page 117: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/117.jpg)
![Page 118: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/118.jpg)
make future-you love past-you
![Page 119: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/119.jpg)
the perfect !
tool/framework/library !
does not exist
![Page 120: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/120.jpg)
plan & design software for the situation at hand
![Page 121: Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece](https://reader033.vdocument.in/reader033/viewer/2022060107/554a0e9cb4c90507558b4a74/html5/thumbnails/121.jpg)
thanks!
slides here: @dangribbin