Embracing Vibe Coding: Enhancing Development Efficiency with AI-Powered Tools

In the ever-evolving world of software development, new methodologies continually emerge to enhance productivity and streamline workflows. One such approach gaining traction is “vibe coding,” a term introduced by computer scientist Andrej Karpathy in February 2025. This method emphasizes a more intuitive and fluid interaction with code, allowing developers to focus on the broader vision rather than getting bogged down by intricate details.

Understanding Vibe Coding

At its core, vibe coding involves leveraging advanced AI tools to translate natural language prompts into functional code. This means that instead of meticulously writing every line, developers can describe the desired functionality, and the AI assists in generating the corresponding code. Karpathy encapsulated this approach by stating, “I just see stuff, say stuff, run stuff, and copy-paste stuff, and it mostly works.”

This paradigm shift allows developers to “fully give in to the vibes,” embracing a more organic coding process. By doing so, they can focus on higher-level problem-solving and design, trusting the AI to handle the granular implementation details.

Enhancing Workflow with AI-Powered Tools

Integrating AI-powered tools like Cursor and advanced language models such as Claude by Anthropic can significantly enhance a developer’s workflow, making coding more efficient and intuitive.

Cursor: An AI-Integrated Development Environment

Cursor is an AI-powered code editor that builds upon the familiar interface of Visual Studio Code, offering developers a seamless transition with added intelligent features. Its key functionalities include:

1. AI-Powered Code Generation: Developers can write code using natural language instructions. By providing simple prompts, users can generate or update entire classes or functions, streamlining the coding process.
2. Intelligent Autocompletion: Cursor predicts subsequent code edits, enabling users to navigate through changes efficiently. This feature facilitates rapid development by anticipating the developer’s needs.
3. Codebase Understanding: The editor can comprehend and provide insights into the entire codebase. Developers can query the codebase in natural language to retrieve information or refer to specific files and documentation, enhancing code comprehension and navigation.
4. Smart Rewrites: Cursor offers smart rewrite capabilities, allowing users to update multiple lines of code simultaneously. This feature is particularly useful for refactoring and implementing bulk changes efficiently.
5. Extension Compatibility: As a fork of Visual Studio Code, Cursor supports the integration of existing extensions, themes, and keybindings. This compatibility ensures that developers can maintain their preferred workflows without disruption.

Claude by Anthropic: Advanced AI Assistance

Claude is a next-generation AI assistant developed by Anthropic, designed to be safe, accurate, and secure, assisting developers in their work. It offers:

1. Agentic Coding Assistance: Claude Code is an agentic tool that lets developers delegate sizable coding tasks directly from their terminal, allowing for efficient task management and execution.
2. Enhanced Reasoning Capabilities: With models like Claude 3.7 Sonnet, Claude excels in instruction-following, general reasoning, and multimodal capabilities, providing comprehensive support for complex coding tasks.
3. Seamless Integration: Claude can be integrated into various development environments, providing explanations, suggestions, and code generation to enhance productivity.

Embracing the Future of Development

By integrating tools like Cursor and Claude into the development workflow, developers can embrace the essence of vibe coding. This approach not only accelerates the coding process but also fosters a more creative and intuitive interaction with software development. As the industry continues to evolve, adopting such methodologies ensures that developers remain at the forefront of innovation, harnessing the full potential of AI to transform ideas into reality.

Works Cited

1. Andrej Karpathy. “There’s a new kind of coding I call ‘vibe coding’, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.” X (formerly Twitter), 2 Feb. 2025, https://x.com/karpathy/status/1886192184808149383.
2. “Features | Cursor - The AI Code Editor.” Cursor, https://www.cursor.com/features.
3. “Claude 3.7 Sonnet and Claude Code.” Anthropic, https://www.anthropic.com/news/claude-3-7-sonnet.
4. “Write beautiful code, ship powerful products | Claude by Anthropic.” Anthropic, https://www.anthropic.com/solutions/coding.
5. “Sourcegraph enhances the intelligence and speed of their AI coding assistant with Claude.” Anthropic, https://www.anthropic.com/customers/sourcegraph.

