DEV Community: kathir b

📱 Mobile Web Dev Showdown: Frameworks, Performance & UX

kathir b — Wed, 04 Feb 2026 12:53:35 +0000

📱 Mobile Web Dev Showdown: Frameworks, Performance & UX

How to Build Mobile Experiences That Don’t Suck

Why Mobile Web Development Isn’t Just "Smaller Screens"

Let’s be real: mobile isn’t the future anymore—it’s the present. But building for mobile web is a whole different beast compared to desktop. It’s not just about making things smaller; it’s about rethinking touch interactions, performance on spotty connections, and interfaces that feel natural in your hand.

In this post, we’ll compare the core considerations for mobile web development, complete with code examples and practical tips you can use today.

1. 📱 Mobile-First Responsive Design

Forget desktop-first. On mobile, you’re dealing with:

Touch targets that need to be at least 44×44px
No hover states (RIP, :hover)
Limited screen real estate

/* Mobile-first responsive base */
.button {
  min-height: 44px; /* Minimum touch target */
  min-width: 44px;
  padding: 1rem; /* Space for fingers, not mice */
}

/* Viewport-relative units for fluid typography */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}
~~~{% endraw %}

**Pro tip**: Use {% raw %}`touch-action: manipulation`{% endraw %} to eliminate the 300ms tap delay:{% raw %}
~~~css
* {
  touch-action: manipulation;
}
~~~{% endraw %}

## 2. ⚡ Performance Is Non-Negotiable

Mobile users have less patience and slower connections. Here's your performance checklist:{% raw %}

~~~javascript
// Lazy load below-the-fold images
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

// Register Service Worker for PWA capabilities
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
~~~

**Key Metrics:**
- First Contentful Paint < 1.5s
- Time to Interactive < 5s
- First Input Delay < 100ms

## 3. 🛠 Framework Face-Off

### React Native vs. PWA vs. Flutter Web

**React Native Web**: 
~~~jsx
// One codebase for web and native
import { View, Text } from 'react-native-web';

const App = () => (
  <View style={{flex: 1, justifyContent: 'center'}}>
    <Text>Write once, run everywhere</Text>
  </View>
);
~~~

**PWA Checklist:**
- Service Worker for offline
- Web App Manifest
- App-like navigation
- Push notifications

## 4. 📊 Real-World Performance Comparison

| Framework | Bundle Size | Time to Interactive | PWA Support |
|-----------|-------------|-------------------|-------------|
| React     | 45kb gzipped | ~2.1s          | ✅          |
| Vue       | 33kb gzipped | ~1.8s          | ✅          |
| Svelte    | 4.5kb gzipped| ~1.2s          | ✅          |
| Vanilla JS| 0kb (native)  | ~0.8s          | ✅          |

## 5. 💡 Mobile-Specific Features You Need

~~~javascript
// Device orientation
window.addEventListener("deviceorientation", (event) => {
  const tiltLR = event.beta;  // Tilt front/back
  const tiltFB = event.gamma; // Tilt left/right
});

// Vibration API for haptic feedback
navigator.vibrate(200);

// Network information API
if (navigator.connection) {
  navigator.connection.addEventListener('change', (e) => {
    adjustQualityBasedOnConnection(e.target.effectiveType);
  });
}
~~~

## 6. 🧪 Testing Mobile Quirks

~~~javascript
// Feature detection, not browser sniffing
if ('ontouchstart' in window) {
  // Touch device
  document.addEventListener('touchstart', handleTouch, {passive: true});
} else {
  // Desktop
  document.addEventListener('click', handleClick);
}

// Check for PWA installation
window.addEventListener('beforeinstallprompt', (e) => {
  // Prompt user to install PWA
  e.prompt();
});
~~~

## Key Takeaways 🎯

1. **Mobile-First is Content-First** – Design your information hierarchy for small screens first
2. **Performance = UX** – Users abandon sites that take >3 seconds to load
3. **Touch First** – Design for thumbs, not cursors
4. **PWA is not optional** – Installability and offline access are expected
5. **Test on Real Devices** – Simulators lie about touch targets and latency

