DEV Community: PRINCE KUKREJA

Before You Learn a Framework, Master the Web: HTML, CSS, and Accessibility Essentials

PRINCE KUKREJA — Wed, 03 Dec 2025 13:48:20 +0000

There’s a pattern I keep seeing in the developer world today: many people begin their journey by jumping straight into JavaScript frameworks.

I’ll be honest — I made this mistake myself.

When I first started coding, I jumped straight into JavaScript frameworks without really understanding the fundamentals of the web. I loved building fast, interactive apps and experimenting with all the latest tools and libraries. But underneath all of that, I was ignoring the basics — especially accessibility.

I used <div> for buttons.
I used <span> for headings.

I styled everything to look right, but nothing had real structure or meaning.

It took time (and a few painful code reviews) for me to realise something important:

Frameworks change. The web does not.
And accessibility isn’t optional.

Once I understood that, it completely changed the way I build things.
And it’s never too late to fix this — whether you’re new or experienced.

HTML Is the Structure of the Web

HTML gives meaning to your content. It tells the browser — and assistive technologies — what something is, not just how it looks.

A few examples we all overlook at some point:

A button should always be a <button>
Headings belong inside <h1> to <h6>
Lists should use <ul> or <ol>
Navigation belongs in a <nav>
Content sections belong in <section> or <article>

When everything is a <div>, nothing has structure. And without structure, accessibility breaks.

Why Semantic HTML Matters

1. Accessibility

Millions of users rely on assistive technologies like screen readers, voice control, and keyboard navigation. Semantic HTML gives you accessibility features for free:

<button> is automatically keyboard-focusable
<label> naturally connects to inputs
<nav> tells assistive tools that it's a navigation region
Headings create a logical outline of your page

Most accessibility issues disappear when you simply use the correct elements.

2. WCAG — The Foundations of Accessibility

WCAG (Web Content Accessibility Guidelines) defines how to make the web accessible, following four principles (P.O.U.R.):

Perceivable — users should be able to see or hear content
Operable — users must be able to navigate using keyboard, mouse, or assistive devices
Understandable — the interface must be clear and predictable
Robust — your content should work across browsers and assistive tech

Semantic HTML naturally supports all four.

3. SEO and Discoverability

Search engines read your HTML structure the way assistive tech does:

Headings create hierarchy
Articles define pieces of content
Sections organise meaning

Semantic HTML improves SEO without additional work.

4. Maintainability

Good HTML is self-documenting.

A <nav> is obviously navigation.
A <button> is clearly interactive.
An <article> tells you it contains standalone content.

This makes debugging, onboarding, and scaling much easier.

Understanding ARIA (Accessible Rich Internet Applications)

ARIA exists to fill the gaps when native HTML can’t express meaning or state on its own.

Common ARIA attributes include:

aria-label="Close menu"
aria-expanded="false"
role="button"
aria-live="polite"

But remember the golden rule:

Use native HTML first.

ARIA should enhance, not replace, native elements.

If something can be a real <button>, don’t turn a <div> into an interactive element with role="button".

Native elements come with built-in accessibility—use that power before reaching for ARIA.

A Quick Example

❌ Incorrect

<div onclick="handleClick()">
  Submit
</div>

Problems:

No keyboard support
No focus behaviour
Not announced as a button
Requires extra ARIA to fix basic functionality

✅ Correct

<button onclick="handleClick()">
  Submit
</button>

Benefits of Using Native HTML

Keyboard accessible
Proper focus
Screen-reader friendly
No ARIA needed

How to Think Like a Web Developer

1. Ask the Right Questions

Good development starts before you write any code.
When planning a UI, pause and ask:

What is the correct HTML element for this?
Does this need a visible label or an accessible name?
Should this be a link or a button?
Will assistive technologies understand what this element does?
Is this component truly interactive?

These questions guide you toward more semantic, accessible, and maintainable markup.

2. Build in Layers

Great interfaces are built from the ground up. Follow this order:

Follow this order:

Semantic HTML — establish structure and meaning
CSS — define layout, appearance, and responsive behaviour
JavaScript — add interactivity and enhancements
Framework integration — bring it into your tool of choice

This layered approach keeps your code clean, scalable, and resilient — no matter what framework or tool you work with.

3. Test Like a Real User

Accessibility isn’t just about code — it’s about how people actually interact with your product.
A simple habit of testing your interface like a real user can uncover issues you’d never notice otherwise.

Here’s a quick checklist:

Navigate your entire page using only the keyboard
Turn on a screen reader (NVDA, VoiceOver) and listen to the flow
Disable CSS and see if the structure still holds up
Zoom the page to 200% and check if it remains usable
Verify that your heading levels follow a logical order

