DEV Community: Menula De Silva

🚀 How I Got 25,000+ Views in 2 Days on a YouTube Short

Menula De Silva — Thu, 04 Dec 2025 05:03:30 +0000

YouTube Shorts can blow up fast but only if you understand how your audience behaves.

One of my recent Shorts crossed 25K+ views within just 2 days, and it's still trending today.

Here’s the Short if you want to check it:
https://youtube.com/shorts/SHmcBMhZ0p0

The secret behind that growth wasn’t luck.
It was analytics especially metrics like:

Stayed to watch (Retention %)
Average view duration
Hook performance (first 3 seconds)
Replays & Loop factor

In this guide, I’ll break down everything I learned so you can repeat the same results.

🎯 1. Start by Reading Your Analytics

My video analytics showed something like:

Stayed to watch: 66.2%
Average view duration: 0:20 seconds

This tells you two BIG things:

✔ Viewers are genuinely interested

Anything above 50% retention is excellent for Shorts.

✔ But the start could be stronger

A 20s average duration often means people are skipping early so improving your hook increases viral potential.

‎
‎
‎

⚡ 2. The First 3 Seconds Decide Everything

Shorts are brutal. If your intro is weak, people scroll instantly.

You MUST grab the viewer immediately.

Here are hooks that work amazingly well:

🔥 High-energy hooks

“Wait, don’t scroll. You need to see this!”
“I tested something crazy…”

🎵 Music + Movement

Start with a beat drop or transition exactly on the first second.

🧠 Curiosity hooks

“I bet you didn’t know this…”
“This is the mistake most people make…”

Good hooks = high retention = YouTube boosts your Short.

This is a key reason why my Short hit 25K in 2 days.
‎

‎

🎬 3. Keep It Fast, Clean, and Engaging

Shorts should feel like a constant flow.

Tips:

Jump cuts
Captions
Quick pacing
High movement
Strong background music
Clear message

The faster the energy, the higher the retention.

‎
‎

🔁 4. Add a Loop Moment ( Optional )

This is a hack for more views.

If your video loops smoothly, viewers watch it again without realizing the algorithm LOVES this.

Ways to create a loop:

Start and end with the same sentence
Loop the sound
Bring the ending visually back to the beginning

My Short had a natural loop feel → more replays → more views.

‎
‎

✨ 5. Encourage Smart Engagement

Instead of “like & subscribe,” use these:

“Comment YES if you feel the same”
“Which one would you choose? A or B?”
“Want part 2?”

More comments = more reach.

‎

🎉 Final Thoughts

Going viral on YouTube Shorts isn’t magic.
It’s data, retention, and a strong hook.

My Shorts reached 25K+ views in 2 days because I paid attention to what my viewers actually do not what I think they do.

If you improve:

the first 3 seconds
the pacing
the looping
and the engagement

…your next Short has a very high chance of trending too.

I learned all these insights from this single video . I’m not promoting it or using it for any money-related purpose.

I’m simply sharing it so you can learn from it too:
👉 https://www.youtube.com/watch?v=Zc3ac7EWdbE

Feel free to check it out and learn!

🚀 Introducing Gem Price Estimator (Open Source & Free!)

Menula De Silva — Tue, 11 Nov 2025 08:55:11 +0000

Hey Dev Community! 👋
I'm Menula De Silva, a young developer from Sri Lanka 🇱🇰 and I’m excited to share my latest open-source project:

👉 Gem Price Estimator
✅ Live App: https://gemprice.vercel.app/
✅ GitHub Repo: https://github.com/DMS-Menula/Gem-Price-Estimator

🎥 Watch the trailer:
➡️ https://www.youtube.com/watch?v=JrD4zy75JMY

💡 What Is Gem Price Estimator?

A smart, responsive, and user-friendly tool that instantly estimates prices for precious gems based on:

✅ Gem Type
✅ Carat Weight
✅ Market Category
✅ Price Multipliers
✅ Real-time Valuation Logic

Sri Lanka is world-famous for gems and this tool helps bring that industry into modern tech.

