<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Djilou</title>
    <description>The latest articles on DEV Community by Djilou (@zabdeldjallil).</description>
    <link>https://dev.to/zabdeldjallil</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F540462%2Febfd2272-c202-46a6-adcc-4e9c149ead60.jpeg</url>
      <title>DEV Community: Djilou</title>
      <link>https://dev.to/zabdeldjallil</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zabdeldjallil"/>
    <language>en</language>
    <item>
      <title>Exploring the Power of Adonis.js: A Comprehensive Guide</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Wed, 01 Nov 2023 10:19:53 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/exploring-the-power-of-adonisjs-a-comprehensive-guide-19d9</link>
      <guid>https://dev.to/zabdeldjallil/exploring-the-power-of-adonisjs-a-comprehensive-guide-19d9</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the ever-evolving landscape of web development, having a robust and efficient framework is essential to building modern, scalable, and maintainable applications. Adonis.js, a Node.js web framework, has gained a lot of attention for its powerful features, clean architecture, and developer-friendly ecosystem. In this blog post, we'll delve into the world of Adonis.js, exploring its key features and advantages that make it an excellent choice for web developers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Adonis.js?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Adonis.js is a full-featured, open-source web framework for Node.js. It is built on solid foundations, inspired by some of the best features of popular web frameworks like Ruby on Rails and Laravel. Adonis.js provides a structured and opinionated development environment for building web applications and APIs, making it easier for developers to write clean and organized code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features of Adonis.js&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;MVC Architecture: Adonis.js follows the Model-View-Controller (MVC) architectural pattern. This separation of concerns simplifies code organization and helps developers maintain a clear structure in their projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Lucid ORM: The built-in ORM (Object-Relational Mapping) system, called Lucid, simplifies database interactions by providing an elegant and expressive syntax for working with databases.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Authentication and Authorization: Adonis.js offers a powerful and customizable authentication system, making it easy to implement user registration, login, and access control in your applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;WebSockets: Real-time applications are becoming increasingly popular, and Adonis.js includes support for WebSockets through the WebSocket API, enabling you to build interactive and dynamic features in your applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Adonis Ace: A powerful command-line interface (CLI) known as "Ace" makes it easy to generate boilerplate code, migrate databases, and perform various tasks to streamline your development process.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Middleware: Adonis.js allows you to create middleware functions to handle HTTP requests, making it simple to add custom logic before or after the main request handler.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Dependency Injection: The framework's container system facilitates dependency injection, enabling you to manage and resolve dependencies efficiently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Error Handling: Adonis.js has a comprehensive error handling mechanism, making it easier to catch and handle exceptions gracefully.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Testing: The framework provides a testing environment with support for unit tests, functional tests, and acceptance tests, helping you ensure the reliability of your application.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Why Choose Adonis.js?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are several reasons why developers are increasingly turning to Adonis.js for their web development projects:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Productivity: The framework's conventions and powerful features reduce boilerplate code and help developers focus on building application-specific logic, resulting in faster development.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Community and Ecosystem: Adonis.js has a growing and active community, with a rich ecosystem of packages, plugins, and extensions that can be easily integrated into your projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scalability: Adonis.js is designed to handle large and complex applications, making it a great choice for projects that may need to scale in the future.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Security: Adonis.js takes security seriously and provides built-in features for handling common security concerns, such as CSRF protection, authentication, and data validation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Documentation: The framework offers comprehensive documentation, making it easier for both beginners and experienced developers to get started and make the most of its features.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Adonis.js is a powerful and versatile web framework for Node.js that simplifies web application development. With its clean architecture, rich feature set, and developer-friendly ecosystem, it's an excellent choice for building modern web applications and APIs. Whether you're a seasoned developer looking for an efficient framework or a newcomer to web development, Adonis.js is worth exploring as a valuable addition to your toolkit. Give it a try and see how it can streamline your web development projects while maintaining code quality and scalability.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>A little challenge in JavaScript (will be glad to read your solutions)</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Thu, 26 Jan 2023 16:27:45 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/a-little-challenge-in-javascript-will-be-glad-to-read-your-solutions-1k3f</link>
      <guid>https://dev.to/zabdeldjallil/a-little-challenge-in-javascript-will-be-glad-to-read-your-solutions-1k3f</guid>
      <description>&lt;p&gt;&lt;strong&gt;Let's do a little challenge in JavaScript&lt;/strong&gt;&lt;br&gt;
