Process any .css file with Tailwind by leveraging NWB’s built-in support for Postcss

npm i nwb -g
cd PROJECT_NAME
nwb init react-app
nwb new react-app PROJECT_NAME

Note: NWB also has built-in support for Preact (substitute preact-app above), or can be customized to support other JavaScript app frameworks.

npm i tailwindcss --save-dev

Create Tailwind’s configuration file:

./node_modules/.bin/tailwind init

You can customize this file to your heart’s content by following the guide.

Edit the nwb.config.js file like so:

const tailwindcss = require('tailwindcss')
module.exports = {

webpack: {
rules: {
postcss: {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer'),
]
}
}
}
}

Now running or building with NWB will live reload .css file with Tailwind support:

npm start
npm run build

Send me any questions on Twitter: @concreteniche


Update: there is now better ways of configuring environment variables in Next.js since this blog post was published. See the link below. Thanks Loren Sands-Ramshaw!

Original post:

If you’ve ever used create-react-app, you may have needed to use environment variables, say for setting the URL of an API server. Fortunately, it makes it really easy.

First, create a .env file in your project. Then, add each environment variable with the prefix REACT_APP_ to this file. The prefix allow create-react-app to whitelist them as being safe to bring into your app.

An example .env file would look like:

REACT_APP_API_URL = http://localhost:7000
REACT_APP_OTHER_THING…


The Next.js framework has a fantastic balance of conciseness with capability. It makes full use of React, with client side rendering (read: fully dynamic web app), server side rendering (read: faster initial loads and better SEO), and probably best of all, is opinionated.

The first opinion is routing. All pages have their own separate files, and live in the pages directory. And then that’s it! There’s no setting up and maintaining React Router. Rename or remove a page’s .js file, and your routes follow.

The second is styling. It takes a little to get used to, but CSS styling is…


What is required to make an API service?

  • API — gatekeeper to our data, the interface between application programmers and our database
  • Database — where our data is stored and retrieved later
  • Host — where our API actually lives

Technology Stack

  • Node.js 7 — friendly, supporting the majority of ES2015 features such as destructuring, Promises, and template strings.
  • Why not GraphQL? REST is simple, and works widely with the web and mobile app front-ends staples. For doing things simply and flexibly, REST does the job.
  • Database — DynamoDB is cheap, scales easily, and needs no maintenance
  • Hapi — battle tested at Walmart, Hapi provides a solid suite of features with…


Why NWB?

Webpack 3 is pretty nice. However, NWB makes it even nicer. It makes doing React and Preact apps so easy:

nwb init react-app
yarn start

The main advantage over something like create-react-app (also fantastic) is that you can customize the Webpack configuration. There’s no ejection required, you just add what you want to NWB’s configuration.

However, it doesn’t yet have support for Elm. Which would be great, because Elm by default doesn’t minify its outputted JS, or allow external CSS to be used easily. Here’s how to get it working with Webpack:

Setting up NWB + Elm

Install nwb. …


Lokum hosted on Now is a potent mixture for websites. You get the flexibility and ease of content management in Trello combined with development best practices of static page caching and HTTPS.

Above is a picture of speed testing my own website. All of the HTML is generated using Lokum, turning a Trello board containing Markdown and #hashtag annotated Lofi content into lean HTML tags.

The CSS is hosted from CodePen, which allows me to iterate quickly on changes with its live preview. This comes to only 11.2KB in page weight — a size ideal for slower mobile connections.

Lokum…


Marco Arment asked What if the iPad isn’t the future of computing?

I think it is hard to see what potential iPad could have when Apple is hamstringing its software story.

Third parties

Third-party developer momentum is embarrassing on the iPad. Support through Universal apps is often an after thought, added minimally through Xcode and shipped as the black sheep alongside the iPhone experience.

Independent iPhone app developers have had the confidence kicked out of them in the past few years, as the gold rush faded into delirious panning for rare gold fragments.

The iPad was further demoted from priority lists around…


I recently have worked on projects, some using Node.js 7, and others requiring the older version of 4. (It was released in September 2015. So old…)

So, I installed NVM, the Node Version Manager, and it worked a treat. I could now switch between version 4 and 7 at will. (I use the fish shell, so had to install some extras to get it working with that)

Using .nvmrc files within a project, nvm can automatically pick up which Node.js version you need. …


Siri can become a platform. A place where you can talk to friends, family, and colleagues all in the one medium, a medium aided by services.

Not a just mail chute on the side of your device you open to whisper a question or slip through a note and then wait for a response back.

The world Siri lives in needs to involve communication of all sorts. It needs to involve the app you are currently using, not remove you from it. …


Early versions of OS X had issues. Functionality was limited, some things were flaky, some of the user interface was questionable.

However, on the whole, OS X was a bold new move. The operating system had care that competitors didn’t have, and didn’t even want to have.

The Apple-built apps that came with a new Mac had class. They were trying to make every day things, such as organising photos and writing email, simple and elegant. Your use of them was aimed to be as delightful as possible.

Questions had been asked in their design — What if this happens…

Patrick Smith

@concreteniche · Product designer for the web & Mac. Loves experimenting with React, Swift, and UX tools.

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