DEV Community: ahyaemon

Can You Clear This Challenge Site Designed for Engineers?

ahyaemon — Thu, 12 Sep 2024 08:00:30 +0000

I’ve created a site called Web Dungeon.

https://web-dungeon.ahyaemon.com/en/

It’s a skill-testing site where you descend stairs and find answers on each floor.

Some floors are designed with the assumption that you'll use developer tools.

I hope it helps novice engineers or those aspiring to become engineers get familiar with some basic developer tools.

Veteran engineers, feel free to play around for fun.

Tech Stack

This is a simple SPA (Single Page Application) with only a frontend.

There is no backend.

Languages

TypeScript

Package Management

pnpm
- Feels faster overall for adding libraries and building.
- Alternatives like npm and yarn are available, but I chose pnpm for the best experience.

Bundler

Vite

Framework

React
- I considered Solid as well, but went with React for now.

Router

TanStack Router
- I initially used React Router, but switched to TanStack Router after seeing a 5kB reduction in size post-gzip.

Linter + Formatter

Biome
- Fast
- No need for the hassle of configuring eslint and prettier separately.
- Easy to fix code with check --write.

CSS

Tailwind
- Convenient

Deployment

CloudFlare Pages
- There are edge servers all over the world.
- Deploying is straightforward by specifying the GitHub repository and setting the build command.
- I used CloudFlare for the domain, which made deploying to a subdomain easy.

Development

Here are the steps to set up a similar environment.

Creating a Vite Project

Create a project

pnpm create vite

? Select a framework:
❯   React

? Select a variant:
❯   TypeScript

Install packages

pnpm install

Start development server

pnpm run dev

Introducing Biome

Install

pnpm add --save-dev --save-exact @biomejs/biome

Create configuration file

pnpm biome init

This command generates a configuration file (biome.json).

I prefer to minimize unnecessary semicolons, so I modified the configuration as follows:

{
    "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
    "organizeImports": {
        "enabled": true
    },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true,
            "a11y": {
                "useKeyWithClickEvents": "off"
            }
        }
-   }
+   },
+   "javascript": {
+       "formatter": {
+           "semicolons": "asNeeded"
+       }
+   }
}

Introducing Tailwind

Install

pnpm install -D tailwindcss postcss autoprefixer

Create configuration file

pnpx tailwindcss init -p

This generates tailwind.config.js and postcss.config.js. Add the following to tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
+ content: [
+   "./index.html",
+   "./src/**/*.{js,ts,jsx,tsx}",
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Modify index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Introducing TanStack Router

pnpm add @tanstack/react-router

With these settings, your development environment is set up.

About the Answer Logic

If answers are written in JS, they can be easily discovered by looking at the JS files.

Since there is no backend in this case, hiding answers on the backend is not an option.

Encryption or hashing answers and embedding them in the JS code is possible, but I decided to dynamically generate answers on the frontend.

The answers are generated at the time React components are created, making it impossible to share the answers with others.

By the way, the method for creating answers involves combining two words separated by _ and including random uppercase and lowercase letters to prevent brute-force attacks.

For example, BlAcK_SpideR.

Conclusion

Feel free to take the challenge!

https://web-dungeon.ahyaemon.com/en/

Additional Notes

Here’s an exceptionally clean commit history you might expect in personal development:

5c069e0 update
6deec1f update
89f267a update
fd8ff6f update
6c2b180 update
97c2caf update
ed751a6 update
1798d2f update
7002819 update
fdbb774 update
3435c3a update
2d7c9ce update
5c119e8 update
cb5eb44 update
adfeb5e update
8e48a88 update
eb41a5e update
15fa18f update
37f0623 update
9f8bc3f update

Creating a Remix Server to Return a React Page as a PDF

ahyaemon — Sun, 25 Aug 2024 11:50:22 +0000

I wanted to create a server that returns a page written in React as a PDF, but I couldn't find a standard method for doing so. Therefore, I tried various approaches and am sharing the one that worked for me. If you know of a better way, I'd appreciate your comments.

What I Want to Do

Write the page to be converted to PDF in React.
Allow the page created in step 1 to be downloadable as a PDF.

The server will work as follows: access to / will display the page from step 1, and access to /pdf will allow downloading the page as a PDF.

Steps and Explanation

Here's a step-by-step guide, starting from project creation.

1. Creating a Remix Server

First, create the project using the command from Remix's official Quick Start guide:

npx create-remix@latest

This will create the project in an interactive format. I opted to use pnpm instead of npm:

> Install dependencies with npm?
> No

After the project is created, install the necessary packages:

pnpm i

Next, start the development server:

pnpm dev

Now, if you access http://localhost:5173, you should see the initial page.

To ensure that the build passes and the production server can start, run:

pnpm build
pnpm start

You can confirm the operation by accessing http://localhost:3000.

2. Configuration Adjustments

I wanted the development server to run on port 3000, so I modified the scripts in package.json:

  "scripts": {
    "build": "remix vite:build",
-    "dev": "remix vite:dev",
+    "dev": "remix vite:dev --port 3000",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc"
  },

With this change, pnpm dev will allow access via http://localhost:3000.

3. Creating the PDF Endpoint

To make the content of / available as a PDF at /pdf, I added puppeteer to the dependencies to convert HTML to PDF:

pnpm add puppeteer

Next, I added /app/routes/pdf.tsx. By placing it under the routes directory, Remix automatically detects it and creates the /pdf endpoint:

import puppeteer from "puppeteer";

export async function loader() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto("http://localhost:3000", { waitUntil: 'networkidle0' });
  const pdf = await page.pdf({ format: 'A4' });
  await browser.close();

  return new Response(pdf, {
    status: 200,
    headers: {
      "Content-Type": "application/pdf",
      'Content-Disposition': 'attachment; filename=remix.pdf',
    },
  })
}

Now, if you access http://localhost:3000/pdf on either the development or production server, the same content as http://localhost:3000 will be downloaded as a PDF.

4. Font Configuration

To use custom fonts (e.g., NotoSerifJP.ttf), place the font file in the /public directory, which is automatically created by npx create-remix@latest.

Next, create a CSS file to configure the font and place it under /app. Here’s the content of /app/base.css:

@font-face {
    font-family: 'NotoSerifJP';
    src: url('/NotoSerifJP.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'NotoSerifJP', sans-serif;
}

Finally, import the CSS in /app/root.tsx:

import "./tailwind.css";
+ import "./base.css";

Conclusion

Now, you can check the page display at http://localhost:3000 and download the PDF at http://localhost:3000/pdf. By the way, I also tried React-pdf, but since it required building the PDF from scratch with limited styling options, I decided to go with the current method.