sobelk

/*
This is based on an idea for building a table of contents on top of
React Markdown using a custom renderer. The original conversation is at

https://github.com/remarkjs/react-markdown/issues/48
*/

import React from "react";

import ReactMarkdown from "react-markdown";

slikts

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

• Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
• Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

davestewart

/**
 * Helper function to reduce boilerplate in route creation
 *
 * @param {string}    path    The route's path
 * @param {object}    page    A page component definition
 * @param {Function}  page    A function that returns a page import
 * @param {string}    page    A string path to a file in the view/pages folder
 * @param {object}    attrs   Any additional attributes
 */
export function route (path, page, attrs = {}) {

philippkuehn

<template>
  <div class="c-code-block">
    <div class="c-code-block__meta" contenteditable="false" v-if="editable">
      <icon-btn
        class="c-code-block__action-icon"
        name="more"
        :dropdown-props="{ closeOnClick: false }"
        ref="icon"
      >
        <template v-slot:dropdown>

espenbjorkeng

// vscode-keybindings for navigation with I/J/K/L and additional functionality with surrounding characters 

// Place your key bindings in this file to overwrite the defaults
// ALT + I/J/K/L: up/left/down/right
// ALT + SHIFT + I/J/K/L: mark text up/left/down/right
// CTRL + J/L: send cursor to start/end of line
// CTRL + ALT + J/L: send cursor to start/end of word
// CTRL + ALT + U/O: send cursor to "wordPartLeft"/"wordPartRight"
// CTRL + ALT +  SHIFT + U/O: mark from cursor to "wordPartLeft"/"wordPartRight"
// CTRL + ALT + Y: got to declaration

plcosta

const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')
const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    tailwindcss('./tailwind.js'),
    autoprefixer({
      add: true,
      grid: true

origamid

/**
 * Smooth scroll animation
 * @param {int} endX: destination x coordinate
 * @param {int} endY: destination y coordinate
 * @param {int} duration: animation duration in ms
 */
function smoothScrollTo(endX, endY, duration) {
  const startX = window.scrollX || window.pageXOffset;
  const startY = window.scrollY || window.pageYOffset;
  const distanceX = endX - startX;

javilobo8

axios({
  url: 'http://localhost:5000/static/example.pdf',
  method: 'GET',
  responseType: 'blob', // important
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);

LoyEgor

// install
// npm i gulp-cache gulp-imagemin imagemin-pngquant imagemin-zopfli imagemin-mozjpeg imagemin-giflossy -f
// node node_modules/jpegtran-bin/lib/install.js
// node node_modules/gifsicle/lib/install.js
// node node_modules/zopflipng-bin/lib/install.js
// node node_modules/mozjpeg/lib/install.js
// node node_modules/giflossy/lib/install.js
// node node_modules/pngquant-bin/lib/install.js

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent