Functional composition is an extremely useful tool when coding in JavaScript. It has a bit of a learning curve but can remove lots of lines of duplicate code while preserving a declarative flow. However, it doesn’t always play nicely with voids, i.e. functions with no explicit returns.

Say we have a function that parses some user data:

const users = [
{ first: 'Syl', age: 21 },
{ first: 'Bill', age: 47 },
{ first: 'Hank', age: 55 },
const getTargetUsers = pipe(
filter(({ age }) => age > 30),
getTargetUsers(users); // ['Bill', 'Hank']);

Easy enough! But what if we want to add some analytics? Specifically, say we want to record all data from users in our target demographic before parsing further. Imagine we have a third party analytics method that does just this. The bad news? It’s a void and doesn’t return any of the user data. It just fires a post request to the server and dies. We could wrap the…

I have yet to work anywhere where there was consensus on coding style. The fact that formatters like Prettier exist also tell you this isn’t a unique problem. I’d like to over one such convention that I think could use a revisit: nested ternaries.

A ternary is basically a shorthand if-else statement. Consider the following

if (person.age < 18) {
person.type = 'minor';
} else {
person.type = 'adult'

There’s a bit of repetition and the if-else block can be a bit verbose. As a ternary we could write

person.type = person.age < 18
? 'minor'
: 'adult';

With a ternary the if resolution comes after question mark whereas the fallback resolution (else) comes after the colon. …

Functional programming with the help of utility libraries like Ramda or Lodash can make composing certain functions a breeze. A trivial example in JavaScript:

One of the knocks against functional programming — and JavaScript in general — is that despite its declarative centering, composing functions in this manner removes any input-output signature from the method and relies on thorough documentation, semantically relevant naming conventions, and devs who invest time into both.

Enter TypeScript: the self-documenting type guard and validator JavaScript pre-compiler. …

Image for post

Much has been made of the inbox zero approach towards email management. Inbox zero certainly doesn’t guarantee you are a more responsive emailer or a more organized emailer, but it at least incentivizes those habits.

In functional programming, I propose the concept of “argument zero” as a similar proxy/ideal to strive for.

Fewer arguments is better

While this may seem obvious, I don’t think a lot of functions are written with intent. Most are bridges meant to get from A to B and that’s it. Arguments are added as needed with little thought of the impact on maintainability. Consider the following progression:

const greet = () => 'Hello.'; …

Recently I’ve come across an anti-pattern in JavaScript and front-end development but is by no means limited to those areas of programming. The problem arises when the parent class attempts to handle logic unique to one of its subclasses.

The omni-parent class

For the rest of this post let’s consider the following example as a means of highlighting the problem and what can go wrong: say you’re trying to create a class to describe all types of cars. It would be very easy to start writing this class with a loose idea of what its methods will ultimately look like.

class Car {
constructor (config) {
// How should we configure our car? …

Of all CSS properties, z-index may be the most frustrating to deal with on a site featuring multiple, separately maintained stylesheets. Fixed UI and intentionally disruptive page components demand the foreground. z-index is the quickest way to lay claim to what the user will see.

Escalation without context

The single-most problematic aspect of z-index as a CSS rule is the global nature of how it’s applied. Under the most ideal set or circumstances, developers would have total autonomy over all z-index instances. However, even in this scenario the developer seldom can see all CSS selectors that contain a z-index property.

Browser inspector tools are little help on this front. Tabbed CSS summaries are still specific individually highlighted DOM elements. This - like the stylesheets - provide no context for all impacted properties. …


Aaron Dilley

Front End Developer and Crossword Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store