<?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: Somadina </title>
    <description>The latest articles on DEV Community by Somadina  (@somadinag).</description>
    <link>https://dev.to/somadinag</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%2F3266439%2Fe605a369-66c2-4463-9a2a-2e8c3a92d27e.jpg</url>
      <title>DEV Community: Somadina </title>
      <link>https://dev.to/somadinag</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/somadinag"/>
    <language>en</language>
    <item>
      <title>#How I Self-Taught, Battle-Tested: My Journey to Becoming a Technical Writer And Developer</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Fri, 20 Mar 2026 07:47:46 +0000</pubDate>
      <link>https://dev.to/somadinag/how-i-self-taught-battle-tested-my-journey-to-becoming-a-technical-writer-and-developer-2j5a</link>
      <guid>https://dev.to/somadinag/how-i-self-taught-battle-tested-my-journey-to-becoming-a-technical-writer-and-developer-2j5a</guid>
      <description>&lt;h2&gt;
  
  
  From Self-Taught to Service-Ready: My Journey into Technical Writing and Development
&lt;/h2&gt;

&lt;p&gt;A book with 500 pages starts with the first page.  &lt;/p&gt;

&lt;p&gt;This story is the first page:  &lt;/p&gt;

&lt;p&gt;I’ve spent the last two years and few months doing what most people thought was unrealistic — building myself into a technical writer and developer, without waiting for a job, title, or formal training.  &lt;/p&gt;

&lt;p&gt;No classroom set the path. I imagined the future I wanted, then walked straight into it — step by step.  &lt;/p&gt;

&lt;p&gt;I practiced technical writing without being hired. I wrote as if I already had clients. I studied how companies structure their docs, their tones, and how they serve users. I wasn’t passive — I practiced every single concept.  &lt;/p&gt;

&lt;p&gt;I explored &lt;strong&gt;HTML, CSS, and JavaScript&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
I learned how they connect — not just by reading, but by building.  &lt;/p&gt;

&lt;p&gt;I wiped Windows from my own system, installed Ubuntu, and learned to navigate Linux terminal commands. I studied file hierarchies, understood bootloaders, BIOS, OS structure, and how the machine speaks before the desktop even boots.  &lt;/p&gt;

&lt;p&gt;I broke down the common threads between programming languages — variables, loops, functions, conditionals. I explored computer networks, hardware, and software layers.&lt;br&gt;&lt;br&gt;
Then I went deeper — into &lt;strong&gt;UX/UI design&lt;/strong&gt;, thinking like the user. I even practiced animation and visual storytelling, trying to draw what I saw in my head when words weren’t enough.  &lt;/p&gt;

&lt;p&gt;I did all of these with:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No formal teacher
&lt;/li&gt;
&lt;li&gt;No structured support system
&lt;/li&gt;
&lt;li&gt;Just by reading any book I came across and felt could help, visiting related websites, watching videos, and practicing with my low-life laptop
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I isolated myself for this course — not out of loneliness, but because focus mattered more than comfort.  &lt;/p&gt;

&lt;p&gt;I left behind friends, distractions, noise — just to stay on course.&lt;br&gt;&lt;br&gt;
I endured poverty.&lt;br&gt;&lt;br&gt;
I experienced hardship.&lt;br&gt;&lt;br&gt;
But I never stopped. Because I had one goal in mind:  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;To become valuable.&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;To serve.&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;To earn the right to be rewarded.&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;Because I paid the price in sweat, patience, and practice, it should not surprise anyone when I solve problems with focus,&lt;br&gt;&lt;br&gt;
when I break things down,&lt;br&gt;&lt;br&gt;
when I write and think with clarity.&lt;br&gt;&lt;br&gt;
Because I built this mindset — brick by brick.  &lt;/p&gt;

&lt;p&gt;Now, I am ready to offer my skills, my writing, and my experience — not as a beginner who’s guessing, but as someone who has lived the discipline required to succeed.  &lt;/p&gt;

&lt;p&gt;Whether as a &lt;strong&gt;technical writer, developer, or documentation analyst&lt;/strong&gt; — I’m not just starting.&lt;br&gt;&lt;br&gt;
I’ve already done the reps.&lt;br&gt;&lt;br&gt;
And I’m just getting warmed up.  &lt;/p&gt;

&lt;p&gt;What are you doing with your time? And what are you building with your time? &lt;strong&gt;Start early, finish rich.&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;I shared this story to show you that you can grow when their eyes are not watching if you are determined.  &lt;/p&gt;

&lt;p&gt;What I want you to get out of this story is this: set your goals, and when things don't seem to be aligning with them, relax, watch, re-strategize, and still pursue your goals.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Be flexible and focused.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
      <category>devbugsmash</category>
    </item>
    <item>
      <title>A digestible Breakdown of web servers</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Fri, 20 Mar 2026 07:03:32 +0000</pubDate>
      <link>https://dev.to/somadinag/a-digestible-breakdown-of-web-servers-37f8</link>
      <guid>https://dev.to/somadinag/a-digestible-breakdown-of-web-servers-37f8</guid>
      <description>&lt;p&gt;Even if you are not familiar with all the servers in the world, you must have heard of a &lt;strong&gt;web server&lt;/strong&gt;. It is the most common type of server. In fact, when developers want to teach client–server relationships, the web server is the most prevalent illustration.&lt;/p&gt;

&lt;p&gt;But did you know that beyond web servers, there are other types of servers that are crucial parts of the backbone of the internet?&lt;/p&gt;

&lt;p&gt;That is what I will be listing out, along with their uncommon functions.&lt;/p&gt;

&lt;h2&gt;
  
  
  We have:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Database servers:&lt;/strong&gt; They manage data storage and retrieval, e.g., the server that saves your Facebook profile.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Mail servers:&lt;/strong&gt; They handle email transmission, e.g., the servers responsible for sending and receiving emails from Gmail, AOL, or even Yahoo.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;File servers:&lt;/strong&gt; They centralize file storage. Let’s talk about this one a bit, because it looks useless at first glance. Everything about computers is a file, which implies that a mail server, for example, also stores files and allows retrieval—likewise a database server, etc.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So why is this one called a file server, and what is its importance and function?&lt;/p&gt;

&lt;p&gt;A file server is a dedicated computer on a network that acts as a centralized repository for storing, managing, and sharing files, documents, and data among authorized users.&lt;/p&gt;

&lt;p&gt;While it is true that almost everything in computing is a file—and other servers like mail servers do store files—a file server is specialized for general-purpose file management and for collaboration tasks rather than for processing application logic or mail transmission.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Google Drive and SharePoint are perfect examples of services built on top of this type of server.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Other types include:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Proxy servers:&lt;/strong&gt; Intermediaries for web traffic.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;DNS servers:&lt;/strong&gt; Translate domain names into IP addresses.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Application servers:&lt;/strong&gt; Run software applications.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;FTP servers:&lt;/strong&gt; Facilitate file transfer between systems.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Game servers:&lt;/strong&gt; Host multiplayer online games.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Virtual/Cloud servers:&lt;/strong&gt; Software-based servers running on physical hardware that provide scalable and flexible computing resources.
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;These servers are designed for specific tasks to manage, secure, and distribute resources efficiently within a network.&lt;/p&gt;