🛠️ Why I Built This

Gem pricing online is inconsistent, outdated, and often inaccurate.
So I built a free & open-source alternative that is:

Clean
Fast
Transparent
Easy for anyone to use

My goal is to make this Sri Lanka’s #1 gem pricing tool.

🚀 Features

✅ Modern UI
✅ Real-time gem value calculation
✅ Fully responsive
✅ Beginner-friendly code
✅ Hosted on Vercel
✅ Open-source for everyone

🔥 Calling All Contributors!

I’m welcoming developers from Sri Lanka and around the world to help improve this project.

Looking for contributors in:

Frontend UI
Pricing logic
API suggestions
Math/valuation formulas
UX design
Documentation
Bug fixes

✅ Every contribution counts
✅ You’ll be listed as a Core Contributor

✅ How to Contribute

1️⃣ Visit the GitHub repo
➡️ https://github.com/DMS-Menula/Gem-Price-Estimator

2️⃣ Open issues / suggest ideas
3️⃣ Submit your pull request
4️⃣ Join the contributor list!

⭐ Let’s Build Sri Lanka’s Biggest Open Source Gem Project

If you support this project:

✅ Star the GitHub repo
✅ Share it with Sri Lankan & Global devs
✅ Contribute if you can

🦇 Spooky Portal - Halloween CSS Art 🌙✨

Menula De Silva — Tue, 04 Nov 2025 06:17:37 +0000

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

🎨 Inspiration

Halloween has always been about that magical mix of spooky and beautiful — the glowing moon, the flying bats, and the mysterious night sky.
I wanted to capture that cinematic moment when bats flutter under a full moon — purely with HTML and CSS (no images or JS needed!).

The goal was to make it feel alive — with random bat movement, glowing lights, and soft night colors that bring the Halloween vibe to life.

👻 Demo

Here’s the live version of my spooky CSS art:
👉 View Demo on GitHub Pages
🧩 View Source on GitHub

🕯️ Journey

This started as a simple CSS moon animation… and then the bats came in 🦇

What I learned:

Creating natural motion using @keyframes and animation-delay randomness.
Layering effects with pure CSS gradients and transforms.
Making light glows and depth using box-shadow and filter: blur().
Keeping it responsive and performant while keeping that “spooky magic.”

What I’m proud of:

The entire animation runs on zero JavaScript.
The bats randomly move across the sky, giving life to the art.
Smooth night ambiance created using CSS-only glow effects.

What’s next:

I’d love to expand this into a CSS Art Halloween Scene Generator, where each reload spawns a unique night sky with different moon and bat arrangements 🌕💫

🧡 Credits & License

Made with love by @dmsmenula 🧙‍♂️
Licensed under the MIT License.

💎How I Built a Medium-Level E-Commerce Website

Menula De Silva — Tue, 04 Nov 2025 05:45:38 +0000

Hey Dev Community 👋

I’m Menula De Silva, a 12-year-old developer from Sri Lanka 🇱🇰 who loves building full-stack web apps.

Recently, I created my most advanced project yet — LustellaGems.com, a complete e-commerce website for selling premium gemstones online.

This project is extra special to me because it’s inspired by my mom’s real gem business idea 💖

I wanted to turn her dream into a real, working online store — and that’s how Lustella Gems was born.

🧠 The Vision

It all started when my mom shared her idea of creating an online platform to showcase and sell gemstones.

I decided to take on the challenge and build it from scratch — not just as a demo, but as a real e-commerce website.

So I asked myself:

“What would a real gem shop need to run online smoothly?”

That question helped me design and plan every part of the system carefully.

⚙️ Tech Stack I Used

Area	Technology
🖥️ Frontend	HTML, CSS, Bootstrap, JavaScript, jQuery
⚙️ Backend	PHP, MySQL
🧮 Currency Conversion	JavaScript (LKR → USD calculation)
🔐 Authentication	PHP Sessions + MySQL
📦 Hosting	cPanel with a custom domain
🧩 UI/UX Design	Figma

💎 Core Features I Built

