mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
chore: new blog post and small patches (#3)
* wip: blog post on open source * wip: initial draft of the blog post * chore: remove sharing a blog post * fix: broken style from previous commit * chore: improve handling keywords
This commit is contained in:
GitHub
@@ -68,8 +68,7 @@ body::-webkit-scrollbar-thumb {
|
||||
.arrow,
|
||||
.eye,
|
||||
.calendar,
|
||||
.clock,
|
||||
.share {
|
||||
.clock {
|
||||
stroke: var(--text);
|
||||
}
|
||||
|
||||
|
||||
@@ -20,14 +20,6 @@ main #metadata div span {
|
||||
column-gap: 0.25rem;
|
||||
}
|
||||
|
||||
main #metadata div #share {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main #metadata #share {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main #content ul,
|
||||
main #content ol,
|
||||
main #content .highlight {
|
||||
@@ -59,8 +51,4 @@ main #content .highlight pre {
|
||||
main #metadata div {
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
|
||||
main #metadata div #share {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path class='share' d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class='share' d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class='share' d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class='share' d="M8.59003 13.51L15.42 17.49" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class='share' d="M15.41 6.51001L8.59003 10.49" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: "The Importance Of Contributing To Open Source"
|
||||
description: "How I started contributing to open source projects? And what can software engineers learn and benefit from doing so?"
|
||||
keywords: ["Open Source", "Contribution", "Software Engineering", "Software Development", "Computer Science", "Experience"]
|
||||
date: 2025-05-15
|
||||
---
|
||||
|
||||
I recently started contributing to open source projects that I was using because I wanted to give back to those projects since they provide utilities I use on a daily basis either at work or on personal matters.
|
||||
|
||||
## What Will You Learn And Benefit As A Software Engineer?
|
||||
|
||||
Working on an open source project is similar to working on a project at a company. Since each project usually has a team of dedicated maintainers, resembling senior developers or tech leads, who review pull requests and merge them, are responsible for releases of the project and are responsible for its future direction by having a roadmap for example.
|
||||
|
||||
Even though an open source codebase had many people contribute to it over the time, it is usually very well documented so it is fairly easy to get a big picture understanding of a project by reading the documentation. You can find documentation on the architecture, the directory structure of the codebase, project specific concepts or "business logic". Also, you will always find guides on how to contribute, report bugs and how to install, run and debug the project on development mode. And if you get stuck, there are places where you can chat with fellow contributors or maintainers to get clarification or help.
|
||||
|
||||
Therefore working on an open source project gives you experience in par with working at a company if not better. Because you will have to be truly autonomous with choosing what to work on, take the initiative and communicate with other people working on the project, and most importantly get deep into a new codebase and figure stuff out on your own for the most part.
|
||||
|
||||
Another advantage is that you get to choose what project to work on and even what part of a project. This gives you the freedom and desire to learn about the processes of software engineering other that developing a project like deployment, testing and documentation. Not like in a company where you are tied to the position you got hired to do and even if you want to get into another area in a company project in my experience you will either slow the team down and potentially miss deadlines or you are denied access entirely.
|
||||
|
||||
## How To Get Started?
|
||||
|
||||
Don't stress it out and just pick a project you use and find interesting. Look for any beginner friendly issues like bugs or small improvements. Then get to the documentation and read it thoughouly to be on the know on any rules set by the project creator(s), get familiar with installing the project and running it in development mode, and know where the communications channel are to reach the team. Lastly, get to the codebase and start working on the thing you have chosen to do and eventually get it done and open a pull request.
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
title: "You Don't Always Need Docker!"
|
||||
description: "Why using docker and other abstractions hinders your ability to learn about system administration, performance and security and makes you use services that are expensive solutions for your small or personal projects."
|
||||
date: 2025-04-16
|
||||
publishDate: 2025-04-16
|
||||
---
|
||||
|
||||
## What Even Was My Problem With Docker?
|
||||
|
||||
My problem with Docker and the insights I am coming up with in this post came when I was working on this project called [Touch Programming](https://github.com/hazemKrimi/touch-programming) which is in a gist a small web application that gets AI generated code (more plagiarized than generated) in a programming language chosen by the user then the frontend uses that code for a typing test.
|
||||
|
||||
The AI part is basically an API taking the language name from the frontend and then feeding that to an "engineered" prompt which itself is fed to an LLM managed by [Ollama](https://ollama.com) through [LangChainGo](https://tmc.github.io/langchaingo/docs) (I was learning Golang through this project). Here is a small diagram showecasing the architecture:
|
||||
|
||||
|
||||
|
||||
I was not able to deploy the whole stack in a single dockerfile so I tried using docker compose and multiple dockerfiles for each part of the stack and that also was not successful. The problem was connecting the API to Ollama since they are deployed in separate containers.
|
||||
|
||||
I admit that I have skill issues when it comes to Docker and I could have made it work if I put more time into it but I had this idea pop up: "Since this is a small personal project why not deploy it directly?". And then I discovered [Dreams of Code Video on deployment without Docker](https://www.youtube.com/watch?v=DmbBgXK8M5M) and used it as a reference.
|
||||
|
||||
This resolved the issue I had connecting the API to Ollama since I only had to install the model on my instance and run the API executable that is compiled. And even more I got to learn about how t to create servers and proxies using Nginx, how to run executables as services using Systemd and even automate the deployment process using GitHub Actions.
|
||||
|
||||
## There Are Too Much Abstractions!
|
||||
|
||||
My deployment process is not fully straight forward since I had to manage and secure my VPS through limiting privileges to users, Create Nginx configs and Systemd service units and place them in the appropriate location with the correct user ownership along other stuff I needed to do to eventually make the deployment automatic whenever I push a change to my Git repo.
|
||||
|
||||
Through my decision to deploy directly in the host OS of my VPS I discovered that I am lacking fundamental knowledge when it comes to Linux and system administration which made me not understand the value of Docker and why it came to be and made me usually use it in cloud services that abstract away the prep work you need to do to deploy you programs.
|
||||
|
||||
Docker and cloud services and now AI have their merits especially in their ease of use and ease of learning but relying on them solely produces mediocre software engineers who get stuck more quickly and more frequently and more importantly produce unperformant and unsecure programs.
|
||||
|
||||
## How To Get The Ability To Cope With The Abstractions?
|
||||
|
||||
In my opinion abstractions are still good but developers need to know the underlying infrastructure and the problems that where the reasons for introducing those abstractions. And one of the ways to get the proper knowledge is to build stuff from scratch and to try the old and not conventional anymore ways to deploy your programs.
|
||||
|
||||
This will make us able to understand how these tools work and even how to improve upon them and bring new solutions that improve the process of software engineering.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
@@ -16,7 +16,7 @@ enableRobotsTXT = true
|
||||
[params]
|
||||
dateFormat = '02 January 2006'
|
||||
defaultDescription = 'Personal website of Hazem Krimi'
|
||||
defaultKeywords = 'Hazem Krimi, Software Engineer, Software Developer, Full Stack Developer, JavaScript, TypeScript, React.js, Node.js, Scala, Kotlin, Corda, SQL, GraphQL, MongoDB'
|
||||
defaultKeywords = ['Hazem Krimi', 'Software Engineer', 'Software Developer', 'Full Stack Developer', 'JavaScript', 'TypeScript', 'React.js', 'Node.js', 'Go', 'Golang', 'Scala', 'Kotlin', 'SQL', 'GraphQL', 'MongoDB', 'Corda']
|
||||
[params.author]
|
||||
email = 'me@hazemkrimi.tech'
|
||||
name = 'Hazem Krimi'
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
{{ $partialsStyles := resources.Get "css/partials.css" | toCSS | minify }}
|
||||
{{ $baseScripts := resources.Get "js/baseof.js" | js.Build | minify }}
|
||||
{{ $mobileNavigationScripts := resources.Get "js/mobile-navigation.js" | js.Build | minify }}
|
||||
{{ $contactFormScripts := resources.Get "js/contact-form.js" | js.Build | minify }}
|
||||
|
||||
{{ $androidChromeIcon := resources.Get "android-chrome-192x192.png" }}
|
||||
{{ $appleTouchIcon := resources.Get "apple-touch-icon.png" }}
|
||||
@@ -28,7 +27,7 @@
|
||||
>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="{{ if .Params.keywords }}{{ .Params.keywords }}{{ else }}{{ .Site.Params.defaultKeywords }}{{ end }}"
|
||||
content='{{ if .Params.Keywords }}{{ delimit .Params.Keywords ", " }}{{ else }}{{ delimit .Site.Params.defaultKeywords ", " }}{{ end }}'
|
||||
>
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta property="og:title" content="{{ .Page.Title }} | Hazem Krimi">
|
||||
@@ -66,7 +65,6 @@
|
||||
|
||||
<script defer src="{{ $baseScripts.Permalink }}"></script>
|
||||
<script defer src="{{ $mobileNavigationScripts.Permalink }}"></script>
|
||||
<script defer src="{{ $contactFormScripts.Permalink }}"></script>
|
||||
{{ block "scripts" . }}{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
@@ -80,4 +78,4 @@
|
||||
{{ partial "footer.html" . }}
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -14,15 +14,6 @@
|
||||
<div>
|
||||
<span>{{ readFile "assets/icons/calendar.svg" | safeHTML }} {{ .Date.Format .Site.Params.dateFormat }}</span>
|
||||
<span>{{ readFile "assets/icons/clock.svg" | safeHTML }} {{ printf "%d minute(s) read" .ReadingTime }}</span>
|
||||
<span
|
||||
id="share"
|
||||
data-title="{{ .Title }}"
|
||||
data-description="{{ .Params.description }}"
|
||||
data-url="{{ .Permalink }}"
|
||||
>
|
||||
{{ readFile "assets/icons/share.svg" | safeHTML }}
|
||||
Share
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -35,15 +26,4 @@
|
||||
|
||||
{{ partial "table-of-contents.html" . }}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.querySelector('#share').addEventListener('click', async event => {
|
||||
await navigator.share({
|
||||
title: event.target.getAttribute('data-title'),
|
||||
description: event.target.getAttribute('data-description'),
|
||||
url: event.target.getAttribute('data-url'),
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<a
|
||||
class="read-more"
|
||||
href="{{ if (.InSection ($.Site.GetPage "projects")) }} {{ .Params.source }} {{ else }} {{ .Permalink }} {{ end }}"
|
||||
target="{{ if (.InSection ($.Site.GetPage "projects")) }} _blank {{ else }} _self {{ end }}"
|
||||
target="{{ if (.InSection ($.Site.GetPage "projects")) }}_blank{{ else }}_self{{ end }}"
|
||||
>
|
||||
{{ if (.InSection ($.Site.GetPage "projects")) }}
|
||||
Source code {{ readFile "assets/icons/arrow.svg" | safeHTML }}
|
||||
|
||||
Reference in New Issue
Block a user