Handy SPA config for Netlify

27 March 2019

Although Netlify out of the box won’t work with single page apps’ routing, it is easy to add. You can configure it to send all /* subpath requests to a single index.html file.

Steps for create-react-app

Here we will be using a create-react-app project. This should be easy to apply to other SPA toolkits.

Add a netlify.toml file to your src folder. In it write:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Edit your package.json file. Find the scripts section.

  “scripts”: {
    …
    "build": "react-scripts build”,
    …
  }

Replace the build rule with three:

    "build": "npm run build:react && npm run build:config",
    "build:react": "react-scripts build",
    "build:config": "cp src/netlify.toml build/netlify.toml",

This rule builds the static assets using create-react-app’s toolkit, then copies the netlify.toml file to this build directory.

That’s it! As long as Netlify is set to run npm run build then this will work. You will be able to visit subpaths and get the same index.html page served for all.

Typed Subatomic Styling: Part 1 — Benefits of TypeScript and CSS

16 March 2019

The benefits of components have been realized with systems such as React and VueJS. Styling these components has a number of approaches, from CSS classes written in SCSS, inline styles, and dynamically generated stylesheets via something like emotion.

Each styling approach has trade-offs in regards to reusability, performance, and developer experience. Also, special considerations often have to be made when doing server-side rendering.

In this post, we’ll explore TypeScript combined with functional CSS. I believe it offers big benefits over the other choices — it’s extremely reusable, fast, and offers a very pleasant developer experience.

Read more…

Categorizing the elements of the modern web

1 March 2019

In the world of the web, what is a web app and what is a website is now often blended. It’s not as simple as written content is a website, and an interactive tool is a web app. Blogs can be interactive, they can provide tools, live searching, etc.

This is a high level overview of what fits where, of which rules apply to what elements. It’s mainly for myself to help me develop tools.

Content vs its Vehicle

Content

  • Navigation (Primary, Sidebar, etc)
  • Markdown
  • Images
  • Video

Site or App itself

  • CSS
  • JavaScript
  • Components
  • Icons

Mutable vs Immutable

Mutable Entities

  • Blog posts
  • Page content
  • Tag assignments
  • Editable Markdown
  • Editable components
  • Sessions
  • Git Repositories
  • Figma documents
  • Trello boards
  • Google docs / spreadsheets

Immutable Values

  • Images
  • Text snippets
  • Tags
  • Timestamps
  • Git Commits
  • Git Trees

Derivable Values

  • Resized and encoded images
  • Minified CSS or JavaScript
  • Rendered Markdown
  • Published components’ code
  • Rendered components
  • Cryptographic hashes

The difference between CSS Grid and Flexbox

26 January 2019