DEV Community: Hazmi Irfan

My thoughts on AI from startup perspective

Hazmi Irfan — Tue, 24 Sep 2024 08:04:50 +0000

I have always wanted to create a startup, but I often feel like I'm a bit late to the party. I was born in the 90s, which means I missed out on the early days of the web, Web 2.0 (social networks), and mobile apps. By the time I was old enough and knew how to code, all the good ideas seemed to be taken. Social networks? Done. To-do lists? Done. Finance apps? Done.

I don't consider blockchain to be Web 3.0, but that's a whole different topic. Anyway, that's why I was so excited when generative AI came into play. It feels like everything is possible again.

Now, I spend a lot of my free time building something with generative AI. But after a few attempts, I’ve started to notice a pattern around generative AI that can be discouraging for entrepreneurs like me.

AI Wrapper
Let's get the obvious one out of the way. While building my startup, one thing that comes to mind is, if I can do it in ChatGPT, why would I use another app? I quickly realized that whatever startup you build needs to offer more than what ChatGPT can. It doesn't help that OpenAI wants ChatGPT to be its own product. What I’m trying to say is that, as a developer, I don't feel like I’m their top priority—they want ChatGPT to be the default app. For example, I previously built an app that allows users to practice their interviews with AI. Sure, ChatGPT can do that too, but my app offers much more. It not only helps users practice but also provides ratings and feedback, and users can do this multiple times without needing to prompt it like you would in ChatGPT.

Generative AI is Easy. Too Easy.

What I mean by "easy" is that someone with coding experience can quickly build something similar to what I want to create. All it takes is a good prompt, and boom—you’re done. Going back to the interview practice app I built, I was one of the first to use generative AI in that space. But now, every month, a new web app pops up offering the same thing. They’re spreading like mushrooms.

Generative AI Will Not Give You a Competitive Edge

This ties back to the idea that generative AI is too easy to replicate. If your startup relies solely on generative AI for a competitive advantage, it’s not going to work. Established companies can easily copy your idea.

You’re Competing with OpenAI

It also doesn’t help that OpenAI is focused on pushing ChatGPT as its own product. As a developer, I don’t feel like I’m their top priority—they want ChatGPT to become the default app. Whatever OpenAI builds will obviously be more advanced than anything you’re working on, making it tough to compete.

So, what can you do?

Honestly, I’m not entirely sure. One thing I believe is that we need to go back to the basics. What makes a startup successful? It’s not AI—it’s solving a problem that users genuinely care about.

So, what am I building right now?

As I mentioned earlier, I previously worked on an interview practice app, Kasper. However, I’ve recently shifted my focus to a new app, Tied, a calorie tracking app. Whether I can make something substantial in the generative AI space remains to be seen, but I don’t regret trying.

Are you happy with the time for your code to be reviewed?

Hazmi Irfan — Fri, 14 Apr 2023 23:03:51 +0000

This is actually more of a discussion rather than a blog. As a developer I always feel like the review process is slow. Often time it takes days or even weeks to get it reviewed and approved.

Other than a review reminder is there any other way to improve it?

I'm interested to know what you guys do to speed up the review process.

Instantly run pull request code on your phone.

Hazmi Irfan — Mon, 15 Nov 2021 10:10:30 +0000

Recently I had a problem of trying to show the UI that I have done to my designer. The code need to be merge first an then release to test flight before he got a chance to look at it. If there is any changes, we basically need to go through the flow again which for me is time consuming.

There has to be a better way and this reminds me of a tool I read on HN but I haven't been able to find the post.

Basically, one of the staff of a company made an internal tool that would bundle up your RN code when you made a pull request. If you want to run the code, all you need to do is scan the QR code on the PR.

This makes it faster for you to try and test the code. It would also make it faster for you to take design feedback from the designer. Instead of waiting for it to be release on test flight and play store, they can just scan a QR code and try it instantly.

One caveat of this method is that it only works on PR that does not require a new native code but I think at some point most app would be mature enough that it won't need to add native code all the time.

Shopify have something called Tophatting . I'm not sure if this is the post that i saw on HN previously. Unfortunately I don't think they open source it.

Another one that I can find is Appr . Unfortunately it does not work on iOS and even if it does work, it only works on Expo based project.

I wonder if there is any tool out there that does something similar? Let me know in the comment if you know!

Should you include your photo on your resume?

Hazmi Irfan — Tue, 16 Mar 2021 07:52:23 +0000

One of the feature of my website https://www.logname.dev that I am building right now is that a user will have the ability to generate resume from multiple ready made template.

