<?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: Amran Hussein</title>
    <description>The latest articles on DEV Community by Amran Hussein (@amran92).</description>
    <link>https://dev.to/amran92</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%2F590863%2F663dcc9b-b5f3-4b96-9ba1-4d2f989ebf66.png</url>
      <title>DEV Community: Amran Hussein</title>
      <link>https://dev.to/amran92</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/amran92"/>
    <language>en</language>
    <item>
      <title>Setting Up Postman and Automatically Adding Bearer Tokens</title>
      <dc:creator>Amran Hussein</dc:creator>
      <pubDate>Wed, 16 Mar 2022 12:03:41 +0000</pubDate>
      <link>https://dev.to/amran92/setting-up-postman-and-automatically-adding-bearer-tokens-19h4</link>
      <guid>https://dev.to/amran92/setting-up-postman-and-automatically-adding-bearer-tokens-19h4</guid>
      <description>&lt;h2&gt;
  
  
  How to automatically set a Bearer Token for your Postman requests?
&lt;/h2&gt;

&lt;p&gt;Some developers face this small issue which when testing REST APIs they need to fetch and attach bearer tokens to make testing REST APIs every each time when tokens expire. So,  here's the solution to avoid repeating the same process of fetch and attaching bearer tokens all the time. &lt;/p&gt;

&lt;p&gt;All you need to write a few lines of code in the pre-request script in the request collection. In this guide, you will learn how to use a pre-request script to fetch and attach bearer tokens to make testing your REST APIs easier, check below the example.&lt;/p&gt;

&lt;h3&gt;
  
  
  This is the authentication API that generates bearer tokens. API [A]
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9rh4oajrxgxovnjb3jvt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9rh4oajrxgxovnjb3jvt.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  This is the API request that needs to attach the bearer token in it. API [B]
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb4tu93bkz4qvl24ibe4r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb4tu93bkz4qvl24ibe4r.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  These are a few lines of code you need to write in a pre-request script in the API [B] and you can make a call request without fetching bearer token from API [A] and attach it in API [B].
&lt;/h3&gt;

&lt;p&gt;BASE_URL_NAVITAIRE = the URL and sets as an environment variable&lt;br&gt;
NAVITAIRE_TOKEN = bearer token and sets as an environment variable&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const baseUrl = pm.environment.get("BASE_URL_NAVITAIRE")

pm.sendRequest({
    url: baseUrl + '/nsk/v1/token',
    method: 'POST',
    header: {
        'content-type': 'application/json'
    },
    body: {
        mode: 'raw',
        raw: JSON.stringify({ 
        "credentials": {
        "username": "TOPWCHCKINSTG",
        "password": "6F6wSzBa*qBD"
    }})
    }
}, (err, res) =&amp;gt; pm.environment.set("NAVITAIRE_TOKEN", res.json().data.token));
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhuy16dxbgosig2mzafdx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhuy16dxbgosig2mzafdx.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>postman</category>
      <category>devops</category>
      <category>api</category>
      <category>node</category>
    </item>
    <item>
      <title>All you need to know about React Native</title>
      <dc:creator>Amran Hussein</dc:creator>
      <pubDate>Tue, 28 Sep 2021 09:25:21 +0000</pubDate>
      <link>https://dev.to/amran92/all-you-need-to-know-about-react-native-1903</link>
      <guid>https://dev.to/amran92/all-you-need-to-know-about-react-native-1903</guid>
      <description>&lt;h1&gt;
  
  
  What is React Native?
&lt;/h1&gt;

&lt;p&gt;React Native is a framework developed by Facebook. React Native provides full capabilities for building integrated applications that are similar to applications that are programmed using custom programming languages such as Java or Swift. In addition, the basic user interface (UI) building blocks used by iOS and Android are also used by React Native.&lt;/p&gt;

&lt;h2&gt;
  
  
  The difference between React Native and React?
&lt;/h2&gt;

&lt;p&gt;React Native is not a different version of React. Rather, it is a development dedicated to React, as is the case with React Dom. Where React Native uses Native components instead of Web components, as is the case with React. Whereas web components usually produce applications with simple capabilities called WebView Apps, unlike the (Native) components that create applications like applications that are built using programming languages dedicated to developing mobile applications such as Java and Swift. &lt;/p&gt;

&lt;p&gt;However, to get started with React Native, you first need to study and learn the basic concepts of React. Such as the JSK, the Components, the State, and the Props. And if you already know the basics of React, you still need to know the things specific to React Native, such as the (Native components). In general, I am used to using React in the Web. You will not feel strange when dealing with React Native, or if you are using Java or Swift to build mobile applications, you will not feel strange also when dealing with React Native.&lt;/p&gt;

&lt;h3&gt;
  
  
  Companies that use React Native in their applications.
&lt;/h3&gt;

&lt;p&gt;Facebook, GitHub, Airbnb, Box, Google, Microsoft, Pinterest, Pixar Animation Studios, Twitter, Uber, Instagram, LinkedIn, and WhatsApp&lt;/p&gt;

&lt;h2&gt;
  
  
  Features of React Native.
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Cross-platform: With React Native, you do not need to program iOS applications separately from Android applications. React Native helps developers develop applications that work on iOS and Android by using one platform that produces an application that works on different platforms.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---CNrV4r2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvpdk01nw8cuk0dzvtx3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---CNrV4r2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvpdk01nw8cuk0dzvtx3.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Truly native: React Native provides the full potential for developers to build fully and perfectly Native applications. This makes applications designed using React Native appear as if they were designed in one of the programming languages dedicated to building mobile applications on Android and iOS platforms.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ly6rhOfC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfauqwp2nksgkd501ay2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ly6rhOfC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfauqwp2nksgkd501ay2.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reloading: Instead of reprocessing or running the program to know the changes you have made; the application is reloaded directly. Where in React Native you have two options in the reloading process: The first is Live Reloading. Where the application is updated every time, you store the additions or modifications you have made to your files. The second option is Hot Reloading, where the application updates only the files that you have modified and not all the application files.&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>The difference between Encoding, Encryption, Hashing and Obfuscation</title>
      <dc:creator>Amran Hussein</dc:creator>
      <pubDate>Sun, 18 Jul 2021 12:14:58 +0000</pubDate>
      <link>https://dev.to/amran92/the-difference-between-encoding-encryption-hashing-and-obfuscation-3men</link>
      <guid>https://dev.to/amran92/the-difference-between-encoding-encryption-hashing-and-obfuscation-3men</guid>
      <description>&lt;p&gt;Many programmers confuse the related terms Encryption, Encoding, Hashing, and Obfuscation. This article will look at what each of these terms is.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Encoding&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8YJaraXe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4iovyhdnp34t9ps0hl9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8YJaraXe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4iovyhdnp34t9ps0hl9.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Encoding aims to transform data so that different systems can handle it in a correct and secure manner. For example: sending executables in an email or displaying special characters on a web page. The purpose here is not to keep the information confidential, but rather to ensure that it will be dealt with in an optimal manner.&lt;/p&gt;

&lt;p&gt;The encoding converts data from one format to another in a publicly accessible mechanism and the conversion can therefore be easily reversed. After encoding the data does not need a secret key to be able to deal with it, as the only requirement to be able to decode is the algorithm used in it.&lt;br&gt;
&lt;em&gt;Examples:&lt;/em&gt; ASCII, Unicode, URL encoding and Base64.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Encryption&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XUBNdKIg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyxk9t5p7y9w0kg9gohw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XUBNdKIg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyxk9t5p7y9w0kg9gohw.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Encryption is used to transform the form of data for the purpose of keeping it anonymous to others; For example, when you send a message to someone that you do not want others to be able to read or to deliver a secret password on the Internet. Encryption, rather than focusing on the usability of the information, aims to ensure that unauthorized persons cannot make use of the data.&lt;/p&gt;

