Hello Neo! How do you tell if a theme consists of "good code" or if the code is "well done"? Just curious :)
All right so code healthiness is a subject that matters a lot to me, and I’m not saying my code is perfect or anything (my tutor scolds me all the time for many different things), but I think everyone that does code (on tumblr or anywhere else) should be aware of best practices etc.
For the theme I reblogged earlier, bad code would have been having two “sections,” one containing the large/permalink posts and the other the grid views, and therefore the theme would have been loading posts twice (once in the permalink section, once in the grid section)
That said, tumblr’s themes do not evolve on the same level as actual websites’ codes, so it’s weird to compare them (reading between the lines: I need to chill), but when I do code reviews for tumblr themes, here are the points I check:
Generally: The code is indented logically, the code has been cleared of empty/useless divs/classes etc: all that remains makes sense
CSS: Overriding values are at their minimum, when styles are used often (display:inline-block; vertical-align:middle;), their selectors are combined together, everything makes sense like there are no ???? things such as “position:fixed; float:right;”
HTML: Use HTML5. No empty/garbage divs. Also please save puppies and forget inline styling has been a thing
Names: IDs are unique, IDs/classes are not named after any semantic elements (class=“label” instead of , id=“section” instead of
), yet stay legible (you know what they’re about). They don’t have typos! Lastly, having one class instead of an ID is OK, but don’t have many divs with different IDs attached to one script/one styling: use a class name.> Fun story: At work, we had a coding logic on a site we worked on with classes called .box-master-prices-param1-param2.., and Smoll (a.k.a my tutor) made a typo during early development days on one of the master boxes’ param, like .box-master-prices-suqares instead of “square”, and because he was too lazy to fix his typo, he used his class everywhere. SCSS, Scripts, HTML… After like, 5 years of people too lazy to fix it, the code had evolved so much around this typo that it became quasi-impossible to fix it… lmfao
Scripts: Shortened/compiled when needed, externalised if possible, not too many shorthands expression (ex: if() without braces), “toggles” are bound to disappear so use if()/else instead, D.R.Y: Do Not Repeat Yourself — if a bit of code is used several time, it becomes a function on its own and is defined out of the event’s scope It’s the hardest part, but a script is supposed to evolve with the website, so it must have a life on its own and not rely too much on the DOM elements… I don’t have an example up my sleeve, so I hope it’s clear :(
As a side note: Good code is not about design or UX. Your website can be ugly/not responsive/not respecting accessibility constraints/shit for users to use and still be a case study with its beautiful, sharp, strong lines (…that’s a pun. you read it right.) of code.
QUICK TIPS & TOOLS TO WRITE BETTER CODE :
Test your code. Users will never use your thing the way you expected them to, so your code has to be ready to be sprained, be twisted, be mishandled — it has to take it all without whining.
Have a friend that knows only the basics of HTML/CSS, and make them change the colour of the text or something equally benign. If they can’t do it in less than a minute, it’s not that they suck, it’s that your code isn’t organized well enough.
Use Caniuse to see what you can do to provide a consistent user experience on all browsers
Make your design responsive to provide a consistent user experience on all devices
Read these: What is good code?, Code checklist, 8 definitions of good code, how to be a badass developer, tips to write better code
The definition of “good code” on tumblr is VERY different of “good code” in general. Here, makers have a limited range of langages they can use (javascript/css/html, no preprocessors), so good code is more about using the right javascript functions, being clever in code organization, having your code as short and efficient as possible etc.Talking about “good code” on tumblr is also a little caustic considering most theme makers are self-learning and do code as a hobby (side point: you guys are heroes for that), and you therefore can not expect theme makers to try harder than having the code working. As long as the code works it’s good. Like don’t stress yourself.
But like seriously, I work as a professional developer and I do bad code. I do bad code all the time. Sometimes I’m not even daring to look at my teachers in the eyes because if they knew they would be so disappointed in me. (it’s different at my job because when I do shits my coworkers know/can smack the hell out of me right away, so I trY MY BEST)I just told you to make your themes responsive for a “consistent user experience on all devices” but do I do it? I don’t. I actually don’t give a damn, I’m too lazy to make my themes responsive. Priorities ¯\_(ツ)_/¯
Keep in mind: Pure™ code DOES NOT EXIST. No one writes an absolute code, not even Paul Irish (and I admire Paul Irish so much I want to cry).
So here’s my take on good/bad code, but I said it before and I say it again: as long as it works, you’re good. Don’t break a vein over your coding style because you’re not a professional developer, you’re here to have fun and enjoy doing things, so if refractionating your code is a pain, then don’t bother doing it. It’s all good! :)
dededos
germansingergirl
turnnoffyourmind
prguitarman
annaxmalina
theartofmadeline
tangentwithtanner
ellievsbear
