<?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: FFFF:0000h</title>
    <description>The latest articles on DEV Community by FFFF:0000h (@adebiyiitunuayo).</description>
    <link>https://dev.to/adebiyiitunuayo</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%2F633612%2Fa95c59ea-f0f9-46ee-82db-bce6aa6ac2bf.jpg</url>
      <title>DEV Community: FFFF:0000h</title>
      <link>https://dev.to/adebiyiitunuayo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/adebiyiitunuayo"/>
    <language>en</language>
    <item>
      <title>CORS: The Gatekeeper of Web Interactions</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Sun, 23 Jun 2024 04:03:11 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/cors-the-gatekeeper-of-web-interactions-59bg</link>
      <guid>https://dev.to/adebiyiitunuayo/cors-the-gatekeeper-of-web-interactions-59bg</guid>
      <description>&lt;p&gt;Imagine you run a community library, and you want to ensure that only trusted members can borrow books. You have a list of people you trust, and you allow them to take books, but you don’t let just anyone walk in and grab a book. This is similar to how &lt;strong&gt;CORS (Cross-Origin Resource Sharing)&lt;/strong&gt; works on the web.&lt;/p&gt;

&lt;h3&gt;
  
  
  What is CORS?
&lt;/h3&gt;

&lt;p&gt;CORS is a security feature in web browsers that allows a website to request resources from another domain, but only if the other domain allows it. This is necessary because of the &lt;strong&gt;Same-Origin Policy (SOP)&lt;/strong&gt;, a security measure that restricts how a document or script loaded from one origin can interact with resources from another origin.&lt;/p&gt;

&lt;h4&gt;
  
  
  Same-Origin Policy
&lt;/h4&gt;

&lt;p&gt;Think of SOP as a security guard who only lets people from the same neighborhood (or origin) interact. For example, if your website is hosted at &lt;code&gt;example.com&lt;/code&gt;, it can freely interact with resources from &lt;code&gt;example.com&lt;/code&gt; but cannot access resources from &lt;code&gt;anotherdomain.com&lt;/code&gt; unless explicitly allowed.&lt;/p&gt;

&lt;h3&gt;
  
  
  How CORS Works
&lt;/h3&gt;

&lt;p&gt;CORS uses HTTP headers to tell the browser whether or not to allow requests from different origins. For instance, if &lt;code&gt;example.com&lt;/code&gt; wants to fetch data from &lt;code&gt;api.example.com&lt;/code&gt;, the server at &lt;code&gt;api.example.com&lt;/code&gt; can send back a header saying it’s okay (&lt;code&gt;Access-Control-Allow-Origin: example.com&lt;/code&gt;).&lt;/p&gt;

&lt;h3&gt;
  
  
  Vulnerabilities in CORS Configurations
&lt;/h3&gt;

&lt;p&gt;Just like leaving the library door open for anyone can lead to theft, misconfigurations in CORS can lead to security issues. Let’s explore some common vulnerabilities with real-world analogies and examples.&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Reflecting the Origin Header
&lt;/h4&gt;

&lt;p&gt;Imagine a scenario where the library decides to trust anyone who claims they’re a friend. If a malicious person says they’re from the neighborhood, they get access to the books. Similarly, some web servers reflect the &lt;code&gt;Origin&lt;/code&gt; header they receive in the &lt;code&gt;Access-Control-Allow-Origin&lt;/code&gt; response, effectively allowing any domain access to sensitive data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt; A request to &lt;code&gt;vulnerable-website.com&lt;/code&gt; from &lt;code&gt;malicious-website.com&lt;/code&gt; might look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="nf"&gt;GET&lt;/span&gt; &lt;span class="nn"&gt;/sensitive-data&lt;/span&gt; &lt;span class="k"&gt;HTTP&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="m"&gt;1.1&lt;/span&gt;
&lt;span class="na"&gt;Host&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s"&gt;vulnerable-website.com&lt;/span&gt;
&lt;span class="na"&gt;Origin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s"&gt;https://malicious-website.com&lt;/span&gt;
&lt;span class="na"&gt;Cookie&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s"&gt;sessionid=...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the server responds with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="k"&gt;HTTP&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="m"&gt;1.1&lt;/span&gt; &lt;span class="m"&gt;200&lt;/span&gt; &lt;span class="ne"&gt;OK&lt;/span&gt;
&lt;span class="na"&gt;Access-Control-Allow-Origin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s"&gt;https://malicious-website.com&lt;/span&gt;
&lt;span class="na"&gt;Access-Control-Allow-Credentials&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s"&gt;true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, the malicious website can access sensitive data by tricking the server into trusting it.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Whitelisted Origin Mistakes
&lt;/h4&gt;

&lt;p&gt;Let’s say the library has a whitelist of trusted members but accidentally includes some sketchy people. In CORS terms, this happens when the whitelist is too broad or misconfigured.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt; A vulnerability in an e-commerce site may allow any subdomain ending in &lt;code&gt;trusted-site.com&lt;/code&gt; to be whitelisted. An attacker can register &lt;code&gt;attacker.trusted-site.com&lt;/code&gt; and gained access to the main site’s resources.&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Exploiting XSS with CORS
&lt;/h4&gt;

&lt;p&gt;Think of a trusted library member who’s actually a thief. If your site trusts another site that has security holes, attackers can exploit those holes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt; A subdomain of a site might have an XSS vulnerability. Attackers can use this to inject scripts that make CORS requests, stealing sensitive data from the main site.&lt;/p&gt;

&lt;h3&gt;
  
  
  How to Prevent CORS-Based Attacks
&lt;/h3&gt;

&lt;p&gt;Here are some practical steps to secure your web applications against CORS-related vulnerabilities:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Strict Origin Checking:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Always specify exact origins in &lt;code&gt;Access-Control-Allow-Origin&lt;/code&gt; headers. Avoid using wildcards (&lt;code&gt;*&lt;/code&gt;) or dynamically reflecting origins without validation.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Limit Trusted Origins:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Only allow trusted sites. Maintain a strict whitelist and regularly review it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Avoid &lt;code&gt;null&lt;/code&gt; Origin:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Do not use &lt;code&gt;Access-Control-Allow-Origin: null&lt;/code&gt; unless absolutely necessary. &lt;code&gt;null&lt;/code&gt; can be exploited by cross-origin redirects and sandboxed requests.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Secure Internal Networks:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Avoid wildcards in internal networks. Ensure internal resources are protected and cannot be accessed by browsers visiting untrusted sites.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Server-Side Security:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Remember, CORS is a browser security feature, not a substitute for server-side security. Implement strong authentication, session management, and data protection measures on your servers.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Real-World Example: Shopify (2019)
&lt;/h3&gt;

&lt;p&gt;In 2019, Shopify had a misconfigured CORS policy that allowed any subdomain to access its main API. An attacker registered &lt;code&gt;attacker.myshopify.com&lt;/code&gt; and exploited this misconfiguration to steal user data. Shopify quickly fixed the issue by tightening their CORS policy.&lt;/p&gt;

&lt;p&gt;By understanding and properly configuring CORS, you can prevent your website from falling prey to similar vulnerabilities. Just like running a secure library, it’s about knowing who to trust and keeping a close eye on who gets access to your valuable resources.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Mischief Managed&lt;/em&gt;&lt;/p&gt;

</description>
      <category>cybersecurity</category>
      <category>webdev</category>
      <category>backend</category>
      <category>softwaredevelopment</category>
    </item>
    <item>
      <title>Large Language Models: The Brains Behind Modern AI (like ChatGPT,Siri,Alexa,Cortana)</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Fri, 21 Jun 2024 04:02:00 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/large-language-models-the-brains-behind-modern-ai-like-chatgptsirialexacortana-265c</link>
      <guid>https://dev.to/adebiyiitunuayo/large-language-models-the-brains-behind-modern-ai-like-chatgptsirialexacortana-265c</guid>
      <description>&lt;p&gt;I just learned something really fascinating about AI, and I think you'll find it cool too. It's all about Large Language Models, or LLMs. These are like super-smart robots that can have conversations with you, answer questions, and even help out with various tasks. Let me break it down for you.&lt;/p&gt;

&lt;h4&gt;
  
  
  What is a Large Language Model?
&lt;/h4&gt;

&lt;p&gt;Okay, so imagine the predictive text feature on your phone—the thing that suggests the next word when you're typing a message. For example, if you type "Can you hack my boyfriend's," your phone might suggest "facebook" as the next word. It's pretty handy, right?, right?, right?, Now, imagine this feature on steroids. That's what a Large Language Model is like.&lt;/p&gt;

&lt;p&gt;LLMs are trained on tons of text data (think of it like reading a huge library of books). They learn how language works by recognizing patterns and structures. This means they can predict and generate sentences that sound natural and make sense. When you talk to a virtual assistant like Siri or Alexa, you're actually using a prompt (a way to give the AI instructions) to communicate with an LLM, and it responds based on what it has learned.&lt;/p&gt;

&lt;h4&gt;
  
  
  Real-World Uses of LLMs
&lt;/h4&gt;

&lt;p&gt;LLMs are used in so many cool ways:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Customer Service&lt;/strong&gt;: Ever chatted with a company's virtual assistant for help? That's an LLM. During the 2020 pandemic, many companies used these chatbots to handle the surge in customer questions online.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Translation&lt;/strong&gt;: Services like Google Translate use LLMs to instantly translate languages, making it easier for people from different parts of the world to understand each other.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;SEO (Search Engine Optimization)&lt;/strong&gt;: LLMs help websites rank higher in search results by generating content that search engines love.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Sentiment Analysis&lt;/strong&gt;: They can read and analyze comments or reviews to see if people are happy or upset, helping companies understand what people think about their products.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  The Dark Side: LLM Attacks and Prompt Injection
&lt;/h4&gt;

&lt;p&gt;But here’s the kicker—LLMs can be tricked or attacked. One common trick is called &lt;strong&gt;prompt injection&lt;/strong&gt;. This is when someone sneaky, like me, a researcher (&lt;em&gt;adjusts glasses slightly&lt;/em&gt;) writes specific prompts to make the LLM do something it shouldn’t. Let me give you an example to show you what I mean:&lt;/p&gt;

&lt;p&gt;In a lab environment:&lt;/p&gt;

