DEV Community: Dmytro

Online Timers

Dmytro — Sun, 03 Sep 2023 05:37:49 +0000

TimerOne

Modern and easy-to-use timers: Pomodoro, Countdown, Stopwatch, Alarm Clock.

Among other things, Pomodoro can help to have meaningful breaks with predefined activities.

Online JSON Viewer

Dmytro — Mon, 07 Aug 2023 07:36:34 +0000

Web App
Code
NPM

Elegant UI:

Foldable & filterable & focusable nodes
Show node path on focus & hover
Configurable clickable links
Light & dark theme

Functionality:

Filter nodes
Collapse all nodes
Expand all nodes
Save JSON
Copy JSON
Copy node
Copy node path
Switch between formatted & raw data
Sticky panels
Converting JSON
(Shift-)Tab navigation
Keymaps (Vim inspired)
History
Screenshot (JSON to image .jpeg)
New JSON entry via file upload, fetch URL or insert JSON string

Convert JSON to:

JSON schema
Typescript interfaces (.d.ts)
Golang structs (.go)

Keymaps:

h | ArrowLeft - move focus left (parent node)
j | ArrowDown - move focus down (next sibling)
k | ArrowUp - move focus up (previous sibling)
l | ArrowRight - move focus right (child node)
c - collapse all child nodes
e - expand all child nodes
y - copy node
p - copy node path

Available as a Chrome extension

Functional JSON Viewer | Chrome Extension

Dmytro — Sun, 09 Jul 2023 07:52:00 +0000

Available in the Chrome Web Store

Github

Explore formatted JSON data with ease.

Svelte tips

Dmytro — Sun, 17 Jul 2022 06:53:35 +0000

Svelte and localStorage without reactivity

Setup function for localStore.

Work for primitive values and type aware.

/** ~/localstorage.js */
/**
 * @template T
 * @param {string} storageKey
 * @param {T} defaultsTo
 * @returns {{value: T, set: (val: T) => void}}
 */
function setupStorage(storageKey, defaultsTo) {
  const isBool = typeof defaultsTo === 'boolean'
  const isNum = typeof defaultsTo === 'number'

  function get() {
    const val = localStorage.getItem(storageKey)

    if (val) {
      if (isBool) return val === 'true' ? true : false
      if (isNum) return Number(val)
      return val
    }

    return defaultsTo
  }

  const obj = {
    /** @param {T} val */
    set(val) {
      this.value = val
      localStorage.setItem(storageKey, `${val}`)
    },

    value: get()
  }
  // @ts-ignore
  return obj
}

Define key-values pairs.

All items in one place. Easy to add, remove or change. Editor will be able to provide intellisense, and warn if some variable is misspelled or missing.

/** ~/localstorage.js */
/** @enum {any} */
const storage = {
  rounds: setupStorage('Rounds', 10),
  color: setupStorage('Color', 'blue'),
  isActive: setupStorage('Is_active', true)
}
export default storage

Use with onchange, oninput or other.

<script>
  import storage from '~/localstorage.js'

  const rounds = storage.rounds.value
  /** @param {Event & { currentTarget: EventTarget & HTMLInputElement; }} ev */
  function onChangeRound(ev) {
    const val = ev.currentTarget.valueAsNumber
    storage.rounds.set(val)
  }

  const isActive = storage.isActive.value
  /** @param {Event & { currentTarget: EventTarget & HTMLInputElement; }} ev */
  function onChangeActive(ev) {
    const checked = ev.currentTarget.checked
    storage.isActive.set(checked)
  }

  const colors = ['blue', 'yellow']
  const color = storage.color.value
  /** @param {Event & { currentTarget: EventTarget & HTMLSelectElement; }} ev */
  function onChange(ev) {
    const val = ev.currentTarget.value
    storage.color.set(val)
  }
</script>

<label>
  Rounds
  <input type="number" min="0" step="1" value={rounds} on:change={onChangeRound} />
</label>

<label>
  Active
  <input type="checkbox" checked={isActive} on:change={onChangeActive} />
</label>

<label>
  My color
  <select value={color} on:change={onChangeColor}>
    {#each colors as color}
      <option>{color}</option>
    {/each}
  </select>
</label>

Svelte Store and localStorage

Wrap writable store in a function that will set localStorage item on store update (skipping first subscription call).

/** ~/store.js */
import { writable } from 'svelte/store'

/**
 * @template  T
 * @param {string} key
 * @param {T} defaultsTo
 * @returns {import('svelte/store').Writable<T>}
 */
function setupStore(key, defaultsTo) {
  const isBool = typeof defaultsTo === 'boolean'
  const isNum = typeof defaultsTo === 'number'

  function get() {
    const val = localStorage.getItem(key)

    if (val) {
      if (isBool) return val === 'true' ? true : false
      if (isNum) return Number(val)
      return val
    } else {
      return defaultsTo
    }
  }

  const initVal = get()
  const store = writable(initVal)

  let first = true

  store.subscribe((v) => {
    if (first) {
      first = false
    } else {
      localStorage.setItem(key, `${v}`)
    }
  })
  // @ts-ignore
  return store
}

export const rounds = setupStore('Rounds', 10)
export const color = setupStore('Color', 'blue')
export const isActive = setupStore('top_panel', true)

<script>
  import { rounds, isActive, color } from '~/store.js'
  const colors = ['blue', 'yellow']
</script>

<label>
  Rounds
  <input type="number" min="0" step="1" bind:value={$rounds} />
</label>

<label>
  Active
  <input type="checkbox" bind:checked={$isActive} />
</label>

<label>
  My color
  <select bind:value={$color}>
    {#each colors as color}
      <option>{color}</option>
    {/each}
  </select>
</label>

Watch variable

Easiest way to watch for value changes.

<script>
  let word = ''

  $: watch(word)

  /** @param {string} val */
  function watch(val) {
    console.log(val)
    if (val.length > 3) localStorage.setItem('Word', val)
  }
</script>

<label>
  Word
  <input type="text" bind:value={word} />
</label>

Productivity (pomodoro) timer with focus on breaks

Dmytro — Sun, 22 May 2022 14:43:10 +0000

The main point is to define “activities” to do during breaks ( 2 different sets for short/long breaks).
Personally I find it beneficial:

short breaks - to do some light exercises targeting legs and back to counter “side effects” of sittings
long breaks - just make & drink tea

Having music playing in the background, low volume and without human voice, can help to concentrate. That’s why I added a radio player to the app. And it’s nice just to go to the webpage and start working without needing to install apps when switching to a different machine (PC, laptop).

live
repo

Multiple git accounts

Dmytro — Sun, 30 Jan 2022 18:07:47 +0000

Recently, I've reinstalled linux on my old laptop. And I wanted to set up git in a way that I could manage multiple accounts. Essentially, I aimed to be able to do git pull & push without typing every time username and password.

So, I googled a little bit and found a good starting point - make separation by directories. Example: ~/code/work/ and ~/code/personal/ - for work and personal usage respectively.

It's okay, but I want to have a default account available from the HOME directory ~/ for .dotfiles and other stuff. And then in ~/code/[USER]/ - switch to another account for specific use.

Let's have two users: Diogenes (default) and Epicurus (secondary).

After installing git, I set it up as usual.

git config --global user.name "Diogenes the Cynic"
git config --global user.email diogenes@example.com

git config --global credential.helper store

Last line just tells git to store credentials in a default file, ~/.git-credentials. This is a file where I place personal access token (PAT) for default account (Diogenes). Note, it is all in plain text, so not secure. But I am willing to take the risk, besides I am not storing passwords, only PAT. PAT actually is a pretty good idea. I can generate one with limited/minimum rights, just read/write permissions, and use in my laptop (where I may experiment with stuff). So even if PAT is stolen or something, my password is secure. I just revoke that PAT.

The format is https://[USERNAME]:[ACCES_TOKEN]@[gitlab.com | github.com]. So, I go to gitlab, generate PAT, and add following the line.

https://diogenes:super-secure-PAT@gitlab.com

So, now I can git pull & push to gitlab without typing credentials in any directory as Diogenes.

Up to this point ~/.gitconfig looks like this:

[user]
  name = Diogenes
  email = diogenes@example.com

[credential]
  helper = store

Now it's time to add a new account, Epicurus.

First, I make new dir ~/code/epicurus/

Second, I add to ~/.gitconfig lines that tell git to apply different config depending on the directory I am currently in.

[includeIf "gitdir:~/code/epicurus/"]
  path = ~/code/epicurus/.gitconfig

Third, I configure new git user ~/code/epicurus/.gitconfig and specify where to find credentials.

[user]
  name = Epicurus
  email = epicurus@example.com

[credential]
  helper = store --file=/home/diogenes/code/epicurus/.git-credentials

Fourth, I grab PAT and store it in ~/code/epicurus/.git-credentials

https://epicurus:[ACCES_TOKEN]@gitlab.com

And now in directory tree ~/code/epicurus/ I can git pull & push to gitlab without typing credentials as Epicurus, and everywhere else as Diogenes.

File structure

.git-credentials
.gitconfig

└─ code
   └─ epicurus
      ├─ .git-credentials
      └─ .gitconfig

Content

~/.gitconfig

[user]
  name = Diogenes
  email = diogenes@example.com

[credential]
  helper = store

[includeIf "gitdir:~/code/epicurus/"]
  path = ~/code/epicurus/.gitconfig

~/.git-credentials

https://diogenes:[ACCES_TOKEN]@gitlab.com

~/code/epicurus/.gitconfig

[user]
  name = Epicurus
  email = epicurus@example.com

[credential]
  helper = store --file=/home/diogenes/code/epicurus/.git-credentials

~/code/epicurus/.git-credentials

https://epicurus:[ACCES_TOKEN]@gitlab.com

Introducing Tabulamax

Dmytro — Tue, 05 Oct 2021 13:37:10 +0000

I’ve built a simple tool to quickly design database tables and generate code snippets for migrations (SQL, Knex.js).

It’s open source, made with Svelte.

Live: https://www.tabulamax.com/
Repo: https://github.com/tabulamax/app

Svelte, Vue, HTML form generator

Dmytro — Mon, 27 Sep 2021 07:03:59 +0000

Form generator, built with Svelte. It’s Free & Open Source.

CSS by Bootstrap, Bulma or custom.

App: https://dwarform.pages.dev/
Repo: https://github.com/diogenesofweb/dwarform

May be useful for quick prototyping, educational purposes...

Edit form :

Copy code snippets :

Log form data in devtools console :

Custom CSS scrollbar

Dmytro — Wed, 25 Aug 2021 16:39:24 +0000

Unfortunately, we have to style scrollbars depending on browser support.

CSS Scrollbars are supported by Firefox and ::-webkit-scrollbar by Chromium based (Chrome, Edge) and Safari.

Eventually all modern browsers will transition to CSS Scrollbars specification. In the meantime, we have to style both features to achieve the same look across all browsers. Thanks to the CSS goddess, it’s relatively easy to achieve. Picking the right colors and don't forgetting about the border property, which can be applied to ::-webkit-scrollbar-thumb, is the hardest part.

Here is an example, leveraging custom properties, with light/dark themes support.

/* ~/scrollbar.css */

/* Default (light) theme */
:root {
  --page-background: white;

  --scrollbar-track: transparent;
  --scrollbar-thumb: lightsalmon;
  --scrollbar-thumb-hover: lightcoral;

  --scrollbar-width: 12px;
}
/* Default (light) theme */

/* Dark theme */
html.dark {
  --page-background: black;

  --scrollbar-thumb: salmon;
  --scrollbar-thumb-hover: chocolate;
}
/* Dark theme */

/* Firefox */
* {
  scrollbar-width: thick; /* none | auto  */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Firefox */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: var(--scrollbar-width); /* vertical scrollbar */
  height: var(--scrollbar-width); /* horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-width);
  border: calc(var(--scrollbar-width) / 4) solid var(--page-background);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
/* Chrome, Edge, Safari */

Git tale

Dmytro — Sun, 22 Aug 2021 06:26:44 +0000

Workflow tale

Once upon a time, a dwarf named Krevorook took a quest from a tree elf to build a static website and host it in CDN like Netlify. His journey was full of new discoveries… And befriending a ferocious beast, called GIT, was one of those. Following is a small account of the time they spend together.

After setting up the project, Krevorook created a new git repo.
So he had his MAIN branch, where deployable (production) code lived.

git init
git add .
git commit -m 'init'

After creating a new Github repository, he added a remote.

git remote add origin https://github.com/user/repo.git
git push -u origin main

And git push worked well for him. He made a home page and deployed it.

Sometimes he bringed new files.

git add .
git commit -m 'added: .gitignore'
git push

Sometimes he polished existing ones.

git commit -am 'my message'

When Krevorook had forgotten to add some files or wrote an inaccurate message, he would correct himself.

git add .
git commit --amend -m 'new message'

But more often he just made trivial amendments.

git commit -a --amend --no-edit

He also has to make contact and about pages, which were obviously not production ready just yet.
So he created a new branch DEV where the “actively developed” code lived.

git checkout -b dev
git push -u origin dev

He worked in sessions using pomodoro technique, 30 min work / 3 min break. One session usually took 2-3 hours followed by a minimum 1 hour break or change activity (nothing to do with coding or sitting).
At the end of each session Krevorook had the urge to commit, even without a meaningful message.

git commit -am 'up'

It was ok to use dummy commits, because he could always clean up history.

git rebase -i HEAD~3

More often than not he checked out the current state.

git status
git log --graph --decorate --pretty=oneline --abbrev-commit

It was very repetitive. Therefore Krevorook turned to his precious pet, Bash, who was of great help for that sort of thing.

# ~/.bash_aliases
alias gs='git status'
alias gl='git log --graph --decorate --pretty=oneline --abbrev-commit'
alias gc='git commit -m'
alias gca='git commit -am'

At last, pages were production ready and craved to be introduced to WWW.

And Krevorook joined DEV with MAIN.

git checkout main
git merge dev
git push

He has the website live with 3 pages: home, contact and about.
But contact and about pages were fast made, and maybe he should try to make them better.

So he made two new branches, NEW-ABOUT-PAGE and NEW-CONTACT-PAGE, based on DEV, and worked tremendously on them.

git branch new-about-page dev
git branch new-contact-page dev

At some point the new contact page looked good, there was nothing to improve. So he joined the NEW-CONTACT-PAGE branch with DEV as a single commit. Then he pushed it all to production and cleaned up the repo, deleting the NEW-CONTACT-PAGE branch.

# make sure everything is good, some adjustment is needed?
git checkout dev
git merge --squash new-contact-page
git commit -m "merge new-contact-page"

# deploy
git checkout main
git merge dev
git push

# delete
git branch -d new-contact-page
git push origin --delete new-contact-page

And what about the about page?
Contarly to the contact page, the new about page looked not so good at all. So he decided to stick with the current one and moved on.

git branch -D new-about-page
git push origin --delete new-about-page

The end.

Commands used

Create a new local repository

git init

Displays the status of your working directory, (show modified files).

git status

Displays all commits in the current branch’s history

git log
git log --graph --decorate --pretty=oneline --abbrev-commit

Add a file to your next commit (stage)

git add [file]

Add all files to your next commit

git add .

Replaces that last commit with your new, improved commit.

git add .
git commit --amend -m 'new message'

Trivial amendments

git commit -a --amend --no-edit

Add, remove, or combine Git commits

git rebase -i HEAD~[num of commits]

Create a new branch (dev) and switch to it

git checkout -b dev

Switch to another branch (main) and check it out into your working directory

git checkout main

Create a new branch (dev) in a remote repository

git push -u origin dev

Create a new branch (feature) based on some existing one (dev)

git branch feature dev

Merge (join) a specified branch (feature) into your current branch (dev)

git checkout dev
git merge feature

Merge a specified branch (feature) into your current branch (dev)
as a single commit

git checkout dev
git merge --squash feature
git commit -m "merge feature"

Delete a local branch (feature)

# safe delete
git branch -d feature

# delete without questions
git branch -D [failed-feature-branch]

Delete a remote branch (feature)

git push origin --delete feature