&lt;p&gt;Their interactions, combined with carrying out their specific purposes, are what make the internet smooth in your hands. They are the background engines, dispersed in remote areas, yet still able to reach you with their services whenever you need them.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;More content about computers, networking, and software development is coming. So always check and stick around. Thank you.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>devops</category>
    </item>
    <item>
      <title>Why Web Development Won Me Over (After Comparing It to Apps)</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Fri, 27 Feb 2026 12:20:35 +0000</pubDate>
      <link>https://dev.to/somadinag/why-web-development-won-me-over-after-comparing-it-to-apps-e9o</link>
      <guid>https://dev.to/somadinag/why-web-development-won-me-over-after-comparing-it-to-apps-e9o</guid>
      <description>&lt;h1&gt;
  
  
  Why I Love Websites Is Deeper Than You Think
&lt;/h1&gt;

&lt;p&gt;Although am actively learning app development, but it happened that I did an extensive research—a deep, thorough study—on the correlation between apps (&lt;strong&gt;Android, iOS, and Windows&lt;/strong&gt;) and website development.&lt;/p&gt;

&lt;p&gt;I explored whether you can build an app using tools meant for building a website. The answer is &lt;strong&gt;no&lt;/strong&gt;. You can't build an app with Flutterwave.&lt;/p&gt;

&lt;p&gt;Each device—&lt;strong&gt;iOS, Android, and Windows&lt;/strong&gt;—has its specific frameworks and languages for app development.&lt;/p&gt;

&lt;h2&gt;
  
  
  So Why Do I Love Websites?
&lt;/h2&gt;

&lt;p&gt;Because they are &lt;strong&gt;browser-oriented&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Any device with a browser can access your website, which essentially contains information about your business and services.&lt;/p&gt;

&lt;p&gt;But for apps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If it's developed for &lt;strong&gt;Android&lt;/strong&gt;, it won't be available on &lt;strong&gt;iOS&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Each platform requires its own development approach.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Only Limitation?
&lt;/h2&gt;

&lt;p&gt;The only limitation websites have is if you intentionally disable &lt;strong&gt;JavaScript&lt;/strong&gt; or &lt;strong&gt;CSS&lt;/strong&gt; in your browser.&lt;/p&gt;

&lt;p&gt;The consequence:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Interactivity may be lost
&lt;/li&gt;
&lt;li&gt;Styling may be lost
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But that’s not a deal-breaker for me.&lt;/p&gt;




&lt;p&gt;Although I can build apps, I especially love working with &lt;strong&gt;websites&lt;/strong&gt;—particularly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Backend logic
&lt;/li&gt;
&lt;li&gt;Search Engine Optimization (SEO)
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Let’s Build Something Amazing
&lt;/h2&gt;

&lt;p&gt;Do you want a website for your business with groundbreaking &lt;strong&gt;UX designs&lt;/strong&gt; that leave users speechless for 39 minutes?&lt;/p&gt;

&lt;p&gt;Reach out so we can discuss and create your perfect solution.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>ai</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Mobile Network Turns Off During Calls — Has Anyone Experienced This?</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Fri, 02 Jan 2026 22:06:23 +0000</pubDate>
      <link>https://dev.to/somadinag/mobile-network-turns-off-during-calls-has-anyone-experienced-this-5034</link>
      <guid>https://dev.to/somadinag/mobile-network-turns-off-during-calls-has-anyone-experienced-this-5034</guid>
      <description>&lt;p&gt;Has anyone experienced this before?&lt;/p&gt;

&lt;p&gt;Whenever I make a call, my mobile network switches off. Once the call ends, the network comes back on again.&lt;/p&gt;

&lt;p&gt;Is this because I’m in Nigeria, or what? Has anyone else had this kind of experience? It keeps happening, and it really bothers me that my data goes off whenever I make calls.&lt;/p&gt;

&lt;h2&gt;
  
  
  Investigating the Problem
&lt;/h2&gt;

&lt;p&gt;I hadn’t looked into it before, but I finally decided to check the problem. I knew it would be one of three things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Network
&lt;/li&gt;
&lt;li&gt;Phone
&lt;/li&gt;
&lt;li&gt;An unknown application buried in my phone causing the issue
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What Did I Find?
&lt;/h2&gt;

&lt;p&gt;I discovered that my phone was falling back to &lt;strong&gt;2G/3G during calls&lt;/strong&gt;, which disables mobile data. This happens when &lt;strong&gt;VoLTE is off or not supported&lt;/strong&gt; on a network or SIM.&lt;/p&gt;

&lt;p&gt;You can confirm this by &lt;strong&gt;long-pressing your mobile data icon&lt;/strong&gt; and checking your network settings.&lt;/p&gt;

&lt;p&gt;That explained everything.&lt;/p&gt;

&lt;h2&gt;
  
  
  Other Possible Causes
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;SIM configuration issues
&lt;/li&gt;
&lt;li&gt;Network configuration issues
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How I Fixed Mine
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Turned on &lt;strong&gt;VoLTE&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;Settings → SIM cards &amp;amp; mobile networks → Enable VoLTE&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Selected &lt;strong&gt;4G/LTE&lt;/strong&gt; as the preferred network mode&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  If the Issue Still Persists
&lt;/h2&gt;

&lt;p&gt;Try the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Update your phone software
&lt;/li&gt;
&lt;li&gt;Ask your network provider to activate &lt;strong&gt;VoLTE&lt;/strong&gt; on your SIM
&lt;/li&gt;
&lt;li&gt;Replace old SIM cards (upgrade to a 4G SIM)
&lt;/li&gt;
&lt;li&gt;Reset network settings if necessary
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Hope this helps someone.&lt;/p&gt;

</description>
      <category>networking</category>
      <category>mobile</category>
      <category>android</category>
    </item>
    <item>
      <title>You Don’t Know What You Can Achieve Until You Try: My Journey from Technical Writing to UX/UI and Coding</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Thu, 01 Jan 2026 14:55:49 +0000</pubDate>
      <link>https://dev.to/somadinag/you-dont-know-what-you-can-achieve-until-you-try-my-journey-from-technical-writing-to-uxui-and-1cf9</link>
      <guid>https://dev.to/somadinag/you-dont-know-what-you-can-achieve-until-you-try-my-journey-from-technical-writing-to-uxui-and-1cf9</guid>
      <description>&lt;h1&gt;
  
  
  You Don’t Truly Know What You Can Achieve Until You Try
&lt;/h1&gt;

