DEV Community: Deed Holsing

Next.js app on Vercel crashes on iPhone 12/13/14 but works on iPhone 15/16

Deed Holsing — Thu, 19 Jun 2025 10:33:54 +0000

I'm facing a strange issue where my Next.js application hosted on Vercel crashes on iPhones 12, 13, and 14, but works perfectly on iPhones 15 and 16.

✅ Setup:

Hosting: Vercel
Next.js: 15.3.2
React: 19.0.0
TailwindCSS: 4 (beta)
Animation Libraries:
framer-motion@12.16.0
lottie-react@2.4.1
lottie-web@5.13.0
@lordicon/react@1.11.0

📦 My package.json (partial):

"dependencies": {
  "@lordicon/react": "^1.11.0",
  "framer-motion": "^12.16.0",
  "lottie-react": "^2.4.1",
  "lottie-web": "^5.13.0",
  "next": "15.3.2",
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
},
"scripts": {
  "dev": "next dev --turbopack",
  "build": "next build",
  "start": "next start"
}

🔍 Behavior:

The site loads normally on desktop Chrome, Safari, Android phones, and newer iPhones (15/16).
On iPhone 12/13/14 (tested with Safari), the page crashes or becomes unresponsive.
I haven't applied any specific polyfills or browser compatibility flags yet.
No custom server or middleware — just a regular Vercel deploy.

❓Questions:

Why would this crash only on older iPhones?
Could framer-motion or lottie-web animations cause Safari (WebKit) crashes?
Do I need to add browser compatibility settings for iOS 15/16?
Are there known issues with React 19 or Next.js 15 on older Safari engines?

Any guidance or shared experiences would really help. Let me know if I should share a link or debug logs.

Exploring the Power of WebAssembly: Bridging the Gap Between Web and Native Applications

Deed Holsing — Sun, 06 Oct 2024 07:29:35 +0000

Introduction

WebAssembly (Wasm) is a groundbreaking technology that bridges the gap between web applications and native performance. Whether you’re a developer wanting faster execution or a company seeking to optimize your web app, WebAssembly offers a solution. In this article, we'll dive deep into what WebAssembly is, how it works, and its role in shaping the future of web development.

What is WebAssembly?

WebAssembly is a binary instruction format that runs in the browser, enabling near-native performance for web applications. Traditionally, JavaScript has been the go-to language for web development, but it comes with limitations, especially when it comes to performance-intensive tasks. Wasm addresses this by allowing languages like C, C++, and Rust to run alongside JavaScript on the web.

How Does WebAssembly Work?

WebAssembly acts as a low-level assembly language that can be compiled from various high-level languages. Here's a simplified workflow:

Write Code in C/C++, Rust, etc.
Compile to WebAssembly (Wasm)
Execute in the Browser at near-native performance

Advantages of Using WebAssembly

High Performance: Because Wasm runs close to native speed, it's great for tasks like gaming, video editing, or AI.
Language Flexibility: Write your code in any language that supports compilation to WebAssembly.
Improved Security: WebAssembly runs in a sandboxed environment, making it more secure than traditional methods.
Porting Legacy Code: Existing desktop or native applications can be compiled into WebAssembly, allowing them to run within the browser.

WebAssembly Use Cases

Gaming: Games requiring high FPS and intensive graphics can be brought to the web.
Video Editing: Tools like FFMPEG can now be compiled into Wasm, allowing for browser-based editing.
AI and Machine Learning: Run complex algorithms directly in the browser.
Cross-Platform Applications: Build apps that work on both web and native platforms seamlessly.

Getting Started with WebAssembly

If you're eager to try WebAssembly, start with compiling a simple C program into Wasm. Here’s a basic example:

#include <stdio.h>

int main() {
   printf("Hello, WebAssembly!");
   return 0;
}

To compile this into WebAssembly, use tools like Emscripten:

emcc hello.c -s WASM=1 -o hello.html

Once compiled, you can serve the file and run the application in your browser, experiencing the power of WebAssembly first-hand!

WebAssembly and JavaScript: A Perfect Pair

WebAssembly doesn’t replace JavaScript but complements it. You can execute performance-heavy parts of your application in Wasm while using JavaScript for the rest.

Conclusion

WebAssembly is revolutionizing the way we think about web applications. By providing near-native performance, language flexibility, and improved security, it has the potential to unlock new horizons for web development. Whether you’re building high-performance games, apps, or tools, Wasm is worth exploring!

