DEV Community: Chocoscoding - Oyeti Timileyin

Built a 5k usd MRR app with AI but still needed a developer

Chocoscoding - Oyeti Timileyin — Tue, 21 Apr 2026 02:51:12 +0000

You see it everywhere you turn:

"I built this using just AI and im making 10K USD MRR"

"Just got funded 1 million dollars at 100 million USD valuation for my app i built with AI"

Well, I see it too... Initially, I was always thinking.
Damn! We(Devs) are so cooked 😬,
And more importantly… what about the next generation of devs?
Are they even going to want to enter this field anymore?

Questions that cast shadows of doubt about "Developers/Programmers relevance" would pop up.

Then something changed....

AI Bug Fixing in Freelancing

I went to fiverr and saw a trend... AI services were hot there.
But the ones that piqued my interest was:

AI-bug fixing, deployment and mvps

You see, AI still had to use the current architectures and systems that were already created.
But the average vibe-coding CEO didn't understand what the hell CI/CD was, or why their feature won't work on Safari, or how to stop bottleneck issues, or why GCP is returning an error.

Lovable, Bolt, Replit etc Their AI would always give them hopes even though its wrong or making things worse.

The fault isn't totally on the AI though. The startup founders who want to make their own 10K/month revenue app don't know how to best guide the AI. Garbage in, garbage out... except the garbage looks really confident and ships fast.

For simple-to-medium stuff? It works.
Missing semicolon, broken API call, quick UI tweak, adding automation flows... AI nails those

But here's what's also real:
Most of those AI-built service eventually ends up in front of a human developer.

Every single one of those AI codebases hits a wall. And when it does, someone posts on Reddit:

"Looking for a senior dev to untangle this mess. Will pay well."

The irony is beautiful. AI is generating a new category of freelance work: cleaning up after itself.

🔥 Why People Still Need You

Here's the pattern repeating across the freelance market right now:

Founder uses AI to build MVP
MVP grows, gets complex, accumulates technical debt
AI starts hallucinating fixes that break other things
Founder is confused, frustrated, and losing money
Founder hires a developer 🙂‍↕️ And that's not the only thing keeping developers essential:

Context is everything...
AI doesn't know your client's 8-year-old legacy codebase.
or
It doesn't know that the "bug" in the payment module is actually an intentional workaround nobody documented properly. 😂

Also, the stakes get real fast too...
Bug in production. Money bleeding. CEO panicking.

Nobody's waiting on a prompt chain. They're calling a developer or someone technical ASAP!

Debugging a function is one thing.
Designing the system, making tradeoffs, scaling it… that’s experience, which is highly relevant.

⚠️ The Bubble We May See

Now here's the part that genuinely worries me... and I don't see enough people connecting these dots.

The job shortage isn't just hurting developers today. It's quietly killing the next generation of developers before they even start.
Here's the thing...

Junior devs have always learned by getting hired. Working under seniors. Making mistakes in low stakes environments. Getting roasted in code review until they got good.

That pipeline is breaking.

Companies are cutting junior roles first.
Why hire a junior when AI can handle the boilerplate?

From a business perspective… it makes total sense.
But think about it for a second:

If no one hires juniors…
where do seniors come from?

The people entering the industry now are learning in a vacuum. Or not entering at all. Bootcamp enrollment is down. Too much reliance on AI without understanding concepts very well. CS grads are pivoting out. The message young people are getting is clear...

so they think: "There are no jobs, so why bother? 🤷"

Advice: Please bother. Give it a shot... me and my peers won't be here forever. You are the future.

🌱 So Where Does This Leave You?

If you're a developer right now: employed, freelancing, or searching. Here's the real talk:

Short term: It's rough. Adapt your positioning. There's still space here... for specialists, for generalists, for everyone in between.
That PostgREST bottleneck issue you fixed that one time? Someone today is tearing their hair out over the exact same thing.

No knowledge is lost 😉.

Medium term: Demand is growing for developers who understand AI-generated code. Who can audit it, extend it, deploy it properly. That's a real thing now.

Long term: Niche down. Get so deep on your concepts that you're not just using AI... you're directing it. The developers who understand the fundamentals well enough to drive AI-aided development? They're going to produce results nobody else can replicate.

