DEV Community: Vladimir Nikitin

JS Confetti library with emojis ⚡️ 🎉

Vladimir Nikitin — Tue, 29 Jun 2021 11:01:24 +0000

Hi everyone!

Happy to announce, that my library js-confetti now supports emojis!

Please look at README for instructions for Installation & Usage

All you need is to provide emojis array to addConfetti method:

import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

// different emojis
jsConfetti.addConfetti({
   emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'],
})

// confetti from only unicorn emojis
jsConfetti.addConfetti({
  emojis: ['🦄'],
})

// different arguments in .addConfetti
jsConfetti.addConfetti({
  emojis: ['✨', '💫'],
  emojiSize: 100,
  confettiNumber: 30,
})

You can see demo here 🚀

I will be happy if this will be useful for anybody!

Feel free to add Issues for feature-requests / bugs

JSConfetti could be downloaded from CDN 🎉

Vladimir Nikitin — Fri, 25 Jun 2021 15:29:52 +0000

Hi everyone!

Wanted to share, that my open-source library JSConfetti is now could be downloaded from CDN:

<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

After that, JSConfetti class could be accessed as global variable, and you can fire confetti by calling method addConfetti() on JSConfetti class instance

const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()

JSConfetti works without any config, but could be configurable, check out documentation on GitHub

Links: GitHub | NPM | Library Website | CodeSandbox Playground

Sorting Algorithms Visualization: QuickSort, MergeSort, HeapSort, BubbleSort, InsertionSort

Vladimir Nikitin — Tue, 15 Jun 2021 07:58:39 +0000

Hi everyone! 👋🏻

I'd like to share my new project about visualization of sorting algorithms

Currently, there're five algorithms visualized: QuickSort, MergeSort, HeapSort, BubbleSort and InsertionSort

This project helped me to understand how different sorting algorithms work and I will be happy if it this would be helpful for anybody

GitHub: https://github.com/loonywizard/sorting-algos-visualizer

Live demo: https://loonywizard.github.io/sorting-algos-visualizer

How to publish TypeScript package to NPM

Vladimir Nikitin — Tue, 20 Apr 2021 13:33:39 +0000

In this article I'm going to cover a process of publishing TypeScript package with external dependencies to NPM

Write some code

The package we're going to publish is React.js custom hook for throttling values: react-use-throttle. I've already written article about developing this hook and now we're going to publish it to NPM

First things first, we need to write code for the package. I've put my code to src/index.ts file

tsconfig.json

In order to develop with TypeScript we need to add tsconfig to our repository. My config looks like this:

{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "strict": true,
    "declaration": true, // generates declaration files
    "esModuleInterop": true
  }
}

To learn more about different options please look at TSConfig Reference

Set up Rollup

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application

Rollup allows developers easily compile code into different JavaScript module systems such as ESModules, UMD, AMD or CommonJS. There's a great article covering major differences between them

This is my rollup.config.js file, it exports an array of objects, where each object defines how Rollup should build our code in specified format. Here we're building code for ES and UMD modules, because there're most common nowadays. Each bundle has TypeScript and Babel plugins, and UMD bundle also has terser plugin for code minification

import typescript from 'rollup-plugin-typescript2'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'

export default [
  // ES Modules
  {
    input: 'src/useThrottle.ts',
    output: {
      file: 'dist/index.es.js', format: 'es',
    },
    plugins: [
      typescript(),
      babel({ extensions: ['.ts'] }),
    ],
  },

  // UMD
  {
    input: 'src/useThrottle.ts',
    output: {
      file: 'dist/index.umd.min.js',
      format: 'umd',
      name: 'reactUseThrottle',
      indent: false,
    },
    plugins: [
      typescript(),
      babel({ extensions: ['.ts'], exclude: 'node_modules/**' }),
      terser(),
    ],
  },
]

To learn more about Rollup configuration please look at Rollup quick start guide

Build code and publish package to NPM

We need to specify the following fields in package.json file

"name": "react-use-throttle",
"version": "0.0.1",
"main": "dist/index.umd.min.js",
"module": "dist/index.es.js",
"types": "dist/useThrottle.d.ts",
"files": ["dist"]

name and version together identify package completely unique
main is the primary entry point to our package
module is the entry point for ESModules
types is the entry point for TypeScript type declarations
files is an array of patterns that describes the entries to be included when your package is installed as a dependency

Learn more about different fields in package.json file: Package.json docs

Also, we need to specify react as peerDependency, because it will not be added to final build

"peerDependencies": {
  "react": "^16.8.0  || ^17.0.0"
}

To build code with rollup we need to run the following command:

rollup -c

It will build our package based on rules we defined in rollup.config.js. Code will be generated to dist folder

Now we're ready to publish our package, to do this we need to run the following commands:

npm login # this will ask you for your NPM login and password
npm publish

Package was successfully published to NPM 🎉

React useThrottle hook with usage example

Vladimir Nikitin — Tue, 30 Mar 2021 15:06:04 +0000

Throttling is a technique, where a given function runs only once at a specified period of time

Throttling could be used in scenarios, where our code does expensive CPU/Network tasks on frequently fired events:

Listening to HTML Input element change
Listening to window resize or scroll
Listening to mouse cursor position change

Code

This is a React hook to work with throttling

Example of usage: listening to HTML input element change

CodeSandbox example

Live demo of the previous useThrottle hook usage in CodeSandbox. Throttled value updates only once at interval (500ms by default)

Links: CodeSandbox demo | GitHub repo

🎉 Zero-config JS Confetti library

Vladimir Nikitin — Wed, 17 Mar 2021 16:28:33 +0000

js-confetti is a lightweight zero-config open-source JavaScript library for confetti without any dependencies

GitHub: https://github.com/loonywizard/js-confetti

Usage

Install library via yarn or npm

yarn add js-confetti

Initialize instance of JSConfetti class and call addConfetti method

import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()

Thats it!