DEV Community: Abdulrahman Sakah

Writing Clean and Maintainable Code: A Guide to Organized, Readable, and Efficient Programming

Abdulrahman Sakah — Sat, 17 Jun 2023 18:48:20 +0000

Introduction

I think the thumbnail of this posts describes why writing clean and maintainable code is important.

In the world of software development, writing code is only the beginning. The ability to write clean and maintainable code is the ultimate mark of a professional developer. Clean code is not only aesthetically beautiful; it also provides several benefits such as improved readability, simpler debugging, effective collaboration, and long-term code maintainability. In this post, we will discuss the necessity of developing clean and maintainable code as well as practical recommendations on code structure, naming standards, documentation, and code refactoring.

The Importance of Clean and Maintainable Code

Readability and comprehension: Clean code is simple to read and comprehend. It uses uniform formatting, meaningful names, and patterns that are well-structured. Such code allows developers to rapidly comprehend its goal, resulting in less debugging time and more productivity.
Code Upkeep: Well-maintained code is simpler to adapt and update. By developing clean code, you provide the groundwork for future modifications, lowering the chance of introducing new problems or unexpected behavior. This keeps your codebase nimble and adaptive to changing requirements.
collaborating and Scalability: Clean coding encourages successful team cooperation. Clean and consistent coding principles guarantee that everyone can readily understand and contribute to the project when different developers work on the same codebase. Furthermore, clean code is scalable, allowing for the addition of new features without introducing cascading difficulties throughout the system.

Practical Tips for Writing Clean and Maintainable Code

There are various practical strategies for developing clean and maintainable code that may greatly enhance the quality of your codebase. Let's take a closer look at these hints.

Code organization is critical to keeping clean code. One efficient method is to divide your code into modular components or functions, each of which handles a specific duty. This increases not just code reusability but also readability and testability. Along with modularization, a well-defined directory structure is essential. You establish an easy-to-navigate and understandable structure by grouping your code files into relevant folders and using consistent naming conventions.

Another important part of designing clean code is using Naming Conventions correctly. Variables, functions, classes, and modules must all have meaningful and self-explanatory names. By using meaningful names, you improve the readability and self-documentation of your code. Consistency is also crucial since it creates familiarity and allows engineers to easily explore the source.

Documentation is an essential part of writing clean, maintainable code. You make your code more understandable to others by giving explicit explanations, inline comments, and documentation for APIs and methods. Inline comments can be used to clarify difficult reasoning, assumptions, and potential problems. API documentation tools such as Javadoc or Doxygen may be quite useful in describing the public interfaces of your programs, including input/output information and use examples.

Code refactoring is a continuous activity that assures your codebase's maintainability. Examine your code on a regular basis for any code smells or anti-patterns, such as duplicated code, lengthy procedures, or excessive nesting. You increase code readability, testability, and maintainability by rearranging these portions into smaller, more manageable, and reusable components. Another effective method for producing clean code is test-driven development (TDD). You may develop clean code from the outset, confirm the validity of your code, and drive smarter design decisions by writing tests before introducing functionality.

You may design a codebase that is not only visually beautiful but also efficient, legible, and adaptable to future changes by following these practical recommendations for creating clean and maintainable code. Pursuing clean code results in increased productivity, decreased debugging time, and a more pleasurable work experience. Remember that clean code is an investment in the long-term maintainability and success of your projects, not merely a question of aesthetics.

Conclusion

It is critical for efficient and effective software development to write clean and maintainable code. Developers may lay a solid basis for their projects by applying practical advice such as code structure, naming standards, documentation, and code refactoring.

Clean code improves comprehension, encourages cooperation, and makes maintenance easier. It increases productivity, decreases debugging time, and promotes scalability. Investing in clean code is an investment in a project's long-term success.

In conclusion, promoting clean and maintainable code benefits both engineers and the whole software development process. It increases readability, promotes cooperation, simplifies maintenance, and boosts efficiency. Adhering to clean code standards is critical for developing resilient and extensible codebases.

Create a simple React blog with WordPress

Abdulrahman Sakah — Sat, 29 Jan 2022 14:03:36 +0000

I have wanted to create a development blog for the longest time now and I have tested a lot of methods from creating everything from scratch to using a CMS but I knew that I wanted the front end to be built with react and to look good and none of the solutions that I tried were good enough for me until today.

I found this library called Frontity which would connect to WordPress’s REST API and it would get everything you need from there, it is really simple to use and requires none too little setup to be able to start the blog.

The setup

