Pinned Loading

1. Resolve issue of passing `ref` on `d... Resolve issue of passing `ref` on `dynamic()` (lazy) loaded component in NextJS

   1

   // Issue: https://github.com/vercel/next.js/issues/4957

   2

   3

   4

   /**

   5

    * Usage is the same as `dynamic()` from NextJS with 1 exception: `ssr` IS ALWAYS FALSE

2. promises-in-sequence-and-parallel.js promises-in-sequence-and-parallel.js

   1

   function workAfterDataRetrieved (data) {

   2

     return new Promise((resolve) => {

   3

       // doSomeDutyTaskHere();

   4

       console.log('task done: ' + data.name);

   5

       resolve();

3. Responsive embedding of Google Maps ... Responsive embedding of Google Maps (or anything <iframe> embedded really).

   1

   # Responsive Google Maps embedding

   2

   Simple technique for embedding Google Maps `<iframe>`'s responsively using a `padding-bottom` percentage trick, which when applied to a block element will be calculated as a percentage of the _element width_ - essentially providing an aspect ratio.

   3

   4

   This technique should work on anything that is `<iframe>` embedded from your social network/service of choice.

4. svelte-zustand (adapter) svelte-zustand (adapter)

   1

   <script lang="ts">

   2

     import { store, useAbcData, useSetData } from './store';

   3

   4

     // you can import store & access its prop directly:

   5

     $: console.log('new changes will be logged here', $store.data);

5. Generate random dark HSL color (CSS)... Generate random dark HSL color (CSS) in JavaScript

   1

   const getRandomColor = () => {

   2

       const h = Math.floor(Math.random() * 360),

   3

             s = Math.floor(Math.random() * 100) + '%',

   4

             l = Math.floor(Math.random() * 60) + '%';// max value of l is 100, but I set to 60 cause I want to generate dark colors

   5

                                                      // (use for background with white/light font color)