And if the pipeline breaks the way I think it is... those developers won't just be valuable. They'll be rare.

The startup founder still needs someone to help when the app has been down since yesterday evening, users are churning, and the AI says it's done while the feature is still not working.

So guys... Stay in the game.
The future isn’t fewer developers. It’s fewer average ones...👋👋

You can also check out my fiverr gig on AI app fixing and development.

Stop the `data.data` Madness: Building a Custom Axios Client in TypeScript

Chocoscoding - Oyeti Timileyin — Fri, 05 Dec 2025 17:15:41 +0000

I was recently working on a project where the backend team decided (wisely) to wrap every API response in a standard envelope:

{
  "message": "Success",
  "data": { "id": 1, "name": "John Doe" },
  "meta": { "page": 1, "total": 100 }
}

On the backend, this is clean and consistent. I actually love it.

But in React components, it turns the code into a repetitive nightmare.

Just look at this:

// 🤮 The Issue
const response = await axios.get('/users/1');

// Double data? Really?
const user = response.data.data; 
const message = response.data.message;

If I had to type response.data.data one more time, I was going to scream.

If you are a frontend developer working with a structured backend, you know this struggle.

Today, let’s fix this. We are going to build a Custom API Client in TypeScript that unwraps this envelope automatically, handles types safely, and keeps your component logic clean.

The Goal

We want to transform Axios so that when we call get, we receive the inner data immediately at the top level, fully typed.

Target Usage:

// 😍 The New Way
const { data, message, meta } = await apiClient.get<User>('/users/1');

// TypeScript knows 'data' is a User!
console.log(data.name); 

// ✅ Access the server message:
console.log(`Alert: ${response.message}`); 

// ✅ Meta data {page: 1, totalPages: 6, totalProducts: 120}
  console.log(`Current page: ${response.meta?.page}`);

Step 1: Define the Backend Contract

First, we need to tell TypeScript what the "Raw" response looks like coming from the server.

// The shape of the raw JSON from the server
export interface ApiResponse<T = undefined> {
  message: string;
  data: T | null;
}

// The shape when pagination metadata is involved
export interface ApiResponseWithMeta<T = undefined, M = undefined> {
  message: string;
  data: T | [];
  meta?: M;
}

Step 2: The "Typed" Response

Next, we define what we want our frontend to receive. We are going to "hoist" the message and meta fields up, so they sit right next to our actual data, removing that annoying nesting.

import { AxiosResponse } from 'axios';

// We omit the standard 'data' property and replace it with our own typed version
export interface TypedAxiosResponse<T = undefined> extends Omit<AxiosResponse, 'data'> {
  data: T | null; // The actual resource (User, Product, etc.)
  message: string; // Hoisted from the nested object
}

// A version for paginated responses
export interface TypedAxiosResponseWithMeta<T = undefined, M = undefined> extends TypedAxiosResponse<T> {
  meta?: M;
}

Step 3: The Magic Wrapper

Instead of using the raw axios instance directly in our components, we create an apiClient object. This acts as a Facade. It calls Axios, intercepts the result, and unwraps it before returning it to you.

Here is the logic:

import axios, { AxiosRequestConfig } from 'axios';

// 1. Create the base instance with your interceptors (Auth, Logging, etc.)
const baseApiClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});

// 2. The Custom Client
export const apiClient = {
  get: async <T = undefined>(
    url: string,
    config?: AxiosRequestConfig
  ): Promise<TypedAxiosResponse<T>> => {

    // Call the raw axios instance
    const response = await baseApiClient.get<ApiResponse<T>>(url, config);

    // ✨ THE MAGIC: Remap response.data.data -> response.data
    return {
      ...response,
      data: response.data.data,    // Unwrapping happens here
      message: response.data.message,
    } as TypedAxiosResponse<T>;
  },

  // You can repeat this pattern for post, put, delete...
  post: async <T = undefined>(
    url: string, 
    data?: unknown, 
    config?: AxiosRequestConfig
  ): Promise<TypedAxiosResponse<T>> => {
    const response = await baseApiClient.post<ApiResponse<T>>(url, data, config);

    return {
      ...response,
      data: response.data.data,
      message: response.data.message,
    } as TypedAxiosResponse<T>;
  },
};

Step 4: Handling Pagination (The `meta` Field)