Read More

A Box Full of Hope — Breaking Down the MAPIM Ramadhan Aid Poster

Every image tells a story — and this one is no different.

As Ramadhan approaches, humanitarian organisation MAPIM Malaysia launches its Dapur Ramadhan initiative, inviting the public to contribute to a noble cause: providing food aid to struggling families. But this poster doesn’t just ask for donations. It tells a story, evokes emotion, and drives home a powerful message. Let’s break it down.

1. The Quote That Hits Home

“Ayah, adik teringin nak kotak bantuan MAPIM…” (“Father, i wish for one of those MAPIM aid boxes…”)

This line forms the emotional heart of the poster. It’s written from the perspective of a child — innocent, honest, and longing. The use of the word “teringin” (longing/desiring) reflects more than just physical hunger; it highlights emotional deprivation, the desire to feel seen and cared for.

MAPIM cleverly uses this child’s voice to soften our hearts and remind us that beyond every aid box, there’s a story, a face, a family.

2. The Visual Contrast: Black and White vs Colour

Most of the image is in black and white — the road, the background, the trees, and even the man’s body — except for one part: the aid box.

The green-and-white box labeled “Peduli Ummah” (Care for the Ummah) stands out in full colour. This visual contrast is intentional. It symbolises hope amidst hardship, life amidst struggle, and colour amidst dullness. The aid box isn’t just a box — it’s a symbol of relief, dignity, and Ramadhan blessings.

3. The Figure on the Bicycle

The man in the image, seen from behind, pushes a bicycle with the aid box tied to it. He represents the everyday unsung hero — perhaps a father, a grandfather, a neighbour — someone who silently carries the burden for his family.

The bicycle itself is significant. It symbolises modesty, struggle, and movement, perhaps even the distance people go just to receive basic aid. This image is not just visual storytelling — it’s a subtle reminder of how far people are willing to go for help, and how far we should go to offer it.

4. Call to Action: Clear and Direct

At the bottom of the poster, we find the call to action:

“Infaq untuk Tabung Dapur Ramadhan: mapim.berisalam.net”

It’s straightforward. “Infaq” — meaning charitable giving — is a spiritual act during Ramadhan. The URL provided leads directly to where contributions can be made. The message? You’ve seen the story. Now be part of the solution.

5. Branding and Legitimacy

Top right corner: MAPIM’s logo and Arabic script add authenticity.

Bottom left: The “Dapur Ramadhan” campaign logo gives identity to the initiative.

Together, they signal credibility and trustworthiness, essential elements for any crowdfunding effort.

Final Thoughts:

This poster is more than just a design. It’s a carefully crafted emotional appeal rooted in visual storytelling. It balances simplicity and depth — tugging at the heart while making it incredibly easy to respond with action.

In a world overwhelmed with digital noise, MAPIM’s poster succeeds by doing one thing right: it makes you stop, feel, and think — and maybe, just maybe, it moves you to give.

To contribute to the Dapur Ramadhan initiative, visit:

mapim.berisalam.net

Let’s be the reason a child smiles this Ramadhan.

Read More

Enough with the GenAI, will ya?

Look, I get it. GenAI is exciting. It’s shiny, it talks back, and it even writes your lesson plans while you sip kopi tarik. What’s not to love?

But here’s the thing: can we, as Malaysian academics — especially those of us in universities — take a step back and ask ourselves: Are we really doing enough with this tech? Or are we just scratching the surface and calling it a breakthrough?

Lately, I’ve been seeing an avalanche of GenAI courses, workshops, and webinars popping up like mushrooms after rain. All well-intentioned, of course. But the content? Mostly the same: “How to use ChatGPT to create a worksheet.” “How to ask AI to generate quiz questions.” “How to prompt like a pro.” You know the drill.

Now, don’t get me wrong. There is value in these introductory sessions — especially for teachers in schools who are still new to the tech. I salute the primary and secondary school educators who’ve embraced GenAI and integrated it meaningfully into their classrooms. They’re doing amazing groundwork, often with fewer resources than we have.

But here’s where I start to twitch a little: when we, the folks in tertiary education — the ones with research grants, postgrad students, and entire labs at our disposal — end up doing the exact same thing. Again and again. And again.

I was at a faculty sharing session recently, where a colleague showcased a GenAI “project” — essentially a glorified prompt guide for lesson planning. It was packaged nicely, complete with slick slides and some Canva magic, but I couldn’t help but think: Is this really the best we can do?

We’re supposed to be leading the charge. Not parroting what’s already out there.

Tertiary education should be the space where we push boundaries, not just repurpose tools. Where we break stuff, try wild ideas, build prototypes, write (and debug!) code, experiment with open-source models, develop our own AI tools for education — not just rely on commercial APIs with new labels.

Let’s be honest: ChatGPT is great, but it’s not the innovation. The real innovation comes from how we apply it, adapt it, and build upon it. The real work lies in taking what’s possible and turning it into something purposeful.

I’m not saying everyone needs to be a Python wizard or LLM fine-tuning expert overnight. But if we’re going to stake our claim in the AI-in-education space, we’ve got to aim higher. Otherwise, we risk turning our universities into training centers for skills that are already being taught — and taught well — in schools.

We need to stop being excited just because something looks futuristic. Flashy doesn’t mean forward-thinking. A new font and some AI jargon slapped onto a slide deck isn’t innovation. It’s just marketing.

So here’s a gentle nudge, from one academic to another:

Go deeper. Build. Experiment. Get your hands dirty. Collaborate with people from computing, data science, education tech startups. Take risks. You might fail — and that’s okay. That’s the point.

As for me? I’m trying to practice what I preach. I’m currently in the early stages of building an AI-powered platform for education — something I hope will actually do something new. Not just wrap ChatGPT in a different skin. I’ll be documenting the whole journey here in this blog — the good, the bad, the buggy.

Let’s not just teach about GenAI. Let’s create with it.

The future of education isn’t going to build itself. We’ve got work to do.

Read More

React Native Tutorial - Custom Javascript Splash Screen

 Hi all!

In this tutorial, I'll guide you to build a custom splash screen for a bare react native app. There are many tutorials on how to do this for React Native out there, for sure. But a lot of them rely on native codes and as a result, as a developer, we lost a bit of control over the screen that greets our users, every time they open our app.

I have had horrible experiences using some of those methods, resulting in low-quality splash screens! So I dug around and found a tutorial that suits my need. The original article can be found here on dev.to site, written by Mateo Hrastnik. 

In my version, I tweaked it to accommodate my preferred setup. In the original article, Mateo used a static image and animated its opacity using the Animated hook from React Native. In my version, you will find that I am more ambitious, wanting a more complicated animation on my splash screen. Here's the result:

Image 1: React Native Custom Splash Screen

As you can see, the logo animation that I used is more than just fade in effect. To create the animated logo, developers usually resort to two options namely animated GIF, and Lottie. But after perusing the net for few days, I found myself staring at an amazingly new tool called RIVE.

Image 2: Rive Homepage

What Rive does is to simplify the process flow of creating animated assets. If you go by the Lottie route, you'd have to use Adobe After Effects to animated the layers, and export it to .json format. For RIVE, you design, animate and export the assets using just one tool. It's pretty convenient I suppose. I'm still fairly new to this, so my animation is very basic, as you can see.

Image 3: Rive App Interface

They have what they call "State Machine" that can be made to control the animation. The animation will then change according to live data fed to it. If you are interest to use Rive in your app, I'd suggest you watch tutorials on their YouTube channel. They have a good amount of tutorials that you can watch to get you started. They even have webinars showing how to use Rive with React Native!

To integrate Rive with React Native, read this documentation.

So, coming back to the matter at hand, we are building a custom splash screen so that we have more control over the component, animation etc.

The idea is to change the implementation of splash screen from native to Javascript. The way we do this is with:

1. Manually set a blank, single-color splash screen background on the native side;
2. On iOS, set the background color of the React Native root view to that same color;
3. As soon as React Native loads, add a View with the same color in React Native and fade in the app logo on it; and
4. Once the app loads, fade out the splash screen.

1.0 - Initial Preparation

1. Install and configure your React Native app. I'm using the bare React Native installation using npx react-native init <projectName> command on my terminal. Check out the official guide to setup proper development environment for React Native here.
2. Run npx react-native start. This will start the development server.
3. Run npx react-native run-ios and npx react-native run-android to boot up iOS simulator and Android emulator.
4. Choose a background color that suits the theme of your app. You can start with a hex color, and get its RGB value range. Use this tool to convert hex value to its equivalent RGB range. I'm using these values:
• HEX: #ff0b00
• RBG: 1.00000, 0.04314, and 0.00000
5. Prepare your logo/ animated logo. You can go with a statc image .png here, or if it tickles your fancy, go on and explore the Rive tool and export the asset. Follow this tutorial to configure where to put the asset in your iOS and Android project folder.

2.0 - Setting a Blank Background on iOS

Open AppDelegate.m, search for the line that sets rootView.backgroundColor and change:

Do not forget to change the value of UIColor to your own preferred color.

The step above only change the color of your React Native root view. We still need to change the background color of the whole app. Find the LaunchScreen.storyboard file, and change its structure to this:

Remember to change the backgroundColor values accordingly.

3.0 - Setting a Blank Background on Android

On Android, all you have to do is to add the following line inside the <style> tag, under <resources>, like so:

Dont forget to change the HEX value.

4.0 - The Javascript Part

Now we build the Splash.js component. The flow will be like this:

1. At first, it shows only a blank View with the background color we picked. This is visible until the splash screen logo is loaded into memory;
2. The logo appears;
3. We wait in this state until the app is initialized and ready to run (this will be mocked by an initialize() function);
4. The whole splash screen fades out, revealing the app's first screen;
5. Finally, the splash screen assets are cleaned up;

Lastly, we need to actually use this component in our app. My app entry point looks like this, and you'll probably have something similar. The idea is to wrap your app entry point in the WithSplashScreen component and once the app is initialized, set the isAppReady prop to true.

If all goes well, you'll have something similar to this:

Conclusion

Instead of adding complex native dependencies that are hard to control, it's easy to add a splash screen to your app with just a couple of changes on the native side. As a benefit, you get extra control over how the splash screen looks and behaves.Thanks for giving this article a read! If you've found it useful, consider sharing.

Read More

Getting the SHA1 from your React Native Android App

Instruction

•  In your terminal, enter the command cd android && ./gradlew signingReport 
• The result will display the debug and release version SHA1. Choose the corresponding version appropriately.
• Then you can go to Google Developer Console and generate the OAuth Client ID for Android.
• Copy the ID generated and save it in a .env file at the root of your React Native app.

Reference:

• Stackoverflow discussion: https://stackoverflow.com/questions/54417232/react-native-google-signin-gives-developer-error 

Read More

Adding Custom Font in Your React Native App!

 Note: This post corresponds to React Native 0.69+.

1. Get the fonts that you want to use in your app. You can search and download the fonts from Google Fonts as it has a huge collection of free fonts.
2. After downloading the fonts, make sure that you've placed the fonts in a 'fonts' folder under the 'assets' directory at the root of your application.
• PROJECT-DIRECTORY/assets/fonts

Adding Configuration File

1. Create a new file at the root of your project entitled react-native.config.js.
2. Insert these lines into the file:
   

Linking Configuration File

1. As of React Native 0.69+, you just have to run this command below to link the configuration file to both iOS and Android project files:
   
   
   
2. That's about it! Now you can use fontFamily:'Nunito-Bold' in your code.
   
3. If in case the font is not loading in the app simulator, just restart the simulator with either npx react-native run-ios for iOS simulator, or npx react-native run-android for Android simulator. The project will be rebuilt with the recent changes/link you've added to the project.

Read More

Starting a New React Native Project (Without Expo)

This guide is for the Macos development environment for React Native iOS app development, for other development environments, please refer to the official React Native documentation for further instruction.

Installing Dependencies

1. Have your machine ready for development by installing these dependencies, if they are not presently available on your machine:
   
   
   
2. Make sure you have also installed XCode and configured the XCode command line tool properly.
3. Install Simulator by going to XCode > Preference > and go to Components tab, and select the simulator you wish to use with the corresponding iOS version.
4. Install Cocoapods
   
   
   
• Note for Mac M1 users

  Mac M1 architecture is not directly compatible with Cocoapods. If you encounter issues when installing pods, you can solve it by running:

  
  

  sudo arch -x86_64 gem install ffi

  arch -x86_64 pod install

  These commands install the ffi package, to load dynamically-linked libraries and let you run the pod install properly, and runs pod install with the proper architecture.

Starting A New Project

1. To start a new React Native project, without the Expo dependencies, just run:
   
   
   
2. This will create a new folder that contains your new React Native files.
3. cd into your project folder.
4. Start the development environment with this command:
   
   
   
5. The development environment will start
   
   
   
6. To kickstart the iOS Simulator, run this command:
   
   
   
7. That should boot up the simulator and load your React Native boilerplate app.
8. You can now start coding your app.

Read More

Javascript Lessons: Let & Const

• In ES6, the old way of declaring a variable (by using the keyword `var`) has been replaced by two new keywords i.e. `let` and `const`.
• `let` is used when you want to declare a variable that may have variable values.
• `const` is used when you want to declare a variable that will have a constant value that never changes.
• `var` can still be used, but the use of `let` and `const` is highly encouraged.

Read More

Hello 2022, and hello Blogger (again)

This is the first post on this blog. Hoping that it'll not be the last, since I've tried to resurrect a lot of personal blogs previously, but in vain have I struggled. I've blogged on this medium before, in fact, my first blog was on Blogger.com. I can vaguely remember how it looks. But it definitely has a lot of information as I poured myself into the blog. The things I like, movies I've watched. A lot.

A lot has been going on lately. I started a company with my friends in Cyberjaya. Now being a local in Cyberjaya. Never thought that I would one day be living on this threshold. This was the place where all the techie stuff is in, the Multimedia Super Corridor (MSC) - still can't really understand why it is a corridor... Nevertheless, I've dragged my whole family here. A change of scenery. A change of zone. Definitely out of our comfort zone. Not sure whether I can refer to my previous zone as comfort, as it wasn't really as comfortable as I wished it would be. Nevertheless, we're moving towards a different path than previously thought/planned.

It's daunting. I can't lie to you. I'll soon be entering my 40s, and having a career change is really something that you won't hear a lot these days. But I don't want to be a sitting duck. Felt underutilized. I've gone through heaps and bounds to build something that I truly believe in, but for some reason, my enthusiasm wasn't really shared, understood and appreciated by others. They simply didn't trust me. So why wait. Why should I sacrifice my time, energy, money, etc, for those who didn't believe in me?

"We want to do things that we are sure we can do".

That was the sentence that ended it all. Felt betrayed. Felt as if all the things that I have done, were worthless. No value whatsoever. They were not sure that what I have worked on for more than 2 years, will bear fruit. Apparently, they wanted to target the 'low-hanging' fruits. Lest they forget, a tree needed to be nurtured carefully and attentively, for it to bear fruit, regardless of a low or a high -hanging one. But it is what it is. Quick win. Quick cash. Such a mantra. 

So I decided to resign from the post. Quit the rat race. It was painful. But it had to be done. 

I think I've kept these things far too long inside of me, and I need to vent everything out before it consumes me. Hence this blog. 

Expect more rants, raves, thoughts, opinions, soliloquy, stream of consciousness, and other stuffs here. 

BRB.

Read More