DEV Community: Cendekia

Meme Roulette Chrome Extension

Cendekia — Thu, 13 Feb 2025 00:51:08 +0000

Crafting a Chrome Extension: TypeScript, Webpack, and Best Practices

Cendekia ・ Feb 13

#typescript #chrome #extensions #webpack

Crafting a Chrome Extension: TypeScript, Webpack, and Best Practices

Cendekia — Thu, 13 Feb 2025 00:49:46 +0000

The Developer's Dilemma

As a TypeScript developer, I've always appreciated the robustness and type safety that TypeScript brings to my projects. Recently, I wanted to build a Chrome extension but found most tutorials were JavaScript-based. While JavaScript is great, I wanted to leverage TypeScript's features to create a more maintainable and scalable extension.

Project Overview

We'll build a Meme Roulette extension that fetches and displays random images from Imgur. This practical example will demonstrate TypeScript integration with Chrome extensions while creating something fun and useful.

Setting Up the Project

1. Initialize the Project

mkdir meme-roulette-ts
cd meme-roulette-ts
npm init -y

First, let's create our project structure:

meme-roulette-ts/
├── src/
│   ├── background/
│   │   └── background.ts
│   ├── popup/
│   │   ├── popup.html
│   │   └── popup.ts
│   ├── content/
│   │   └── content.ts
│   └── types/
│       └── imgur.ts
├── package.json
├── tsconfig.json
├── webpack.config.js
└── manifest.json

Install dependencies:

npm install --save-dev typescript webpack webpack-cli ts-loader copy-webpack-plugin @types/chrome

2. Configuration Files

Create tsconfig.json for TypeScript configuration:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Set up webpack.config.js:

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    background: './src/background/background.ts',
    popup: './src/popup/popup.ts',
    content: './src/content/content.ts',
  },
  // ... rest of webpack configuration
};

Core Components

1. Type Definitions

Create type definitions for Imgur API responses (src/types/imgur.ts):

export interface ImgurResponse {
  id: string;
  title: string;
  description: string;
  cover: ImgurCover;
}

export interface ImgurCover {
  id: string;
  url: string;
  width: number;
  height: number;
  type: string;
  mime_type: string;
}

2. Background Script

The background script handles API communication with Imgur:

const IMGUR_API_URL = 'https://api.imgur.com/post/v1/posts';
const CLIENT_ID = 'your_client_id';

// Handle messages from popup
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('Received message:', request);

  if (request.action === 'getRandomImage') {
    console.log('Fetching random image...');
    fetchRandomImage()
      .then(response => {
        console.log('Fetch successful:', response);
        sendResponse({ success: true, data: response });
      })
      .catch(error => {
        console.error('Fetch failed:', error);
        sendResponse({ success: false, error: error.message });
      });
    return true; // Required for async response
  }
});

async function fetchRandomImage(): Promise<ImgurResponse> {
  // API communication logic
}

3. Popup Interface

Create a clean and responsive user interface (src/popup/popup.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Random Imgur Image</title>
    <!-- styles here -->
  </head>
  <body>
    <button id="refreshButton">Get Random Meme</button>
    <div id="imageContainer"></div>
    <script src="popup.js"></script>
  </body>
</html>

4. Popup Logic

The popup script (src/popup/popup.ts) handles the user interface and interaction:

import { ImgurResponse } from '../types/imgur';

document.addEventListener('DOMContentLoaded', () => {
  // Get DOM elements
  const imageContainer = document.getElementById('imageContainer') as HTMLDivElement;
  const refreshButton = document.getElementById('refreshButton') as HTMLButtonElement;
  const loadingSpinner = document.getElementById('loadingSpinner') as HTMLDivElement;
  const errorMessage = document.getElementById('errorMessage') as HTMLDivElement;

  async function displayRandomImage() {
    try {
      // Show loading state
      refreshButton.disabled = true;
      loadingSpinner.style.display = 'block';
      errorMessage.style.display = 'none';

      // Request new image from background script
      const response = await chrome.runtime.sendMessage({ action: 'getRandomImage' });

      if (!response.success) {
        throw new Error(response.error);
      }

      const imgurData: ImgurResponse = response.data;

      // Create and display content
      imageContainer.innerHTML = '';

      const titleElement = document.createElement('h3');
      titleElement.textContent = imgurData.title;
      imageContainer.appendChild(titleElement);

      // Handle different media types
      if (imgurData.cover.mime_type?.startsWith('video/')) {
        const videoElement = document.createElement('video');
        videoElement.controls = false;
        videoElement.autoplay = true;
        videoElement.style.maxWidth = '100%';

        const sourceElement = document.createElement('source');
        sourceElement.src = imgurData.cover.url;
        sourceElement.type = imgurData.cover.mime_type;

        videoElement.appendChild(sourceElement);
        imageContainer.appendChild(videoElement);
      } else {
        const imgElement = document.createElement('img');
        imgElement.src = imgurData.cover.url;
        imgElement.alt = imgurData.title;
        imgElement.style.maxWidth = '100%';
        imageContainer.appendChild(imgElement);
      }

      // Reset UI state
      loadingSpinner.style.display = 'none';
      imageContainer.style.display = 'block';
      refreshButton.disabled = false;
    } catch (error) {
      // Handle errors
      console.error('Error:', error);
      loadingSpinner.style.display = 'none';
      errorMessage.style.display = 'block';
      errorMessage.textContent = `Error: ${error instanceof Error ? error.message : 'Unknown error'}`;
      refreshButton.disabled = false;
    }
  }

  // Event listeners
  refreshButton.addEventListener('click', displayRandomImage);

  // Keyboard shortcuts
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      displayRandomImage();
    }
  });

  // Load initial image
  displayRandomImage();
});