## The Bottom Line

Mobile web development isn't just responsive design—it's a fundamentally different approach. It's about touch interfaces, variable network conditions, and understanding that your user might be holding their phone while walking down the street.

The best mobile experiences feel native, load instantly, and work offline. They respect the user's data plan, battery, and attention. Your mobile site shouldn't just be a "mobile version"—it should be the best version.

**The winning formula**: Mobile-first responsive design + PWA capabilities + performance optimization.

---

*Ready to dive deeper?* Share your mobile web horror stories or success tips in the comments! What's your biggest mobile web development challenge?

Tags: #MobileWeb #PWA #WebPerformance #Frontend #WebDev

Deploying a MERN Stack App on AWS EC2

kathir b — Fri, 07 Mar 2025 12:21:43 +0000

Deploying a MERN Stack App on AWS EC2

Introduction

AWS EC2 is a scalable cloud server where we can host a MERN stack app. This guide walks through deployment.

Step 1: Launch an EC2 Instance

Log in to AWS Console.
Choose Ubuntu Server 20.04.
Configure security group to allow HTTP, HTTPS, and SSH access.

Step 2: Connect to EC2

Use SSH:

ssh -i your-key.pem ubuntu@your-ec2-instance-ip

Step 3: Install Node.js & MongoDB

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs mongodb

Step 4: Deploy MERN App

Clone your repo, install dependencies, and start the app:

git clone https://github.com/your-repo.git
cd your-repo
npm install
node server.js

Step 5: Setup PM2 for Process Management

npm install -g pm2
pm2 start server.js --name mymernapp
pm2 save
pm2 startup

Step 6: Configure Nginx as a Reverse Proxy

sudo apt install nginx
sudo nano /etc/nginx/sites-available/default

Add this configuration:

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Restart Nginx:

sudo systemctl restart nginx

Conclusion

Your MERN app is now running on AWS EC2 with Nginx handling traffic.

Mastering Web Scraping with Puppeteer

kathir b — Fri, 07 Mar 2025 12:21:38 +0000

Mastering Web Scraping with Puppeteer

Introduction

Web scraping is a powerful technique for extracting data from websites. Puppeteer, a Node.js library, provides an easy-to-use API to automate browser tasks.

Step 1: Install Puppeteer

Run the following command:

npm install puppeteer

Step 2: Create a Scraper Script

Use Puppeteer to navigate a webpage and extract data:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const data = await page.evaluate(() => {
        return document.querySelector('h1').innerText;
    });

    console.log("Extracted Data:", data);

    await browser.close();
})();

Step 3: Handling Dynamic Content

If the content loads dynamically, use Puppeteer's wait functions:

await page.waitForSelector('.dynamic-content');

Step 4: Optimizing Scraping

Use page.setUserAgent to mimic real browsers.
Avoid detection by rotating headers and proxies.

Conclusion

Puppeteer is a powerful tool for web scraping, automation, and testing. Experiment with different techniques and optimize based on your needs.

How to Build a Secure User Authentication System in Node.js

kathir b — Fri, 07 Mar 2025 08:55:07 +0000

Introduction

User authentication is a critical part of any web application. In this tutorial, we'll build a secure authentication system in Node.js using JWT (JSON Web Token), bcrypt for password hashing, and Express.js for handling routes.

By the end of this guide, you'll be able to:

Register users securely
Hash passwords using bcrypt
Authenticate users using JWT
Protect API routes with middleware

Step 1: Set Up Your Node.js Project

First, create a new project and install dependencies:

mkdir auth-system && cd auth-system
npm init -y
npm install express bcryptjs jsonwebtoken dotenv cors mongoose

Create a `.env` File

Create a .env file for environment variables:

PORT=5000
MONGO_URI=mongodb://localhost:27017/auth_db
JWT_SECRET=your_jwt_secret_key

Step 2: Set Up Express Server

