DEV Community: ajidk

How to make an effect typewriter

ajidk — Fri, 10 Feb 2023 13:29:48 +0000

When I first opened chatgpt, I was interested in seeing typewriters, and then I became curious about typewriters and searched for various sources. Using Javascript, I try to implement this. and then

What is typewriter

A typewriter is a mechanical device that is used to type text on a screen. Several keypad buttons have letters, numbers, and symbols on their surfaces, which are pressed to write characters on a screen that moves beneath the rollers.

Typewriters: why use them

By making visitors focus on a single character for a designated period of time, this effect can enhance user engagement with web content and the page.

Example

code

Here's an example of how you can create a typewriter effect in React:

Create a state to store the current text to be displayed on the screen:

  const [displayedContent, setDisplayedContent] = useState("");
  const [index, setIndex] = useState(0);

Create an variable content & speed to store the texts that you want to display one by one:

  let content = 'please visit suraji.my.id'
  let speed = 100

Use the useEffect hook to handle the animation:

  useEffect(() => {
    const animKey = setInterval(() => {
      setIndex((index) => {
        if (index >= content.length - 1) {
          clearInterval(animKey);
          return index;
        }
        return index + 1;
      });
    }, speed);
  }, [content.length, speed]);

  useEffect(() => {
    setDisplayedContent(
      (displayedContent) => displayedContent + content[index]
    );
  }, [content, index]);

Use the state in your component's render method to display the current text:

return <div>{displayedContent}</div>;

This code will display the texts one by one with a typing effect, with a delay of 100ms pause between each text. You can adjust the delay and pause times to suit your needs.

Conclusion

By making visitors focus on a single character for a designated period of time, this effect can enhance user engagement with web content and the page.

Disable notification in vercel

ajidk — Wed, 08 Feb 2023 03:12:49 +0000

Do you use Vercel? I am a user of Vercel. When I deploy, I receive a notification in my email every time. this causes a lot of spam in my email. I have found a solution to this problem,
You can create a file called vercel.json in your project:

{
    "github": {
        "silent": true
    }

    // if you use gitlab
    "gitlab": {
        "silent": true
    }
}

Thank you for reading. I hope it was useful.

Debouncing: how to use it

ajidk — Sun, 05 Feb 2023 00:13:52 +0000

What is debouncing?

Debouncing is a technique used in electronic systems to filter out transient electrical noise from an input signal. It is used to ensure that only one valid signal is received by the system even if multiple unstable or false signals are received in a short period of time. Debouncing helps maintain the stability and performance of the system and minimizes problems caused by noise. This technique is widely used in microcontroller-based systems, such as those in computer keyboards, push-button switches, and other digital inputs.

Advantages of debouncing

using debouncing has several advantages, inclunding :

Improved system stability: Debouncing helps eliminate false signals and ensures that only one valid signal is received by the system, thereby improving its stability and performance.
Reduced processing load: By filtering out noise, debouncing reduces the processing load on the system, freeing up resources for other tasks.
Better user experience: Debouncing is commonly used in user interfaces, such as keyboards and buttons, to improve the user experience by ensuring that rapid inputs are registered only once.
Increased system reliability: By filtering out false signals, debouncing can increase the reliability of the system, reducing the likelihood of errors or malfunctions.
Easy implementation: Debouncing is a relatively simple technique to implement, and can be easily integrated into existing systems to improve their performance and reliability.

Disadvantages of debouncing

Increased latency: By delaying the processing of signals, debouncing can increase latency, or the time it takes for a signal to be processed and acted upon.
Increased complexity: Depending on the implementation, debouncing can add complexity to the system, making it more difficult to debug and maintain.
Reduced responsiveness: In some cases, debouncing can reduce the responsiveness of the system, as it may take some time for a signal to be processed.
Increased power consumption: The use of additional components, such as timers or counters, to implement debouncing can increase power consumption and reduce battery life in battery-powered systems.
Reduced sensitivity: Debouncing can also reduce the sensitivity of the system, as it may filter out valid signals that are close together in time.

It's important to consider these disadvantages when deciding whether or not to use debouncing in a particular system, and to carefully balance the trade-offs between performance, reliability, and responsiveness.

Example code with React

import React, { useState, useEffect } from "react";