Key Features

Type Safety: Full TypeScript support for Chrome APIs and custom types
DOM Manipulation: Safely handling DOM elements with TypeScript
Error Handling: Robust error handling with user-friendly messages
Media Support: Handles both images and videos from Imgur
Keyboard Controls: Shortcuts for better user experience
Loading States: Smooth loading transitions
User Experience:
- Loading states
- Keyboard shortcuts
- Disabled states during loading
- Error messages
- Automatic initial load

The script communicates with the background script using Chrome's messaging system and handles all UI updates in a type-safe way. This makes the code more maintainable and helps catch potential errors during development.

Building and Testing

Add build scripts to package.json:

{
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "watch": "webpack --config webpack.config.js --watch"
  }
}

Build the extension:

npm run build

Load in Chrome:

Navigate to chrome://extensions/
Enable Developer Mode
Click "Load unpacked" and select the dist folder

Conclusion

Building Chrome extensions with TypeScript provides a robust development experience while maintaining code quality. This approach gives us type safety, better tooling, and a more maintainable codebase.

The complete code is available on GitHub. The published chrome extension is here. Feel free to explore, contribute and build upon it!

check out my new blog!

Cendekia — Sun, 02 Feb 2025 15:41:53 +0000

Mastering DTOs in NestJS

Cendekia ・ Feb 2

#nestjs #api #dto #typescript

Mastering DTOs in NestJS

Cendekia — Sun, 02 Feb 2025 15:40:37 +0000

Data Transfer Objects (DTOs) are a fundamental concept in NestJS applications. They help structure the data that flows between your application layers, ensuring clean, maintainable, and scalable code. However, using DTOs effectively requires understanding their purpose, best practices, and potential pitfalls.

In this blog, we’ll explore DTOs in NestJS in detail, covering their usage, tips, tricks, and best practices. We’ll also provide a step-by-step approach with code examples to help you avoid common mistakes like decoupling issues.

What is a DTO?

A DTO (Data Transfer Object) is an object that defines how data will be sent over the network. It acts as a contract between the client and the server, ensuring that only the necessary data is transmitted and validated.

In NestJS, DTOs are often used in conjunction with Validation Pipes to validate incoming data and ensure it adheres to the expected structure.

Why Use DTOs?

Data Validation: Ensure incoming data matches the expected format.
Type Safety: Leverage TypeScript to enforce data types.
Decoupling: Separate data structure from business logic.
Documentation: Clearly define the shape of data for APIs.

Step-by-Step Guide to Using DTOs in NestJS

Let’s dive into a step-by-step guide to using DTOs in NestJS, complete with code examples.

Step 1: Install Required Packages

Before we start, ensure you have the necessary packages installed:

npm install class-validator class-transformer

class-validator: Provides decorators for validating DTOs.
class-transformer: Converts plain objects to instances of DTO classes.

Step 2: Create a Basic DTO

Let’s create a simple DTO for a user registration endpoint.

// src/users/dto/create-user.dto.ts
import { IsString, IsEmail, IsNotEmpty, MinLength } from 'class-validator';

export class CreateUserDto {
  @IsString()
  @IsNotEmpty()
  readonly name: string;

