The Black Pixel Web Stack
What’s Now and What’s Next
Every day there’s a shiny new framework or library that seemingly everyone is talking about. While it can be tempting to adopt the flavour of the month, being too liberal with technology choices often leads to churn and frustration, the opposite of productivity. As developers, we’re constantly learning, so avoiding new technology is not the answer. But we need to approach these decisions with pragmatism.
Here are some of the tried, tested, and true language choices and frameworks that we at Black Pixel keep coming back to to get work done.
Suddenly the programming language once treated as a toy had proper module support, destructuring, template strings, a spread operator, arrow functions, and even classes (but don’t use those).
Frameworks and Libraries
PostCSS takes CSS source files and creates an abstract syntax tree (AST) of the contents it exposes via API. The rich plugin ecosystem of PostCSS allows developers to do almost anything imaginable to a CSS file’s contents. One of the most common uses for PostCSS is transpiling future CSS syntax to current-day syntax, so browsers can reliably interpret features like custom properties and the var() function for variable support. PostCSS is often referred to as some lofty technology that is more proprietary than popular preprocessors like Sass, but this is far from the truth. PostCSS allows developers to write less proprietary syntax. Bypassing Sass removes an enormous amount of abstraction between style input and output, resulting in better code. PostCSS forces you to think about what plugins you’d like to use to manipulate your code, instead of giving you more than you need.
Linting and Best Practices
When writing CSS we use atomic, immutable classes and ITCSS architecture, with SUITCSS-inspired naming convention and object/utility namespaces. UsonianCSS is a cumulation of these ideas and serves as our baseline CSS boilerplate on greenfield projects.
To lint our CSS, we use Stylelint and postcss-bem-linter with a custom config for UsonianCSS. Stylelint is ESlint for CSS. It helps us maintain an alphabetical order of CSS properties, consistent block formatting, and naming conventions.
Facebook’s GraphQL is a new way to facilitate client-server communication. It could be really interesting to use on a project where we’re building server-side support for a mobile client. Instead of having individual RESTful API endpoints, GraphQL gives you a single endpoint for specifying what data you’d like in a syntax that resembles JSON but without property values. You request the keys you’d like, and GraphQL returns the key-value pairs.
Netflix’s Falcor attempts to solve the same problem with a slightly different approach that could also have drastic impact on client-server data transfers.
At Black Pixel, we are privileged to work with some of the best technology companies in the world. Because of this, we’re exposed to a myriad of different approaches that help us become better developers. Whether we’re prototyping internal projects for our clients or working on scalable web services that need to support millions of users, there’s no shortage of tooling and techniques to explore.
For more insights on web and mobile development and design, follow Black Pixel on Twitter.