const DebouncedInput = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    let timerId;

    return () => {
      clearTimeout(timerId);
    };
  }, []);

  const handleInputChange = (event) => {
    const newValue = event.target.value;
    setValue(newValue);

    clearTimeout(timerId);
    timerId = setTimeout(() => {
      // Perform the action here
      console.log(`Debounced value: ${value}`);
    }, 500);
  };

  return (
    <input type="text" value={value} onChange={handleInputChange} />
  );
};

export default DebouncedInput;

Conclusion

In conclusion, using debouncing can have several benefits, including improved system stability, reduced processing load, better user experience, increased system reliability, and ease of implementation. However, it also has some disadvantages, such as increased latency, increased complexity, reduced responsiveness, increased power consumption, and reduced sensitivity.

How toAdd Google Analytics to Next.js

ajidk — Fri, 26 Aug 2022 14:01:27 +0000

The implementation is straightforward and doesn't require any third-party library.

you will need:

a Next.Js project
a Google Analytics account

1 Add your google analytics id to your project .env.local file.

First, start with creating a .env.local file where you will place your Google Analytics key.

Tip: Check your .gitignore to make sure that you don't commit this file by accident. .env.local should have already been included by default in your Next.js project but check to make sure.

NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>

2 Inject Google Analytics tracking code into your project application.

Now that your key is set, you need to inject and configure Google Analytics' Global site tag (aka gtag) into your browser window.

To access the head element in your Next.js application, you need to create a custom _document.js file into your pages folder.

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

3 Custom functions to track pageviews and events.

Let's move on to the tracking piece of Google Analytics. In order to correctly track your user's behaviours, you will need to log page views and optionally, specific events triggered in your application.

Inside your lib/ga folder, create an index.js with two functions: one to log pageviews and the other events.

// log the pageview with their URL
export const pageview = (url) => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  })
}

// log specific events happening.
export const event = ({ action, params }) => {
  window.gtag('event', action, params)
}

lib/ga/index.js

4 Log pageviews in your project app.

The simplest way to log pageviews in your Next.js app is to subscribe to your router and listen for the routeChangeComplete event.

To do so, go into your _app.js file and with useEffect, check for new events happening with your router. There are many types of events but we only care when users navigate to a new page successfully (routeChangeComplete).

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as ga from '../lib/ga'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)
    }
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp

5 Log specific events in your project app.

Now that our page views are tracked, you may be interested in logging specific events in your application. Here is a list of Google Analytics Default events.

import { useState } from 'react'

import * as ga from '../lib/ga'

export default function Home() {
  const [query, setQuery] = useState("");

  const search = () => {
    ga.event({
      action: "search",
      params : {
        search_term: query
      }
    })
  }

  return (
    <div>
        <div>
          <input type="text" onChange={(event) => setQuery(event.target.value)}></input>
        </div>
        <div>
            <button onClick={() => search()}>Search</button>
        </div>
    </div>
  )
}

Data Instances

ajidk — Tue, 14 Jun 2022 01:36:01 +0000

When a new piece of data is introduced into a JavaScript program, the program keeps track of it in an instance of that data type. An instance is an individual case of a data type.

Booleans

Booleans are a primitive data type. They can be either true or false.

let boolean = true;

Math.random()

The Math.random() function returns a floating-point,random number between 0 (inclusive) and 1 (exclusive).

console.log(Math.random()) // 0 - 0.9

Math.floor()

The Math.floor() functions returns largers less than or equal to a given number.

console.log(Math.floor(5.05)); // 5

Single Line Comment

In JavaScript, single-line comments are created with two consecutive forward slashes //.

// This line will donate a comment

Strings

String are a primitive data type. They are any grouping of characters (letters, spaces, numbers, or symbols) surrounded by single quotes' or double quotes ".

let single = 'Who am I';
let double = "Who am I";

Null

Null is a primitive data type. It represents the intentional absence of value. In code, it is represented as null.

let x = null;

Arithmetic Operators

JavaScript support arithmetic operators for:

+ addition
- subtraction
* multiplication
/ division
% module

Multi-line Comments

In JavaScript, multi-line comments are created by surrounding the lines with /* at the beginning and */ at the end. Comments are good ways for a variety of reasons like explaining a code block or indicating some hints, etc.

/*
Multi line comment must be
changed before deployment.
*/
let baseUrl = 'https://ajidk.vercel.app/'

