The web without the web
Published: 2019-08-01 12:43:56

# 1.

I built my first website when I was 14? It was a fansite for the Sims. It used tables and the colours wouldn't pass any accessibility (or aesthetics, for that matter) checklist. If I remember correctly it was a combination of making the visuals in dreamweaver to then copy/paste the generated HTML and CSS into a PHP backend that I made myself (you can imagine how that looked on the inside).

This was a very important website not just because it somehow got relatively popular but it was also important for me as it became my personal playground. I taught myself CSS to make the layout nicer, and in the process I picked up enough design skills to be employed as a designer for 4 years. I started doing banners and animations using Flash (from macromedia back then!). 

The web 2.0 era arrived shortly after and I started hacking together mooFx scripts to make things move and be cool. I wasn't entirely sure about what was going on in my code and I missed to PHP standard library dearly but I powered through. Eventually picked up jQuery and for a buncha years that was all my understanding of the DOM really. 

I learned more about HTML and CSS. I learned how to write semantic and accessible code. I learned how to scale up CSS architectures to prevent spaghetti code.

For a while I had this personal website that was like a Mario World stage and everything moved and it used CSS animation and some JS sprinkles to add infinite clouds and stuff.

I fell in love with all the cool shit I could build. 

<center>

![](https://thepracticaldev.s3.amazonaws.com/i/ha6dim4gjonlx8ed3g6m.gif)

</center>

# 2.

I eventually became a somewhat respected frontend 'engineer'. I do talks and stuff. LinkedIn recruiters actually put effort in their greeting messages. It rules. I'm just bragging at this point. Stop me.

Now, despite all this you may have noticed I'm missing a lot of things from my intro to an engineering career. 

I'm not really sure how functions map to mathematical constructs. I actually dropped out of maths when we started doing that algebra where instead of equality you deal with stuff like `2*n > x/3` and you have to find out what range `n` and `x` are (I have no idea if this particular one is solvable, I just came up with it)

I'm still just wrapping my head around the more complicated types you can do in stuff like typescript. For what is worth I don't use types in personal projects. I think they are good for making code self documenting and thus, good for teams. Too abstract though.

For a long time I never used any real frameworks for web development. I totally slid past the angular and ember era because I considered unacceptable to have a site not work without JS enabled. Writing your entire frontend in javascript felt incredibly unnecessary when we have semantic HTML.


<center>

![](https://thepracticaldev.s3.amazonaws.com/i/l2ejqlhzv58drpkmu5ep.jpg)

</center>


# 3.

I love React. I love React because I know enough about scaling up HTML and CSS that I understand the value of single file components. I like the way CSS-in-JS gives you the enough abstraction to still use tricks like blind owl selectors while also giving you the full power of using JS to do stuff like container queries. I love how server side rendering React apps is trivial because it all compiles down to vanilla HTML rather than web components, effectively turning it into a kickass template engine that can come alive. I love the way you can very effectively still do progressive enhancement by using completely semantic markup and then letting hydration do more to it.

I also hate React. I hate React because these behaviours are not defaults. React is not gonna warn you if you make a form using divs and unlabelled textboxes and send the whole thing to a server. I hate React because CSS-in-JS approaches by default encourage you to write completely self contained one off components rather than trying to build a website UI up as a whole. I hate the way server side rendering and progressive enhancement are not defaults, but rather things you have to go out of your way to do.

But what I hate the most about React is that it paves over the land of HTML, CSS, and JS progressively layering on top of each other and replaces it with 'efficient' and 'clean' code.
Compared to vanilla HTML it's very easy to add type checking to a React app to really make sure you can't accidentally add `"12" + "8"` because how else would you know you aren't getting 20 here. By running your app? Absurd. It's also very easy to automate tests by taking component snapshots and effectively freezing them in time, evolving CSS layouts be dammed. With CSS-in-JS you can ignore those pesky CSS behaviours like the cascade. It's not like it's the first letter in the name or anything.
Not having that much first class DOM manipulation and a mandatory build step anyway means engineers can finally start paving over the ugly duckling and liability that is javascript for other languages, based on the purity and elegance of mathematics, like Elm or Reason.

Some people think these are good things. Other people think they are a masturbatory exercise in service of nerds finding actually coding websites too boring and needing to spice it up.

<center>

![](https://thepracticaldev.s3.amazonaws.com/i/4d74ecz0wvl2qx4fiu1x.jpg)

</center>


# 4.

I'm a surprisingly fast learner. I have caught up. I know my stuff around all this shit. I'm also a bit of a rarity. The best frontend developers I know are at a complete loss right now. 

Most modern frontend codebases are no longer about HTML and CSS. In fact they are so far removed from it that the idk 20? people total who still care about HTML and CSS and can code websites and haven't become product designers or whatever have no clue where to even start.

Our 'clean' and 'elegant' frontends are now often more clean in the back than in the front now. Our perfectly typed 20 file redux store supporting a form that doesn't work with javascript off. Our CSS-in-JS modules with typed props hiding spaghetti CSS with completely static props as an implementation detail. 

We are building toilets with world-class plumbing that people can't then sit on. And the people who know how to fix the toilets have no clue how to fit a toilet into our plumbing.

The designer that knows CSS can't update some colours in GitHub without breaking half of the tests. The Product manager can't replace a bunch of words in a page without figuring out the PropTypes of the map component. The accessibility expert can't replace `divs` with `buttons` because the visual regression testing says that Opera mini in Windows Phone 6.5 renders a border about them and we can't merge changes until it all goes green. The frontend dev can't implement an accordion (honestly, that one might be for the best) because the guy who's super into types won't let her store state outside of redux.

In elevating frontend to the land of Serious Code we have not just made things incredibly over-engineered but we have also set fire to all the ladders that we used to get up here in the first place.

<center>

![](https://thepracticaldev.s3.amazonaws.com/i/j9bo057dlq3hm1t189a9.png)

</center>


# 5

I think a lot about how I started coding. About how I developed an understanding of the web. It was wild. I didn't touch code for ages while still making cool websites. We just made things work. 
The web, by design, always has had a bit of 'best effort' sprinkled all over it. You would make your HTML accessible and semantic and then write your CSS in a resilient way so when it inevitably breaks in a different/older browser the page still works. And then you sprinkle your javascript on top and if it doesn't work? That's fine because it's not required to function. It's icing on the cake.

I love React because it lets me do my best work faster and more easily. I hate React because the culture around it more than the library itself actively prevents other people from doing their best work.


<center>

![](https://thepracticaldev.s3.amazonaws.com/i/pmbz29o37bmccm191j67.png)

</center>