Let's setup Next.js to be able to serve markdown content, such as blog posts.Next.js Custom ServerNext.js has a nice feature set out of the box. If you have a site that's more on the site end of the spectrum (rather than the app end), you'll likely be able to use the next server as-is.If, however, y...

PostCSS offers JavaScript-based CSS processing. It's easy to make a plugin for this system. Let's do it!What is PostCSS?PostCSS is a system that uses Javascript to parse and process CSS. This means that if your JS can adjust your CSS, you can use the new, zany, or made-up features of CSS. PostCSS ca...

Everyone has a different flavor for this. Here's how I order the inside of a JavaScript module.I believe that order is an important element of consistency. Consistency allows your codebase to feel organized and more easily navigated. Things are where you expect them to be. A coherent ordering strate...

There are a couple ways to split up and import parts of Node packages. Using a slash (/) in the import statement is one of them.Main Entry PointIn the package.json for a Node package, the entry point of the package is defined in the main attribute:{ "name": "some-package", "main": "index.js" }This d...

Single-line spacing is easy. Let's space out flexbox elements over multiple lines. (Also not bad.)Single-lineIn a single-line design, getting space between your flexbox elements is easy. It's similar to how you probably space siblings in a non-flexbox world. If the .parent is display: flex and the c...

The "style" attribute in package.json is useful for importing CSS packages. Here's a way to utilize it.CSS on NPMNPM is a great channel for distributing assets for JavaScript projects. Traditionally, JavaScript code has been the most common thing to be stored in NPM, and that's what the repository w...

Most native Node APIs use callbacks. If you want to use Promises to work with these APIs instead, it's easy.Native Node APIsIn Node, most of the async APIs in the core APIs use callbacks to notify of task completion and resume a code path. This works just fine. The pattern is solid. If you like call...

Zoho Mail is a great mail host that supports free custom domains. Here are the steps to get it all put together.Olden DaysGmail is a great email web app. They have great spam filtering, and the UI is snappy. In the olden days, they offered free custom domains if you used the Google Apps for Business...

The pace of technology change requires nimble solution change. Small solutions help.All-in-one is ExpensiveHow many times do you setup a project? Once. But how many times does tech change over the lifetime of your project? Many, many times.There is an allure to all-in-one solutions: everything has b...

Gratitude is a beautiful virtue that is always welcome.Making the World BetterAhhhh... Gratitude just makes the world better. When you hear or say the words "thank you", your heart is happier. Your perspective is broadened and clarified. The world feels and sounds better.We can go from noticing ever...

Next.js is a framework that most notably allows you to write server-rendered React apps easily -- amongst other cool things.It's a FrameworkNext.js is opinionated and provides structure for how you build your app. Like Rails, the file-system is often the API. You name your file something special and...

Waiting, building up to do some great thing can sometimes not feel as joyful as just doing something simple.Big EnoughOur eyes are on the horizon. Someday we'll have something big enough. Someday we'll be good enough. Someday it'll make a big enough splash. But often this day never comes. Time, ener...

CSS Modules are das bombe, but you're still stuck in a land where the traditional CSS stylesheet exists, you may have to load both. Here's a pattern that could potentially work for you.Importing CSSWebpack is a tool for loading many different kinds of assets as modules into JavaScript. This means, f...

When you're in a meeting with other people, be with them, not with your laptop.Respect for OthersIf you care about the person who's speaking in a meeting, you'll look at them. You'll be with them. You'll engage.If you have your laptop open in a meeting, you're communicating that something else is mo...

Use of postcss-import in your CSS module processing can lead to more selectors than you realized. Here are some ways to deal with it.postcss-import is a useful postcss plugin. It allows loading CSS from npm modules by looking up module entry via package.json's "style" attribute. But if you don't rea...

It shouldn't. Edit your life. Edit your Slack channels.Someone LeftWhen someone leaves your beloved Slack channel, do you jump all over them? I've even been immediately invited back into a Slack channel (mostly jokingly) with comments about how I will never be able to leave.We should make it ok for ...

If you use React to render your static site and browser app, you'll need routing to work in both places. With a little setup, you're golden.Generate a Static Site from ReactReact is most commonly used to render in-browser single page apps. But the React component abstraction so pleasant to work in t...

The default line spacing in Keynote is wickedly high. Find the spacing submenu and make it line spacing better.So much for Apple products that are so simple and usable that you're delighted by their ease every time you use them. For some reason, this Keynote feature has troubled me for years: why is...

As developers, we sometimes feel the need to do it all. Is this feeling realistic or even needful?An Entreprenuerial NeedIf you're starting a gig all by yourself or if your company is small, growing, and you're just figuring things out, you may indeed need to "do it all". You wear many hats. You mak...

There is a great path API in Node. Still, you can get mixed up in how to specify the correct path. Let's break down a few options.OS-agnostic PathsAll OSes have a file structure, where directories are nested within directories, with files existing in each. But between OSes there is a difference in t...

React favors composition over inheritance. There are several useful ways to compose components in React.Composition is a way to get polymorphic behavior in a way that's often more flexible and easy to work with than is inheritance. If we want a component to behave differently but want to reuse some ...

As we define limits in our life and work, we gain the freedom to be more productive.Happy BoundariesSome may view boundaries as constraining. An alternate view would see boundaries as guide rails for life and work that lead us to where we want it to be. If a body of water sits at the top of a mounta...

There are only a few tabindex attribute values you can use. Learn the few differences, and be empowered forever -- and beyond!Tab OrderIn a web browser, when a user presses the tab key on your webpage, the browser will advance focus to the next element available in the tab order. The tab order is de...

Snippets are prebaked bits of code that can make your coding experience faster. Creating them and accessing them in spacemacs is easy.yasnippetIn spacemacs the default snippet manager is yasnippet. Its snippet format is inspired by Textmate. We're going to look at the very basics of creating and usi...

You have access to some great component lifecycle hooks in React. componentDidMount is one of the most useful, but it's not going to be available when rendering on the server.You may have been stumped when you wrote a React component and were trying to get some code to run in the componentDidMount. ...

There are many useful webpack loaders. But sometimes you need something special, and it's easy to write your own.What is a LoaderWebpack is all modules all the time. It utilizes plugin-like code, called loaders, to gain additional functionality. Webpack will take a file at a file path and load the c...

Simplify your babel setup by not manually tracking plugins. Use a target browser strategy instead.Most Plugins Target FeaturesBabel helps you transpile your source JavaScript, written with the latest language doodads, into the usually-older JavaScript that your browser will actually understand. Ofte...

Give keyboard users a way to get to the main content of your site quickly.Keyboard NavigationUsers of your site might use a keyboard for a number of reasons. They might suffer from a visual impairment and be using a screen reader which is controlled by the keyboard. They might prefer the keyboard fo...

Node has a built-in debugger. It requires no extra tooling or purchased IDE. Try it out. It's easy.Commandline DebuggingNode's debug module is available in the terminal. Normally you would start your app up with node app.js. If you adjust it slightly, you'll be ready to debug:node inspect app.jsOnce...

In React, "mount" means the moment when your Component is inserted into the DOM. Well, what does that mean?...The Circle of ComponentsIn React the main abstraction are Components. A component represents an element in the UI. Components exist in memory -- they're virtual. React maintains a virtual DO...