  @IsEmail()
  @IsNotEmpty()
  readonly email: string;

  @IsString()
  @MinLength(8)
  readonly password: string;
}

Here, we’ve used decorators from class-validator to enforce validation rules:

@IsString(): Ensures the field is a string.
@IsNotEmpty(): Ensures the field is not empty.
@IsEmail(): Validates the email format.
@MinLength(8): Ensures the password is at least 8 characters long.

Step 3: Use the DTO in a Controller

Now, let’s use the DTO in a controller.

// src/users/users.controller.ts
import { Body, Controller, Post } from '@nestjs/common';
import { CreateUserDto } from './dto/create-user.dto';
import { UsersService } from './users.service';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Post()
  async createUser(@Body() createUserDto: CreateUserDto) {
    return this.usersService.createUser(createUserDto);
  }
}

In this example:

The @Body() decorator extracts the request body and maps it to the CreateUserDto class.
NestJS automatically validates the incoming data against the DTO using the ValidationPipe.

Step 4: Enable Global Validation

To enable automatic validation, add the ValidationPipe globally in your main.ts file.

// src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(3000);
}
bootstrap();

The ValidationPipe ensures that all incoming data is validated against the DTOs.

Step 5: Transform and Sanitize Data

You can use the class-transformer library to transform and sanitize incoming data. For example, you can trim whitespace from strings or convert strings to numbers.

// src/users/dto/create-user.dto.ts
import { IsString, IsEmail, IsNotEmpty, MinLength } from 'class-validator';
import { Transform } from 'class-transformer';

enum UserRole {
  ADMIN = 'admin',
  USER = 'user',
}

export class CreateUserDto {
  @IsString()
  @IsNotEmpty()
  @Transform(({ value }) => value.trim())
  readonly name: string;

  @IsEmail()
  @IsNotEmpty()
  @Transform(({ value }) => value.toLowerCase())
  readonly email: string;

  @IsString()
  @MinLength(8)
  readonly password: string;

  @IsEnum(UserRole)
  readonly role: UserRole;
}

Here:

@Transform(({ value }) => value.trim()): Trims whitespace from the name field.
@Transform(({ value }) => value.toLowerCase()): Converts the email field to lowercase.
@IsEnum(UserRole): Ensures the role field is one of the predefined values in the UserRole enum.

Step 6: Avoid Decoupling Issues

One common mistake is tightly coupling DTOs to your database models. To avoid this:

Use separate DTOs for input and output.
Avoid exposing sensitive data in response DTOs.

For example, create a UserResponseDto for responses:

// src/users/dto/user-response.dto.ts
import { Exclude, Expose } from 'class-transformer';

export class UserResponseDto {
  @Expose()
  id: string;

  @Expose()
  name: string;

  @Expose()
  email: string;

  @Exclude()
  password: string;
}

In your service, transform the database model into the response DTO:

// src/users/users.service.ts
import { Injectable } from '@nestjs/common';
import { UserResponseDto } from './dto/user-response.dto';
import { plainToInstance } from 'class-transformer';

@Injectable()
export class UsersService {
  async createUser(createUserDto: CreateUserDto): Promise<UserResponseDto> {
    // Save user to the database
    const user = await this.saveUserToDatabase(createUserDto);

    // Transform the user to UserResponseDto
    return plainToInstance(UserResponseDto, user, {
      excludeExtraneousValues: true,
    });
  }

  private async saveUserToDatabase(userData: CreateUserDto) {
    // Simulate saving to the database
    return {
      id: '1',
      ...userData,
    };
  }
}

Step 7: Use Partial DTOs for Updates

Instead of duplicating DTOs, you can reuse them by extending or composing them. NestJS provides utility types like PartialType, PickType, and OmitType to make this easier.

// src/users/dto/update-user.dto.ts
import { PartialType } from '@nestjs/mapped-types';
import { CreateUserDto } from './create-user.dto';

export class UpdateUserDto extends PartialType(CreateUserDto) {}

Here:

UpdateUserDto inherits all fields from CreateUserDto, but makes them optional using PartialType.

Extra 1: Document DTOs

Use Swagger decorators (@ApiProperty) to document your DTOs for API documentation.

Example: Documenting DTOs with Swagger

// src/users/dto/create-user.dto.ts
import { IsString, IsEmail, IsNotEmpty, MinLength } from 'class-validator';
import { ApiProperty } from '@nestjs/swagger';