&lt;p&gt;You don’t truly know what you can achieve &lt;strong&gt;until you try&lt;/strong&gt;. It’s easy to look at something and think, &lt;em&gt;“I can do this.”&lt;/em&gt; But when the moment comes to actually perform, you will realize just how much your thinking process wasn’t ready for what seemed simple.  &lt;/p&gt;

&lt;p&gt;When you try, you either &lt;strong&gt;continue or stop&lt;/strong&gt;. That’s the essence of what I am saying.  &lt;/p&gt;




&lt;h2&gt;
  
  
  My Journey: From Technical Writing to UX/UI and Programming
&lt;/h2&gt;

&lt;p&gt;Let me give you an example. I started as a technical writer and ended in the &lt;strong&gt;cobwebs of UX/UI design and programming&lt;/strong&gt;. I could have stayed a technical writer—studying website documentation, improving content, maybe replacing it entirely—but I wanted more.  &lt;/p&gt;

&lt;p&gt;I wanted to understand &lt;strong&gt;computer programs and workflows&lt;/strong&gt;. And to write about something I didn’t understand, I had to learn it.  &lt;/p&gt;




&lt;h2&gt;
  
  
  Starting with Front-End Development
&lt;/h2&gt;

&lt;p&gt;I began with front-end development: &lt;strong&gt;HTML, CSS, JavaScript&lt;/strong&gt;. At first, it felt overwhelming. The real challenge wasn’t the code—it was &lt;strong&gt;my own thinking&lt;/strong&gt;.  &lt;/p&gt;

&lt;p&gt;I struggled to connect front-end with back-end; learning one seemed to erase the other from my memory. I nearly gave up.  &lt;/p&gt;




&lt;h2&gt;
  
  
  What Kept Me Going
&lt;/h2&gt;

&lt;p&gt;What kept me going wasn’t how easy it looked at first glance—it was &lt;strong&gt;consistency&lt;/strong&gt;. Step by step, I pushed through. And now, the reward is real.  &lt;/p&gt;

&lt;p&gt;The knowledge I gained is invaluable. The principles of technical writing—&lt;strong&gt;concision, scannability, simplicity, comprehension&lt;/strong&gt;—still matter, but applying them when writing for programmers and engineers requires more.  &lt;/p&gt;

&lt;p&gt;That &lt;strong&gt;“more”&lt;/strong&gt; is where the fun begins, and that fun is what I am having.  &lt;/p&gt;




&lt;h2&gt;
  
  
  AI as a Partner
&lt;/h2&gt;

&lt;p&gt;Through this journey, &lt;strong&gt;AI hasn’t just been a tool; it’s been a partner&lt;/strong&gt;. And it all started with a single try.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>webdev</category>
      <category>ai</category>
      <category>devrel</category>
    </item>
    <item>
      <title># What Exactly Is a Computer Port, What Can Be Found There, and How to See All Existing Ports of a Computer?</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Tue, 18 Nov 2025 06:10:52 +0000</pubDate>
      <link>https://dev.to/somadinag/-what-exactly-is-a-computer-port-what-can-be-found-there-and-how-to-see-all-existing-ports-of-a-2426</link>
      <guid>https://dev.to/somadinag/-what-exactly-is-a-computer-port-what-can-be-found-there-and-how-to-see-all-existing-ports-of-a-2426</guid>
      <description>&lt;h2&gt;
  
  
  A Computer Port Defined
&lt;/h2&gt;

&lt;p&gt;A computer port is a physical or virtual interface that enables data to flow between a computer and external devices, or between software applications and network connections. They are essential for communication and connectivity.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Exactly Is a Computer Port?
&lt;/h2&gt;

&lt;p&gt;Computer ports can be understood from two primary contexts:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Physical ports (hardware)&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Virtual/logical ports (software networking)&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Physical Ports (Hardware)
&lt;/h2&gt;

&lt;p&gt;These are the physical sockets on the computer's casing where you plug in cables and devices. They provide a standardized mode of connection to peripherals like monitors, keyboards, mice, printers, and external hard drives. Examples include &lt;strong&gt;USB, HDMI, Ethernet, and audio jacks&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Virtual/Logical Ports (Software/Networking)
&lt;/h2&gt;

&lt;p&gt;These are not physical sockets but numerical identifiers (ranging from 0 to 65,535) used by networking protocols, e.g., &lt;strong&gt;TCP, UDP&lt;/strong&gt;, and so on, to direct data to the correct software application on a computer.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Web browsers typically use &lt;strong&gt;port 80 or 443&lt;/strong&gt;, which is part of the 65,535 numerical identifiers, for web traffic.
&lt;/li&gt;
&lt;li&gt;Email clients use ports like &lt;strong&gt;25 or 110&lt;/strong&gt; to direct network traffic of specific email protocols like &lt;strong&gt;SMTP, POP3, or IMAP&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What Could Be Found There?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  At a Physical Port
&lt;/h3&gt;

&lt;p&gt;You can find:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The connection point itself
&lt;/li&gt;
&lt;li&gt;The cable connector that plugs into it (e.g., a USB-C cable or HDMI)
&lt;/li&gt;
&lt;li&gt;The peripheral device attached to it (e.g., a monitor, printer, or external drive)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The port provides an interface for data transfer and sometimes power delivery.&lt;/p&gt;

&lt;h3&gt;
  
  
  At a Virtual/Logical Port
&lt;/h3&gt;

&lt;p&gt;You find the data stream associated with a specific running application or network service.&lt;br&gt;&lt;br&gt;
The port number acts as a &lt;strong&gt;“mailing address”&lt;/strong&gt; to ensure that incoming network traffic reaches the correct program.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data arriving on &lt;strong&gt;port 22&lt;/strong&gt; is directed to the &lt;strong&gt;Secure Shell (SSH)&lt;/strong&gt; service.
&lt;/li&gt;
&lt;li&gt;Data on &lt;strong&gt;port 3389&lt;/strong&gt; goes to the &lt;strong&gt;Remote Desktop Protocol (RDP)&lt;/strong&gt; service.&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  How to See All the Ports?
&lt;/h2&gt;
&lt;h3&gt;
  
  
  To See Physical Ports
&lt;/h3&gt;

&lt;p&gt;Simply look at the front, back, and sides of your desktop computer, laptop, or other device.&lt;br&gt;&lt;br&gt;
Those holes are ports. You will visibly see the different shapes and types of connectors.&lt;/p&gt;


&lt;h2&gt;
  
  
  To See Virtual/Logical Ports
&lt;/h2&gt;

&lt;p&gt;You need to use command-line tools within your operating system. These tools display which ports are open, listening for connections, and which applications are using them.&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Windows&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Open the Command Prompt or PowerShell and type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;netstat -ano
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command lists all active connections and listening ports, along with the Process ID (PID) of the application using them.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;macOS and Linux&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Use any of these commands in the Terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;netstat -tuln
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ss -tuln
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;lsof -i
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  In Conclusion
&lt;/h2&gt;