Remainder / Modulo Operator

The remainder operator, sometimes called modulo, returns the number that remains after the right-hand number divides into the left-hand number as many times as it evenly can.

// calculates # of weeks in a year, rounds down to
nearest integer.
const weeksInYear = Math.floor(365/7);

// calculates the number of days left over after 365 is
divides by 7
const daysLeftOver = 365 % 7

console.log("A year has " + weeksInYear + " weeks and " 
+ daysLeftOver + " days");

String Interpolation

String interpolation is the process of evaluating string literals containing one or more placeholders (expressions, variables, etc)
It can be performed using template literals:
text $(expression) text

let age = 7

// String concatenation
'Tommy is ' + age + ' years old.'

// String interpolation
`Tommy is ${age} years old.`

Assignment Operators

An assignment operator assigns a value to its left operand based on the value of its right operand. Here are some of them.

+= addition assignment
- subtraction assignment
* multiplication assignment
/ division assignment
% module assignment

let number = 100

// Both statements will add 10
number = number + 10
number += 10

console.log(number) // 120

Variables

Variables are used whenever there's a need to store a piece of data. A variable contains data that can be used in the program elsewhere. Using variables also ensures code re-usability since it can be used to replace the same value in multiple places.

const currency = '$'
let userIncome = 85000

console.log(currency + userIncome + ' is more than the average income.') // $85000 is more than the average income.

Undefined

undefined is a primitive JavaScript value that represents lack of defined value. Variables that are declared but not initialized to a value will have the value undefined.

var a;

console.log(a) // undefined

Template Literals

Template literals are strings that allow embedded expressions, ${expression}. While regular strings use single ' or double " quotes, template literals use backticks instead.

let name = "Ajidk"
console.log(`Hello, ${name}`) // Hello, Ajidk

console.log(`John is ${10+6} years old.`) // John is 16 years old.

Learn JavaScript: Variables

A variable is a container for data that is stored in computer memory. It is referenced by a descriptive name that a programmer can call to assign a specific value and retrieve it.

// examples of variables
let name = "Tammy"
const found = false
var age = 3
console.log(name, found, age) // Tammy, false, 3

Declaring Variables

To declare a variable in JavaScript, any of these 3 keywords can be used along with a variable name:

var is used in pre-ES6 versions of JavaScript.
let is the preferred way to declare a variable when it can be reassigned.
const is the preferred way to declare a variable with a constant value.

var age;
let weight;
const numberOfFingers = 20;

let Keyword

let creates a local variable in JavaScript & can be-re-assigned. Initialization during the declaration of a let variable is optional. A let variable will contain undefined if nothing is assigned to it.

let count;
console.log(count) // undefined
count = 10;
console.log(count) // 10

const Keyword

A constant variable can be declared using the keyword const.It must have an assignment. Any attempt of re-assigning a const variable will result in JavaScript runtime error.

const number = 10;

String Concatenation

In JavaScript, multiple strings can be concatenated together using the + operator. In the example, multiple string and variables containing string values have been concatenated. After execution of the code block, the displayText variable will contain the concatenated string.

let service = 'say bismillah bree'
let month = 'May 20th'
let displayText = 'oh my friends ' + service + ' so that life is blessed' + '.'

console.log(displayText) // oh my friend say bismillah bree so that life is blessed.

Introduction JavaScript

ajidk — Thu, 09 Jun 2022 07:48:30 +0000

console.log()

The console.log method is used to log or print messages to the console. It can also be used to print objects and other info.

