DEV Community: ibrahim

First step and at which stage you should ship your product.

ibrahim — Tue, 22 Jun 2021 16:12:04 +0000

I took the first step and now I have my own website. I bought a domain under my name. Thats all it took for me to build my own website in a day.

Advertisment: My cool website - ahmadibrahim.io

Ship First

Don't wait for your product to be perfect to ship it. It will never happen. Instead what you should do is ship the product first (even the MVP). Roll it out to your user, let them decide what they want and what they need. If your product solves a problem or help them in any way, they will help you to make it perfect. When the product reach actual user you will be more encouraged to work and improve the product.

Process

Trust the process. It take times for a product to be solid, remember not to look at the $$$. Instead focus on user, collect their feedback and what they need. If you help them they will help you. It's a win win situation. Remember how facebook looked when it's first launched.

Scaling

Don't scale your product too early without any demand. Spending too much time thinking of a feature without knowing whether the user want it or not is a waste of time, energy and arguments. Instead focus on making the existing product better. (fix bugs, improve performance, enhance ui/ux etc)

Ship Small, Ship fast

Yes the first launch is important. But it is just a beginning, what is more important is the things to come after that. Remember to keep shipping and improving your product fast by keeping it small. It's not encouraged to ship things in a big chunk. This will consume a lot of time to test and to ship the product to the end users. By the time it reach the user, it might not be what they want anymore.

Customer Support

This is very important. Always take customer complain/feedback seriously and entertain them in a best way possible. Help them to solve their issue in the fastest time possible. Make sure to not leave them hanging. Losing one customer is like losing more than ten people because of word of mouth. But winning one customer will help you gain more customers in the future and keep your product rating very high.

That's all from me. Peace.

ahmadibrahim.io

Why I think everyone are actually self taught engineers.

ibrahim — Sun, 17 May 2020 14:31:00 +0000

I have been working for 3 years now as a professional software engineer. From my experience working many wonderful engineers, I think everyone is self taught. Doesn't matter you have a CS degree or not.

Most of my colleague are CS degree holder, all of them told me that CS degree is not really helping them. They told me that the university(in my country) doesn't really prepare them for the real world challenges. Which made them a bit hard to secure their first job. Most of the tools and method they use for their work(coding) are learned by them self. Most of them get their way up to higher position by learning new skills by them self.

I am also telling this, because I have a colleague who are self taught. And from my experience working with them, some of them are better than those who have a CS degree.

I am not discouraging anyone from taking a degree. Go take your degree it can be helpful, and maybe you can find a good network. But my question here is, Do we really need to spend more than 3 years to learn those stuff? What do you guys think?

Creating a custom calendar in React from scratch

ibrahim — Mon, 04 May 2020 13:48:21 +0000

Usually as developer we don't reinvent the wheel. Most of the time we just end up using a 3rd party library for calendar. But for some cases the 3rd party calendar won't suit our design and functionality. So, when there is no choice, we need to come up with our own calendar.

Let's start, below are the packages we are going to use

dates-generator - https://www.npmjs.com/package/dates-generator
styled-components - https://styled-components.com/

I am not going to explain the above library in detail, please refer to the link if you are not familiar with the library above.

Setup your React project by running the command below

npx create-react-app custom-calendar && cd custom-calendar
npm install dates-generator --save
npm install styled-components --save

styled-components is used to apply the css styling to the components and I find it easier to write the css styling using styled-components

Now let's edit the /src/App.js

import React, { useState, useEffect } from 'react';
import styled from 'styled-components'

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

const Container = styled.div`
  width: 300px;
  border: 1px solid black;
  margin: 0 auto;
  box-shadow: 10px 10px 0px black;
`

const MonthText = styled.div`
  font-size: 26px;
  font-weight: bold;
  text-align: center;
`

const App = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [dates, setDates] = useState([]);
  const [calendar, setCalendar] = useState({
    month: selectedDay.getMonth(),
    year: selectedDay.getFullYear(),
  });


  useEffect(() => {}, [])

  return (
    <div style={{ width: '100%', paddingTop: 50 }}>
      <Container>
        <MonthText>
          {months[calendar.month]}
        </MonthText>
      </Container>
    </div>
  );
}

export default App;

If you run this, you will see the current month being rendered in your browser.

selectedDate is the date that we selected in the calendar. By default the date is present date.

dates is the state that will hold all the dates for the given month.

calendar is the state that will hold the month and year for the calendar.

Now lets fill up the calendar with the dates, by default the calendar will be the present month calendar.

...

const [calendar, setCalendar] = useState({
    month: selectedDay.getMonth(),
    year: selectedDay.getFullYear(),
});

useEffect(() => {
  const body = {
    month: calendar.month,
    year: calendar.year
  };
  const { dates, nextMonth, nextYear, previousMonth, previousYear } = datesGenerator(body);

  setDates([ ...dates ]);
  setCalendar({
    ...calendar,
    nextMonth,
    nextYear,
    previousMonth,
    previousYear
  });
}, [])

...

As you can see that, we have added useEffect inside our component. Inside the useEffect we run the datesGenerator function that is provided by dates-generator.

This function will return the all the dates that is available for the given month. We provided the month and year by passing the body inside the datesGenerator function. We can use the previousMonth/nextMonth and previousYear/nextYear attributes to get the previous/next month calendar dates.

Read more on how dates-generator work here

Since now we already store the all the dates in the state, let's display it at our browser.

const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

...

return (
  <div style={{ width: '100%', paddingTop: 50 }}>
    <Container>
      <MonthText>
        {months[calendar.month]}
      </MonthText>
      <div>

        <div>
          <table style={{ width: '100%' }}>
            <tbody>
              <tr>
                {days.map((day) => (
                  <td key={day} style={{ padding: '5px 0' }}>
                    <div style={{ textAlign: 'center', padding: '5px 0' }}>
                      {day}
                    </div>
                   </td>
                 ))}
              </tr>

              {dates.length > 0 && dates.map((week) => (
                <tr key={JSON.stringify(week[0])}>
                  {week.map((each) => (
                    <td key={JSON.stringify(each)} style={{ padding: '5px 0' }}>
                      <div style={{ textAlign: 'center', padding: '5px 0' }}>
                        {each.date}
                      </div>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

      </div>
    </Container>
  </div>
);

...

I have add the days variable to be rendered on top of the dates. If you look at your browser now, you will see the calendar for the present month.

Now let's write 3 more function:

onClickNext - to go to next month calendar
onClickPrevious - to go to previous month calendar
onSelectDate - to set the selected date by the user

  const onClickNext = () => {
    const body = { month: calendar.nextMonth, year: calendar.nextYear };
    const { dates, nextMonth, nextYear, previousMonth, previousYear } = datesGenerator(body);

    setDates([ ...dates ]);
    setCalendar({
      ...calendar,
      month: calendar.nextMonth,
      year: calendar.nextYear,
      nextMonth,
      nextYear,
      previousMonth,
      previousYear
    });
  }

  const onClickPrevious = () => {
    const body = { month: calendar.previousMonth, year: calendar.previousYear };
    const { dates, nextMonth, nextYear, previousMonth, previousYear } = datesGenerator(body);

    setDates([ ...dates ]);
    setCalendar({
      ...calendar,
      month: calendar.previousMonth,
      year: calendar.previousYear,
      nextMonth,
      nextYear,
      previousMonth,
      previousYear
    });
  }

  const onSelectDate = (date) => {
    setSelectedDate(new Date(date.year, date.month, date.date))
  }

...
return (
  ...
    <div style={{ padding: 10 }}>
      <div onClick={onClickPrevious} style={{ float: 'left', width: '50%' }}>
        Previous
      </div>
      <div onClick={onClickNext} style={{ float: 'left', width: '50%', textAlign: 'right' }}>
        Next
      </div>
    </div>
    <MonthText>
      {months[calendar.month]}
    </MonthText>

    ...    
      <div onClick={() => onSelectDate(each.jsDate)} style={{ textAlign: 'center', padding: '5px 0' }}>
        {each.date}
      </div>
    ...

    <div style={{ padding: 10 }}>
      Selected Date: {selectedDate.toDateString()}
    </div>
  </Container>
  ...
)
...

Now the date that you click will be shown at the bottom of calendar. if you look at your browser you will see this calendar:

That's it, Now you have the basic calendar, You can customise it as you like. That's all from me.

Can get the full code for /App.js at this gist here

Feedback appreciated.

Cover Image credit to @esteejanssens

I just published my first npm package. It's a dates-generator for javascript.

ibrahim — Sat, 02 May 2020 07:10:56 +0000

I have recently encountered a problem when developing my app using React Native. My team UI/UX designer come up with totally customise-able calendar UI. I have been looking through few calendar and date picker library and end up it is not what I exactly wanted to develop the calendar.

So I decided to develop a custom calendar by my self. This calendar is more customisable than ever. By creating this custom function to generate the calendar, I was able to achieve everything that my designer wanted. From the UI to logic. Everything is customised and you can achieve anything when you are in full control.

Here is the customised UI I develop

If any of you are interested in making a custom calendar or date picker. You guys may try this out.

I have published the NPM package here https://www.npmjs.com/package/dates-generator

Why I choose ReactJs and React Native(For hybrid app development).

ibrahim — Fri, 01 May 2020 14:41:52 +0000

I am going to share with you guys, what made me choose ReactJs for web development and React Native for hybrid mobile app development.

Simple, I choose to focus on this framework is because of the current market demand. At the time I am writing this article, ReactJs and React Native developer are in demand in the current market at my country(Malaysia) and also at most of the country out there.

It's so easy for me to find a job here when I am a React Developer. While I am focusing on React at the moment, I am also always keeping an eye on VueJs, Svelte and Flutter.

When I have my free time I will go and look at this amazing framework. And try to understand, how it is different compare to React. So that when the time come, I can be prepare to switch my stack so that I won't be out of job and make sure that my pay are good.

We as a developer must always be up to date with the current technology and trends. We must be ready for change anytime. Because we don't know when the tool we are using going to expired. Tech industry grow way fast compare to other industry in this world.

I am not telling you that React or React Native will be gone or not used in the future, We just need to make sure that we are always aware about the latest technology that is being used so that in the coming future we won't be left behind.

What do you think?

Software Engineering Job with $10

ibrahim — Mon, 05 Aug 2019 16:17:22 +0000

Original post is here, appreciate it if you give a like.

Hey guys, I am going to share my story on how I became a software engineer by just spending $10 USD (NO college degree). 2 years ago I was still in a college doing diploma in electrical and electronics engineering, on my 5th semester I was introduced with one programming subject which changed my life. This is the class where I learn how to code and also where I learn my first programming language (my first programming language was C). I was so passionated about programming since I went to that class.

After my 5th semester, there was no more programming classes for my course. I was so disappointed about it. So when I was on my semester break, I had a lot free time, on that free time I started looking for programming course online. This is where I came through few websites that offer a programming course. Udemy was one of the website, I was so attracted with the course that was offered in Udemy. Without thinking much, I asked my father for his credit card and purchase one of the programming course which just costed $10 USD. It took me around 1 month to finish the course. When I finished my diploma I started looking for a job as a web developer and I manage to secure a job which played a big role in my software engineering career. After I secured a good job I decided not to pursue a bachelor degree anymore. Now I have been a professional software engineer for almost 2 years working with great companies and the most important thing is I am doing the job that I like the most.

Do checkout my GitHub and my LinkedIn.

Cover Image Photo by Émile Perron on Unsplash