web-journal

Hello this is my collection of web development knowledge that I have accumulated. It contains console tips and tricks, reusable styled components, documentation, and much more.

• Website: https://codenameyau.github.io/web-journal
• Web Resources: https://github.com/codenameyau/web-journal/blob/master/docs/web-resources.md
• Styled Components: https://github.com/codenameyau/web-journal/blob/master/docs/styled-components.md
• Webpack: https://github.com/codenameyau/web-journal/blob/master/docs/webpack.md

Table of Contents

• web-journal
  • Table of Contents
  • Commands
  • Console Tricks
    • Copy variables to clipboard
    • See all event listeners
    • Grab all images from a page
    • Access third-party variables

Commands

# Install dependencies.
yarn install

# Starts the storybook app.
yarn storybook

# Deploys updates on master to gh-pages.
yarn deploy

Console Tricks

Copy variables to clipboard

// Copy variable.
copy(temp1)

// Copy JSON object.
copy(JSON.stringify(temp1))

See all event listeners

getEventListeners(document)

// JSON format.
copy(getEventListeners(document))

Grab all images from a page

Array.from(document.images).map(img => img.src)

// JSON format.
copy(Array.from(document.images).map(img => img.getAttribute('src')).filter(img => !!img))

// List format.
copy(Array.from(document.images).reduce((acc, img) => acc + img.src + '\n', ''))

Access third-party variables

window.frames

Jest

Mock a library implementation.

jest.mock("@auth0/auth0-spa-js", () => {
  return {
    Auth0Client: jest.fn().mockImplementation(() => ({
      logout: jest.fn(),
      loginWithRedirect: jest.fn(),
      getTokenSilently: jest.fn(),
      getUser: jest.fn(),
      getIdTokenClaims: jest.fn(),
      checkSession: jest.fn(),
      handleRedirectCallback: jest.fn(),
    })),
  };
});