&lt;p&gt;You can see the physical ports directly, but you cannot directly see the virtual/logical ports except by using command-line tools that depend on the operating system you are using.&lt;/p&gt;

&lt;p&gt;However, you should use your understanding of how the physical ports work to grasp the idea behind the virtual version. Just as you need cables to connect your peripherals like a monitor or mouse, you need virtual ports to connect two machines wirelessly, and those ports are numbered from &lt;strong&gt;1 to 65,535&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>linux</category>
    </item>
    <item>
      <title>Can the OS (Operating System) of Android Be Changed — Maybe to iPhone.Just as we can change Desktop OS (Operating System)?</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Mon, 03 Nov 2025 07:25:33 +0000</pubDate>
      <link>https://dev.to/somadinag/can-the-os-operating-system-of-android-be-changed-maybe-to-iphonejust-as-we-can-change-desktop-149f</link>
      <guid>https://dev.to/somadinag/can-the-os-operating-system-of-android-be-changed-maybe-to-iphonejust-as-we-can-change-desktop-149f</guid>
      <description>&lt;p&gt;Lets tacklethis rough question together.&lt;/p&gt;

&lt;p&gt;The OS on Android can be changed — it’s called installing a &lt;strong&gt;custom ROM&lt;/strong&gt; (Read-Only Memory).&lt;/p&gt;

&lt;p&gt;Let me give your curious mind a short, clear overview of how to change an Android OS and install a custom ROM.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚠️ Warning
&lt;/h2&gt;

&lt;p&gt;Be careful — this process can erase all your data or break your phone if done incorrectly.&lt;/p&gt;




&lt;h2&gt;
  
  
  Steps to Change Android OS (Install a Custom ROM)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Backup Your Data&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;I mean everything first: contacts, photos, and files — because replacement of your OS is capable of wiping out your cherished data, rendering you information-less.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;Unlock the Bootloader&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Go to your phone’s &lt;strong&gt;Settings → About phone → tap OS version 7 times&lt;/strong&gt; to enable &lt;strong&gt;Developer options&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;After that, go back to your settings, scroll down and find &lt;strong&gt;Developer options&lt;/strong&gt;, then enable &lt;strong&gt;OEM unlocking&lt;/strong&gt; and &lt;strong&gt;USB debugging&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;strong&gt;Use Your PC and Command&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Install a custom recovery (like &lt;strong&gt;TWRP&lt;/strong&gt;).&lt;br&gt;&lt;br&gt;
Ensure you download the correct TWRP image for your phone.&lt;/p&gt;

&lt;p&gt;Run the command:&lt;/p&gt;

&lt;p&gt;fastboot oem unlock&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(This wipes your device.)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In case you don't know what &lt;strong&gt;Fastboot&lt;/strong&gt; is — it is a diagnostic or repair tool that can flash firmware or restore an operating system.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. &lt;strong&gt;Boot into Fastboot Mode and Flash It&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;fastboot flash recovery twrp.img&lt;/p&gt;

&lt;h3&gt;
  
  
  5. &lt;strong&gt;Download a Custom ROM&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Examples: &lt;strong&gt;LineageOS&lt;/strong&gt;, &lt;strong&gt;Pixel Experience&lt;/strong&gt;, &lt;strong&gt;Evolution X&lt;/strong&gt;, etc.  &lt;/p&gt;

&lt;p&gt;Also download &lt;strong&gt;GApps&lt;/strong&gt; if you want Google services.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. &lt;strong&gt;Flash the ROM&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Boot into &lt;strong&gt;TWRP recovery&lt;/strong&gt;, which is your recovery app you must first have downloaded and activated.&lt;/p&gt;

&lt;p&gt;Wipe &lt;strong&gt;data&lt;/strong&gt;, &lt;strong&gt;cache&lt;/strong&gt;, and &lt;strong&gt;system&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Tap &lt;strong&gt;Install&lt;/strong&gt;, choose the ROM zip, and swipe to flash.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(Optionally, you can flash GApps.)&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  7. &lt;strong&gt;Reboot the Device&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Once done, reboot your phone — it’ll start with the new OS.&lt;/p&gt;




&lt;h2&gt;
  
  
  Is the Tool and Method for Flashing Your Phone Dependent on the Model and Phone Brand?
&lt;/h2&gt;

&lt;p&gt;Yes, it is phone brand and model dependent. Each Android device has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Different bootloader unlock methods
&lt;/li&gt;
&lt;li&gt;A unique recovery image (&lt;strong&gt;TWRP&lt;/strong&gt;)
&lt;/li&gt;
&lt;li&gt;Specific custom ROM builds
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, you must always use files and instructions made for your exact phone model (e.g., &lt;strong&gt;Samsung Galaxy A52&lt;/strong&gt; or &lt;strong&gt;Xiaomi Redmi Note 12&lt;/strong&gt;).&lt;br&gt;&lt;br&gt;
Using the wrong ones can break your phone.&lt;/p&gt;




&lt;h2&gt;
  
  
  Can You Change Android OS to iPhone OS?
&lt;/h2&gt;

&lt;p&gt;Because you change the OS of your Android doesn’t mean you can transit from your Android to iPhone. It must be another OS your device supports — and that will be within its ecosystem.&lt;/p&gt;

&lt;p&gt;Android and iOS are completely different operating systems — iOS is closed-source and made only for Apple hardware, while Android is both a closed and open-source operating system.&lt;br&gt;&lt;br&gt;
For example, &lt;strong&gt;AOSP (Android Open Source Project)&lt;/strong&gt; is open source, but Google’s proprietary store (like the &lt;strong&gt;Play Store&lt;/strong&gt;) is closed source.&lt;br&gt;&lt;br&gt;
&lt;em&gt;Did you catch the difference?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Besides, you can make Android &lt;strong&gt;look like iOS&lt;/strong&gt; using launchers, icon packs, and themes.&lt;br&gt;&lt;br&gt;
But you &lt;strong&gt;cannot install real iOS&lt;/strong&gt; on an Android phone.&lt;br&gt;&lt;br&gt;
Therefore, you can mimic iOS, but not replace Android with iOS.&lt;/p&gt;




&lt;h2&gt;
  
  
  So Why Can't You Change Android to iOS Since What We Are Changing Is the OS and the OS Was Claimed to Be Changeable?
&lt;/h2&gt;

&lt;p&gt;Good question — and here’s the short reason:&lt;br&gt;&lt;br&gt;
Even though Android’s OS can be changed, iOS isn’t compatible with Android hardware.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Closed Source&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Apple doesn’t release iOS code publicly, so no one can install or modify it for other devices — it is a closed-source system.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;Different Hardware Architecture&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;iPhones use Apple’s own chips and firmware, which work only with iOS.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;strong&gt;Secure Boot and Encryption&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;iOS only runs on devices that pass Apple’s hardware verification.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. &lt;strong&gt;Drivers and Firmware&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Android devices use different cameras, screens, radios, etc., and iOS has no drivers for them.&lt;/p&gt;