🧍 1. Login, Signup, and Profile Management

Users can create accounts, log in securely, and edit their profile details anytime.

The system uses PHP sessions to manage authentication and prevent unauthorized access.

All user data is stored safely in MySQL, and both frontend and backend validation ensure clean, secure inputs.

🛍️ 2. Dynamic Product System

Products are database-driven, dynamically loaded using PHP and displayed through clean Bootstrap card layouts.

Each product has:

Name, price, image, and description
Real-time LKR → USD conversion (using JavaScript)
A “Request Product” button for customers who want something custom

📨 3. Product Request System

This was one of my favorite features to build.

Users can send special requests for gemstones that aren’t currently listed.

Submissions are handled via AJAX and stored in the database (or emailed to the admin).

It gives the site a more personal, customer-friendly feel.

💬 4. Review and Rating System

Logged-in users can write reviews on products.

If someone tries without logging in, a SweetAlert pop-up gently reminds them to sign in first — just like a professional shop.

🌍 5. LKR → USD Price Conversion

Every product shows both:

LKR. 15000
USD. 50 (automatically calculated and rounded with JavaScript)

It helps international customers easily understand prices, making the store feel global.

📰 6. Blog Section

To make the website more engaging, I built a blog system.

The admin can post articles about:

Sri Lankan gem history
Mining and gemstone culture
Gem categories and fun facts

This turns the site into both an online store and an educational hub for gem lovers.

🎨 UI/UX Design

The design follows a luxurious white, gold, and sapphire blue theme — elegant yet minimal.

I designed the layout in Figma and implemented it with Tailwind + Bootstrap.

All pages are fully responsive and feature smooth animations for a premium experience.

⚔️ Challenges I Faced

🔐 Building a secure login & signup system with sessions
💾 Structuring the database for users, products, reviews, and requests
🎨 Keeping the same premium feel across every page and device

Each challenge helped me understand how real-world e-commerce systems are built from the ground up.

💡 What I Learned

How to connect PHP with MySQL efficiently
Using AJAX to update data without page reloads
Validating user input securely
Organizing both frontend and backend logic neatly
The importance of combining creativity with functionality

🚀 What’s Next

I’m currently working on:

Admin panel for managing blogs
Email notifications using PHPMailer
Wishlist and cart system
Advanced search filters with real-time results

My goal is to make LustellaGems.com a complete online store — professional, scalable, and user-friendly.

❤️ Final Thoughts

Building Lustella Gems wasn’t just a coding project — it was a personal mission to bring my mom’s gem business idea to life.

It taught me how to balance creativity, logic, and real-world requirements as a young developer.

If you’d like to check it out, here’s the live site 👇

👉 LustellaGems.com

Follow Me

LinkedIn - Here
GitHub - Here
Portfolio - Here
Discord - menuladesilva

If you enjoyed this post, please drop a ❤️ or comment your thoughts!

I’d love to hear your feedback and connect with other developers around the world 🙌

👑Get Canva Pro For FREE In 4 Steps!

Menula De Silva — Mon, 20 Oct 2025 05:47:45 +0000

Step 1

Go To Bingo Tingo . And Find Best Social Media Platforms Card

Step 2

Go To The Bottom Of The Page And Wait Until The Link Loads

Step 3

Try Clicking The Download Button For 2 or 3 times Until Get This

Step 4

Try Clicking The Get Now Button Until Redirecting To Canva.com

NOW YOU WILL HAVE THE CANVA PRO FOR FREE !

This Is Only For Educational Purposes!

🚀 Do You Know These World-Famous Apps Are Built with Electron?

Menula De Silva — Sun, 28 Sep 2025 07:30:57 +0000

Cross-platform desktop apps using just JavaScript, HTML, and CSS? Yes — it's real. And it's called Electron.

💡 What is Electron?

Electron is an open-source framework that allows developers to build desktop applications using web technologies — JavaScript, HTML, and CSS.

It's like having the power of a browser and the operating system combined into one powerful platform. With Electron, your app runs on Windows, macOS, and Linux, from a single codebase.