If your page is still understandable and functional without styling, your semantics are on the right track.

Final Thoughts — You Are a Web Developer First

Frameworks, libraries, and tools will keep evolving. React, Vue, Svelte — today’s popular choices may be replaced tomorrow. New ones will always appear.

But HTML, CSS, and JavaScript are the foundation of the web — the skills that will never become obsolete.

Mastering accessibility and web fundamentals is the most future-proof investment you can make as a developer. It ensures your work is usable, maintainable, and inclusive — no matter what tools come next.

It’s never too late to start.

Write semantic code.
Build accessible experiences.
Understand how the browser works.

This is what makes you a real web developer.

Happy Coding!

Building Navigation in React Native with React Navigation

PRINCE KUKREJA — Mon, 09 Jun 2025 10:08:36 +0000

After getting comfortable with the basics of React Native and Expo, I wanted my app to feel like a real mobile app—not just a single screen. That’s when I discovered React Navigation, the go-to library for handling navigation in React Native.

Why React Navigation?

Coming from web development, I was used to react-router-dom. React Navigation gave me that same intuitive routing experience—but optimized for mobile. It supports:

Stack-based navigation (like a browser’s back button, but for apps)
Native gestures and animations (swipes, transitions)
Platform-specific behaviors (e.g., iOS back swipe vs. Android’s back button)

Setting Up React Navigation with Expo

First, install the required packages in your Expo project:

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install react-native-gesture-handler react-native-reanimated
npm install @react-navigation/native-stack

(Expo handles the native dependencies automatically—no need for pod install or Gradle changes!)

Creating a Stack Navigator
I started with a simple stack navigator (think of it like a stack of screens where the last one is visible). Here’s how I set it up in App.js:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Defining Screens
Each screen is just a React component. Here’s a basic example:

HomeScreen.js

import { View, Text, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome to the Home Screen!</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

DetailsScreen.js

import { View, Text } from 'react-native';

export default function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

What Felt Magical

Zero native code changes – Expo + React Navigation handled everything.

Native-like transitions – Smooth animations and gestures worked out of the box.

Familiar mental model – If you’ve used routing on the web, this feels just as intuitive.

Pro Tip: Common Gotchas

Wrap your app in NavigationContainer (forgot this once and spent 20 minutes debugging 😅).
Need tabs or drawers? React Navigation also has @react-navigation/bottom-tabs and @react-navigation/drawer.

Happy coding!

My Journey with React Native and Expo

PRINCE KUKREJA — Wed, 04 Jun 2025 19:08:05 +0000

Ever wondered how to start building mobile apps without diving deep into native iOS or Android environments? That was me — until I discovered React Native with Expo.

Why I Chose React Native and Expo

As a developer who's spent most of my time in the web world, mobile always felt like a different beast. Native toolchains, emulators, SDKs — it all seemed overwhelming. But React Native offered a familiar environment with JavaScript and React. And when I stumbled upon Expo, it was a game-changer.

Expo simplified everything — no need for Xcode or Android Studio initially, and I could test apps instantly on my phone. I figured I'd document how I got started to help others who might be in the same boat.

Prerequisites

Here's what I had set up before diving in:

Node.js (v18 or later)
npm or yarn
A smartphone with the Expo Go app installed

Step 1: Installing Expo CLI

To kick things off, I installed the Expo CLI globally using npm:

npm install -g expo-cli

Or with yarn:

yarn global add expo-cli

Step 2: Creating My First Expo App

I spun up my first project using the create-expo-app command:

npx create-expo-app MyFirstApp
cd MyFirstApp
npx expo start

Expo launched a local server and opened a QR code in the terminal. I scanned it with the Expo Go app on my phone — and just like that, I saw "Hello world" on my device.

Project Structure Overview

The initial project structure looked like this:

MyFirstApp/
├── App.js
├── assets/
├── node_modules/
├── package.json

App.js: The entry point of the app
assets/: Where images and fonts go
package.json: Like any JavaScript project

Playing with Basic Components

Here's a quick example of what my App.js looked like when I started playing around:

{`import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
      <Button title="Press me" onPress={() => alert('You pressed the button!')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});`}

It felt like writing a React web app, but for mobile. View is like a div, Text is self-explanatory, and styles are done via StyleSheet.create() — super familiar.

Adding Theme Toggle with Context

I got curious and decided to implement a basic light/dark theme toggle using context.

Here's a stripped-down version of what I did:

{`import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);
  const toggleTheme = () => setIsDark(!isDark);

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);`}

This made it easy to use a global toggle and wrap different components with theme-specific styles.

Testing on Real Devices

One of my favorite parts about using Expo is testing on actual hardware with the Expo Go app. Just scan the QR code and you're good to go — no need to fire up an emulator or install anything heavy.

Of course, once I wanted to dive into custom native modules, I could always "eject" from Expo — but for 80% of use cases, Expo was more than enough.

What's Next on My List?

After exploring the basics, here's what I'm planning to learn next:

Navigation with React Navigation
Accessing device features like Camera and Location using Expo APIs
Animations and theming
Deploying to app stores

Final Thoughts

Jumping into mobile development felt intimidating at first. But with Expo and React Native, I was up and running in minutes — all using technologies I already knew.

If you're a JavaScript/React developer like me, and you've been curious about building mobile apps, this is the perfect way to start.

Have questions or want to share your first Expo app?
Let me know in the comments — I'd love to hear about your journey too!

Happy Coding!

Master TypeScript with These Essential Concepts

PRINCE KUKREJA — Mon, 20 Jan 2025 15:09:36 +0000

This quarter, one of my company goals was to dive deeper into TypeScript using TypeHero challenges. I want to share my learnings about some of TypeScript's most powerful features. No matter where you are in your coding journey—whether you're a seasoned pro or a beginner—this guide will provide you with the foundational knowledge to confidently dive into TypeScript.

So, let's get typing!

Primitive Data Types
Type Aliases
Literal Types
Type Unions
Generic Function Arguments
Generic Type Arguments
Default Generic Arguments
Generic Type Constraints
Index Signatures
Indexed Types
The keyof Operator
The typeof Operator
Mapped Object Types

Primitive Data Types

TypeScript includes all JavaScript primitive types: string, number, boolean, null, undefined, symbol, and bigint. These form the foundation of the type system:

let name: string = "Alice";
let age: number = 25;
let isActive: boolean = true;
let nothing: null = null;
let notDefined: undefined = undefined;
let uniqueSymbol: symbol = Symbol("id");
let bigNumber: bigint = 9007199254740991n;

Type Aliases

Type aliases let you create custom names for types. They're great for reusability and making your code more readable:

type UserID = string;
type Point = {
  x: number;
  y: number;
};

// Using the types
const userId: UserID = "user123";
const coordinate: Point = { x: 10, y: 20 };

Literal Types

Literal types allow you to specify exact values that a type can have:

type Direction = "north" | "south" | "east" | "west";
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(direction: Direction, spaces: DiceRoll) {
  console.log(`Moving ${spaces} spaces ${direction}`);
}

move("north", 3); // Valid
// move("northeast", 7); // Error: Invalid direction and number

Type Unions

Unions allow a value to be one of several types. They're perfect for handling multiple possible types:

type StringOrNumber = string | number;
type Status = "loading" | "success" | "error";

function processId(id: StringOrNumber) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

Generic Function Arguments

Generics make functions more flexible by allowing them to work with different types while maintaining type safety:

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

// TypeScript infers the correct return types
const numberResult = firstElement([1, 2, 3]); // type: number
const stringResult = firstElement(["a", "b", "c"]); // type: string

Think of them as placeholders for different data types within a function.

Generic Type Arguments

Generic type arguments work similarly but for type definitions:

type Box<T> = {
  content: T;
  timestamp: Date;
};

const stringBox: Box<string> = {
  content: "Hello",
  timestamp: new Date()
};

const numberBox: Box<number> = {
  content: 42,
  timestamp: new Date()
};

Like function arguments, but for defining flexible data structures.

Default Generic Arguments

You can specify default types for generics, similar to default function parameters:

interface ApiResponse<T = any> {
  data: T;
  status: number;
  message: string;
}

// Uses the default 'any' type
const simpleResponse: ApiResponse = {
  data: "anything",
  status: 200,
  message: "Success"
};

// Specifies a custom type
const typedResponse: ApiResponse<string[]> = {
  data: ["item1", "item2"],
  status: 200,
  message: "Success"
};

It provides a fallback type if none is explicitly specified.

Generic Type Constraints

Constraints limit what types can be used with generics using the extends keyword:

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): void {
  console.log(item.length);
}

logLength("hello"); // Works: strings have length
logLength([1, 2, 3]); // Works: arrays have length
// logLength(123); // Error: numbers don't have length

Ensure that only specific types can be used in a generic context.

Index Signatures

Index signatures allow you to type objects with dynamic property names:

type Dictionary = {
  [key: string]: string;
};

const colors: Dictionary = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF"
};

// Any string key is allowed
colors.purple = "#800080";

Define the shape of objects with a variable number of properties.

Indexed Types

Indexed types let you access the type of a property in another type:

interface User {
  name: string;
  age: number;
  email: string;
}

type AgeType = User["age"]; // type: number
type ContactInfo = User["email" | "name"]; // type: string

Access and manipulate the types of specific properties within an object.

The keyof Operator

keyof gets all property names from a type as a union:

interface Product {
  id: number;
  name: string;
  price: number;
}

type ProductKeys = keyof Product; // "id" | "name" | "price"

function getProperty(obj: Product, key: ProductKeys) {
  return obj[key];
}

Extract all possible property names from a given type.

The typeof Operator

In type contexts, typeof creates a type based on the type of a value:

const user = {
  name: "Alice",
  age: 25,
  role: "admin"
};

type User = typeof user;

// Equivalent to:
// type User = {
//   name: string;
//   age: number;
//   role: string;
// }

Determine the type of a variable or expression at compile time.

Mapped Object Types

Mapped types let you create new types based on old ones by transforming properties:

type Optional<T> = {
  [K in keyof T]?: T[K];
};

type ReadOnly<T> = {
  readonly [K in keyof T]: T[K];
};

interface Todo {
  title: "string;"
  description: "string;"
}

type OptionalTodo = Optional<Todo>;
// Equivalent to:
// {
//   title?: string;
//   description?: string;
// }

Transform existing object types into new ones by modifying their properties.

Conclusion

TypeScript's type system is both powerful and flexible, making it an essential tool for developers. While it may feel overwhelming at first, consistent practice and exploration will unlock its true potential. Dive into resources like TypeHero, experiment with these concepts in your projects, and explore the TypeScript documentation to deepen your understanding. The best way to master TypeScript is to start applying it—one step at a time!

Happy coding!

Preserving Scroll State on Tab Change in Angular

PRINCE KUKREJA — Fri, 17 Jan 2025 11:37:53 +0000

While working on a multi-tabbed Angular application, I encountered a challenge—how to preserve the scroll state as users switch between tabs. This feature was essential to enhance the user experience by ensuring users could pick up right where they left off when navigating between tabs.

In this blog, I’ll walk you through how I added this feature to the project. It’s a simple yet effective way to maintain scroll positions for individual tabs.

The Problem

By default, switching between tabs often reloads the content, resetting the scroll position. This behavior can be frustrating for users, especially when navigating through long lists or data-intensive pages. To solve this, we need to:

Save the scroll position of the current tab before switching.
Restore the scroll position when the user returns to the tab.

The Solution

We can use window.scrollY to capture the current vertical scroll position and save it in a state object. When the user navigates back to a tab, we retrieve and restore the saved position.

Here’s how to implement it step by step:

1. Setup Scroll State Management

Create a property to track the scroll positions for each tab.

export class TabComponent {
  activeTab: string = 'tab1';
  tabScrollStates: { [key: string]: number } = {};

  onTabChange(newTab: string): void {
    // Save the current scroll position for the active tab
    this.tabScrollStates[this.activeTab] = window.scrollY || 0;

    // Update the active tab
    this.activeTab = newTab;

    // Restore the scroll position for the new tab
    const savedScrollPosition = this.tabScrollStates[newTab] || 0;
    // Delay scroll restoration to ensure the DOM has updated with the new tab content
    setTimeout(() => {
      window.scrollTo(0, savedScrollPosition);
    }, 0);
  }
}

2. Connect the Tabs to the Logic

In your template, bind the onTabChange method to the tab selection event.

<div>
  <button (click)="onTabChange('tab1')">Tab 1</button>
  <button (click)="onTabChange('tab2')">Tab 2</button>
</div>

<div *ngIf="activeTab === 'tab1'">
  <p>Content for Tab 1</p>
  <!-- Long content to test scrolling -->
</div>

<div *ngIf="activeTab === 'tab2'">
  <p>Content for Tab 2</p>
  <!-- Long content to test scrolling -->
</div>

3. Optional Enhancements

Debouncing: If users switch tabs rapidly, debouncing can prevent multiple save operations within a short time frame, reducing performance overhead and ensuring consistent behavior
Horizontal Scroll: Use window.scrollX for horizontal scroll preservation.

const savedHorizontalScroll = window.scrollX || 0;
setTimeout(() => {
  window.scrollTo(savedHorizontalScroll, savedScrollPosition);
}, 0);

Conclusion

By managing scroll positions effectively, you can greatly improve the user experience of your Angular applications. This solution is simple, lightweight, and can be easily extended for more complex scenarios.

Have you implemented similar scroll management techniques? Share your insights and improvements in the comments below!
Happy coding! 🚀

Why Every Developer Should Use Git Rebase

PRINCE KUKREJA — Wed, 18 Dec 2024 20:28:38 +0000

When working on a project, I frequently pulled changes from the main branch (e.g., development or master) using git pull. While this kept my branch up to date, it often led to messy commit histories with numerous merge commits. This made tracing changes, debugging, and reviewing pull requests more challenging. I also ran into issues with merge conflicts and potential bugs. That’s when I started using Git rebase, and it provided a much cleaner, more organized way to integrate changes without the clutter of merge commits.

Let’s learn today why, when, and how to use Git rebase to streamline your workflow and improve code quality.

Why Git Rebase Should Be Part of a Developer's Workflow?

Rebasing is a powerful Git feature that allows you to integrate changes from one branch into another by replaying the commits on top of the latest changes. Instead of creating unnecessary merge commits, it rewrites the commit history, making it linear and easier to understand. Here are some benefits of using git rebase:

Cleaner Commit History: Rebasing ensures that your branch history doesn’t have cluttered merge commits.
Improved Pull Request Reviews: A linear history is easier for teammates to review and understand.
Reduced Merge Conflicts: Rebasing helps you resolve conflicts locally before pushing changes, reducing potential issues during pull requests.

When to Use Git Rebase

While rebase is useful, it’s not a one-size-fits-all solution. Here’s when one should consider rebasing:

Before creating a pull request: Rebase the feature branch on the main branch to ensure it is up to date.
While collaborating: If the team follows a convention where a clean commit history is crucial.
To squash commits: When you’ve made several incremental commits and want to combine them into a single meaningful one.

How to Rebase

Here’s a step-by-step guide to rebasing effectively:

Start with the latest main branch:

git checkout main
git pull origin main

Switch to your feature branch:

git checkout feature-branch

Rebase onto the main branch:

git rebase main

Resolve conflicts, if any: Once resolved, continue the rebase:

git add .
git rebase --continue

Push your changes: If you’ve already pushed commits before rebasing, you’ll need to force push:

git push --force

Bonus: Fundamental Git Practices for Developers

Pull with Rebase: Configure Git to rebase by default when pulling changes:

git config --global pull.rebase true

Write Meaningful Commit Messages: Keep commit messages concise but descriptive.
Use Branches for Features: Always create a new branch for each feature or bug fix.
Sync Regularly: Frequently rebase the feature branch to avoid diverging too much from the main branch.

Conclusion

Using Git rebase helped me to keep the commit history clean and minimize conflicts. It may take some practice, but the benefits for code quality and productivity are huge.
Start using rebase today, and take your development skills to the next level!
Happy Coding!

Angular's New Feature: Signals

PRINCE KUKREJA — Fri, 29 Nov 2024 21:11:00 +0000

Hey there, Angular enthusiasts! Today, I'm excited to share with you one of the latest and coolest features in Angular: Signals. If you're like me, always on the lookout for ways to make your code more efficient and easier to manage, you're going to love this.

What Are Signals?
In simple terms, Signals are a new way to handle data changes in Angular applications. Traditionally, we use services, RxJS, or state management libraries to handle data changes. Signals offer a more straightforward and efficient way to track and react to data changes within our components.

Why Use Signals?
Before we dive into how to use Signals, let's talk about why you might want to use them. Here are a few reasons:

Simplicity: Signals make it easier to manage and track data changes.
Performance: Signals can help optimize performance by reducing unnecessary re-renders.
Reactivity: They provide a more reactive and declarative approach to handling data changes.

Getting Started with Signals
Let's get our hands dirty and see how we can use Signals in an Angular application.

Step 1: Install Angular (if you haven't already)
First, make sure you have Angular installed. If not, you can install it using the Angular CLI:

npm install -g @angular/cli

Then, create a new Angular project:

ng new angular-signals-demo
cd angular-signals-demo

Step 2: Setting Up Signals
To use Signals, you need to install the @angular/signals package. Run the following command:

npm install @angular/signals

Step 3: Using Signals in Your Component

Now, let's create a simple component that uses Signals. First, generate a new component:

ng generate component signal-demo

Open the generated signal-demo.component.ts file and modify it as follows:

import { Component, Signal } from '@angular/core';

@Component({
  selector: 'app-signal-demo',
  templateUrl: './signal-demo.component.html',
  styleUrls: ['./signal-demo.component.css']
})
export class SignalDemoComponent {
  countSignal = new Signal<number>(0);

  increment() {
    this.countSignal.update((currentValue) => currentValue + 1);
  }

  decrement() {
    this.countSignal.update((currentValue) => currentValue - 1);
  }
}

In this example, we created a countSignal to hold our counter value. We also have two methods, increment and decrement, to update the signal's value.

Step 4: Binding Signals to the Template
Next, let's bind our signal to the template. Open signal-demo.component.html and update it as follows:

<div>
  <h1>Counter: {{ countSignal.value }}</h1>
  <button (click)="increment()">Increment</button>
  <button (click)="decrement()">Decrement</button>
</div>

Here, we display the value of countSignal and bind the increment and decrement methods to buttons.

Seeing Signals in Action
Now, let's run our application to see Signals in action. Use the following command to start the Angular development server:

ng serve

Navigate to http://localhost:4200 in your browser, and you should see your counter component. Click the buttons to see the counter update in real-time!

Conclusion
That's it! You've just learned how to use Angular's new Signals feature. Signals provide a simple and efficient way to manage reactive data in your Angular applications. They can help improve your code's readability and performance.

I hope you found this introduction to Signals helpful. If you have any questions or want to share your experiences with Signals, feel free to leave a comment below. Happy coding!

Setting Up ESLint and Prettier in an Ionic Angular Project

PRINCE KUKREJA — Mon, 27 May 2024 09:27:55 +0000

Maintaining clean and consistent code can be challenging, especially as your project grows. Thankfully, tools like ESLint and Prettier can help. In this guide, I'll walk you through setting up these tools in your Ionic Angular project.

Step 1: Install ESLint and Prettier
First, we need to install ESLint and Prettier along with their necessary plugins.

Install ESLint:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Install Prettier:

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Step 2: Configure ESLint
Create a .eslintrc.json file in the root of your project and add the following configuration:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}

Step 3: Configure Prettier
Create a .prettierrc file in the root of your project:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true
}

This configuration makes Prettier format your code with single quotes, trailing commas, a maximum line width of 80 characters, a tab width of 2 spaces, and semicolons at the end of statements.

Step 4: Ignore Files
To prevent ESLint and Prettier from running on certain files or directories, create the following ignore files.

Create a .eslintignore file:

node_modules
dist
www

Create a .prettierignore file:

node_modules
dist
www

Step 5: Add Scripts to package.json
To make it easy to run ESLint and Prettier, add the following scripts to your package.json:

"scripts": {
  "lint": "eslint . --ext .ts,.html",
  "lint:fix": "eslint . --ext .ts,.html --fix",
  "format": "prettier --write \"src/**/*.{ts,html,scss}\""
}

Step 6: Optional VS Code Integration
If you are using Visual Studio Code, you can install the ESLint and Prettier extensions for a better development experience.

Install ESLint Extension: Go to the Extensions view (Ctrl+Shift+X), search for "ESLint" by Dirk Baeumer, and install it.
Install Prettier Extension: Go to the Extensions view, search for "Prettier - Code formatter" by Esben Petersen, and install it.
You can also configure VS Code to auto-fix lint and format on save by adding the following to your settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Step 7: Running Linting and Formatting
You can now use the scripts defined in your package.json to lint and format your code:

Lint the code: Run the following command to lint your code:

npm run lint

Fix linting errors: To automatically fix linting errors, run:

npm run lint:fix

Format the code: To format your code with Prettier, run:

npm run format

Conclusion
By following these steps, we can set up ESLint and Prettier in our Ionic Angular project. These tools will help keep the code clean and consistent, making it easier to maintain.
Happy coding!.

Front-End Developer Essentials: Skills You Can't Do Without

PRINCE KUKREJA — Tue, 12 Mar 2024 07:50:09 +0000

Hey there! Ever wondered who's behind those stunning websites you love scrolling through? That's me — a front-end developer!

So, what do I do? Well, while web designers focus on how a website looks, I'm all about bringing that design to life on the web. I use languages like HTML, CSS, and JavaScript to create those smooth, interactive features you see.

Let's talk about some key skills every front-end developer needs:

HTML & CSS: These are like my building blocks. HTML gives structure to a webpage, while CSS styles it up, making it look cool.
JavaScript: This is what makes websites interactive. Think of games, quizzes, or animations—JavaScript's behind it all.
TypeScript: It's like JavaScript's big brother, adding more structure and making code easier to manage.
Frameworks and Libraries: These are like shortcuts. They help speed up development, whether it's making a website look sleek with Bootstrap or creating dynamic interfaces with Angular, Vue, or React.
CSS Preprocessors: These make CSS less of a headache by adding handy features and making code more efficient.
Responsive Design: With so many devices out there, I've got to make sure websites look good on all of them. That's where responsive design comes in.
Cross-Browser Compatibility: Not all browsers are created equal, so I make sure websites work smoothly across all of them.
Version Control: It's like a safety net for code changes. Git is my go-to tool for keeping track of everything.
Testing and Debugging: I need to make sure my code works flawlessly, so testing is a big part of my job. Tools like Cypress and Mocha make it easier.
Command Line: Though GUIs are great, they have limits. Sometimes, you'll need the command line. It lets you do powerful tasks quickly. Mastering it boosts your front-end skills big time.
Web Performance: Speed matters! I use tools like Grunt and Gulp to optimize images, CSS and JS minification for faster loading times.

