From 0386cf9a5e6cd02ccfe1ff70682ae6c14838bc6a Mon Sep 17 00:00:00 2001 From: Tim Smith Date: Thu, 9 Dec 2021 23:02:05 -0600 Subject: [PATCH 1/2] Started work on first MUI post. --- .../2021-11-29---react-101-the-basics.md | 2 +- ...27---first-experiences-with-material-ui.md | 41 +++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/posts/2021-12-27---first-experiences-with-material-ui.md diff --git a/src/posts/2021-11-29---react-101-the-basics.md b/src/posts/2021-11-29---react-101-the-basics.md index 83a12e0..5e630f3 100644 --- a/src/posts/2021-11-29---react-101-the-basics.md +++ b/src/posts/2021-11-29---react-101-the-basics.md @@ -116,7 +116,7 @@ These libraries allow you to establish a path to use in the url and a component Along with React, Facebook developed a tool for testing JavaScript called [Jest](https://jestjs.io/). When used by itself, Jest is primary good for testing logic. It doesn't handle any sort of DOM rendering or snapshot testing, so another library is needed for that. The two most commonly used tools for DOM testing are [Enzyme](https://enzymejs.github.io/enzyme/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). They both do pretty much the same thing, so it's really just a matter of preference. For end-to-end testing, the most commonly used library is [Cypress](https://www.cypress.io/). #### Styles -In addition to normal css, there are [different tools which can be used for styling](/blog/how-to-use-styles-in-a-react-js-application/) in your React applications. [Styled Components](https://styled-components.com/) is a popular option and allows you to write your styles directly in your JavaScript code. [Sass](https://sass-lang.com/) is another commonly used option which has many benefits of css with some "special sauce" on top. Of course, you can also use tools such as Bootstrap, Material UI, etc. +In addition to [normal css](/blog/using-variables-in-css), there are [different tools which can be used for styling](/blog/how-to-use-styles-in-a-react-js-application/) in your React applications. [Styled Components](https://styled-components.com/) is a popular option and allows you to write your styles directly in your JavaScript code. [Sass](https://sass-lang.com/) is another commonly used option which has many benefits of css with some "special sauce" on top. Of course, you can also use tools such as Bootstrap, Material UI, etc. ## Conclusion As you can see, React has a lot to offer when building front-end applications. It is one of the most in-demand skills for a developer seeking a job. There is a huge community and as a result tons of options when building out a project. diff --git a/src/posts/2021-12-27---first-experiences-with-material-ui.md b/src/posts/2021-12-27---first-experiences-with-material-ui.md new file mode 100644 index 0000000..230fe79 --- /dev/null +++ b/src/posts/2021-12-27---first-experiences-with-material-ui.md @@ -0,0 +1,41 @@ +--- +title: First Experiences with Material UI +description: Sample description +image: gatsby-astronaut.png +tags: [react, mui] +published: false +--- + +I have recently started learning and playing around with [Material UI](https://mui.com/) for an upcoming project. In this post, I'll be talking about my first experiences with it and some of the benefits and challenges I've found while getting started. + + + +## What is Material UI? +Before we can talk about the Material UI (or MUI) library, we should talk about [Material design](https://material.io/design/introduction). According to the website, "Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web." + +> Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web. + +In other words, Material is a set of ideas and standards to help make things using the system more consistent and accessible. The Material UI library takes this concept and provides prebuilt React components using this design system along with the ability to customize the styles. + +Since I have been learning more about accessibilty and trying to take a more accesssibility first approach to building user interfaces, the idea that this comes built-in to the library (for the most part) is very appealing. Now that you know more about what MUI is, let's get into building things with it! + +## First steps: Installation +Installing MUI is just like installing any other library using NPM or Yarn. It does have some dependencies which need to be installed alongside it. By default, MUI uses [Emotion](https://emotion.sh/docs/introduction) for styling. To get MUI and Emotion installed in your project, you can run this command in your terminal: + +```bash +npm i @mui/material @emotion/react @emotion/styled +``` + +Personally, I am more comfortable with [Styled Components](https://styled-components.com/) than Emotion so when the docs mentioned the ability to [use Styled Components](/blog/how-to-use-styles-in-a-react-js-application/) instead, so I initially decided to try that. It did not go well. + +At first, I was [using Parcel to bundle my package](/blog/parcel-js-who-says-bundling-needs-to-be-difficult/) since it was quick and easy to set up for a playground. There was not any configuration for this [in the documentation](https://mui.com/guides/styled-engine/) and since it's just an exploration into MUI didn't feel worth the trouble to figure out the proper configuration. As a result, I scrapped Parcel and started looking into Create-React-App and Next since examples were provided for those. + +Create React App proved more difficult than I expected to configure because for some reason the webpack config change wasn't working. Next I tried... well... Next. I got it up and running without too much trouble and started building. After having more discussions with others working on the project, we opted to just go with the default Emotion configuration. + +Knowing this, it was very easy to spin up a Create React App environment and just run the command above to install my packages. There are also icons which can be used and to install this you will have to run the following command. + +```bash +npm i @mui/icons-material +``` From d426dafed16ddb3bf70de841eadccf84bfe3b4a7 Mon Sep 17 00:00:00 2001 From: Tim Smith Date: Sat, 11 Dec 2021 07:25:10 -0600 Subject: [PATCH 2/2] Upgraded to v4. Fixed Note error. Removed unneeded dependencies. --- gatsby-config.js | 38 +- package.json | 34 +- src/components/blog-list/blog-list.i.ts | 24 +- src/components/blog-list/blog-list.tsx | 6 +- src/components/footer/footer.tsx | 4 +- src/components/header/header.tsx | 4 +- src/components/sharing/sharing.i.ts | 5 + src/components/sharing/sharing.tsx | 30 +- src/components/socials/socials.tsx | 4 +- src/components/tags/tags.tsx | 4 +- src/pages/404.md | 1 - src/pages/uses.md | 6 - ...creating-a-basic-server-with-express-js.md | 3 +- ...0-02-13---using-mongodb-with-express-js.md | 5 +- src/templates/blog.tsx | 1 - src/templates/tag.tsx | 1 - yarn.lock | 8359 ++++++----------- 17 files changed, 2829 insertions(+), 5700 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index ee8a8b6..63c7caf 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -32,9 +32,7 @@ module.exports = { `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, - // `gatsby-plugin-gatsby-cloud`, `gatsby-plugin-sitemap`, - `gatsby-plugin-netlify`, `gatsby-plugin-catch-links`, `gatsby-plugin-styled-components`, `gatsby-plugin-react-axe`, @@ -101,7 +99,7 @@ module.exports = { }, }, { - resolve: `gatsby-plugin-feed-mdx`, + resolve: `gatsby-plugin-feed`, options: { query: ` { @@ -148,10 +146,6 @@ module.exports = { `, output: '/rss.xml', title: "Tim Smith's RSS Feed", - // optional configuration to insert feed reference in pages: - // if `string` is used, it will be used to create RegExp and then test if pathname of - // current page satisfied this regular expression; - // if not provided or `undefined`, all pages will have feed reference inserted match: '^/blog/', }, ], @@ -178,22 +172,9 @@ module.exports = { { resolve: 'gatsby-plugin-local-search', options: { - // A unique name for the search index. This should be descriptive of - // what the index contains. This is required. name: 'posts', - - // Set the search engine to create the index. This is required. - // The following engines are supported: flexsearch, lunr engine: 'flexsearch', - - // Provide options to the engine. This is optional and only recommended - // for advanced users. - // - // Note: Only the flexsearch engine supports options. engineOptions: 'speed', - - // GraphQL query used to fetch all data for the search index. This is - // required. query: `{ posts: allMdx( filter: { @@ -218,25 +199,8 @@ module.exports = { } } `, - - // Field used as the reference value for each document. - // Default: 'id'. ref: 'id', - - // List of keys to index. The values of the keys are taken from the - // normalizer function below. - // Default: all fields index: ['title', 'description', 'tags', 'slug', 'body'], - - // List of keys to store and make available in your UI. The values of - // the keys are taken from the normalizer function below. - // Default: all fields - // store: ['id', 'path', 'title'], - - // Function used to map the result from the GraphQL query. This should - // return an array of items to index in the form of flat objects - // containing properties to index. The objects must contain the `ref` - // field above (default: 'id'). This is required. normalizer: ({ data }) => data.posts.nodes.map(node => ({ ...node, diff --git a/package.json b/package.json index 3c83fbd..0aec7b1 100644 --- a/package.json +++ b/package.json @@ -16,30 +16,26 @@ "@mdx-js/react": "^1.6.22", "babel-plugin-styled-components": "^2.0.1", "dayjs": "^1.10.7", - "gatsby": "^3.6.2", + "gatsby": "^4.3.0", "gatsby-image": "^3.11.0", - "gatsby-plugin-catch-links": "^3.7.1", - "gatsby-plugin-feed": "^3.7.1", - "gatsby-plugin-feed-mdx": "^1.1.0", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-google-analytics": "^3.7.1", - "gatsby-plugin-google-gtag": "^3.7.1", - "gatsby-plugin-image": "^1.6.0", + "gatsby-plugin-catch-links": "^4.3.0", + "gatsby-plugin-feed": "^4.3.0", + "gatsby-plugin-google-analytics": "^4.3.0", + "gatsby-plugin-google-gtag": "^4.3.0", + "gatsby-plugin-image": "^2.3.0", "gatsby-plugin-local-search": "^2.0.1", "gatsby-plugin-mailchimp": "^5.2.2", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-mdx": "^2.7.1", - "gatsby-plugin-netlify": "^3.7.1", - "gatsby-plugin-offline": "^4.6.0", + "gatsby-plugin-manifest": "^4.3.0", + "gatsby-plugin-mdx": "^3.3.0", + "gatsby-plugin-offline": "^5.3.0", "gatsby-plugin-react-axe": "^0.5.0", - "gatsby-plugin-react-helmet": "^4.6.0", - "gatsby-plugin-sharp": "^3.6.0", - "gatsby-plugin-sitemap": "^4.3.1", - "gatsby-plugin-styled-components": "^4.14.0", + "gatsby-plugin-react-helmet": "^5.3.0", + "gatsby-plugin-sharp": "^4.3.0", + "gatsby-plugin-sitemap": "^5.3.0", + "gatsby-plugin-styled-components": "^5.3.0", "gatsby-remark-external-links": "^0.0.4", - "gatsby-remark-images": "^5.4.1", - "gatsby-remark-prismjs": "^5.4.1", - "gatsby-remark-twitter-cards": "^0.6.1", + "gatsby-remark-images": "^6.3.0", + "gatsby-remark-prismjs": "^6.3.0", "gatsby-remark-unwrap-images": "^1.0.2", "gatsby-source-filesystem": "^3.6.0", "gatsby-source-graphql": "^3.7.1", diff --git a/src/components/blog-list/blog-list.i.ts b/src/components/blog-list/blog-list.i.ts index b641287..87484da 100644 --- a/src/components/blog-list/blog-list.i.ts +++ b/src/components/blog-list/blog-list.i.ts @@ -1,13 +1,15 @@ +export interface PostTeaser { + id?: string; + excerpt: string; + frontmatter: { + title: string; + published?: boolean; + }; + fields: { + slug: string; + }; +} + export interface BlogListProps { - posts: { - id: string; - excerpt: string; - frontmatter: { - title: string; - published?: boolean; - }; - fields: { - slug: string; - }; - }[]; + posts: PostTeaser[]; } diff --git a/src/components/blog-list/blog-list.tsx b/src/components/blog-list/blog-list.tsx index 6e0eb39..a25311c 100644 --- a/src/components/blog-list/blog-list.tsx +++ b/src/components/blog-list/blog-list.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { Link } from 'gatsby'; import { BlogListItems, BlogPost, BlogPostTitle } from './blog-list.style'; -import { BlogListProps } from './blog-list.i'; +import { BlogListProps, PostTeaser } from './blog-list.i'; export const BlogList = ({ posts }: BlogListProps) => { return ( - {posts.map((node, id) => ( - + {posts.map((node: PostTeaser, key: number) => ( + {node.frontmatter.title}{' '} diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index a821b64..a01b3c9 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -26,13 +26,13 @@ export const Footer = () => { return (