Snippets

Copy
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /* This is the standardized property now, but has slightly less support */
  /* gap: 1rem */
}

Copy
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Copy
.not-full-but-bigger {
  margin: auto calc(50% - 50vw);
  width: 60vw;
  transform: translateX(calc(50vw - 50%));
}

Copy
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Copy
.carousel {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.carousel .item {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: center;
}
/* hide horizontal scroll bar Chrome/Safari */
.carousel::-webkit-scrollbar-track,
.carousel::-webkit-scrollbar,
.carousel::-webkit-scrollbar-thumb {
  width: 0 !important;
}
.carousel {
  /* Firefox */
  scrollbar-width: none;
  /* IE */
  ms-overflow-style: none;
}

Copy
/* image, position, size and repeat */
body {
  background: url(sweettexture.jpg) top center / 200px 200px no-repeat;
}

Copy
.image-placeholder {
  background: #eff0f2 url('./icons/logo.svg');
}
/* alternatively we can define colour and image seperately for the same effect */
.image-placeholder {
  background-color: #eff0f2;
  background-image: url('./icons/logo.svg');
}

Copy
li {
  // for the underline to "skip" the descenders
  text-shadow: 1px 1px var(--primary-background), 1px -1px var(--primary-background),
    -1px 1px var(--primary-background), -1px -1px var(--primary-background);
}
.current-menu-item {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    bottom: 1px;
    background: var(--primary-foreground);
    z-index: -1;
  }
}

Copy
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

Copy
a {
  text-decoration: none;
  &:hover {
    text-decoration: revert;
  }
}

Copy
const TextLink = styled.a`
  /* Standard styles: */
  color: blue;
  text-decoration: none;
  /* Styles when rendered inside a quote: */
  ${QuoteContent} & {
    color: black;
    text-decoration: revert;
  }
`;

Copy
.stack {
  --space: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}
.stack > * + * {
  margin-top: var(--space);
}

Copy
.dropdown {
  opacity: 0;
  transition: opacity 400ms;
  transition-delay: 300ms;
}
.dropdown-wrapper:hover .dropdown {
  opacity: 1;
  transition: opacity 100ms;
  transition-delay: 0ms;
}

Copy
.box {
  animation: slide-in 1000ms ease-out both;
  animation-delay: 500ms;
}

Copy
git branch -vv | grep 'origin/.*: gone]' | awk '{print $1}' | xargs git branch -d

Copy
git rm -r --cached .

Copy
# for when it's too hard to think of a message
git stash
# to make it clearer what each stash is
git stash save "optional message for yourself"
# apply the latest stash (I tend to use this the most)
git stash apply stash@{0}
# view a list of your stashes
git stash list

Copy
var { src, dest, series, watch } = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
const rename = require('gulp-rename');
let scss = () => {
  return src('./sass/main.scss')
    .pipe(sass())
    .pipe(rename('style.css'))
    .pipe(dest('./', { overwrite: true }));
};
let editorStyles = () => {
  return src('./sass/editor.scss')
    .pipe(sass())
    .pipe(rename('gutenberg-editor-styles.css'))
    .pipe(dest('./styles', { overwrite: true }));
};
let server = () => {
  return browserSync.init({
    proxy: '<http://localhost:8888>',
  });
};
let reload = (done) => {
  browserSync.reload();
  done();
};
watch(['**/*.scss'], series(scss, editorStyles, reload));
watch(['**/*.js', '**/*.php'], reload);
exports.scss = scss;
exports.server = server;
exports.default = series(scss, editorStyles, server);

Copy
<details>
  <summary>What?</summary>
  Stay Home Stay Safe!
</details>

Copy
<a
  href="<https://twitter.com/CollierAdam>"
  target="_blank"
  rel="noopener noreferrer"
>
  DM me on Twitter.
</a>

Copy
const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );

Copy
const data = { foo: 42, bar: 1337 }; // 🐌
const data = JSON.parse('{"foo":42,"bar":1337}'); // 🚀

Copy
// This method accepts one argument to choose the depth of the flattening
const multiDimensionalArray = [
  [1, 2],
  [3, 4],
  [5, 6],
];
const flattenedArray = multiDimensionalArray.flat(); // [1, 2, 3, 4, 5, 6]

Copy
const item = {
  id: 1,
  price: 50,
  image: 'item.jpeg',
};
const { id, ...item2 } = item;
// now item 2 doesnt have an id property
console.log(item2);

Copy
// Instead of something like
const city = user && user.address && user.address.city;
// We can do
const city = user?.address?.city;

Copy
document.addEventListener('DOMContentLoaded', function () {
  // Handler when the DOM is fully loaded
});

Copy
myArray.find((x) => x.id === '45').author;

Copy
// Child elements are usually a HTMLCollection (which we can't map over)
// So we need to convert it to an array first
Array.from(element.children).map((child) => {
  // by setting to true we grab the whole subtree too
  let clonedChild = child.cloneNode(true);
  element.appendChild(clonedChild);
});

Copy
export const decodeHtmlEntities = (html) => {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = html;
  let decodedHTML = textArea.value;
  textArea.remove();
  return decodedHTML;
};

Copy
find . -name "node_modules" -type d -prune -print | xargs du -chs

Copy
find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \\;

Copy
npx npm-check -u

Copy
# install globally
npm i -g yalc
# publish package locally
yalc publish
# publish and update all projects using that yalc store
yalc publish --push
# add your local package as a dependency
yalc add my-package
# (This will change/add the package location in your package.json)
# remove it from / revert your package.json
yalc remove my-package