And that's a wrap! Being a front-end developer is all about combining creativity with technical skills to bring websites to life.
Happy Coding!

JavaScript's Best-Kept Secrets: Unveiling Lesser-Known Features!

PRINCE KUKREJA — Mon, 26 Feb 2024 20:39:09 +0000

JavaScript is a super cool language with lots of neat stuff, but guess what? JavaScript has some cool secret tricks that can make coding even more fun. Let me show you these hidden gems and how they can make your code better and your projects awesome!

Object.freeze()

The Object.freeze() method allows you to freeze an object, preventing any changes to its properties or prototype. This can be useful to ensure that an object remains immutable and its properties cannot be modified accidentally.

const person = {
  name: 'John',
  age: 30
};


Object.freeze(person);

person.age = 40; // This will not have any effect
console.log(person); // Output: { name: 'John', age: 30 }

String.padStart() and String.padEnd()

The String.padStart() and String.padEnd() methods pad the current string with another string (repeated, if needed) so that the resulting string reaches the given length. These methods are useful for formatting strings, especially for aligning text in tables or UI elements.

const number = '123';
console.log(number.padStart(5, '0')); // Output: 00123

const message = 'Hello';
console.log(message.padEnd(10, '!')); // Output: Hello!!!!!
;

These methods provide a convenient way to format strings.

Array.prototype.flat()

The Array.prototype.flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. This can be handy for flattening arrays with nested arrays.

const nestedArray = [1, [2, [3, [4]]]];
const flattenedArray = nestedArray.flat(Infinity);
console.log(flattenedArray); // Output: [1, 2, 3, 4]

String.prototype.trimStart() and String.prototype.trimEnd()

These methods trim whitespace from the beginning (trimStart()) or end (trimEnd()) of a string. They are handy alternatives to String.prototype.trim() when you want to trim whitespace from specific sides of a string.

const text = '   Hello, World!   ';

console.log(text.trimStart()); // Output: 'Hello, World!   '
console.log(text.trimEnd());   // Output: '   Hello, World!'

Object.fromEntries()

The Object.fromEntries() method transforms a list of key-value pairs into an object. It is the counterpart of Object.entries(), which returns an array of key-value pairs from an object.

const entries = [['name', 'John'], ['age', 30]];
const person = Object.fromEntries(entries);
console.log(person); // Output: { name: 'John', age: 30 }

Conclusion
JavaScript has some really cool secrets that can make your code shorter, easier to understand and work better. Knowing and using these special features can make you a better JavaScript coder and make your projects look awesome.

So, next time you're coding in JavaScript, remember to explore these hidden treasures!

I hope you found these JavaScript tricks helpful! Feel free to share any more cool JavaScript tips you know in the comments below.
Happy coding!

Don't be AFRAID of Typescript!

PRINCE KUKREJA — Wed, 21 Feb 2024 13:21:56 +0000

Introduction:
Welcome to the world of TypeScript, where static typing and advanced features make JavaScript development more robust and manageable. In this beginner-friendly blog, I'll walk you through TypeScript using real-world examples to illustrate its concepts and benefits. Let's dive in together!

Static Typing with Basic Types: One of TypeScript's standout features is its support for static typing. Let's start with some basic examples to illustrate this concept:

// Example 1: Static Typing with Basic Types
let name: string = "John";
let age: number = 30;
let isStudent: boolean = true;

console.log(`Name: ${name}, Age: ${age}, Student: ${isStudent}`);  
//Output: Name: John, Age: 30, Student: true

In this example, we declare variables with explicit types (string, number, boolean). This allows the TypeScript compiler to catch type-related errors early in the development process, ensuring code reliability.

Interfaces and Type Annotations: Interfaces in TypeScript provide a way to define the shape of objects. Let's see how interfaces can be used with type annotations:

// Example 2: Interfaces and Type Annotations
interface Person {
  name: string;
  age: number;
}

function greet(person: Person): void {
  console.log(`Hello, ${person.name}!`);
}

let user: Person = { name: "Alice", age: 25 };
greet(user);
//Output: Hello, Alice!

Here, we define an interface Person with name and age properties. The greet function takes an object that conforms to this interface as an argument, ensuring type safety.

Classes and Inheritance: TypeScript supports object-oriented programming concepts like classes and inheritance. Let's create a simple class hierarchy:

// Example 3: Classes and Inheritance
class Animal {
  constructor(public name: string) {}
  move(distance: number = 0): void {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

class Dog extends Animal {
  bark(): void {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.bark();
dog.move(10);
// Output: Woof! Woof!
// Output: Buddy moved 10 meters.

In this example, we define a base class Animal with a move method, and a derived class Dog that extends Animal and adds a bark method. This demonstrates TypeScript's support for classical inheritance.

Conclusion:
TypeScript serves as a game-changer in modern web development, providing developers with powerful tools to create safer and more maintainable code. By embracing TypeScript's features such as static typing, interfaces, and classes, you can significantly improve productivity and code quality in your projects.

While we've covered some fundamental aspects of TypeScript in this blog, there's much more to explore.

Happy coding!

Vue 3's Composition API: Unleashing the Web Developer's Toolbox

PRINCE KUKREJA — Thu, 11 Jan 2024 08:01:48 +0000

Vue 3 introduces the Composition API, a game-changer for web developers. Imagine it as a high-tech toolbox that simplifies the process of creating amazing websites. It's like having a set of powerful tools, each with a specific purpose, to craft your website masterpiece effortlessly!

Building with Tools:
The Composition API organizes code like assembling tools for specific tasks. Think of it as combining diverse tools that effortlessly shape your website into something extraordinary!

Powerful Tools – reactive:
One standout tool is the reactive function, managing dynamic elements on a website. It acts like an intelligent overseer, ensuring everything adapts harmoniously.

import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    return { state };
  },
};

Opening and Closing Acts:
Special commands like onMounted and onUnmounted act as stage directors, triggering actions when the show begins and concluding tasks when it ends.

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      cueOpeningLine('Hello, world! The show has started.');
    });

    onUnmounted(() => {
      cueClosingLine('Goodbye! The show is over.');
    });
  },
};

Reusable Scripts:
Envision the Composition API as a scriptwriting toolkit, allowing developers to create concise scripts for reuse across various website sections.

// scriptToolkit.js
import { reactive } from 'vue';

export function useScript() {
  const state = reactive({
    count: 0,
  });

  const executeAction = () => {
    state.count++;
  };

  return { state, executeAction };
}

// MyComponent.vue
import { useScript } from './scriptToolkit';

export default {
  setup() {
    const { state, executeAction } = useScript();

    return { state, executeAction };
  },
};

Orchestrating a Symphony:
The Composition API lets developers compose code like orchestrating a symphony, with each segment playing a unique role, much like diverse instruments harmonizing in a musical ensemble.

Conclusion:
Vue 3's Composition API serves as a dynamic toolbox, simplifying the coding process with powerful tools. It's like having a versatile workshop, allowing developers to effortlessly assemble and fine-tune their web development masterpieces!

DEV Community: PRINCE KUKREJA

Before You Learn a Framework, Master the Web: HTML, CSS, and Accessibility Essentials

HTML Is the Structure of the Web

Why Semantic HTML Matters

1. Accessibility

2. WCAG — The Foundations of Accessibility

3. SEO and Discoverability

4. Maintainability

Understanding ARIA (Accessible Rich Internet Applications)

A Quick Example

❌ Incorrect

✅ Correct

Benefits of Using Native HTML

How to Think Like a Web Developer

1. Ask the Right Questions

2. Build in Layers

3. Test Like a Real User

Final Thoughts — You Are a Web Developer First

Building Navigation in React Native with React Navigation

Why React Navigation?

Setting Up React Navigation with Expo

My Journey with React Native and Expo

Why I Chose React Native and Expo

Prerequisites

Step 1: Installing Expo CLI

Step 2: Creating My First Expo App

Project Structure Overview

Playing with Basic Components

Adding Theme Toggle with Context

Testing on Real Devices

What's Next on My List?

Final Thoughts

Master TypeScript with These Essential Concepts

Table of Contents

Primitive Data Types

Type Aliases

Literal Types

Type Unions

Generic Function Arguments

Generic Type Arguments

Default Generic Arguments

Generic Type Constraints

Index Signatures

Indexed Types

The keyof Operator

The typeof Operator

Mapped Object Types

Conclusion

Preserving Scroll State on Tab Change in Angular

The Problem

The Solution

1. Setup Scroll State Management

2. Connect the Tabs to the Logic

3. Optional Enhancements

Conclusion

Why Every Developer Should Use Git Rebase

Why Git Rebase Should Be Part of a Developer's Workflow?

When to Use Git Rebase

How to Rebase

Bonus: Fundamental Git Practices for Developers

Conclusion

Angular's New Feature: Signals

Setting Up ESLint and Prettier in an Ionic Angular Project

Front-End Developer Essentials: Skills You Can't Do Without

JavaScript's Best-Kept Secrets: Unveiling Lesser-Known Features!

Don't be AFRAID of Typescript!

Vue 3's Composition API: Unleashing the Web Developer's Toolbox