&lt;h3&gt;
  
  
  ✅ &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h3&gt;

&lt;h2&gt;
  
  
  So technically, Android can be changed — but only to other &lt;strong&gt;Android-based systems (custom ROMs)&lt;/strong&gt;, not iOS, because iOS simply won’t run on non-Apple hardware.
&lt;/h2&gt;

</description>
    </item>
    <item>
      <title>Breakdown of JavaScript cores concept in connection to html with examples</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Sun, 02 Nov 2025 17:56:20 +0000</pubDate>
      <link>https://dev.to/somadinag/breakdown-of-javascript-cores-concept-in-connection-to-html-with-examples-1oj3</link>
      <guid>https://dev.to/somadinag/breakdown-of-javascript-cores-concept-in-connection-to-html-with-examples-1oj3</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Could you believe that these are the core concepts that make up the giant JavaScript programming language. The  interconnection of these cores builds interactiity on webpage. It is the layer upon which frameworks like jquery tries to simplify. Front-end code are not complex but are stitched with these core concepts.Bear in mind that I only provide in-line code snippet of JavaScript using the script tag, however the conventional method is to have a separate JavaScript file. The snippet is meant to show you how JavaScript core idea is applied in html, which is one thing that scatters the mind of beginners when they are trying to understand the giant called JavaScript:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Syntax&lt;/li&gt;
   &lt;li&gt;Comments&lt;/li&gt;
   &lt;li&gt;Arithmetic Operators&lt;/li&gt;
   &lt;li&gt;Assignment Operators&lt;/li&gt;
   &lt;li&gt;Variables&lt;/li&gt;
   &lt;li&gt;Data types&lt;/li&gt;
   &lt;li&gt;Conditionals&lt;/li&gt;
   &lt;li&gt;Loops&lt;/li&gt;
   &lt;li&gt;Functions&lt;/li&gt;
   &lt;li&gt;Objects&lt;/li&gt;
   &lt;li&gt;Events&lt;/li&gt;
   &lt;li&gt;DOM Manipulation  (In fact, DOM manipulation is the main tool that controls the behavior of web pages, creating the interactivity web developers often talk about). &lt;/li&gt; 
  &lt;/ul&gt;
  

&lt;p&gt;## Concepts are:&lt;/p&gt;


&lt;ul&gt; 
  &lt;li&gt;Asynchrous Operations,&lt;/li&gt;

  &lt;li&gt;Modules&lt;/li&gt;

  &lt;li&gt; And finally, Library&lt;/li&gt;

  &lt;/ul&gt;

&lt;p&gt;&lt;br&gt;
If you know how to initiate these core concepts when programming, you can proudly call yourself a JavaScript guru. You can also easily learn other higher-level programming languages and start helping your fellow humans solve their digital problems. All these concepts are interrelated but somewhat subtle to detect, yet they exist deeply in your code if you have ever added JavaScript to your web page.&lt;/p&gt;

&lt;p&gt;So don’t just read this content alone — use the ideas here to look at any JavaScript codebase. It will remove your phobia about seeing complex code structures as eyesores in your mind. Your life will also be a lot easier when debugging or trying to understand the connection between JavaScript, HTML, and CSS.&lt;/p&gt;

&lt;p&gt;I don’t want to use anything aside from HTML as an example since that is what web development in connection with JavaScript entails. Creating examples about the core concepts of JavaScript without showing how they are used in HTML only makes you wonder about their applicability when reading. I don’t want that to happen. That’s why I’ve fused the core concepts with HTML itself. So, to benefit fully from this lesson, you at least need basic HTML knowledge.&lt;/p&gt;

&lt;p&gt;Comments are a set of instructions written within your code that are ignored by the browser. Single-line and multi-line comments are the two main types. Examples: anything written after two forward slashes like // is a single-line comment, while anything written between &lt;code&gt;/*&lt;/code&gt; &lt;em&gt;and&lt;/em&gt; &lt;code&gt;*/&lt;/code&gt; is a multi-line comment.&lt;/p&gt;

&lt;p&gt;I have to define comments carefully from the onset because they will be used intensively within the code that demonstrates these core concepts. Study the comments within the code — think about them and connect them to the preview or highlights defining each concept.&lt;/p&gt;
&lt;h2&gt;
  
  
  Code snippet example of comments in action:
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="c1"&gt;// This is a single-line comment&lt;/span&gt;

  &lt;span class="cm"&gt;/* 
     This is a multi-line comment.
     It can span multiple lines.
  */&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// store user's name&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// display name in console&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Unraveling The Core Concepts of JavaScript
&lt;/h2&gt;
&lt;h2&gt;
  
  
  Syntax:
&lt;/h2&gt;

&lt;p&gt;It is the language of any programming system — the way you express your human intentions to the computer. Syntax is how you present the building blocks (e.g., variables, functions, and loops) to the computer through that specific language — in this case, JavaScript.&lt;/p&gt;
&lt;h2&gt;
  
  
  Variable:
&lt;/h2&gt;

&lt;p&gt;A variable is memory space for storing values temporarily or permanently before referencing them.&lt;br&gt;
Example:&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;siteTitle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;siteName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;TechWorld Blog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;yearEstablished&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2020&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;titleElement&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;siteTitle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;titleElement&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;siteName&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt; - Since &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;yearEstablished&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Arithmetic and Assignment Operators:
&lt;/h2&gt;

&lt;p&gt;Arithmetic operators (+, -, *, /) perform calculations, while Assignment Operators (=, +=, -=, *=, /=) store and update variable values.&lt;br&gt;
Example:&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mathResult&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// Arithmetic operations&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;diff&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;prod&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// Assignment operations&lt;/span&gt;
  &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="o"&gt;*=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mathResult&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`
    Sum: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;br&amp;gt;
    Difference: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;diff&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;br&amp;gt;
    Product: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;prod&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;br&amp;gt;
    Division: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;br&amp;gt;
    Updated a: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;br&amp;gt;
    Updated b: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;
  `&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Data Types:
&lt;/h2&gt;

