"Should designers need to learn JavaScript?" is a popular question, but what does "learning JavaScript" mean nowadays? And why would you ask this question as a web designer? Do you want more control, improve communication with developers, or do you think you will lose your job if you don't keep up with new technologies?
Should web developers learn design theory or, better, attend a Fimga masterclass or an Illustrator training?
Maybe we all, developers and designers, should learn and practice better communication and documentation first.
Web technologies that designers can learn
As a developer, there is always something new that you can learn.
But which technologies should you learn as a designer?
- HTML (5) (basic knowledge): important, and not that hard
- CSS (3): very important and useful
- JavaScript/TypeScript/React etc.: keep learning forever
CSS: underrated, powerful, and (un)forgiving
CSS has been criticized for its inconsistencies, complication, and gotchas. It can be frustrating to rephrase the same simple statement over and over and still not be able to adjust an element's font size.
CSS is forgiving in the same sense as HTML. They both follow the principles of robustness and progressive enhancement. A typo or a new rule not supported by your browser yet will not cause the whole website to disappear and display a cryptic error message instead. It's much easier to break a React or JavaScript application than to break CSS or HTML.
But CSS becomes unforgiving when you don't close brackets and quotation marks correctly.
footer .curly-style {
display: curly; /* "curly" is unknown, this line will be ignored */
background: blue; /* this line will work */
footer.footer--alternative {
background: red;
/* this won't, because you forgot to close the brackets above! */
Coding became easier thanks to syntax highlighting and automatic code completion. Noticing that footer.footer--alternative has different colors than footer .curly-style should already raise suspicion, even if your code editor doesn't warn you.
We don't need to memorize every detail when there are tools (like the free Visual Studio Code editor) that will tell us if it's "whitespace: no-wrap" or "white-space: nowrap".
Modern browsers' developer tools ("inspect element" mode) will even show why certain CSS rules do not affect a specific element.
Source: Adobe Font Tool after visual search failed
It would have helped me much if those typographic examples would have been labeled even more redundantly with a text like "Primary Font usually used in Headlines H1, H3, H4 (but not H2); 1 of 3 brand fonts in this design system".
Constraints and consistency
"Explicit is better than implicit" is a helpful directive in software development. Define your constraints: if there are font sizes of 12 and 14, does that mean it can only be one of those two, or does it mean the font size could be any other whole number (integer) or even a fractional value like 12.5? What's the entity? Points? Pixels? Percentages?
Be explicit
Back to theory and practice, we don't need to know everything, and we don't need to follow any paradigm or theory unless it makes sense. But scientists have gained knowledge by questioning assumptions. We can still follow our hearts and gut feelings, but we can add some rational methodologies to make our work even better and prevent wasting time and mental load getting lost in misunderstandings.
Conclusion
Should designers learn JavaScript or CSS?
Summing up my rants and ravings, I want to advocate a pragmatic way to combine theory and practice. I have attended some university seminars but never finished with a degree. Instead, I joined a web design and development startup as a co-founder in the millennial years before resuming what I had missed by attending meetups and guest lectures at other startups and our local university.
Takeaways:
Learn the basics of:
- HTML
- CSS
- communication
- some JavaScript (maybe) or any other programming language
- some project management
- some economics
- some ecology, sociology and culture - because we don't want to be nerds but take parts in all aspect of society!
SOCIAL SHARE CARD GENERATOR