This past summer, I gave a lecture at a web conference and afterward got into a fascinating conversation with a young digital design student. It was fun to compare where we were in our careers. I had fifteen years of experience designing for web clients, she had one year, and yet some how, we were in the same situation: we enjoyed the work, but were utterly confused and overwhelmed by the rapidly increasing complexity of it all. What the hell happened? (That’s a rhetorical question, of course.)

Frontend web development has never been a hotter or more controversial topic.

Where once it was the server-side community that was embroiled in arguments over seemingly obscure topics, like whether ORMs were useful abstractions, now you can’t ask whether CSS belongs in JavaScript without raising everyone’s hackles.

The proliferation of frameworks and buzzwords in the JavaScript ecosystem has gotten so extreme that Medium thought pieces on JavaScript fatigue are the new lightning rod of the development world. We can’t even stare at our own navels without sparking off a ‘navel-gazing considered harmful’ trend on hackernews.

I had a conversation with a friend yesterday who is looking to fill a role in his company and expressed some frustration with a challenge I've been seeing lately as well:

I have had some trouble hiring a front-end person, basically a WP, Foundation, CSS, JS person to fill a low-level production role in the company. I can’t figure out what the deal is, all applicants have no “base knowledge” of the above, they can produce react or other JS framework sites, or create through the WP template system, but if I said, I need some straight CSS changes, blank stares…. or some vanilla JS stuff, nothing.

There are no shortage of boot camps, courses, and resources to learn front-end development out there, but having interviewed a lot of the folks coming out of these boot camps, I think there is a serious under-appreciation of the importance of CSS and the fundamentals of JavaScript.

Because software solutions rarely operate in a vacuum, integration is a necessary fact of life for many developers. Sometimes it’s easy. Anyone who has integrated an application into Slack, for example, will have been treated to an incredibly smooth experience. In many cases it’s as simple as filling in a form (a URL or two, an authentication key) and hitting the Submit button. That’s plain awesome.

But then you have the complex integrations, the ones you find in the Fortune 5000, that might involve weaving together third-party products numbering in the double digits. These are the environments where the level of specific customization and the complexity of the business logic you can use are determined by the openness and comprehensiveness of each vendor’s API.

Today I’m going to compare templating languages, like Handlebars, to generating DOM with JavaScript, like React does. There are two main arguments for using templating languages - that they are expressive and declarative.

A Linked List is a linear collection of data elements, called nodes, each pointing to the next node by means of a pointer. It is a data structure consisting of a group of nodes which together represent a sequence.

Singly-linked list: linked list in which each node points to the next node and the last node points to null

Doubly-linked list: linked list in which each node has two pointers p, n such that p points to the previous node and n points to the next node; the last node's n pointer points to null

A very timely talk as the big browsers are due to ship implementations of CSS Grid Layout in a matter of weeks. Grid lets you create complex layouts very easily. No more floats and clearfixes!

Forget rolling your own float-based layouts, incorporating your favourite CSS framework’s grid system, or stretching Flexbox within an inch of its life – CSS Grid Layout module brings us a native CSS grid system for the first time! It’s a system that doesn’t rely on document source order, and can create complex layouts which are easily redefined with media queries. Rachel provides practical examples to demonstrate how Grid works and how it can be used to implement modern layouts and responsive designs.

There seems to be a myth being put around that CSS Grid Layout is going to be really difficult to learn, so difficult that poor web developers will never use it. I call nonsense. I have seen the stuff people learn on a regular basis. The average framework has a grid system more complicated to understand than Grid, you don’t have to get far into Sass to be dealing with concepts far more difficult than those you get in Grid.

I also don’t think web designers and developers are stupid and incapable of learning things, and I’m one of the few people who has actually taught grid in a classroom situation. When I do that, the comments I get from students is how straightforward grid is. I’m a decent teacher, but I don’t think that I could make something horrifically complex seem simple.