Copy
nvm install node

Copy
nvm list

Copy
nvm install 6.14.4 # or 10.10.0, 8.9.1, etc

Copy
nvm alias default node

Copy
sh -c "$(curl -fsSL <https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh>)"

Copy
# lets cd into our custom themes directory
cd ~/.oh-my-zsh/custom/themes
# clone the theme
git clone <https://github.com/geometry-zsh/geometry>

Copy
ZSH_THEME="geometry/geometry"

Copy
# let's cd into our custom plugins directory
cd ~/.oh-my-zsh/custom/plugins
# clone the zsh-syntax-highlighting plugin
git clone <https://github.com/zsh-users/zsh-syntax-highlighting.git> ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
# clone the zsh-nvm plugin
git clone <https://github.com/lukechilds/zsh-nvm> ~/.oh-my-zsh/custom/plugins/zsh-nvm
# clone the zsh-autosuggestions plugin
git clone <https://github.com/zsh-users/zsh-autosuggestions> ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Copy
plugins=(
    git
    zsh-syntax-highlighting
    zsh-autosuggestions
    zsh-nvm
)

Copy
# prevent percentage prompt when first open
unsetopt PROMPT_SP

Copy
cd ~/.oh-my-zsh/custom/themes/geometry
# open vs code
code .
# find this line in geomatry.zsh
geometry::clear_title() { print -n '\\e]0;%~\\a'; }
# and amend to
geometry::clear_title() { print -n "\\e]0;Adam's Terminal\\a"; }

Copy
<?php include("icons/my-icon.svg"); ?>
// getting an icon from a parent directory
<?php include __DIR__ . '/../icons/facebook.svg'; ?>

Copy
wp_enqueue_script(
    'lazysizes',
    get_template_directory_uri() . '/js/lazysizes.min.js'
  );

Copy
<?php get_template_part('template_parts/griditem'); ?>

Copy
// you can use any value including objects.
set_query_var( 'var_name_to_be_used_later', 'Value to be retrieved later' );
// in the template part
$passedVariable = get_query_var('var_name_to_be_used_later');

Copy
// lets grab all of the blocks from the post content
$blocks = parse_blocks($post->post_content);
// and lets print it out
var_dump($blocks);

Copy
// context.js
import React from 'react';
const StateContext = React.createContext();
const DispatchContext = React.createContext();
// handle the reducer
const stateReducer = (state, action) => {
  switch (action.type) {
    // an example action
    case 'increment': {
      return { count: state.count + 1 };
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
};
const initialState = {
  count: 0,
};
function StateProvider({ children }) {
  const [state, dispatch] = React.useReducer(stateReducer, initialState);
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}
function useAppState() {
  const context = React.useContext(StateContext);
  if (context === undefined) {
    throw new Error('useAppState must be used within a StateProvider');
  }
  return context;
}
function useAppDispatch() {
  const context = React.useContext(DispatchContext);
  if (context === undefined) {
    throw new Error('useAppDispatch must be used within a StateProvider');
  }
  return context;
}
function useContext() {
  return [useAppState(), useAppDispatch()];
}
export { StateProvider, useContext };

Copy
// Any react file
import { useContext } from "../../context"
// use destructuring to make state and dispatch accessible
// count in this case is destructured from the state
const [{ count }, dispatch] = useContext()
// you could just do
const [state, dispatch] = useContext()
// then we can dispatch
dispatch({ type: "count" })
// or use the state
<div>{count}</div>

Copy
// state = {
//   clicks: 0,
//   count: 0
// }
return {
  ...state,
  clicks: state.clicks + 1,
  count: state.count - 1,
};

Copy
const newItem = 'foo';
// a new array
return [
  ...state, // explode the old state first
  newItem, // then add the new item at the end
];

Copy
const newItem = 'foo';
// a new array
return [
  newItem, // add the new item first
  ...state, // then explode the old state at the end
];

Copy
return state.map((item, index) => {
  // Replace the item at index 2
  if (index === 2) {
    return 3;
  }
  // Leave every other item unchanged
  return item;
});

Copy
import { useState, useEffect } from 'react';
export function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);
  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);
  return matches;
}
// how to use it
function Page() {
  let isPageWide = useMediaQuery('(min-width: 800px)');
  return (
    <>
      {isPageWide && <UnnecessarySidebar />}
      <ImportantContent />
    </>
  );
}

Copy
// inside our component we add the props we want as arguments for props.children
const Blocks = ({ allBlocks, children }) =>
  allBlocks.map((block, index) => <div>{children(block, index)}</div>);
// then we can access those arguments via a function
<Blocks allBlocks={state.allBlocks}>
  {(block, index) => {
    return <DynamicBlock block={block} index={index} />;
  }}
</Blocks>;

Copy
# Get the tree of the first directory level
tree -v -L 1
# Ignore node_modules and grab the tree two directory levels down
tree -I 'node_modules' -v -L 2

Copy
cd /etc
code hosts

Copy
127.0.0.1 your-site.test

Copy
<VirtualHost *:80>
  DocumentRoot "/Applications/MAMP/htdocs" ServerName localhost
</VirtualHost>
<VirtualHost *:80>
  ServerName your-site.test DocumentRoot "/Users/username/Sites/directory"
</VirtualHost>

Copy
NameVirtualHost *:80

Copy
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Copy
<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

Copy
Listen 8888
ServerName localhost:8888

Copy
Listen 80
ServerName localhost:80

Copy
127.0.0.1 localhost your-site.test

Copy
define('RELOCATE',true)