export class CreateUserDto {
  @ApiProperty({ description: 'The full name of the user', example: 'John Doe' })
  @IsString()
  @IsNotEmpty()
  readonly name: string;

  @ApiProperty({ description: 'The email address of the user', example: 'john.doe@example.com' })
  @IsEmail()
  @IsNotEmpty()
  readonly email: string;

  @ApiProperty({ description: 'The password of the user (min 8 characters)', example: 'password123' })
  @IsString()
  @MinLength(8)
  readonly password: string;
}

Here:

@ApiProperty adds metadata to each field, which is used by Swagger to generate API documentation.

Extra 2: Group Related DTOs

Organize your DTOs in a logical folder structure to keep your codebase clean and maintainable.

Example: Folder Structure

src/
  users/
    dto/
      create-user.dto.ts
      update-user.dto.ts
      user-response.dto.ts
    users.controller.ts
    users.service.ts

This structure groups all DTOs related to the users module in a single dto folder.

Conclusion

DTOs are a powerful tool in NestJS for structuring and validating data. By following the step-by-step guide and best practices outlined in this blog, you can ensure your application is clean, maintainable, and scalable. Remember to avoid decoupling issues by separating input and output DTOs and leveraging transformation utilities.

Happy coding! 🚀

Cover image: unsplash

Perform case-insensitive sorting in Solr

Cendekia — Tue, 21 Mar 2023 18:17:37 +0000

To perform case-insensitive sorting in Solr, you can create a custom field type that applies a lowercasing filter, so that the text is indexed in lowercase. This way, when you sort on this field, it will effectively ignore the case of the original text.

Here's an example of how you can create a custom field type that ignores case sensitivity:

<fieldType name="text_sort_ignore_case" class="solr.TextField" sortMissingLast="true" omitNorms="true">
  <analyzer>
    <tokenizer class="solr.KeywordTokenizerFactory"/>
    <filter class="solr.LowerCaseFilterFactory"/>
  </analyzer>
</fieldType>

Now, you can use this custom field type for fields that need case-insensitive sorting:

<field name="title_sort_ignore_case" type="text_sort_ignore_case" indexed="true" stored="false" multiValued="false"/>

When you want to sort your search results, you can use the sort parameter in your query:

For ascending order: sort=title_sort_ignore_case asc
For descending order: sort=title_sort_ignore_case desc

This will sort your search results in ascending or descending order while ignoring case sensitivity.

Applying a LowerCaseFilter in Solr does have a small impact on performance, but it is generally negligible. The LowerCaseFilter is a simple and lightweight filter that converts text to lowercase during the indexing process. The performance impact occurs only once during indexing and not during every search query.

However, if you have a very large dataset and you are concerned about the performance, you can always evaluate the filter's impact by benchmarking your Solr instance with and without the LowerCaseFilter applied. This will give you a better understanding of how the filter affects the performance of your specific use case.

In most situations, the benefit of case-insensitive sorting outweighs the minor performance hit introduced by the LowerCaseFilter. The filter is widely used and considered a standard part of text analysis pipelines in Solr and other search platforms.

Develop a Map Application using NativeScript and MapBox

Cendekia — Sat, 27 Oct 2018 10:11:27 +0000

Develop a Map Application using NativeScript and MapBox

Prerequisites:

Install NativeScript on your computer
Create a MapBox account to get the access token
Little knowledge about JavaScript, either JS core, Angular or Vue JS

Intro:

As you might know that MapBox is a map service provider that similar to a Google map. In this blog, I’m trying to show how easy to build a Map Application for both Android and IOS with {N}ativeScript and MapBox.

The steps:

After you have successfully installed the {N}ativeScript on your machine, then you need to run:

tns create mapApp --ng

that command will create a {N} project for you, as you might wondering there is a .. --ng, that the option command for using Angular template.

Next step, test you scaffolding app, make sure connecting your android phone to your laptop/pc:

\> cd mapApp
\> tns run android

This command will take a while for building your app to your Android phone. Once it finishes, it will look like this:

Back to your root app, then add plugins:

First, add {N} plugin for detecting our device current location: tns plugin add nativescript-geolocation
Then, add mapbox plugin: tns plugin add nativescript-mapbox

That’s all, now we can start coding.

Add the following code to your app at src/app/app.module.ts for registering Mapbox view:

Then move to src/app/item/items.component.ts and add the following codes:

Run the geolocation testing by using commandtns run android and you should saw printed logs, like so:

JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

JS: checking if geolocation is enabled