&lt;p&gt;Encryption turns data into another form that only certain people can understand. To perform the cryptography, an encryption key, an algorithm, and the text to be converted are used. Decryption requires obtaining the encrypted text, the encryption algorithm, and the secret key (the same encryption key or another secret key).&lt;br&gt;
&lt;em&gt;Examples:&lt;/em&gt; AES, Blowfish, and RSA.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hashing&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MPIcXM9S--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzj1m7qqykou0cmi54av.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MPIcXM9S--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzj1m7qqykou0cmi54av.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hashing ensures the integrity of the data, integrity, meaning that if it has been modified, you will be able to find out. The hash operation takes a random input and produces a fixed-length character string that has the following properties.&lt;/p&gt;

&lt;p&gt;Hashing is used with authentication to obtain strong evidence that a message has not been modified. The process is done by taking a specific input, encrypting it with a specific key, hashing it with the same key, then encrypting the key with the public key of the sender, then signing the hash with the secret key of the sender.&lt;/p&gt;

&lt;p&gt;The addressee opens the message and then decrypts the key used to encrypt the message using his secret key, which enables him to obtain the original text of the message. It can then hash the message and compare the hash result with the hash signed by the sender. If a match occurs, it means that the message has not been modified and that it was sent by the waiting person.&lt;br&gt;
&lt;em&gt;Examples:&lt;/em&gt; SHA-3 and MD5 (obsolete)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Obfuscation&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YonNVUlF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxvhflhvuy50pq1s81db.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YonNVUlF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxvhflhvuy50pq1s81db.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Obfuscation aims to make information more difficult to understand, difficult to attack, or copy. A common use is to obfuscate the source code to make it more difficult to replicate a product when reverse engineering is applied to it.&lt;/p&gt;

&lt;p&gt;Note that there is a limit to obfuscation depending on the content. When obfuscation software code, for example, the limit is that the result of obfuscation must remain within what the computer can handle, otherwise the program will stop working.&lt;br&gt;
&lt;em&gt;Examples:&lt;/em&gt; JavaScript obfuscation and ProGuard.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Learn programming, not a programming language.</title>
      <dc:creator>Amran Hussein</dc:creator>
      <pubDate>Sun, 27 Jun 2021 18:53:13 +0000</pubDate>
      <link>https://dev.to/amran92/learn-programming-not-a-programming-language-44c9</link>
      <guid>https://dev.to/amran92/learn-programming-not-a-programming-language-44c9</guid>
      <description>&lt;p&gt;Your learning of a programming language will remain in it forever and you will not be able to move to another language, but by teaching you programming itself, you will be able to identify the concept that transfers you from one language to another easily, and you must understand that programming languages are only tools that can be changed at any time. Watch the following example with me.&lt;/p&gt;

&lt;p&gt;If I ask you to search for a specific element inside an Array and bring me the position of the element (Position, Index) inside the Array, what will you do? &lt;/p&gt;

&lt;p&gt;The first thing is if you are learning a language such as PHP, Python, JavaScript, there is a method that does the process very easy. Watch the example in more than one language to understand the idea.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fta430x70uh6fwtsqv6hf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fta430x70uh6fwtsqv6hf.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Did you notice anything? &lt;/p&gt;

&lt;p&gt;The idea is the same in more than one language with the method’s name different, but it does the same idea, and in a language that can be faster than another language and a language that has other advantages over another and so on, but here you are learning to use a ready-made tool and you will not benefit much.&lt;/p&gt;

&lt;p&gt;what if you asked to do the same idea with the Function you created and not the Function that already exists in the language? &lt;/p&gt;

&lt;p&gt;This is what is asked of you when solving problems on global sites. It gives you a test and you do it yourself without using a method found in the language and there are many benefits, so let us talk about it.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your thinking skills will increase because you do everything by yourself and do not depend on ready-made things.&lt;/li&gt;
&lt;li&gt;Your programming logic will constantly evolve.&lt;/li&gt;
&lt;li&gt;You will learn to employ everything you have learned in the concept of programming, not the programming language.&lt;/li&gt;
&lt;li&gt;You will be able to solve any problem in any language and not in a specific language just because you know the steps of the solution and understand the meaning of the word programming.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let us do the solution in more than one language and without using a ready method and we use what we learned in programming, which is a general thing in the concept of programming and has nothing to do with a specific language and you can learn it at the beginning of your life theoretically to understand its idea before you apply it using various programming languages.&lt;/p&gt;