Create server.js:

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const userRoutes = require('./routes/userRoutes');

const app = express();
app.use(express.json());
app.use(cors());
app.use('/api/users', userRoutes);

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step 3: Create User Model

Create models/User.js:

const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true }
});
module.exports = mongoose.model('User', userSchema);

Step 4: Implement User Registration

Create routes/userRoutes.js:

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');
const router = express.Router();

// Register user
router.post('/register', async (req, res) => {
  try {
    const { name, email, password } = req.body;
    const existingUser = await User.findOne({ email });
    if (existingUser) return res.status(400).json({ message: 'User already exists' });

    const hashedPassword = await bcrypt.hash(password, 10);
    const user = new User({ name, email, password: hashedPassword });
    await user.save();

    res.status(201).json({ message: 'User registered successfully' });
  } catch (error) {
    res.status(500).json({ message: 'Server error' });
  }
});

module.exports = router;

Step 5: Implement User Login & JWT Authentication

Add login logic in userRoutes.js:

router.post('/login', async (req, res) => {
  try {
    const { email, password } = req.body;
    const user = await User.findOne({ email });
    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  } catch (error) {
    res.status(500).json({ message: 'Server error' });
  }
});

Step 6: Protect API Routes with Middleware

Create middleware/auth.js:

const jwt = require('jsonwebtoken');
module.exports = (req, res, next) => {
  const token = req.header('Authorization');
  if (!token) return res.status(401).json({ message: 'Access Denied' });

  try {
    const verified = jwt.verify(token, process.env.JWT_SECRET);
    req.user = verified;
    next();
  } catch (error) {
    res.status(400).json({ message: 'Invalid Token' });
  }
};

Apply middleware to protect routes:

const auth = require('../middleware/auth');
router.get('/profile', auth, (req, res) => {
  res.json({ message: 'Welcome to your profile' });
});

Step 7: Test Your API with cURL or Postman

Register User:

  curl -X POST -H "Content-Type: application/json" -d '{"name": "John Doe", "email": "john@example.com", "password": "password123"}' http://localhost:5000/api/users/register

Login User:

  curl -X POST -H "Content-Type: application/json" -d '{"email": "john@example.com", "password": "password123"}' http://localhost:5000/api/users/login

Access Protected Route:

  curl -X GET -H "Authorization: Bearer YOUR_JWT_TOKEN" http://localhost:5000/api/users/profile

Conclusion

You have successfully built a secure user authentication system in Node.js with JWT authentication! 🎉

Next Steps:
✅ Connect to a frontend (React/Angular/Vue)
✅ Implement password reset functionality
✅ Add role-based access control (RBAC)

Happy Coding! 🚀

DEV Community: kathir b

📱 Mobile Web Dev Showdown: Frameworks, Performance & UX

📱 Mobile Web Dev Showdown: Frameworks, Performance & UX

Why Mobile Web Development Isn’t Just "Smaller Screens"

1. 📱 Mobile-First Responsive Design

Deploying a MERN Stack App on AWS EC2

Deploying a MERN Stack App on AWS EC2

Introduction

Step 1: Launch an EC2 Instance

Step 2: Connect to EC2

Step 3: Install Node.js & MongoDB

Step 4: Deploy MERN App

Step 5: Setup PM2 for Process Management

Step 6: Configure Nginx as a Reverse Proxy

Conclusion

Mastering Web Scraping with Puppeteer

Mastering Web Scraping with Puppeteer

Introduction

Step 1: Install Puppeteer

Step 2: Create a Scraper Script

Step 3: Handling Dynamic Content

Step 4: Optimizing Scraping

Conclusion

How to Build a Secure User Authentication System in Node.js

Introduction

Step 1: Set Up Your Node.js Project

Create a .env File

Step 2: Set Up Express Server

Step 3: Create User Model

Step 4: Implement User Registration

Step 5: Implement User Login & JWT Authentication

Step 6: Protect API Routes with Middleware

Step 7: Test Your API with cURL or Postman

Conclusion

Create a `.env` File