├── .gitignore ├── blog ├── blog.json ├── firefox-vs-chrome-memory-usage.md └── how-to-create-a-node-cli-and-publish-it-to-npm.md ├── img ├── logo.png ├── avatar.jpg ├── favicon.png ├── logo-sm.png ├── node-cli.jpg ├── arabic-books.jpg ├── chrome-vs-firefox.jpg ├── skill-vs-certificate.jpg ├── googlescholar.svg └── researchgate.svg ├── arabic ├── arabic.json ├── بين-الشهادة-والكفاءة-في-عصر-الأنترنت-والعمل-الحر.md └── غربة-اللغة-العربية-بين-أبناءها.md ├── font ├── fontello.eot ├── fontello.ttf ├── fontello.woff ├── fontello.woff2 ├── dubai-regular.ttf └── fontello.svg ├── .eleventy.js ├── css ├── blog.css ├── post.css ├── index.css ├── style.css └── fontello.css ├── package.json ├── blog.njk ├── arabic.njk ├── filters.js ├── .github └── workflows │ └── deploy.yml ├── _includes ├── post.njk └── layout.njk └── index.njk /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | node_modules -------------------------------------------------------------------------------- /blog/blog.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "post.njk", 3 | "tags": "post" 4 | } -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/logo.png -------------------------------------------------------------------------------- /img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/avatar.jpg -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/favicon.png -------------------------------------------------------------------------------- /img/logo-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/logo-sm.png -------------------------------------------------------------------------------- /img/node-cli.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/node-cli.jpg -------------------------------------------------------------------------------- /arabic/arabic.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "post.njk", 3 | "tags": "arabicPost", 4 | "rtl": "true" 5 | } -------------------------------------------------------------------------------- /font/fontello.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/font/fontello.eot -------------------------------------------------------------------------------- /font/fontello.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/font/fontello.ttf -------------------------------------------------------------------------------- /font/fontello.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/font/fontello.woff -------------------------------------------------------------------------------- /font/fontello.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/font/fontello.woff2 -------------------------------------------------------------------------------- /img/arabic-books.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/arabic-books.jpg -------------------------------------------------------------------------------- /font/dubai-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/font/dubai-regular.ttf -------------------------------------------------------------------------------- /img/chrome-vs-firefox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/chrome-vs-firefox.jpg -------------------------------------------------------------------------------- /img/skill-vs-certificate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/mokhnache.com/master/img/skill-vs-certificate.jpg -------------------------------------------------------------------------------- /.eleventy.js: -------------------------------------------------------------------------------- 1 | const {formatDate, formatArabicDate} = require('./filters'); 2 | 3 | module.exports = function(eleventyConfig) { 4 | eleventyConfig.addFilter("formatDate", formatDate); 5 | eleventyConfig.addFilter("formatArabicDate", formatArabicDate); 6 | }; -------------------------------------------------------------------------------- /img/googlescholar.svg: -------------------------------------------------------------------------------- 1 | 2 | Google Scholar icon -------------------------------------------------------------------------------- /css/blog.css: -------------------------------------------------------------------------------- 1 | .blog--rtl { 2 | direction: rtl; 3 | } 4 | 5 | .blog__posts { 6 | list-style: none; 7 | padding: 0; 8 | } 9 | 10 | .blog__post { 11 | padding: 1rem 0; 12 | } 13 | 14 | .blog__post-title { 15 | font-size: 2.2rem; 16 | } 17 | 18 | .blog__post-title:hover { 19 | color: var(--color-link); 20 | transition: color var(--transition-delay); 21 | } 22 | 23 | .blog__post-date { 24 | color: gray; 25 | font-size: 0.9em; 26 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "11ty.mokhnache.com", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "eleventy --serve --formats=njk,css,md,jpg,png,eot,otf,svg,ttf,woff,woff2", 8 | "build": "npx @11ty/eleventy --formats=njk,css,md,jpg,png,eot,otf,svg,ttf,woff,woff2" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@11ty/eleventy": "^2.0.1" 15 | }, 16 | "engines": { 17 | "node": ">=20" 18 | } 19 | } -------------------------------------------------------------------------------- /blog.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 'layout.njk' 3 | title: Blog 4 | --- 5 | {% block css %} 6 | 7 | {% endblock %} 8 | 9 |
10 |

Blog

11 | 19 |
-------------------------------------------------------------------------------- /arabic.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 'layout.njk' 3 | title: المدونة العربية 4 | --- 5 | {% block css %} 6 | 7 | {% endblock %} 8 | 9 |
10 |

المدونة العربية

11 | 19 |
-------------------------------------------------------------------------------- /filters.js: -------------------------------------------------------------------------------- 1 | const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 2 | const arabicMonths = ['جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان', 'جويلية', 'أوت', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر']; 3 | 4 | module.exports.formatDate = function(date) { 5 | const year = date.getFullYear() 6 | const month = date.getMonth() 7 | const day = date.getDate() 8 | return `${day} ${months[month]} ${year}` 9 | } 10 | 11 | module.exports.formatArabicDate = function(date) { 12 | const year = date.getFullYear() 13 | const month = date.getMonth() 14 | const day = date.getDate() 15 | return `${day} ${arabicMonths[month]} ${year}` 16 | } -------------------------------------------------------------------------------- /css/post.css: -------------------------------------------------------------------------------- 1 | .post { 2 | padding-bottom: 5rem; 3 | } 4 | 5 | .post__title { 6 | margin: 4rem 0; 7 | } 8 | 9 | .post__content { 10 | font-size: 1.9rem; 11 | line-height: 1.8; 12 | text-align: justify; 13 | } 14 | 15 | .post__content a { 16 | color: var(--color-link); 17 | } 18 | .post__content a:hover { 19 | border-bottom: 1px solid var(--color-link); 20 | } 21 | 22 | .post__content img { 23 | max-width: 100%; 24 | } 25 | 26 | .post__content .image-caption { 27 | text-align: center; 28 | font-size: 0.6em; 29 | margin-top: -2rem; 30 | } 31 | 32 | .post__content table { 33 | width: 100%; 34 | border-collapse: collapse; 35 | } 36 | 37 | .post__content tr, 38 | .post__content th { 39 | border-bottom: 1px solid #333; 40 | } -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | .homepage { 2 | align-items: center; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | height: 100%; 7 | text-align: center; 8 | } 9 | 10 | .homepage__avatar { 11 | align-items: center; 12 | border-radius: 50%; 13 | display: flex; 14 | justify-content: center; 15 | overflow: hidden; 16 | } 17 | 18 | .homepage__avatar img { 19 | height: 12.8rem; 20 | width: 12.8rem; 21 | } 22 | 23 | .homepage__headline { 24 | font-weight: 400; 25 | margin: 30px 0px 0px 0px; 26 | } 27 | 28 | .homepage__social-icons { 29 | align-items: center; 30 | display: flex; 31 | font-size: 2.4rem; 32 | gap: 0.2rem; 33 | justify-content: center; 34 | } 35 | 36 | .homepage__social-icons a { 37 | align-items: center; 38 | border-bottom: none; 39 | display: inline-flex; 40 | } 41 | 42 | .homepage__social-icons img { 43 | color: var(--body-color); 44 | max-height: 24px; 45 | padding: 0px 4px; 46 | } 47 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | jobs: 8 | deploy: 9 | name: Deploy to VPS 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | # Step 1: Check out the repository 14 | - name: Checkout Code 15 | uses: actions/checkout@v3 16 | 17 | # Step 2: Deploy via SSH 18 | - name: Deploy via SSH 19 | env: 20 | SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} 21 | VPS_USER: ${{ secrets.VPS_USER }} 22 | VPS_HOST: ${{ secrets.VPS_HOST }} 23 | APP_PATH: ${{ secrets.APP_PATH }} 24 | run: | 25 | # Set up SSH 26 | mkdir -p ~/.ssh 27 | echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa 28 | chmod 600 ~/.ssh/id_rsa 29 | ssh-keyscan -H $VPS_HOST >> ~/.ssh/known_hosts 30 | 31 | # Restart the app using PM2 32 | ssh $VPS_USER@$VPS_HOST " 33 | . ~/.nvm/nvm.sh && 34 | cd $APP_PATH || git clone https://github.com/Abdelaziz18003/11ty.mokhnache.com.git $APP_PATH && 35 | cd $APP_PATH && 36 | git pull origin master && 37 | npm install --save=false && 38 | npm run build 39 | " 40 | -------------------------------------------------------------------------------- /_includes/post.njk: -------------------------------------------------------------------------------- 1 | {% extends 'layout.njk' %} 2 | 3 | {% block css %} 4 | 5 | 9 | {% endblock %} 10 | 11 | 12 | {% block main %} 13 |
14 |

{{title}}

15 |
{{ content | safe }}
16 |
17 |
18 | {% endblock %} 19 | 20 | {% block scripts %} 21 | 23 | 24 | 42 | {% endblock %} -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --body-color: #333; 3 | --body-bg-color: #fff; 4 | --font-arabic-heading: Dubai; 5 | --font-arabic-body: Dubai; 6 | --color-link: #009fff; 7 | --transition-delay: 0.4s; 8 | } 9 | 10 | @font-face { 11 | font-family: "Dubai"; 12 | src: url("/font/dubai-regular.ttf") format("truetype"); 13 | } 14 | 15 | .arabic { 16 | direction: rtl; 17 | font-family: var(--font-arabic-body); 18 | } 19 | 20 | h1 { 21 | font-size: calc(2rem + 0.6vw); 22 | } 23 | 24 | a { 25 | color: var(--body-color); 26 | text-decoration: none; 27 | } 28 | 29 | * { 30 | box-sizing: border-box; 31 | } 32 | 33 | html { 34 | font-size: 10px; 35 | } 36 | 37 | html, body { 38 | height: 100%; 39 | } 40 | 41 | body { 42 | background-color: var(--body-bg-color); 43 | color: var(--body-color); 44 | font-family: Arial, Helvetica, sans-serif; 45 | font-size: 1.8rem; 46 | line-height: 1.5; 47 | margin: 0; 48 | padding: 0; 49 | } 50 | 51 | .container { 52 | display: flex; 53 | flex-direction: column; 54 | height: 100%; 55 | margin: 0 auto; 56 | max-width: 720px; 57 | padding: 1rem; 58 | } 59 | 60 | .header { 61 | display: flex; 62 | justify-content: space-between; 63 | } 64 | 65 | .header__logo { 66 | align-items: center; 67 | display: flex; 68 | } 69 | 70 | .header__logo img { 71 | max-width: 13rem; 72 | max-height: 5rem; 73 | } 74 | 75 | .navbar ul { 76 | display: flex; 77 | justify-content: flex-end; 78 | margin: 0; 79 | padding: 0; 80 | list-style: none; 81 | } 82 | 83 | .navbar li { 84 | padding: 1rem 0 1rem 2rem; 85 | } 86 | 87 | .navbar a { 88 | font-weight: 600; 89 | } 90 | 91 | .navbar a:hover { 92 | opacity: 0.7; 93 | transition: opacity 0.5s; 94 | } 95 | 96 | main { 97 | flex: 1; 98 | } -------------------------------------------------------------------------------- /index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 'layout.njk' 3 | title: PhD in Electronics, Software Engineer & FOSS Enthusiast 4 | --- 5 | 6 | {% block css %} 7 | 8 | 9 | {% endblock %} 10 | 11 |
12 |
13 | avatar image 14 |
15 | 16 |

Abdelaziz Mokhnache

17 |

18 | PhD in Electronics, Software Engineer & FOSS Enthusiast 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 |
-------------------------------------------------------------------------------- /img/researchgate.svg: -------------------------------------------------------------------------------- 1 | 2 | ResearchGate icon -------------------------------------------------------------------------------- /_includes/layout.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ title }} | Abdelaziz Mokhnache 8 | 9 | 10 | 11 | 12 | 13 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | {% block css %} 27 | {% endblock %} 28 | 29 | 30 | 31 |
32 |
33 | 38 | 44 |
45 |
46 | {% block main %} 47 | {{ content | safe }} 48 | {% endblock %} 49 |
50 |
51 | 52 | {% block scripts %} 53 | {% endblock %} 54 | 55 | {# google analytics #} 56 | 65 | 66 | -------------------------------------------------------------------------------- /css/fontello.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'fontello'; 3 | src: url('/font/fontello.eot?36871989'); 4 | src: url('/font/fontello.eot?36871989#iefix') format('embedded-opentype'), 5 | url('/font/fontello.woff2?36871989') format('woff2'), 6 | url('/font/fontello.woff?36871989') format('woff'), 7 | url('/font/fontello.ttf?36871989') format('truetype'), 8 | url('/font/fontello.svg?36871989#fontello') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ 13 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ 14 | /* 15 | @media screen and (-webkit-min-device-pixel-ratio:0) { 16 | @font-face { 17 | font-family: 'fontello'; 18 | src: url('../font/fontello.svg?36871989#fontello') format('svg'); 19 | } 20 | } 21 | */ 22 | 23 | [class^="icon-"]:before, [class*=" icon-"]:before { 24 | font-family: "fontello"; 25 | font-style: normal; 26 | font-weight: normal; 27 | speak: none; 28 | 29 | display: inline-block; 30 | text-decoration: inherit; 31 | width: 1em; 32 | margin-right: .2em; 33 | text-align: center; 34 | /* opacity: .8; */ 35 | 36 | /* For safety - reset parent styles, that can break glyph codes*/ 37 | font-variant: normal; 38 | text-transform: none; 39 | 40 | /* fix buttons height, for twitter bootstrap */ 41 | line-height: 1em; 42 | 43 | /* Animation center compensation - margins should be symmetric */ 44 | /* remove if not needed */ 45 | margin-left: .2em; 46 | 47 | /* you can be more comfortable with increased icons size */ 48 | /* font-size: 120%; */ 49 | 50 | /* Font smoothing. That was taken from TWBS */ 51 | -webkit-font-smoothing: antialiased; 52 | -moz-osx-font-smoothing: grayscale; 53 | 54 | /* Uncomment for 3D effect */ 55 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 56 | } 57 | 58 | .icon-twitter:before { content: '\f099'; } /* '' */ 59 | .icon-linkedin:before { content: '\f0e1'; } /* '' */ 60 | .icon-github:before { content: '\f113'; } /* '' */ 61 | .icon-youtube:before { content: '\f167'; } /* '' */ 62 | .icon-stackoverflow:before { content: '\f16c'; } /* '' */ 63 | .icon-bitbucket:before { content: '\f171'; } /* '' */ 64 | .icon-facebook-official:before { content: '\f230'; } /* '' */ -------------------------------------------------------------------------------- /blog/firefox-vs-chrome-memory-usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Firefox vs Chrome: Memory usage" 3 | date: 2018-12-17 4 | description: At the end of 2017, Mozilla introduced Firefox Quantum the blazing fast, completely reinvented Firefox. It was shipped with a new beautiful look and the speed compared to it's previous versions was obvious. 5 | image: /img/chrome-vs-firefox.jpg 6 | --- 7 | 8 | ![Chrome vs Firefox image]({{image}}) 9 | 10 | At the end of 2017, Mozilla introduced Firefox Quantum the blazing fast, completely reinvented Firefox. It was shipped with a new beautiful look and the speed compared to it's previous versions was obvious. One of Mozilla's claims too was the less usage of memory compared to Google Chrome. For a Firefox user like me, this was great news. I was able to notice the speed and enjoy the new design. But, I didn't pay attention to how it compares to Chrome in memory usage. 11 | 12 | Recently I read a [blog post](https://www.businessinsider.com/google-chrome-vs-firefox-performance-memory-2018-7#1-get-chrome-to-its-purest-form-minus-your-profile-any-extensions-or-other-things-that-could-affect-the-result-9) saying that Firefox consumes more RAM than Chrome. This was not what Mozilla claimed a year ago, I felt betrayed. I started searching for other blog posts with other benchmarks. But, I found different answers with different results. So, I decided to do my own tests. 13 | 14 | ## Making some tests 15 | 16 | These tests are made in the following environment. 17 | 18 | ```yaml 19 | OS: Ubuntu 18.04 20 | RAM: 8 GB 21 | Firefox: 64 22 | Chrome: 70 23 | ``` 24 | 25 | After closing all the third party applicatins on my computer, I opened the Ubuntu `System Monitor` to see how much memory was in use. The initial memory usage was: 26 | 27 | ```yaml 28 | memory: 2.1 GiB 29 | ``` 30 | 31 | Then I opened 30 tabs of 3 different websites in each browser while the other is closed. I used the `Guest Mode` in chrome and the `Safe Mode` in Firefox ( by going to `menu > help > Restart with add-ons disabled`) in order to get rid of any effects of installed add-ons. 32 | 33 | The opened tabs was the following: 34 | 35 | * **Test 1**: [The 30 top answers of Jon Skeet on Stackoverflow.](https://stackoverflow.com/users/22656/jon-skeet?tab=answers) 36 | 37 | * **Test 2**: [The 30 first pages of HTML tutorial on w3schools.](https://www.w3schools.com/html/default.asp) 38 | 39 | * **Test 3**: [30 Quasar-framework components' documentation pages (Field > Dialog).](https://quasar-framework.org/components/) 40 | 41 | * **Test 4**: 20 different websites from the most famous ones (google, youtube, medium ...etc). 42 | 43 | ## Results 44 | 45 | After the complete loading of the 30 tabs each time, I was opening the `System Monitor` to see the total memory usage. knowing the total memory makes it easy to deduce the consumption of each browser. It is as easy as subtracting the initial value of used memory from the new one (I calculated it this way because Chrome opens a lot of processes in Ubuntu and it is hard to keep adding them up). The consumed memory values corresponding to each browser are shown in the table below. 46 | 47 | | | Firefox | Chrome | 48 | |:-----------:|:---------:|:---------:| 49 | | **Test 1** | 1.0 GiB | 1.3 GiB | 50 | | **Test 2** | 1.3 GiB | 2.7 GiB | 51 | | **Test 3** | 1.2 GiB | 2.1 GiB | 52 | | **Test 4** | 0.9 GiB | 1.3 GiB | 53 | 54 | ## Summary 55 | 56 | The results above demonstrates that Firefox Quantum really uses less memory than Google Chrome, at least in my case. That supports Mozilla's claims about it's new kid. I shared here the results I got. But, I can not garantee that everybody else will get the same thing. Concerning the speed, I didn't make a real comparaison between the two. They are comparable in speed and I could not notice any difference in usage. Firefox nowadays is not the same Firefox couple of years ago. -------------------------------------------------------------------------------- /font/fontello.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Copyright (C) 2019 by original authors @ fontello.com 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /arabic/بين-الشهادة-والكفاءة-في-عصر-الأنترنت-والعمل-الحر.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: بين الشهادة والكفاءة في عصر الأنترنت والعمل الحر 3 | date: 2021-04-16 4 | description: كثيرا ما أرى في مواقع التواصل منشورات تقارن بين الكفاءة من جهة والشهادة الأكاديمية من جهة أخرى وأيهما الأفضل، هنا ينقسم الناس إلى فئتين، فئة تستميت في الدفاع عن الشهادة والتعليم الأكاديمي ولا ترى النجاح إلا فيه، تتثمل هذه الفئة غالبا في الأكاديميين والموظفين الذي حصلوا وظائفهم بفضل شهاداتهم الجامعية، وفئة أخرى تزدريه بشكل مبالغ فيه وترى الشهادة شيئا زائدا ومضيعة للوقت، تتمثل هذه الفئة غالبا في المستقلين والمقاولين وأصحاب المهن الحرة، ذلك لأنهم يرون أنفسهم ناجحين رغم أنف الجامعة والشهادة التي تقدمها،هاتان الفئتان تنظران من زاويتين مختلفتين، فلا ريب أن تجد عندهما تصورين مختلفين عن الشيء نفسه. 5 | image: /img/skill-vs-certificate.jpg 6 | --- 7 | 8 | ![skill vs certificate]({{image}}) 9 |
10 | Photo by Hello I'm Nik on Unsplash 11 |
12 | 13 | 14 | كثيرا ما أرى في مواقع التواصل منشورات تقارن بين الكفاءة من جهة والشهادة الأكاديمية من جهة أخرى وأيهما الأفضل، هنا ينقسم الناس إلى فئتين، فئة تستميت في الدفاع عن الشهادة والتعليم الأكاديمي ولا ترى النجاح إلا فيه، تتثمل هذه الفئة غالبا في الأكاديميين والموظفين الذي حصلوا وظائفهم بفضل شهاداتهم الجامعية، وفئة أخرى تزدريها بشكل مبالغ فيه وترى الشهادة شيئا زائدا ومضيعة للوقت، تتمثل هذه الفئة غالبا في المستقلين والمقاولين وأصحاب المهن الحرة، ذلك لأنهم يرون أنفسهم ناجحين رغم أنف الجامعة والشهادة التي تقدمها،هاتان الفئتان تنظران من زاويتين مختلفتين، فلا ريب أن تجد عندهما تصورين مختلفين عن الشيء نفسه. 15 | 16 | في الحقيقة المقارنة بين الكفاءة والشهادة مقارنة في غير محلها لأنها مقارنة بين شيئين مختلفين لا يتعارضان في الغالب، أي أنك لست مجبرا على أخذ واحدة منهما وترك الأخرى، بل يمكن الجمع بينهما في وقت واحد. لعل ما يثير هذا السؤال هو وجود أناس أكفاء بدون شهادات، وأناس أصحاب شهادات تنقصهم الكفاءة في الجهة المقابلة، ما يجعل الكثيرين يكفرون بالدراسة الأكاديمية والشهادة وكل ما يمت لهما بصلة. 17 | بين الشهادة والكفاءة يمكن تمييز أربعة أنواع من الناس: 18 | 19 | - شخص كفؤ صاحب شهادة تعليمية 20 | - شخص كفؤ بدون شهادة تعليمية 21 | - صاحب شهادة غير كفء 22 | - شخص بلا كفاءة ولا شهادة تعليمية 23 | 24 | المنطق والحكمة يقتضيان أن الرجل اذا تمكن من الجمع بين الشهادة التعليمية والكفاءة سواء في مجالها أو في مجال آخر غيرها فهذا الأفضل وأقصى مايرام، أما إن تعذر ذلك فالكفاءة وحدها تقدم على الشهادة وحدها، أما انعدام الكفاءة والشهادة معا فهذه أحط الدرجات، وحالتها لا تناقش وليست محل اختلاف أبدا بين اثنين من الناس. 25 | 26 | في هذه الأيام، في عصر الأنترنت ومواقع التواصل والعمل عن بعد، صار من السهل جدا أن يزدري شاب في الجامعة دراسته الأكاديمية أو الشهادة التي يدرس من أجلها، خاصة حين يرى أصحابه الذين لم يدخلوا الجامعة يجنون الدولارات من مواقع العمل الحر عبر التصاميم ثلاثية الأبعاد الممتعة، بينما هو عاكف على حل مسائل الرياضيات الجافة، قد يدرسه أستاذ دون المستوى علما وخلقا، وقد لا يملك أيضا قيمة قهوته لليوم الموالي، ما أيسر أن تضيع منه البوصلة إذا اجتمعت عليه ظروف كهذه، وقد يقرر في لحظة طيش إهمال الدراسة دون تردد والتوجه نحو تعلم مهارة تساعده في دخول هذا المجال الذي يبدو له مثاليا من النظرة الأولى. 27 | 28 | حقا الشهادة لاتعني الكفاءة بالضرورة، فكم من صاحب شهادة لا يعرف بديهيات مجاله، وكم ممن لا شهادة له وعنده من الكفاءة ما ليس لدي الكثيرين من أصحاب الشهادات، لكن ماذا لو اجتمعت فيك الكفاءة والشهادة معا؟ ذاك هو المبتغى الذي سوف يجعل منك رقما صعبا في معادلة الحياة، ويجعل الناس تنظر لك بعين الإحترام، وحتى على الصعيد المالي سوف يزيد احتمالية حصولك على مشاريع وفرص في العمل الحر نفسه قد لا يبلغها غيرك، فمثلا لو تعطل هاتفك وأردت إصلاحه، وأخبرت عن تقنيين كلاهما متقن لعمله، أحدهما متحصل على شهادة الماستر في الإلكترونيات أما الآخر فلم يدخل الجامعة، من ستختار منهما؟ الأغلب أنك ستختار الأول لأن شهادته تعطيك شعورا زائدا بالأمان وتجعلك تحس أن له حدا أدنى من الفهم والكفاءة لا تدري إن كان لدى الآخر أم لا، بهذه النظرة تماما ينظر العملاء للمستقلين قبل إبرام عقد عمل معهم. 29 | 30 | نصيحتي للطلبة أن لا تأخذكم الحماسة للعمل الحر بعيدا لدرجة التفكير في التخلي عن الدراسة، حتى وإن أخذت الشهادة وألقيتها في الخزانة بعد ذلك، فتأكد أن جهدك لم يضع وأنك سوف تستفيد من هذه الشهادة مستقبلا، ستستفيد منها احتراما من طرف الناس، وثقة من عملاءك في مستواك، كما أن المساءل التي أجبرت على حلها يوما ما لن تذهب سدى أيضا، سيأتي يوم تقدر قيمتها فيه عندما تصادفك في عملك بعض المشاكل المعقدة التي لم تكن لتستطيع حلها دون خلفية علمية جيدة. 31 | 32 | أخيرا هذه مجرد نصيحة أردت كتابتها إنطلاقا من تجربتي الشخصية ومعاينتي لكل من وسط المستقلين والأكاديميين كمهندس برمجيات مستقل وطالب دكتوراه في الوقت نفسه، أعتبر نفسي محل تقاطع بين الفئتين اللتين ذكرتهما في أول المقال مما قد يمكنني من النظر من كلا الزاويتين، ولكن يبقى هذا مجرد رأي شخصي قد تتفق وقد تختلف معه. -------------------------------------------------------------------------------- /blog/how-to-create-a-node-cli-and-publish-it-to-npm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to create a node.js CLI and publish it to NPM 3 | date: 2019-05-26 4 | description: In this article, we will see together how to create a basic node.js CLI and share it with the world using NPM. 5 | image: /img/node-cli.jpg 6 | --- 7 | 8 | ![node-cli]({{image}}) 9 | 10 | The toy programming language that [Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich) created back in the 90s, has became recently one of the most powerful and popular programming languages in the world. One of the big reasons that led to that progress is the invention of Node.js in 2009 by [Ryan Dahl](https://en.wikipedia.org/wiki/Ryan_Dahl). Node.js and its large package management system NPM took Javascript from just being a simple scripting language for web browsers to be a full featured language that runs everywhere and helps building all kinds of cool pieces of software. 11 | 12 | In this article, we will see together how to create a basic node.js CLI and share it with the world using NPM. 13 | 14 | ## Let it be simple 15 | 16 | The CLI that we are going to build is the simplest CLI that could ever exist. We don't need to spend our energy building a complex one, because we have more important things to discuss. All what our CLI will do is taking a `name` and printing `Hello {name}, welcome to node.js!` to the console, as shown below. 17 | 18 | ```bash 19 | $ hello Mohammed 20 | Hello Mohammed, welcome to node.js! 21 | ``` 22 | 23 | ## Let's make it 24 | 25 | First, let's make a folder called `hello`. Inside it, let's create a `cli.js` file that will contain all our code. Yes of course! you can name it as you want as long as you stay consistent with the name you chose. Here is all the code we need to be written to `cli.js`. 26 | 27 | ```js 28 | // cli.js 29 | let name = process.argv[2]; 30 | console.log(`Hello ${name}, welcome to node.js!`); 31 | ``` 32 | 33 | let's now run the script by typing `node cli.js Mohammed` and there you go. You should get `Hello Mohammed, welcome to node.js!` printed to the console. 34 | 35 | ```bash 36 | $ node cli.js Mohammed 37 | Hello Mohammed, welcome to node.js! 38 | ``` 39 | 40 | In case you are wondering what `process.argv` means, it is simply an array that contains all the options that are passed in the command line when excuting the script. The first element of the array `argv[0]` is the path to the `node` command in the filesystem, the second `argv[1]` is the path to the script file `path/to/cli.js` that we want to execute while the third `argv[2]` is the `name` that we want to print. 41 | 42 | Great, the script now is printing the message that we are expecting. But, Didn't we say above that the usage should be `hello {name}` not `node cli.js {name}`? Yes, we did. And this is what we are going to do together right now. 43 | 44 | ## It is just Shebang not Magic 45 | 46 | Have you ever seen this comment `#!/usr/bin/env node` at the very top of a Javascript file and wondered what this is for? We all were in the same situation. This is called the [Shebang](https://en.wikipedia.org/wiki/Shebang_(Unix)). It is a comment that tells the Operating System what interpreter to use for this file if it is ran as an executable. We need to add it to the very top of our `cli.js`. 47 | 48 | ```js 49 | #!/usr/bin/env node 50 | let name = process.argv[2]; 51 | console.log(`Hello ${name}, welcome to node.js!`); 52 | ``` 53 | 54 | This means for the OS that this file should be executed using the default node.js version installed on your system (the version that you get by typing `node` in your terminal). 55 | 56 | ## Please give it a name 57 | 58 | At this moment it is time to turn our CLI to an NPM package. All we need is creating a `package.json` file that will contain information about the package. You can create it manually or automatically using `npm init -y` command (feel free to modify the default properties as you want). 59 | 60 | The last step is telling NPM the command's name that we want to use. As we said before we want to replace `node cli.js {name}` by `hello {name}`. To achieve this, we simply add a `bin` property to `package.json` that contains the command's name and the corresponding file to execute. 61 | 62 | ```js 63 | //package.json 64 | "bin": { 65 | "hello": "cli.js" 66 | } 67 | ``` 68 | 69 | By reaching this point, our CLI is finished and it is ready to be published on NPM. But first let's test it locally to see if everything is working as expected. 70 | 71 | ## Test it locally first 72 | 73 | To test the CLI locally we need it to be installed globally, so the `hello` command will be available everywhere. But we haven't publish it yet, how can it be installed globally? Here we need to run the `npm link` command. 74 | 75 | ```bash 76 | cd hello 77 | npm link 78 | ``` 79 | 80 | when you run this command inside a package folder, it will make it available in the global scope as if it was installed with the `-g` flag. 81 | 82 | Now, let's test the CLI by typing `hello {name}`. Note that you can run `hello` from any location on your system, you are not limited to the package folder. 83 | 84 | ```bash 85 | hello Mohammed 86 | Hello Mohammed, welcome to node.js! 87 | ``` 88 | 89 | *Congratulations!!* You've made your first node.js CLI. If you want to publish it to NPM and show it to the world, you're almost there. 90 | 91 | ## Publish it to NPM 92 | 93 | This is the easiest part as you may not expected. First, you need to create an account on [npmjs.com](https://www.npmjs.com). Then login to it from you terminal using `npm login`. 94 | 95 | ```bash 96 | $ npm login 97 | Username: npmuser 98 | Password: 99 | Email: (this IS public) npmuser@gmail.com 100 | Logged in as npmuser on https://registry.npmjs.org/. 101 | ``` 102 | 103 | It will ask you for your `username`, `password` & `email` and you should provide the correct credentials. Once you are logged in successfully, you will be able to publish your CLI and share with the world by running `npm publish` from the package folder. 104 | 105 | ```bash 106 | cd hello 107 | npm publish 108 | ``` 109 | 110 | If there is no NPM package already published which have the same name as yours, after some second you can see your package live. Otherwise, you have to change the `name` property in `package.json` to an available value. 111 | 112 | Now, everyone on planet earth with access to internet can install your package using `npm i -g {yourPackageName}` and execute it on there own machines. Thus, you've made your first contribution to a big and awesome community. Finally, don't forget to share your code for good. 113 | -------------------------------------------------------------------------------- /arabic/غربة-اللغة-العربية-بين-أبناءها.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: غربة اللغة العربية بين أبنائها .. إلى متى؟ 3 | date: 2021-09-24 4 | description: العالم الإسلامي عامة وفي المغرب العربي خاصة نعيش تغريبا ثقافيا ومسخا حضاريا لم يسبق له مثيل، في بلدان تنص دساتيرها على أن اللغة العربية هي اللغة الرسمية للدولة تعيش العربية غريبة بين أبنائها، لا يكاد يستعملها أحد إلا قلة قليلة على استحياء 5 | image: /img/arabic-books.jpg 6 | --- 7 | 8 | ![skill vs certificate]({{image}}) 9 | 10 |
11 | Photo by Masjid Pogung Dalangan on Unsplash 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 | --------------------------------------------------------------------------------