&lt;p&gt;1, You ask the LLM what APIs it can access.&lt;br&gt;
2, The LLM lists APIs including Password Reset, Newsletter Subscription, and Product Information (THIS SHOULDN'T BE ACCESSIBLE TO THE LLM!!!)&lt;br&gt;
3, Considering the Newsletter Subscription API, you test it by subscribing with an email address tied to an exploit server.&lt;br&gt;
4, You then use a command injection technique, $(whoami), which reveals the system's user.&lt;br&gt;
5, Further exploiting this, you use $(rm /home/carlos/morale.txt) to delete a specific file, demonstrating unauthorized capabilities beyond intended usage. &lt;/p&gt;

&lt;h4&gt;
  
  
  Real-World Examples of LLM Vulnerabilities found
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;OpenAI GPT-3 (2021)&lt;/strong&gt;: Researchers found that by writing certain prompts, they could get GPT-3 to say things it wasn’t supposed to, like generating harmful or misleading information.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Microsoft Tay (2016)&lt;/strong&gt;: This was a chatbot that learned from people on Twitter. Unfortunately, people started teaching it bad things, and it quickly began to say offensive stuff. Microsoft had to shut it down within 24 hours.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Google Smart Compose (2018)&lt;/strong&gt;: This feature in Gmail suggests text as you type. Researchers found that by tweaking the email context, they could influence what Smart Compose suggested, leading to potential information leaks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AI Dungeon (2020)&lt;/strong&gt;: This is a game that uses AI to create stories. Users found they could make it reveal personal information that was hidden in its training data. Not good!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Training Data Poisoning (2022)&lt;/strong&gt;: Researchers showed that by sneaking bad data into the training set, they could make the AI say specific harmful things. It's like teaching a parrot to say something rude on purpose.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Detecting and Fixing LLM Vulnerabilities
&lt;/h4&gt;

&lt;p&gt;To keep these AI systems safe, we need to spot and fix their weak points. Here’s a simple way to think about it:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Identify Inputs&lt;/strong&gt;: Figure out what info the AI is getting directly (like user questions) and indirectly (like the data it was trained on).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Check Data and APIs&lt;/strong&gt;: See what data and tools the AI can use, because these could be abused.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Test for Weak Spots&lt;/strong&gt;: Try to find and fix any security holes.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  How LLMs Work with APIs
&lt;/h4&gt;

&lt;p&gt;LLMs often use APIs (tools that let different software talk to each other) to do more complex tasks. Here’s how it typically works:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;User Interaction&lt;/strong&gt;: You send a message to the LLM.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Function Call Detection&lt;/strong&gt;: The LLM realizes it needs to use an external tool and prepares the request.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API Interaction&lt;/strong&gt;: The system makes the call using the LLM’s request.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Processing Response&lt;/strong&gt;: The system processes the response from the API.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Follow-Up&lt;/strong&gt;: The system tells the LLM what the API said.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Result Summary&lt;/strong&gt;: The LLM tells you the final result.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;While this makes the LLM very powerful, it also means it can access external tools without you knowing, which can be risky.&lt;/p&gt;

&lt;h4&gt;
  
  
  Keeping LLMs Safe
&lt;/h4&gt;

&lt;p&gt;To protect LLMs from being exploited, here are some tips:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Treat APIs as Public&lt;/strong&gt;: Assume anyone can use them. Use strong security measures, like passwords and permissions. Google Smart Compose had issues because it didn’t properly handle email contexts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Avoid Sensitive Data&lt;/strong&gt;: Don’t let LLMs access sensitive info. Microsoft Tay went rogue because it learned from unfiltered user input.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Regular Testing&lt;/strong&gt;: Keep testing the AI to make sure it isn’t revealing any private info. The 2022 training data poisoning showed that bad data could make AI say harmful things.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Proper Integration&lt;/strong&gt;: Make sure LLMs ignore misleading prompts hidden in emails or web pages.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Real-World Analogy (well it's a myth but it doesn't fit to say Mythical Analogy lol): &lt;a href="https://www.greeklegendsandmyths.com/trojan-horse.html"&gt;The Trojan Horse&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;Think of LLM vulnerabilities like the story of the Trojan Horse. The Greeks gave the Trojans a giant wooden horse as a gift, but inside it were hidden soldiers. The Trojans brought it into their city, not knowing it was a trap. Similarly, LLMs can be tricked by seemingly harmless prompts or data that hide malicious intentions, leading to security breaches.&lt;/p&gt;

&lt;h4&gt;
  
  
  Conclusion
&lt;/h4&gt;

&lt;p&gt;LLMs are amazing tools, but they come with risks. By learning from past incidents and understanding how these models work, we can better protect them. It’s like having a super-smart assistant that we need to keep safe from bad actors. As these technologies evolve, we need to keep improving our strategies to ensure they continue to help us in safe and effective ways. Isn’t that cool?&lt;/p&gt;

&lt;p&gt;APIs are critical in ensuring Web Apps run smoothly.&lt;br&gt;
Check out my article on API Testing: &lt;a href="https://dev.to/adebiyiitunuayo/api-testing-a-journey-into-reconnaissance-and-vulnerability-identification-using-burpsuite-50o"&gt;https://dev.to/adebiyiitunuayo/api-testing-a-journey-into-reconnaissance-and-vulnerability-identification-using-burpsuite-50o&lt;/a&gt;&lt;/p&gt;

</description>
      <category>cybersecurity</category>
      <category>ai</category>
      <category>llm</category>
      <category>webdev</category>
    </item>
    <item>
      <title>API Testing: A Journey into Reconnaissance and Vulnerability Identification using BurpSuite</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Wed, 19 Jun 2024 03:19:13 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/api-testing-a-journey-into-reconnaissance-and-vulnerability-identification-using-burpsuite-50o</link>
      <guid>https://dev.to/adebiyiitunuayo/api-testing-a-journey-into-reconnaissance-and-vulnerability-identification-using-burpsuite-50o</guid>
      <description>&lt;p&gt;Think of API testing as embarking on a thrilling adventure, where you explore uncharted territories to ensure the safety and reliability of your digital assets. This guide will take you through the exciting process of API testing, focusing on reconnaissance and vulnerability identification.&lt;/p&gt;

&lt;h3&gt;
  
  
  API Reconnaissance
&lt;/h3&gt;

&lt;p&gt;Before diving into the depths of API testing, you need a solid map like this &lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;a href="https://static.wikia.nocookie.net/callofduty/images/9/94/Isolated_Map_Overview_Season_4_Fool%27s_Gold_CODM.png/revision/latest?cb=20240414070316" rel="noopener noreferrer"&gt;
      static.wikia.nocookie.net
    &lt;/a&gt;
&lt;/div&gt;
 :) just kidding, not that &lt;a href="https://callofduty.fandom.com/wiki/Call_of_Duty_(series)"&gt;COD&lt;/a&gt; Map, but with elements being somewhat similar; points, locations, e.t.c . This involves understanding the lay of the land, or in technical terms, the API's attack surface. Here’s your guide:

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Identify API Endpoints&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Endpoints are like landmarks on your journey. They are specific locations where APIs receive requests. For instance, imagine you’re visiting a library (the server) and you want to see a list of books. You’d head to the &lt;code&gt;/api/books&lt;/code&gt; section.&lt;/li&gt;
&lt;li&gt;Another landmark could be &lt;code&gt;/api/books/mystery&lt;/code&gt;, guiding you to a collection of mystery novels. Knowing these endpoints is like having a treasure map—it’s crucial for successful exploration.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Determine Interaction Methods&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;To interact with these landmarks, you need the right tools and instructions. Gather details on:

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Input Data&lt;/strong&gt;: Think of these as the keys to different doors, including both mandatory and optional parameters.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Supported Request Types&lt;/strong&gt;: This is akin to knowing if a door requires a push, pull, or a keycard—whether it’s HTTP methods or media formats.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rate Limits and Authentication Mechanisms&lt;/strong&gt;: These are the rules of the land, ensuring you don’t overstay your welcome or enter without permission.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  API Documentation
&lt;/h3&gt;

&lt;p&gt;Imagine having a guidebook that explains everything about your journey. API documentation is that guidebook, and it comes in two forms:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Human-Readable&lt;/strong&gt;: Like a travel guide with detailed explanations, examples, and usage scenarios.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Machine-Readable&lt;/strong&gt;: Think of it as a GPS system that uses structured formats like JSON or XML for software automation.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Finding API Documentation&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Browsing Applications&lt;/strong&gt;: Use tools like Burp Scanner to explore the API, similar to using a metal detector to find hidden treasures. Look for endpoints such as &lt;code&gt;/api&lt;/code&gt;, &lt;code&gt;/swagger/index.html&lt;/code&gt;, or &lt;code&gt;/openapi.json&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Using Intruder&lt;/strong&gt;: Deploy wordlists based on common API conventions, much like using a dictionary to decode an ancient language.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Using Machine-Readable Documentation&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tools like Burp Scanner can audit OpenAPI documentation, while Postman and SoapUI can help test the documented endpoints, much like testing the integrity of discovered artifacts.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Identifying and Interacting with Endpoints
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Manual Exploration&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use Burp Repeater and Burp Intruder to interact with identified endpoints. This is like probing different areas of a cave to uncover additional chambers or passageways.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;HTTP Methods&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Test various HTTP methods to uncover different functionalities:

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;GET /api/tasks&lt;/code&gt;: Retrieves tasks, akin to finding a list of quests.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;POST /api/tasks&lt;/code&gt;: Creates a new task, like adding a new quest to your log.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;DELETE /api/tasks/1&lt;/code&gt;: Deletes a task, removing a quest from your log.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;Use Burp Intruder to cycle through these methods, focusing on low-priority areas to avoid unintended consequences, like a careful explorer avoiding dangerous traps.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Content Types&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;APIs often expect data in a specific format. Changing the Content-Type header can:

&lt;ul&gt;
&lt;li&gt;Trigger errors revealing useful information, much like pressing the wrong button in an ancient temple might reveal hidden secrets.&lt;/li&gt;
&lt;li&gt;Bypass defenses or exploit logic differences, similar to finding a hidden passageway.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;Use the Content type converter BApp to switch between formats like XML and JSON, akin to translating ancient texts.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Discovering Hidden Endpoints and Parameters
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Using Intruder for Hidden Endpoints&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Test structures like &lt;code&gt;/api/user/update&lt;/code&gt; with Burp Intruder, adding payloads at common positions. Utilize wordlists, much like a treasure hunter uses maps marked with potential dig sites.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Finding Hidden Parameters&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use Burp Intruder and Param Miner BApp to uncover hidden parameters, and the Content Discovery Tool to find parameters not linked from visible content, like finding hidden switches in a secret room.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Testing for Vulnerabilities
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Mass Assignment Vulnerabilities&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;These occur when frameworks automatically bind request parameters to internal object fields. It’s like finding out that a hidden lever not only opens a secret door but also triggers a trap.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Testing Mass Assignment&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Send PATCH requests with parameters like &lt;code&gt;{"username": "wiener", "email": "wiener@example.com", "isAdmin": false}&lt;/code&gt;. Check responses for unusual behavior, much like testing each step for hidden pressure plates.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Server-Side Parameter Pollution&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;This vulnerability lets attackers manipulate server-side requests by injecting parameters into user inputs. It’s like inserting a false clue into a treasure map to mislead others.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Query String Pollution&lt;/strong&gt;: Test by inserting characters like &lt;code&gt;#&lt;/code&gt;, &lt;code&gt;&amp;amp;&lt;/code&gt;, and &lt;code&gt;=&lt;/code&gt;, similar to testing different keys in a lock.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Path Traversal&lt;/strong&gt;: Test by adding path sequences like &lt;code&gt;peter/../admin&lt;/code&gt;, akin to finding a hidden path through a maze.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Testing with Automated Tools
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Burp Scanner and Backslash Powered Scanner&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use Burp Scanner to detect suspicious input transformations, like using a metal detector to find hidden metal objects. The Backslash Powered Scanner BApp helps identify server-side injection vulnerabilities, much like using a spyglass to spot distant dangers.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Preventing Vulnerabilities
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Design Considerations&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Protect Documentation&lt;/strong&gt;: Keep it updated and secure, like safeguarding your treasure map.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Validate Inputs&lt;/strong&gt;: Use allowlists and blocklists to control input parameters, akin to setting up a security perimeter around your treasure.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Error Handling&lt;/strong&gt;: Use generic error messages to avoid revealing sensitive information, much like using decoy maps to mislead potential thieves.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Versioning&lt;/strong&gt;: Apply security measures across all API versions, ensuring that every iteration of your treasure map is secure.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Preventing Mass Assignment&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Allowlist user-updatable properties and blocklist sensitive properties, preventing unintended parameter binding, like ensuring only trusted allies have access to the secret vault.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Real-World Examples of API Testing Vulnerabilities
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Facebook Graph API - Access Token Exposure (2018)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incident&lt;/strong&gt;: A vulnerability exposed access tokens of 50 million users.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consequences&lt;/strong&gt;: Account takeover, access to private messages, posting updates.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lesson&lt;/strong&gt;: Implement robust token management and regular audits.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Uber API - Personal Data Exposure (2016)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incident&lt;/strong&gt;: Insufficient access controls exposed personal data of riders and drivers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consequences&lt;/strong&gt;: Risk of privacy breaches and data misuse.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lesson&lt;/strong&gt;: Ensure strict access controls and regularly update security policies.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Twitter API - Direct Message Leak (2017)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incident&lt;/strong&gt;: A vulnerability allowed unauthorized access to DMs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consequences&lt;/strong&gt;: Exposure of private conversations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lesson&lt;/strong&gt;: Thoroughly test permission systems and authorization checks.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Tesla API - Remote Control of Vehicles (2016)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incident&lt;/strong&gt;: Researchers accessed and controlled vehicle features remotely.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consequences&lt;/strong&gt;: Significant security risk, potential vehicle theft or manipulation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lesson&lt;/strong&gt;: Rigorous security testing for critical systems and secure authentication.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;GitHub API - Repository Data Exposure (2020)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incident&lt;/strong&gt;: Unauthorized access to private repository data due to improper token handling.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consequences&lt;/strong&gt;: Exposure of sensitive code and intellectual property.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lesson&lt;/strong&gt;: Use secure token handling methods and regularly rotate tokens.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Slack API - Bypassing Rate Limits (2019)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incident&lt;/strong&gt;: A vulnerability allowed attackers to bypass rate limits and spam messages.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consequences&lt;/strong&gt;: Denial-of-service attacks, disrupted services.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lesson&lt;/strong&gt;: Implement and enforce rate limiting and monitor API usage patterns.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Google Cloud API - Sensitive Data Leak (2020)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incident&lt;/strong&gt;: Misconfiguration exposed sensitive data of enterprise customers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consequences&lt;/strong&gt;: Exposure of sensitive business information.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lesson&lt;/strong&gt;: Ensure proper configuration management and regular security audits.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Effective API testing is like embarking on an epic quest, requiring a thorough understanding of the API’s structure and behavior. By following these steps, you can identify and mitigate various vulnerabilities, ensuring the security and reliability of your digital treasure. Remember, continuous testing and updating security measures are key to safeguarding against emerging threats.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Mischief Managed.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>cybersecurity</category>
      <category>webdev</category>
      <category>vulnerabilities</category>
      <category>api</category>
    </item>
    <item>
      <title>Path Traversal: The Hidden Threat to Your Data</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Sat, 15 Jun 2024 14:31:07 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/path-traversal-the-hidden-threat-to-your-data-2g3n</link>
      <guid>https://dev.to/adebiyiitunuayo/path-traversal-the-hidden-threat-to-your-data-2g3n</guid>
      <description>&lt;p&gt;Imagine you're at home, and your house is full of rooms with various doors, some leading to secure areas like your personal office or a safe room. Now, what if someone knew a trick to bypass the usual routes and access these rooms directly, stealing or tampering with your valuables, such as your 419-karat gold chain, expensive perfume, or even your vintage &lt;a href="https://en.wikipedia.org/wiki/Piggy_bank"&gt;Kolo box&lt;/a&gt;. This is essentially what happens in a path traversal attack.&lt;/p&gt;




&lt;h4&gt;
  
  
  What is Path Traversal?
&lt;/h4&gt;

&lt;p&gt;Path traversal, also known as directory traversal, is a type of vulnerability found in web applications. It allows attackers to access files and directories stored outside the web root folder, which they typically shouldn't be able to reach, that's for the chefs, a.k.a Backend Engineers. These files can contain sensitive information like application code, user data, credentials, and even system files, which can be exploited to gain further control over the server.&lt;/p&gt;




&lt;h4&gt;
  
  
  How Path Traversal Works
&lt;/h4&gt;

&lt;p&gt;Say there's a web application, a sinister &lt;a href="https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3999317"&gt;yahooyahoo&lt;/a&gt; online shopping store used to trade illegally, much like &lt;a href="https://www.europol.europa.eu/media-press/newsroom/news/darkmarket-worlds-largest-illegal-dark-web-marketplace-taken-down"&gt;Darkmarket&lt;/a&gt;, with its name actually being &lt;strong&gt;yahooyahoo&lt;/strong&gt;! Dumb I know, had to do with something about hiding in plain &lt;em&gt;site&lt;/em&gt; by the admin who's now in jail :). The application loads an image using a URL like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/loadImage?filename=218.png"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the backend, the server processes this request by appending the filename to a base directory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/var/www/images/218.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;However, if there are no defenses against path traversal, an attacker; in this case &lt;a href="https://www.efcc.gov.ng/efcc/"&gt;EFCC&lt;/a&gt;, can manipulate the &lt;strong&gt;filename parameter&lt;/strong&gt; to access other files on the server such as account info of the users. For instance, they might try:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://yahooyahoo.com/loadImage?filename=../../../etc/passwd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This request instructs the server to load a file by stepping up three directory levels from the base path and then accessing the &lt;code&gt;/etc/passwd&lt;/code&gt; file, a critical system file on Unix-like systems.&lt;/p&gt;

&lt;p&gt;The server constructs the path like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/var/www/images/../../../etc/passwd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;../&lt;/code&gt; sequence moves up one directory level. So, the path resolves to:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/etc/passwd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h4&gt;
  
  
  The Power and Might of &lt;code&gt;../&lt;/code&gt; Sequence
&lt;/h4&gt;

&lt;p&gt;When you hear of &lt;strong&gt;Sequence&lt;/strong&gt; in Web-Sec, just think of &lt;strong&gt;Navigation&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;Think of &lt;code&gt;../&lt;/code&gt; as a way to go up one level in a directory structure, like climbing a ladder to the floor above:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A single &lt;code&gt;../&lt;/code&gt; takes you one level up.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;../../&lt;/code&gt; takes you two levels up.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;../../../&lt;/code&gt; takes you three levels up, and so on.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In a computer file system:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Starting at &lt;code&gt;/home/user/documents/projects&lt;/code&gt;, &lt;code&gt;../&lt;/code&gt; takes you to &lt;code&gt;/home/user/documents&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;../../&lt;/code&gt; would take you to &lt;code&gt;/home/user&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;../../../&lt;/code&gt; brings you to &lt;code&gt;/home&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;To better understand this:&lt;/p&gt;

&lt;p&gt;Imagine you're in a large hotel, Hotel 3FCC. You start in room 419 (4th floor, 19th room). Using &lt;code&gt;../&lt;/code&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;../&lt;/code&gt; means stepping out into the hallway (up one level in directory terms).&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;../../&lt;/code&gt; means taking the elevator down to the 3rd floor.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;../../../&lt;/code&gt; means going down to the 2nd floor.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Hotel Layout:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Hotel:
---------------------

                          (Floors)
                                |
                                |
    +---------------------------------------------+
    | 1st Floor  | 2nd Floor  | 3rd Floor | 4th Floor |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
    |             | Room 219   |             | Room 419   |
    |             |             |             | (Your Room)|
    |             +-------------+             +-------------+
    |             | Room 220   |             | Room 420   |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
    |             | Room 319   |             |             |
    |             |             |             |             |
    |             +-------------+             +-------------+
    |             | Room 320   |             |             |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Path Traversal Steps:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Initial Position&lt;/strong&gt;: Room 419 on the 4th Floor

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Current Path&lt;/strong&gt;: &lt;code&gt;/home/user/documents/projects&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hotel Analogy&lt;/strong&gt;: You are in Room 419 on the 4th Floor
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    +---------------------------------------------+
    | 1st Floor  | 2nd Floor  | 3rd Floor | 4th Floor |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
    |             | Room 219   |             | Room 419   |
    |             |             |             | (You)      |
    |             +-------------+             +-------------+
    |             | Room 220   |             | Room 420   |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
    |             | Room 319   |             |             |
    |             |             |             |             |
    |             +-------------+             +-------------+
    |             | Room 320   |             |             |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Step 1&lt;/strong&gt;: Using &lt;code&gt;../&lt;/code&gt; to move up one level to the hallway of the 4th floor

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;New Path&lt;/strong&gt;: &lt;code&gt;/home/user/documents&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hotel Analogy&lt;/strong&gt;: Stepping out into the hallway of the 4th Floor
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    +---------------------------------------------+
    | 1st Floor  | 2nd Floor  | 3rd Floor | 4th Floor |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
    |             | Room 219   |             | (Hallway)  |
    |             |             |             |             |
    |             +-------------+             +-------------+
    |             | Room 220   |             | Room 419   |
    |             |             |             | (Empty)   |
    +-------------+-------------+-------------+-------------+
    |             | Room 319   |             |             |
    |             |             |             |             |
    |             +-------------+             +-------------+
    |             | Room 320   |             |             |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Step 2&lt;/strong&gt;: Using &lt;code&gt;../../&lt;/code&gt; to move up two levels to the 3rd Floor

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;New Path&lt;/strong&gt;: &lt;code&gt;/home/user&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hotel Analogy&lt;/strong&gt;: Taking the elevator down to the 3rd Floor
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    +---------------------------------------------+
    | 1st Floor  | 2nd Floor  | 3rd Floor | 4th Floor |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
    |             | Room 219   | (You)       | (Hallway)  |
    |             |             |             |             |
    |             +-------------+             +-------------+
    |             | Room 220   | Room 319   | Room 419   |
    |             |             | (Empty)   | (Empty)   |
    +-------------+-------------+-------------+-------------+
    |             | Room 320   |             |             |
    |             |             |             |             |
    |             +-------------+             +-------------+
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Step 3&lt;/strong&gt;: Using &lt;code&gt;../../../&lt;/code&gt; to move up three levels to the 2nd Floor

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;New Path&lt;/strong&gt;: &lt;code&gt;/home&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hotel Analogy&lt;/strong&gt;: Taking the elevator down to the 2nd Floor
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    +---------------------------------------------+
    | 1st Floor  | 2nd Floor  | 3rd Floor | 4th Floor |
    |             | (You)     | (Empty)   | (Hallway)  |
    +-------------+-------------+-------------+-------------+
    |             | Room 219   | Room 319   | Room 419   |
    |             |             | (Empty)   | (Empty)   |
    |             +-------------+             +-------------+
    |             | Room 220   | Room 320   | Room 420   |
    |             |             |             |             |
    +-------------+-------------+-------------+-------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Defenses and Bypasses
&lt;/h4&gt;

&lt;p&gt;To prevent these attacks, many applications strip out directory traversal sequences from user input. But clever attackers often find ways to bypass these defenses. For instance, they might use an absolute path directly from the root:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;filename=/etc/passwd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or, they might use nested traversal sequences like &lt;code&gt;....//&lt;/code&gt;, which, after stripping, still leaves a valid traversal sequence:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://yahooyahoo.com/loadImage?filename=....//etc/passwd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here’s how nested sequences work:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;User input: &lt;code&gt;....//etc/passwd&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; Application strips &lt;code&gt;../&lt;/code&gt;: The sequence &lt;code&gt;....//&lt;/code&gt; reverts to &lt;code&gt;../&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; Resulting path: &lt;code&gt;/var/www/images/../etc/passwd&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; Final path resolves to: &lt;code&gt;/etc/passwd&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  URL Encoding Tricks
&lt;/h4&gt;

&lt;p&gt;Another trick involves URL encoding (I'll be writing an article on URL encoding soon), where characters like &lt;code&gt;../&lt;/code&gt; are represented in encoded forms (&lt;code&gt;%2e%2e%2f&lt;/code&gt;). For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;filename=%2e%2e%2f%2e%2e%2fetc/passwd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This can trick the application into processing it as valid input.&lt;/p&gt;

&lt;h4&gt;
  
  
  Protecting Against Path Traversal
&lt;/h4&gt;

&lt;p&gt;To defend against path traversal:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Avoid using user input in filesystem APIs&lt;/strong&gt; whenever possible.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Validate user inputs rigorously&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Use a whitelist of allowed values.&lt;/li&gt;
&lt;li&gt;Allow only specific characters (e.g., alphanumeric).&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Canonicalize the path&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Ensure the resolved path starts with the expected base directory.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Real-Life Examples of Path Traversal Attacks
&lt;/h3&gt;

&lt;h4&gt;
  
  
  1. &lt;strong&gt;Apache Struts CVE-2017-5638&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;In 2017, a critical vulnerability was discovered in Apache Struts, a popular open-source web application framework. The vulnerability (CVE-2017-5638) allowed attackers to exploit path traversal to read and execute arbitrary files on the server. This was part of the attack vector used in the massive Equifax data breach, which exposed personal information of over 147 million people. Attackers leveraged the vulnerability to execute remote code, gaining access to sensitive data.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. &lt;strong&gt;Fortinet FortiOS Path Traversal (CVE-2018-13379)&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;In 2018, a path traversal vulnerability (CVE-2018-13379) was discovered in Fortinet's FortiOS SSL VPN web portal. The flaw allowed unauthenticated attackers to download system files via specially crafted HTTP resource requests. By exploiting this, attackers could access sensitive information such as password files and VPN session details, compromising the security of the entire network.&lt;/p&gt;

&lt;h4&gt;
  
  
  3. &lt;strong&gt;Magento eCommerce Platform&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Magento, a popular eCommerce platform, has been subject to multiple path traversal vulnerabilities over the years. One such vulnerability allowed attackers to exploit the file upload mechanism to upload malicious files by bypassing directory restrictions. This could lead to remote code execution, enabling attackers to take over the web server and access sensitive customer information and payment data.&lt;/p&gt;

&lt;h4&gt;
  
  
  4. &lt;strong&gt;Nokia Store App&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;In 2012, a significant path traversal vulnerability was found in the Nokia Store app. The issue allowed attackers to download arbitrary files from the server. By manipulating the URL parameters, attackers could access restricted directories and sensitive files, potentially exposing user data and internal configurations.&lt;/p&gt;

&lt;h4&gt;
  
  
  5. &lt;strong&gt;Rubygems.org Path Traversal (CVE-2020-25613)&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;In 2020, a path traversal vulnerability was identified in Rubygems.org, the Ruby community’s gem hosting service. The vulnerability (CVE-2020-25613) allowed attackers to manipulate file paths and download arbitrary files from the server. This posed a significant risk as it could potentially expose sensitive configuration files and credentials stored on the server.&lt;/p&gt;

&lt;h4&gt;
  
  
  6. &lt;strong&gt;Cisco ASA Path Traversal Vulnerability (CVE-2018-0296)&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Cisco's Adaptive Security Appliance (ASA) software was found to have a critical path traversal vulnerability (CVE-2018-0296) in 2018. This allowed unauthenticated attackers to send crafted HTTP requests to gain access to sensitive system files. Exploiting this flaw, attackers could obtain information about the device configuration, potentially aiding in further attacks against the network.&lt;/p&gt;

&lt;h4&gt;
  
  
  7. &lt;strong&gt;GitHub Enterprise Server Path Traversal (CVE-2020-10546)&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;In 2020, a path traversal vulnerability (CVE-2020-10546) was discovered in GitHub Enterprise Server. This vulnerability allowed attackers to access arbitrary files on the server by manipulating URL paths. Exploiting this, an attacker could gain access to sensitive information such as repository files and configuration data, posing a significant security risk to the affected enterprises.&lt;/p&gt;

&lt;h4&gt;
  
  
  8. &lt;strong&gt;WordPress Plugin Vulnerabilities&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Many WordPress plugins have been found vulnerable to path traversal attacks. For instance, the popular plugin "Duplicate Page" had a path traversal vulnerability that allowed attackers to read arbitrary files from the server. Such vulnerabilities in widely used plugins pose significant risks as they can affect a large number of websites, potentially exposing sensitive data and enabling further attacks.&lt;/p&gt;

&lt;h3&gt;
  
  
  Final words
&lt;/h3&gt;

&lt;p&gt;I'm not supposed to be writing an article telling you this (lol), but sometimes the most secure doors have hidden keys – and in the world of web security, path traversal is one key you definitely don't want falling into the wrong hands.&lt;/p&gt;

&lt;p&gt;Path traversal vulnerabilities extend beyond what I have shown here but see this as a starting point, a good magician never reveals his secrets :).&lt;/p&gt;

&lt;p&gt;Path traversal vulnerabilities are like hidden passages in a fortress, allowing attackers to slip through defenses and wreak havoc. By understanding how these attacks work and implementing defenses, we can better protect our digital fortresses from unauthorized access. Always validate and sanitize user inputs, and regularly, I mean regularly review your code and server configurations to close off any potential exploits.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Mischief Managed.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Resources: Portswigger (Web Security Academy), Wikipedia.&lt;/p&gt;

</description>
      <category>cybersecurity</category>
      <category>webdev</category>
      <category>vulnerabilities</category>
      <category>learning</category>
    </item>
    <item>
      <title>Node: cd myjourney03</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Fri, 27 May 2022 20:23:41 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/node-cd-myjourney03-327</link>
      <guid>https://dev.to/adebiyiitunuayo/node-cd-myjourney03-327</guid>
      <description>&lt;p&gt;It's been a while I posted my learning progress due to health challenges and school. However I decided to resume learning Nodejs and posting my progress since things are good now.&lt;/p&gt;

&lt;p&gt;So today was great, I learned about the &lt;strong&gt;NPM&lt;/strong&gt; a.k.a Node Package Manager.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The npm is the package manager for the Node JavaScript platform. It puts modules in place so that node can find them, and manages dependency conflicts intelligently.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now this seemed confusing at first to me. So I asked myself "what is a package". Now it meant something different to me from what I found out coming from a Java language background where a package is a group of similar type of classes.&lt;/p&gt;