This means I need to build the resume template myself and now comes the question, should you include your photo in your resume?

Personally I have never include my photo on my resume and a quick google would also suggest the same thing.

Now, having being the interviewer myself and look at multiple resumes, I think the answer should be "it depends".

Just to be clear, when a resume contain a photo, I don't discriminate(although some people do) but as a human I do judge.

A resume with a good photo definitely is better than a resume without it.

BUT, a bad photo is worse than a resume without a photo.

So what is a bad photo? Well, the one that I keep seeing is a generic passport photo and in my opinion should be omitted.

Although I don't use the photo to determine whether to hire a person or not, but I do think first impression goes a long way and you should reserve that until the interview itself.

That is unless you are very good with camera!

Deleted my live production database - Lesson learned

Hazmi Irfan — Sun, 07 Mar 2021 17:40:24 +0000

You can read more on how I accidentally deleted my live production database for my website https://www.logname.dev here.

The TLDR version is

I wanted to know how many user registered.
I don't have admin page so I want to access the database directly
Instead of connecting to the database I run the delete command.

Anyway, I decided to compile a list of things that I learn from every comment that I receive. Hopefully you won't repeat the same mistake that I did.

1. You should never connect to a live production database.

I guess this one is pretty obvious and yet this is the main mistake I did. I only want to know how many people registered and I didn't have an admin page back then.

Instead of creating a simple admin page which only took less than 20 minutes, I instead tried to connect to the live production database and run a query there.

2. Backup backup backup.

Too be fair to myself, the website had only run for just a day so even if I add an automated backup it might not yet run at that time.

Still, I only need to click 1 button in the Heroku website to manually back it up and I didn't.

3. Adding a space before your command will not save it in history.

As far as I know it works in Linux system. If you run a dangerous command, you can start with a space first. This will make sure your command will not be saved in history and you might not accidentally run it again like I did!

4. Avoid using confirm flag for dangerous command.

When I deleted my database on purpose the first time, Heroku actually trigger a prompt for confirmation. I can either reply yes or I need to stop the script and run it again with --confirm flag. I did the latter. If I deleted it with the first option, when I accidentally run the command again, Heroku will prompt the confirmation flow again, this will give me time to stop the script. Alas, I choose the 2nd flow and the rest is history(literally).

When I look back, I realize that it wasn't just 1 big mistake but a couple of small mistake that adds up. I may have made some of this mistake in the past but never all of it in the same time.

Example, I knew it's a mistake connecting to live production database but I did it on my previous project and it was fine back then.

I also knew you should never perform deletion of database on a command line but I did it before and I was still fine.

But combining these 2 mistake result in 1 of the biggest mistake I have made so far as a developer. One that I wish I won't repeat in the future.

I delete my live prod database and have no backup

Hazmi Irfan — Sat, 20 Feb 2021 17:10:47 +0000

Welp. That just happen. I just deleted my live production database and I don't have a backup.

Yesterday I completed my new website Logname and decided to tell everyone I can about the website(Reddit, Hackernews etc).

After a day has passed, I want to see how many people register. Me being lazy without admin interface I figured I can login to postgres and query it directly.

I hosted it on heroku so I can just use this command heroku pg:psql <database-name> --app <app-name>

I already run this on terminal so I quickly go to previous history and press enter when I see pg command.

I forgot that earlier I had run this command heroku pg:reset <database-name> --confirm <app-name>

So now my database has successfully reset and I have lost all of my user if any.

Honestly I am mad as hell right now and I feel ashamed to people who tried to use my website.

One of the reason I build this website is so that user can rely on this website to maintain their info for a long time because resume is not something u need often but urgent when needed.

To all who register to give the website a try, I'm really sorry but you need to register and insert the data again but rest assured that this won't happen again.

Implementing Magic-Link

Hazmi Irfan — Thu, 18 Feb 2021 05:20:55 +0000

I wrote a post previously on why I will use Magic Link for the authentication flow. You can read it more here.

The flow is simple, user submit their email and the server will sent a link. User need to click on the link in order to login.

Some of the requirement needed is

The link need to be expired after a certain amount of time.
The link can only be used by the device that requested it. Meaning that if I submit my email on my laptop, I cannot open the link on my phone. It has to be from the same browser.
The link can only be used once.

For Logname, the link is just https://www.logname.dev/magic_link/login?token=#{token}

The token is in JWT format and the payload contain a unique id of the user as well as a device id.

%{
 unique_id: unique_id,
 device_id: uuid_string 
}

Beside sending the link to the email provided, the server will also response to it with device_id to be stored inside the browser cookie.

This way, when the user click on the link on the same browser, it will send the payload as well as the device_id cookie, the server will check whether the device_id is the same and if it is, login the user.

That's it.

If you would like to try it out. You can register here and login here.

Why I'm using Magic Link for my website login flow.

Hazmi Irfan — Fri, 05 Feb 2021 02:33:39 +0000

Magic Link is a new upcoming authentication flow that allows user to login using only their email. It is kinda like Facebook login but with email instead.

You might have seen it when using Slack.

The flow is that you submit your email to the website and it will send a link to your email. Click on it and you are logged in. Just like magic!

I recently started a new project https://www.logname.dev and needed to decide on how I am going to let user register and login.

The easiest way is the normal email and password flow but as a user I hate remembering password for each website I visit.

Another way is using social login and that is by far the easiest method for the user because it only require 1 click.

However, after the recent fiasco from Facebook, as a user I am no longer comfortable on using social login anymore. Who knows what data they can get from it.

So to get the best of both world, I decide to use Magic Link. It is a lot easier than email/password flow and you don't rely on 3rd party service to do it. You also have the added benefit of verifying the user email as they need to use it to login.

The downside that I can see is that if your email fall under spam, your user might not be aware of it and may think that your login is broken.

In the next post I'm going to explain more technically on how to implement Magic Link.

Stay Tuned!

Project #1, 2021 - Logname, a portfolio/resume website for developer.

Hazmi Irfan — Thu, 04 Feb 2021 02:58:14 +0000

Hi everyone,

My name is Hazmi and I love to build website on my free time. Although on my previous project I solely focus on building it, this year I want to try something different which is to try and blog as much as I can while building it.

So, introducing my first project for this year Logname - https://www.logname.dev - A portfolio/resume website for developers.

Why am I building this?

1. There is not one website for me to represent my professional developer presence.

As a developer, I always think that you need to have an online presence in order to stand out for better job opportunity.

Having LinkedIn account is not enough and that is why I also post technical blog here on Dev.to.

I also have active GitHub account where I pinned the project that best represent my skill set.

So as you can see my past experience(LinkedIn), blog posts(Dev) and active projects(GitHub) are all on a separate website.

If I want to apply for a job I have to provide 3 links. I also need to make sure all 3 are updated accordingly for example if I want to change my profile picture.

Hopefully if Logname takes off in the future, I only need to provide 1 url instead of 3.

2. I hate LinkedIn walled garden.

I have to admit I open LinkedIn on a daily basis and it is a great website to build networks.

But I hate that I cannot easily access my own data using API. I get it if they don't want 3rd party application to abuse the API but at the very least I should be able to get my own data to do what I want.

I got an idea last time to export my LinkedIn data to reusable format so I can create my own resume but unfortunately that is not allowed.

With Logname, you can export it into JSON Resume format so that you are free to do whatever you want with it.

It is your data after all!.

3. I am bad at designing resume.

If I were good at designing I probably will not become a developer in the first place. I know there is a lot of website that can help me build beautiful resume but resume is not a one size fit all solution.

A resume for developer is different than a resume for a civil engineer. I still need to do some manual work and if I want to use another resume generator? I need to do the manual work again.

With Logname, you can export it into JSON Resume format and access over 250+ themed resume.

4. Keeping my resume up to date.

Although most of my info are the same provided I am in the same company, some do change for example my list of projects in the resume. Project in my resume always correspond to my GitHub pinned repository to provide consistency and if that change, I also need to update my resume.

With Logname, because you can connect your GitHub and Dev account, your resume and portfolio will always be up to date.

So with all the reason above, I decide to built Logname.

Do check it out and register if you are interested!.

In the next post I will be explaining why I'm going to be using Magic Link for registration and login and how I will be implementing it technically.

Stay Tuned!

Any application that can be written in Javascript, will eventually be written in Javascript

Hazmi Irfan — Thu, 03 Dec 2020 08:09:41 +0000

I was re-reading an old blog The Principle of Least Power.

It became famous for its accurate statement that Any application that can be written in Javascript, will eventually be written in Javascript

Although that alone was funny on how true it is, one comment caught my attention

This was commented on 2007, 5 years before Microsoft launch Typescript that have become the De facto language for Javascript programmer.

The funny thing is, instead of being forced to used it, developer want to use it.

Why use Atom?

Hazmi Irfan — Fri, 27 Nov 2020 07:13:14 +0000

Atom is describe as Constants whose values are their own name.

One of the use of Atom is that it allows you to pattern match.
For example you can pattern match the result:

case result do 
  {:ok, user} -> 
    #handle success
  {:error, changeset} -> 
    #handle error
end

The code below is okay but when I first tried it, it looks no different to a constant string.

For example, we can change the code to look like this

case result do 
  {"ok", user} -> 
    #handle success
  {"error", changeset} -> 
    #handle error
end

Instead of pattern matching an Atom, we pattern match a String instead.

The downside of this is that if we want to change ok to okay in the future, we need to change it everywhere. However, this is the same problem if we were to use an Atom.

So why should we use an Atom? Well, after some digging, I found out that Atom value are mapped at runtime. Basically Atom is a global value.

Why is this important? Lets take a look a the previous code

case result do 
  {"ok", user} -> 
    #handle success
  {"error", changeset} -> 
    #handle error
end

If you see the code above, if we were to pattern match using String, Elixir would need to compare the character 1 by 1. This can obviously become cumbersome.

If we were to use an Atom instead, Elixir can just compare the pointer/address . We don't have to compare the value 1 by 1 because by default an Atom value is the same. This makes pattern matching much faster.

Also, the syntax is much nicer :D

The loading anti-pattern.

Hazmi Irfan — Tue, 17 Nov 2020 07:07:34 +0000

The loading anti pattern is something that I have experience when I need to fetch a data and then display it.

Normally when you want to display a data from an API, there are 5 condition that you want to fulfill.

Show initial data. It could be a blank screen.
Show loading indicator.
Show the result.
Show different message if the result is empty.
Show an error if there is one.

So let's try to built this.

First the data structure. Most likely it would look like this

const data = {
  items: [],
  isLoading: false,
}

The items is a list I want to display and isLoading is a boolean so that I know whether it is loading or not.

So lets try to display either the loading or the list component first.

<List>
 {isLoading ? <Loading/> : <Items items={items} />}
</List>

So far so good. Now we need to differentiate between the result that have a list and a result that return an empty list. Normally I would do it like this.

<Items>
  {items.length > 0 ? items.map(item => <Item>{item.name}</Item>) : <Typography>List is empty</Typography}
<Items/>

Notice that I use items as an indicator on whether the result from an API is empty or not.

This can be a problem because it will show List is empty initially even when we haven't fetch the data yet.

One way to solve this is to just set isLoading to true on the initial data

const data = {
  items: [],
  isLoading: true,
}

Now let's try to handle a case where an API returns an error. First we need to add extra value to the data.

const data = {
  items: [],
  isLoading: true,
  isFailure: false,
}

Now I can use isFailure as an indicator to show the error message.

<Box>
 {!isFailure ? <List/> : <Error/>}
</Box>

Putting everything together, you have something that looks like this

const data = {
  items: [],
  isLoading: true,
  isFailure: false,
}

const Page = ({data}) => 
(
<Box>
 {!data.isFailure ? <List data={data} /> : <Error/>}
</Box>
)

const List = ({data}) => 
(
<Box>
 {data.isLoading ? <Loading/> : <Items items={data.items} />}
</Box>
)

const Items = ({items}) => 
(
<Box>
  {items.length > 0 ? items.map(item => <Item>{item.name}</Item>) : <Typography>List is empty</Typography}
<Box/>
)

So now that I handle all the condition. You might be wondering what is the problem?

Well, the problem is that I'm trying to describe the state of the data using 3 different value. items, isLoading and is isFailure and this makes your render logic more complex than it should be.

I have nested if to cater between different state of the data.

 !isFailure ? isLoading ? items.length > 0

There can also be an invalid state where both isLoading and isFailure can be true.

The problem lies with trying to use boolean to describe the state of the data. Boolean can only represent 2 state of the data but we know now that the data can have 4 state. Initial, loading, failure and success. This is why you end up with so many value.

So how do we fix this?

I was looking at a video about Elm and one of the talk is about this anti pattern and how to solve them. You can view it here.

Basically, what you should do is to have a single value to represent all the possible state of your data. He suggested the state to be notAsked, loading, failure and success.

So now you can describe your data like this

const notAsked = 'notAsked'
const loading = 'loading'
const failure = 'failure'
const success = 'success'

const data = {
  items: [],
  state: notAsked,
}

This pattern solve a couple of problems.

They can no longer be an invalid state.
There is a single value to represent the state.

This can make your render logic a lot more simple.

switch (data.state) {
 case notAsked:
  <Inital/>
  break
 case loading:
  <Loading/>
  break
 case success:
  <List/>
  break
 case failure:
  <Error/>
  break
}

If you don't want to watch a video, you can also read his post How Elm slays a UI antipattern.

Although it is geared towards Elm but I believe it can be implemented elsewhere.