JS: isEnabled = false

JS: enableLocationRequest()

Your android phone will be showing a popup of location permission access, and when you allow it, then it will show something like this:

JS: location enabled!

JS: watchLocation()

At this point your MapApp are successfully capturing location of your phone.

If you encounter these errors below while running/testing the app, make sure you are deleting the android directory under platforms and then rebuild again by running the command tns run android again, somehow the android app by default searching for google API for detecting location.

JS: checking if geolocation is enabled

JS: isEnabled error TypeError: Cannot read property 'GoogleApiAvailability' of undefined

JS: enableLocationRequest()

JS: Failed to enable TypeError: Cannot read property 'GoogleApiAvailability' of undefined

Now, we can put a Map to our screen App. Add the following codes:

And we are Done! You should see something like this on your phone screen:

Conclusion

Although, this post only cover the basic things, I hope it will help for those who wants to build a Map application with NativeScript and MapBox feature in it.

If you had trouble following the tutorial, here try the source code

Happy Coding…

How to add Sentry to your {N}ativeScript app

Cendekia — Sun, 21 Oct 2018 21:40:15 +0000

In this post, I’ll try to show how to add Sentry to your {N}ativeScript application. As some of you might know that how important we put an error tracking to our apps especially for the app that ready to deploy to production.

Unlike the web apps that We as developers can easily track the issues or errors by “inspect it” from the browser, once the mobile app IOS/Android released to the market, it will hard to track if any crash or error happened to the user unless they reporting it.

Sentry is one of the best error tracking out there, as said in their website:

Sentry | Error Tracking Software - JavaScript, Python, PHP, Ruby, more

Sentry is an open-source error tracking platform that provides complete app logic, deep context, and visibility across the entire stack in real time.

Okay, enough for the intro, let’s do the technical things. I’ll use the Groceries sample app from {N} that already well built, so we can focus on how to implement Sentry.

NativeScript/sample-Groceries

Let’s start coding:

\> git clone [git@github.com](mailto:git@github.com):NativeScript/sample-Groceries.git
\> cd sample-Groceries

In this repo, they already provide both javascript core or angular js codes, I would prefer the angular js though, but it’s up to you which one is the best for you.

\> git checkout angular-end

Please follow the instructions on how to install {N} in your machine.

NativeScript Documentation

screenshot#1

Before you run the app, please make sure connect your pc/laptop to your Android phone or you can also use the emulator.

Then, run the application using {N} CLI command, like so:

\> tns run android

… grab the coffee, while waiting for the building process.

And you should see the login screen of Groceries app like the screenshot#1.

In order to use Sentry, I am using the awesome nativescript-sentry plugin by danielgek.

BUT, Sentry just release new update couple months ago, and turns out it makes the package seems deprecated, and luckily someone already PR the fixes

Update android dependencies and common configuration to use latest sentry version by kvnvelasco · Pull Request #17 · danielgek/nativescript-sentry

Unfortunately, the author of the package seems busy right now, (by the time of this post published, he is still not merge the fixes). So I’ve manual bundle it for you, you can download it to your local machine:

nativescript-sentry-1.5.0.tgz

Add the package to the approot project:

\> tns plugin add \<directory\_path\>/nativescript-sentry-1.5.0.tgz

When the original repository is updated with the fixes, you should run this command instead:

\> tns plugin add nativescript-sentry

The next step, please sign up to sentry.io in order to get the token for accessing their services, it’ll be like so:

https://\<your-token\>@sentry.io/\<your\_project\_id\>

Add the following code in your app.module.ts

**...  
import { SentryModule } from 'nativescript-sentry/angular';**  
...

@NgModule({
...
 imports: [
**SentryModule.forRoot({dsn: 'https://\<your-token\>@sentry.io/\<your\_project\_id\>'}),**
 ...
...

Like so:

Okay, let’s put Sentry tracker which will tracking user who login with invalid email address format. So you need to add this code to login.component.ts :

...
**import { Sentry } from "nativescript-sentry";**...
submit() {
 if(!this.user.isValidEmail()) {
**Sentry.captureMessage("Enter a valid email address.", {});**...

Like so:

All set!! By trying to fill in an invalid email address, Sentry should be able to track and sent it to Sentry dashboard like so:

Conclusion

Again, It’s very importance to be able to trace what could possible make our app crash in production so that we immediately know what to fix or roll back.

I hope this post will help for those who wants to build the {N}ativeScript application and deploy it to production without worries about tracing bugs.