&lt;p&gt;So I hit up the Google website. &lt;em&gt;Hey there's a website named &lt;a href="//npmjs.com"&gt;npmjs&lt;/a&gt;&lt;/em&gt;, dedicated to the npm I was learning about which is &lt;em&gt;it&lt;/em&gt;, NPM, the &lt;em&gt;thing&lt;/em&gt;. I click on this site and run a few more clicks and found:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A package is a file or directory that is described by a &lt;strong&gt;package.json&lt;/strong&gt; file. &lt;br&gt;
A package is any of the following:&lt;br&gt;
a) A folder containing a program described by a &lt;code&gt;package.json&lt;/code&gt; file.&lt;br&gt;
b) A gzipped tarball containing (a).&lt;br&gt;
c) A URL that resolves to (b).&lt;br&gt;
d) A &lt;code&gt;&amp;lt;name&amp;gt;@&amp;lt;version&amp;gt;&lt;/code&gt; that is published on the registry with (c).&lt;br&gt;
e) A &lt;code&gt;&amp;lt;name&amp;gt;@&amp;lt;tag&amp;gt;&lt;/code&gt; that points to (d).&lt;br&gt;
f) A &lt;code&gt;&amp;lt;name&amp;gt;&lt;/code&gt; that has a latest tag satisfying (e).&lt;br&gt;
g) A git url that, when cloned, results in (a).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;💡 So I now understand that a package in Nodejs term is not a package in Java term and I shouldn't assume but instead confirm things.&lt;/p&gt;

&lt;p&gt;I learned that NPM is broad as a concept and as a &lt;em&gt;thing&lt;/em&gt;. Why? &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Npm consists of three distinct components:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;website&lt;/strong&gt;: Use the website to discover packages, set up profiles, and manage other aspects of your npm experience. For example, you can set up organizations to manage access to public or private packages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;CLI&lt;/strong&gt; (Command Line Interface) which runs from a terminal, and is how most developers interact with npm.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;registry&lt;/strong&gt; which is a large public database of JavaScript software and the meta-information surrounding it.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;💡 So when anyone mentions NPM, you're allowed to ask which part of NPM they are talking about and not just assume it to be the CLI because I'm always in the terminal for it.&lt;/p&gt;

&lt;p&gt;So I'm working with the CLI component of NPM via Termux terminal. The npm was installed when I installed nodejs on my device in my terminal so no need for installing it separately.&lt;/p&gt;

&lt;p&gt;Now there's a package in NPM (website) named "upper-case" used to convert strings to upper case. &lt;br&gt;
That is: "hey" turns to "HEY". &lt;/p&gt;

&lt;p&gt;So I search on the website for this package&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fabkduwe2bryqtcc4pkp6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fabkduwe2bryqtcc4pkp6.png" alt="npm-upper-case-package" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on it to see what it's about &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Heyy, it's on github &lt;br&gt;
Think github, think Opensource.&lt;/em&gt; &lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fps4stwx5gavc0kxx2jhr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fps4stwx5gavc0kxx2jhr.png" alt="upper-case" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;How could I forget, Nodejs is Opensource itself and NPM too.&lt;/p&gt;

&lt;p&gt;So I install this package on my CLI&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9y1nvqolzbor4nz49lva.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9y1nvqolzbor4nz49lva.jpg" alt="upper-case installed" width="478" height="132"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then I check what has been installed, the files and all, see a package.json file and other new files. &lt;strong&gt;node_modules&lt;/strong&gt;, what is that, instinct?. I navigate into it. And find files again, navigate to the &lt;strong&gt;dist.es2015&lt;/strong&gt; folder instinctively too to find many files but the one file that caught my attention was a simple &lt;strong&gt;index.js&lt;/strong&gt; file which I opened with a code editor and found interesting things. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbtkk37fy9dhusqa9l6mf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbtkk37fy9dhusqa9l6mf.png" alt="upper-case" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So here's part of the codes in the &lt;strong&gt;index.js&lt;/strong&gt; file&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpp3rxahkwdvf0r5k43l4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpp3rxahkwdvf0r5k43l4.png" alt="index.js" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I understood that part of this code was setup so it could be imported or &lt;em&gt;require_d and I can see an uppercase function which converts strings _javascriptically&lt;/em&gt; (lol).&lt;br&gt;
Makes sense to me. I exit. &lt;/p&gt;

&lt;p&gt;So now back to my server, time to use this package.&lt;br&gt;
I include the upper-case package in my already set up server&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;demo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;upper-case&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And write a text using the &lt;strong&gt;upperCase()&lt;/strong&gt; function seen earlier.&lt;br&gt;
So the whole thing looks like&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;demo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;upper-case&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createServer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;write&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;demo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;upperCase&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello John!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;end&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;8080&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;Then I run the server&lt;/p&gt;

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

&lt;p&gt;I request via port 8080 and my server DISPLAYS the string argument in CAPITAL LETTERS. Amazing. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhd1c0yt3ivfy5nnez66h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhd1c0yt3ivfy5nnez66h.png" alt="Package-Effect" width="480" height="960"&gt;&lt;/a&gt;&lt;br&gt;
💡 So I don't have to stress writing a logic to do this anymore, I just install and download the upper-case package. &lt;br&gt;
Imagine what other packages on NPM registry can do. &lt;br&gt;
The power of packages. &lt;br&gt;
Things learned: NPM, package, modules&lt;/p&gt;

&lt;p&gt;Resource: Google, W3schools, Stackoverflow. &lt;/p&gt;

&lt;p&gt;Day 4. Progress. &lt;/p&gt;

</description>
      <category>node</category>
      <category>javascript</category>
      <category>todayilearned</category>
      <category>writing</category>
    </item>
    <item>
      <title>Node: cd myjourney02</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Tue, 17 May 2022 20:06:23 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/node-cd-myjourney02-3fk0</link>
      <guid>https://dev.to/adebiyiitunuayo/node-cd-myjourney02-3fk0</guid>
      <description>&lt;p&gt;I learned about the file system module in Nodejs which allows Nodejs work with the file system on my computer (in my case, mobile storage) and makes Nodejs act as a file server. &lt;br&gt;
What this basically means is that files (documents, videos, audios, etc) are stored on my computer (mobile) and this file system module allows Node access these files and &lt;em&gt;serve&lt;/em&gt; them to client upon request (usually by the click of button).&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;In computing, file system or filesystem (often abbreviated to fs) is a method and data structure that the operating system uses to control how data is stored and retrieved. Without a file system, data placed in a storage medium would be one large body of data with no way to tell where one piece of data stopped and the next began, or where any piece of data was located when it was time to retrieve it&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To enable this &lt;em&gt;feature&lt;/em&gt;, just like the http and url modules, you &lt;em&gt;include&lt;/em&gt; the file system module &lt;strong&gt;fs&lt;/strong&gt; using the &lt;strong&gt;require()&lt;/strong&gt; function and storing in variable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;fs&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So, I have two html files together with my server program in a folder named &lt;strong&gt;node&lt;/strong&gt; as you can see below; facts and index.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvoxlj34i21d7ki1db15f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvoxlj34i21d7ki1db15f.png" alt="Facts&amp;amp;Index" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And my server code &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8g4rlensk414d0d8n8vw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8g4rlensk414d0d8n8vw.png" alt="Server-Code" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Looking at line 7, I noticed a &lt;strong&gt;dot&lt;/strong&gt; wrapped in double quotes so I decided to find out why it's there and what it does, so I initiated my server and it crashed, a quick copy/paste of line 7 on Google brought up some interesting results. &lt;br&gt;
The best I could take is that &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The reason for the leading dot is that the logic of that example is to open a local file.&lt;br&gt;
q.pathname will return something like /..., so adding a . in front of it, you'll get something like ./..., which identifies a file in the same directory where the node.js program is run.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Means that Nodejs as a file server needs the dot to recognise the path of file (e.g /index.html) as an entity (./index.html) within the same folder as my server program. It's best not to think of it in terms of relative or absolute path.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;filename&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;q&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pathname&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Line 8 has a lot of things happening, notice the &lt;strong&gt;fs&lt;/strong&gt; module with a method &lt;strong&gt;readFile()&lt;/strong&gt; taking two arguments, well the fs or &lt;strong&gt;File System&lt;/strong&gt; module allows in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Creating files using methods &lt;strong&gt;appendFile()&lt;/strong&gt;, &lt;strong&gt;open()&lt;/strong&gt;, &lt;strong&gt;writeFile()&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reading files using method &lt;strong&gt;readFile()&lt;/strong&gt; &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Updating files using methods &lt;strong&gt;appendFile()&lt;/strong&gt;, &lt;strong&gt;writeFile()&lt;/strong&gt; &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Deleting files using method &lt;strong&gt;unlink()&lt;/strong&gt; &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Renaming files using method &lt;strong&gt;rename()&lt;/strong&gt; &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  CR²UD
&lt;/h4&gt;

&lt;p&gt;What the code means is that, " &lt;em&gt;read&lt;/em&gt; whatever &lt;em&gt;filename&lt;/em&gt; requested by client on my computer (as server) and respond with it. &lt;br&gt;
A function passed as an argument which contains the error parameter and data parameter for if the file was not requested properly or if it doesn't exist and if the file was requested properly or it exists respectively. &lt;strong&gt;400&lt;/strong&gt; is a status code to describe an error.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;readFile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;404&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;404 Not Found&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; 
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;write&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;end&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So I run my server &lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm18hojkdayuxkounl8si.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm18hojkdayuxkounl8si.png" alt="Server-up" width="480" height="960"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;I request the default server page on port 8080&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F166mljq2zfpnus1vk80a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F166mljq2zfpnus1vk80a.png" alt="Default" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Request a different path&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgahv2ct6c15o5q46rqvq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgahv2ct6c15o5q46rqvq.png" alt="Different path" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Request the &lt;strong&gt;index.html&lt;/strong&gt; file in same folder as my server program.&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxvz087q0cybhiityo4b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxvz087q0cybhiityo4b.png" alt="index.html" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I request the &lt;strong&gt;facts.html&lt;/strong&gt; file in same folder too. &lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb6ftz0c7l5jythfli29h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb6ftz0c7l5jythfli29h.png" alt="facts.html" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Things learned &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Combining the http,url and file system module to create a file server to serve files to client.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Modules&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Resources: Google, W3Schools.com, Stackoverflow, Geeksforgeeks.org.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>devjournal</category>
      <category>writing</category>
    </item>
    <item>
      <title>Nodejs: cd my-journey01</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Sat, 07 May 2022 22:31:33 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/nodejs-cd-my-journey01-1bin</link>
      <guid>https://dev.to/adebiyiitunuayo/nodejs-cd-my-journey01-1bin</guid>
      <description>&lt;p&gt;Today I learned about built-in modules in Node.js such as the HTTP module and the URL module.&lt;/p&gt;