🏆 Popular Apps Built with Electron

You use these every day — but did you know they run on Electron?

App Name	Use Case
💬 Discord	Voice & Text Chat
🔧 Visual Studio Code	Code Editor
✍️ Notion	Notes & Productivity
📁 Dropbox	File Storage
🧑‍💻 GitHub Desktop	Git GUI
📦 Postman	API Testing
🎨 Figma	UI/UX Design
💼 Microsoft Teams	Collaboration
🧾 Slack	Team Communication
🟢 Skype	Video Calling
📋 Trello	Task Management
🔍 Loom	Video Messaging
🧠 Obsidian	Markdown Knowledge Base

👉 You can find the full list of Electron-powered apps on the Electron official website.

⚙️ Why Use Electron?

✅ Cross-Platform: One codebase for Windows, macOS, and Linux.
🧠 Familiar Tools: Use React, Vue, Angular, or plain JavaScript.
🚀 Great Community: Backed by GitHub, used by developers worldwide.
🔥 Quick Setup: Get your first desktop app running in under 10 minutes.

🧪 How Electron Works

Electron combines:

Chromium for rendering web content.
Node.js for backend-like capabilities (filesystem, networking).
Electron APIs for native integration (menus, notifications, system tray).

🛠️ Getting Started

npx create-electron-app my-app
cd my-app
npm start

👉 Or check out the official boilerplate here: Electron Quick Start

🧠 Want to Build Something Cool?

You could build:

A markdown notes app 📝
A custom YouTube downloader 📽️
A cross-platform code snippet manager 💻
A Discord bot manager UI 🤖

📚 Resources

✨ Final Thoughts

Electron is more than a framework. It's a gateway for web developers to build native-like desktop apps — fast, powerful, and cross-platform.

If you’ve used any of the apps above — you've already experienced Electron’s magic.
Now it’s your turn to build something awesome.

💬 Drop a comment if you're interested in a full beginner-friendly Electron tutorial or boilerplate!

📌 Follow me on Dev.to or GitHub for more awesome web & desktop dev content.

Introducing to globalprice

Menula De Silva — Fri, 26 Sep 2025 07:02:51 +0000

Smart and dynamic pricing engine for global applications, supporting real-time currency conversion, quantity, discounts, tax calculations, and formatted output.

Github Repo Here

🚀 Features

🌐 Supports 160+ currencies
🔄 Auto-fetches latest exchange rates
🧾 VAT / GST / custom tax support
💸 Discount by percentage or fixed value
📦 Quantity multiplier
🪙 Currency symbol & locale-aware formatting
🧠 Works offline using cached or fallback rates
🔐 .env support for premium API keys

📦 Installation

npm install globalprice

✨ Usage Example

const { calculatePrice, updateRates } = require("globalprice");

await updateRates(); // optional, updates latest rates

const result = await calculatePrice({
  basePrice: 100,
  quantity: 2,
  currency: "LKR",
  discount: { type: "percent", value: 10 },
  tax: { type: "VAT", rate: 12 },
  format: true
});

console.log(result.formatted); // 'Rs 7320.00'

🧪 Test Locally

npm test

🔐 Environment Setup

Add .env for custom API keys:

EXCHANGE_API_KEY=your_api_key_here

📁 Folder Structure

globalprice/
├── src/
│   ├── index.js
│   ├── rates.js
│   └── currencies.js
├── cache/
│   └── exchangeRates.json
├── test/
│   └── globalprice.test.js
├── .env
├── package.json
├── LICENSE
└── README.md

📄 License

MIT © Menula De Silva

Stop Using `localStorage` for Everything – Here's What to Use Instead

Menula De Silva — Thu, 25 Sep 2025 04:11:21 +0000

Stop Using `localStorage` for Everything – Here's What to Use Instead

⚠️ Warning: localStorage is NOT a secure place to store sensitive data. Yet, it’s used everywhere. Let’s fix that with better alternatives.

😰 The Problem: `localStorage` is Like a Digital Trash Can

localStorage is tempting: it’s fast, globally accessible, and requires no setup. But it has serious flaws:

❌ No encryption: Data is stored in plain text.
❌ Vulnerable to XSS attacks: Malicious scripts can access it.
❌ Synchronous: Blocks the main thread, slowing down your app.
❌ No expiration: Data persists indefinitely unless manually cleared.
❌ Poor for structured data: It’s just key-value pairs.

🧠 Smarter Alternatives to `localStorage`

Here’s a quick guide to better storage options based on your use case:

Use Case	Better Alternative
Temporary session data	`sessionStorage`
Authentication tokens	`HttpOnly Cookies`
Structured or large data	`IndexedDB` or `Dexie.js`
Offline support & assets	`Cache API + Service Workers`
Relational browser database	SQLite with WebAssembly (e.g., `sql.js`)

Let’s dive into each option with examples.

🧪 1. `sessionStorage`: Perfect for Tab-Specific Data

sessionStorage stores data only for the duration of a browser tab’s session. Once the tab closes, the data is gone.

// Save a theme preference
sessionStorage.setItem("theme", "dark");

// Retrieve it
console.log(sessionStorage.getItem("theme")); // "dark"

Pros:

✅ Isolated to the current tab (no cross-tab interference).
✅ Simple API, similar to localStorage.

Cons:

❌ Data is cleared when the tab closes.

Use Case: Store temporary UI state, like form inputs or tab-specific settings.

📦 2. `IndexedDB` (or Dexie.js): Scalable, Async, and Structured

IndexedDB is a powerful, asynchronous NoSQL database in the browser, perfect for complex or large datasets. For a simpler API, use Dexie.js, a wrapper around IndexedDB.

🔹 Example with Dexie.js

import Dexie from "dexie";

// Initialize database
const db = new Dexie("MyAppDB");
db.version(1).stores({
  users: "++id, name, age" // Auto-incrementing ID, indexed fields
});

// Add a user
await db.users.add({ name: "Menula", age: 12 });

// Query users
const youngUsers = await db.users.where("age").below(18).toArray();
console.log(youngUsers); // [{ id: 1, name: "Menula", age: 12 }]

Pros:

✅ Asynchronous, non-blocking.
✅ Supports complex queries and large datasets (100MB+).
✅ Structured data with indexing.

Cons:

❌ Steeper learning curve than localStorage.

Use Case: Storing user profiles, app state, or large datasets.

🔐 3. `HttpOnly Cookies`: Secure Authentication

Never store auth tokens in localStorage! Why? Because any malicious JavaScript can read it:

// Hacker script
console.log(localStorage.getItem("auth_token")); // 😱 Steals your token!

Instead, use HttpOnly Cookies, which are inaccessible to JavaScript.

Example (Server-Side):

Set-Cookie: token=abc123; HttpOnly; Secure; SameSite=Strict; Max-Age=3600

Pros:

✅ Invisible to JavaScript, reducing XSS risks.
✅ Automatically sent with HTTP requests.
✅ Configurable expiration.

Cons:

❌ Limited to 4KB per cookie.
❌ Requires server-side setup.

Use Case: Securely storing authentication tokens or session IDs.

🚀 4. `Cache API`: Offline Support & Performance

The Cache API, paired with Service Workers, is ideal for caching assets or data for offline-first apps or Progressive Web Apps (PWAs).

// Register a Service Worker
navigator.serviceWorker.register("/sw.js");

// Cache assets
caches.open("app-cache").then(cache => {
  cache.addAll(["/styles.css", "/script.js"]);
});

Pros:

✅ Enables offline functionality.
✅ Fast asset retrieval.
✅ Great for PWAs.

Cons:

❌ Requires Service Worker setup.
❌ Complex for dynamic data.

Use Case: Caching images, scripts, or API responses for offline access.

🧩 5. SQLite in the Browser: Real SQL Power

With sql.js, you can run a full SQLite database in the browser using WebAssembly.

import initSqlJs from "sql.js";

// Initialize SQLite
const SQL = await initSqlJs();
const db = new SQL.Database();

