DEV Community: manu

I launched an app to the App Store and Google Play!

manu — Fri, 15 Aug 2025 00:39:57 +0000

After 6+ years in the making, Dysperse (dysperse.com) is officially live on the App Store & Google Play.

What started as a simple home inventory app for my mom in middle school has grown into a fully featured, cross-platform productivity tool — now approved for use across IUSD schools and featured in my high school’s newspaper.

Over the years, Dysperse evolved through multiple rewrites, eventually being rebuilt with Expo and deployed using EAS, making it fast, polished, and scalable for users everywhere. Along the way, I learned not just how to ship code, but how to design for accessibility, create intuitive user experiences, and keep an open-source project alive through continuous iteration. This wouldn’t have been possible without the support of amazing sponsors like Vercel, Cloudflare, and Neon.

As a free, open-source project, Dysperse makes productivity intuitive, colorful, and accessible. The best is yet to come.

Get it on iOS
Get it on Android

Factsify: Your Spotify listening habits in a nutrition facts label

manu — Sun, 28 Jul 2024 07:01:00 +0000

TLDR: Convert your Spotify listening habits into a nutrition facts label

I'm excited to announce the launch of my latest project: Factsify!

Factsify leverages the Spotify API to analyze your listening habits and present them in a fun and unique way—through a nutrition facts label format. Users can customize the time range for their listening data and display their top songs, artists, or genres.

Key features include:

Customizable Time Range: Select your preferred timeframe for analyzing your listening habits.
Detailed Insights: Get a nutrition facts style display of your top songs, artists, and genres.
High-Quality Design: Uses Adobe Typekit for professional fonts.
Modern Tech Stack: Built with Next.js and deployed on Cloudflare.
Shareable Format: Export your results as a PNG and share them on social media.
Analytics: Integrated with Google Analytics for detailed user insights.

Looking forward to your feedback and seeing how you enjoy using Factsify!

Create my label now

I published a package on NPM for the first time - and here's how to do it yourself! (Via replit.com)

manu — Tue, 01 Feb 2022 00:22:14 +0000

npm is the package manager for the Node JavaScript platform. It puts modules in place so that node can find them, and manages dependency conflicts intelligently. ... Most commonly, it is used to publish, discover, install, and develop node programs.

Source: Google

Step 1

Create an account at NPM, and verify your email
Then, create an account at https://replit.com, and click the * "Create" button at the the top left corner of the page !
Select "NodeJS" Image description

Step 2

You should see something like this:
Now, click on the "Shell button"
Run the following command:

npm init

This will help you generate a package.json file. This will be useful later.

Step 3 - Generating a package.json file

Fill in the name:
Fill in the version number:
Fill in the description:
Fill in the entry point (The main file)
Fill in the test command, git repository, keywords, and author. These parameters are optional
Type "Yes"
You should now see another file

Step 4 - Logging in to NPM

Type npm login in the shell
Enter your username and password
Don't worry if you don't see anything when you type your password. This is for security purposes
Type your email
You might have to verify your email

Step 5 - Let's write some code!

Type the following your code in the index.js file

// Taken from StackOverflow for demo purposes
function _genId(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * 
 charactersLength));
   }
   return result;
}
module.exports = _genId

Step 6 - Let's publish our code

Run npm publish in the console
You should see something like this:

Now, you can search your package on npm and install the npm package. Check out the example.js in the demo code

const uuid = require("awesome-string-generator");
console.log(uuid(100))

Demo

What are you doing for data privacy day?

manu — Fri, 28 Jan 2022 22:51:32 +0000

Data Privacy Day is an international event that occurs every year on 28 January. The purpose of Data Privacy Day is to raise awareness and promote privacy and data protection best practices. It is currently observed in the United States, Canada, Nigeria, Israel and 44 European countries

Discuss: What security measures will you take/already for your project/app/website?

Hey! Did you know Dev.to has an API??

manu — Fri, 14 Jan 2022 16:22:09 +0000

Have you ever wanted to embed a "Recent Posts" in your website? DEV.to has an API for this.

Check out this example: https://manuthecoder.ml

Just make a simple HTTP request to this URL:

https://dev.to/api/articles?username=____YOUR_USERNAME_HERE____&per_page=5

Example JS usage:

fetch("https://dev.to/api/articles?username=manuthecoder&per_page=10")
  .then(res => res.json())
  .then(res => {
  res.forEach(article => {
    var item = document.createElement("div")
    item.innerHTML = `<b>${article.title}</b><p></p>${article.description}</p>`;
    item.classList.add("card")
    document.body.appendChild(item)
  })
})

screw IE. nobody uses it lol

#bringBackHackerTheme

manu — Sat, 25 Dec 2021 08:38:20 +0000

This is an attempt to bring back the hacker theme to Forem

please vote here:
https://www.edpoll.ga/v/18/

programming memes that are refreshing

manu — Sat, 25 Dec 2021 08:29:48 +0000

Time to take a short break from coding all day..

lol this one is funny:

Same for this:

Dad joke:

Also Merry Christmas to those who celebrate it! (Pacific standard time)

what algorithm do you use to store your passwords?

manu — Wed, 15 Dec 2021 06:48:38 +0000

Yes, technically, you should be using Argon2 or Bcrypt or PBKDF2.

Argon2 is actually really secure.

Argon2 is modern ASIC-resistant and GPU-resistant secure key derivation function. It has better password cracking resistance (when configured correctly) than PBKDF2, Bcrypt and Scrypt (for similar configuration parameters for CPU and RAM usage).

If anyone here uses md5, sha512, sha256, or any weird hashing algorithms, I'll be upset.

This was me when i started PHP:

$password = md5(md5(md5(md5($_GET['password']))));

The correct way:

$password = password_hash($_POST["password"], PASSWORD_ARGON2I);

How to create a sleek "baseline" animation in CSS under 15 lines of code

manu — Mon, 29 Nov 2021 17:24:26 +0000

Off late, I've been obsessed with this trend in web pages. I saw this animation in Canva. Here's how to make it:

Step 1

Let's create some HTML. We'll need a span element.

<h1>
  <span class="text">Hello, World!</span>
</h1>

Step 2

Let's create some CSS

h1 {
  overflow: hidden;
}
h1 .text {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  display: inline-block;
  animation: baseline 0.5s forwards cubic-bezier(.4,0,.39,1.04);
}
@keyframes baseline {
  0% { transform: translateY(140%); }
  100% { transform: translateY(0); }
}

/* Just for basic styles */
html {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  color: white;
  background: #37474f
  ; 
}

Explained

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; - This is just for fancy stuff
display: inline-block; - We'll need this to animate the transform property
@keyframes baseline - This is the defined animation
overflow:hidden - Hides the overflow of the header

Great! You've successfully made a baseline CSS animation. Hit the ❤️ button if you liked this post!
Demo: https://jsfiddle.net/ManuTheCoder/xao1s6kd/68/

Crazy TLDs

manu — Mon, 29 Nov 2021 06:41:24 +0000

Check out these weird domain extensions:

.eurovision - No seriously. Imagine typing "google.eurovision"
.genting
.gent
.george
.sucks
.computer
.meme
.wtf
.online
.website
.dot - Yes, I know. facepalm
.rehab
.democrat
.republican
.ooo
.goo
.off

And check out: http://EE.EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE.EE
and
http://3.141592653589793238462643383279502884197169399375105820974944592.com/

If you liked this post, make sure to hit the like button ❤️
Follow me on GitHub: https://github.com/manuthecoder

Yes, these are emoji buttons

manu — Sat, 20 Nov 2021 23:07:52 +0000

Take a look at this horrid button in CSS. Click on it.

<button style="padding:0;border:0;background:transparent;outline:0;font-size: 100px" onclick="if(this.innerText=='🔲'){this.innerText='🔳'}else {this.innerText='🔲'}">🔲</button>

The purpose of this post is to let you know that you can use emojis in JavaScript, CSS, and HTML.

What's your favorite time to code?

manu — Fri, 05 Nov 2021 04:27:54 +0000

Many developers love to code during the night (like me), early in the morning, or even mid-afternoon. What's your favorite time?