&lt;h2&gt;
  
  
  Anatomy of a nodejs server
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;url&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createServer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;qr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;query&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;qr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;year&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt; &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;qr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;month&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;txt&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;8080&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The require() function is used to include the HTTP module and is stored in the variable, http to be used.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The require() function is used to include the URL module and is stored in the variable, url to be used.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;url&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Now the &lt;strong&gt;HTTP&lt;/strong&gt; module allows Nodejs to transfer data over the protocol using methods like &lt;strong&gt;createServer()&lt;/strong&gt; and &lt;strong&gt;listen()&lt;/strong&gt; method which allows Nodejs function as a Web server (an HTTP server) &lt;/p&gt;

&lt;p&gt;Whereas the &lt;strong&gt;URL&lt;/strong&gt; module allows Nodejs split query string into readable parts.&lt;/p&gt;




&lt;p&gt;The &lt;strong&gt;http&lt;/strong&gt; variable &lt;em&gt;object&lt;/em&gt; which has the HTTP module stored in it has a method &lt;strong&gt;createServer&lt;/strong&gt; which takes in a &lt;em&gt;function&lt;/em&gt; parameter,and this &lt;em&gt;function&lt;/em&gt; is called when anyone tries to access the port 8080. It's important to know that that the &lt;strong&gt;createServer&lt;/strong&gt; actually listens &lt;em&gt;to&lt;/em&gt; the server port incase there's any access and loads up the function passed in as an argument and sends response back to the client (the Web browser).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createServer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
&lt;span class="c1"&gt;//Statements go here &lt;/span&gt;
&lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Analysing the content of the function parameter. I got to find out interesting things.&lt;/p&gt;

&lt;p&gt;The function, which is a nameless function takes in &lt;strong&gt;two&lt;/strong&gt; arguments &lt;strong&gt;req&lt;/strong&gt; (request) and &lt;strong&gt;res&lt;/strong&gt; (response). &lt;/p&gt;

&lt;p&gt;P.O.V : Server. &lt;br&gt;
The &lt;strong&gt;req&lt;/strong&gt; argument which is an "http.IncomingMessage &lt;em&gt;object&lt;/em&gt; (containers for named values)" represents the request from the client to the server. &lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;res&lt;/strong&gt; argument which is an "http.outgoingmessage &lt;em&gt;object&lt;/em&gt;" represents the response from the server to the client. &lt;br&gt;
The &lt;strong&gt;res.writeHead&lt;/strong&gt; function or the res object which contains a named value writeHead which is a function which is a method (because methods are functions that are in objects) and is used to write HTTP headers (HTTP headers let the client and the server pass additional information with an HTTP request or response.) &lt;br&gt;
&lt;em&gt;At this point I was glad I understood the concept of objects and methods and functions in JavaScript.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;writeHead()&lt;/strong&gt; method takes in &lt;strong&gt;two&lt;/strong&gt; arguments the &lt;strong&gt;status code&lt;/strong&gt; which is &lt;strong&gt;200&lt;/strong&gt; (meaning &lt;em&gt;successful connection&lt;/em&gt;, sent by the server to the client) and the type of content to be sent to the client (web browser), in this case an &lt;em&gt;html&lt;/em&gt; content type. &lt;br&gt;
Remembering that the &lt;strong&gt;res&lt;/strong&gt; is an object and objects are containers for named values, and objects are written in such manner:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;object&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;property&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I quickly spot that the 'Content-Type':'text/html' part is a member of an object but wait, it's within the writeHead function/method so it must belong to the writeHead, it all began to make sense, "a server is like a nest of objects, functions and objects", I said to myself.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now below, there's the &lt;strong&gt;url.parse&lt;/strong&gt; method which takes a url address (req.url) and &lt;em&gt;parses&lt;/em&gt; it returning a url object with each part of the address, stored in the qr object variable. The second parameter &lt;strong&gt;true&lt;/strong&gt; is called a &lt;em&gt;parseQueryString&lt;/em&gt; and it is a boolean value. If it is set to &lt;strong&gt;true&lt;/strong&gt; then the &lt;strong&gt;query&lt;/strong&gt; property will be set to an object returned by the querystring module’s parse() method. If it's set to false then the &lt;strong&gt;query&lt;/strong&gt; property on the returned URL object will be an unparsed, undecoded string. Its default value is false.&lt;br&gt;
The &lt;strong&gt;.query&lt;/strong&gt; at the end is so parts can be splitted &lt;del&gt;when we &lt;em&gt;query&lt;/em&gt;&lt;/del&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;qr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;query&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Take for example when set to true &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Felj9zqofykdmnffvt7u6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Felj9zqofykdmnffvt7u6.png" alt="True querystring" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and &lt;/p&gt;

&lt;p&gt;When set to false&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6ncyrlienbuf7dm67rx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6ncyrlienbuf7dm67rx.png" alt="False querystring" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, we have a variable &lt;strong&gt;text&lt;/strong&gt; which will take in the part of our url named &lt;strong&gt;year&lt;/strong&gt; and &lt;strong&gt;month&lt;/strong&gt; and prints them out as html text in our specified port because we have instructed our server to end the response (res.end) with it (text).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;qr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;year&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;qr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;month&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;txt&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hence when we access, query  year and month&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn06hfltao52wfg6brswm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn06hfltao52wfg6brswm.png" alt="Query" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We get the result as&lt;/p&gt;

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

&lt;p&gt;This is basically how websites work when we want to access a content from n-month in n-year and if there's any data available, it displays or shows an error, sent from the server.&lt;/p&gt;

&lt;p&gt;Things learned: A lot (lol), objects, functions, methods, modules, Nodejs, server, backend.&lt;/p&gt;

&lt;p&gt;Cover-image: Author&lt;br&gt;
Resources:&lt;a href="//W3Schools.com"&gt;W3Schools&lt;/a&gt;, &lt;a href="//geeksforgeeks.org"&gt;Geeksforgeeks&lt;/a&gt;, Google. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>node</category>
      <category>devjournal</category>
    </item>
    <item>
      <title>The programmers experience</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Wed, 04 May 2022 14:33:58 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/the-programmers-experience-70h</link>
      <guid>https://dev.to/adebiyiitunuayo/the-programmers-experience-70h</guid>
      <description>&lt;p&gt;"The realities and illusions of good learning.&lt;/p&gt;

&lt;p&gt;As a programmer, you're exposed to a world of logic, a world of additions, subtractions, divisions of bits in their mulitiples. A world that requires you think.&lt;br&gt;
In this framework as a newcomer, you may at some point in getting familiar come to a junction where there are two options, two great options that set your configuration pattern to be a model to how you'd learn things after 3 consecutive consistent decisions. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;To learn just what is sufficient and necessary at that definite point
or&lt;/li&gt;
&lt;li&gt;Go down a world of the rabbits, where you scavenge about for good information, searching from page to page, article to article, tweets to quora's with words and buzzwords popping up at your every look, just to understand why a layer of computer exists and what is responsible for it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It may seem that the former is efficient enough for any given task and should be done at all times but the latter has its end results tied to the general understanding of a programmer in any case, general understanding could mean:&lt;/p&gt;

&lt;p&gt;"ohh this word seems familiar 'A11y' : &lt;em&gt;checks google&lt;/em&gt; &lt;em&gt;scrolls down&lt;/em&gt;, *sees 'Accessibility is long-hand for A11y with 11 words in between A and y'"&lt;/p&gt;

&lt;p&gt;The rabbit hole is an endless depth of knowledge well. Time therein may seem slow, while on the outside fast. This is but an illusion, so I've come to learn and experience. The rabbit hole is that deep that makes you question "&lt;em&gt;why is javascript written like this, why is var, let used like this, what is a scope, what does it mean by a programming language is fast?&lt;/em&gt;" and proffers a solution that makes you search just about every nook and cranny of Google, MDN, read just about any book written by Kyle Simpson and Mark Haverbeke, while checking out that Bucky's JavaScript tutorials, Caleb Curry's video on engines then knowing there's such a thing as V8, runtime, environment, bindings, non-blocking, asynchronous, prototypal, sentinels, assemblers (What is that?), machine code, history of computers just because of a want to know why &lt;code&gt;var&lt;/code&gt; and &lt;code&gt;let&lt;/code&gt; are different which sends you for a quick therapy at the &lt;em&gt;ImpostorSyndrome&lt;/em&gt; hospital perpetually.&lt;/p&gt;

&lt;p&gt;The rabbit hole must in no way be likened to a I place of "jumping about" learning about everything there is to learn on different subject matters, but a digging through as it's obvious rabbits do not hop to create holes. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The man who has studied about variables and operators for 12 months is the one I prefer to the man who knows all of JavaScript. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A true programmer seeks depth, a true -tian must seek depth." &lt;br&gt;
                                            -  My-journal.txt&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
    <item>
      <title>JavaScript and Logic.</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Tue, 03 May 2022 10:46:33 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/javascript-and-logic-442d</link>
      <guid>https://dev.to/adebiyiitunuayo/javascript-and-logic-442d</guid>
      <description>&lt;p&gt;In &lt;strong&gt;logic&lt;/strong&gt;, a statement (or a Proposition) is a meaningful declarative sentence that is either True (T) or False (F). Examples of logical statements include the following:&lt;/p&gt;

&lt;p&gt;"You are reading this on dev.to" &lt;code&gt;//True&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;"You reading this on Facebook" &lt;code&gt;//False&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In JavaScript:&lt;/p&gt;

&lt;p&gt;The author of the "&lt;em&gt;You don't know JS yet&lt;/em&gt;" series, &lt;strong&gt;Kyle Simpson&lt;/strong&gt; tells us that&lt;/p&gt;