Sometimes you need that extra metadata (page numbers, total counts). Let's add a specific method for that so we don't clutter standard calls.

  getWithMeta: async <T = undefined, M = undefined>(
    url: string,
    config?: AxiosRequestConfig
  ): Promise<TypedAxiosResponseWithMeta<T, M>> => {
    const response = await baseApiClient.get<ApiResponseWithMeta<T, M>>(url, config);

    return {
      ...response,
      data: response.data.data,
      message: response.data.message,
      meta: response.data.meta, // Now easily accessible!
    } as TypedAxiosResponseWithMeta<T, M>;
  },

The Result

Now, look at how clean your service files or components become.

Before:

const getUser = async (id: string) => {
  const res = await axios.get(`/users/${id}`);
  // Hope you remember to check if res.data.data exists!
  return res.data.data; 
}

After:

interface User { id: number; name: string; }

const getUser = async (id: string) => {
  // Typescript infers 'data' is User, and 'message' is string
  const { data, message } = await apiClient.get<User>(`/users/${id}`);

  toast.success(message); // "User retrieved successfully"
  return data;
}

Bonus: Centralized Error Handling

Because we still use baseApiClient underneath, we can attach interceptors to handle 401s (Unauthorized) or 500s globally.

If your token expires, your base client can catch it, attempt a refresh, or redirect to login via next-auth before your component even knows something went wrong.

Summary

Don't let your backend structure dictate your frontend messiness. By creating a lightweight wrapper around Axios:

You stop typing .data.data.
You get perfect TypeScript autocomplete.
You separate your HTTP logic from your UI logic.

Happy coding! 🚀

Sitemap couldn't fetch in Google Search Console - fix

Chocoscoding - Oyeti Timileyin — Wed, 01 Jan 2025 13:27:12 +0000

To set up your site to be indexed by Google Search, you need to have a robots.txt file and a sitemap.xml file in your site.

Here’s how I set up my own sitemap and robots file using Next.js. My solution takes TypeScript files and converts them into .txt and .xml files, which are then placed in the public directory of the site.

robot.ts
This is the code for my robots.txt file:

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://www.thook.xyz/sitemap.xml",
    host: "https://www.thook.xyz",
  };
}

sitemap.ts
Below is the code for generating my sitemap.xml file dynamically:

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const routes: MetadataRoute.Sitemap = [
    {
      url: "",
      changeFrequency: "monthly",
      priority: 1,
    },
    {
      url: "/search",
      changeFrequency: "monthly",
      priority: 0.5,
    },
  ];

  return routes.map(({ url, ...rest }) => ({
    ...rest,
    url: `https://thook.xyz${url}`,
    lastModified: new Date(),
  }));
}

The Problem 🤔

While my robots.txt worked flawlessly, my sitemap.xml kept returning an error:

It seemed like Google Search Console had cached an old version of my sitemap, and nothing I did seemed to fix the issue.

The Solution 🚀

To work around this, I created a new sitemap2.xml file and placed it in the public directory of my Next.js application:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <url>
        <loc>https://thook.xyz/</loc>
        <lastmod>2025-01-01T11:39:05.531Z</lastmod>
        <changefreq>yearly</changefreq>
        <priority>1</priority>
        <xhtml:link rel="home" href="https://thook.xyz/" />
    </url>
    <url>
        <loc>https://thook.xyz/search</loc>
        <lastmod>2025-01-01T11:39:05.531Z</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
        <xhtml:link rel="search" href="https://thook.xyz/search" />
    </url>
</urlset>

And just like that, Booom!💥.
Jan 1st problem solved ✅.

Lessons Learned 📚

Here’s what I learned about using Google Search Console:

Be patient: Google Search Console can take time to crawl and update your site. Don’t panic.
Try a fresh name: If you’re facing persistent errors, create a new sitemap with a different name that Google hasn’t cached yet.

Thanks for reading.

Download Video from s3 with Cloudfront, nodejs and react

Chocoscoding - Oyeti Timileyin — Sun, 22 Dec 2024 12:07:33 +0000

I never realized downloading a file on a button click could be such a headache, but here we are. After some trial and error, I did what we do best as developers—find solutions.

Here’s the situation:
I was using S3 and CloudFront for video file delivery. The videos were encrypted and access-restricted on the backend to ensure no one could directly grab them from my S3 bucket. Users had the ability to watch and download videos.

Attempt 1: Basic Download Logic

Initially, I tried the typical approach:

const handleDownload = () => {
    const link = document.createElement("a");
    link.href = videoUrl;
    link.download = `${title || "video"}-thook.mp4`; // Provide a default filename if `title` is unavailable.
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // Cleanup after the download is triggered
  };

This worked… sort of. Instead of downloading, it redirected to another page and started playing the video.

The culprit? I had set ContentType during the S3 upload process.

const param = {  
  Bucket: process.env.AWS_S3_BUCKET_NAME,  
  Key: `${directory}/${uuid()}-${file.originalname}`,  
  Body: file.buffer,  
  // ContentType: file.mimetype ❌ (Removed this)  
};  

await s3.upload(param).promise();

After removing the ContentType setting, files finally started downloading correctly on desktops.

Attempt 2: Mobile Safari and Other Browser Issues

The next problem? Safari on mobile devices and some other browsers still insisted on opening the video instead of downloading it.

To fix this, I decided to stream the video from the backend using Node.js and set appropriate headers to force downloads:

import axios from "axios";
const downloadWithSignedURL = async (req: Request, res: Response) => {
  const signedUrl = req.query.signedUrl as string;
  const filename = (req.query.filename as string) || "video.mp4";

  if (!signedUrl) {
    return res.status(400).send("Signed URL is required.");
  }

  try {
    // Fetch the video stream using axios
    const response = await axios.get(signedUrl, {
      responseType: "stream",
    });

    if (response.status === 200) {
      // Set headers to force download
      res.setHeader("Content-Disposition", `attachment; filename="${filename}-THOOK.mp4"`);
      res.setHeader("Content-Type", "video/mp4");

      // Pipe the video stream to the client
      response.data.pipe(res);
    } else {
      res.status(response.status || 500).send("Failed to fetch video.");
    }
  } catch (error) {
    console.error("Error handling download:", error);
    res.status(500).send("Failed to handle download.");
  }
};

//route.ts
...
router.get("/downloadVideo", DownloadController.downloadWithSignedURL);

On the frontend, I adjusted the logic to interact with this backend route:

//in react 

const handleDownload = () => {  
  const downloadUrl = `${API_ROUTE}/downloadVideo?signedUrl=${encodeURIComponent(url)}&filename=${encodeURIComponent(name || "video.mp4")}`;  
  window.open(downloadUrl, "_blank"); 
  };

Final Solution: Seamless Download Without a New Tab

To improve user experience, I modified the logic to directly trigger downloads without opening a new tab:

const handleDownload = () => {  
  if (!url) {  
    alert("Please provide the signed URL.");  
    return;  
  }  
  try {  
    const downloadUrl = `${API_ROUTE}/downloadVideo?signedUrl=${encodeURIComponent(url)}&filename=${encodeURIComponent(name || "video.mp4")}`;  

    const link = document.createElement("a");  
    link.href = downloadUrl;  
    link.setAttribute("download", name || "video.mp4");  
    document.body.appendChild(link);  
    link.click();  
    link.remove();  
  } catch (error) {  
    console.error("Download error:", error);  
  }  
};

And voilà! The download now starts immediately after clicking the button, with no interruptions.

So that is how I created the download feature you here:

Side Notes

Here are a few key insights from the process:

S3 ContentType Issues: Setting ContentType caused files always be in the specified format instead of downloading. Removing it fixed desktop downloads.
Browser Compatibility: Safari and some browsers required backend streaming with forced download headers for consistency.
Better UX: Dynamically creating an <a> element allowed downloads without opening new tabs, creating a smoother user experience.

Thanks for reading 🙇‍♂️.

Perfectly Qualified Yet Rejected? Here’s Why It Happens and What to Change

Chocoscoding - Oyeti Timileyin — Sun, 27 Oct 2024 22:34:06 +0000

It’s a common frustration for many job seekers: You’ve tailored your resume, crafted a great cover letter, and checked all the qualification boxes, yet you’re still facing rejection—or worse, not hearing back at all. If this sounds familiar, know that you’re not alone, and the reasons behind these rejections are often more complex than you might think.
In this post, we’ll explore some hidden challenges job seekers face today and offer actionable tips to help you overcome them.

Let's look at some common scenarios where highly qualified candidates still face rejection

The “Growth Facade”

Many companies post jobs to give an impression of rapid growth and expansion, even if they do not intend to fill the roles. This tactic sometimes used to boost company image or investor interest, can lead job seekers to waste time on positions that aren’t truly hiring.

What to Do: If you spot repeated job postings from the same company over time, it might be best to save your time and look elsewhere.

Remote isn't that straightforward

The term “Remote” has become a powerful draw for job seekers, but it doesn’t always mean “Remote Worldwide.” Many companies label positions as remote but restrict hiring to specific regions (EMEA, APAC, or only within a certain country) due to legal, logistical, or tax constraints. Often, these limitations aren’t disclosed in the job listing, leaving candidates disappointed when they’re automatically disqualified based on location.

What to Do: Look carefully for any region-specific language in the job posting and, if possible, search the company’s hiring FAQs or career page for more details. Job boards like We Work Remotely and Remote OK often filter jobs by region, which can save you time by showing positions that align with your location.

The “Employee Lock-Up”

Some companies post positions to relieve current employees under heavy workloads, even though they may not have immediate plans to hire. This tactic is often used to boost morale temporarily, by creating an impression that help is on the way.

What to Do: If you’ve applied to a role and don’t receive timely feedback or see the same listing repeated often, it might indicate that hiring isn’t a priority. Follow up on your application, and if you receive vague responses, consider exploring other options.

Reach Out to Recruiters Directly

Don't just apply to hundreds of roles and leave it there. Sending a LinkedIn message to recruiters shows initiative, sets you apart from the crowd, and builds rapport. Making a memorable impression could make the recruiter more inclined to pick you.

What to do: After applying, send a message to the recruiter on LinkedIn expressing your genuine interest in the role and highlighting something specific about the company that excites you. Personalized outreach shows initiative, making you more memorable than the average applicant.

Here are a list of good job boards to find remote worldwide jobs:

Worldwide Remote (This is a telegram channel that vets and post only Worldwide remote jobs) 😍✅.
RemoteOk
Remotive
WeWorkRemotely
Truly remote
Nodesk
Careervault
Workinstartups
Workingnomads
TrueUp 😍

Job hunting can feel like running a marathon—you’re giving it your all, but surprise hurdles pop up along the way. Don’t let them slow you down! Every setback is just part of the journey. Stay sharp, keep adjusting, and remember: every ‘no’ gets you closer to a ‘yes.’
Now, go turn those rejections into redirections! 🎉

Custom Cursor in 4 Simple Steps – No External Libraries Needed!

Chocoscoding - Oyeti Timileyin — Tue, 21 Nov 2023 19:46:26 +0000

Ever stumbled upon websites with mesmerizing cursors that take the user experience to the next level? You might think achieving that requires complex libraries or long styling, but it's actually easy.

In just four simple steps and a few lines of code, you can bring that magic to your site. Let's dive in and make your cursor stand out! 💻✨

Step 1: Set Up useRef and Attach to the Div

First things first, let's set up a useRef to grab our custom cursor div. This will serve as the canvas for our cursor movements.

import { useRef } from 'react';

const CustomCursor = () => {
  const cursorRef = useRef(null);

  return <div ref={cursorRef} className='custom-cursor' />;
};

export default CustomCursor;

Step 2: Style It Up with Some CSS Magic

Let's make our custom cursor visually appealing! Add this CSS code to give it a stylish look 🎇:

.custom-cursor {
  z-index: 1000;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid #fff;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  position: fixed;
  overflow: hidden;
}

@media (prefers-color-scheme: light) {
  .custom-cursor {
    border: 1px solid #000;
  }
}
/* Feel free to customize the size, colors, and border according to your taste! */

Step 3: The Magic of useEffect

In this useEffect, we're creating a dynamic custom cursor for a React app. The mouseTransformer function adjusts the cursor's position based on mouse movement, providing a real-time, polished user experience. An event listener on the document triggers this function on mouse movement, creating a seamless dance between the cursor and user interaction.

import { useEffect, useRef } from 'react';
import './style.css'; // 🚀 Don't forget to import the CSS for your custom cursor!

