-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (159 loc) · 13.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clean Code by Aboudi</title>
<meta
name="description"
content="What is good code and bad code. How to avoid writing bad code and future problems." />
<meta
name="keywords"
content="clean code, bad code, comments, mr. clean code, uncle bob, we hit those, aboudi" />
<link rel="icon" type="image/x-icon" href="./public/favicon.ico" />
<link rel="stylesheet" href="./styles/style.css" />
<link rel="stylesheet" href="./styles/header.css" />
</head>
<body>
<header>
<a href="/index.html">
<span>Aboudi</span>
</a>
<nav>
<a href="#home" class="active">Home</a>
<a href="#bad" class="none">Bad Code</a>
<a href="#clean">Clean Code</a>
<a href="#comment" class="none">Comments</a>
</nav>
<a
href="https://github.com./abedshaaban/clean-code-summary"
target="_blank">
<img
src="https://cdn-icons-png.flaticon.com/512/25/25231.png"
alt="github" />
</a>
</header>
<main>
<section id="home">
<h1>What makes a developer a good developer?</h1>
<div>
<img
src="https://pbs.twimg.com/media/EGlAi8JUcAAwdKE.jpg:large"
alt="bad code vs good code" />
<p>
Code bases can get a lot messy when you start adding features,
functionalities, and other pages. This will also result in a messy,
unorganized, and unclean code. Now imagine that and make your
project a Monorepo, you will cry. So to avoid that, I will share
with you some of the best practices, and tips, from Uncle Bob aka
Mr. Clean Code.
</p>
</div>
</section>
<section id="bad" class="s-blue">
<h2>What is Bad code?</h2>
<div>
<img
src="https://miro.medium.com/v2/resize:fit:1204/1*9ZgZsdrqxeuW6SKZ4c7Jnw.png"
alt="several if else statments" />
<span>
<p>
Bad code is also known as incomplete/messy code which a developer
cannot understand its usability or functionality. In some cases,
it would be the lack of use of good methods while writing code or
the lack of a good description/ documentation for the code or
system software.
</p>
<p>
In many cases bad code can result in deaths such as car system
failure, rocket software, industrial machines, ... . These
failures would result in loss of life due to bad code in some
cases or lack of testing. And the most concerning part is that our
society now in 2023, cannot run without software, banks,
companies, schools, governments, ... all need it to function
normally. Otherwise, they cannot do anything since everything is
on a server, a dedicated machine, or the cloud.
</p>
</span>
</div>
</section>
<section>
<h2>What makes bad code?</h2>
<div>
<img
src="https://mlsf03rmjfdn.i.optimole.com/cb:ZQCg.13949/w:800/h:600/q:mauto/ig:avif/f:best/https://www.wbscodingschool.com/wp-content/uploads/AdobeStock-by-studiostoks_99040936.jpeg"
alt="shocked person" />
<span>
<p>
Developers, developers make bad code due to their inconsistency
and unplan of their feature/ project. A simple feature such as a
search bar can take you 1-2 days to ship it to the end user.
However, when you do that every time and ship fast, your codebase
will lack documentation and readability. So adding a feature in
the next 2 years would take you 6 months since your codebase is
messy and changing one line of code may break the software. And as
developers make a mess, the team will go slower and slower.
</p>
<p>
But don't let the idea of adding more people to the project, be
that it will be much faster to build features. It is like adding
gasoline to a fire, They will have to understand the old messy
code and they work with it thus adding more messy code on top of
messy code. And that's how you get a killer code base. "The only
way to go fast is to go well."
</p>
</span>
</div>
</section>
<section class="s-pink">
<h2>What is clean code?</h2>
<div>
<img
src="https://media.geeksforgeeks.org/wp-content/uploads/20190907205229/structured1.png"
alt="short clean code" />
<p>
A code is clean when the code/ function does one thing well. "Code
that reads like well-written prose." It's when developers care about
other developers, so when you read the code you understand the
functionality of it, without the need of external help to figure out
what is happening. It is also when you read a code and turns out to
be pretty much what you expected.
</p>
</div>
</section>
<section id="clean">
<h2>Ethics of code</h2>
<div>
<img
src="data:image/jpeg;base64,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"
alt="code of ethics blocks" />
<ul>
<li>Function does 1 good thing.</li>
<li>Function less than 100 lines of code.</li>
<li>Understandable code.</li>
<li>Indent.</li>
<li>Max of 3 arguments a function can take.</li>
<li>Never pass a boolean to a function.</li>
<li>
Variable names should be inversely proportionate to the scope that
they are being used in.
</li>
</ul>
</div>
</section>
<section id="comment" class="s-yellow">
<h2>When to use Comments?</h2>
<div>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/CodeCmmt002.svg/300px-CodeCmmt002.svg.png"
alt="code comments" />
<p>
Comments are used when the code cannot explain itself. Every use of
a comment is a failure of writing good code that explains itself.
It's an unfortunate necessity and not a great achievement.
</p>
</div>
</section>
</main>
</body>
</html>