All things JavaScript
Create a React app with MongoDB and Firebase authentication hosted on Google Cloud Platform
At the end of this course you would have created a web application that can list things, in this case companies. Authenticated users can rate these companies by clicking on stars and they can comment on them. Feel free to practice by adding features…
Create a Jamstack app with Netlify, Astra DB and Tailwind CSS
Objectives At the end of this course you would have created a primitive todo React app which integrates with a DataStax Astra DB via Netlify serverless functions and was made pretty with Tailwind CSS. 👌 Follow along This course is a spin-off using t…
How to read Node.js environment variables
Running a Node app is simple. Sometimes you want to add environment variables that either contain sensitive information or are contextual to the environment you want to run your app on. You can set them the moment the process is started. Imagine hav…
WikipediaHow to show filenames in code snippets in Gatsby in Markdown
With the gatsby-remark-code-titles plugin. Custom title gets injected and then needs to be styled. Example from docs: Usage This plugin will parse the Markdown AST, pluck the title, and then “clean” the code snippet language for further processing. …
Utility to fix npm dependencies
There is a utility called npm-check that offers the ability to interactively update outdated, incorrect or unused dependencies: Take a look at the switches. It offers way more than just that. Usage Switches Switch Description -u, --update Interactiv…
#/media/File:Npm-logo.svg){kind=logo}
WikipediaWhy you will see the error 'Loading chunk \d+ failed'
I know of the following reasons why chunks cannot be downloaded: Network errors Inspect the network in the browser dev tools to find out more information about the errors. Resources not found They don't exist in the correct directory (output > publi…
WikipediaHow to minify CSS files via CopyWebpackPlugin for Webpack5
Goal Emit minified vendor-based CSS files on build. Dependencies Elaborate I have a few unminified vendor CSS files that I simply want to minify and copy to an output directory. These files were not being transformed by terser probably due to the ch…
Make sure Git knows about case-sensitive changes to your file names
It's only peculiar if you don't understand it and for a while, I didn't understand it. It builds locally but then can't resolve component on Netlify. It started with me migrating my blog from Gatsby 3 to 4. I had neglected my blog for months so my e…
How to sort your package.json dependencies
is short hand for and . "example" is just the name of a package. You can use it verbatim because it will most likely not be in your package.json. Your packages are sorted by running npm remove even if the package "example" doesn't exist. Thanks to …
Name CSS Split Chunks using MiniCssExtractPlugin
React: 17.0.2 Webpack: 5.67.0 Webpack CLI: 4.9.1 mini-css-extract-plugin 2.5.3 Snippet Objective Bust the cache for CSS files that are emitted on build using Webpack 5 with Split Chunks. Set up one or more CSS files inside a React component. A sing…
How to sort stories alphabetically in Storybook (6.2)
storybook.js.orgHow to reference a local Webpack npm package
With the help of this question and answer from Stack Overflow: Install the local npm package using the file path. Check node_modules to see the installed package. (or depending on the requirements) && (in this example the package exists in the pare…
Use React hooks inside an MDX story in Storybook
Use React hooks inside an MDX story in Storybook
Originally posted on dev.to A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support. MDX is a standard file format that combines Markdo…