JavaScript

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.

ES6 Arrow functions

by

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

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.

JavaScript Modules

by

Updated: 06 December 2023

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

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/