&lt;p&gt;"&lt;em&gt;In JavaScript, a statement might look as follows: &lt;code&gt;a  =  b  *  2;&lt;/code&gt;&lt;br&gt;
 The characters  a  and  b  are called  variables which are like simple boxes you can store any of your stuff in. In programs, variables hold values to be used by the program. Think of them as symbolic placeholders for the values themselves. By contrast, the  &lt;code&gt;2&lt;/code&gt;  is just a value itself, called a  'literal value', because it stands alone without being stored in a variable. The  &lt;code&gt;=&lt;/code&gt;  and  &lt;code&gt;*&lt;/code&gt;  characters are  operators— they perform actions with the values and variables such as assignment and mathematic multiplication. Most statements in JavaScript conclude with a semicolon (;) at the end. The statement  &lt;code&gt;a = b * 2;&lt;/code&gt;  tells the computer, roughly, to get the current value stored in the variable  b, multiply that value by  2, then store the result back into another variable we call  a.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Statements are made up of one or more  expressions. An expression is any reference to a variable or value, or a set of variable(s) and value(s) combined with operators. For example: &lt;code&gt;a =  b  *  2;&lt;/code&gt; This statement has four expressions in it: • &lt;code&gt;2&lt;/code&gt; is a  literal value expression. • &lt;code&gt;b&lt;/code&gt;  is a  variable expression, which means to retrieve its current value. • &lt;code&gt;b * 2&lt;/code&gt;  is an  arithmetic expression, which means to do the multiplication. &lt;code&gt;a = b * 2&lt;/code&gt;  is an  assignment expression, which means to assign the result of the  &lt;code&gt;b * 2&lt;/code&gt;  expression to the variable  a  (more on assignments later). A general expression that stands alone is also called an  expression statement, such as the following: &lt;code&gt;b  *  2;&lt;/code&gt; This flavor of expression statement is not very common or useful, as generally it wouldn’t have any effect on the running of the program —it would retrieve the value of  b  and multiply it by  2, but then wouldn’t do anything with that result.&lt;/em&gt;"&lt;/p&gt;

&lt;p&gt;Whereas author of the "&lt;em&gt;Eloquent JavaScript&lt;/em&gt;", &lt;strong&gt;Marijn Haverbeke&lt;/strong&gt; tells us :&lt;br&gt;
"&lt;em&gt;A fragment of code that produces a value is called an expression. Every value that is written literally (such as 22 or "psychoanalysis") is an expression. An expression between parentheses is also an expression, as is a binary operator applied to two expressions or a unary operator applied to one. This shows part of the beauty of a language-based interface. Expressions can contain other expressions in a way similar to how subsentences in human languages are nested—a subsentence can contain its own subsentences, and so on. This allows us to build expressions that describe arbitrarily complex computations. If an expression corresponds to a sentence fragment, a JavaScript statement corresponds to a full sentence. A program is a list of statements. The simplest kind of statement is an expression with a semicolon after it. This is a program: &lt;br&gt;
&lt;code&gt;1;&lt;/code&gt; &lt;code&gt;!false;&lt;/code&gt; It is a useless program, though.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;An expression can be content to just produce a value, which can then be used by the enclosing code. A statement stands on its own, so it amounts to something only if it affects the world. It could display something on the screen—that counts as changing the world—or it could change the internal state of the machine in a way that will affect the statements that come after it. These changes are called &lt;strong&gt;side effects&lt;/strong&gt;. The statements in the previous example just produce the values 1 and true and then immediately throw them away. This leaves no impression on the world at all. When you run this program, nothing observable happens.&lt;/em&gt;"&lt;/p&gt;

&lt;p&gt;They both agree that:&lt;/p&gt;

&lt;p&gt;(Statements &amp;gt; Expressions)&lt;/p&gt;

&lt;p&gt;&amp;amp;&amp;amp;&lt;/p&gt;

&lt;p&gt;Statements are statements because they end with a semi-colon, definitely defying Logic, but looking at it deeply, you see that it definitely in a way still has logic, because &lt;code&gt;1;&lt;/code&gt; as a statement doesn't make "sense" but according to logic, it has to equate to true or false, JS does this by converting it to boolean in different cases to fulfill this part of logic (truthy, falsy comes in)&lt;/p&gt;

&lt;p&gt;However JS does its best to fulfill this logic, there are cases where JS fails to do this and throws up an error.&lt;br&gt;
E.g, &lt;code&gt;b * 2;&lt;/code&gt;&lt;br&gt;
This program throws an error when we try to log it on to the console that it "can't fulfill the logic of evaluating to true or false" as it fails to find the value of b variable expression assuming it was never set.&lt;/p&gt;

&lt;p&gt;Looking at this, we see that JS and many other languages are still very much less sophisticated than the human brain in terms of reason as it requires a condition from programmer to make it reason and to make it reason requires lots of conditions underneath, the more reason it gains, the more conditions. &lt;/p&gt;

&lt;p&gt;That's it. &lt;strong&gt;Reason&lt;/strong&gt;. Not speed, durability, reliability, but reason. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>logic</category>
      <category>devjournal</category>
    </item>
    <item>
      <title>Nodejs: cd my-journey00</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Mon, 02 May 2022 19:45:21 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/nodejs-cd-my-journey00-3d91</link>
      <guid>https://dev.to/adebiyiitunuayo/nodejs-cd-my-journey00-3d91</guid>
      <description>&lt;p&gt;Last night I wrote my very first Nodejs program, server (they wouldn't let me call it program for buzzword sake) on port 8080 walking to the restroom on a 16gigabyte ROM, 1 thousand megabyte RAM inside the 9th version of the Android distro within the Termux CLI, ladies and gentlemen, ItelA56.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hkr6te2lz14vokfn1gy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hkr6te2lz14vokfn1gy.png" alt="Node.js runtime on Termux" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fouvgqdkq5txcnh2jzku6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fouvgqdkq5txcnh2jzku6.png" alt="Node file initiated" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1emh4kzivdmwm0tvu6e1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1emh4kzivdmwm0tvu6e1.png" alt="Node server running on port8080" width="480" height="960"&gt;&lt;/a&gt;&lt;br&gt;
It does a pretty neat job. Last night was the first time I had any experience with &lt;em&gt;backend&lt;/em&gt;, I must say the logic in it is fine, very fine. Prior to this, I had always dwelled on the &lt;em&gt;frontend&lt;/em&gt; of the Web and only done anything Terminal related on a desktop OS and lightweight android compilers for other programming languages. &lt;/p&gt;

&lt;p&gt;All these wouldn't had made sense to me if I read this to myself yesterday but it all makes sense now. &lt;em&gt;Backend&lt;/em&gt; logic. &lt;/p&gt;

&lt;p&gt;Today I learned about "&lt;strong&gt;Node Modules&lt;/strong&gt;" and what they are, they are like JavaScript libraries &lt;em&gt;(like the Math library with Objects and methods, like the react library used within the head of an html file)&lt;/em&gt; which can be imported and exported using a &lt;em&gt;method&lt;/em&gt;, &lt;strong&gt;require()&lt;/strong&gt; to call it.&lt;/p&gt;

&lt;p&gt;Quick check: While searching for definition of a JS library even though I "knew" it I saw a blog post of &lt;a href="//Skillcrush.com"&gt;skillcrush&lt;/a&gt; on the Google results display say: &lt;em&gt;"JavaScript libraries are like pieces of furniture that add style and function to an already constructed house. Frameworks, on the other hand, are a template you use to build the house itself.&lt;/em&gt;" And that makes sense in the comparison with the Math library and React library. They add to, so I don't have to "reinvent the wheel". &lt;/p&gt;

&lt;p&gt;I also learned that a module is different from the Nodejs file, the node file as I've observed carries the listen &lt;em&gt;method&lt;/em&gt;, &lt;strong&gt;listen()&lt;/strong&gt;. Wait I missed one part. There's a module called "http" which is an inbuilt module that allows messages to be sent via HTTP (Hypertext Transfer Protocol) through a server  that be included (require(d)) to the main nodejs file in order to be able to create a server, because it contains the &lt;strong&gt;createserver()&lt;/strong&gt; &lt;em&gt;method&lt;/em&gt; and &lt;strong&gt;listen()&lt;/strong&gt; &lt;em&gt;method&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;To call use a module, the &lt;em&gt;require&lt;/em&gt; method is required and storing that &lt;em&gt;required&lt;/em&gt; module in a variable to used with methods.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;example&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;//require(d) http module is stored in the variable, example.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using this information, I created a nodejs file (edited the &lt;em&gt;Hello, World!&lt;/em&gt; out) and a module file in the same folder and exported it to the main file using the "exports" keyword in the module code so as to enable it function "outside" within a server code. The module was a JS program to display the current date and time using the date() method. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2w3f6g066n6gwosrzp9m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2w3f6g066n6gwosrzp9m.png" alt="Node-file-source-code" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyzdhzcnslqcfnga0tf85.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyzdhzcnslqcfnga0tf85.png" alt="Node-module" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;&lt;em&gt;This is logic and sheer programming, the backend.&lt;br&gt;
 This is the closest you can be to machine.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Things learned: Logic, Import, export, modules, Library, Framework, Nodejs, backend, server. &lt;/p&gt;

&lt;p&gt;Resource used: &lt;a href="//w3schools.com"&gt;W3Schools&lt;/a&gt;, &lt;br&gt;
 &lt;a href="//Skillcrush.com"&gt;Skillcrush&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Node (from the Latin word nodus, meaning to knot, an intersection, an edge, a point, a lump.) is a basic unit of a data structure. In graph theory, a graph is a way to describe many things which have relationships. The things are called nodes, the relationships connecting the nodes are called edges. Connecting edges, points, Node. Nodejs. &lt;/p&gt;

&lt;p&gt;Day 1 of Problem solving, backend. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>programming</category>
      <category>android</category>
    </item>
    <item>
      <title>How to Create a SpringBoot App.</title>
      <dc:creator>FFFF:0000h</dc:creator>
      <pubDate>Thu, 20 May 2021 18:12:51 +0000</pubDate>
      <link>https://dev.to/adebiyiitunuayo/how-to-create-a-springboot-app-3o55</link>
      <guid>https://dev.to/adebiyiitunuayo/how-to-create-a-springboot-app-3o55</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1vi1oay1dusgqzarbpi1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1vi1oay1dusgqzarbpi1.png" title="Tutorial Logo" alt="SpringBoot Tutorial Logo by grokonez.com" width="750" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  This being my first post on here, forgive any error or lack of sophistication. :)
&lt;/h5&gt;

&lt;p&gt;So, there are about &lt;strong&gt;4&lt;/strong&gt; ways &lt;strong&gt;I KNOW&lt;/strong&gt; by/in which you can create a SpringBoot Web App &lt;strong&gt;AUTOMATICALLY&lt;/strong&gt; without having to write a single line of code for configuration, e.t.c.&lt;/p&gt;

&lt;p&gt;Namely: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;By installing extension(s) in VSCode(Virtual Studio Code)&lt;/li&gt;
&lt;li&gt;By using &lt;a href="https://start.spring.io/"&gt;start.spring.io's website&lt;/a&gt;, well your'e not creating the web app but the means to the web app.&lt;/li&gt;
&lt;li&gt;By using the STS(Spring Tool Suite) App &lt;/li&gt;
&lt;li&gt;By installing extension(s) in Intellij IDEA&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Okay so allow me break this down. 
I have only used the first two ways/methods, the last two have been confirmed by "sight seeing" :). I can most assuredly tell you that all 4 ways/methods work perfectly fine.&lt;/li&gt;
&lt;/ul&gt;