&lt;p&gt;=&amp;gt; Learn how to make a function to apply the principle of Don't Repeat Yourself.&lt;br&gt;
=&amp;gt; Learn how to Loop to repeat the operations you need to do more than once.&lt;br&gt;
=&amp;gt; Learn how to use the Conditions and control the Flow and its decisions.&lt;br&gt;
=&amp;gt; Learn how to print output to screen.&lt;/p&gt;

&lt;p&gt;An example of making the idea in more than one language and the idea can be done in more than one way, but here is to clarify the example only.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxx42u6dzjs6mfs8p4py3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxx42u6dzjs6mfs8p4py3.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgy94jnzjc30mgraiwpyj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgy94jnzjc30mgraiwpyj.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have you noticed that the Function and the way to write the Code are almost the same, with the Syntax of the language different? And this is the idea that if you learn the concept, you will be able to do it in any language and nothing will stand in front of you, God willing. Therefore, my advice to you is to focus on learning the programming concept and the logical way of thinking to solve problems, and do not worry about the idea of programming languages themselves, as they are tools that help you achieve your idea.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>devops</category>
      <category>algorithms</category>
      <category>programming</category>
    </item>
    <item>
      <title>Ready-to-use libraries with UI in React</title>
      <dc:creator>Amran Hussein</dc:creator>
      <pubDate>Tue, 22 Jun 2021 06:09:27 +0000</pubDate>
      <link>https://dev.to/amran92/ready-to-use-libraries-with-ui-in-react-2m3j</link>
      <guid>https://dev.to/amran92/ready-to-use-libraries-with-ui-in-react-2m3j</guid>
      <description>&lt;p&gt;Off-the-shelf libraries can be used to add formatting to the application. One of the most popular UI frameworks, Bootstrap, is one of the most popular UI frameworks, and it probably will remain so. Currently, you will find a huge number of libraries that coordinate the user interface, and you have a choice that is too wide to be limited to a list. Many UI frameworks provide web app developers with ready-made themes and "blocks" such as buttons, menus, and tables. We put the word "components" between two objections because we are not talking about React components here.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EwbBVIdu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvyhqxh1567puk99nca4.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EwbBVIdu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvyhqxh1567puk99nca4.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;UI frameworks are typically used to insert CSS files in addition to their JavaScript files within an application. Many UI frameworks come with versions intended for use with React, with many of their components converted into React components. There are different versions of Bootstrap dedicated to working with React such as reactstrap and react-bootstrap.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>devops</category>
    </item>
    <item>
      <title>5 Common Mistakes When Using the Bootstrap Framework.</title>
      <dc:creator>Amran Hussein</dc:creator>
      <pubDate>Sun, 30 May 2021 02:33:54 +0000</pubDate>
      <link>https://dev.to/amran92/5-common-mistakes-when-using-the-bootstrap-framework-28c</link>
      <guid>https://dev.to/amran92/5-common-mistakes-when-using-the-bootstrap-framework-28c</guid>
      <description>&lt;p&gt;At first glance, this framework seems to us as simple and easy to deal with, and of course, it is so, and starting to use it is not difficult. Documenting this framework is well written and contains a lot of programming code related to HTML, CSS, and JavaScript. but some errors and problems may not be apparent or may be present in ambiguous use cases. Because the Bootstrap framework seems simple and easy to use, this framework spread like wildfire and many developers started using it, which led to many errors and some problems.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---aI3k2z9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhsr5cfqlhjfkpcilbex.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---aI3k2z9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhsr5cfqlhjfkpcilbex.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Therefore, in this article, I will list 5 common mistakes that users of this framework make.&lt;/p&gt;

&lt;p&gt;Mistake 1: This framework was misunderstood in the first place.&lt;/p&gt;

&lt;p&gt;There are some misconceptions present in the minds of developers about this framework, and this may be because these concepts are not explicitly and clearly present in the framework site or because developers do not take the time to read the documentation of this framework. Developers may do a lot of things wrong and then blame the framework itself, so let us clarify some important facts.&lt;/p&gt;