const CustomCursor = () => {
  const cursorRef = useRef(null);

  useEffect(() => {
    // 🎨 Mouse transformation magic happens here!
    const mouseTransformer = (event) => {
      const { clientX, clientY } = event;
      const mouseX = clientX - cursorRef.current.clientWidth / 2;
      const mouseY = clientY - cursorRef.current.clientHeight / 2;
      cursorRef.current.style.left = `${mouseX}px`;
      cursorRef.current.style.top = `${mouseY}px`;
    };

    document.addEventListener('mousemove', mouseTransformer);

    // 🚀 Cleanup event listener on component unmount
    return () => document.removeEventListener('mousemove', mouseTransformer);
  }, []);

  return <div ref={cursorRef} className='custom-cursor' />;
};

export default CustomCursor;

Step 4: Import and Let the Magic Begin

import React from 'react';
import ReactDOM from 'react-dom';
import CustomCursor from './path/to/CustomCursor';

ReactDOM.render(
  <React.StrictMode>
    {/* Other components */}
    <CustomCursor />
  </React.StrictMode>,
  document.getElementById('root')
);

Just like that! In just 4 steps, you've crafted your very own React custom cursor without relying on external libraries. 🌈✨ Get creative, experiment with styles, and make your website stand out with a cursor that's as unique.!

Happy coding! 🚀🎨

Js Devs: Position of you ++ or — matters

Chocoscoding - Oyeti Timileyin — Tue, 21 Nov 2023 15:51:01 +0000

JavaScript provides powerful operators for manipulating numeric values ++ for incrementing and -- for decrementing. Understanding the nuances between postfix and prefix usage is crucial for precise programming.

Postfix Increment and Decrement

Postfix increment and decrement operators (i++ and i--) are used to change the value of a variable after its current value is used in an expression.

let i = 5;
console.log(i++); // Outputs: 5 (uses current value, then increments)
console.log(i);   // Outputs: 6 (value has been incremented)

Prefix Increment and Decrement

Prefix increment and decrement operators (++i and --i) are used to change the value of a variable before its current value is used in an expression.

let i = 5;
console.log(++i); // Outputs: 6 (increments first, then uses the updated value)
console.log(i);   // Outputs: 6 (value has been incremented)

An extra example

With postfix

// Postfix decrement: prev--
let inventoryCount = 5;

function processSalePostfix() {
  if (inventoryCount > 0) {
    console.log("Item sold! Remaining inventory:", inventoryCount--);
  } else {
    console.log("Item out of stock!");
  }
}

// Simulate sales
processSalePostfix(); // Output: Item sold! Remaining inventory: 5
processSalePostfix(); // Output: Item sold! Remaining inventory: 4
processSalePostfix(); // Output: Item sold! Remaining inventory: 3

In this scenario, with postfix decrement, the current inventory count is logged, and then the inventory count is decremented. This might be useful if you want to display the current inventory count before processing the sale.

with prefix

// Prefix decrement: --prev
let inventoryCount = 5;

function processSalePrefix() {
  if (--inventoryCount > 0) {
    console.log("Item sold! Remaining inventory:", inventoryCount);
  } else {
    console.log("Item out of stock!");
  }
}

// Simulate sales
processSalePrefix(); // Output: Item sold! Remaining inventory: 4
processSalePrefix(); // Output: Item sold! Remaining inventory: 3
processSalePrefix(); // Output: Item sold! Remaining inventory: 2

In this scenario, with prefix decrement, the inventory count is decremented before checking if it's greater than 0. This might be useful if you want to ensure that the inventory count is updated before any other operations, such as logging or further processing.

Conclusion

In summary, postfix increment/decrement is useful when you need the current value before the change, and prefix increment/decrement is ideal when you need the updated value after the change. This nuanced understanding will undoubtedly enhance your proficiency as a JavaScript developer.

NOTE FOR REACT DEVELOPERS: Be careful with postfix if your values may be used before a rerender.

Thanks for your time 🙂👍.

Pixel-Perfect Development with React Plugin from FIGMA

Chocoscoding - Oyeti Timileyin — Thu, 14 Sep 2023 13:53:22 +0000

If you're a React web developer, you're likely familiar with the challenge of aligning your designs with your code. You may have experienced that frustrating feeling of your design not quite matching up to your expectations. I used to struggle with alignment issues and had to create multiple border lines to ensure everything lined up properly, but it didn't always produce the desired results.

That's where Layout-greed comes in. This plugin, inspired by Figma's layout grid, guarantees precise alignment and consistency for every pixel in your project or product. So, if i design using a particular design grid scheme, you can copy it to your frontend project and build with it.

Here are the 3 types of layout guidelines you get:

Columns
Rows
Grid

res.cloudinary.com

Looking good? See the demo below 👇

Demo

How to use

For yarn users - yarn install layout-greed
For npm users - npm install layout-greed

import { Layout } from 'layout-greed';
const App = () => {
  return (
    <div className="App">
      <Layout />
    </div>
  );
};

Check out layout greed on npm for more info.

Conclusion

I believe this would help a lot of developers who love to make accurate interpretations from designs while keeping it nice and crispy 🥰.
So, tell me what you think. Is this something you would use? If not, tell me why 😉

NEXT.Js Link routing on steroids

Chocoscoding - Oyeti Timileyin — Tue, 12 Sep 2023 12:59:43 +0000

When building things with Next.JS 13, I previously had two main problems when using Next.JS component:

I sometimes had to compromise on the server components' awesomeness when dealing with more complex routing scenarios. e.g Using a route that requires a params

"use client";
import { useParams } from "next/navigation";
import Link from "next/link";
const Normal = () => {
  const params = useParams();

  //current page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Request
  return (
    <div>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Members */}
        <Link href={`/groups/${params!.id}/manage/Membership/Members`}>Membership</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Community/Members */}
        <Link href={`/groups/${params!.id}/manage/Community/Members`}>Community</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Content */}
        <Link href={`/groups/${params!.id}/manage/Content`}>Content</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h */}
        <Link href={`/groups/${params!.id}`}>Content</Link>
     </div>
  );
};

Some unnecessarily overly long link strings in my href attributes. 😫

import Link from "next/link";
const Normal = () => {
//current page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme
return (
  <div>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme/secondary */}
      <Link href={`/main/portfolio/flyingDay/info/colorScheme/secondary`}>secondary</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/typography */}
      <Link href={`/main/portfolio/flyingDay/info/typography`}>typography</Link>
      {/* go to page: http://localhost:3000/main/portfolio/HappyMan */}
      <Link href={`/main/portfolio/HappyMan`}>HappyMan</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay */}
      <Link href={`/main/portfolio/flyingDay/info`}>main info</Link>
   </div>
  );
};

This becomes a lot more stressful and repetitive when building large web apps and you have to go through these... right???

But guess what? Building large web applications doesn't have to be a constant source of stress and repetition! 😄 NEXT.js has introduced an amazing feature that will make you smile. 😊 Now, creating cleaner and more efficient links is a breeze, without giving up on server components.

You can now create links as if routes are just like navigating through folders. Just like you would import from a files tree:

So basically treat every / or route as a folder.

abc --- i want to replace something in this path with abc

./abc --- i want to replace something in this path with abc

../abc --- i want to replace something in the parent path above the last path with abc

../../abc --- i want to replace something 2 paths above the last path with abc

../../../abc --- i want to replace something 3 pathsabove the last path with abc

Here's how it looks in action:

import Link from "next/link";
const Normal = () => {
  //current page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Request
  return (
    <div>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Members */}
        <Link href={`Members`}>Membership</Link>
        <Link href={`./Members`}>Membership</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Community/Members */}
        <Link href={`../Community/Members`}>Community</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Content */}
        <Link href={`../Content`}>Content</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h */}
        <Link href={`../../`}>Content</Link>
     </div>
  );
};

import Link from "next/link";
const Normal = () => {
//current page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme
return (
  <div>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme/secondary */}
      <Link href={`colorScheme/secondary`}>secondary</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/typography */}
      <Link href={`typography`}>typography</Link>
      {/* go to page: http://localhost:3000/main/portfolio/HappyMan */}
      <Link href={`../../HappyMan`}>HappyMan</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay */}
      <Link href={`../`}>main info</Link>
   </div>
  );
};

With this method (path based href), We can:

Avoid always using useParams hook.
Be flexible in changing hrefs.
Avoid too long href links in our code.

You can view the idea discussion on this feature here,

On a scale of 1 - 10, what do you rate this feature ?
If you have any questions, contributions or critique on this, I would love to hear them 🤗

Editing react quilljs markdown styling

Chocoscoding - Oyeti Timileyin — Thu, 20 Jul 2023 17:23:01 +0000

I was creating a markdown editor with Quilljs in my nextjs project with tailwind and had problem styling it since I was using light and dark mode.
Well, here is the hack around it 🎊.

Since i was using tailwind, the best way was to make sure that quilljs elements were receiving some specific stylings from my parent class, so I could control it easily. 🤔🤔🤔💭

This is an edited version of the Quill component

//quill component
import { FC } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
interface EditorProps {
  className: string;
  placeholder: string;
}

const modules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
    ["link", "image"],
    ["clean"],
  ],
};

const formats = ["header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet", "indent", "link", "image"];

const Editor: FC<EditorProps> = ({ placeholder, className }) => {

  return (
    <>
      <ReactQuill
        className={className}
        placeholder={placeholder}
        modules={modules}
        formats={formats}

      />
    </>
  );
};

export default Editor;

Add this to your root css (global.css,main.css or whatever you use)

// root css file
.quill > * {
  border-color: inherit !important;
  color: inherit !important;
}
.quill > .ql-toolbar {
  /* border radius of the toolbar */
  border-radius: 10px 10px 0 0;
}
.quill > .ql-container {
  /* border radius of the container and for font size*/
  font-size: inherit;
  border-radius: 0 0 10px 10px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  color: inherit !important;
  opacity: 0.76;
}
.ql-snow .ql-picker {
  color: inherit !important;
}
.quill > .ql-container > .ql-editor.ql-blank::before {
  /* for placeholder */
  color: inherit;
}
.ql-snow.ql-toolbar button svg {
  opacity: 0.76;
  color: currentColor;
}
.ql-snow .ql-stroke {
  /* for the border of the editor */
  stroke: currentColor !important;
}
.ql-snow .ql-fill {
  /* for the bg color */
  fill: currentColor !important;
}
.ql-picker-item {
  /* for dropdown */
  color: #444 !important;
}

Use it in your page or component

<Editor
   className="my-4 dark:border-secondary-40 border-gray-500 rounded-md text-gray-800 dark:text-white lg:text-xl text-lg"
   placeholder={"Write something here..."}/>

RESULTS 😍😍😍

I'll love to get some opinion and answer questions you may have.

DEV Community: Chocoscoding - Oyeti Timileyin

Built a 5k usd MRR app with AI but still needed a developer

AI Bug Fixing in Freelancing

🔥 Why People Still Need You

⚠️ The Bubble We May See

🌱 So Where Does This Leave You?

Stop the `data.data` Madness: Building a Custom Axios Client in TypeScript

The Goal

Step 1: Define the Backend Contract

Step 2: The "Typed" Response

Step 3: The Magic Wrapper

Step 4: Handling Pagination (The meta Field)

The Result

Bonus: Centralized Error Handling

Summary

Sitemap couldn't fetch in Google Search Console - fix

The Problem 🤔

The Solution 🚀

Lessons Learned 📚

Download Video from s3 with Cloudfront, nodejs and react

Attempt 1: Basic Download Logic

Attempt 2: Mobile Safari and Other Browser Issues

Final Solution: Seamless Download Without a New Tab

Side Notes

Perfectly Qualified Yet Rejected? Here’s Why It Happens and What to Change

The “Growth Facade”

Remote isn't that straightforward

The “Employee Lock-Up”

Reach Out to Recruiters Directly

Custom Cursor in 4 Simple Steps – No External Libraries Needed!

Step 1: Set Up useRef and Attach to the Div

Step 2: Style It Up with Some CSS Magic

Step 3: The Magic of useEffect

Step 4: Import and Let the Magic Begin

Js Devs: Position of you ++ or — matters

Postfix Increment and Decrement

Prefix Increment and Decrement

An extra example

Conclusion

Pixel-Perfect Development with React Plugin from FIGMA

Here are the 3 types of layout guidelines you get:

Demo

How to use

Conclusion

NEXT.Js Link routing on steroids

Editing react quilljs markdown styling

Step 4: Handling Pagination (The `meta` Field)