&lt;p&gt;Data types include Number, String, Boolean, Object, Array, Null, and Undefined. They are the basic units that make up everything your page displays. Without understanding data types, you’ll struggle with constructing or deconstructing assignments within your codebase.&lt;br&gt;
Example:&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ul&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dataTypes&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ul&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;siteName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;TechWorld Blog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;                &lt;span class="c1"&gt;// String&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;visitorCount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1345&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;                        &lt;span class="c1"&gt;// Number&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isUserLoggedIn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;                      &lt;span class="c1"&gt;// Boolean&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;userEmail&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;                                  &lt;span class="c1"&gt;// Undefined&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;currentAd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;                           &lt;span class="c1"&gt;// Null&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;article&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Intro to JS&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;author&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt; &lt;span class="c1"&gt;// Object&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;categories&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HTML&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="s2"&gt;CSS&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="s2"&gt;JavaScript&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// Array&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;uniqueId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Symbol&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;userID&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;                &lt;span class="c1"&gt;// Symbol&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;totalUsers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;9876543210123456789&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;          &lt;span class="c1"&gt;// BigInt&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;dataList&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dataTypes&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;dataList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`
    &amp;lt;li&amp;gt;String: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;siteName&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Number: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;visitorCount&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Boolean: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;isUserLoggedIn&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Undefined: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;userEmail&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Null: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;currentAd&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Object: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; by &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;author&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Array: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;categories&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&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="p"&gt;)}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;Symbol: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;uniqueId&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;BigInt: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;totalUsers&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;
  `&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conditionals:
&lt;/h2&gt;

&lt;p&gt;Conditionals apply Boolean logic — true or false — to trigger specific code when a condition is met.&lt;br&gt;
Example:&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;result&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;score&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;75&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;score&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;result&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Excellent!&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="k"&gt;else&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;score&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;result&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Good job!&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="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;result&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Keep trying!&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Loops:
&lt;/h2&gt;

&lt;p&gt;Loops repeat code a set number of times. Use a for loop when you know how many times to run, and a while loop when you don’t.&lt;br&gt;
Example:&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ul&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;list&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ul&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&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;output&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;li&amp;gt;For loop count: &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;li&amp;gt;While loop count: &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;list&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Inner workings of the for and while loops:
&lt;/h2&gt;

&lt;p&gt;Both loops add list items three times each. The for loop runs a fixed number of iterations, while the while loop continues as long as the condition is true.&lt;/p&gt;

&lt;h2&gt;
  
  
  Functions:
&lt;/h2&gt;

&lt;p&gt;Two methods — the standard function keyword or the arrow () =&amp;gt; method.&lt;br&gt;
Example:&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onclick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;greetUser()&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Click&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;Greet&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greetUser&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Visitor&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Welcome, &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;name&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="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Arrow function method of creating functions:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;greetBtn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Click&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;Greet&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;greetUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Visitor&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Welcome, &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;name&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="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;greetBtn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;greetUser&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Objects:
&lt;/h2&gt;

&lt;p&gt;Objects are key–value pairs. The value of the variable is structured data accessed using dot notation.&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;userInfo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Admin&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;jane@techworld.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;userInfo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
    &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;role&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Events:
&lt;/h2&gt;

&lt;p&gt;Events respond to user actions like clicks or input changes.&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;changeBtn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Change&lt;/span&gt; &lt;span class="nx"&gt;Color&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;btn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;changeBtn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;btn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;lightblue&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  DOM Manipulation:
&lt;/h2&gt;

&lt;p&gt;DOM stands for Document Object Model — the main way JavaScript interacts with HTML elements.&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h2&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pageTitle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Welcome&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h2&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;updateBtn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Update&lt;/span&gt; &lt;span class="nx"&gt;Title&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;updateBtn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;title&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pageTitle&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;JavaScript DOM Manipulation in Action!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;green&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Asynchronous JavaScript:
&lt;/h2&gt;

&lt;p&gt;Handles delays with callbacks, promises, and async/await.&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;output&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Starting&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;output&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;setTimeout: Runs after 2s&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="mi"&gt;2000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;timer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setInterval&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;setInterval count:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;count&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;count&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nf"&gt;clearInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;timer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;loadData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Promise: Data loaded!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;showData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;loadData&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;output&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;output&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Error occurred!&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="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;showData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Modules:
&lt;/h2&gt;

&lt;p&gt;Reusable JS files imported/exported.&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="c1"&gt;// message.js&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`Welcome, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// main.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./message.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;msg&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;msg&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;module&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;main.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Libraries:
&lt;/h2&gt;

&lt;p&gt;Prebuilt JavaScript code used to simplify tasks — often added via CDN, locally, or through npm.&lt;br&gt;
Example using Lodash:&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;result&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;_&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;result&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Total: &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Output:
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;javascript&lt;br&gt;
Total: 100&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;We’ve come to the end of this short but detailed lesson. I hope you had a good time studying this guide. If you have questions about programming, feel free to reach out. I’ll also welcome your suggestions. Programming should be simple, and I’m doing my best to make sure that idea becomes a reality for everyone.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>html</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>If you learn the concept of one low-level language, have you learn techniques of another low-level language? Find out!</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Sun, 14 Sep 2025 12:29:00 +0000</pubDate>
      <link>https://dev.to/somadinag/if-you-learn-the-concept-of-one-low-level-language-have-you-learn-techniques-of-m-andanother-48el</link>
      <guid>https://dev.to/somadinag/if-you-learn-the-concept-of-one-low-level-language-have-you-learn-techniques-of-m-andanother-48el</guid>
      <description>&lt;p&gt;You may be familiar with the idea that all high-level languages for coding have one thing in common, e.g., variables, arrays, loops—you know the rest. This signifies that if you learn Python, for instance, it will be easy to learn another programming language like JavaScript, Java, etc.&lt;/p&gt;

&lt;p&gt;That is true for high-level languages. The next question that comes to mind is: does it also apply to low-level languages like x86 assembly or ARM assembly? We shall attempt to give an answer to that because, in some sense, it is true—but in another sense, it isn’t.&lt;/p&gt;

&lt;h2&gt;
  
  
  High-Level Languages
&lt;/h2&gt;

&lt;p&gt;Once you learn one high-level programming language (like Python, JavaScript, or Java), it becomes much easier to pick up others because of the core concepts they share:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Variables, data types, control flow (if/else, loops)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Functions and modularity&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Data structures (arrays, lists, dictionaries/maps)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Object-oriented or functional programming principles&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Therefore, the main difference when switching between them is mostly syntax and some language-specific features.&lt;/p&gt;

&lt;h3&gt;
  
  
  Low-Level Languages
&lt;/h3&gt;

&lt;p&gt;Low-level languages, on the other hand, are a bit different. How?&lt;/p&gt;

&lt;p&gt;A low-level language is very close to the hardware and depends on the CPU architecture (x86, ARM, RISC-V, etc.). Learning one kind of assembly won’t directly transfer to another because the instruction sets are different. However, the general way of thinking about registers, memory, and CPU instructions will apply.&lt;/p&gt;

&lt;p&gt;The C language, which is often portrayed as a “portable assembly,” is still a bit higher than raw assembly—so don’t count too much on that—although it is much lower-level than Python or JavaScript. If you learn C well, you’ll gain beneficial knowledge about both low-level and high-level languages.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;More specifically, you will know:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How memory management works (pointers, allocation, stack vs. heap)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How data is stored at a lower level&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How compilers and operating systems interact with hardware&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That knowledge makes it easier to learn other low-level languages because many concepts carry over.&lt;/p&gt;

&lt;p&gt;So, does the rule still apply?&lt;/p&gt;