// Create and populate a table
db.run("CREATE TABLE test (col1, col2);");
db.run("INSERT INTO test VALUES (?, ?);", [1, "hello"]);

// Query data
const results = db.exec("SELECT * FROM test");
console.log(results); // [{ col1: 1, col2: "hello" }]

Pros:

✅ Full SQL capabilities.
✅ Great for relational data.
✅ Large storage capacity.

Cons:

❌ Requires WebAssembly setup.
❌ Overhead for simple use cases.

Use Case: Complex apps needing relational data, like dashboards or CRMs.

✅ When is `localStorage` Actually OK?

localStorage isn’t evil—it’s just overused. It’s fine for:

UI Preferences: E.g., saving a user’s theme choice ("dark" or "light").
Feature Toggles: E.g., enabling/disabling experimental features.
Non-Sensitive Metadata: E.g., public app settings.

// Safe use of localStorage
localStorage.setItem("theme", "dark");
localStorage.setItem("feature:beta", "true");

🎯 Storage Options Compared

Feature	`localStorage`	`sessionStorage`	`IndexedDB`	`HttpOnly Cookies`	`Cache API`
Persistent	✅	❌	✅	✅	✅
Secure	❌	❌	✅	✅	✅
Structured Data	❌	❌	✅	❌	❌
Capacity	~5MB	~5MB	100MB+	<4KB	Unlimited
Async	❌	❌	✅	✅	✅

🔍 Visual Summary

Credit: Inspired by LogRocket Blog.

👋 Final Thoughts

Stop defaulting to localStorage for everything. Instead, choose the right tool based on:

📌 Security: Prioritize HttpOnly Cookies for auth.
📌 Data Complexity: Use IndexedDB or SQLite for structured data.
📌 Performance: Leverage Cache API for offline assets.

Let’s build safer, faster, and smarter web apps! 🚀

💬 What’s Your Go-To Storage Solution?

Do you love IndexedDB? Swear by HttpOnly Cookies? Or have you found a niche use for sql.js? Share your favorite tools and tricks in the comments below! 👇

❤️ Support This Post

If you found this helpful, drop a ❤️, 🦄, or 📝 on Dev.to to keep the knowledge sharing going!

🧬 Why Coding Is Becoming a Blue-Collar Job

Menula De Silva — Mon, 22 Sep 2025 15:11:19 +0000

🧬 Why Coding Is Becoming a Blue-Collar Job — and That’s a Good Thing

🛠️ From elite hackers to everyday builders — why coding is becoming the next skilled trade, and how that's changing the world.

🔥 TL;DR

Coding used to be a mysterious skill for only the chosen few. Today, it’s becoming as learnable, useful, and in-demand as plumbing or carpentry.
And that’s not an insult — it’s a revolution.

🧠 Table of Contents

Intro: The Elite Coder Era
Coding Is Becoming a Trade
Why That’s a Good Thing
The Tools Making This Possible
What It Means for the Future
Conclusion: We Are the Builders

🏛️ Intro: The Elite Coder Era

Not long ago, software engineering was seen as something for:

Computer science grads 👨‍🎓
Silicon Valley wizards 🧙‍♂️
People with \$150,000+ in student loans 💸

Code was gatekept behind jargon, degree walls, and "leet speak."

But something is changing...

🛠️ Coding Is Becoming a Trade

Like welding, plumbing, or electrical work — coding is becoming a modern trade:

Learnable in months (not years)
Focused on practical output
Valued for results, not credentials
More and more people doing it freelance, remotely, or on YouTube

💬 Real examples:

🚀 A 12-year-old building ecommerce apps (yes, that’s me 👋)
👩‍💻 Moms rejoining the workforce as WordPress developers
👷 Farmers learning Python to automate irrigation
🔧 Auto mechanics adding diagnostics with Arduino

💎 Why That’s a Good Thing

When coding becomes blue-collar:

✅ Good Thing	💥 Why It Matters
No degree required	Lower entry barrier 🚪
Based on skill, not paper	Equal opportunity ⚖️
Paid for real output	Merit-based income 💰
Global reach	Empowering countries like Sri Lanka 🌍
Anyone can be self-taught	Education freedom 🧠

