swyxio

2019 update: this essay has been updated on my personal site, together with a followup on how to get started

2020 update: I'm now writing a book with updated versions of all these essays and 35 other chapters!!!!

1. Learn in public

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos

leevigraham

<flyout v-cloak>
    <div slot-scope="props">
        <button
            v-on:click="props.toggle()"
            v-bind:class="'border-2 p-1 ' + (props.isActive ? 'bg-green': 'bg-red')"
            data-reference
        >…</button>
        <div
            v-show="props.isActive"
            class="list-reset bg-white border p-4 shadow z-10"

eirikb

const path = require('path');
const cwd = process.cwd();

module.exports = {
  "includePaths": [
    path.resolve(cwd, 'node_modules'),
    path.resolve(cwd, 'src')
  ]
};

eddiewebb

Client side searching for Hugo.io with Fuse.js

• WHY
• Sample
• Setup
• Files
  • content/search.md
  • layouts/_default/search.html
  • static/js/search.js

• layouts/_default/index.json

calebporzio

<template>
    <div class="inline-block" v-html="require('icon-' + this.icon + '.svg')"></div>
</template>

<style module>
.svg {
    fill: currentColor;
    height: 1em;
    margin-top: -4px;
    vertical-align: middle;

sarahdayan

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan

stefanledin

(function () {
    // An object with options for the IntersectionObserver.
    const options = {
        // 0.5 = The callback is fired when 50% of the element is visible
        // We can add more values to the array, like 0.25, 0.75 or 1.0
        threshold: [0.5]
    };

    // Instantiate the IntersectionObserver class
    const observer = new IntersectionObserver((entries, observer) => {

DawidMyslak

Vue.js and Vuex - best practices for managing your state

Modifying state object

Example

If you have to extend an existing object with additional property, always prefer Vue.set() over Object.assign() (or spread operator).

Example below explains implications for different implementations.

CodeMyUI

Glitch Effect

I got this image from here http://placeimg.com/

A Pen by takashi on CodePen.

License.

MariusRumpf

// Whitespace+ irregular whitespace detection
// https://marketplace.visualstudio.com/items?itemName=davidhouchin.whitespace-plus
// Inspired by eslint https://github.com/eslint/eslint/blob/master/lib/rules/no-irregular-whitespace.js
{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",