&lt;h6&gt;
  
  
  I will only show you how in the order of the no-brainer to the somewhat more brainer :), which are actually easy but for emphasis sake.
&lt;/h6&gt;

&lt;p&gt;You simply type into your browser "start.spring.io" without the (" ") just like that.&lt;br&gt;
This page shows up;&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvs5db0bq6n2w5nwkiijf.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvs5db0bq6n2w5nwkiijf.PNG" alt="Start.spring.io" width="800" height="459"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;VOILA!&lt;/strong&gt;&lt;br&gt;
You just go right ahead and give your project a name, and your dependencies, basically whatever suits you.&lt;/p&gt;

&lt;p&gt;Since i'm talking about &lt;strong&gt;Creating a Web App&lt;/strong&gt;, i'll be selecting two(2) dependecies,&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdhd2g9e9jf2osza3dyq.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftdhd2g9e9jf2osza3dyq.PNG" alt="Spring" width="800" height="460"&gt;&lt;/a&gt;&lt;br&gt;
not that it's a must to select &lt;strong&gt;TWO&lt;/strong&gt; but i believe they are necessary/core to the Web app. As you can see, I've named my project name and selected Maven as the Build Automation Tool for my Java project.&lt;/p&gt;

&lt;p&gt;Then you go right ahead by clicking the &lt;strong&gt;Generate&lt;/strong&gt; button, then a zip file is automatically downloaded. As shown below;&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F19p9to8errarp37ce4zz.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F19p9to8errarp37ce4zz.PNG" alt="Spring" width="800" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;that zip file is the key to our Web App, basically, that's our web app in a Zip file, YES i said it! :)&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmn7oeg1sl9klfh79z7tt.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmn7oeg1sl9klfh79z7tt.PNG" alt="contents of the zip file" width="800" height="462"&gt;&lt;/a&gt;&lt;br&gt;
Now that's that on the usage of the start.spring.io site, you can go right ahead importing(after extracting the zip file ofcourse.) it over to your Java supported IDE(Eclipse, VScode, Intellij IDEA, just to name a few.) and start kicking.&lt;/p&gt;

&lt;p&gt;Take a good look at the contents of your zip file, we'll be seeing same in the next method using VSCODE Extension download.&lt;/p&gt;

&lt;p&gt;*VSCODE&lt;/p&gt;




&lt;p&gt;Now, you have your VSCode installed, if you don't, download it via &lt;a href="https://visualstudio.microsoft.com/"&gt;Visual Studio&lt;/a&gt;&lt;br&gt;
So, you get things running, and you have this, as shown below;&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpmv0n4z3wbpekjqlmc67.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpmv0n4z3wbpekjqlmc67.PNG" alt="VSCODE" width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You are just a few steps closer to your Web App, Congratulations!&lt;/p&gt;

&lt;p&gt;You dive right in to your &lt;strong&gt;&lt;em&gt;Extensions&lt;/em&gt;&lt;/strong&gt; by clicking the Extensions tab(in the marked section) or using the Windows command CTRL+SHIFT+X, as shown below;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fod9j6pb5szff71lyy1az.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fod9j6pb5szff71lyy1az.PNG" alt="EXTENSIONS" width="618" height="862"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then search for the Extensions; &lt;strong&gt;SpringBoot&lt;/strong&gt; and &lt;strong&gt;Java&lt;/strong&gt;(as it will be necessary for running the JAVA web app you want), you want to install the &lt;strong&gt;SpringBoot Extension Pack&lt;/strong&gt; and the &lt;strong&gt;Java Extension Pack&lt;/strong&gt;&lt;br&gt;
 As at the time of Writing this Post, I think i've seen something better(A combination of both extension packs and much more by Publisher &lt;strong&gt;Loaine Groner&lt;/strong&gt;) to install instead of the the aformentioned, it is shown Below;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsglt0mycy4tnijsi6bs0.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsglt0mycy4tnijsi6bs0.PNG" alt="VSCODE" width="800" height="476"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once installed, you go right ahead by using the Command Palette by pressing the command; CTRL+SHIFT+P or simply by Pressing the F1 key on Windows only, then search for &lt;strong&gt;spring initialzr&lt;/strong&gt;, as shown below;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl0jf6dgc6d5zjnq039f9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl0jf6dgc6d5zjnq039f9.png" alt="Spring" width="800" height="477"&gt;&lt;/a&gt;&lt;br&gt;
Then click on the &lt;strong&gt;Create a Maven Project&lt;/strong&gt; or whichever suits you, just like the &lt;a href="//start.spring.io"&gt;start.spring.io&lt;/a&gt;'s website we looked into just moments ago, but this is in the UI of VSCode.&lt;/p&gt;

&lt;p&gt;Then your'e asked to select Maven version, e.t.c, pretty much all what you did in the first case of the site.&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3ml9pjgk7uj5drc5zth.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3ml9pjgk7uj5drc5zth.PNG" alt="Spring" width="800" height="321"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fadcumjel4aboymjo8ua3.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fadcumjel4aboymjo8ua3.PNG" alt="Spring" width="800" height="245"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fer8ftt2y6tnqhhivfvgi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fer8ftt2y6tnqhhivfvgi.PNG" alt="Spring" width="800" height="228"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft97p4vzqsoi97qiofor8.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft97p4vzqsoi97qiofor8.PNG" alt="Spring" width="800" height="203"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo48shwor2lkio0vt0nks.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo48shwor2lkio0vt0nks.PNG" alt="Spring" width="800" height="219"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F727c7dg92ll783fyf5bp.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F727c7dg92ll783fyf5bp.PNG" alt="Spring" width="800" height="255"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffeqdancxh11ejr9rzfme.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffeqdancxh11ejr9rzfme.PNG" alt="Spring" width="800" height="357"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Here we select our dependencies, WEB and DEV Tools
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmau6w638swfjwdjbhlzi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmau6w638swfjwdjbhlzi.PNG" alt="Spring" width="800" height="443"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Here we are asked to generate our Web App files into a location just like the one of the site but here, the difference is that, VScode's come extracted(prepared).
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fedt10nmm2gjbgmjsqxok.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fedt10nmm2gjbgmjsqxok.PNG" alt="Spring" width="317" height="320"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There you have it, your files are ready, everything's ready, just to click a few button's all.&lt;/p&gt;

&lt;p&gt;After that, you should check your VSCODE and import the &lt;strong&gt;&lt;em&gt;java project&lt;/em&gt;&lt;/strong&gt;, or you open the folder in your VSCODE. You should be seeing something like this on the Side(Explorer)bar/section of your VSCODE;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fux4mpdfe0j0wyz8k4mv3.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fux4mpdfe0j0wyz8k4mv3.PNG" alt="VSCODE" width="800" height="697"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Well, we are just but a handful of steps away, click on the Tree drop down of the &lt;strong&gt;&lt;em&gt;src&lt;/em&gt;&lt;/strong&gt; till you get to:&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fynfvtt73cgz7n0i9ouaj.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fynfvtt73cgz7n0i9ouaj.PNG" alt="SPRING" width="800" height="660"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we are that point! Irrevocably committed to booting up our WEB APP!&lt;br&gt;
Then We click &lt;strong&gt;&lt;em&gt;run&lt;/em&gt;&lt;/strong&gt;, you should see it in the code, or you just right click and run application.&lt;/p&gt;

&lt;p&gt;Then you should see your SpringBoot web app coming to life as a Terminal will be displayed for you to see the fruit of your effort. Your BACK-END is Alive!&lt;br&gt;
 &lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnyadm3smjtjy7nbn84j6.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnyadm3smjtjy7nbn84j6.PNG" alt="Spring" width="800" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you just about scroll down in your Terminal Bar, you'd notice your web app is running on &lt;strong&gt;&lt;em&gt;Port 8080&lt;/em&gt;&lt;/strong&gt;.&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmxpootkawds9xp2kmwnk.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmxpootkawds9xp2kmwnk.PNG" alt="8080" width="800" height="197"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, let's check that to be sure we really are live on our browser, go ahead and type &lt;strong&gt;&lt;em&gt;localhost:8080&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0sf1ea5siftmcwzck3ca.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0sf1ea5siftmcwzck3ca.PNG" alt="Host" width="800" height="394"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Voila!!&lt;br&gt;
We are Up.&lt;/p&gt;

&lt;p&gt;Although, you'll see a fallback error message, what this means is;&lt;br&gt;
 'Your'e seeing this because you haven't stated what you want to see'.&lt;/p&gt;

&lt;p&gt;So, there you have it folks, that's how you create a SpringBoot Web App.&lt;/p&gt;

&lt;p&gt;check out my Github for code&lt;br&gt;
&lt;a href="https://github.com/Artymanprince/SpringBoot-Setup-Tutorial"&gt;Github&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope this helps someone.&lt;br&gt;
Thank you.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>vscode</category>
      <category>java</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
