fariabriya

Writings

  • Algorithm
  • JavaScript
  • Framework/Tools
  • Visualization
  • Books

Animated UI with react-transition-group

A slider micro-interaction built with React. We will build a tree animation that grows with slider change.Using react-transition-group library build a smooth UI interaction.

Delightful micro-interaction with CSS

Small delightful micro-interaction truly shows you care about small details that gives joy. We will create an animated checklist using simple CSS techniques.

Creating Universal Widgets - Transforming React components into cross-framework widget

We'll build a React-based widget and bundle it with rollup. Then use this bundled widget to embed it in any JavaScript based application.

Explaining Docker with Pizza!

Docker is a tool that helps you package your software and its dependencies into a single unit called a 'container'. In this article, we'll explore the concept of Docker through the lens of a pizza food cart analogy.

Books I Read In 2022

In 2022, I explored various types of books, from exciting fiction to informative technical books. I enjoyed diving into different genres throughout the year. Now, I'm sharing a complete list of the books I read in 2022.

Circular packing with D3.js and React

We'll explore how D3.js, a powerful data visualization library, can work hand-in-hand with React. By the end, you'll have a clear understanding of how to create interactive circular data visualizations for your web projects.

React animated accordion from scratch

In this post, I have shown how to build an animated accordion without using any external library. Using getComputedStyle we can get the height of each accordion and animate accordingly with CSS.

map(),reduce(),filter()

In simple words, higher order functions in JavaScript can take a function as argument or return a function. map(), reduce() and filter() are higher order built-in functions in ES6 module. One of the advantages of using them is that, it makes code simpler and accelerates workflow.

Modern Fisher-Yates algorithm for shuffling array

One of the optimal algorithm for generating permutation (shuffle) of a sequence is Fisher-Yates algorithm.It runs in linear runtime and shuffles them in place i.e no additional memory is needed.

String Manipulation with JavaScript

Let’s look into built-in methods in JavaScript for handling string.