&lt;p&gt;Yes—but you’ve seen the twist.&lt;/p&gt;

&lt;p&gt;For high-level languages learning one makes the others much easier because the abstractions are similar.&lt;/p&gt;

&lt;p&gt;For low-level languages learning one gives you the foundational mental model (how computers really work), but the specifics (like assembly instructions) may not transfer directly between platforms.&lt;/p&gt;

&lt;h4&gt;
  
  
  👉 What is the way forward?
&lt;/h4&gt;

&lt;p&gt;Well, the practical strategy is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Learn one high-level language (Python is a great first).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Learn one low-level language (C is usually recommended).&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That way, you cover both: ease of programming and how things work under the hood.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>devops</category>
    </item>
    <item>
      <title>Best markup to use in GitHub as a writer based on work-flow</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Wed, 10 Sep 2025 20:34:53 +0000</pubDate>
      <link>https://dev.to/somadinag/best-markup-to-use-in-github-as-a-writer-based-on-work-flow-3ma</link>
      <guid>https://dev.to/somadinag/best-markup-to-use-in-github-as-a-writer-based-on-work-flow-3ma</guid>
      <description>&lt;h2&gt;
  
  
  Which Markup Is Better if You Are a Writer Who Contributes and Publishes Content on GitHub
&lt;/h2&gt;

&lt;p&gt;If you’re a writer hosting your portfolio, tutorials, and writing samples on GitHub, the choice between Markdown and HTML depends on your goals, workflow, and audience. Let’s look at their advantages and disadvantages to help you make the best choice:&lt;/p&gt;

&lt;h3&gt;
  
  
  Markdown
&lt;/h3&gt;

&lt;p&gt;✅ Pros&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Native to GitHub → GitHub automatically renders .md files beautifully. Your README, portfolio pages, and tutorials will look clean without extra effort.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Lightweight &amp;amp; simple → Easier and faster to write than HTML.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Readable in raw form → Even if someone views your repo as plain text, Markdown looks clean.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Supports extensions → GitHub Flavored Markdown (GFM) adds tables, task lists, code syntax highlighting, footnotes, etc. — great for tutorials.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: GitHub Flavored Markdown (GFM) should not confuse you. It’s just another version of Markdown that supports extra features beyond the regular syntax you use in formatting text — e.g., tables, task lists (- [ ]), automatic URL linking, and syntax highlighting for code blocks.&lt;br&gt;
The good news is you don’t need to activate it — it’s already enabled by default on GitHub. The only thing you need to do is learn and apply the new syntax and features it provides.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Portable → You can convert .md into HTML, PDF, DOCX, etc., with tools like Pandoc if you need polished documents later.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⚠️ Cons&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Limited styling → Custom layouts, interactive elements, or advanced formatting require HTML/CSS. Switch to HTML for advanced formatting.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Less control → You can’t design the page beyond GitHub’s rendering rules.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  HTML
&lt;/h3&gt;

&lt;p&gt;✅ Pros&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Full control → Lets you customize typography, structure, layout, and interactivity.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Web-ready → You can host HTML files on GitHub Pages for a polished, website-like portfolio.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scalable → Easier to integrate custom CSS/JS if you want your portfolio to look like a professional website rather than just repo docs.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⚠️ Cons&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Heavier to write → Writing tutorials in raw HTML is tedious compared to Markdown.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cluttered raw view → If someone browses your repo directly, HTML isn’t as readable as Markdown.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Overhead → Requires more effort to maintain consistency across documents.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Best Approach for a Technical Writer
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;👉 Use Markdown for your writing samples, tutorials, and documentation because:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It’s the industry standard for technical writing in open-source, docs, and GitHub.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It showcases your ability to write developer-friendly, accessible content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It’s future-proof and easy to export.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;👉 Use HTML (with GitHub Pages) for your portfolio site itself, because:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A portfolio benefits from visual polish (navigation, layout, branding).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can link out to .md tutorials and samples directly in a styled site.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  🔑 Recommendation
&lt;/h3&gt;

&lt;p&gt;Write tutorials and samples in Markdown (.md) to demonstrate technical writing skills.&lt;/p&gt;

&lt;p&gt;Build a portfolio landing page in HTML (or Jekyll/GitHub Pages with Markdown) for presentation.&lt;/p&gt;

&lt;p&gt;That way, you show both clarity in technical documentation and professional presentation skills.&lt;/p&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title># Runner H on Mobile – A Real-World Breakdown from a Technical Writer's Perspective **Author: Goodluck Chukwuemeka**</title>
      <dc:creator>Somadina </dc:creator>
      <pubDate>Mon, 07 Jul 2025 05:40:42 +0000</pubDate>
      <link>https://dev.to/somadinag/-runner-h-on-mobile-a-real-world-breakdown-from-a-technical-writers-perspective-author-18md</link>
      <guid>https://dev.to/somadinag/-runner-h-on-mobile-a-real-world-breakdown-from-a-technical-writers-perspective-author-18md</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/runnerh"&gt;Runner H "AI Agent Prompting" Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;As a developer and technical writer, I wanted to go beyond casual experimentation and evaluate &lt;strong&gt;Runner H&lt;/strong&gt; using a real-world workflow. My goal was to assess how well it could:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🔍 Find legitimate remote technical writing jobs on platforms like GitHub, DigitalOcean, etc.
&lt;/li&gt;
&lt;li&gt;📝 Draft personalized application emails using my name.
&lt;/li&gt;
&lt;li&gt;🧾 Summarize each company’s tone, target audience, and writing style in a Google Doc for review or future preparation.
&lt;/li&gt;
&lt;li&gt;🛠️ Scan GitHub repositories to identify beginner-friendly e-commerce product page projects I could practice coding with (HTML, CSS, JavaScript).
&lt;/li&gt;
&lt;li&gt;📂 Save project source code to a Google Doc for easy access and provide a breakdown of the interrelationship between HTML, CSS, and JavaScript.
&lt;/li&gt;
&lt;li&gt;📱 Execute all of the above &lt;strong&gt;from a mobile device&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I conducted this experiment on both desktop and mobile to compare performance.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6tx1hxoby5218gd4x9r.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6tx1hxoby5218gd4x9r.jpg" alt="Screenshot of when it didn't respond again" width="720" height="1640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I thought i could embed video directly here. But that didn't work pardon me. &lt;/p&gt;

&lt;h2&gt;
  
  
  How I Used Runner H
&lt;/h2&gt;

&lt;h2&gt;
  
  
  🖥️ Desktop vs. 📱 Mobile Testing
&lt;/h2&gt;

&lt;p&gt;While I didn’t fully analyze the desktop version, I successfully created and executed a prompt before switching to mobile. Since I primarily access the internet through my phone, I was especially curious to evaluate Runner H’s mobile capabilities.&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 First Prompt Attempt
&lt;/h2&gt;

