Postman Learning

• Gatsby
• React
• JavaScript
• Web Dev
• API
• NPM
• General Programming Questions

Gatsby

🎥 Gatsby Tutorial

• React-based open-source framework for creating websites and apps.
• Static site generator (SSG)
• Uses a combination of React & GraphQL

React

• What is React?
• Why use React?
• Components
• State
• Hooks

Styled Components in React

• 🎥 Styled Components Crash Course & Project
• styled-components allows us to write CSS in JS in an elegant and reusable way

dangerouslySetInnerHTML

• React’s replacement for using innerHTML in the browser DOM.
• Resources: React Doc

Typechecking with PropTypes - 📖 React doc

• 🎥 Learn React PropTypes In 13 Minutes
• When writing React, a common bug - accidentally pass incorrect props to component, and it is difficult to track down these bugs
  • As an example: age="15" should be a number, but we pass in as a string, ${age + 5} would return 155 instead of 20
• With PropTypes: easily define exactly what the props should be for a component, you will see errors in inspect when props are incorrect

React fragments vs div containers

• Component returns multiple elements, to avoid adding extra nodes to the DOM, <React.Fragment> let you group a list of children.

JavaScript

JavaScript

• JavaScript Engine: As the translator between your computer and JS file.

How to Choose the Right NPM Package for Your Project? 📖 Read

Web Dev

How Does a Trailing Slash Impact SEO? 📖 Read

• If there are two separate pages with the same content – one with a slash at the end of the URL and one without – the two separate pages will be identical, resulting in duplicate content. Google has a hard time figuring out which of the two is the original source, and the search engine crawlers are left confused.

Everything You Need to Know About rel=”noopener noreferrer” 📖 Read

• The noopener is needed to enhance the security of your website and prevent other websites from gaining access to your page (through the browser session).
• The noreferrer is used to protect referral information from being passed to the target website and this also hides referral traffic in Google analytics.

Be Sure to Provide Titles for Iframes (for accessibility) 📖 Read

• When an iframe is given a meaningful title, screen reader users can pull up a list of frames and identify the content or purpose of the iframe based on its title.

Increasing Headline Clicks with Eyebrow Text 📖 Read

• Eyebrow text is a descriptive keyword or phrase placed above the main headline and blurb.

API

OpenAPI 3.0 📖 Docs 🎥 How to Design and Document APIs

• The latest version of the OpenAPI Specification - an open source format for describing and documenting APIs

  A simple OpenAPI 3.0 specification

  openapi: 3.0.0
  info:
    version: 1.0.0
    title: Sample API
    description: A sample API to illustrate OpenAPI concepts
  paths:
    /list:
      get:
        description: Returns a list of stuff              
        responses:
          '200':
            description: Successful response
  

API design

• The process of developing Application Programming Interfaces (APIs) that expose data and application functionality for use by developers and users

Differences Between API Documentation, Specifications, and Definitions

• All related, but different entities, each serves a crucial purpose
• API Documentation: Instructions for developers and API consumers how to use the API
• API Specification: Provides a broad understanding of the functionality of the API and the expected results
• API Definition: Machine consumption of an API, providing machine-readable format for use

REST vs. SOAP

• REST and SOAP are 2 different approaches to online data transmission, both define how to build APIs

API Testing

• API (Application Programming Interface) is the code that enables communication between two software programs
• API Testing ensures APIs meet functionality, security, performance and reliability expectations
• Making requests to one or more API endpoints, comparing the response with expected results

NPM

UUID

• uuid
• Generate unique identifier for your React app.

React Share

• react-share
• Social media share buttons and share counts for React.

General Programming Questions

1. What is Linting? 📖 Read

• Linting is the process of checking the source code for programmatic and stylistic errors
• Done by using a lint tool (a.k.a Linter)
• ESLint for JavaScript

Git

Git Commands Explained with Cats! 🐱 📖 Read