Help me to get dataset for ML Project

Deed Holsing — Fri, 09 Aug 2024 10:14:44 +0000

Hi all,
am creating a project for finding location of an image using ML, so i need large dataset, so can you help me to find the dataset

Help me

Deed Holsing — Sat, 15 Jun 2024 18:25:24 +0000

is there any software to add all installed software application into single software

take data from webpage as nextedform to mongodb using node js

Deed Holsing — Fri, 31 Mar 2023 10:47:38 +0000

my webpage as html :

Select Unit

Choose...
St Thomas
St Aloyous
St Alphonse

House Name
id="houseName">

Phone Number
id="phoneNo">

        <span class="border border-black mx-auto p-2" id="memberDetail" name="memberDetails">
            <div class="row g-4" id="memberDetails">
                <div class="col-md-4">
                    <label for="inputEmail4" class="form-label">Name</label>
                    <input type="text" class="form-control border-success" placeholder="name" name="memberDetails[0][name]"
                        id="fName">
                </div>
                <div class="col-md-4">
                    <label for="inputEmail4" class="form-label">Relation</label>
                    <input type="text" class="form-control border-success" placeholder="Relation" name="memberDetails[0][relation]"
                        id="relation">
                </div>
                <div class="col-md-1">
                    <label for="inputPassword4" class="form-label">Age</label>
                    <input type="number" class="form-control border-success" placeholder="Age" name="memberDetails[0][age]" id="age">
                </div>
                <div class="col-md-2">
                    <label for="inputPassword4" class="form-label">Baptism Date</label>
                    <input type="date" class="form-control border-success" name="memberDetails[0][bDate]" id="bDate">
                </div>
                <div class="col-md-2">
                    <label for="inputPassword4" class="form-label">Date of Birth</label>
                    <input type="date" class="form-control border-success" name="memberDetails[0][dob]" id="dob">
                </div>
                <div class="col-md-2">
                    <label for="inputPassword4" class="form-label">Abroad or Not</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input border-success" type="radio" name="abroad" id="abroadyes"
                            value="yes">
                        <label class="form-check-label" for="inlineRadio1">Yes</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input border-success" type="radio" name="abroad" id="abroadno"
                            value="no">
                        <label class="form-check-label" for="inlineRadio2">No</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="inputEmail4" class="form-label">Place Name</label>
                    <input type="text" class="form-control border-success" placeholder="Place Name" name="placeName"
                        id="placeName">
                </div>
            </div>
        </span>
        <button type="button" class="btn btn-primary" id="addMember">Add Member</button>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>my model schema :

import mongoose from "mongoose";

const memberSchema = new mongoose.Schema({ name: { type: String, required: true }, relation: { type: String, required: true }, age: { type: Number, required: true }, baptismDate: { type: Date }, dateOfBirth: { type: Date }, abroad: { type: Boolean }, placeName: { type: String } })

const UserSchema = new mongoose.Schema({ unit: { type: String, required: true }, houseN: { type: String, required: true }, phoneN: { type: Number, required: true }, memberDetails: [ memberSchema ] })

export default mongoose.model("User", UserSchema)

my node js post method : export const createData = async (req, res) => { const newUser = new User({ unit: req.body.unit, houseN: req.body.houseN, phoneN: req.body.phoneN, memberDetails: req.body.memberDetails }); try { const savedUser = await newUser.save() console.log(savedUser); res.redirect("/") } catch (err) { res.status(500).send({ message: err.message || "Some error occurred" }) } }

postman result : {
"id": "64268018764e488064f78eb9",
"unit": "St Thomas",
"houseN": "Nellissery",
"phoneN": 1234567890,
"memberDetails": [
{
"name": "Angel",
"age": 22,
"bDate": "10/09/2000",
"dob": "10/09/2000",
"abroad": "no",
"_id": "64268018764e488064f78eba"
},
{
"name": "Albin",
"age": 22,
"bDate": "10/09/2000",
"dob": "10/09/2000",
"abroad": "no",
"_id": "64268018764e488064f78ebb"
}
],
"_v": 0
}
i con't add data from webpage to mongodb using post method and form in nexted form. there is housename,phonenumber and name,dob,age should repeat when clicking add feild and it all store as array of object