&lt;p&gt;Here’s the initial prompt I used:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Prompt&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
“Search for legitimate, remote technical writing opportunities at developer-focused software companies — including U.S.-based and global platforms like DigitalOcean, GitHub, Vercel, and similar. For 3 promising roles, generate tailored application emails using my name 'Goodluck Chukwuemeka'. Save the drafts in Google Docs. Email me the link for review. Furthermore, summarize each company’s product, writing tone, and target developer audience in a Google Doc so I can prepare if they reply.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  ✅ Results:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Runner H clearly broke down and marked each prompt component as “complete.”&lt;/li&gt;
&lt;li&gt;Clicking “Open File” led to a PDF summary containing a link to the documents — but the link was unresponsive.&lt;/li&gt;
&lt;li&gt;I had read that the app records a video of each prompt session. However, &lt;strong&gt;no video was generated&lt;/strong&gt;. &lt;em&gt;(Is this feature coming soon?)&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Since the PDF link didn’t work, I checked manually via Google Docs and Gmail — the application drafts and company summaries were indeed created.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;🔎 Note: All proposals were stored in &lt;strong&gt;one document&lt;/strong&gt;, prompting concerns about whether it might accidentally send multiple proposals to the same company. To investigate further, I created a second, more specific prompt.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  ✍️ Second Prompt – Enhanced Specificity
&lt;/h2&gt;

&lt;p&gt;This prompt tested if Runner H could generate &lt;strong&gt;separate, editable documents&lt;/strong&gt; (not PDFs) and include functional links.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Prompt&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
“Search for 10 legitimate, remote technical writing opportunities from developer-focused software companies. Generate tailored application emails using the name ‘Goodluck Chukwuemeka’. Save the drafts in separate Google Docs — one for each company. Additionally, summarize each company’s product, writing tone, and target audience in a &lt;strong&gt;single&lt;/strong&gt; overview document. Finally, create an editable summary (Word format, not PDF) of all actions taken and provide clickable links to each document, all accessible within the Runner H platform.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  ✅ Results:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The system delayed response and gave no feedback on individual task completions.&lt;/li&gt;
&lt;li&gt;It successfully crawled several websites before abruptly stopping. I had to terminate the session manually.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After reviewing the outcome:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🟡 Only &lt;strong&gt;7 proposals&lt;/strong&gt; were generated (instead of 10).&lt;/li&gt;
&lt;li&gt;📄 One Google Doc was created containing an overview of all companies.&lt;/li&gt;
&lt;li&gt;📎 The summary PDF again included &lt;strong&gt;unclickable links&lt;/strong&gt;, making it unusable for practical review.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🔍 Insight:
&lt;/h3&gt;

&lt;p&gt;To get usable results, prompts must be &lt;strong&gt;detailed and explicitly structured&lt;/strong&gt;. However, Runner H currently defaults to locked PDF formats, which are &lt;strong&gt;not ideal for technical writing or workflow editing&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧪 Third Prompt – Programming-Focused Test
&lt;/h2&gt;

&lt;p&gt;I then tested Runner H’s technical capabilities with this development-related prompt:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Prompt&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
“Search for beginner projects in GitHub that I can utilize for developing e-commerce product pages. Provide the source code, explain how the HTML, CSS, and JavaScript components interrelate, describe the project’s purpose, and compile everything in a Google Doc with a shareable link.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  ✅ Results:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;It successfully found a GitHub project and provided the repository link.&lt;/li&gt;
&lt;li&gt;It offered a general explanation of the HTML, CSS, and JavaScript relationship — but &lt;strong&gt;did not extract, explain, or provide code&lt;/strong&gt; I could copy and use.&lt;/li&gt;
&lt;li&gt;The Google Doc it created was &lt;strong&gt;empty&lt;/strong&gt;, despite the provided link.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Use Case &amp;amp; Impact
&lt;/h2&gt;

&lt;h2&gt;
  
  
  📱 Mobile Experience Breakdown
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Missing Prompt History&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Runner H did not record a video or log of the mobile prompt session, meaning I had no way to trace the session or replay it — a key limitation for repeatable workflows.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;Uneditable Output&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;All generated documents were locked PDFs with non-clickable links. For technical writers, this is a major issue — we need editable and interactive formats.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;strong&gt;Broken or Empty Links&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In the GitHub task, the app claimed the analysis would be in a Google Doc, but the link was either broken or the file didn’t exist.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. &lt;strong&gt;Superficial GitHub Analysis&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;While Runner H located a relevant repository, it didn’t extract or explain the code in a usable way — missing the core of the prompt’s intention.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. &lt;strong&gt;Integration Wasn’t the Problem&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;All of my Google services (Docs, Gmail) were fully authorized. The issue stemmed from Runner H itself.&lt;/p&gt;




&lt;h2&gt;
  
  
  ✅ What Runner H Did Well
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Accurately understood the general &lt;strong&gt;intent&lt;/strong&gt; of complex prompts.
&lt;/li&gt;
&lt;li&gt;Successfully identified and linked real &lt;strong&gt;GitHub projects&lt;/strong&gt;.
&lt;/li&gt;
&lt;li&gt;Took initiative in &lt;strong&gt;automating workflows&lt;/strong&gt;.
&lt;/li&gt;
&lt;li&gt;Indicated early promise for &lt;strong&gt;AI-driven task chaining&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🛠️ Recommendations for the Runner H Team
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Enable Prompt Video Logs on Mobile:&lt;/strong&gt; Users should be able to trace or replay prompt sessions.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Provide Editable Output Formats:&lt;/strong&gt; Avoid locked PDFs; default to Google Docs or editable Word files.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Fix Link Embedding and Sharing:&lt;/strong&gt; Ensure all shared files are properly accessible and clickable.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Add a Review Step Before Email Sending:&lt;/strong&gt; Allow users to preview and edit generated emails.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Enhance Prompt Execution for Developers:&lt;/strong&gt; Provide real, usable code and contextual explanations — not vague overviews.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;These small improvements could significantly enhance the mobile experience and build long-term user trust.&lt;/p&gt;




&lt;h2&gt;
  
  
  💡 Final Thoughts
&lt;/h2&gt;

&lt;p&gt;I walked away from this experiment with valuable insight:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I tested Runner H under &lt;strong&gt;real-world conditions&lt;/strong&gt;, applying both developer and technical writing perspectives.
&lt;/li&gt;
&lt;li&gt;I didn’t just try to make it work — I tried to &lt;strong&gt;break it&lt;/strong&gt;, to understand its limits.
&lt;/li&gt;
&lt;li&gt;In doing so, I provided feedback that can directly &lt;strong&gt;inform platform improvements&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This wasn't about finding flaws, but about pushing boundaries and &lt;strong&gt;contributing to meaningful growth&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thanks for reading.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Social Love
&lt;/h3&gt;

</description>
      <category>devchallenge</category>
      <category>runnerhchallenge</category>
      <category>ai</category>
      <category>machinelearning</category>
    </item>
  </channel>
</rss>
