Javascript Library

jQuery

by

Updated: 13 December 2023

Get version of jQuery from the console

$().jquery

Document ready

$( document ).ready(function() {
    // Will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
    console.log( "ready!" );
});

// equivalent shorthand version
$(function() {
    // Will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
    console.log( "ready!" );
});

Gatsby

by

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

by

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.

jQuery plugins

by

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.

D3

by

Updated: 08 April 2024

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/