Skip to content

Instantly share code, notes, and snippets.

View dev-bazz's full-sized avatar

BaZz dev-bazz

9 followers · 11 following
View GitHub Profile
@dev-bazz
dev-bazz / qr-code-generating-with-vanilla-js.markdown
Created May 11, 2025 08:58 — forked from deepakpk009/qr-code-generating-with-vanilla-js.markdown
QR code generating with vanilla js
@dev-bazz
dev-bazz / React Native Normalization FN: Adjusted Screen Width with Figma Designs.md
Created April 6, 2025 18:22
Normalizes a given size value based on screen width for consistent UI across iOS and Android devices.

React Native Normalization FN: Adjusted Screen Width with Figma Designs

Preview:
import { Dimensions, PixelRatio, Platform } from 'react-native';

/**
 * # Adjusts a given size value based on the screen width to ensure consistent sizing across different devices.
 * using a base layout size of 320 for Figma designs.
 * On iOS, the adjusted size is rounded to the nearest pixel. On other platforms,
 * the value is rounded and slightly reduced to account for platform-specific differences.
@dev-bazz
dev-bazz / JavaScript ScrollSpy Implementation with Intersection Observer.md
Created April 6, 2025 14:20
This code snippet defines an interface called IntersectionObserverOptions. It retrieves the active section and adds it to a nav element if they are intersecting or not, then updates the class list based on certain conditions of each item in this

JavaScript ScrollSpy Implementation with Intersection Observer

Preview:
interface IntersectionObserverOptions {
	root?: Element | Document | null;
	rootMargin?: string;
	threshold?: number | number[];
}
/**
 * Gets the active section and adds the active class to the nav element
@dev-bazz
dev-bazz / Setting up a Coturn TURN Server using Docker.md
Created April 6, 2025 10:52
Commands for pulling a Coturn image and running it in a Docker container, exposing necessary ports for a TURN server.

Setting up a Coturn TURN Server using Docker

Preview:
docker pull coturn/coturn  # step 1

# docker run -d --name coturn-server -p 3478:3478 -p 3478:3478/udp -p 5349:5349 -p 5349:5349/udp -p 49160-49200:49160-49200/udp \
#        coturnserver --min-port=49160 --max-port=49200 # step 2 a

# turn:192.168.57.103:3478
@dev-bazz
dev-bazz / React Native Screen Size Normalization Hook.md
Created April 6, 2025 08:26
This code defines a custom hook in TypeScript for React Native that provides functions to normalize screen dimensions based on platform and pixel density.

React Native Screen Size Normalization Hook

Preview:
import {
	Platform,
	PixelRatio,
	useWindowDimensions,
} from 'react-native';

const useNormalize = () => {
@dev-bazz
dev-bazz / Scroll Snap Styling.md
Created March 31, 2025 19:28
This code snippet sets the overflow-y property to scroll, adds a snap type and aligning of an element. It also applies CSS styles based on its position or alignment for each child node in it.

Scroll Snap Styling

Preview:
.parent {
	overflow-y: scroll;
	scroll-snap-type: x mandatory;
	scroll-snap-align: start;
	& > * {
		scroll-snap-align: start;
	}
@dev-bazz
dev-bazz / Nodemon with File Watching.md
Created March 30, 2025 02:41
Configuration for running and watching a TypeScript project with Node.js, likely using a tool like nodemon or ts-node-dev.

Nodemon with File Watching

Preview:
{
  "watch": [
    "src/**/*.ts"
  ],
  "exec": "ts-node -r dotenv/config -r module-alias/register  src/index.ts ",
  "ext": "js ts",
 "events": {
@dev-bazz
dev-bazz / Node.js project configuration with npm scripts and module aliases.md
Created March 30, 2025 02:40
Configuration for a Node.js project, likely within a package.json file, defining npm scripts for starting, development, and production builds, along with custom module aliases for organized code structure.

Node.js project configuration with npm scripts and module aliases

Preview:
"scripts": {
    "start": "node -r dotenv/config -r module-alias/register ./dist/index.js",
    "dev": "nodemon ",
    "prod": "tsc"
  },
  "_moduleAliases": {
 "@": "dist",
@dev-bazz
dev-bazz / Node.js project configuration with npm scripts and module aliases.md
Created March 29, 2025 20:01
Defines npm scripts for starting a Node.js application, development mode, and production build. Also sets up module aliases for cleaner imports.

Node.js project configuration with npm scripts and module aliases

Preview:
"scripts": {
    "start": "node -r dotenv/config -r module-alias/register ./dist/index.js",
    "dev": "nodemon ",
    "prod": "tsc"
  },
  "_moduleAliases": {
 "@": "dist",
@dev-bazz
dev-bazz / TypeScript Snippet.md
Last active March 29, 2025 19:58
This code snippet sets up a server that listens on port 3000. It handles socket-level errors and shutdown handlers, which handle socket-level errors if the ports are in use or when it is down to reach an interval of 10 times before

Express Server Setup

Preview:
import app from './app';
import type { Application } from 'express';
import http from 'node:http';

const MAX_PORT_RETRIES = 10;
const DEFAULT_PORT = 3000;