Why reinvent the wheel and build a new CMS where we already have WordPress which is amazing and open source?

It is just as easy as running the command

$ npx frontity create <app-name>

After running this command you would get to choose from 2 themes, mars and WordPress’s 2020 theme I choose to go with the mars theme because that is what I was looking for but you can go with any and there are even themes online you can choose or just build your own.

After you initiate the project you just have to set up the pointing to WordPress, so if you go into your project directory and edit the file frontity.settings.js there you will have to edit 2 values

    const settings = {
      "name": "my-first-frontity-project",
      "state": {
        "frontity": {
          "url": "https://test.frontity.org/",
          "title": "Abod's blog",
          "description": "A look into my brain 🧠"
        }
      },
      "packages": [
        {
          "name": "@frontity/mars-theme",
          "state": {
            "theme": {
              "menu": [
                [
                  "Home",
                  "/"
                ],
                [
                  "Portfolio",
                  "https://abodsakka.xyz/"
                ]
              ],
              "featured": {
                "showOnList": true,
                "showOnPost": true
              }
            }
          }
        },
        {
          "name": "@frontity/wp-source",
          "state": {
            "source": {
              "url": "https://test.frontity.org/"
            }
          }
        },
        "@frontity/tiny-router",
        "@frontity/html2react"
      ]
    };

and change https://test.frontity.org/ to your own domain or you can just leave the same for now to just see test it out, but these links are where frontity is going to try to contact the WordPress REST API to get the information needed as posts, tags, authors and such.

You can now run the website by typing

$ npx frontity dev

That is how simple it is to create your blog with WordPress as a headless CMS.

For me instead of hosting my own WordPress intense on my server i just use 000webhost but you can use what ever you want and then so that people wont be able to get to the front end of my website i just created a new folder in the public_html/wp_content/themes/ directory and created 2 files in there for wordpress to know it is a theme, style.css and index.php. I left the style.css empty but populated the index.php with a redirect script

<?php
    header( "Location: https://blog.abodsakka.xyz" );
?>

So now everytime someone tries to get to my WordPress front end they are going to be redirected to the React app instead.

Addons

Prismjs

As a developer, I like to post some code snippets into my blog from time to time and I think all developers could agree that syntax highlighting is a good thing to have for readability so I wanted to use Prism.js with it.

It was just as simple as installing Prism.js with npm or yarn

$ npm i prismjs
    or
$ yarn add prismjs

and then in my <project>/packages/mars-theme/src/post.js i just added

import Prism from "prismjs";

And then added all the languages that I would want to use, for intense

import "prismjs/components/prism-typescript"

And the same thing for the plugins

import "prismjs/plugins/line-numbers/prism-line-numbers"

And now in order for Prism engine to run we have to create a use Hook which is called in the Post function

useEffect(() => {
    Prism.highlightAll();
}, []);

This is not going to take effect with the normal wordpress code block so I use an addon

Done !

Cookie consent

With today’s GDPR we have to tell the user that we are using cookies on this website so how would we set it up? I am using a react library called react-cookie-consent and it is just as simple as installing it with

$ npm i react-cookie-consent
    or
$ yarn add react-cookie-consent

Importing it to our <project>/packages/mars-theme/src/index.js

import CookieConsent from "react-cookie-consent";

And then adding it at the bottom of out Theme function

    <CookieConsent
              location="bottom"
              buttonText="Got it!"
              cookieName="myAwesomeCookieName2"
              style={{ background: "#2B373B"}}
              buttonStyle={{ color: "#fff", backgroundColor: "#1f38c5", fontSize: "24px" }}
              expires={150}
            >
              This website uses cookies to enhance the user experience.{" "}
    </CookieConsent>

And that is it, now you will have a cookie consent screen on your website that easy.

Hope this was useful and thanks for reading!

Devlog #2: Small update

Abdulrahman Sakah — Sun, 22 Aug 2021 11:37:06 +0000

This is a short post about the improvements i made working on building my own CMS.

1. Added everything to one project

So before the admin panel and the blog was divided into two separate projects but now I have integrated both of them into one project so that now everything is tidier than before.

Now the project structure looks as so

.
├── cron jobs
├── debug
│   └── debug.log
├── index.js
├── node_modules
│   └── ...
├── package.json
├── package-lock.json
├── public
│   ├── css
│   │   └── ...
│   ├── fonts
│   │   └── ...
│   ├── images
│   │   └── ...
│   └── js
│       └── ...
├── README.md
├── routes
│   ├── blog.js
│   └── dashboard.js
├── src
│   ├── blogHandler.js
│   ├── getPosts.js
│   └── validateUser.js
└── views
    ├── admin
    │   ├── addons
    │   │   └── ...
    │   └── pages
    │       └── ...
    └── blog
        ├── addons
        │   └── ...
        └── pages
            └── ...

