JavaScript Archives

Gatsby

11 November 20232 November 2023 by Chris Taylor

Updated: 11 November 2023

https://www.gatsbyjs.com/docs/tutorial/getting-started

A page (React) Component contains all the UI elements for a specific page of a site.
Gatsby automatically creates pages for React components that are the default export of files in the src/pages directory.
A Gatsby plugin adds additional features to a Gatsby site. It is a standalone npm package.
Gatsby plugin library https://www.gatsbyjs.com/plugins

Data Layer

Source plugins pull data from their original location into the Gatsby GraphQL data layer.
Use the GraphiQL endpoint (localhost:8000/___graphql) to explore data in the data layer and design GraphQL queries.
Write GraphQL queries to pull data out of the data layer and into React components.
To pull data into a “building block” component, use the useStaticQuery hook.
To pull data into a page component, use a page query.

React

6 November 20232 November 2023 by Chris Taylor

Updated: 06 November 2023

React is a JS lib used to create user interfaces. With React the UI is broken up into small re-usable pieces called Components.
Components can be created from other from other Components – a pattern is called composition.
A React component is a function that returns a React element.
A React element (written as JSX) is an object that React uses to render DOM elements.

Gatsby CLI

2 November 202318 September 2023 by Chris Taylor

Updated: 02 November 2023

Install via npm

npm install -g gatsby-cli
gatsby --version
gatsby --help

Create a new project from a template

gatsby new root_path_here https://github.com/gatsbyjs/gatsby-starter-default

Run the development server

gatsby develop

Browse to:
http://localhost:8000
http://localhost:8000/___graphql

State and Props

11 December 2022 by Chris Taylor

Updated: 11 December 2022

“State is like props, but private and only controlled by the component …”

ES6 Arrow functions

11 December 2022 by Chris Taylor

Updated: 11 December 2022

In regular functions the this keyword represented the object that called the function.

With arrow functions, the this keyword always represents the object that defined the arrow function.

jQuery plugins

3 December 202210 September 2022 by Chris Taylor

Updated: 10 September 2022

The javascript in a jQuery plugin like Bootstrap expects there to be a global jQuery variable that it can modify, for example by adding a tooltip() method.

JavaScript Modules

13 December 202224 October 2021 by Chris Taylor

Updated: 13 December 2022

ECMA: European Computer Manufacturers Association.

ECMAScript was created to standardize JavaScript. ES6 is the 6th version of ECMAScript, published in 2015.

Synonyms:
ES2015
ECMAScript 2015
ECMAScript 6
ES6
ES 6th Edition

ES Module / ES6 Module / ‘JavaScript modules’ syntax

import
export

CommonJS Module syntax

require
exports

ES6 modules are only practical from Node.js v10 onwards (released in April 2018). All mainstream browsers and Node.js from mid 2018 support ES6 modules.

D3

3 December 20225 July 2021 by Chris Taylor

Updated: 16 September 2021

Bind data to all p elements in the DOM, even if they don’t exist yet.

    d3.select("body") // Find body, pass reference to next step in chain.
        .selectAll("p") // Selects all p in DOM. Returns empty selection. 
        .data(mydata) // Parse and count data. Following methods called n times.
        .enter() // Creates n new placeholder elements apparently.
        .append("p") // Swap placeholder for p element.
        .text("Hello World"); // Insert text value to p.

https://bost.ocks.org/mike/join/