Unnecessarily Complicating Front-End Development To Feel Like A Smarter Person

6 min readMay 10, 2017

Front-end development is way too easy, let’s make it more complex so we can feel smarter amongst those of our peers who are apparently dealing with more “critical” aspects of the business. Remember this is a competition.

I Just Don’t Feel Smart Using CSS

When you minus Responsive Design, box model caveats, implementing font-families, font-sizing challenges, feature fall-backs, building reusable components, cross-browser SVG, responsive images, image optimisations, accessibility, satanic CSS debugging, cross-device testing, cross-browser compatibility and cross-resolution testing, CSS is a relaxing walk in the park and becomes just as easy as it appears.

So I know what you’re thinking, how can we make this harder, how can we get all mysterious and Macgyver up in this bitch?

!Preprocessing

CSS Preprocessing is for babies, sure it has variables, mixins, nesting, loops, conditions and all that practical stuff but the problem here is that it doesn't make you want to instantly claw your eyes out.

Ideally we want to create an environment that only we as Frontenders can understand, so the Back-End girls and guys can think “Hey you’re not such a simp after all, we should hang out”

!Auto-Prefixing

Obviously an anti-pattern, there was a time when only we knew that -moz- was the magic solution to make the stupid thing work when you open it on that other thing, and that made Backenders all clingy and needy for our help. Now they’ve worked it out, all this auto-nonsense is just not challenging enough. We are at war here with our pride and ego, all this efficiency is a distraction.

!Separation Of Concerns

Clearly this is the most ridiculous concept in software engineering. It relates to the philosophy of Domain Driven Design by that Eric Evans joke who is a founding member of the Illuminati and creator of DDoS. I can tell by the alliteration.

DDD of Death

- Basing complex designs on a model of the domain;
- Initiating a creative collaboration between technical and domain experts to iteratively refine a conceptual model that addresses particular domain problems.

I’m no Columbo but it’s almost as if the web spec was built with that same kind of separation in mind. This is a poor design decision that has made it so difficult to prove one’s level of superiority over another’s. Especially during that dark era of custom MySpace themes.

Back when teenagers were using HTML and CSS to do voodoo on MySpace, this Is why I lead with frameworks.

Now I don’t know about you but I am perfectly happy mixing all my colours (Brexit spelling) in the wash because It’s way faster and I’m not ashamed to sport pink socks. We don’t need separate concerns, why not one big concern, why not consolidate all our utility bills in a way so that if we miss one payment all our services cut off simultaneously.

Some Backenders Claim JavaScript Is Broken

And they must be right because I don’t understand entirely what they do and not understanding what someone else understands means inferiority. So how can we use this reliable rumour to our advantage? Eureka! We can complicate things, therefore Backenders get to say “That front-end setup is so confusing, these guys must be hella smart!”.

HTML In JavaScript

HTML is presentation right, and JavaScript is the logic so let’s mix all the fun together to make a giant maze. Only a simple minded fool wants to understand what’s going on before reading though the damn thing 12 times over.

CSS In JavaScript

When I eat lunch, I like to pour my beverage on top of the sandwich, that way I can eat and drink at the same time. All-in-one works for every scenario.

So don’t tell me shit about CSS in JS. Without JavaScript CSS is a bunch of object literals with properties and values. With JavaScript it’s so much more than that, because we are not only using object literals, but properties and values.

JavaScript In JavaScript

We can hide “secret” JavaScript from the smart people, then tell them to follow a set of unnecessary rules and claim the advantage is structure or better yet because <insert excuse here>. The key to success is all about working harder, not smarter. So if we add more and more infuriating rules we can make others who are new to those 3000+ rules feel unworthy of our superiority.

Buzz Words

Front-end development is all about the buzz-words.

Oh you’ve never used Contract, XXLJS with pikachu.js or the LSD-Module Cross-bow launcher that is backwards compatible with MollyJS, you’re like so last season!

Stop worrying about things you can’t control like:

Asset sizes
Cost (£) and time comparisons against the use of different technologies (Useless for business decisions)
Cost and ease of feature updates
Ease of new developers understanding the project
Brittle build environments
Unnecessary dependencies
The “Lock-In” risk

Let the stakeholders eat their steak and start getting familiar with the newest buzz-words. If you’re like me you only talk about a single aspect of performance. What keeps me up at night is worrying about how many divs my code can render per second.

If the production build is over bloated and complicated that can only be good news because then you get to spend more time deflating and maintaining it in the future thus making yourself more of a dependency and reliability than anyone new joining your team.

Preference Over Logic!

Who cares if you can achieve the same thing or better using pure HTML, CSS and JavaScript via some basic design patterns and lightweight libraries in half the time whilst only using a third of the LOC compared to my fun happy joy joy superior JavaScript with JS on racks on racks on racks setup that utilises all the the latest buzzwords. You are the loser and I am more likely to get hired.

I would prefer not to use words like “HTML” and “CSS” at dinner parties because people are like “Yea I’ve heard of HTML, my 8 year old little brother is great at that” that kind of talk will dent my ego. So I completely immerse myself in matryoshk-style levels of JavaScript abstractions to make things a little more interesting and Inceptioney…