Time is a real mess. I never liked how Ruby and JS deal with time, though Rails always gets a gold star from me for smoothing out a lot of common issues with time and dates. The Ruby on Rails Time API made it pretty easy to calculate and format dates with methods that were sort of the best of Ruby - readable in plain English and easy to remember.
The Solution
Just wanted to note the wonderful datepickers from our friends at Airbnb. If you include the Moment.js library, the legacy but still required react-addons-shallow-compare, and Airbnb's react-dates, you got yourself one fine looking React Datepicker.
This is the first component I have been able to deploy to a project that I really loved so I wanted to share it here.
The react-dates documentation is stellar.
Slim Date Pickins
I am making an expense tracking app based on the excellent tutorial from Andrew Mead. He has a great website, too. This guy really has a knack for explaining concepts well and unlike most tutorials, he doesn't gloss over hard parts with hand-wavy "uh yeah this is weird but just type it" moments. I need to understand everything and his courses scratch that itch.
// FILE: posts/scss-partials-gatsby.md
title: "SCSS Partials Importing with Gatsby" date: "2018-05-01" excerpt: "How to use SCSS partials and imports in Gatsby for better style organization and maintainability." slug: "scss-partials-gatsby"
If you want to use a mix of inline and .scss files like me because the inline syntax is kinda verbose at times, and you miss the shorthands of .scss, well you are in luck, because I finally figured out how to import using @import. By 'I figured out' I mean I found a Stack Overflow post and took a 70 hour React tutorial that more or less set the table.
Three Easy Steps
1. Install gatsby-plugin-postcss-sass
This takes a yarn add gatsby-plugin-postcss-sass and some config in the gatsby-config file:
plugins: [
{
resolve: `gatsby-plugin-postcss-sass`,
options: {
postCssPlugins: [],
precision: 8,
},
},
];
2. Create a src/styles Directory
Create a src/styles directory with a main.scss file at the root importing the other files in whatever structure you see fit.
3. Import into layouts/index.js
Import this main .scss file into ./src/layouts/index.js - this was the tricky part for me, as I had been thinking it was going in the ./src/html.js file as you would throw this in app.js in React.
That is not correct and it makes somewhat more sense to have this go in a layouts file, as it gives you more flexibility if you have multiple layouts but also just makes more sense as a logical grouping even if it is a departure from the norms of React.
Reference
Here is the Stack Overflow post that was helpful: Implementing a CSS reset in Gatsbyjs