Zikoat

How to use Zustand with Vue 2

💻 Check out this Codesandbox demo: Vue 2 Playground

ℹ️ This approach works for Vue 2.6 and above.

🔍 Tiny: Just 10 lines of source code, no dependencies.

✨ The same Zustand store can be used with different libraries, such as Vue, React, or Svelte.

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

rauschma

/**
 * Returns the global object.
 * Works even inside ES6 modules.
 */
function getGlobalObject() {
    // Workers don’t have `window`, only `self`
    if (typeof self !== 'undefined') {
        return self;
    }
    if (typeof global !== 'undefined') {

jhartikainen

#!/bin/bash
files=$(git diff --cached --name-only | grep '\.js$')

# Prevent ESLint help message if no files matched
if [[ $files = "" ]] ; then
  exit 0
fi

echo $files | xargs eslint

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

kejun

/* thumb截中间区域 */


fieldset {
  display: inline-block;
  border: 1px solid #ddd;
}

.thumb {
  position: relative;

wintercn

function getCommonParent(el1,el2){

    var parents1 = [];
    var el = el1;
    while(el) {
        parents1.unshift(el);
        el = el.parentNode;
    }

    var parents2 = [];

sofish

// 仅支持 8 种类型的 day
// 20120409 | 2012-04-09 | 2012/04/09 | 2012.04.09 | 以上各种无 0 的状况
var isDate = function (text) {
  var reg = /^([1-2]\d{3})([-/.])?(1[0-2]|0?[1-9])([-/.])?([1-2]\d|3[01]|0?[1-9])$/
    , taste, validDate, yyyy, mm, dd;

  if (!reg.test(text)) return false;

  taste = reg.exec(text);
  year = taste[1], month = taste[3], day = taste[5];

maccman

(function($){
  function dragEnter(e) {
    $(e.target).addClass("dragOver");
    e.stopPropagation();
    e.preventDefault();
    return false;
  };

  function dragOver(e) {
    e.originalEvent.dataTransfer.dropEffect = "copy";

froots

if (typeof (AC) === "undefined") {
    AC = {}
}
AC.ImageReplacer = Class.create({
    _defaultOptions: {
        listenToSwapView: true,
        filenameRegex: /(.*)(\.[a-z]{3}($|#.*|\?.*))/i,
        filenameInsert: "_☃x",
        ignoreCheck: /(^http:\/\/movies\.apple\.com\/|\/105\/|\/global\/elements\/quicktime\/|_(([2-9]|[1-9][0-9]+)x|nohires)(\.[a-z]{3})($|#.*|\?.*))/i,
        attribute: "data-hires",