&lt;p&gt;The Bootstrap framework is a comprehensive and integrated framework, but it is not bulky or massive. This framework comes with basic templates that contain many user interface components such as tables, forms, buttons, dropdowns, and much more. You can use these components to create an interface that works best for multiple browsers, devices, and dimensions.&lt;/p&gt;

&lt;p&gt;It is true that the framework will not do everything, but it provides a set of options for you to choose from, which helps developers focus on development more than design and helps them get a beautiful website in less time.&lt;/p&gt;

&lt;p&gt;Mistake 2: Thinking that you would not need to know CSS to use this framework.&lt;/p&gt;

&lt;p&gt;If you thought you would not need to know CSS to use this framework then you are wrong, as any web developer needs knowledge of CSS and HTML5. It is true that it saves you the trouble of dealing with some of the annoying CSS issues (such as the vendor prefixie) and gives you many default formats, but you must understand CSS. You may not need to know how media queries work, but you will of course need to know how responsive design works in general. Frameworks are not designed to teach you CSS, but they may help.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mYDc7n3V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqtf4ypfcnz6m9nvl2l7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mYDc7n3V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqtf4ypfcnz6m9nvl2l7.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mistake 3: Changing the default CSS file for this frame.&lt;/p&gt;

&lt;p&gt;Let me make it simple and straightforward: Never modify bootstrap.css file.&lt;/p&gt;

&lt;p&gt;If you modify that file, things will become complicated, and you will destroy the design when you update Bootstrap files when a new version of this framework is released. You can replace the default formats of this frame with the formats you want (such as colors, margins, paddings) and there is no need to modify the bootstrap.css file at all.&lt;/p&gt;

&lt;p&gt;Do not know how to use LESS or SASS? No problem with that, all you must do is create the CSS file and put in it the formatting that you want to replace from the main bootstrap.css file. And as we mentioned earlier, knowing CSS is extremely important even if you think otherwise. You can create new CSS selectors or classes and put them in your HTML file to replace the default bootstrap layouts (do not forget to put your CSS file after the bootstrap default CSS files for everything to work correctly).&lt;/p&gt;

&lt;p&gt;Mistake 4: Using everything that the Bootstrap framework provides.&lt;/p&gt;

&lt;p&gt;I have mentioned said earlier that this framework is comprehensive and integrated and provides many user interface components and many HTML and CSS templates and JavaScript plugins as well. But you should not use everything that this framework offers if you will not need it for the project you are working on.&lt;/p&gt;

&lt;p&gt;This is especially true with JavaScript plugins, as you should choose only the plugins that you will need and you should not use everything because it looks beautiful and awesome, as this may overload your site and make it slow. So, you should first not insert the bootstrap.js file and create your site using only HTML and CSS and then add the components you need one by one.&lt;/p&gt;

&lt;p&gt;Mistake 5: complicating things with JavaScript and neglecting the "data-" attribute.&lt;/p&gt;

&lt;p&gt;Designers or beginners to JavaScript can easily create web pages using HTML, CSS, and Bootstrap. But if they are not good at programming, they may fall into the trap of misuse of JavaScript or even complicate matters. It is important to note that JavaScript plugins can be used using an API provided by the Bootstrap framework without having to write a single JavaScript line.&lt;/p&gt;

&lt;p&gt;For example, we can enable a modal dialog without writing a single line of JavaScript by using:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--arq2jZZ---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsma860t8dogis55yh4c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--arq2jZZ---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsma860t8dogis55yh4c.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On an element such as a button or anchor and passing additional values using the -data attributes. In the code below we specified an element with id "#myModal" and used the data-backdrop option to prevent the window from disappearing if the user clicked outside the window, and by using the data-keyboard option we disabled the escape button on the keyboard. That closes the window when pressed. And all of this was done using just one HTML line:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9PXxiX0N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xb8qih4uu5sptyg2jvl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9PXxiX0N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xb8qih4uu5sptyg2jvl.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devjournal</category>
      <category>devops</category>
      <category>programming</category>
    </item>
    <item>
      <title>How to learn to code: tips and tools for your coding journey</title>
      <dc:creator>Amran Hussein</dc:creator>
      <pubDate>Tue, 18 May 2021 00:11:19 +0000</pubDate>
      <link>https://dev.to/amran92/how-to-learn-to-code-tips-and-tools-for-your-coding-journey-3el7</link>
      <guid>https://dev.to/amran92/how-to-learn-to-code-tips-and-tools-for-your-coding-journey-3el7</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs702od73320vtz3u4yfw.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs702od73320vtz3u4yfw.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