You can see now that there is a index.js file in the root folder and that is the server file and then in the index.js routes are defined for the blog and the admin panel where you can access the admin panel by going to abodsakka.xyz/login now instead of admin.abodsakka.xyz before.

2. started adding stats to the dashboard

As you can see now the dashboard has the amounts of posts that are posted and I am working on adding more stats but trying to figure out what to add and to integrate google analytics with the application.

Another thing you can see is a preview of how the user's profile picture would look like.

3. stability

In this update, I also worked a lot on improving stability were implemented a system to catch all errors and save them so that they are not only in the terminal and it displays the time that error was caught on so that debugging could be much easier.

First week in my first internship

Abdulrahman Sakah — Fri, 06 Aug 2021 21:14:17 +0000

So as I said in a post before that I had an interview for an internship I am doing with an Austrian company called Beeanco and now that I have got the job and this week is my first week I am going to talk about my experience.

What is Beeanco?

So from what I understood Beeanco is a software as a service platform where it links sellers with customers so that a customer can shop environmentally friendly where it showed the customer everything they need to know about the seller and the product.

What I am doing ?

My role in the company is as a full-stack engineer where I work with some front-end and back-end tasks depending on what needs to be done.

Now that we got the Q&A that I can think of a way let's talk about how it all went.

So after the interview, I got an email where they thanked me for coming to the interview and them saying that they were really impressed by my skills so they want to offer me the position and I had to sign an NDA to not leak any details about what I am working with or any company secretes (So don't ask for it).

after that, I had another meeting where we went through the order of stuff in the company and all the communication channels that we use and I even got added to the Github repo so I can start work.

This being my first "real" job as a full-stack developer I was and still am a bit lost because I am used to working alone where I know how everything works and don't need to write comments and such because I am the only one who is going to see the code (I know that is not good practice but I am self-taught so give a break). So working with a company and with a team is a new thing for me and I am really excited about this because this is going to be something that I am going to gain a lot of experience from and that is going to help me in my professional life a lot.

I am going to keep updating my journey through this internship whenever something interesting happens so anyone who is reading and is new to programming can also learn with me and take some notes.

Devlog #1: Creating a node.js mysql CMS

Abdulrahman Sakah — Sat, 24 Jul 2021 16:39:21 +0000

Intro ▶️

So for the past few days, I have been working on creating a new blog and as every new blog needs a CMS. I decided to make my blog with MySQL as a database but it was a bit hard to find a nodejs MySQL CMS that I like. I tried forest Admin because it looked like the thing I was looking for but because I am not the one developing it I thought it was pretty limited when it came to customisation so I decided to make my own CMS from the grounds up, And this is going to be my journey of making and developing this CMS.

Page parts 💻

login 🗝

So the most important thing is a secure admin login to be secure the blog from anyone else and SQL injections so that is the first thing I started with

So as you see the login page is fairly simple and only takes an email and password where the data is sent and validated. The password is validate and encrypted with bcrypt so that is nearly impossible to decrypt the password hash without knowing the password it self.

Dashboard 🚪

For now, the dashboard is still empty and there is nothing in it but what I am planning is to put stats about the page visitation and posts reactions (if i decide to add reactions).

Post creation and editing 🛠

The thing that I needed the most was a rich text editor that passes my uses and that was the main reason I didn't like a lot of the pre-made CMS:s for nodejs and MySQL. But I didn't want to build a rich text editor from the start so I decided to look if there was a pre-made open source one and after hours of looking for the perfect rich-text editor and looking throw a lot I finely found the perfect one TinyMCE which was perfect and customisable and has a lot of plugins that i need like code samples and pictures.

What I am planning to add more

formated tag editor
image uploading
dark theme for the code sample

The articles list 📄

The article list was fairly simple to implement where I just created a table and then for each article from the database it just inserts a new row and then you can either edit or delete the article (If you have suggestions for more actions just let me know because i can't come up with anything).

And yah I just realised I forgot to change the "Dashboard" text in the top and i am going to do it.

Conclusion 🔚

So what I am planning to do is that I see that I did good work with developing this CMS and I add enough futures to it then I am going to release it as an open-source CMS for Nodejs and MySQL.

I am going to continue the work on it and try to make it CMS as Wordpress or joomle and not only for blogs but for any type of website.

How i went from a highschool student to an entrepreneur to taking care of one government website development📈

Abdulrahman Sakah — Thu, 22 Jul 2021 14:58:28 +0000

So first of all you might be asking your self, who the heck is he?

Well that understandable after all this is my first blog post. So my name is Abdulrahman Sakah (or "abdul" "abbe", "abod" for short) and i am software engineeringering student in sweden.

My start 🏁

So i got my intresset in programming when i was around 10 where i was working with moding Minecraft and then i was really interested on how things work under the hood, so i started looking on Youtube how Minecraft is made and i found a video of an interview with Notch. The way he just changed stuff in the game with code and created something from nothing impressed me. Since then i knew what i want to do with my life.

I started to learn about programming and o found Unity 3D engine so i taghut my self C# to be able to program my own game and i made alot of games that only i got to play until i made my own game that i really liked it was called blow it up and it was for a gamejam. I wanted to advertise the game and i knew that if someone is going to look they want to see a website so i started working with html and css and i loved it.

My begning into real programming 🛫

After learning html and css a couple of years went by without working with them and i put all my focus on a game i was working on called way of war (wich i lost in the end due to file corruption) but anyways while i am in highschool i choose to study programming and we had C# as our language.

Since the first lesson when i looked into the book i went to the teacher and was like "this book is nothing for me, dont you have anything harder?" And her replied by giving me a test to see my skills from the first lesson.
When i was done with the test and he looked at it he told me that this course is not for me and my programming skills are much higher then this course and i have a A in the course. But they needed a book handleing system for the school so he gave me the task to make a book handeling system so the teacher knows what student has what book and so i created bookly in java.

That was when i was introduced to SQLite and backend development and i loved it.

So o decided to work more with backend and fronend development so i choose to learn JavaScript so i can work with that.

The first job 🖥️

After a year of learning js and mysql a friend of my wanted to open his own barbershop and he was telling me how he wanted a website so i offered him to make him the website for free and he just has to pay for the domain and hosting.

After me creating the website alot of customers loved it and loved how people can directly book appointments on the website so in the summer of 2019 i started receiving alot of calls of people wanting thier own websites and as i newbie in the market i knew 2 things. First i cant ask for high prices from begning and secound how to build a name. And that is thanks to my dad who owned his own company in Kuwait and built it from the ground up to be the one of the bigest design and signs company in Kuwait.

The first website i got to build in exchange for money i made it for 500 sek or 50 usd and that is nothing and it was a big project where i had to make a e-commerce website with online payment and all.

After working with multiple customers on low prices and decided to up my prices so i started charging a couple of hunder dollars for a website depending on the complexity.

In the end when it came to choosing my University profession i knew i wantee to continue with this so i chose software engineering because it is not only web development but alot more and it had a broder aspect to study.

Starting uni 📚

Now i am in my secound year but studying in uni taught me alot of stuff like complex database development, UML planing, unit testing and more and these are stuff that i going to use in my next chapter.

But one thing that i am sad about is not being able to continue my bussnies because running a business is not easy and it takes alot of your time from meeting with customers to working to calculating taxes, so was not balance between studying and running my own bussnies.

Working with the government 🛃

During this summer, the summer of 2021 a municipality in sweden hit me up about needing someone to care of thier website and develop it for them and they just needed this as a summer job so that i could take care of some stuff.

So i started working with them and they loved the ideas and technologies that i introduced to their website so i got a offer of working hourly with them. But for some reason i didn't like it and that is due to thel working with Wordpress and i like to do everything with code so I thanked them for the opportunity but told them i got to focus on my studies.

Now 👨‍💻

Now i just got a internship offer in a German company to work on their website that is built on nodejs and express.

I made it clear for them that i have to focus on my studies so I am going to prioritize that and that i can only work im distance and they agreed so i have an interview with them tomorrow so if all goes well i might do a weekly series on working as an intern with that company.

So how i did it ?🤔

There are a couple of things that helped to get to this point but the most important thingst hat you have to focus on is.

1- build your self a reputation either by working for people or building open source projects and publish them so that you can show stats. This would show people that want to hire you what other people think about you.

2- Build your portfolio, small things like a JavaScript calculator or a application that uses a REST API would be really useful and in an other post i will talk about things that you can build to build up your portfolio.

3- It is not the quantity, rather the quality. Inseated of learning a lot of languages focus on learning one language really good until you feel like you can build anything with it.

I really hope that this was a nice read and that you enjoyed it. And please i am new to this so if there is any points of improvement just let me know, I am open for all feedback :)