Forem: Rowan Ibrahem

From Manual to Automatic: The Magic of CI/CD Pipelines! 🤯

Rowan Ibrahem — Sat, 12 Oct 2024 21:37:33 +0000

🔴Introduction
Imagine deploying new features without breaking a sweat no more late nights or frantic bug fixes. That's the magic of CI/CD! Ready to learn how this powerful process can turn chaos into seamless, stress-free releases?

Today we will talk about an important and interesting topic every developer should know, Let’s Discover CI/CD World!

🟢Table of contents

What is CI/CD?
What is a pipeline?
Benefits of CI/CD
CI/CD Tools
Firebase App Distribution
Fastlane
Upload the first APK
Conclusion

CI/CD stands for Continuous Integration and Continuous Delivery. But what does all that mean? Let's break it down:

📌 CI (Continuous Integration): This process starts with building your code and pushing it to a platform like GitHub. From there, automated tests and deployments are triggered to ensure everything is working smoothly.

📌 CD (Continuous Delivery): The DevOps engineer takes over here. They handle deploying the tested code to the server, making it accessible to the client. They also monitor the deployment closely, so if any issues pop up, they can quickly notify the developers to address them.

📌Let's see the flow that used to happen without CI/CD
The developer finishes the code and informs the tester that the code has been pushed to GitHub. The tester then checks it and performs tests. After that, the tester reports any issues to the developer or informs the DevOps (responsible for deploying the project to the server) that the code is fine. The DevOps then takes the code for deployment. This happens manually, increasing the time and effort required as each person waits for the other to complete their task.
CI/CD transformed the integration and deployment process into an automatic one by building a pipeline containing all the required commands. These commands are automatically executed upon being triggered.

So, What is a pipeline?👀

As the name suggests, a pipeline is like a tube through which code flows in a specific sequence that we define. The flow goes as follows: After creating the project, we push it to GitHub. As soon as this push happens, a tool takes the code and builds it. Then it moves to another tool for testing. If the code passes the tests, it continues to the deployment stage and gets deployed to the server or Google Play. If there is an issue, the pipeline stops, and the developer is informed about the issue that must be fixed before continuing the deployment and build process.

✅To create this pipeline, we have several tools like Jenkins, GitHub Actions, GitLab, Fastlane, and Circle CI. These are tools where you write a file in your project specifying the commands you want to be executed when a push occurs.
These tools then automatically execute the pipeline and the commands written in it. The following image illustrates different tools used at each stage.

🟢Benefits of using CI/CD tools
When I want to add a new feature, I won’t have to build and upload it manually every time. If I make any changes, it will automatically run tests, and if it fails, it won’t be deployed at all. Instead, it’ll notify the developer about the issue so they can fix it—rather than discovering the problem later with the client. This process improves the product's quality in the long run and reduces the time and effort needed for building, testing, and deployment.

So, all of this mostly involves DevOps work. How does it benefit me as a mobile developer?📍
When we build our application, we need to send an APK to the tester to test the features built, show a demo to the client, or even upload to Google Play and update the existing version. All of this is done manually, but we can do it automatically with a single command line without needing to build the APK every time or even upload it ourselves. Let’s explore how we can do this.

For Flutter, the tools that help us with this are:

Firebase Distribution
Fastlane
GitHub Actions
Code Magic We will learn about them in detail and see how to integrate them into our project.

📌 So, imagine we're working on our project, and it's time to send the APK to the tester. Of course, we won’t be sending it over WhatsApp or uploading it to Google Drive every time, right? We’ve got a much better solution! We’ll put the APK in a dedicated space, and this place will automatically send an email to the tester with a direct download link for the new version of the app. It’s like having your own private distribution channel where you store all the releases, and the system takes care of the rest. But what is this magical place? Let’s find out!

Now we will know what is Firebase App Distribution 🤔
It’s a service in Firebase that allows you to send the APK to testers, making the testing process easier before the release stage. Plus, it’s cross-platform, so you can use it on both Android and iOS.
On Google Play, you have tracks, and on the App Store, there’s TestFlight both are services designed to simplify the testing process before release and to manage different versions smoothly.

📌 The first step to use this service is, as the name suggests, it’s part of Firebase services, so you need to link your project to Firebase. Here’s the documentation to guide you through connecting your project to Firebase in just a few simple steps: Firebase Documentation.

After that, head over to your project in Firebase, and go to App Distribution.

This is the UI :

📌 First, we'll generate the APK manually. Navigate to your project and enter this command in the Terminal:

And if you're using flavors (which we’ll cover in another article), use this command:

📌 Once the APK is ready, locate it in your project folder and drag and drop it into App Distribution (as shown in image #1 above). That’s it the APK is now uploaded!

📌 To add testers, go to the Testers and Groups tab (marked as #2). Here, you can add multiple testers by entering their emails and even organizing them into groups. An email will then be sent to each tester, prompting them to download the App Tester application, where they can access the uploaded APK.

📌 You can also add Release Notes, and testers can send you their feedback or comments directly through the app.

📌 In case there's an issue with the email, you can use Invite Links in tab #3 to share a direct link with testers.

📌 One of the advantages of Firebase App Distribution is that it can easily integrate with other tools, offers a user-friendly interface, and ensures security for your application.
However, each time you make changes or add a new feature, you’ll still need to manually generate and upload the APK, which means we haven't fully embraced automation yet.

To automate this process, we’ll integrate it with a tool called Fastlane.

What is FastLane?🔎
Fastlane is an open-source tool that automates the process of building, testing, and deploying apps. Instead of manually creating an APK each time, you can run a single command in the command line, and Fastlane takes care of the rest! Plus, it can automatically upload your app to Google Play or the App Store.

For example, you can use the scan action to run tests on your app before uploading it to Google Play or the App Store, and it even connects directly with these platforms. You can explore more actions in the documentation here:
https://docs.fastlane.tools/

📌 While Fastlane is easy to use, the installation can be a bit tricky at first. But after that, it’s smooth sailing, and you can use it for both Android & iOS.

📌 Fastlane is built on Ruby, so the first step is to install Ruby on your machine, along with Bundler, which is a package manager for Ruby. We’ll start by installing rbenv, which allows you to use different Ruby versions for each project.

You can follow the setup instructions here based on your OS (macOS or Windows):
https://www.ruby-lang.org/en/documentation/installation/#manager

📌 To confirm Ruby is installed, open the terminal and run:

If you see the version number, you're good to go. If you get a "command not found" error, there might be an issue with your path variables that needs adjusting. If you encounter this problem, feel free to ask for help.

📌 Since I faced some challenges with this method, I downloaded Ruby directly from the official site: https://rubyinstaller.org/
Install it as you would any other software, and to verify, run:

If the version number appears, Ruby is installed, and you can skip using rbenv.

📌 Next, install Bundler with this command:

📌 The gem command helps install any Ruby-related packages. Go to your Android project and create a Gemfile where you define the dependencies, like Fastlane. Add this to the Gemfile:

Then, run in the terminal:

This will generate a Gemfile.lock file and complete the installation.

📌 To install Fastlane, use:

📌** It will ask for the package name, which you can find in:**

📌 *You’ll get a series of prompts choose *"no" and press enter for the rest until it finishes. This will generate two files: Appfile and Fastfile.
The Appfile contains configurations, while the Fastfile is where we define actions, like generating an APK, deploying to Google Play, or even printing something. It’s like defining functions.

To execute the commands in the Fastfile, use:

If you see "Fastlane worked successfully," then it’s all setup! Now, we have Firebase App Distribution and Fastlane installed separately, but we need to link them to automate the process.

📌 To integrate Firebase App Distribution with Fastlane, go to the "Beta Deployment" section in the Fastlane documentation and search for Firebase App Distribution. Then, run:

Next, Fastlane needs to know which project to work on. Make sure you’ve set up Firebase authentication and installed the Firebase CLI by running:

This will open a browser for you to log in to Firebase. Once successful, you’ll receive a token in the terminal to keep it safe for later.
Now, you’re ready to write the actions you want directly in the Fastfile! 🥳

Now, Let’s see the Syntaxs :
📌** What is a lane?**
Lanes in Fastlane are similar to functions, each serving a specific purpose, such as building an APK, deploying an app to Firebase, and other development-related tasks.

Let’s take a look at an example for clarification:

📌 Do:
This indicates that the specified lane should be executed.
📌 Desc:
This is a description of what the lane does, written to explain its functionality.

Here’s how it works:
The first part after the "lane" keyword is the name of the lane, which you can name as you like. Then, I instruct it to execute the tasks written under "do."

Next, the section related to Firebase App Distribution is taken directly from the documentation, along with some required data.

Important Note: Make sure to check the documentation for both Firebase App Distribution and Fastlane together, as there may be missing information in one or more documents, including additional attributes and detailed explanations.

App ID: This is retrieved from your Firebase project, and I will provide a screenshot from the site.

Firebase CLI Token:
This token is used to refresh the authorization periodically to avoid errors like "unauthorized" or not being able to access the server. When it refreshes automatically, it works fine. This is the token we saved earlier in our notes.

Next, we have:
android_artifact_type:
This indicates whether you are uploading an APK or an app. You need to specify the path where the file will be located.

Go to:
Build -> app -> outputs -> flutter-apk -> app-release.apk
Take the path of the file and place it. It should look like this in the end:
../build/app/outputs/flutter-apk/app-release.apk

Testers: Add the email address of the tester to whom you want to send the email or the client.

Release Notes: If you want to add notes for the testers.
Now, Fastlane is supposed to take the APK that I generate manually, find the file at the specified path, and upload it to Firebase App Distribution, sending it to the testers.

What if I don't want to manually generate the APK and want Fastlane to do it for me?

We can add two lines at the beginning of the Fastfile, right after the do keyword:

Here, sh indicates that these commands should be executed in the terminal. Every time I upload the APK, I will change the version number to ensure each new release is distinct from the previous one.

To run this and execute the workflow, I will write in the terminal:

This will start the build process with the steps I specified until it indicates a successful build! 🎊
It’s common to encounter issues during this setup; it's generally the most challenging part, but once done, the building process becomes easy every time.
This applies to Android.

📌 If you want to connect with Google Play, you can check this article:
Automating the Flutter App Play Store Release Process Using Fastlane
Next time, we will learn how to create a workflow using GitHub Actions! 🌟

Conclusion ✅
The concept of Continuous Integration and Continuous Deployment (CI/CD) plays a pivotal role in modern software development, making the process faster and more efficient. It begins with writing code, followed by automated testing, and culminates in seamless deployment. Tools like Jenkins, GitHub Actions, and SonarQube facilitate this process, ensuring that the code is thoroughly tested, properly integrated, and secure during deployment.
By implementing CI/CD practices, developers can significantly reduce potential issues in the code, enhance the user experience, and bolster security measures. This streamlined approach not only minimizes the time spent on deployment but also mitigates the risks associated with software releases.

That's it! Start to write your first pipeline! Connect with me on LinkedIn and GitHub for more articles and insights. If you have questions, contact me.
https://linktr.ee/rowan_ibrahim

Happy coding and happy deploying!🌟

Beyond Bugs: The Hidden Impact of Code Quality (Part 2) 🌟

Rowan Ibrahem — Fri, 30 Aug 2024 18:01:46 +0000

Introduction
As we mentioned in the last part about the importance of code quality and standards, today we will talk about tools to help in measuring it and visualize detailed reports about your code. Finally, we will know some tips to improve our code. Let’s Start 🌟

🟢Table of contents

Tools to measure Code Quality.
Tips for Improving Code Quality.
Conclusion.

Tools Used to Measure Code Quality 🔏
In a world overflowing with data, numbers often speak louder than words. That’s why some tools can analyze your code for you, using proven methods and techniques to offer suggestions for edits and improvements.
These tools also provide visualized reports and charts about your code.
They can integrate with version control systems like GitHub to access repositories directly or operate locally on your machine.

Sonarqube It’s an open-source quality management tool that detects various types of issues such as bugs, vulnerabilities, code smells, and security hotspots It comes with built-in quality profiles designed for each supported language.

SonarQube includes a feature called SonarLint, and you can add it to your code to analyze it locally. You can integrate SonarLint as a plugin within your IDE for real-time feedback.

How does it work?
Sonar Qube has some rules that are based on code quality standards. When you configure your project and download the sonar scanner, it starts to analyze your code, and then it takes roles from the Sonarqube server.
Roles are based on software quality and clean code attributes that measure how your code is quality.

It applies for these roles in the scanned code, then it generates reports and shows them in your dashboard like this

Here, he passed the code, but there are some issues that he needs to fix.
It produces details of each issue, where is it in your code and how to fix it.

Additionally, the CI/CD Pipeline can accommodate its implementation. If you are unfamiliar with what it is, that’s alright - you can utilize it independently.

To be honest, not all issues are true all the time, you just will read it and see what needs to be fixed.
You can install it on Windows, Linux,macOS, or with Docker, see the full documentation here
https://docs.sonarsource.com/sonarqube/latest/
This excellent resource for understanding it
https://youtube.com/playlistlist=PLDhScTEBdP8ym3PaMkkTVuaaVHV2ktI0j&si=6Sg8nAukTWyXWbk2

- code climate
It’s like Sonarqube but doesn’t offer detailed reports and doesn’t support all languages, you can see it from here
https://codeclimate.com/

CodeScene: This tool builds on the open-source project Code Maat to analyze every file and every commit in the repo and identify hotspots and churns.

It generates visualized metrics, making it easier to decide where to focus on your quality improvement efforts.
You can install the code scene IDE extension.

The dashboard generates visual reports about code health and identifies areas that require improvement.

It also provides an analysis summary for the repo number of commits, authors, code health, etc…..

You will find more data if you discover it, not all features are free, but you still can try some of them.
Discover from here:
https://codescene.com/

- SNYK
It’s a security platform that focuses on helping developers find and fix vulnerabilities in their code, dependencies, containers, and infrastructure as code (IaC).
It scans code and makes reports of weak parts and how to fix it

You can log in to the dashboard from here:
https://snyk.io/

When you run it in the terminal, it will be like this:

As we say, it checks for code dependencies and containers but don’t make a full check for the security of the code, you should still review it manually.

See full documentation and how to set up
https://docs.snyk.io/

We don’t rely on these tools as a main source. You should make a code review manual continuously for your project and enhance the code as you can.

Tips to improve 📍

Dev tools are wonderful for debugging your code and improving it continuously. It helps to see how the code takes from memory, CPU, and performance of your app.
Following the best practice in the language you write, it’s a set of methods and techniques that produce optimal results for your code. You can learn more about this from here👇🏻 https://www.indeed.com/career-advice/career-development/what-are-best-practices
Try to remove unnecessary libraries, packages, or images that aren’t used.
Ensure that you implement error handling and logging in your code.
Use images as SVG as possible to reduce the size of the app or the loading time of images.
Create CI/CD (continuous integration Continuous delivery) pipelines to ensure that we test every push or edit in a feature before starting a new feature.
Cache your data that is frequently accessed from memory as much as possible to improve performance.
Loading data asynchronously means loading it in the background without blocking the user interface, so it will enhance the end-user experience.
Always read the code and refactor it as you can.
Don’t forget to document your code to express itself.
Use version control as GitHub to collaborate with the team to make code reviews and track changes in the code over time, it makes it easy to return to any change if there are any errors or bugs.
Use a linter. It helps in code formatting by checking code syntax errors, style violations, and possible bugs for static analysis. You can use a language linter or write your lines (rules).

I recommend reading this book. You will find more details and you will enjoy it:
https://people.engr.tamu.edu/slupoli/notes/ProgrammingStudio/supplements/Code%20Complete%202nd.pdf

Conclusion ✅
The responsibility of measuring code quality is standing for each developer in the project from the team lead, developer, and tester.
This will come from practice and experience. You can go to open-source projects, try to contribute to them, and see how can you maintain the code quality.

Try to learn OOP, and SOLID Principles and read the clean code book. This will help you to enhance your code quality.
Remember, being a good software engineer isn’t just about delivering products, it’s about delivering high-quality software that stands the test of time.

This test Cases template sheet, you can use it in your project :
https://docs.google.com/spreadsheets/d/11nAISjsWE7yVCiL-ihEp4rQ42-7-LeX9TsK03ofO4Z8/edit?usp=sharing

That's it! Start to check your Code Quality with these tools! Connect with me on LinkedIn and GitHub for more articles and insights. If you have questions, contact me.
https://linktr.ee/rowan_ibrahim

Remember, "Later Equals Never." 😉

Beyond Bugs: The Hidden Impact of Code Quality (Part 1) 🌟

Rowan Ibrahem — Fri, 30 Aug 2024 16:57:46 +0000

🔴 Introduction
As software engineers, we often encounter unexpected bugs or delays when adding or modifying features that should not occur. Most software engineers focus on finishing the product to deliver it, but did you think about your code quality? Imagine constructing a building on a weak foundation. Adding just one more floor could cause the entire structure to collapse.

Similarly, poor code quality can lead to software instability and make adding features easier. Today we will see the hidden importance of code quality and how we develop good software.🧐

🟢 Table of contents

What is Code quality?
Why it’s important?
Code Quality standards.
Factors of Code Quality.
Tools to measure Code Quality.
Tips for Improving Code Quality.
Conclusion.

What is code quality?🤔
There is Lehaman’s low say:
“Any system that’s used will need to change”.
That means that you will need to change and update your code every time.

Imagine that you don’t care about your code quality, so you won’t be able to change your systems without difficulty or many bugs.

So Code Quality is the desire to create code that is easy to understand and maintain.

We can say that is a way to measure the efficiency, readability, and usability of the code. We can know the quality by measuring the accuracy and reliability of code and how can it be easy to maintain and read by other developers.

Why it’s important? 👀
There are a few things you shouldn’t rely on:
Future availability - Future memory

Imagine this scenario: You start a project and say that you will enhance it later but then you get busy and another team will complete the project, so you should ask yourself, Are they will be able to read and maintain it easily? What happens when they add more features? How will that impact the performance and bugs?
Code quality helps the developer re-read and redesign the code.

By Measuring the Quality of the code we become sure that the end-user will have an enjoyable experience.

It helps in Reducing future errors, producing good performance, easy to maintain in the future, easy to know the bugs early, and having good security.

It’s important to remember that every time someone changes the code, there’s a risk of it becoming less organized.
When software lasts for a long time with few errors, it can save a
company money. Instead of paying for additional time to rewrite.

✅What are code quality standards?
There are many factors called standards to ensure code quality.
The main roles of Code Quality are readability, clarity, reliability, security, modularity, etc...
These qualities make the code easy to understand, change, operate, and debug. Let’s take a thorough analysis of them.

Factors of Code Quality ⁉️
Maintaining high code quality is essential for developing software that is efficient, maintainable, and scalable. To achieve this, there are several standards and tools available to measure and improve code quality. Let's dive into these standards🤩

1-Complexity
Complexity measures the difficulty of the program or code as we know in the algorithm with Big O, so it’s a measurement of how code is easy to understand and maintain.
Some factors affect the complexity such as lines of code, loops, and conditions.
The recursion function is a simple example of how the code is complex to understand and affect the memory.

So, Why we should enhance it? 🤔
If the code is less complex, it makes high-quality performance
rather than it affects the resources such as the memory or CPU, and becomes difficult to add new features without negative performance to the project, maybe it will increase the cost of the project.
We have types to measure complexity:
Cyclomatic Complexity - Structural Complexity- Algorithmic Complexity - Cognitive Complexity.🌟

Let’s take a Simple example
Cyclomatic Complexity:
It is like counting the number of different routes you can take through a city to get from one point to another.
So, in a piece of code, these "routes" are determined by decisions or branches, such as if statements, loops (for, while), and switch cases.

The complexity here is 3 as we have 3 routes :

The order is paid.
Order in stock.
The order isn’t paid.

Cognitive Complexity:
means that humans can understand and read it easily.

Here you will find it difficult to understand it from the first time

We can refactor it to make it more readable with the least nested loops and easy to understand like this :

There are other ways to measure complexity, you can take a look here for more details :
https://blog.codacy.com/code-complexity

2- Hotspots and churns
It’s like, What’s your coding hiding?🕵🏻‍♀️
Hotspots are parts of the file or the code that are frequently modified to update, add features, or fix bugs.

They may contain complex code and may cause bugs or require maintenance.
They consume the most resources, like CPU or memory, this is why we need to optimize hotspots to improve performance.
We prioritize them to know which parts need to be maintained.

Churnscount the number of times a file changes, including code that developers added, modified, or deleted within a codebase over a specific period.

So, how can we know these files?
Version system controls like Git&GitHub track every change in all files they produce a history of file changes so you can know which files changed frequently.
You can find it in the GitHub Repo and see the history of commits.
The file that changes a lot has high churns and will be hotspots that need to improve.
We should care about it as if the file knows that it is file changed a lot and has a high complex, it may cause big errors when trying to maintain it.

3- Reliability
This ensures that every function efficiently does its job and if there are unexpected errors, the system will deal with it sufficiently without any crashes. That is why we make error handling.
To ensure that our system is reliable, we can make unit tests for our function to ensure that everything works well.

We can use debugging and profiling to ensure that our code is efficient.

At the end of the project, the tester makes an automation test to be sure that the system can deal with any crashes and will not affect the user experience.

If we know how many times the system fails in some period, we will know the reliability of it.

4- Code coverage
How good is your test suite?
Code Coverage is a metric to measure the percentage of automated tests to execute how much of your codebase.
It indicates the test cases you’ve written have tested how much of your code, helping you understand which parts of your code are well-tested and which parts may need more testing.

It produces a percentage of acceptance of the project that we can deliver software or it still needs maintenance based on these tests (unit test -integration test - acceptance test ).

There are many types of code coverage you can see in more detail here :
https://www.browserstack.com/guide/code-coverage-vs-test-coverage

5- Maintainability
Sometimes we need to modify, update, or extend the system over time to meet new requirements, so the system should be flexible and able to expand without causing any problems.

We can make it maintainable in many ways :

Code refactoring to eliminate any duplications and make it clear.
Documentation: Good documentation provides an overview of the system, how it’s structured, and how different parts interact. It includes code comments, design documents, API documentation, and user manuals. Documentation helps developers quickly get up to speed with the system and understand the implications of their changes.
Encapsulation and Abstraction: we can make Encapsulation (hiding implementation details) and abstraction (focusing on high-level operations)these concepts in OOP keep changes localized. This minimizes the risk of unintended side effects when the software is modified.
Modularity divides the software into distinct, independent modules or components. Developers can develop, test, and modify each module separately, reducing the impact of changes on the entire system.

Let’s see an example:

Here the function is made more than one job if I want to add or remove an update it will crash

Here, if I want to add or remove an update, the function performs more than one job and it will crash.
Here is a modular code that separates the different tasks (validation, payment processing, inventory update) into distinct methods. This separation makes the code easier to maintain because each method is responsible for a single task. If you need to change the payment process, for example, you only need to update the process payment method.
This makes the software easy to maintain and makes developers contribute easily and improve the performance of the software.

6- Testability
As we mentioned, there are 3 levels of testing (unit test - integration test - Acceptance test) so testability means how easily and effectively you can test a piece of code or a system to ensure it works as expected.
We should ensure that we test our code thoroughly to verify the proper functioning of every function, eliminating any potential errors or bugs in the future, thereby enhancing the user experience and facilitating ease of maintenance.

7- Readability
As your handwriting should be clear so that people can read it, your code also should be clear and readable for any developer who reads it.

How can we make our code readable?

Clear naming conventions: you should write descriptive names for classes, variables, and functions that express their objectives.
Modularity: make code smaller and modular in functions and classes. This will make code easy to maintain and debug.
Coding style: follow code style in indentation and formatting, make comments to be more easy.
Code structure: follow clear architecture and pattern in your files
Avoid any hard coding and don’t forget to make error handling.

Example:

If you look here, you will not be able to understand what a or s
You don’t know what is the purpose of function and it’s one method in the main.

Here you can find it named more descriptive. We break the method into small methods.
Also, we add comments that make the code easier and formatted well.
So you should make your code self-documented and refactor it as you can.

8- Reusability
Like a sault in our food, we can put it on different types of food, Our code should be reusable so that we can reuse it in another component or another project without causing errors.

How can we ensure from that?

Make your functions and classes into small blocks to be sure that they are reliable and not dependent on another component.
Avoid repetition: if you find that you write the same code twice, you should reuse it to make it once and use it anywhere.
Following SOLID principles will help you.
Encapsulation and abstraction make reading easier as they make the modules independent.
Use the Loose Coupling principle that minimizes dependencies between modules.

Example:
Imagine you need to create three different buttons on your project, one on the login page, one on the signup page, and one on the contact page. You might write something like this:

Here, you've repeated the button code three times, just changing the text and color. If you later decide to change the padding or font size, you'd have to find and update every button manually.

With Reusability:
Instead, you can create a reusable button component in your code

Then, use this component in different places with different colors and text:

See, that saves time and effort when we want to change something, we will change it once.

9- Portability
Software can run on different platforms, operating systems, or environments with minimal or no modification.
The system should work in different OS like Windows, Linux, and macOS.

It should run on different browsers without any bugs or crashes.
If we make an application, it should be flexible to run on different versions of Android or iOS.
The product enhances efficiency and is compatible with a wide range of customers; otherwise, you will have to create different codes for each specific environment.

10- Performance
The most important factor in code quality is performance.
We do all maintenance and code quality to measure our software's performance because if our software's performance is high, we can say that we make good software and products.

So performance is how efficiently our code is organized and optimized.
We can measure it from speed, responsiveness, and resource usage.
High performance means that the software operates quickly and effectively, using minimal resources like CPU, memory, and network bandwidth.

Examples of bad practices that lead to low performance:

Uncompressed images, wrong sizes of images, wrong format of images.
Including whole libraries when they can be tree-shaken to a fraction of the size.
Loading everything synchronously when it isn’t needed on a page.
Not utilizing browser cache.
Unused packages or images.

Every technology and framework has its ways of improving performance you just need to search with “How to improve Performance in …”.

11- Duplication
How much do you repeat yourself?
There is a DRY Principle that says you shouldn’t repeat yourself. Some developers take the code copy and paste if there are two components with the same code, but this very bad practice leads to many problems:

It reduces the performance of the product
Will cause a big maintenance effort
When you don’t update the duplicated code consistently, it may lead to great risk errors, causing different parts of your application to behave differently even though they were intended to be the same.

12- Security and dependencies
The most important part of releasing your product is to ensure that it is secure from attacks, so security is to follow guidelines and principles to protect your code and data from any attack or unauthorized access.
Dependencies Management Security: dependencies should update every time to prevent attacks.
Your system can face problems if you don’t use a reliable library or framework.

To ensure that your application is secure, you should take care of these things :

Input validation: you should ensure that input data is valid to prevent SQL injection or cross-site scripting
Authentication and authorization: you should implement a strong mechanism to control access. I recommend using Key cloak technology as it has high security in authentication
Data Protection: you should encrypt sensitive data by using techniques such as encryption and secure storage
Secure coding practices: follow secure coding guidelines and standards (e.g., OWASP, SEI CERT) to prevent common security flaws.
Security Testing: Conduct regular security testing, including static code analysis, dynamic analysis, penetration testing, and vulnerability scanning, to identify and fix security issues.

Security is important because if happens any attack it will lead to a loss of importance and loss of trust in a client, which will cause financial problems for the company.

13- Code Style
How clean is your code?
A coding style is a set of guidelines on how to format code. For instance, what do you call your variables? Do you use spaces or tabs for indentation? Where do you put comments? It gives your code the same style and is enjoyable to read, especially when working in a team.

There are style guidelines for each language, but overall, most languages use liners and most Ides support auto-formatting.
For commonly used style guides for various programming languages, see the Language Guides. Google also has a style guide for many languages that are used in open-source projects originating out of Google.

The coding style is made up of numerous small decisions based on the language:

How and when to use comments,
Tabs or spaces for indentation (and how many spaces),
Appropriate use of white space,
Proper naming of variables and functions
Code grouping an organization
Patterns to be used,
Patterns to be avoided.

Example

Good Version

Indentation ensures a clear structure by properly indenting each block of code.
Spacing: There should be spaces around operators (+, =) and between method parameters for better readability.
Line Breaks: Each statement is on its line, making the code easier to follow.
Method Naming: Using more descriptive method names (such as addNumbers, printResult) is a good start, but you can further improve them by being more specific (for example, by using calculateSum and displayResult).
Comments: Added comments describing each method, helping others understand the code more easily.
In variable naming, num1, num2, and number are more descriptive than a and b, although there is potential for improvement in all cases.

See the difference! It’s amazing🤯

Conclusion ✅
The responsibility of measuring code quality is standing for each developer in the project from the team lead, developer, and tester.
You should always make code reviews to check your code quality and enhance it.
Applying code quality standards ensures your code readability and maintainability of all time, making it easier for developers to collaborate and understand each other’s code.
See you in the next part where we will learn more about tools to measure code quality and tips to improve our code

I hope that I can help you to understand this topic well. This checklist you can go back to it at any time.

That's it! Start to check your Code Quality! Connect with me on LinkedIn and GitHub for more articles and insights. If you have questions, contact me.
https://linktr.ee/rowan_ibrahim

Remember, "Later Equals Never." 😉

Flutter Overflow Fixes: Simple guide to overflow🚀

Rowan Ibrahem — Thu, 04 Jul 2024 19:05:43 +0000

Introduction ✍🏻

The distribution of elements on the screen makes the application look consistent. Today, we will focus on the topic of handling overflow errors.

Table of contents

1- What is overflow?

2- Types of overflow in flutter.

3- Text Overflow.

4- Conclusion.

What is overflow? 🤔

Knowing that there are different sizes of phones, we should ensure our application is responsive. Consequently, when the content exceeds the space on the page, it leads to overflow. This can lead to content being cut off or extending beyond its container, making the shape inaccurate.

There are several types of overflow in Flutter 📝

Text overflow.
widget overflow.
Flex overflow.
List overflow.
Overflow bar.
Scaffold overflow.

In today’s discussion, we will focus on text overflow.

What is text Overflow?🔎

Placing any text on the page results in different sizes, as we work with various device dimensions. Especially since the text won’t be alone, we’ll have images and icons. This can cause an overflow if the text size and the screen are small, creating a visual issue. Therefore, we need to ensure that the text size we choose is suitable for all devices and consistent with the overall design of our application.

Let’s see what Flutter offers to solve this problem.

There is a property in the Text widget called overflow, it controls what happens if the text exceeds the space that allows it and it takes other properties with it to show correctly.

Max lines property :

This sets the number of lines the text can span if its size exceeds the width of the screen, and it takes integer values.

Softwrap property:

This determines whether the text can wrap onto multiple lines or stay on a single line, and it takes a Boolean value.

False: means that if the text exceeds the screen width, it will not wrap to a new line.

True: means that if the text exceeds the screen width, it can wrap onto multiple lines as appropriate for the screen size.

Now let’s see the different values to overflow property and how can we use it!

Overflow.ellipses:
When an overflow occurs, I make the remaining text appear as dots (….).
overflow.visible:
Here it will make the text appear entirely even if it exceeds the container’s bounds, which can distort the page layout if there are other elements underneath. We should use it correctly according to our needs.
Overflow.fade:
Makes the text fade out gradually if it exceeds a specified space, ensuring it doesn’t abruptly cut off and potentially disrupt the page layout.
Overflow.clip:
Cuts off any extra text that exceeds the specified space, ensuring it doesn’t display beyond the container’s boundaries.
Overflow.values:
Displays a list of all possible values for the TextOverflow property.

Let’s take an example:

Here, if the text exceeds its bounds, I tell it to display on two lines. However, if it goes beyond these two lines, I instruct it to show “…..” at the end of the text, hiding the rest of it.

Now, with SoftWrap set to false, it means the text adjusts to the specified number of lines without any spaces. If we set it to true, it still adjusts to the specified number of lines but includes spaces between them.

In practice, there isn’t much difference between true and false because in both cases, if it exceeds two lines, it will display “…..”. However, this is just in appearance.

Remember, if you use maxLines alone without overflow, it will give you an error.

Output

So when do we use softWrap property?

We can use softWrap with text and set its value to true without specifying maxLines. In this case, the text will naturally wrap to fit the screen size, adapting to different device sizes. This is useful when displaying product descriptions, writing articles, or any paragraph.

If we set it to false, we ensure that the text does not wrap onto multiple lines and remains on a single line, which is useful for titles or labels.

For example:

Output

If I want the text to have scrolling, or if part of it should be truncated and moved to the next line, or even if it shouldn’t be displayed at all, then here I use overflow with maxLines. It’s preferable that softWrap be set to false.

Here’s the output for the examples we discussed before of overflow values.

Certainly, the text will typically be inside other widgets like Rows or Columns, and it will have a font size. Here, overflow can occur if the font size is large and the screen size is small.

Here, we can use Expanded and use overflow normally with it, and if we also set maxLines, it’s okay according to the desired layout.

Alternatively, using FittedBox with Expanded and setting fit: BoxFit.scaleDown, it adjusts the font size based on the screen size, scaling it down if it’s too large.

Here, if I set maxLines, it won’t do anything and will ignore it because fit continues to scale down the font size to keep it on one line.

Output

There’s another package called autosize_text:

It allows you to adjust the font appearance and specify a minimum font size so that it doesn’t shrink below a certain value. This package can be explored further for more details. Still, of course, it’s better to manually adjust the font size yourself to avoid reducing your application’s performance caused by additional packages.

https://pub.dev/packages/auto_size_text

Conclusion

You can follow different sequences to fix the overflowing text issue while preparing the UI for your Flutter app. Taking the help of the right team of experts should help you with the process.

And that’s how we handle Text Overflow. Remember to use each property according to your UI needs and how you’re building it. Insha’Allah, we’ll talk about the remaining types in other articles.

If there are any additions or other methods, remember to share them with us in the comments!🌟

Connect with me on LinkedIn and GitHub for more articles and insights. If you have questions, contact me.👀

https://linktr.ee/rowan_ibrahim

See you on the new topic!🌟

Crafting Clarity: A Journey into the World of Clean Code Code Needs Care!🤯

Rowan Ibrahem — Fri, 21 Jun 2024 19:26:18 +0000

Introduction ✍🏻
Do you spend countless hours fixing bugs in your code? Have you wondered why it takes so long?

Everyone can write code that computers understand. But, not everyone can write code that humans can easily read.

As software developers, understanding how to write clean code is essential. Let’s dive into the world of Clean Code.

Table of Contents
What is the clean code?
What causes bad code?
Why is clean code important?
Comparison Between Bad Code and Clean Code.
How Can We Determine if Our Code is Clean?
Principles of Clean Code.
Conclusion.

What is the clean code ?🤔
Writing clean code is a fundamental skill for every software engineer. Clean code is to write code that is well-organized, easy to read, understand, and maintain. Writing clean code allows others to read it without wasting time to understand it. Robert Cecil Martin made it popular. He has also gained popularity as Uncle Bob. He wrote “Clean Code: A Handbook of Agile Software Craftsmanship” in 2008.

In another sense, if three people have different experience levels, they can quickly understand the same code. It’s a clean code.

What causes bad code?
Consider this scenario: There’s a new project, and your manager gives you a tight deadline. You start coding, promising yourself to enhance it later. But you deliver the product quickly because of pressure from your manager and the customer. But, it’s poorly written. You will never return to improve it.

Oh, there is Leblanc’s law says:

“Later equals never.”

That means if you said you’d improve this later, you wouldn’t return to it.

Why is clean code important?
Let’s revisit a story from the “Clean Code” book to understand the importance of clean code. A company wanted to release a product quickly, resulting in poorly written code. When they tried to add more features, they found it almost impossible to make changes. The changes would break the existing functions and they lost all their money.

Clean code ensures that companies can add features quickly and without errors.

When we need to add more features or when someone contributes to complete with you, it will take a long time to read and understand it to fix old bugs and make new features.

When writing code implementation is simple, the difficulty is reading and debugging. That takes a long time.

Keeping code clean will give you the most value from your software. The right clean code tool can help you get there. Clean code makes debugging more efficient and unit testing easier.

A comparison between clean and badly written code.
The compiler will compile every code, clean or not. But not every code will be readable. Let’s take a look:

Can you see this?

You don’t need to understand. Let’s see first:

Bad code

Clean version

Even without understanding the code, do you see the difference? It’s formatting the code that makes the code easy to read and comfortable to the eye.

Let’s see another example, its login page contains an image and text field.

This is the same page but make every part as a small function.

Here, we make functions with clear names. They make the code shorter. If we want to fix any part, we can go right to it.

You will never know the importance of clean code. Even though you edit your code, you will say: “What a horrible thing I wrote.”🤯

How Can We Determine if Our Code is Clean?
Writing clean code is an art and a way of thinking. It’s like a craft that comes from knowledge and practice. Knowledge comes from knowing principles, patterns, and practice. So, you know this and use it in your code.

There is a Boy Scout rule that says:

“Leave the campground cleaner than you found it.”

That means we need to always check our code and enhance it. Every time we read it we will find that we can make it more cleanly.

In the book “Art of Clean Code,” they provide some questions we should ask ourselves to help us improve our code.

Can you consolidate files and modules to reduce interdependencies?
Can you divide large, complicated files into simpler ones?
Can you generalize code into libraries to simplify the main application?
Can you use existing libraries to reduce the amount of code?
Can you use caching to avoid recomputing results?
Are there more suitable algorithms for your tasks?
Can you remove premature optimizations that don’t improve performance?
Would another programming language be more suitable for your problem?

Principles of Clean Code.
Like a beautiful painting, clean code needs well-chosen colors and composition. It follows several principles. We will discuss each in later articles.

Meaningful and descriptive names.
Proper Indentation.
Short functions that do one thing.
The DRY (Don’t Repeat Yourself) Principle.
Avoid code duplication.
Establish code writing standards.

These principles are just a starting point; there are many more to explore and apply.

Conclusion :
“Coders spend the vast majority of their time reading old code to write new code. If the old code is easy to read, this will speed up the process considerably.”

If we write messy code, it will reduce productivity, even if we can make it productive and enjoyable while reading it. Clean code makes it easier to reduce errors and add features without being scared to have errors in another function.

By following this, you will become a professional developer, and always remember there are no limitations to making your code clean; you can make it better every time.

That’s it! Start now and begin writing clean code! Connect with me on LinkedIn and GitHub for more articles and insights. If you have questions, contact me.

https://linktr.ee/rowan_ibrahim

Remember, “Later Equals Never.” Start writing clean code today! 😉