melanieseltzer

JavaScript Packaging

Compiling everything I've learned about about JavaScript packaging in one place.

Definitions

"ECMAScript Modules" or "ES modules" or "ESM":

• The official standard format.
• Works in many modern browsers.

melanieseltzer

import { AppContext } from '../../context';

export default function Square() {
  // Use AppContext as the context and pull off state
  const { state } = useContext(AppContext);

  // Pull off specific state from the context
  const { width, height, activeColor } = state;

  return (

melanieseltzer

import React from 'react';
import { AppContext } from 'path/to/context';

export default function Controls() {
  // Use AppContext as the context and pull off state and dispatch
  const { state, dispatch } = React.useContext(AppContext);

  // Create the functions to update state, using the dispatch method passed in
  // from the provider
  const setWidth = value => dispatch({ type: 'width', payload: value });

melanieseltzer

import React from 'react';

// Create the context as AppContext
const AppContext = React.createContext();

// Define some initial state
const initialState = {
  width: 320,
  height: 250,
  activeColor: '#F44336'

melanieseltzer

import { AppContextProvider } from 'path/to/Context';

// Import our other components
import Controls from 'path/to/Controls';
import Square from 'path/to/Square';

export default function App() {
  return (
    // Wrap the Provider around our components. Nice and clean!
    <AppContextProvider>

melanieseltzer

for file in *.jpg; do mv $file ${file:l}; done

melanieseltzer

Convert underscores to dashes in filenames. Can be used on any filetype, not just jpg.

for i in *.jpg; do
  [[ "$i" = *_* ]] && mv -nv -- "$i" "${i//_/-}"
done

melanieseltzer

const hero = document.querySelector('.hero');
const nav = document.querySelector('.nav');
const navTop = hero.offsetHeight;

const stickyNav = () => {
  if (document.body.clientWidth > 768) {
    if (window.scrollY >= navTop) {
      nav.classList.add('fixed');
    } else {
      nav.classList.remove('fixed');

melanieseltzer

Object-fit fix in IE using Modernizr

IE 11 and below does not support the CSS property object-fit, so this is a workaround using Modernizr. We are swapping to use a background image if Modernizr detects object-fit isn't supported in the browser.

Step 1 - Include Modernizr with Object Fit

https://modernizr.com/download?objectfit-setclasses&q=objec

Generate the download and include it on your page.

melanieseltzer

Project Title

An intro paragraph about your project.

👉 Getting Started

Prerequisites

• List