Write a function that takes two parameters &lt;br&gt;
-a string &lt;br&gt;
-a phrase&lt;br&gt;
 and returns how many times this passed string occurred in the phrase &lt;/p&gt;

&lt;p&gt;&lt;code&gt;function occurences(str,phrase){&lt;br&gt;
//returns how many times str occured in phrase (number)&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;answer in the comments i'll be reading each one of them&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>career</category>
      <category>discuss</category>
    </item>
    <item>
      <title>A useful array method in Javascript</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Mon, 08 Aug 2022 18:41:41 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/a-useful-array-method-in-javascript-4j9f</link>
      <guid>https://dev.to/zabdeldjallil/a-useful-array-method-in-javascript-4j9f</guid>
      <description>&lt;p&gt;Have you faced a nested array before? With nested i mean this for example:&lt;br&gt;
&lt;code&gt;const array=[1,2,3,[4,5]]&lt;/code&gt;&lt;br&gt;
If we want to access to all of it's elements one by one we will have to use nested map methods too, so to avoid that we can use the flat method&lt;/p&gt;

&lt;p&gt;&lt;code&gt;array.flat()&lt;/code&gt;&lt;br&gt;
Which will return an array&lt;/p&gt;

&lt;p&gt;&lt;code&gt;[1,2,3,4,5]&lt;/code&gt;&lt;br&gt;
This is all good and fun but if our main goal was to map across all of the items we still have to use map,so why don't we &lt;strong&gt;combine&lt;/strong&gt; both methods in a single one? &lt;br&gt;
&lt;code&gt;array.flatMap((item)=&amp;gt;console.log(item))&lt;/code&gt;&lt;br&gt;
Will do the job. &lt;/p&gt;

&lt;p&gt;That's it,happy coding. &lt;br&gt;
&lt;strong&gt;Ps:try these methods with this array&lt;/strong&gt;&lt;br&gt;
&lt;code&gt;const nastyNested=[1,2,3,4,[[5,6]]]&lt;/code&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>react</category>
    </item>
    <item>
      <title>[DISCUSSION] when have you decided it was time to start freelancing,and how you did it ?</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Thu, 04 Aug 2022 15:31:09 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/discussion-when-have-you-decided-it-was-time-to-start-freelancingand-how-you-did-it--3dbk</link>
      <guid>https://dev.to/zabdeldjallil/discussion-when-have-you-decided-it-was-time-to-start-freelancingand-how-you-did-it--3dbk</guid>
      <description>&lt;p&gt;Let me hear your story,am genuinely interested !&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Some deep diving in JS concepts</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Thu, 04 Aug 2022 15:17:41 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/some-deep-diving-in-js-concepts-12nl</link>
      <guid>https://dev.to/zabdeldjallil/some-deep-diving-in-js-concepts-12nl</guid>
      <description>&lt;p&gt;There is no need to tell you that JavaScript has some unexpected behaviors sometimes and it's so frustrating when we don't understand them and get what's going.In this post we will explore one of them and hopefully fully understand it ! &lt;/p&gt;

&lt;p&gt;&lt;code&gt;for (var val = 0; val &amp;lt; 10; val++) {&lt;br&gt;
    console.log(val);&lt;br&gt;
    setTimeout(function() {&lt;br&gt;
        console.log(&lt;/code&gt;The number is ${val}&lt;code&gt;);&lt;br&gt;
    }, 1000);&lt;br&gt;
}&lt;/code&gt;&lt;br&gt;
this above for loop will print &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;0&lt;br&gt;
1&lt;br&gt;
2&lt;br&gt;
3&lt;br&gt;
4&lt;br&gt;
5&lt;br&gt;
6&lt;br&gt;
7&lt;br&gt;
8&lt;br&gt;
9&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;br&gt;
"The number is 10"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;and the same for loop but with let instead of var will print&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;0&lt;br&gt;
1&lt;br&gt;
2&lt;br&gt;
3&lt;br&gt;
4&lt;br&gt;
5&lt;br&gt;
6&lt;br&gt;
7&lt;br&gt;
8&lt;br&gt;
9&lt;br&gt;
"The number is 0"&lt;br&gt;
"The number is 1"&lt;br&gt;
"The number is 2"&lt;br&gt;
"The number is 3"&lt;br&gt;
"The number is 4"&lt;br&gt;
"The number is 5"&lt;br&gt;
"The number is 6"&lt;br&gt;
"The number is 7"&lt;br&gt;
"The number is 8"&lt;br&gt;
"The number is 9"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The question is : &lt;strong&gt;why there are different behaviors ?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;First thing to know :&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;important&lt;/strong&gt;:The setTimeout API will only start executing the callback function once all the global synchronous code has executed,so setTimeout API will register the function as callback 10 times.&lt;/p&gt;

&lt;p&gt;Second thing:&lt;br&gt;
Declaring a variable with var (outside of a block) will define it in the global scope and declaring it with let will declare it into the local scope &lt;/p&gt;

&lt;p&gt;You started to get it right ?(if you still didn't,don't worry i'll break it to you)&lt;/p&gt;

&lt;p&gt;In the loop with var declaration,the callback function of setTimeout will have to wait for the global scope operations to finish (i value changing and the console.log(i)) before being able to execute.&lt;/p&gt;

&lt;p&gt;And in the let declaration version , "i" variable is locally declared (local scope) so it's changes won't block the setTimeout callbacks execution.&lt;/p&gt;

&lt;p&gt;That's it hope you enjoyed reading this post,Happy coding.&lt;/p&gt;

&lt;p&gt;SOURCE:&lt;a href="https://discuss.codecademy.com/t/var-and-let-in-a-loop-working-differently/550468/8"&gt;https://discuss.codecademy.com/t/var-and-let-in-a-loop-working-differently/550468/8&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>discuss</category>
    </item>
    <item>
      <title>3 Basic Cat Command Examples in Linux</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Thu, 26 May 2022 10:36:41 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/3-basic-cat-command-examples-in-linux-2a0m</link>
      <guid>https://dev.to/zabdeldjallil/3-basic-cat-command-examples-in-linux-2a0m</guid>
      <description>&lt;p&gt;The cat (short for “concatenate“) command is one of the most frequently used commands in Linux/Unix-like operating systems. cat command allows us to create single or multiple files, view content of a file, concatenate files and redirect output in terminal or files.&lt;/p&gt;

&lt;p&gt;In this article, we are going to find out the handy use of cat commands with their examples in Linux.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;General Syntax of Cat Command&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;$ cat [OPTION] [FILE]...&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;1. Display Contents of File&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cat /etc/passwd&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;root:x:0:0:root:/root:/bin/bash&lt;br&gt;
bin:x:1:1:bin:/bin:/sbin/nologin&lt;br&gt;
narad:x:500:500::/home/narad:/bin/bash&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;2. View Contents of Multiple Files in terminal&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In below example, it will display the contents of the test and test1 file in the terminal.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cat test test1&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Hello everybody&lt;/code&gt;&lt;br&gt;
&lt;code&gt;Hi world,&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;3. Create a File with Cat Command&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We will create a file called test2 file with the below command.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cat &amp;gt;test2&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Thanks for reading ! Happy coding !&lt;/p&gt;

</description>
      <category>linux</category>
      <category>opensource</category>
      <category>devops</category>
      <category>productivity</category>
    </item>
    <item>
      <title>DO NOT do this, while building a React app!</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Sun, 22 May 2022 11:11:11 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/do-not-do-this-while-building-a-react-app-4d7i</link>
      <guid>https://dev.to/zabdeldjallil/do-not-do-this-while-building-a-react-app-4d7i</guid>
      <description>&lt;p&gt;Maintaining standards and a good workflow while building the React application can give you some hard times, mainly because of time constraints. We usually do some things that make it hard to either debug or read our code later and that's a bad practice.&lt;/p&gt;

&lt;p&gt;Here's a list of things to avoid when build React applications. Consider that most of these points can be used in things like Angular and Vue.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;💡 &lt;strong&gt;Do not share CSS across multiple components&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So one big mistake we make once in a while would be to have a central CSS file usually our app.css and just put all our styling inside that, this is very bad mainly because when the project starts getting large styles may start conflicting.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;💡 &lt;strong&gt;Avoid having large Component files.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Having large component files gets annoying for everyone working in your team, and in time it may be hard debugging components previously built. Dividing components should be done by tearing down a user interface to the most basic building blocks or components. This reduces the complexity of the component and provides an easier way of knowing if something goes wrong.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;💡 &lt;strong&gt;Share reusable Functions across Components&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Try your best to have components or files that aren't large, by declaring util functions that are used across multiple components and exporting those functions. This way the components can access them, and it helps to remove repeated codes.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;💡 &lt;strong&gt;Passing functions down as children params&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;During development, we run into issues like parent components needing to update states to cause a re-render during the app's running process, so we create a function in the parent component and pass the function that interacts with that component. But in a case where the component for some reason doesn't work, we'd have to go a long way searching for the parent component that doesn't pass this function. One way to avoid this is to use the React context provider which shares state with all the children component it has in the application.&lt;/p&gt;

</description>
      <category>react</category>
      <category>reactnative</category>
      <category>programming</category>
      <category>architecture</category>
    </item>
    <item>
      <title>[DISCUSSION] What is your perfect work environment ?</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Sun, 22 May 2022 11:06:12 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/discussion-what-is-your-perfect-work-environment--1hkl</link>
      <guid>https://dev.to/zabdeldjallil/discussion-what-is-your-perfect-work-environment--1hkl</guid>
      <description>&lt;p&gt;Comment below your must have factors for a perfect work environment &lt;/p&gt;

</description>
      <category>os</category>
      <category>webdev</category>
      <category>programming</category>
      <category>productivity</category>
    </item>
    <item>
      <title>How to merge a branch when you forgot it's name ? -Git</title>
      <dc:creator>Djilou</dc:creator>
      <pubDate>Tue, 17 May 2022 10:32:46 +0000</pubDate>
      <link>https://dev.to/zabdeldjallil/how-to-merge-a-branch-when-you-forgot-its-name-git-3afk</link>
      <guid>https://dev.to/zabdeldjallil/how-to-merge-a-branch-when-you-forgot-its-name-git-3afk</guid>
      <description>&lt;p&gt;Have you ever wanted to merge a working branch after a checkout to master but you suddenly forgot the name of your working branch ? then reach to your tasks manager or hit a "git branch -a " to check all the branches just to get even more confused ?&lt;br&gt;
well i have a little tip for you !&lt;/p&gt;

&lt;p&gt;let's say that this is your working branch &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Q4OsOTg_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggh9wqg1jtt3137ccef5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Q4OsOTg_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggh9wqg1jtt3137ccef5.png" alt="Image description" width="880" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;now let's head to the master branch using &lt;br&gt;
"git checkout master"&lt;br&gt;
and to merge our working branch we just need to use this command &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vAZVh27Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d1sahrk7v7wzkf9x3y7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vAZVh27Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d1sahrk7v7wzkf9x3y7.png" alt="Image description" width="645" height="357"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;what this does is that it refers to the previous visited branch as "-".&lt;br&gt;
So basically it's like saying:&lt;br&gt;
"git merge previousVisitedBranch"&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ps:it works also with "git checkout"&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;*&lt;em&gt;try it yourself ! *&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Happy coding &lt;/p&gt;

</description>
      <category>git</category>
      <category>github</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
