DEV Community: Ahmed Saber

Intern2Grow: Virtual Internships, Real Tasks

Ahmed Saber — Mon, 06 Nov 2023 20:36:51 +0000

Intern2Grow is a platform dedicated to providing virtual internships with real tasks. The aim is to offer valuable work experience to people looking to enhance their knowledge and skills. The organization believes in the value of hands-on learning, thus providing interns with tasks that mirror those they would encounter in a real-world job setting.

Features of Intern2Grow

Real Tasks: Intern2Grow differentiates itself by offering real tasks as part of their virtual internship programs. This means interns are tasked with contributing to actual projects, which provides a more practical and realistic experience compared to hypothetical or simulated tasks.
Free and Remote: The internships are free and can be done remotely. This opens up opportunities for a global audience, allowing anyone from around the world to participate and gain experience without any financial constraints.
Easy Application Process: The platform is designed with simplicity in mind. It requires no complex details for the application process, making it accessible and user-friendly.
Flexible Timing: Internships are available at any time. This allows for great flexibility, accommodating individuals with different schedules and time zones.
Certificate of Completion: Upon completion of all tasks, interns receive a certificate, which can be added to their resume or LinkedIn profile.

How to Get Started

The process to start a virtual internship on Intern2Grow is straightforward:

Visit the Programs Page to view all available internships.
Choose an internship program that aligns with your career goals.
Fill out and submit your details.
Upon acceptance, you will receive an email containing your tasks.
Complete all tasks and submit them.
After submission, wait for a second email with a link to your certificate.

Testimonials

Intern2Grow has received positive feedback from its users. One of the interns, Mustafa Eisa, a Frontend Developer, commented, "It was a unique experience, and what makes the training more effective is that the tasks depend on adding features to already developed projects. This improves the experience much better than developing from A:Z".

The Team Behind Intern2Grow

Intern2Grow was founded by Ahmed Saber, a T-shaped software developer specialized in frontend web development. His passion for teaching, mentoring, and content creation, coupled with his active engagement in open-source initiatives, led to the creation of this platform.

In conclusion, Intern2Grow is a promising platform for anyone looking to gain practical work experience through virtual internships. By focusing on real tasks and offering a flexible, accessible, and cost-free approach, it provides a valuable stepping stone for those early in their career journey.

If you are interested to know more about Intern2Grow, you can visit the website via the following link: https://intern2grow.vercel.app/

This article was mostly generated by Phind AI.

Web Storage (Cookies, localStorage, and sessionStorage)

Ahmed Saber — Thu, 06 Apr 2023 22:03:16 +0000

Web storage is a mechanism that allows web applications to store data on the client-side, thus enabling them to retain data even after the user closes the browser or navigates away from the website. There are three types of web storage available in modern web browsers: Cookies, localStorage, and sessionStorage. In this article, we will explore each of these storage mechanisms in detail.

Cookies

Cookies are small text files that are stored on the client-side by web browsers. They are commonly used to store user preferences, login credentials, and other data that needs to be persisted between browser sessions. Cookies can be set using the document.cookie property in JavaScript, and they have an expiration date that determines how long they will persist on the client-side.

Cookies have several advantages and disadvantages. On the one hand, they are widely supported by web browsers and can be used to store small amounts of data. On the other hand, they are vulnerable to security attacks, such as cross-site scripting (XSS) and cross-site request forgery (CSRF), and they have a limited storage capacity of 4KB.

localStorage

localStorage is a storage mechanism that allows web applications to store data on the client-side without an expiration date. Unlike cookies, localStorage is not sent to the server with every HTTP request, which makes it a more efficient and secure way to store data on the client-side. localStorage has a storage capacity of 5–10MB, depending on the web browser.

To use localStorage in JavaScript, you can use the localStorage object, which provides a simple key-value store interface. Here's an example of how to set and retrieve a value from localStorage:

localStorage.setItem('myKey', 'myValue');

const myValue = localStorage.getItem('myKey');

localStorage is a great option for storing user preferences, settings, and other data that needs to persist across browser sessions.

sessionStorage

sessionStorage is similar to localStorage, but it only persists data for the duration of the browser session. When the user closes the browser or navigates away from the website, the data stored in sessionStorage is deleted. sessionStorage has the same storage capacity as localStorage (5–10MB), and it is also accessed through the sessionStorage object in JavaScript.

Here's an example of how to use sessionStorage:

sessionStorage.setItem('myKey', 'myValue');

const myValue = sessionStorage.getItem('myKey');

sessionStorage is useful for storing data that needs to be available during a single browser session, such as shopping cart data or form inputs.

Conclusion

In this article, we have explored the three types of web storage available in modern web browsers: Cookies, localStorage, and sessionStorage. Cookies are widely supported but have security vulnerabilities and limited storage capacity. localStorage is a more efficient and secure way to store data on the client-side, and it is great for storing data that needs to persist across browser sessions. sessionStorage is useful for storing data that needs to be available during a single browser session. By understanding the differences between these storage mechanisms, web developers can choose the right storage mechanism for their web applications and improve the user experience.

You can find & contact me on LinkedIn, GitHub, and Facebook, and here is my portfolio for more details about me.

Most common HTML interview questions

Ahmed Saber — Mon, 27 Mar 2023 20:44:55 +0000

In this article, I will try to include some of the most common HTML interview questions with their answers.

1. What is HTML?

HTML stands for HyperText Markup Language.
It is a markup language used to create web pages and applications for the World Wide Web.

2. What is the difference between HTML and XHTML?

HTML and XHTML are both markup languages used to create web pages. However, XHTML is a stricter and more standardized version of HTML, and follows the rules of XML.
XHTML requires all tags to be closed and all attributes to be quoted, whereas HTML does not have these requirements.

3. What are the basic tags in HTML?

Basic HTML tags include <html>, <head>, <title>, <body>, <p>, <a>, <img>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <form>, <input>, <select>, <option>, <button>, and <div>.

4. What is the difference between a div and a span?

A <div> tag is a block-level element used to group other HTML elements together into a container.
A <span> tag is an inline element used to apply styles to specific portions of text.

5. What is the difference between an inline element and a block-level element?

Inline elements are elements that do not start on a new line, and only take up as much width as necessary.
Block-level elements are elements that start on a new line and take up the full width of their parent container.

6. What is the purpose of the alt attribute in an image tag?

The alt attribute provides alternative text for an image, which is displayed if the image cannot be loaded or if the user is using a screen reader.

7. What is the purpose of the title attribute in an anchor tag?

The title attribute provides additional information about the link, which is displayed as a tooltip when the user hovers over the link.

8. What is the purpose of the rel attribute in a link tag?

The rel attribute specifies the relationship between the linked document and the current document, and is used by search engines and other tools to understand the context of the link.

9. What is the difference between the HTML meta tag and the HTML link tag?

The <meta> tag is used to provide additional information about the web page, such as the author, description, and keywords.
The <link> tag is used to link to external resources, such as stylesheets or scripts.

10. What is the purpose of the HTML form tag?

The <form> tag is used to create a form on a web page, which allows users to submit data to a server.

11. What is the difference between a post and a get method in HTML forms?

The post method submits the form data to the server in the body of the HTTP request, while the get method submits the form data as URL parameters in the query string.

12. What is the purpose of the HTML table tag?

The <table> tag is used to create a table on a web page, which can be used to display data in an organized and structured manner.

13. How do you make a table responsive in HTML?

To make a table responsive in HTML, you can use CSS to set the table’s width to 100% and apply responsive design techniques, such as using media queries and adjusting the font size and layout for smaller screens.

14. What is the purpose of the HTML canvas tag?

The <canvas> tag is used to create graphics and animations on a web page using JavaScript.

15. What is the purpose of the HTML video tag?

The <video> tag is used to embed video content on a web page, and provides controls for playback and volume.

That’s all, now you have good knowledge about the most common HTML questions being asked in interviews.

You can find & contact me on LinkedIn, GitHub, and Facebook, and here is my portfolio for more details about me.

Deploy React.js application on Render

Ahmed Saber — Sun, 26 Mar 2023 02:30:33 +0000

React.js is a popular JavaScript library for building user interfaces, and Render is a cloud platform for deploying and managing applications.

In this article, I will show you the steps required to deploy a React.js application on Render.

Step 1: Create a Render Account.

First, you will need to create an account on Render.
You can sign up for a free account at Render.
Once you have signed up, you will be taken to the Render dashboard.

Step 2: Create a New Web Service.

To deploy a React.js application on Render, you will need to create a new web service.
Click on the “New Web Service” button on the Render dashboard, and then select “Static Site” from the list of options.

Step 3: Connect to Your GitHub Repository.

Next, you will need to connect your GitHub repository to your Render account.
This will allow you to deploy your React.js application directly from your GitHub repository.
To do this, select “GitHub” as the deployment method, and then select the repository and branch that you want to deploy.

Step 4: Configure the Build Settings.

After you have connected your GitHub repository, you will need to configure the build settings for your React.js application.
Render supports a wide range of build tools and frameworks, including Create React App.
If you are using Create React App, you can simply enter “npm run build” as the build command, and “build” as the build directory.

Step 5: Deploy Your React.js Application.

Once you have configured the build settings, you can deploy your React.js application by clicking on the “Create Web Service” button.
Render will automatically build and deploy your application, and you can then access it by clicking on the URL provided on the Render dashboard.

In conclusion, deploying a React.js application on Render is a straightforward process that can be completed in just a few simple steps.
By following the steps outlined in this article, you can quickly and easily deploy your React.js application on Render and take advantage of its powerful cloud hosting and management features.

You can find & contact me on LinkedIn, GitHub, and Facebook, and here is my portfolio for more details about me.

How to gain experience without work ?

Ahmed Saber — Sun, 26 Mar 2023 02:24:55 +0000

Here I will be discussing some ways in which you can gain experience and be job-ready, let’s start.

nowadays, it’s difficult to find a job without any previous experience, but we need a job to gain experience and we need experience to get a job, what will end to an infinite loop, so let’s break the loop, and find another suitable solution.

Find an internship.

Let’s classify internships into 2 main categories:-
Real Internships: in which you will be working with a real team on a real project, save your time and start seaching for them on LinkedIn and Internshala.
Virtual Internships: in which you will be working alone on virtual projects, you can start looking for them now on Forage, TheSparksFoundation and LetsGrowMore.

Find a team and build a project together.

Being in a team, will let you share your experience with others and gain experience from them, let’s start looking for a team on LinkedIn or Chingu.

Contribute to open source project.

Contributing to an open source project will make you aware about how large projects are built and how a team can collaborate to build them, if you are interested about this kind of experience, check UpForGrabs and CodeTriage.

Be a volunteer.

You can start volunteering with any non-profit organization to gain experience, some of these organizations are FreeCodeCamp, CatchAFire, CodeYourFuture, Teals and CoderDojo.

Participate in community activities.

You can check GoogleDeveloperStudentClub and TheSparksFoundation Campus Ambassador.

Participate in competitions.

For example, you can check GoogleDeveloperSolutionChallenge.

Build a large network and share your thoughts with them.

LinkedIn is the best place for that.

That’s all, paying attention to these points will help your gain experience and be job-ready.

Start building your network now, and connect with me on LinkedIn.

You can find & contact me on LinkedIn, GitHub, and Facebook, and here is my portfolio for more details about me.

How to write better Git commit messages ?

Ahmed Saber — Sun, 26 Mar 2023 02:17:29 +0000

Some developers don’t pay attention to naming commit messages, as they think it’s not important, and paying attention to it is just a waste of time, but are they right ? that’s what we are going to talk about right now, so let’s start.

Naming of commit messages is so important if we are going to read them again in the future, but when should we do that ? let’s see some situations in which we need to go back and read old commits.

If I’m working with a team, and I need to know what they have done, so I will expect to find clean commits with descriptive names.
If I need to go back to an old commit to see what exactly has been done within it.
If any issue happened due to a certain commit, so I need to get my whole application to an older version before this commit.
If I’m responsible for code review in my team.

Now we know why we should write clean commit messages, Let’s see how we can do that.

1) The subject should be less than 50 letters.

Do: “Implement add to cart functionality”
Don’t: “Implement the function responsible for adding products to cart by using the product id”

2) The sentence should be capitalized.

Do: “Add cart indicator to navbar”
Don’t: “add cart indicator to navbar”

3) Don’t end the sentence with a dot.

Do: “Add cart indicator to navbar”
Don’t: “Add cart indicator to navbar.”

4) Use a verb in imperative form.

Do: “Add cart indicator to navbar”
Don’t: “Added cart indicator to navbar”

Finally, there is a great way that can help you write better commit messages, you can measure if your commit message is good or bad with this sentence.

If applied, this commit will “commit message”

Good: If applied, this commit will “Add cart indicator to navbar”
Bad: If applied, this commit will “adding cart indicator to navbar”

That’s all, now you need to practice what you have learnt, to be able to write better Git commit messages.

You can find & contact me on LinkedIn, GitHub, and Facebook, and here is my portfolio for more details about me.