lvnam96

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


/**
 * Usage is the same as `dynamic()` from NextJS with 1 exception: `ssr` IS ALWAYS FALSE
 * @param {() => any} importCallback Ex: () => import('./LazyComponent.jsx')
 * @param {{ loading?: () => import('react').ReactNode }} options This can be similar to options of `dynamic()` from NextJS
 */
export const clientOnly = (importCallback, { loading } = {}) => {
  const LazyComponent = lazy(importCallback);

lvnam96

<script lang="ts">
  import { store, useAbcData, useSetData } from './store';

  // you can import store & access its prop directly:
  $: console.log('new changes will be logged here', $store.data);

  // or grab its data via helper function:
  const data = useAbcData(); // note that `data` is not subscribed to changes (like it should be if returned from a "react hook"). If you need to, use `$store.data` instead
  const setData = useSetData(); // same goes here
</script>

lvnam96

Keybase proof

I hereby claim:

• I am lvnam96 on github.
• I am garyle (https://keybase.io/garyle) on keybase.
• I have a public key ASANDhV83YJoVgoICRUwYZB-a5PPJMd4Q5Q0aTN6AAxD7wo

To claim this, I am signing this object:

lvnam96

function workAfterDataRetrieved (data) {
  return new Promise((resolve) => {
    // doSomeDutyTaskHere();
    console.log('task done: ' + data.name);
    resolve();
  });
}

function getJSON (url) {
  console.log('sent: ' + url);

lvnam96

Responsive Google Maps embedding

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.

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

lvnam96

git config --global alias.st status
git config --global alias.br branch
git config --global alias.co checkout
git config --global alias.ls 'log --oneline --decorate'
git config --global alias.sts stash
git config --global alias.cm commit
git config --global alias.cma 'commit --amend'
git config --global alias.rs reset
git config --global alias.rb rebase
git config --global alias.rbi 'rebase -i'

lvnam96

const getRandomColor = () => {
    const h = Math.floor(Math.random() * 360),
          s = Math.floor(Math.random() * 100) + '%',
          l = Math.floor(Math.random() * 60) + '%';// max value of l is 100, but I set to 60 cause I want to generate dark colors
                                                   // (use for background with white/light font color)
    return `hsl(${h},${s},${l})`;
};

lvnam96

//https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
(length => {
    let text = '';
    const POSSIBLE_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
        POSSIBLE_SCOPE = POSSIBLE_CHARS.length;

    for (let i = 0; i < length; i += 1) {
        text += POSSIBLE_CHARS.charAt(Math.floor(Math.random() * POSSIBLE_SCOPE));
    }