kyleshevlin

// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:

function useBool(initialState = false) {
  const [state, setState] = React.useState(initialState)
  
  // Instead of individual React.useCallbacks gathered into an object
  // Let's memoize the whole object. Then, we can destructure the
  // methods we need in our consuming component.

mikehwagz

// just the shortcodes you'll need in eleventy config
const cx = require('nanoclass')
const imageUrlBuilder = require('@sanity/image-url')
const sanityClient = require('./util/sanityClient')
const builder = imageUrlBuilder(sanityClient)

function urlFor(image, width, height) {
  if (width) {
    if (height) {
      return builder

celsowhite

/*-----------------------
Offset
---
Get the offset of an element on the page relative to the document.
-----------------------*/

function offset(el) {
  const rect = el.getBoundingClientRect(),
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, bottom: rect.bottom + scrollTop };

colllin

Auth0 + FaunaDB ABAC integration: How to expire Fauna user secrets.

Fauna doesn't (yet?) provide guaranteed expiration/TTL for ABAC tokens, so we need to implement it ourselves if we care about it.

What's in the box?

3 javascript functions, each of which can be imported into your project or run from the command-line using node path/to/script.js arg1 arg2 ... argN:

1. deploy-schema.js: a javascript function for creating supporting collections and indexes in your Fauna database.

kmelve

.root {
  display: block;
  position: relative;
}

.lqip {
  image-rendering: pixelated;
  width: 100%;
  opacity: 1;
  transition: opacity 50ms 100ms ease-out;

Lysindr

<div class="collection__main">
    <!-- COLLECTION SIDEBAR -->
    {%- capture categories -%}
  {%- for tag in collections[collection.handle].tags -%}
    {%- if tag contains 'categories' -%}
      {%- assign tag_patterns = tag | split: '_' -%}

      <li class="collection-sidebar__filter-item main-filter" data-tag="{{ tag | handle }}">{{ tag_patterns[1] }}</li>
    {%- endif -%}
  {%- endfor -%}

marioloncarek

const defaults = {
    cartModal: '.js-ajax-cart-modal', // classname
    cartModalContent: '.js-ajax-cart-modal-content', // classname
    cartModalClose: '.js-ajax-cart-modal-close', // classname
    cartDrawer: '.js-ajax-cart-drawer', // classname
    cartDrawerContent: '.js-ajax-cart-drawer-content', // classname
    cartDrawerClose: '.js-ajax-cart-drawer-close', // classname
    cartDrawerTrigger: '.js-ajax-cart-drawer-trigger', // classname
    cartOverlay: '.js-ajax-cart-overlay', // classname
    cartCounter: '.js-ajax-cart-counter', // classname

dmnsgn

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

vlucas

import { createCipheriv, createDecipheriv, randomBytes } from "crypto";

const ENCRYPTION_KEY: string = process.env.ENCRYPTION_KEY || ""; // Must be 256 bits (32 characters)
const IV_LENGTH: number = 16; // For AES, this is always 16

/**
 * Will generate valid encryption keys for use
 * Not used in the code below, but generate one and store it in ENV for your own purposes
 */
export function keyGen() {

wesbos

{
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {