The Journey of #100DaysOfCode (@Amir_BouGhanem)

Amir_BouGhanem · 2024-10-03T07:33:27.239Z

𝗗𝗮𝘆 𝟴𝟰 - 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 𝗘𝘃𝗲𝗻𝘁𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

In React, handling events is similar to handling events in regular HTML, but there are a few key differences:

React events are named in camelCase (onClick instead of onclick).
You pass a function as the event handler, not a string.

Explanation :

The onClick event handler listens for clicks on the button, and the handleClick function is triggered when the button is clicked.

Please refer to the code for deeper context!

100daysofcode lebanon-mug

code.pdf (126.3 KB)

Amir_BouGhanem · 2024-10-04T08:11:51.895Z

𝗗𝗮𝘆 𝟴𝟱 - 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 𝗙𝗼𝗿𝗺𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

Forms in React work similarly to regular HTML forms but require more management, particularly when handling form state and submissions. React provides a way to manage controlled components where the form’s input value is handled by React state.

Explanation :

State Management : The useState hook manages the form state. Here, name is the current state value and setName updates it.
Handling Input Changes : The onChange event handler listens for user input and updates the state accordingly.
Submitting the Form : The handleSubmit function is triggered when the form is submitted, and event.preventDefault() prevents the default form submission (i.e., prevents the page from refreshing).

100daysofcode lebanon-mug

code1288×1124 108 KB

Amir_BouGhanem · 2024-10-05T07:51:48.297Z

𝗗𝗮𝘆 𝟴𝟲 - 𝗥𝗲𝗮𝗰𝘁 𝗥𝗼𝘂𝘁𝗲𝗿

React Router is a powerful library used for handling navigation and routing in React applications. It enables your app to have multiple views or pages and lets you navigate between them without reloading the page (client-side routing). This makes the app more dynamic and responsive, improving the user experience.

100daysofcode lebanon-mug

1. Setting Up React Router

To start using React Router, you need to install it via npm or yarn:

𝗇𝗉𝗆 𝗂𝗇𝗌𝗍𝖺𝗅𝗅 𝗋𝖾𝖺𝖼𝗍-𝗋𝗈𝗎𝗍𝖾𝗋-𝖽𝗈𝗆

2. Basic Components of React Router

React Router has several key components that are essential for navigation:

BrowserRouter : The top-level component that wraps the app and enables routing functionality.
Routes : A container component that holds all the route definitions.
Route : Defines a path and the component that should be rendered for that path.
Link : Used to create navigation links between routes without causing a page reload (unlike the traditional tag).

3. Route Parameters

React Router allows you to define dynamic routes with parameters, which can be accessed in the component.

code.pdf (311.4 KB)

Amir_BouGhanem · 2024-10-06T08:24:55.516Z

𝗗𝗮𝘆 𝟴𝟳 - 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴 𝗗𝗮𝘁𝗮 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

Fetching data from APIs is a crucial aspect of building dynamic React applications. You can use either the native fetch API or an external library like Axios to handle HTTP requests.

Using `fetch` API

The fetch API is built into modern browsers and is used to make HTTP requests.

Explanation :

The useEffect hook is used to fetch data when the component mounts.
The fetch function retrieves data, which is then converted to JSON and stored in state using setData.
Conditional rendering is used to show a loading message while the data is being fetched.

Using Axios

Axios is a promise-based HTTP client that provides a more robust way of handling requests and responses. It simplifies making requests and automatically transforms JSON responses.

To learn more about the fetch API: Fetch API - Web APIs | MDN
To learn more about Axios: GitHub - axios/axios: Promise based HTTP client for the browser and node.js

100daysofcode lebanon-mug

Using fetch API1346×1284 161 KB

Using Axios1346×1284 167 KB

Amir_BouGhanem · 2024-10-07T14:03:03.159Z

𝗗𝗮𝘆 𝟴𝟴 - 𝗥𝗲𝗮𝗰𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻

As your React application grows, performance may degrade due to unnecessary re-renders or large amounts of data processing. Here are some strategies for optimizing React performance.

1. Memoization with `React.memo`

React.memo is a higher-order component that prevents unnecessary re-renders of functional components if their props haven’t changed.

2. Using `useCallback` and `useMemo`

useCallback: Caches function references to avoid unnecessary re-renders when passing functions as props.
useMemo: Memoizes expensive computations to avoid re-calculating them on each render.

3. Lazy Loading with `React.lazy` and `Suspense`

You can improve performance by lazy loading components, especially for large, infrequently-used components.

4. Virtualization for Large Lists

If your app displays large lists of data, use libraries like React Virtualized or React Window to render only the visible items in the viewport.

100daysofcode lebanon-mug

code.pdf (177.6 KB)

Amir_BouGhanem · 2024-10-08T16:07:17.893Z

𝗗𝗮𝘆 𝟴𝟵 - 𝗨𝗻𝗶𝘁 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

Testing is crucial for ensuring that your React components work as expected. There are several approaches to testing React applications, including unit testing, integration testing, and end-to-end (E2E) testing. Today, we will tackle unit testing.

Jest is a popular testing framework for JavaScript and React Testing Library helps with testing React components in a way that mimics user interaction. By combining both Jest & React Testing Library, we can write efficient quick unit tests.

100daysofcode lebanon-mug

image1400×788 43.1 KB

code1480×836 96.2 KB

Amir_BouGhanem · 2024-10-09T20:18:55.301Z

𝗗𝗮𝘆 𝟵𝟬 - 𝗘𝟮𝗘 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗨𝘀𝗶𝗻𝗴 𝗖𝘆𝗽𝗿𝗲𝘀𝘀

End-to-End (E2E) testing is a technique to test the entire flow of an application, from the front-end to the back-end. E2E testing ensures that all components of an application work together as expected. Cypress is one of the most popular tools for E2E testing in JavaScript applications, especially for React.

Cypress is fast, reliable, offers a great developer experience as it comes with a test runner, it also offers automatic waiting for DOM elements to be loaded before proceeding to further steps, and time travel (You can see what happened at each step of the tests through snapshots).

100daysofcode lebanon-mug

image1280×670 39.3 KB

code1258×996 108 KB

Amir_BouGhanem · 2024-10-10T10:36:00.949Z

𝗗𝗮𝘆 𝟵𝟭 - 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗖𝗹𝗼𝘂𝗱 𝗖𝗼𝗺𝗽𝘂𝘁𝗶𝗻𝗴?

Cloud Computing is the practice of using a network of remote servers hosted on the internet to store, manage, and process data, rather than a local server or a personal computer (PC).

Cloud Hosting is a result of years of work and development in the server-side. It all started with a Dedicated Server which can host 1 app. Then, Virtual Private Server came into the mix, offering a huge leap forward in server capabilities for businesses. It offered the same as a Dedicated Server, but with the ability to host multiple apps. Later came Shared Hosting, 1 machine, hundreds of apps for hundreds of businesses.

It all came down to what we have now, Cloud Hosting, multiple physical machines that offer multiple cloud services for millions of businesses and users.

100daysofcode lebanon-mug

image1920×1200 335 KB

Amir_BouGhanem · 2024-10-11T12:10:54.874Z

𝗗𝗮𝘆 𝟵𝟮 - 𝗖𝗹𝗼𝘂𝗱 𝗖𝗼𝗺𝗽𝘂𝘁𝗶𝗻𝗴 𝗦𝗲𝗿𝘃𝗶𝗰𝗲 𝗠𝗼𝗱𝗲𝗹𝘀

Today, I will share the common cloud models known across all cloud providers worldwide.

IaaS (Infrastructure as a Service)

Provides virtualized computing resources over the internet. It offers businesses the ability to rent IT infrastructure components such as servers, storage, and networking hardware on a pay-as-you-go basis.

Examples: Azure, AWS, Oracle, Google Cloud

PaaS (Platform as a Service)

Provides a platform and environment for developers to build, deploy, and manage applications without dealing with the underlying infrastructure. PaaS offers a complete development and deployment environment in the cloud, including servers, storage, networking, and middleware, allowing developers to focus solely on writing code and developing applications.

Examples: Heroku, Google App Engine.

SaaS (Software as a Service)

Software applications delivered over the internet as a service. The SaaS provider manages the underlying infrastructure, platforms, and software, while users simply interact with the application.
Examples: Gmail, MS 365.

100daysofcode lebanon-mug

image1656×1006 98.3 KB

Amir_BouGhanem · 2024-10-12T18:31:59.754Z

𝗗𝗮𝘆 𝟵𝟯 - 𝗠𝗶𝗰𝗿𝗼𝘀𝗼𝗳𝘁 𝗔𝘇𝘂𝗿𝗲

Microsoft Azure is a comprehensive cloud computing platform provided by Microsoft. It offers a wide range of cloud services, including computing, analytics, storage, networking, and more, allowing businesses to build, deploy, and manage applications through a global network of data centers.

Azure provides both Platform as a Service (PaaS), Infrastructure as a Service (IaaS), and Software as a Service (SaaS) options, making it a versatile cloud solution for enterprises, developers, and startups alike.

Azure also supports cross-cloud via Azure Arc. It currently has 58 regions across 140 countries.

In the upcoming days, I will cover more about what Azure has to offer.

100daysofcode lebanon-mug

image640×640 30.5 KB

Amir_BouGhanem · 2024-10-13T19:03:46.239Z

𝗗𝗮𝘆 𝟵𝟰 - 𝗔𝘇𝘂𝗿𝗲 𝗖𝗼𝗺𝗽𝘂𝘁𝗶𝗻𝗴 𝗦𝗲𝗿𝘃𝗶𝗰𝗲𝘀

Microsoft Azure offers a wide range of cloud computing services. Those include but are not limited to:

- Azure Virtual Machines → Run virtualized OS instances in the cloud.

- Azure Container Instances → Run containers without needing to manage any virtual machines.

- Azure Kubernetes Service (KAS) → Simplifies the deployment, management, and scaling of containerized applications using Kubernetes.

- Azure Functions → Run small pieces of code without worrying about infrastructure management.

- Xamarin → Create powerful and scalable native mobile apps with .NET and Azure.

100daysofcode lebanon-mug

image1000×562 61.1 KB

Amir_BouGhanem · 2024-10-14T19:54:23.850Z

𝗗𝗮𝘆 𝟵𝟱 - 𝗔𝘇𝘂𝗿𝗲 𝗔𝗜 𝗧𝗼𝗼𝗹𝘀

Microsoft Azure offers a wide range of AI tools . Those include but are not limited to:

- Personalizer → Deliver rich, personalised experiences for every user.

- Translator → Add real-time, multi-language text translation to your apps, website, and tools.

- Anomaly Detector → Detect anomalies in data to quickly identify and troubleshoot issues.

- Azure Bot Service → Intelligent, serverless bot service that scales on demand.

- Form Recogniser → Automate the extraction of text, key/value pairs and tables from your documents.

- Computer Vision → Easily customize computer vision models for your unique use case.

- Language Understanding → Build natural language understanding into apps, bots, and IoT devices.

- QnA Maker → Create a conversational question-and-answer bot from your existing content.

- Text Analytics → Extract information such as sentiment, key phrases, named entities, and language from your text.

- Content moderator → Moderate text and images to provide a safer, more positive user experience.

- Face → Detect and modify people and emotions in images.

- Ink Recogniser → Recognise digital ink content, such as handwriting, shapes, and document layout.

100daysofcode lebanon-mug

Amir_BouGhanem · 2024-10-15T07:02:59.975Z

𝗗𝗮𝘆 𝟵𝟲 - 𝗖𝗹𝗼𝘂𝗱 𝗣𝗹𝗮𝘁𝗳𝗼𝗿𝗺 𝗖𝗵𝗮𝗿𝗮𝗰𝘁𝗲𝗿𝗶𝘀𝘁𝗶𝗰𝘀

A proper cloud platform must hold to certain characteristics that are necessary for the success of any business or application depending on its infrastructure and services. There are 5 main abilities that any cloud platform must provide for the given user so that he is able to depend fully on the cloud.

Availability – The user’s ability to ensure a service remains available (Highly Available HA).

Scalability – The user’s ability to grow rapidly without restriction.

Elasticity – The user’s ability to shrink and grow to meet his demands.

Fault Tolerance – The user’s ability to prevent failure.

Disaster Recovery – The user’s ability to recover from any failure (Highly Durable DR).

100daysofcode lebanon-mug

image1024×853 35.9 KB

Amir_BouGhanem · 2024-10-16T10:16:14.693Z

𝗗𝗮𝘆 𝟵𝟳 - 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗗𝗲𝘃𝗢𝗽𝘀?

DevOps is a set of practices, tools, and cultural philosophies aimed at automating and integrating the processes between software development and IT operations teams. The goal is to shorten the software development lifecycle, improve collaboration, and continuously deliver high-quality software faster and more reliably.

100daysofcode lebanon-mug

image920×500 6.08 KB

Harshit · 2024-10-16T13:17:55.844Z

Almost there @Amir_BouGhanem! Great job on getting here!

Amir_BouGhanem · 2024-10-17T19:58:19.033Z

Thank you @Harshit ! It’s been a hell of a ride and it’s coming to an end. 3 days to go!

Amir_BouGhanem · 2024-10-17T19:59:27.329Z

𝗗𝗮𝘆 𝟵𝟴 - 𝗞𝗲𝘆 𝗗𝗲𝘃𝗢𝗽𝘀 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀

The key principles of DevOps can be summarized into 7 main points.

1. Communication and Collaboration:

DevOps emphasizes strong collaboration between development (Dev) and operations (Ops) teams to break down silos and streamline the entire development-to-production process.

2. Automation:

Automating repetitive tasks such as code integration, testing, deployment, and infrastructure management is a core aspect of DevOps. This leads to faster and more consistent processes.

3. Continuous Integration (CI) and Continuous Delivery (CD):

· CI involves frequently merging code changes into a shared repository, followed by automated testing to ensure the integrity of the application.

· CD extends CI by automating the deployment process, ensuring that applications can be released to production quickly and reliably.

4. Infrastructure as Code (IaC):

IaC allows teams to manage and provision infrastructure through code and automation, treating infrastructure configurations the same way as application code (versioned and reproducible).

5. Monitoring and Logging:

Continuous monitoring of applications and infrastructure is essential to identify performance issues, security vulnerabilities, and operational inefficiencies. It also allows rapid detection of problems in production.

6. Microservices Architecture:

DevOps encourages breaking down applications into smaller, loosely coupled services (microservices), which can be developed, deployed, and scaled independently.

7. Agile Methodology:

DevOps often incorporates Agile practices, emphasizing iterative development, customer feedback, and adapting to changes quickly.

100daysofcode lebanon-mug

Amir_BouGhanem · 2024-10-18T16:13:13.843Z

𝗗𝗮𝘆 𝟵𝟵 - 𝗗𝗲𝘃𝗢𝗽𝘀 𝗧𝗼𝗼𝗹𝘀

To apply the key principles of DevOps, there are certain tools that DevOps engineers use to work.

1. Version Control: Tools like Git and Azure Repos enable collaboration on code, version tracking, and easy rollbacks.

2. CI/CD Pipelines: Tools like Jenkins, Azure DevOps, and CircleCI automate the building, testing, and deployment of applications.

3. Containerization and Orchestration: Docker and Kubernetes (including Azure Kubernetes Service - AKS) are used to package applications and manage containerized workloads efficiently.

4. Infrastructure as Code (IaC): Tools like Terraform, Ansible, and Azure Resource Manager (ARM) templates allow automated provisioning and management of infrastructure.

5. Monitoring and Logging: Tools like Prometheus, Grafana, Azure Monitor, and ELK Stack (Elasticsearch, Logstash, Kibana) provide real-time monitoring, logging, and analytics.

6. Automated Testing: Tools like Selenium, JUnit, and Azure Test Plans help in automating unit, integration, and UI tests.

100daysofcode lebanon-mug

Amir_BouGhanem · 2024-10-19T09:00:26.363Z

𝗗𝗮𝘆 𝟭𝟬𝟬 - 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 𝗖𝗼𝗺𝗽𝗹𝗲𝘁𝗲𝗱!

It is day 100 now. After 100 days of pure committment to conquering this challenge, I’m thrilled to complete the 100daysofcode challenge! I would like to thank everyone who has followed up with my posts and supported me throughout this journey. It means a lot to me. Also, I hope that you’ve benefited from the content I covered from day 1.

This challenge was not easy. It required a lot of commitment each and every day to post. However, what makes it worth it is the amount of information you may gain if you take 10 minutes of your time to learn every day. This challenge has taught me a lot.

Every little inch of progress you make is still progress, and it will set you apart from others.

Again, thank you to everyone who supported me on my 100daysofcode journey. Hopefully, I will attempt this challenge again once I dive deep into other aspects of Computer Science.

lebanon-mug

system · 2025-01-07T19:20:47.193Z

This topic was automatically closed after 180 days. New replies are no longer allowed.