🧰 The Tools Making This Possible

🔹 No-Code / Low-Code

Platforms like:

Bubble
Glide
FlutterFlow

Let you build apps without writing a single line of code.

🔹 Learn-to-Code Platforms

freeCodeCamp
YouTube
Alison
Great Learning

And even platforms for kids like Code.org and Codingal 👦

🔹 AI Tools

ChatGPT for explaining bugs
GitHub Copilot for autocompleting code
Replit Ghostwriter for real-time AI pair programming

🔮 What It Means for the Future

🧱 Code becomes the new brick and mortar.

Frontend = the new architecture
Backend = the new plumbing
APIs = the new electrical systems

Just like in construction — not everyone needs to be an architect.
We need skilled builders, too.

“Don't just be a software engineer. Be a software craftsman.”

👷 Conclusion: We Are the Builders

You don't need a Silicon Valley job to be a real developer.
If you can solve a problem with code — you're already one.

And if coding is becoming blue-collar, guess what?
That means anyone can build the next big thing.

🧵 Join the Conversation

Have you felt this shift too? Are you self-taught?
Do you agree that coding is becoming a modern trade?

👇 Drop a comment — I’ll reply to everyone!
Let’s build the future together 💪

🔗 Connect With Me

🚀 I'm Menula, a 12-year-old full-stack developer from Sri Lanka 🇱🇰

🌐 Portfolio Website
🧑‍💻 GitHub
💼 LinkedIn
📺 YouTube
X Twitter

❤️ If you liked this post, don't forget to:

✅ Like
💬 Comment
🔁 Repost
⭐ Follow me for more!

🎭✨ Bringing Interfaces to Life with Theatre.js ✨🎭

Menula De Silva — Sun, 21 Sep 2025 05:58:12 +0000

Have you ever wished your web animations felt more alive, cinematic, and interactive?

Meet Theatre.js

– a motion design library built for high-performance animations right in your browser. Whether you're building immersive websites, interactive portfolios, or stunning UI transitions, Theatre.js gives you full control over motion with a timeline-based editor inside your app.

🔧 Why Theatre.js?

Keyframe-based animation system 🕹️
Real-time editing and preview 🔁
Precise control over easing, duration, and delay ⏱️
Integration with React, Three.js, HTML/CSS, and more 🌐

🎨 It's like After Effects, but for the web – in code and in real time.

Whether you're a creative developer or UI/UX designer looking to push visual storytelling on the web, Theatre.js is a powerful tool worth exploring.

💡 Pro tip: Combine Theatre.js with Three.js for 3D motion, or React for dynamic UIs. The possibilities are endless.

🚀 Time to bring your frontend to life.

I Created Minecraft Browser Game

Menula De Silva — Sat, 20 Sep 2025 13:42:09 +0000

Hey Dev Community! 👋

I just finished a fun project where I recreated Minecraft in the browser using HTML,CSS,Js,Three.js

You can check it out here: Minefuncraft

It’s a small sandbox project, but I learned a ton about game mechanics, rendering, and interactive web design while building it.

You Can Play This With Multiplayer

Would love to hear your thoughts or suggestions for new features! 🚀

🚀 How I Built 5 Projects in 30 Days as a 12-Year-Old Developer

Menula De Silva — Sat, 20 Sep 2025 09:49:36 +0000

Hey Dev.to! 👋

I’m 12 years old and I’ve been coding for 2 years. Last month, I set myself a challenge: build 5 complete projects in 30 days using HTML, CSS, JavaScript, PHP, and React.

Here’s what happened—and what I learned:

1️⃣ Start Small, Finish Fast

Instead of aiming for huge apps, I broke ideas into mini MVPs.
Example: A full eCommerce site? Start with a single product page with add-to-cart.

2️⃣ Reuse Code Like a Pro

I made a personal library of components I could copy into new projects:

Navbar ✅
Login form ✅
Cards & modals ✅ etc.

3️⃣ Learn by Doing