console.log('Hello World!`); // Hello World!

JavaScript

JavaScript is a programming language that powers the dynamyc behavior on most websites. Alongside HTML and CSS, it is a core technology that makes the web run.

Methods

Methods return information about an object, and are called by appending an instance with a period., the method name, and parentheses.

Libraries

Libraries contain methods that can be called by appending the library name with a period ., the method name, and set of parentheses.

Numbers

Numbers are a primitive data type. They include the set of all integers and floating point numbers.

let amount = 5
let price = 16000;
let total = 80000;

String.length

The .length property of a string returns the number of characters that make up the string.

let message = 'Hello daddy!';
console.log(message.length); // 12
console.log('sugar'.length); // 5

Conclusion

JavaScript arrays have quite a lot of useful methods that can simplify our development efforts.Knowing these methods can save us time and can even boost the performance of our code.

Javascript Variable

ajidk — Thu, 02 Jun 2022 10:00:03 +0000

4 ways to Declare a Javascript Variable:

using var
using let
using const
using nothing

What are Variables?

Variable are container for storing data

example:

var x = 5;
var y = 6;
var z = x + y;

When to Use JavaScript var?

Always declare Javascript variables with var,let or const.
the var keyword is used in all JavaScript code from 1995 to 2015.
the let and const keywords were added to JavaScript in 2015.
if you want your code to run in older browser, you must use var.

When to Use JavaScript const?

if you want a general rules: always declare variables with const.
if you think the value of the variable can change, use let.
in this example, price1,price2, anda total, are variables:

const price1 = 10;
const price2 = 20;
let total = price1 + price2; //30

noted: the two variables price1 and price2 are declared with the const keyword. there are constant values and cannot changed. the variable total is declared with the let keyword.

JavaScript Identifiers

All JavaScript variables mus be identified with unique names.
The general rules for constructing names for variables are:

Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letters.
Names can also begin with $ and _.
names are case sensitive(a and A different variables).
reserved words cannot be used as names.

The Assignment operator

In JavaScript, the equal sign(=) is an assigment operator, not an equal to operator.

s = s + 16

Declaring a JavaScript Variable

You can declare a JavaScript variable with the var or the let keyword:

var carName;
or
let carName;

One Statement, Many Variables

let name='aji', lastName='dk',address:'Indonesia'

Value = undefined

A variable declared without a value will have the value undefined.

DRY “Don't Repeat Yourself”

ajidk — Thu, 26 May 2022 02:30:47 +0000

DRY is a basic principle in any software development. Certainly, it is the most understandable software principle, but not everything is so obvious. I want to show you when you don’t need to follow this principle.

DRY is an acronym, of “Don’t Repeat Yourself”. The main problem that DRY can solve is a reducing repetition of code. Sometimes you need to have already existed function in another module, class, etc. And the easiest way to do that is just copy&paste this function.Congratulations, DRY principle violated. Factual copping of code creates for you one huge problem:

It is hard to maintain all these functions on the whole project, and if you need to change this function — you should change it in all places where did you copy it.

How to reduce DRY
the key points for how to apply abstraction to write code that doesn’t repeat itself:

Create functions for common software patterns. We call them higher order function.
Replace the boilerplate in your code with higher order funcitons.

Some examples of higher order functions include:

map --- modifying each element in the array based on give rule

const finalParticipants = ["Taylor", "Donald", "Don"];

// add string after each final participant
const announcements = finalParticipants.map((member) => {
  return member + " joined the contest.";
});

console.log(announcements);
// [
//   "Taylor joined the contest.",
//   "Donald joined the contest.",
//   "Don joined the contest.",
// ];

filter --- getting subset of the array the passes a given criterion

const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter((n) => {
  return n > 5;
});
console.log(filteredArray); //[ 11, 42, 14, 39 ]

reduce --- combining everything in the array based on a given rule


const arrayOfNumbers = [1, 2, 3, 4];

const sum = arrayOfNumbers.reduce((accumulator, currentValue) => {  
  return accumulator + currentValue;
});

console.log(sum); // 10

forEach --- executes a callback function on each of the elements in an array in order.

const numbers = [28, 77, 45];

numbers.forEach((number) => {
  console.log(number);
  // 28
  // 77
  // 45
});

Advantages of DRY

Maintainability
Readability
Reuse
Cost
Testing

Disadvantages of DRY

Not all code needs to be merged into one piece. Some times 2 pieces of code can look similar but with subtle differences.
If the code is “over dried”, it becomes difficult to read and understand.
Often missed, DRY is not to be limited to just the code. It is to be applied in equal measure to database design, documentation, testing code etc.

Conclusion
Yes, these codes are identical right now. Does the change of one duplicated part can affect some other duplicated part? If It isn’t — you can duplicate the code

Uncontrolled textarea element

ajidk — Thu, 19 May 2022 06:44:12 +0000

Renders an uncontroller <textarea> element that uses a callback function to pass its value to the parent component.

Use the defaultValue passed down from the parent as the uncontrolled input field's initial value.
use the onChange event to fire the onValueChange callback and send the new value to the parent.