While working at my day job of a front-end developer, I've been driven to learn more of the advanced technologies on the market today. Whereas the go-to for most people are going to be frameworks (like React, Vue, Angular, etc), I enjoy using vanilla JavaScript and CSS when designing new features. I used them extensively in the mid-2000's for hobby projects, and up until recently haven't really dug into that new stuff. CSS3, ES5/ES6 are updates in the past couple of years, and include features that are absolutely phenomenal! It's almost like they saw how fucking hard it was to put some text in the center of a box.

For PBBGs, a lot of the gripes from players are the confusing, bare-bones, or poorly functioning interfaces. It's hard for a small development team to master every aspect of software; storing data to be infinitely scalable, creating a hyper-maintainable back end, and crafting an attractive and reactive front end. Trust me, the interface for the alpha version of Generals was astronomically terrible. User experience (UX) is often overlooked in favor of creating a lot of features, which is where the strength of a lot of these developers lie. To no fault of their own, the front end can be tedious and present a very real difficulty to master.

I plan on writing a series of posts detailing specific aspects of newer CSS and JavaScript features that should make development both faster and easier to push our collective interfaces into the UX dream we all want. These will be short, easily digestible articles about a single tool in either language.

The first series, 'Actually, JavaScript' will be great features of ES5+ that I've learned that substantially decreases the time taken to program an interactive front end. This is not intended to be a beginner tutorial! Rather, it will be for people who are breaching into intermediate JavaScript programming. I plan on using real-world examples for the most part, but occasionally there will be situations that will require more of a theoretical approach. Some of them will be niche, but always useful.

These tutorials will assume that you understand the following:

  • Basic understand of JavaScript type coercion and variable scoping
  • Basic data structures (array, map, linked list, etc.)
  • The HTML Document Object Model

If you don't know any of the above, I suggest you read up on them before diving in. It shouldn't take you more than a day or two to become familiar with these concepts.

The second series, 'Actually, CSS', will be the insanely fast and easy features that CSS3 has given us, plus some extra depth into CSS that people don't really catch when programming casually. And yes, I will cover animations as well.

These tutorials will assume that you understand the following:

  • The HTML Document Object Model
  • How CSS works, specifically the cascading aspect
  • Basic styling; like margins, position, display, etc.

Same as JavaScript, if you don't know these you should brush up before reading them.

I hope to build a library of great articles to help everyone in the PBBG community, so that we all can benefit from better experiences! If you have any ideas for articles, please let me know! My Discord information is in my bio here.