The ability of programming is a wonderful skill that gives you a sense of personal and professional satisfaction, as well as enables you to build, solve problems, and invent. It can also open many doors for you.&lt;/p&gt;

&lt;p&gt;It is natural, to see more and more people from different backgrounds deciding that they want to learn to code. But at the beginning of the road, they run into an unpleasant truth " Learning to code is difficult !! ".&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy3j84lvjquadh7blru60.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy3j84lvjquadh7blru60.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There is a lot of complexity and confusion, and at first, almost everything will be illogical. Contrary to expectations, the "I don't understand it" feeling may persist for long into that journey, pushing minds motivated to learn to feel hopeless, lost, or willing to give up.&lt;br&gt;
The moral of the story is that you must be prepared and started immediately. The road to programming paradise is a long one, and without the right mindset at first, the road will quickly lose its light.&lt;/p&gt;

&lt;p&gt;In this article, I will try to provide some guidance on what to expect on this journey, how to face it, and what tools and resources to help you on your journey.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftvt6k7r02c3i51e2fm1c.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftvt6k7r02c3i51e2fm1c.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It may seem counterintuitive, but the first thing you need to realize is that programming is, at its core a technical subject. So, learning the basics of programming takes a lot of focus and practice. But know that countless people, both technical and non-technical, have made this journey before you, so do not be disappointed.&lt;/p&gt;

&lt;p&gt;How to learn programming &amp;gt;&amp;gt;&amp;gt;&amp;gt;&lt;/p&gt;

&lt;p&gt;-&amp;gt;Firstly, Choose your destination, choose the language.&lt;br&gt;
Here you should ask yourself some important questions before starting the field…&lt;br&gt;
i- Why do you want to be a programmer?&lt;br&gt;
ii- What is the goal that you pursue by learning to code?&lt;br&gt;
iii- Do you like to read the code and solve a specific problem?&lt;/p&gt;

&lt;p&gt;-&amp;gt;Secondly, Define your field.&lt;br&gt;
The areas of programming are many, so you must specify a specialization.&lt;br&gt;
i- Are you interested in building websites?&lt;br&gt;
ii- Are you interested in mobile applications?&lt;br&gt;
iii- Are you interested in desktop applications?&lt;/p&gt;

&lt;p&gt;After you choose the specialization that is in harmony with you and you to have a passion for it, then you will be able to choose your favorite programming language.....&lt;/p&gt;

&lt;p&gt;-&amp;gt;Thirdly, Start with something small.&lt;br&gt;
Learning will take time, and there is a lot to absorb. If you try to build a complete app on your first day, you will not get there. To spare yourself frustration, start with small, simple problems and work your way up from them and go on.&lt;/p&gt;

&lt;p&gt;For example, the first program to be written when learning any new language is "Hello World!" (Hello World) which simply prints "Hello World!" on the screen. And in most programming languages it is impossible to write a simpler program. Obviously, this program does not offer much benefit, but it does take many language basics to write, so it is ideal for getting familiar with how to write in the languages.&lt;/p&gt;

&lt;p&gt;-&amp;gt;Fourthly, Be patient.&lt;br&gt;
For example, when I started learning I found the debugging process infuriating, and I did not even feel like it was programming. Instead of writing a new script that does cool new things, I would spend an entire day reading my script trying to understand where I went wrong this time. In the end, I discovered that I forgot to place a semicolon somewhere, or that I used several blanks instead of one space, and when my program is ready to work, the day is over, and I feel very that is not my place, and that what I am doing is a waste of time.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>design</category>
    </item>
  </channel>
</rss>
