If I remember to look at my web stack next year too, then this will be the start of my annual tradition to look at the web frameworks and languages I used this year, and think about how and whether I will apply them next year as well. All of these things are free to download and install. From where? Let’s start with that.
Package Managers. Full of free stuff that you never knew you wanted so bad. Want to throw some single page app together? Want to grab some pre-written and pre-tested code, and learn about language and architecture at the same time? You can instantly download and unpack these libraries ready-to-go, like an epic, perpetually free Christmas present whenever you want it. From npm, start with some of these:
My goto package manager is npm, however I also use Bower and RubyGems. Homebrew is available for Mac users. Apparently there’s something new call yarn, and npm has a tool called shrinkwrap. Why? Because in the days of us all using other people’s code – everything from jQuery to React and beyond – the versions of this code can change, and those changes can break your code.
What if you are writing code on your laptop and then deploy it to a live server, or you want your coding friends to write parts of it. Do they have the exact same environment as you, and the same as the final production site? Chances are, no. These kinds of tools will save hours of mystery trying to figure out why perfectly working code on your laptop goes haywire in production. Npm’s shrinkwrap attempts to address these issues, and Yarn adds clever new features and conveniences.
For everything you ever wanted to know about package managers, check out this great podcast episode from Bike Shed by Thoughtbot where they talk about package managers, dependency issues, npm, shrinkwrap, yarn, RubyGems, and all the drama behind them.
My goto frameworks and development stacks:
WordPress. Here’s why I often recommend the most widely used content management system in the world: Will my clients ever want to write their own content? They need a tool where they can create any kind of content any day of the week, without breaking into the underlying coding and without calling a developer.
The opportunities for customization are endless. To better understand WordPress and go very, very deep down the rabbit hole, read up everything there is about the Hooks API. Really it’s called the Plugin API but it should be the “Hooks API” because hooks are such a key part of the WordPress universe that understanding them opens so many new insights and everything else just falls together.
Underscores.me. a great super-basic boilerplate for making your own WordPress theme without extra features and bloat that you don’t need.
PHP. Similar to the WordPress Hooks API, it is worth a very deep dive in advanced object-oriented PHP. Ever heard of “spl_autoload_register”? It lazy-loads classes, conserves memory, and instantiates all those pesky objects for you! BuddyPress, which is a social media/community plugin for WordPress, uses spl_autoload_register extensively.
JavaScript. Let’s not wade into the JavaScript wars, except for this: Do you hate JavaScript? Does it grate on you like fingernails on chalkboard? Do its inefficiencies and risky variable management make you want to join a monastery? Does the nonstop rush of new libraries give you vertigo? (“If it’s Tuesday, we’re now using Vue.js! React is soooo August 2016.”) Well, consider this: the English language is not perfect either. it’s sloppy, inconsistent, and breaks it own rules without a care in the world. It’s a bastardized mish-mash of words and rules from Old German, Dutch, French, Latin, Spanish, Italian… did I miss any? (Hint: yes, plenty). English not even the most widely used language in the world and yet its influence cannot be denied. Think of JavaScript as the English language of the web.
It is worth a deep dive into Functional JavaScript and a kind of Object Oriented-ish approach in JavaScript, prototypal inheritance. I powered through a tutorial review of functional JavaScript on a 14-hour flight once, and boy did that flight go by fast.
Underscore (not to be confused with Underscores, above) – a really cool and lightweight JavaScript library. Especially if you do functional JavaScript. Just the concepts of map and reduce alone are worth the time spent.
Backbone. A thin and early JavaScript framework in the Model-View-Controller pattern. Not that it matters, but underscore and backbone ship natively in WordPress. Want to use them in your website? Just enqueue them properly. Oh, and enqueuing in WordPress requires – wait for it – the Hooks API! So there’s that.
Bootstrap. because it’s so easy to use, easy to learn and give you an instantly responsive site. It’s also easy to make a site that looks like everyone else’s, so hire a good designer, change the font, change the colors, and ditch the rounded corners on all the UI buttons. This isn’t 2009.
Bourbon.io. When you’re overdosed on Bootstrap, check out Bourbon.io. It is really, really, really cool and is made by one of my favorite web agencies, ThoughtBot. It has a different approach: rather than insert all these CSS classes into endlessly nested DIVs like Bootstrap, the Bourbon suite (which includes Neat, Bitters and Refills) defines the grid entirely in Sass and keeps the HTML much cleaner.
Sass. Makes you love CSS. And those cool hipster glasses on Sass website definitely help.
Rails. Even before Rails 5 was released, Rails has been a good tool to see a more fundamental example of the Model-View-Controller architecture. And like WordPress, you can just scaffold up a simple system and be done with it, or plunge down the rabbit hole with tools like helpers, specialized features in the Router, Testing, Caching, database associations, and so much more.
In particular, even if you never use Rails on a site, it is worth it to understand the Rails Asset Pipeline and think more about how you should manage things like CSS, JavaScript files, images, and other external things on your own sites.
AppPresser. Turn your WordPress site into a smartphone app. It’s largely a wrapper for Adobe’s PhoneGap, however it is a very good wrapper at that. Save yourself some time and go with AppPresser.
Node/Express. Because who doesn’t love the idea of spinning up a production-quality router to parse a few urls in fewer lines than a Shakespearean sonnet?
Static site generators. For those who don’t need to update their site frequently and don’t need a dynamic CMS, static site generators are blazing fast and airtight secure – because it’s nothing but plain HTML. No database to SQL-inject into, no JavaScript except for what gets pulled from a CDN, no backend code in PHP, Ruby, Java. node or Python to process a request and render a dozen partials before sending an HTML page to the client. Jekyll is my favorite however I’ve wanted to do something with Wintersmith, DocPad, or especially roots.
