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:
from = "/*"
to = "/index.html"
status = 200
Edit your package.json file. Find the scripts section.
"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.
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.
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
- Navigation (Primary, Sidebar, etc)
Site or App itself
Mutable vs Immutable
- Blog posts
- Page content
- Tag assignments
- Editable Markdown
- Editable components
- Git Repositories
- Figma documents
- Trello boards
- Google docs / spreadsheets
- Text snippets
- Git Commits
- Git Trees
- Resized and encoded images
- Rendered Markdown
- Published components’ code
- Rendered components
- Cryptographic hashes
16 February 2019
If you wanted to know more about RGB, sRGB, XYZ, and light, check this amazing interactive article out: https://ciechanow.ski/color-spaces/