Skip to content

Latest commit

 

History

History
149 lines (139 loc) · 5.28 KB

2021_08_25.md

File metadata and controls

149 lines (139 loc) · 5.28 KB

  • DONE [[Python]] [[pyenv]] The workflow for managing python environments: collapsed:: true done:: 1630021189735

    1. Installing latest python version in pyenv:
```bash
# First check list of pyenv versions available and your versions
pyenv install --list

pyenv versions

# Choose version and install
pyenv install -v 3.9.6

# If versions not found, try updating pyenv with 
brew update && brew upgrade pyenv
```
  • TODO [[git]] If you want your local branch to exactly match the remote branch, this can be done in 2 steps: todo:: 1629909025605 collapsed:: true 
    git fetch origin
git reset --hard origin/BRANCH_NAME
    If you want to save your current branch's state before doing this (just in case), do the following: 
    git commit -a -m "Saving my work, just in case"
git branch my-saved-work
  • DONE [[Nextjs]] If you need any assistance with integrating other softwares or just to see design patterns with Nextjs, go to the vercel nextjs examples link here done:: 1630122012802
  • DONE [[Nextjs]] Basic folder structure of a Nextjs project medium article done:: 1630121027182
  • DOING [[Google Analytics]] Steps to integrate with [[Nextjs]] & ask for consent: :LOGBOOK: CLOCK: [2021-09-07 Tue 09:39] :END: doing:: 1630124385027 collapsed:: true
  • TODO Handling [[forms]] with [[Netlify]] easy forms
  • DONE [[Nextjs]] [[SEO]] Setting SEO tags in the Head component collapsed:: true done:: 1630121275226 Nextjs gives us a Head tag where we can specify page title, description, open graph tag, and icon links. This is inserted as such: 
    import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>My Clothing Store</title>
        <meta name="description" content="Buy things at my store!" />
        <meta property="og:title" content="My Clothing Store" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      <main></main>
      
      <footer></footer>
    </div>
  )
}
  • DONE [[Nextjs]] [[SEO]] Dynamic SEO Meta Tags Tutorial collapsed:: true done:: 1630121368065

    • This is a sample productsID page.

      The folder structure is:
    • pages
      • products
        • [productId].js
      • _app.js _document.js index.js
    • This is a look into the [productId].js file where the SEO meta tags are dynamically created:
    • import Head from 'next/head';
import styles from '../../styles/Home.module.css';

export default function Product({ productId, title }) {
  return (
    <div className={styles.container}>
      <Head>
        <title> { title } - My Clothing Store</title>
        <meta name="description" content={`Learn more about ${title}`} />
        <meta property="og:title" content={`${title} - My Clothing Store`} />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>{title}</h1>
        <p>Product ID: {productId}</p>
      </main>
    </div> 
  )
}

export async function getStaticProps({ params = {} } = {}) {
  return {
    props: {
      productId: params.productId,
      title: `Product ${params.productId}`
    }
  }
}

export async function getStaticPaths() {
  const paths = [...new Array(5)].map((i, index) => {
    return {
      params: {
        productId: `${index + 1}`
      }
    };
  });
  return {
    paths,
    fallback: false,
  };
}
  • DONE Use these websites as a reference for useful [[SEO]] tags
  • DONE [[SEO]] To improve your SEO performance use the following tools: collapsed:: true
    • Google Search and find any potential site crawling errors use Google Search Console
    • web.dev will give you a full report of your site where it measures:
      • Performance
      • Accessibility
      • Best Practices
      • SEO
  • DONE [[Nextjs]] Give an intro to [[Framer Motion]] how to: collapsed:: true done:: 1630124209457
    • Install it
    • Use it with components
    • Also, see if there are providers for Framer that will allow easy animations when wrapping a component
  • DONE [[SEO]] Meta Description Examples That Get Clicks
  • TODO Find out how to only use [[Google Analytics]] if consent to cookies is given. Make the button to allow all cookies attractive and easier to click than opting out.