React, Angular, and Flutter didn’t come from tutorials—they came from real projects.
Hands-on coding teaches faster than videos ever could.

4️⃣ Share Your Work

I uploaded all projects to GitHub and got feedback online. Even small suggestions level up your skills fast.

My GitHub: https://github.com/DMS-Menula

5️⃣ Embrace Mistakes

Every bug is a lesson. Debugging isn’t frustrating—it’s learning in action 🕵️‍♂️.

DEV Community: Menula De Silva

🚀 How I Got 25,000+ Views in 2 Days on a YouTube Short

🎯 1. Start by Reading Your Analytics

✔ Viewers are genuinely interested

✔ But the start could be stronger

⚡ 2. The First 3 Seconds Decide Everything

🔥 High-energy hooks

🎵 Music + Movement

🧠 Curiosity hooks

🎬 3. Keep It Fast, Clean, and Engaging

🔁 4. Add a Loop Moment ( Optional )

✨ 5. Encourage Smart Engagement

🎉 Final Thoughts

🚀 Introducing Gem Price Estimator (Open Source & Free!)

💡 What Is Gem Price Estimator?

🛠️ Why I Built This

🚀 Features

🔥 Calling All Contributors!

✅ How to Contribute

⭐ Let’s Build Sri Lanka’s Biggest Open Source Gem Project

🦇 Spooky Portal - Halloween CSS Art 🌙✨

🎨 Inspiration

👻 Demo

🕯️ Journey

What I learned:

What I’m proud of:

What’s next:

🧡 Credits & License

💎How I Built a Medium-Level E-Commerce Website

🧠 The Vision

⚙️ Tech Stack I Used

💎 Core Features I Built

🧍 1. Login, Signup, and Profile Management

🛍️ 2. Dynamic Product System

📨 3. Product Request System

💬 4. Review and Rating System

🌍 5. LKR → USD Price Conversion

📰 6. Blog Section

🎨 UI/UX Design

⚔️ Challenges I Faced

💡 What I Learned

🚀 What’s Next

❤️ Final Thoughts

Follow Me

👑Get Canva Pro For FREE In 4 Steps!

🚀 Do You Know These World-Famous Apps Are Built with Electron?

💡 What is Electron?

🏆 Popular Apps Built with Electron

⚙️ Why Use Electron?

🧪 How Electron Works

🛠️ Getting Started

🧠 Want to Build Something Cool?

📚 Resources

✨ Final Thoughts

Introducing to globalprice

🚀 Features

📦 Installation

✨ Usage Example

🧪 Test Locally

🔐 Environment Setup

📁 Folder Structure

📄 License

Stop Using `localStorage` for Everything – Here's What to Use Instead

Stop Using localStorage for Everything – Here's What to Use Instead

😰 The Problem: localStorage is Like a Digital Trash Can

🧠 Smarter Alternatives to localStorage

🧪 1. sessionStorage: Perfect for Tab-Specific Data

📦 2. IndexedDB (or Dexie.js): Scalable, Async, and Structured

🔹 Example with Dexie.js

🔐 3. HttpOnly Cookies: Secure Authentication

Example (Server-Side):

🚀 4. Cache API: Offline Support & Performance

🧩 5. SQLite in the Browser: Real SQL Power

✅ When is localStorage Actually OK?

🎯 Storage Options Compared

🔍 Visual Summary

👋 Final Thoughts

💬 What’s Your Go-To Storage Solution?

❤️ Support This Post

🧬 Why Coding Is Becoming a Blue-Collar Job

Stop Using `localStorage` for Everything – Here's What to Use Instead

😰 The Problem: `localStorage` is Like a Digital Trash Can

🧠 Smarter Alternatives to `localStorage`

🧪 1. `sessionStorage`: Perfect for Tab-Specific Data

📦 2. `IndexedDB` (or Dexie.js): Scalable, Async, and Structured

🔐 3. `HttpOnly Cookies`: Secure Authentication

🚀 4. `Cache API`: Offline Support & Performance

✅ When is `localStorage` Actually OK?