Forem: Ahmed Nagi

Getting started with contributing to open source – Real world example

Ahmed Nagi — Thu, 21 Apr 2022 17:19:53 +0000

Hey awesome people,

This is your step-by-step detailed with images guide on getting started contributing to opensource using real world package on github.

How to find something to contribute on

Community make it super easy to get started with opensource you can even start by fix typos on Readme files in any repo.

When you're a complete beginner

Although I encourage you to get involved in opensource community as soon as possible, I recommend starting a project with your favorite tech stack or language.

Get better understanding of what is going on inside these projects first before contributing.

👉 Visit good first issue and pic your favorite language or framework.

👉 Click on the project you like.

👉 Open Issues tap on the project's github page.

👉 In the search field enter this phrase is:issue is:open #good label:"good first issue".

Continue reading ... 👇

Shallow Copy vs Deep Copy in Javascript

Ahmed Nagi — Thu, 21 Apr 2022 17:13:07 +0000

Copying objects in javasceript to manipulate is common best practice.

✅ When you copy javascript objects or arrays keep in mind that only the outer properties are actually copied while the nested properties inside them only get referenced.

javascript default copy mode is shallow copy, to save on memory. But in the same time introduce a weird behavior.

💥When you try to change a property of a shallow copied object the change will effect the original object, that causes nasty bugs that get you stuck on for hours.

Difference between Service and Service Provider

Ahmed Nagi — Tue, 19 Apr 2022 17:58:14 +0000

This an Interview Question

👷‍♀️ Service: A class that you pass data to and get something in return or ask to do some work.

⚡ Provider: A class used to bootstrap the service, i.e. prepare it, read some config or bind an implementation.

Code example 👇

90 Days are all you need to get a web developer job

Ahmed Nagi — Mon, 18 Apr 2022 17:52:54 +0000

🚶‍♂️🚶‍♀️ A step by step guide to escape tutorial hell

It's a summary of my journey in the frontend world from not knowing how to style a button to design full blowing enterprise apps.

✅ This guide is your step-by-step plan to getting real at learning web development and getting a real job in 3 months.

Roadmap

👇

Summary

Step 1: Do these things consistently

If you're serious let's start with the less relative things yet effective:

🛌 Sleep at least 7 hours a day and wake up early typically 6 AM everyday.
🥤 Drink a lot of water. Your brain is swimming in water and needs a lot of it to function properly.
🍎 Have natural sugars like fruits.
🤸‍♂️ Do some light exercises in the morning.
🔥 Most importantly you have to work at least 12 hours a day for 90 days and take Fridays off.

Step 2: Learn the absolute basics

Before diving into HTML/CSS/JS and such you should learn the absolute basics first:

Days 1 - 2 : Web Concepts

Tip: Don't just watch 45 mins videos, instead read some blog posts and grasp the general concepts.

🌐 What is web?
🖱️ What is a HTTP request?
✅ What is HTTP methods and headers?
✅ How the browser works?
🧱 What is HTML and how it works?

Days 3 - 5: HTML Basics

🧱 Learn HTML basics including. (what is the difference between form id and class).
🧱 Why some HTML elements doesn't have closing tag?
🌳 Basics of HTML DOM tree. (Important!)

Apply

🏗️ Build simple HTML page include all of what you have learned in it.

Days 6 - 10: CSS Basics

✅ Learn VS Code basics. A basic crash course will do.
✅ Learn about Chrome dev-tools.
🎨 What is CSS?
🎨 CSS basics.
🎨 What is CSS media query?
🎨 CSS selectors.
🎨 CSS basic best practices.

Meet Oilly your friendly telegram bot that will save your car

Ahmed Nagi — Thu, 07 Apr 2022 01:37:42 +0000

Hey dear fellow developers,

I have a problem remember changing my car oil, I almost every time drive 2000 km more or completely forget the fact that It's been a year since last change.

I needed it someone to remind me, someone who I can relay on...

Meet @OillyBot your friendly Telegram bot that will always notify you to change your oil on the right time!

See a gif demo 👉 https://imgur.com/a/rSNZohL

Built in 5 days using Nodejs as the backend, Firebase as the database, Vercel as the hosting and EasyCron as the cronjob server.

%100 free to maintain.

I teased it up and shared my development journey in 4 part series here on dev community and my website ahmednagi.com.

I would highly appreciate your feedback on it.

You can find it on telegram by username @OillyBot or by using this link t.me/OillyBot.

Cheers

Part 3: I'm building a telegram bot to remind me changing my car oil

Ahmed Nagi — Mon, 04 Apr 2022 12:55:56 +0000

Welcome to the part 3 of my journey to create a telegram bot that will remind me changing my car oil.

Checkout part 1 and part 2 for context.

Demo Preview

I got the bot to ask questions and record answers. Here's a demo 👇!

Full demo can be found on Imugr 👉 https://imgur.com/a/gPkI95A

Ask Questions and record answers

Oilly now can ask questions like, "what is your current mileage?", and make sure to correctly record the answers in the database.

Telegram persistance problem

Unfortunately telegram wont let you send any custom data with the message you have to debend on the text you send to record answers and here where I get stuck for 3 hours trying to find a way around.

Let me explain the problem in another way:

When Oilly asks the user What is the current mileage in (km) as shown in your car dashboard? and waits for an answer there's no way for me to know wither the following text will be answer for this question or not because telegram doesn't return the message id in this case the question id, nor let you send custom data with the message.

    bot.sendMessage(chat.id, "What is the current mileage in (km) as shown in your car dashboard?", {
        reply_markup: {
            // Options that doesn't contain custom data
        },
    });

Continue reading with images and visual aids on my blog Ahmednagi.com/oilly-telegram-bot-part-3

Part 2: I'm building a telegram bot to remind me changing my car oil

Ahmed Nagi — Sat, 02 Apr 2022 21:46:46 +0000

Part 2 of my journey to create a telegram bot that will remind changing my car oil for me.

Today was productive.

I were able to produce some basic output.
I figured out the stack I'm going to use.

I decided to use for the backend nodejs since it is the easiest to get started with.

For the database I decided to go with firebase for the generous free tire and realtimeness.

npm package: node-telegram-bot-api as the wrapper to work with the telegram bot api.

I wanted to use Vercel for development but it kinda sucks with debuging so I used ngrok to tunnel requests to my local node server.

Didn't want to use frameworks or complicated file structure I stucked with the simplest working structure 👇

Spent most of the day lurking around telegram bot API, understanding how to send simple messages and get responses.

https://core.telegram.org/bots/api/

Firebase will store the state like only display welcome message once to the users.

EasyCron will hit the server every 3 hours to calculate how needs to be reminded

https://easycron.com

I see piece falling into their place, It's been only a one day and I could tell that I finished 50%.

I'll keep posting about the details of this light piece of software.

Follow for more...

I'm building a telegram bot to remind me changing my car oil

Ahmed Nagi — Fri, 01 Apr 2022 22:36:15 +0000

I hate to remember changing my car oil.
Too many minor things to remember in life already!

So I decided to build a simple Telegram bot that remembers changing the oil for me.

I want to share my thought process before actually coding it.

I want this to be as simple as possible and free as possible, practically costing $0 to maintain.

Oilly will be his name, with a headline that says:

"Oilly will help you preserve your car engine by reminding you to change the oil, so you have one less thing to remember".

Oilly will interact with the user ask them:

Current mileage
Roughly estimate the last time the oil has been changed.
The mileage in the last time oil changed.
What is the type of the last changed oil 5k, 10k, 15k?
How frequent they change the oil 3 mo, 6 mo?
Have they changed the oil filter in the last oil change?

Bot will respond with "Thanks, based on the information you gave me I'll notify you!".

How to calculate the oil change (research)

Upper limit 10,000 KM or 6 months whichever comes first.

every 6 months
every 3 months
every 5000 km or 3 months (recommended)

User input example (my real usage):

current mileage: 25,258
last time changed oil: 2 months ago
mileage last before change: 21,201
Oil type: 5k
Change oil frequency: every 3 months
have you changed the oil filter: No

Simple Process: First state the facts

Calculate how long the user will take to reach 5k mileage:
Ideal mileage usage 5k in 3 months.
Current mileage - mileage last before change => 25,258 - 21,201 = 4,056 in 2 months.
Avg mileage per day => 4056 /60 = 67.6 KM
Mileages left in distance unit => 5000 - 4,056 = 944 KM
Mileage left in time unit => 1 months
Change Oil filter last time: NO, so this time change it.

My approach:

Easiest way to approach this is by sending notification after 1 month.
Or Mileage left (944) / avg usage (67.6) = 14 days.
Maybe sending the user notification after 14 days that says if you reach (25,258 + 944 = 26,202 KM) it's time to change.

If the user says no, fall back to 1 month change.

I'm trying to get some hold over this process, I would appreciate your take on this whole thing.

How to properly use abandoned libraries

Ahmed Nagi — Wed, 30 Mar 2022 10:20:31 +0000

In some situations I get stuck using old abandoned libraries from GitHub, many of which have multiple forks maintained by other developers who got stuck using them as well 😂

Before pulling the outdated source check this awesome free tool Active GitHub Forks

Never failed me to find an active repo that at least updated it's dependencies tree.

Recent Usage Example

You can find more tips and content like this on Twitter or visit my blog ahmednagi.com

The Extensive Guide to Create Beautiful Social Media Headers Using Tailwindcss

Ahmed Nagi — Mon, 28 Mar 2022 12:56:17 +0000

Hey everyone, let me show you how I created my Twitter headers using Tailwind CSS.

🔥 It took me 18 hours to write this detailed guide.

I would appreciate a like or RT if you find it insightful😁

Read the full blog on my website

📩 My DM is open for any suggestions or questions.
Twitter: nagiworks

I created twitter header using TailwindCSS

Ahmed Nagi — Sun, 27 Mar 2022 08:31:18 +0000

Checkout my new social media header made with TailwindCSS. Here is some facts 👇

Only used SVGs for the logos and the curly brace at the right.
No custom css or fancy javascript.
I had fun for 3 hours making it.
Code available on 👇

TwilwindCss Play

Wanna know how I have done it?
👉 Checkout The Extensive Guide to Create Beautiful Social Media Headers Using Tailwindcss