<?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: 𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</title>
    <description>The latest articles on DEV Community by 𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤 (@nessakodo).</description>
    <link>https://dev.to/nessakodo</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%2F913042%2F1e8e79d9-fec1-4a24-bce8-9ee71fd7b158.jpeg</url>
      <title>DEV Community: 𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</title>
      <link>https://dev.to/nessakodo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nessakodo"/>
    <language>en</language>
    <item>
      <title>Guide to Compiling C++: Making Your Code Run!</title>
      <dc:creator>𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</dc:creator>
      <pubDate>Wed, 07 Feb 2024 16:17:57 +0000</pubDate>
      <link>https://dev.to/nessakodo/guide-to-compiling-c-making-your-code-run-3m9l</link>
      <guid>https://dev.to/nessakodo/guide-to-compiling-c-making-your-code-run-3m9l</guid>
      <description>&lt;p&gt;Welcome. Let’s demystify compiling without making it a whole thing. If you can run a couple terminal commands, you can compile C++.&lt;/p&gt;

&lt;h2&gt;
  
  
  What compiling is
&lt;/h2&gt;

&lt;p&gt;Your C++ file is readable to you. Your computer wants machine code. &lt;strong&gt;Compiling is the translation step&lt;/strong&gt; that turns your &lt;code&gt;.cpp&lt;/code&gt; into something your OS can execute.&lt;/p&gt;

&lt;p&gt;In practice, this is you telling a compiler:&lt;br&gt;
“Take these source files and give me a runnable program.”&lt;/p&gt;
&lt;h2&gt;
  
  
  The compiler you will actually use: &lt;code&gt;g++&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;g++&lt;/code&gt; is the common C++ compiler command on Linux and macOS (and on Windows if you are using something like MinGW or WSL).&lt;/p&gt;

&lt;p&gt;General shape:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;g++ &lt;span class="o"&gt;[&lt;/span&gt;flags] &lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;source &lt;/span&gt;files] &lt;span class="nt"&gt;-o&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;output_name]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Flags you will see a lot
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;-Wall&lt;/code&gt;&lt;br&gt;
Show helpful warnings. Use it. Future you will thank you.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;-O2&lt;/code&gt;&lt;br&gt;
Optimizes the build (faster program, sometimes slower compile).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;-std=c++20&lt;/code&gt; (or &lt;code&gt;c++17&lt;/code&gt;)&lt;br&gt;
Picks the C++ language standard.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;g++ &lt;span class="nt"&gt;-Wall&lt;/span&gt; &lt;span class="nt"&gt;-O2&lt;/span&gt; &lt;span class="nt"&gt;-std&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;c++20 main.cpp &lt;span class="nt"&gt;-o&lt;/span&gt; app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Output names, because this trips everyone once
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;-o&lt;/code&gt; flag sets the name of the program you are creating.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;g++ main.cpp &lt;span class="nt"&gt;-o&lt;/span&gt; app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;app&lt;/code&gt; is now your executable.&lt;/li&gt;
&lt;li&gt;Run it like this:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Quick correction on file extensions
&lt;/h3&gt;

&lt;p&gt;If you &lt;strong&gt;do not&lt;/strong&gt; use &lt;code&gt;-o&lt;/code&gt;, &lt;code&gt;g++&lt;/code&gt; does &lt;strong&gt;not&lt;/strong&gt; create a &lt;code&gt;.o&lt;/code&gt; file by default. It creates an executable named &lt;code&gt;a.out&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;g++ main.cpp
./a.out
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A &lt;code&gt;.o&lt;/code&gt; file is an &lt;strong&gt;object file&lt;/strong&gt;, and you usually only get those when you compile with &lt;code&gt;-c&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;g++ &lt;span class="nt"&gt;-c&lt;/span&gt; main.cpp &lt;span class="nt"&gt;-o&lt;/span&gt; main.o
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is useful for multi file projects, but you can ignore it for your first few builds.&lt;/p&gt;

&lt;h2&gt;
  
  
  A step by step example
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Go to the folder with your code:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;directory_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Compile:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;g++ &lt;span class="nt"&gt;-Wall&lt;/span&gt; &lt;span class="nt"&gt;-std&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;c++20 filename.cpp &lt;span class="nt"&gt;-o&lt;/span&gt; filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Run:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./filename
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Compiling with tests (GoogleTest)
&lt;/h2&gt;

&lt;p&gt;If you are linking GoogleTest manually, a simple pattern looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;g++ &lt;span class="nt"&gt;-Wall&lt;/span&gt; &lt;span class="nt"&gt;-std&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;c++20 main.cpp tests.cpp gtest_main.a &lt;span class="nt"&gt;-pthread&lt;/span&gt; &lt;span class="nt"&gt;-o&lt;/span&gt; tests
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;-pthread&lt;/code&gt; is commonly needed for GoogleTest.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;gtest_main.a&lt;/code&gt; provides a default &lt;code&gt;main()&lt;/code&gt; for running tests.&lt;/li&gt;
&lt;li&gt;Depending on your setup, you might link &lt;code&gt;-lgtest -lgtest_main&lt;/code&gt; instead of using a &lt;code&gt;.a&lt;/code&gt; file. It varies by install method.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Wrap
&lt;/h2&gt;

&lt;p&gt;Compiling is just turning your code into something runnable. The terminal commands look scary exactly one time, then they are just part of your muscle memory.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you want, paste the exact command you are using and the error you get. I can translate it into plain English and tell you the one line fix.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For more tutorials, visit &lt;a href="//nessakodo.com"&gt;https://nessakodo.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Love,&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;NESSA KODO&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>cpp</category>
      <category>beginners</category>
      <category>compiling</category>
      <category>terminal</category>
    </item>
    <item>
      <title>GitHub Pages: A Beginner's Guide to Deploying Your Website on a Custom Domain</title>
      <dc:creator>𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</dc:creator>
      <pubDate>Wed, 19 Jul 2023 14:14:43 +0000</pubDate>
      <link>https://dev.to/nessakodo/github-pages-wizardry-a-beginners-guide-to-deploying-your-website-on-a-custom-domain-5154</link>
      <guid>https://dev.to/nessakodo/github-pages-wizardry-a-beginners-guide-to-deploying-your-website-on-a-custom-domain-5154</guid>
      <description>&lt;p&gt;This is the practical flow: publish your site on GitHub Pages, point your domain at it, then connect the domain inside GitHub.&lt;/p&gt;

&lt;p&gt;If you are using Hostinger, the DNS screens will look a little different, but the idea stays the same.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 0: Decide what kind of Pages site you are deploying
&lt;/h2&gt;

&lt;p&gt;You are basically choosing one of these:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Project site&lt;/strong&gt;&lt;br&gt;
URL starts as &lt;code&gt;https://username.github.io/repo-name&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User site&lt;/strong&gt;&lt;br&gt;
Repo is named &lt;code&gt;username.github.io&lt;/code&gt;&lt;br&gt;
URL is &lt;code&gt;https://username.github.io&lt;/code&gt; (no repo name in the URL)&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Either option can use a custom domain. User site just looks cleaner by default.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 1: Publish using a &lt;code&gt;gh-pages&lt;/code&gt; branch (only if you want branch based deploy)
&lt;/h2&gt;

&lt;p&gt;You only need this if you are deploying from a branch (common for simple static sites, or when a tool outputs to a branch).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git checkout &lt;span class="nt"&gt;--orphan&lt;/span&gt; gh-pages
git reset &lt;span class="nt"&gt;--hard&lt;/span&gt;
git commit &lt;span class="nt"&gt;--allow-empty&lt;/span&gt; &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Initialize gh-pages"&lt;/span&gt;
git push origin gh-pages
git checkout main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Quick note: this creates an empty branch. You still need to actually put your built site files onto &lt;code&gt;gh-pages&lt;/code&gt; (or configure your deploy tool to publish there).&lt;/p&gt;

&lt;p&gt;If you are using GitHub Actions to build and deploy, you might skip the manual branch setup entirely.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 2: Turn on GitHub Pages in your repo
&lt;/h2&gt;

&lt;p&gt;In your GitHub repo:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Settings → Pages&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Then choose your source:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Deploy from a branch&lt;/strong&gt; → select &lt;code&gt;gh-pages&lt;/code&gt; and &lt;code&gt;/ (root)&lt;/code&gt;
or&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub Actions&lt;/strong&gt; if your framework uses a build step (React, Vite, Next static export, etc.)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once it is enabled, GitHub will show your Pages URL.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 3: DNS setup in Hostinger (the part everyone overthinks)
&lt;/h2&gt;

&lt;p&gt;Open Hostinger:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Domains → your domain → DNS / DNS Zone Editor&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Before adding new records, remove any old ones that conflict:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Old &lt;code&gt;A&lt;/code&gt; records pointing the root domain (&lt;code&gt;@&lt;/code&gt;) somewhere else&lt;/li&gt;
&lt;li&gt;Any existing &lt;code&gt;CNAME&lt;/code&gt; for &lt;code&gt;www&lt;/code&gt; that points somewhere else&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What records you actually want
&lt;/h3&gt;

&lt;h4&gt;
  
  
  A records for the root domain (apex)
&lt;/h4&gt;

&lt;p&gt;These point &lt;code&gt;yourdomain.com&lt;/code&gt; (the &lt;code&gt;@&lt;/code&gt; host) to GitHub Pages:&lt;/p&gt;

&lt;p&gt;Add &lt;strong&gt;four A records&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Name: &lt;code&gt;@&lt;/code&gt; → &lt;code&gt;185.199.108.153&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Name: &lt;code&gt;@&lt;/code&gt; → &lt;code&gt;185.199.109.153&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Name: &lt;code&gt;@&lt;/code&gt; → &lt;code&gt;185.199.110.153&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Name: &lt;code&gt;@&lt;/code&gt; → &lt;code&gt;185.199.111.153&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  CNAME record for &lt;code&gt;www&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;This points &lt;code&gt;www.yourdomain.com&lt;/code&gt; to your GitHub Pages host:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Type: &lt;code&gt;CNAME&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Name: &lt;code&gt;www&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Points to: &lt;code&gt;YOUR_GITHUB_USERNAME.github.io&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is it.&lt;/p&gt;

&lt;p&gt;One important detail: a standard DNS setup does &lt;strong&gt;not&lt;/strong&gt; use a CNAME for the root domain (&lt;code&gt;@&lt;/code&gt;). Some providers support ALIAS or ANAME, but Hostinger typically expects the A records above for the apex.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 4: Connect the custom domain inside GitHub
&lt;/h2&gt;

&lt;p&gt;Back in your GitHub repo:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Settings → Pages → Custom domain&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Enter:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;yourdomain.com&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Save, then enable &lt;strong&gt;Enforce HTTPS&lt;/strong&gt; once it becomes available.&lt;/p&gt;

&lt;p&gt;GitHub will create or update a &lt;code&gt;CNAME&lt;/code&gt; file in your published site automatically.&lt;/p&gt;




&lt;h2&gt;
  
  
  If you are using a framework build (React, Vite, etc.)
&lt;/h2&gt;

&lt;p&gt;You usually need to make sure the CNAME makes it into the deployed output.&lt;/p&gt;

&lt;p&gt;Depending on your setup, one of these is correct:&lt;/p&gt;

&lt;h3&gt;
  
  
  Option A: &lt;code&gt;public/CNAME&lt;/code&gt; (common for React)
&lt;/h3&gt;

&lt;p&gt;Create a file:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;public/CNAME&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Contents:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yourdomain.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Option B: &lt;code&gt;docs/CNAME&lt;/code&gt; (only if you deploy from &lt;code&gt;/docs&lt;/code&gt;)
&lt;/h3&gt;

&lt;p&gt;Only do this if you specifically configured Pages to deploy from the &lt;code&gt;docs&lt;/code&gt; folder.&lt;/p&gt;




&lt;h2&gt;
  
  
  Troubleshooting checklist
&lt;/h2&gt;

&lt;h3&gt;
  
  
  DNS changes are not showing up
&lt;/h3&gt;

&lt;p&gt;DNS can take a while to propagate. If GitHub says it cannot verify, it is usually just time.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;www&lt;/code&gt; works but the root domain does not
&lt;/h3&gt;

&lt;p&gt;That means your &lt;code&gt;www&lt;/code&gt; CNAME is fine, but your &lt;code&gt;@&lt;/code&gt; A records are missing or wrong.&lt;/p&gt;

&lt;h3&gt;
  
  
  HTTPS will not enable
&lt;/h3&gt;

&lt;p&gt;Usually this is because the DNS is not stable yet, or you still have conflicting records. Recheck that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;@&lt;/code&gt; has four A records to GitHub IPs&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;www&lt;/code&gt; has one CNAME to &lt;code&gt;username.github.io&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;No extra conflicting A or CNAME records are hanging around&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  React app loads but routing breaks on refresh
&lt;/h3&gt;

&lt;p&gt;That is not DNS, it is client side routing. You will need a SPA redirect strategy (commonly a &lt;code&gt;404.html&lt;/code&gt; that redirects to &lt;code&gt;index.html&lt;/code&gt;) if you are using React Router.&lt;/p&gt;




&lt;h2&gt;
  
  
  Wrap
&lt;/h2&gt;

&lt;p&gt;Once DNS is set and GitHub verifies the domain, your site should be live at:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;https://yourdomain.com&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;If you want, tell me which stack you are deploying (plain HTML, React, Vite, Next export) and whether you are deploying from a branch or Actions, and I will tighten this into the exact steps for your repo with zero extra noise.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Love,&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;NESSA KODO&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>github</category>
      <category>development</category>
      <category>webdev</category>
      <category>softwareengineering</category>
    </item>
    <item>
      <title>Growing, Evolving, Developing.</title>
      <dc:creator>𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</dc:creator>
      <pubDate>Thu, 17 Nov 2022 23:25:15 +0000</pubDate>
      <link>https://dev.to/nessakodo/growing-evolving-developing-3hli</link>
      <guid>https://dev.to/nessakodo/growing-evolving-developing-3hli</guid>
      <description>&lt;p&gt;I never would’ve thought that upon dropping out of college, I would ever find myself in the position of taking up a 15 week software engineering, Boot Camp, but to my surprise, it turned out to be an experience that has truly shaped so much of my world.  Since my early high school years, I’ve had this inclination to learn how to code, and I’ve never properly attended to until recently weeks. &lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;As I continue to navigate through my experience of identifying what career path I want to take seriously as a recent college dropout, I am very grateful that I took this leap of faith towards some thing that is now coming to a close. The were many things that brought me to the point of realizing it was fine time for me to act upon this inclination, but a few months ago I was awakened to the idea of education in the a restructured context.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;As much as I wish, I would’ve finished out my degree sometimes, I very much understand why the sort of schools can be so helpful for individuals like myself, who may not always have the mental expenditure to grasp a large scope of course materials the likely never touch once they graduate. I had no idea what to expect, and, for some reason was very lucky to have made my choice at the very time that I did, because not only did I finally find some thing I could easily spend all of my hours doing, but &lt;/p&gt;

&lt;p&gt;I also found a community of individuals who will always hold a very special place in my heart. there is something beautiful about what brought us all together, perhaps it was boredom, or maybe dissatisfaction with where we were, and a drive to explore some thing that might enable us to enter a career path that might allow us a sort of freedom, both financially, and intellectually. &lt;/p&gt;




&lt;p&gt;I can’t speak so much for everyone else in my cohort, but I most definitely can say the individuals I had the pleasure of learning software engineering with our extremely driven people with many of the same ambitions I have. moving forward from this point in time in which my time in Boot Camp is now done, a scary next step is marked in front of me, one which I’m not sure exactly how I will strive towards. &lt;/p&gt;




&lt;p&gt;Regardless of the state of the tech space both now, and in the near future, I know that engineering of all kinds will be an extremely valuable asset, and now that I can understand how many of the websites and interfaces we all interact with on a day-to-day basis or structured, I have a much deeper understanding and appreciation for the many developers, who work so hard to build and maintain the fundamentals of our Internet world. &lt;/p&gt;

&lt;p&gt;I think what I find most amusing about my undertaking of this schooling is, perhaps the idea that my initial intention was actually to study cyber security. I know in time I will likely come around to this as now that I have some of the primary development fundamentals locked down it should be much easier for me to get to know other code, bases and languages, but there will always be a part of me that might just love software engineering most of all. &lt;/p&gt;




&lt;p&gt;Now I’m not sure whether this is because I can build a full stack application myself and the money ideas for future projects are always popping into my head, or because my experience in an in person, Boot Camp was so comforting to me following a time, where I wasn’t sure what my next move was going to be, And given the circumstances of recent years, I didn’t see many people and wasn’t very inspired to expand my Netwerk or to try to crouch in spaces in which I don’t belong. Some thing I have most definitely understood about the development community is how wonderful it is to be in the presence of individuals who have such a wide span of interests, yet still, there is a common thread, and a desire to constantly learn and evolve within every one of them. This could be taken into many different contexts, as I’m sure you could imagine, and I think it’s incredible that the different skill sets and knowledge we all have outside of coding only enable us to build more imaginatively. &lt;/p&gt;




&lt;p&gt;The my 15 weeks in a software engineering boot camp likely will not set me up for success right off of the bat without any further investment of my time or expansion of my knowledge, it has most definitely open my eyes up to the idea of taking risks and venturing into the unknown with hopes that it might facilitate some further understanding of oneself or furthermore, the greater context of life overall. I wrote a blog post when I first started Boot Camp about my observation of life through code, and now that I’m at the end of those 15 weeks, those understandings have only become even more realized.  &lt;/p&gt;

&lt;p&gt;No I am still a baby dev and have quite a long road ahead of me, I’m grateful that I can at least understand my limitations, as well as areas where there lies great room for improvement. One of my biggest ambitions with making development a primary focus for myself, is to hopefully reach a point in time where I can do what I love as a job, as well as maybe even do it outside of a traditional work environment. I was introduced to many developers in my initial on boarding into the Web3 space, and found this sentiment to be shared among many of them. &lt;/p&gt;




&lt;p&gt;Though I know my journey is my own, and there’s no guarantee how it will pan out, I am very excited to take the next steps in advancing my understanding of what I have just learned, as well as continuing to take the very skill of learning, how to learn into every other context of my life. what I have learned most of all is that there is no one way to approach a situation to the point of resolve, and for many of us, finding our own groove as we learn through failure might just be the best way to get there anyway. &lt;/p&gt;

&lt;p&gt;In synopsis, I couldn’t be more grateful for my time in Boot Camp, and will forever look back at the last 15 weeks I was one of the most transformational periods of my 21 years thus far, and I will further more carry everything that I have learned into the greater scope of my life, overall as it continues to unfold.  &lt;/p&gt;




&lt;p&gt;Thank you for reading this, in whatever way you found it, and in whatever form it might have been a value to you, peace out I am grateful for this community of developers and wonderful individuals who consistently and continuously make great efforts to help one another understand many of the difficulties we all face in our pursuits to build an evolve as developers. &lt;/p&gt;

&lt;p&gt;I hope that in some way, this has sparked a flame within you to consider a new perspective, and I appreciate you taking the time to take a step within my mind. If you have any questions, or would like to be in touch, feel free to message me, or comment below.&lt;/p&gt;

&lt;h1&gt;
  
  
  ʕっ• ᴥ • ʔっ Thanks for reading!
&lt;/h1&gt;

&lt;h2&gt;
  
  
  &lt;em&gt;Love,&lt;/em&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  &lt;em&gt;NESSA KODO&lt;/em&gt;
&lt;/h2&gt;

</description>
      <category>programming</category>
      <category>writing</category>
      <category>devjournal</category>
    </item>
    <item>
      <title>Ruby &amp;&amp; Web 3.0 -- Gems</title>
      <dc:creator>𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</dc:creator>
      <pubDate>Tue, 11 Oct 2022 20:29:33 +0000</pubDate>
      <link>https://dev.to/nessakodo/ruby-web-30-gems-48d6</link>
      <guid>https://dev.to/nessakodo/ruby-web-30-gems-48d6</guid>
      <description>&lt;p&gt;If you've ever played Mario Kart, then you know how awesome those &lt;strong&gt;magic rainbow item boxes&lt;/strong&gt; are, and what an absolute GAME CHANGER they can be...&lt;/p&gt;

&lt;h3&gt;
  
  
  giving you powers and tools to help you succeed ✨
&lt;/h3&gt;




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




&lt;p&gt;In a similar way, &lt;strong&gt;Ruby gems&lt;/strong&gt; serve as seemingly &lt;strong&gt;&lt;em&gt;magic&lt;/em&gt;&lt;/strong&gt; packages of code that have tremendous capabilities, and a vast number use cases, all of which can help you create full scale applications much more &lt;em&gt;efficiently, and effectively.&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Within the last few weeks, I've spent a lot of time learning how to build out functional backend databases using &lt;strong&gt;Ruby in conjunction with Sinatra,&lt;/strong&gt; a gem which serves as a domain specific language (DSL) that helps build out applications with minimal effort. I've newly shifted to utilizing the &lt;strong&gt;Rails&lt;/strong&gt; gem, which is a full-stack framework that has greatly simplified the process of building out databases and their corresponding frontend features, especially as they come to scale.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;Following the rise and evolution of both Web 1.0 and 2.0...&lt;/p&gt;

&lt;h2&gt;
  
  
  "Web 3.0" exposes us to a new generation of web applications that are fueled by user ownership and decentralization.
&lt;/h2&gt;

&lt;p&gt;The fundamentals of what Web 3 is built upon extends past the scope of this post, but I've created a brief overview of the generalized idea &lt;a href="https://dev.to/nessakodo/the-heart-of-web-30-4iln"&gt;here.&lt;/a&gt;&lt;/p&gt;




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




&lt;blockquote&gt;
&lt;p&gt;My recent exploration of Ruby as a language, and the frameworks that it can run on, &lt;strong&gt;have sparked my curiosity to discover what applications it might have within the Web 3 space.&lt;/strong&gt; Though there is yet a plethora of use cases to be identified as well as resources for developers to both create and utilize, I have found some gems that serve to &lt;strong&gt;enable interaction with the blockchain, and personal wallets.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Web 3.0 Concepts 💱
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;It's crucial to realize that &lt;strong&gt;servers are no longer used to host web services and components,&lt;/strong&gt; as web apps today can render content from consensus protocols like Ethereum, or decentralized storage systems like IPFS.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Notably, integrating such components into web applications can be done in a variety of ways. However, as a web browser is the most popular method of accessing the internet...&lt;/p&gt;

&lt;h3&gt;
  
  
  the majority of Web 3 material is most easily accessible through browser extensions.
&lt;/h3&gt;




&lt;p&gt;For instance, IPFS Companion is an addon that enables access to IPFS-hosted data through local or remote nodes. Additionally, there are add-ons like MetaMask for blockchains like Ethereum, which allow you to create a wallet from which you can transfer and purchase digital assets and currencies.&lt;/p&gt;

&lt;h3&gt;
  
  
  The ability for users to manage their Ethereum accounts as well as the many methods of accessing blockchain states are just a few of the advantages that an Ethereum extension provides.
&lt;/h3&gt;




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




&lt;p&gt;There are a number of individuals who have taken the initiative to create libraries and frameworks for other developers to more effectively &lt;strong&gt;build and scale decentralized applications.&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;In regards to Ruby and Ruby on Rails, the remainder of this post will highlight a couple of gems I've found intriguing, and I plan on writing more about my own experiences using these gems and working through their documentation further in the near future.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Gems 💎
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;While serving a similar function, the gems listed below are Ruby gems from which a user can create, sign, broadcast, and connect with Ethereum transactions. &lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.rubydoc.info/gems/web3-eth/0.1.0"&gt;Web3 RPC client for Ethereum&lt;/a&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;This Ruby Gem is used to connect and communicate with Ethereum node ( geth, parity, etc), having RPC interface. RPC(Remote Procedure Call) is a set of protocols and interfaces that the client interacts with blockchain system.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;gem&lt;/span&gt; &lt;span class="n"&gt;install&lt;/span&gt; &lt;span class="n"&gt;web3&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;eth&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Connecting to local node ( or by SSH Tunnel )&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;web3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Web3&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Eth&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Rpc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;If you need to connect to remote host, you can specify host, port and HTTP connection options:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;web3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Web3&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Eth&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Rpc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt; &lt;span class="s1"&gt;'node.host.com'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8545&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="ss"&gt;use_ssl: &lt;/span&gt;&lt;span class="kp"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;read_timeout: &lt;/span&gt;&lt;span class="mi"&gt;120&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Calling eth interface:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;web3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;eth&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;blockNumber&lt;/span&gt;
&lt;span class="mi"&gt;4376369&lt;/span&gt;

&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;web3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;eth&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getBalance&lt;/span&gt; &lt;span class="s1"&gt;'0x829BD824B016326A401d083B33D092293333A830'&lt;/span&gt;
&lt;span class="mf"&gt;3916.6597314456685&lt;/span&gt;

&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;block&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;web3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;eth&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getBlockByNumber&lt;/span&gt; &lt;span class="mi"&gt;4376369&lt;/span&gt;
&lt;span class="c1"&gt;#&amp;lt;Web3::Eth::Block:0x007f844d6f1138 @block_data={"author"=&amp;gt;"0x829bd824b016326a401d083b33d092293333a830", ...&lt;/span&gt;

&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;block&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;timestamp_time&lt;/span&gt;
&lt;span class="mi"&gt;2017&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;17&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;51&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;36&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mo"&gt;0300&lt;/span&gt;

&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;block&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;transactions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;
&lt;span class="mi"&gt;129&lt;/span&gt;

&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;block&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;transactions&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;from&lt;/span&gt;
&lt;span class="s2"&gt;"0xb2930b35844a230f00e51431acae96fe543a0347"&lt;/span&gt;

&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;block&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;transactions&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;value_eth&lt;/span&gt;
&lt;span class="mf"&gt;0.51896811&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;a href="https://github.com/se3000/ruby-eth"&gt;Ethereum For Ruby&lt;/a&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;A straightforward library to build, sign, and broadcast Ethereum transactions. It allows the separation of key and node management. Sign transactions and handle keys anywhere you can run Ruby and broadcast transactions through any local or remote node. Sign messages and recover signatures for authentication.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;gem&lt;/span&gt; &lt;span class="n"&gt;install&lt;/span&gt; &lt;span class="n"&gt;eth&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Build a transaction from scratch:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;tx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Eth&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Tx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="ss"&gt;data: &lt;/span&gt;&lt;span class="n"&gt;hex_data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="ss"&gt;gas_limit: &lt;/span&gt;&lt;span class="mi"&gt;21_000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="ss"&gt;gas_price: &lt;/span&gt;&lt;span class="mi"&gt;3_141_592&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="ss"&gt;nonce: &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="ss"&gt;to: &lt;/span&gt;&lt;span class="n"&gt;key2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;address&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="ss"&gt;value: &lt;/span&gt;&lt;span class="mi"&gt;1_000_000_000_000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;&lt;span class="sb"&gt;```



Or decode an encoded raw transaction:



```&lt;/span&gt;&lt;span class="n"&gt;rb&lt;/span&gt;
&lt;span class="n"&gt;tx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Eth&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Tx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;decode&lt;/span&gt; &lt;span class="n"&gt;hex&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then sign the transaction:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;tx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sign&lt;/span&gt; &lt;span class="n"&gt;key&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Get the raw transaction with tx.hex, and broadcast it through any Ethereum node. Or, just get the TXID with tx.hash.&lt;/p&gt;




&lt;p&gt;These are just a couple of gems out there that enable the division of key management from node management. &lt;/p&gt;

&lt;h2&gt;
  
  
  Anywhere Ruby can be executed and transactions can be disseminated across any local or remote node, you can sign transactions and manage keys.
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;If you're curious, documentation for the original gem can be found &lt;a href="https://github.com/EthWorks/ethereum.rb"&gt;here.&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Applications 📱
&lt;/h1&gt;

&lt;p&gt;The following is a tutorial utilizing the "eth" Ruby gem from &lt;a href="https://www.quicknode.com/guides/ethereum-development/how-to-connect-to-the-ethereum-network-using-ruby"&gt;QuickNode.&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Installing the Eth Gem
&lt;/h2&gt;

&lt;p&gt;Before installing the gem, let us first &lt;strong&gt;ensure that Ruby is installed.&lt;/strong&gt; Simply open a terminal and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;ruby&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;v&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If this returns a version later than 2.6, you're all set! If the command is not recognized, then you will need to install Ruby. If it is and the version is older than 2.6, you will need to use a newer one. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Once you're ready to move on, we can install the eth gem. This gem will allow us to connect to the Ethereum blockchain network using the Ruby language. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  We can install it from the command line
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;gem&lt;/span&gt; &lt;span class="n"&gt;install&lt;/span&gt; &lt;span class="n"&gt;eth&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Getting Started with QuickNode
&lt;/h2&gt;

&lt;p&gt;To build on Ethereum, &lt;strong&gt;you'll need an API endpoint to talk to on their network.&lt;/strong&gt; If you'd like to deploy, host, and manage your own infrastructure, you can skip this section. &lt;/p&gt;

&lt;h3&gt;
  
  
  Otherwise, &lt;a href="https://www.quicknode.com/"&gt;QuickNode.com.&lt;/a&gt; offers a free 7 day trial!
&lt;/h3&gt;




&lt;h2&gt;
  
  
  Create an Endpoint
&lt;/h2&gt;

&lt;p&gt;Once you’ve signed up, create an endpoint running on the Ethereum network. Then, navigate to the "Get Started" tab and copy the HTTP Provider link:&lt;/p&gt;

&lt;h3&gt;
  
  
  This will be used to help us connect to the Ethereum network.
&lt;/h3&gt;




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




&lt;h2&gt;
  
  
  Putting It All Together
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Now, we'll use the eth gem along with our QuickNode endpoint to create a short script to fetch the latest block number using our node. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Create a new file, script.rb, through your Terminal or directly in your file system. If you choose to use a Terminal, you can use this command:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;echo&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;script&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;rb&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Open script.rb in a code editor of choice and add the following code:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="nb"&gt;require&lt;/span&gt; &lt;span class="s1"&gt;'eth'&lt;/span&gt;
&lt;span class="n"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Eth&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt; &lt;span class="s1"&gt;'YOUR_ETHEREUM_NODE_URL'&lt;/span&gt;
&lt;span class="n"&gt;block_number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;eth_block_number&lt;/span&gt;
&lt;span class="nb"&gt;puts&lt;/span&gt; &lt;span class="n"&gt;block_number&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"result"&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;to_i&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace the YOUR_ETHEREUM_NODE_URL with the HTTP provider from the instructions above.&lt;/p&gt;




&lt;h2&gt;
  
  
  Let us break down the code:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Line 1:&lt;/strong&gt; We are importing the eth gem we installed earlier.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Line 3:&lt;/strong&gt; We are creating a new Ethereum RPC client, passing in our Ethereum node URL. Visit the official eth.rb Github repo for more information.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Line 4:&lt;/strong&gt; We are getting the latest Ethereum block number using the eth_block_number method and storing it in block_number.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Line 5:&lt;/strong&gt; We are printing the block number. Note that the returned result is in hexadecimal format, thus we use the to_i(16) function to convert it into an integer, base 16. &lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Run the Script
&lt;/h2&gt;

&lt;p&gt;Execute the script by running the following in your Terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;ruby&lt;/span&gt; &lt;span class="n"&gt;script&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;rb&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After running this command, you will see the latest Ethereum block number returned on the following line. That’s it! We've successfully connected to the Ethereum network using Ruby.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This is just one application of the "eth" gem, and upon utilizing more of its features, there are a seemingly infinite number of ways we could put these capabilities to use.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Conclusion 🔑
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;Web 3 offers up a plethora of new opportunities for individuals from all circles of life, and with ever evolving and incoming resources for developers to explore, the possibilities are endless.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Though this post was primarily focused on interacting with the Ethereum blockchain, the examples which I've covered are merely that--&lt;/p&gt;

&lt;h3&gt;
  
  
  examples from which I hope anyone reading this might be inspired by the extended use cases of smart contracts, and blockchain technology.
&lt;/h3&gt;




&lt;p&gt;&lt;strong&gt;I hope that in some way, this has sparked a flame within you to consider a new perspective,&lt;/strong&gt; and I appreciate you taking the time to take a step within my mind. If you have any questions, or would like to be in touch, feel free to message me, or comment below.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://www.instagram.com/nessakodo"&gt;Instagram&lt;/a&gt; &lt;a href="https://www.twitter.com/nessakodo"&gt;Twitter&lt;/a&gt; &lt;a href="https://discord.gg/QrgwKkAyq8"&gt;Discord&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ʕっ• ᴥ • ʔっ Thanks for reading!
&lt;/h3&gt;




&lt;h2&gt;
  
  
  &lt;em&gt;Love,&lt;/em&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  &lt;em&gt;NESSA KODO&lt;/em&gt;
&lt;/h2&gt;

</description>
      <category>ruby</category>
      <category>web3</category>
      <category>rails</category>
      <category>blockchain</category>
    </item>
    <item>
      <title>The Heart of Web 3.0</title>
      <dc:creator>𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</dc:creator>
      <pubDate>Mon, 19 Sep 2022 06:36:03 +0000</pubDate>
      <link>https://dev.to/nessakodo/the-heart-of-web-30-4iln</link>
      <guid>https://dev.to/nessakodo/the-heart-of-web-30-4iln</guid>
      <description>&lt;h2&gt;
  
  
  Decentralizing the internet is at the heart of Web 3.
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;As new technologies and systems continue to rapidly emerge, it is essential to understand why decentralization is so important.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe width="100%" height="166" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/none_such/rihanna-disturbia&amp;amp;auto_play=false&amp;amp;color=%23000000&amp;amp;hide_related=false&amp;amp;show_comments=true&amp;amp;show_user=true&amp;amp;show_reposts=false&amp;amp;show_teaser=true"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;The cornerstones of Web 3 are built on ideas of &lt;strong&gt;user ownership, and transparency.&lt;/strong&gt; The goal of establishing this new phase of the internet is intended to &lt;em&gt;end our collective reliance on a handful of tech giants&lt;/em&gt; while reducing the amount of control that any one company can have over the internet moving forward.&lt;/p&gt;




&lt;p&gt;As reported by according to the &lt;a href="https://www.emergenresearch.com/press-release/global-web-3-market"&gt;analysis&lt;/a&gt; by Emergen Research...&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  The Web 3 market size was $3.2 billion in 2021 and is forecasted to reach $81.5 billion in 2030, growing at a CAGR of 43.7%
&lt;/h3&gt;
&lt;/blockquote&gt;

&lt;p&gt;Though this is only one analysis taken into scope, I truly believe that the future will make great strides towards the developments currently being built in the Web 3 space, and I think it would be greatly beneficial for us all to contemplate how we might like to be a part of this technological and artistic renaissance...&lt;/p&gt;

&lt;h3&gt;
  
  
  as builders, creatives, and visionaries.
&lt;/h3&gt;




&lt;p&gt;The world of Web 3 has truly changed my life, and so many experiences have shaped my path in ways I could have never anticipated. &lt;strong&gt;From selling Jake Paul my own digitized artwork,&lt;/strong&gt; to working as a community manager for a 10,000 piece NFT collection, I have gotten the chance to understand many realms within this new evolution of the web, and the fire within my heart to both pursue it and to help build it, grows stronger every day.&lt;/p&gt;

&lt;p&gt;Following 3 weeks of learning to create &lt;strong&gt;React apps from scratch at Flatiron School,&lt;/strong&gt; I have been greatly inspired to continue building upon my budding software engineering skills, and will actively work towards learning the fundamentals of what will enable me to become a strategic and intentional &lt;strong&gt;&lt;em&gt;blockchain developer.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I entered the Web 3 space in early 2021, and since then have only come to see more and more each day the endless possibilities in which our &lt;strong&gt;societal frameworks could re-establish themselves for the betterment of our collective future.&lt;/strong&gt; This will be the first of a few posts simply overviewing some of the information I have found to be integral to truly understanding the Web 3 space, and will always do my very best to perpetuate the idea of &lt;strong&gt;decentralization&lt;/strong&gt; -- even if all hope of a truly decentralized future may not be feasible on a global scale.&lt;/em&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  What is Web 3.0? 💱
&lt;/h1&gt;

&lt;p&gt;Web3 is the metamorphosis of the world wide web. It includes, but is not limited to the realms of NFTs, blockchains, DAOs, the metaverse, and crypto. &lt;/p&gt;

&lt;p&gt;Despite the growing awareness of Bitcoin and Ethereum, along with the emergence of new categories like &lt;strong&gt;DeFi, NFTs, GameFi and DAOs,&lt;/strong&gt; blockchain developers represent less than 1% of the 31.1M software developers globally. &lt;/p&gt;

&lt;p&gt;Facilitating the ease of use and interaction with decentralized apps &lt;strong&gt;(dApps)&lt;/strong&gt; on a global scale where all blockchain networks are interlinked may require extra steps and more engagement, but many will see it as a worthwhile and necessary effort.&lt;/p&gt;




&lt;h1&gt;
  
  
  The Web Evolution 🌱
&lt;/h1&gt;

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




&lt;h1&gt;
  
  
  Web 1.0 - Information (Past)
&lt;/h1&gt;

&lt;p&gt;In this initial version of the web, a user was only able to read the content of news sites, portals, search engines etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Web 1 era was highly decentralized for a couple of reasons:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Low bandwidth infrastructure (up to 1Mbps)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Underdeveloped infrastructure went hand-in-hand with simple coding practices. Everyone could learn HTML or copy a template to deploy a website&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Web 2.0 - Interaction (Present)
&lt;/h1&gt;

&lt;p&gt;In the late 2000s, ventures such as YouTube and Netflix were able to scale as they delivered &lt;strong&gt;streamed content&lt;/strong&gt; to the mass market.&lt;/p&gt;

&lt;p&gt;In essence, Web 2 is the merger of Server-side (programs executed on a server) and Client-side (programs executed in a browser) programming, with web browser languages as the starting point.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h2&gt;
  
  
  Development stacks that have shaped the world as we know it today:
&lt;/h2&gt;
&lt;/blockquote&gt;

&lt;p&gt;These programming layers made it possible to create dynamic web content, sandwiched between the Client-side and Server-side.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Web browser stack:&lt;/strong&gt; HTML, JavaScript, CSS&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Advanced Server-side and Client-side stack:&lt;/strong&gt; PHP, JavaScript, Ruby, Python, Java&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Server-side web frameworks:&lt;/strong&gt; Django, Ruby on Rails, Laravel, etc.&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Web 2 was built upon ideas of raising capital and the traditional management of business, leading to centralization and the &lt;strong&gt;network effect.&lt;/strong&gt; Even if someone could clone Twitter, &lt;strong&gt;the value of Twitter is not in its software, but in the number of people using it.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ultimately, this reality is what has brought about the reign of &lt;strong&gt;large tech giants&lt;/strong&gt; in which many of us have indirectly become reliant on.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h2&gt;
  
  
  Example: Google.
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;(where it started)&lt;/strong&gt; search engine start-up &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(where it is today)&lt;/strong&gt; ad integration and monetization, news aggregation, video-sharing, payment rails, AI, robotics, and smartphones &lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;




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

&lt;p&gt;In the end, Web2 turned into an expansive ecosystem made up of a handful of organizational nodes. These nodes make it convenient to interact with the world, &lt;strong&gt;but centralized companies control the nodes and can change their policies whenever they like, inevitably leading to the lack of user ownership and transparency we so desperately need today.&lt;/strong&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  Web 3.0 (The Future)
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;A year after the Great Recession of 2008–09, Bitcoin emerged as peer-to-peer (P2P) digital money, its genesis block directly referencing bank bailouts.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Bitcoin emerged as an alternative to central banking.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  Bitcoin’s blockchain technology laid out the groundwork for what Web 3 is built upon.
&lt;/h4&gt;

&lt;p&gt;After all, if money can be made both digital and decentralized, it is a layer that can easily be integrated into the internet.&lt;/p&gt;

&lt;p&gt;Essentially, Web 3 mirrors Bitcoin, in the ways that it is a &lt;strong&gt;permission-less, trustless, and decentralized way of generating content, distributing it, and owning it.&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  Web3 is in many ways a continuation of Web2 in terms of interactivity, but at the bottom of the stack is a blockchain protocol.
&lt;/h3&gt;
&lt;/blockquote&gt;

&lt;p&gt;On top of the blockchain protocol are &lt;strong&gt;four layers&lt;/strong&gt; that bind blockchain to the end-user experience:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Smart contracts&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Web3 libraries&lt;/strong&gt; &lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Nodes&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Wallets&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;These layers offer the same Web2 functionality, but with decentralized monetization, funds/data ownership, and censorship-resistant content.&lt;/em&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  Building the Future 🛠️
&lt;/h1&gt;

&lt;p&gt;Given a brief overview of the evolution many of us have seen the Web emerge as, &lt;strong&gt;the time is now here to ideate, create, and further implement projects and organizations that can fuel us all to embrace a future where ownership is ours, and transparency bolsters ethical business practices.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Just a few months ago when I happened to be living in Silicon Valley working for a Web 3 social media startup, I quickly came to learn how many resources are becoming more and more readily available for developers to access and utilize as they craft software and applications for this new sphere of the Web. &lt;strong&gt;I was lucky to encounter some developer friends in my time living there who greatly encouraged me to learn React and Solidity to build dApps.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;In future posts, I will make a point of delving deeper into the core fundamentals of the technology that Web 3 has emerged from, as well as the up and coming changes from which blockchain development will only become easier and more accessible. &lt;strong&gt;For the remainder of this post however, a few of the key factors in which I will touch upon include a bit about the blockchain, and the data that is stored on it.&lt;/strong&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  What is Blockchain? 🔗
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;At its core, a blockchain is a public database of transactions&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Blockchains themselves are pretty straightforward. They &lt;strong&gt;offer a public record which stores a history of transactions&lt;/strong&gt; between parties, and this information &lt;strong&gt;can be accessed by anybody.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1) Immutability&lt;/strong&gt;&lt;br&gt;
A blockchain is append-only. Once data has been written, it can't be changed (known as immutability). &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2) Validation&lt;/strong&gt;&lt;br&gt;
A blockchain takes the form of a linked-list instead of a table. That is, every set of transactions &lt;strong&gt;(known as a block)&lt;/strong&gt; that is added to the blockchain must point to the previous block.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;That way, there's a linear history of every transaction that has ever occurred the blockchain.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3) Decentralization&lt;/strong&gt;&lt;br&gt;
Because blockchains are decentralized - they're not owned by any particular organization, and can't be taken down in the same way as a regular database.&lt;/p&gt;




&lt;p&gt;There are two primary forms of data that are stored on the blockchain:&lt;/p&gt;

&lt;h1&gt;
  
  
  Cryptocurrencies and Smart Contracts
&lt;/h1&gt;




&lt;blockquote&gt;
&lt;h2&gt;
  
  
  &lt;em&gt;Cryptocurrency&lt;/em&gt;
&lt;/h2&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;Cryptocurrencies are basically digital currencies that can be exchanged online as a form of payment for goods and services.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Crypto differs from traditional digital payment methods in a variety of ways:
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1.&lt;/strong&gt; Instead of having to register on a financial platform, &lt;strong&gt;anyone in the world can access and transfer cryptocurrency directly&lt;/strong&gt;. Users don't need to worry about their &lt;strong&gt;assets being frozen or controlled&lt;/strong&gt; by a third party.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2.&lt;/strong&gt;  &lt;em&gt;Financial platforms are regulated by governments,&lt;/em&gt; and require personal data to use their services as a result. Cryptocurrencies allow transferring ownership &lt;strong&gt;without necessitating proof of identity.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3.&lt;/strong&gt; As a result, &lt;strong&gt;market value can vary wildly,&lt;/strong&gt; based on expectations for the project or blockchain tech as a whole. Volatility is very important in understanding which crypto investments are &lt;strong&gt;more risky or stable than others.&lt;/strong&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;h2&gt;
  
  
  &lt;em&gt;Smart Contracts&lt;/em&gt;
&lt;/h2&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;Smart contracts offer those who interact with them:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1) Immutability:&lt;/strong&gt; Because smart contracts are immutable, an entity cannot change the agreement for personal gain. &lt;strong&gt;There is no possibility of a third party altering data on the blockchain&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2) Transparency:&lt;/strong&gt; Smart contracts are published to the blockchain, and can be &lt;strong&gt;read and written by anyone&lt;/strong&gt; who has access to the blockchain.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3) Simplicity&lt;/strong&gt;: Because smart contracts are expensive to deploy onto the blockchain and contain sensitive logic dictating the flow of financial transactions, &lt;strong&gt;they tend to be much smaller and simpler than most codebases.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you're a JavaScript developer&lt;/strong&gt; and want to explore writing your own smart contract, you may want to get familiar with &lt;strong&gt;Solidity.&lt;/strong&gt; This is the most popular smart contract language and it's syntactically similar to JavaScript, which may make it easier to learn. &lt;/p&gt;

&lt;p&gt;The best place to start to understand the fundamentals of blockchain is the &lt;strong&gt;&lt;a href="https://ethereum.org/en/developers/docs/"&gt;Ethereum&lt;/a&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;a href="https://docs.soliditylang.org/en/v0.8.11/"&gt;Solidity&lt;/a&gt;&lt;/strong&gt;  documentation.&lt;/p&gt;

&lt;p&gt;I have only begun to experiment with using Solidity in conjunction with React, &lt;strong&gt;but have included a React snippet here&lt;/strong&gt; to show what the starter code for an app to display your connected Web 3 wallet would consist of.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;&lt;em&gt;Initializing the relevant library&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6u8segslbnmiklyuahwz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6u8segslbnmiklyuahwz.png" alt="init" width="403" height="255"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Establishing the state of the connected account&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;&lt;em&gt;And the return that would render your data...&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foutqdwqd2myew28jp16m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foutqdwqd2myew28jp16m.png" alt="return" width="487" height="293"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;With some additional code and configurations, you can easily build a simple dApp that would allow you to build a blockchain-based todo list powered by Ethereum smart contracts on the blockchain.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;If you are interested into diving into creating a react dApp for yourself, check out this &lt;a href="https://www.dappuniversity.com/articles/ethereum-dapp-react-tutorial"&gt;resource&lt;/a&gt; for an in depth guide.&lt;/em&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;h3&gt;
  
  
  A smart contract is a mechanism involving digital assets and two or more parties, where some or all of the parties put assets in, and assets are automatically redistributed among those parties according to a formula based on certain data that is not known at the time the contract is initiated.
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;— Vitalik Buterin,&lt;/strong&gt; Co-Founder of Ethereum&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;


&lt;/blockquote&gt;

&lt;p&gt;Simply put, a smart contract is an &lt;strong&gt;if/when … then&lt;/strong&gt; that is written into code. Two parties agree on certain terms that are translated to code and then added to the blockchain. &lt;strong&gt;Smart contracts automatically execute whenever a certain condition is met making them efficient.&lt;/strong&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  Metamorphosis 🦋
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Web 3 offers up a plethora of new opportunities for individuals from all circles of life.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This is likely just the start of many posts on this topic,&lt;/em&gt; as the heart behind this evolution of the Web has changed my life for the better in so many ways. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;My biggest goal as a developer is to share the fire within me that is my dedication to promoting the idea of decentralization, a future being built, operated, and owned by its users.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Rather than continuing to rely on a structure monopolized by large technology companies, the future of what this new evolution of the Web offers *&lt;em&gt;puts power back into our hands as individuals, rather than corporations. *&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I hope that in some way, this has sparked a flame within you to consider a new perspective,&lt;/strong&gt; and I appreciate you taking the time to take a step within my mind. If you have any questions, or would like to be in touch, feel free to message me, or comment below.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://www.instagram.com/nessakodo"&gt;Instagram&lt;/a&gt; &lt;a href="https://www.twitter.com/nessakodo"&gt;Twitter&lt;/a&gt; &lt;a href="https://opensea.io/butterfleye"&gt;Opensea&lt;/a&gt; &lt;a href="https://discord.gg/QrgwKkAyq8"&gt;Discord&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ʕっ• ᴥ • ʔっ Thanks for reading!
&lt;/h3&gt;




&lt;h2&gt;
  
  
  &lt;em&gt;Love,&lt;/em&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  &lt;em&gt;NESSA KODO&lt;/em&gt;
&lt;/h2&gt;

</description>
      <category>blockchain</category>
      <category>javascript</category>
      <category>react</category>
      <category>web3</category>
    </item>
    <item>
      <title>Observing Life Through Code</title>
      <dc:creator>𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</dc:creator>
      <pubDate>Tue, 06 Sep 2022 17:18:29 +0000</pubDate>
      <link>https://dev.to/nessakodo/observing-life-through-code-49p4</link>
      <guid>https://dev.to/nessakodo/observing-life-through-code-49p4</guid>
      <description>&lt;blockquote&gt;
&lt;h1&gt;
  
  
  “Simplicity is the soul of efficiency.”
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;— Austin Freeman&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Just a few months ago, I dropped out of college in an effort to take a bet on myself. Though I wasn’t totally sure what my next move would be, I felt compelled to lean into my interests in the &lt;strong&gt;Web 3 space.&lt;/strong&gt; About a week after disclosing my withdrawal from the remainder of the Spring 2022 semester, I was given the opportunity to attend a crypto conference within my own city — an experience that has forever shaped my path for the better.&lt;/p&gt;

&lt;p&gt;I attended ETH Denver as a “BUIDLER”, and though I was not well versed in many programming languages at the time, I was able to encounter many remarkable individuals with communities and projects in the making that I know are &lt;strong&gt;changing the future&lt;/strong&gt; as we know it.&lt;/p&gt;

&lt;p&gt;Many developers from all backgrounds came together to collaborate with others to create applications and projects that could be selected and further funded by VCs and companies within the Web 3 space. Being able to watch the formation and development of &lt;strong&gt;these ideas sparked a flame within me&lt;/strong&gt; that I haven’t been able to tame since, and I am forever grateful that somehow I took the leap towards exploring that which truly strikes a chord within me, the path of pursuing a new practice that pushes me to continue to be a lifelong learner, &lt;strong&gt;observing my own growth through progress, and observation.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Many conference attendees were eager to share their knowledge, and upon relaying my ambitions to be a blockchain developer, I was told about the &lt;strong&gt;Flatiron School,&lt;/strong&gt; a programming school with live classes in my city.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I am now writing this as a student who has just completed the first out of five phases within the Software Engineering Bootcamp at Flatiron School in Denver, and following the last three weeks of exploring HTML, CSS and JavaScript, I have come upon some observations I’d like to at least try to express in words.&lt;/em&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  Patterns Extending to the Etheric 🧬
&lt;/h1&gt;

&lt;p&gt;Though I would consider myself a spiritual person, I feel as if the meaning of that word has been convoluted by trends in recent years that perpetuate ideals of spirituality that detract from what it at least seems to me — a lifelong journey of introspection, rather than a lifestyle filled with superficial practices and ritual that may negate from the observation, learning, and growth that an organic and free-flowing spiritual path facilitates.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  &lt;em&gt;Etheric: of or relating to the heavens or a spiritual world or plane of existence&lt;/em&gt;
&lt;/h3&gt;
&lt;/blockquote&gt;

&lt;p&gt;Within the context of programming, it’s become quite obvious to me that &lt;strong&gt;there are a seemingly infinite number of ways to write code,&lt;/strong&gt; even if the intended goal is to perform the same function.&lt;/p&gt;

&lt;p&gt;Regardless of how a developer may structure their code, &lt;strong&gt;there remains a consistent set of underlying structures&lt;/strong&gt; that must remain the same for any code to work properly.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;I personally believe that by observing themes and patterns on a micro level, we can better understand what might happen on a larger, more macro level. Individually, collaboratively, and systematically, many of the same underlying structures and elements remain constant, just as code does.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ultimately, following my first week of collaboratively working on my first project for school, I have been inspired to contemplate what some of my realizations might suggest about life on a larger scale.&lt;/p&gt;

&lt;p&gt;I’ve been reminded of some thoughts and ideas I’ve come across in other life contexts too — which only reinforces my belief that &lt;strong&gt;much of life stems from a very similar base,&lt;/strong&gt; one which we shape and form to fit our individual styles and expressions as intellectuals and creatives.&lt;/p&gt;

&lt;p&gt;In a very similar way, &lt;strong&gt;JavaScript, HTML, and CSS&lt;/strong&gt; in conjunction with one another and separately, &lt;strong&gt;have enabled me to come to both new and familiar realizations,&lt;/strong&gt; which I will elaborate on in the remainder of this post.&lt;/p&gt;




&lt;h1&gt;
  
  
  Communication is 🔑
&lt;/h1&gt;

&lt;p&gt;In order to create effective communication, &lt;strong&gt;clear definitions of how you will express ideas and thoughts are essential.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Among the three primary programming languages I’ve been learning, there are different syntax rules that can sometimes make or break your code, meaning that **you can’t just copy and paste content **from one language to another and expect it to work.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Within the realms of programming, friendships, and partnerships, clear communication, and expression of needs, tendencies, and wishes, must be present in order to establish and create something solid, sound, and functional.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;While this may sound a bit cliche, I found it worthy of touching on regardless.&lt;/p&gt;




&lt;h1&gt;
  
  
  Meet Me at the Function 🥳
&lt;/h1&gt;

&lt;p&gt;Throughout the last few weeks, my many attempts to write and adjust JavaScript codes through trial and error have enabled me to understand the fundamentals of how functions work much more in-depth than ever before.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  &lt;em&gt;A JavaScript function is a block of code designed to perform a particular task.&lt;/em&gt;
&lt;/h3&gt;
&lt;/blockquote&gt;

&lt;p&gt;There are A LOT of different ways to write functions in JavaScript, and two expressions that I have found particularly interesting are the &lt;strong&gt;arrow and anonymous functions.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the code snippets below, I have tried to render the **same result **using these different function methods.&lt;/p&gt;

&lt;p&gt;You can test these in &lt;strong&gt;&lt;a href="https://replit.com/languages/javascript"&gt;Replit&lt;/a&gt;&lt;/strong&gt; to verify that this is the result for the codes written below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;you&lt;/span&gt; &lt;span class="nx"&gt;are&lt;/span&gt; &lt;span class="nx"&gt;awesome&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These are just a few examples of the ways you can write the same function, and I’d like to think that this further enforces the idea that &lt;strong&gt;a similar backbone exists&lt;/strong&gt; behind many of the things that stem from an initial effect.&lt;/p&gt;




&lt;h2&gt;
  
  
  Traditional Functions
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;encouragement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&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="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;you are awesome!&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="nf"&gt;encouragement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;smile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;//result&lt;/span&gt;
&lt;span class="c1"&gt;//smile, you are awesome!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Within this statement, we are introducing the function with the typed-out word “function” before the name of what we will call the function.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. Anonymous Functions
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;encouragement&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&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="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;you are awesome!&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="nf"&gt;encouragement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;smile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;//result&lt;/span&gt;
&lt;span class="c1"&gt;//smile, you are awesome!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Anonymous functions allow us to call a function by simply assigning a variable, and follow the same structure as a traditional function.&lt;/p&gt;




&lt;h2&gt;
  
  
  3. Arrow Functions
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;encouragement&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;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="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;you are awesome!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;encouragement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;smile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;//result&lt;/span&gt;
&lt;span class="c1"&gt;//smile, you are awesome!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Arrow functions allow us to condense the length of our function, enabling us to define it in a single line, while still computing the same result.&lt;/p&gt;




&lt;p&gt;The variety of function expressions I have briefly discussed here are just a few of the many ways you can structure a function in JavaScript. Though the particularities of their styles vary, &lt;strong&gt;they still require the same core elements.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;em&gt;In many ways, I believe that our separate journeys as individuals within the human collective reflects this…leading us to also utilize some of the same elements or structures in the context of our lives.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Though many of us at this point have cultivated a number of different lifestyles and interests that allow us to experience vastly different life paths from one another,** we still seemingly come across the same themes, lessons, and ideals.**&lt;/p&gt;




&lt;h2&gt;
  
  
  Less is More 🤏
&lt;/h2&gt;

&lt;p&gt;Within many other contexts within my life, I have come to realize that less really is more, and **being able to make a point that can be clearly understood, yet is still precisely to the point **is truly a skill I hope to better harness and utilize as I continue to evolve as a person, and a developer.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  “Success is rarely determined by the quality of your ideas. But it is frequently determined by the quality of your execution.”
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;― Jeff Atwood&lt;/em&gt;&lt;/strong&gt; &lt;em&gt;Effective Programming: More Than Writing Code&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Arrow functions provide a beautiful point of introspection for me, as they emphasize the point of &lt;strong&gt;how important it is to keep things meaningful and succinct.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;**Further examples of how arrow functions can work are included below, **and I have included them to not only display their structure and functionality, but also hope that they can elude to the idea of embodying the vast array of ways that a function can be written.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;While negating much of the extra “fluff” a function might normally contain, arrow functions may not have all the capabilities of other structures.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;That being said…to any developers who may be reading this, I would advise you to avoid using the arrow function for event handlers, object methods, prototype methods, and functions that use the arguments object.&lt;/em&gt;&lt;/p&gt;






&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;smile&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;a shining star&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt; &lt;span class="o"&gt;=&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="nx"&gt;b&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="s2"&gt;`&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;, you are &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="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="nf"&gt;add&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="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This function would return the following text in the console:&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;//smile, you are a shining star!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One final example of an arrow function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;phrase&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;“&lt;/span&gt;&lt;span class="nx"&gt;smile&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;you&lt;/span&gt; &lt;span class="nx"&gt;are&lt;/span&gt; &lt;span class="nx"&gt;amazing&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="err"&gt;”&lt;/span&gt;
&lt;span class="nx"&gt;phrase&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;expression&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;param&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// this would return:&lt;/span&gt;
&lt;span class="nx"&gt;Resulting&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;the&lt;/span&gt; &lt;span class="nx"&gt;following&lt;/span&gt; &lt;span class="nx"&gt;phrase&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;

&lt;span class="c1"&gt;//smile, you are amazing!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;The arrow function allows for the bulkiness of extra syntax elements to be replaced by &lt;strong&gt;simpler, shorter arrangements.&lt;/strong&gt; I find this fascinating, and have found myself striving to reanalyze my coding techniques in efforts to cut down on some of the extra lines I’ve written, allowing me to more clearly establish what is going on within the function itself.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Within my life outside of coding, I have begun to also see how much more easy to understand clear and concise communication can be.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;As my journey both with development and through life continues to unfold, I look forward to challenging myself to be more succinct with what the information I am trying to relay, in any medium I might be using.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion 🧠
&lt;/h2&gt;

&lt;p&gt;Though I am still quite new to coding, the concepts I‘ve been able to learn have inspired me in many contexts outside its realm. Clear communication is key, and learning to express that in the most understandable and to the point way, is an effort I think would all help us to better understand one another better.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  “Perfection is achieved not when there is nothing more to add, but rather when there is nothing more to take away.”
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;— Antoine de Saint-Exupery&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;There is no better time than now to exercise this, as &lt;strong&gt;we are in the midst of what seems like a modern renaissance,&lt;/strong&gt; enabling us to create and share with the world ideas and visions that would only be possible given the technological and ideological advancements of the modern age.&lt;/p&gt;

&lt;p&gt;Within the context of code and everyday life, &lt;strong&gt;infinite possibilities exist in terms of the various styles we might use as forms of expression.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;em&gt;At the core, the same fundamental elements exist and furthermore serve as cornerstones of the structure that is integral to the success of creating our desired result.&lt;/em&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;h3&gt;
  
  
  “Programming, in essence, must become the act of reducing complexity to simplicity.”
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;— Max Kanat-Alexander&lt;/em&gt;&lt;/strong&gt; &lt;em&gt;Code Simplicity: The Fundamentals of Software&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I look forward to writing more content on this platform regarding more of my introspective thoughts as they surface within my journey of learning to code. &lt;strong&gt;I hope that in some way, this has sparked a flame within you to consider a new perspective,&lt;/strong&gt; and I appreciate you taking the time to take a step within my mind. If you have any questions, or would like to be in touch, feel free to message me, or comment below.&lt;/p&gt;

&lt;h3&gt;
  
  
  ʕっ• ᴥ • ʔっ Thanks for reading!
&lt;/h3&gt;




&lt;h2&gt;
  
  
  &lt;em&gt;Love,&lt;/em&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  &lt;em&gt;NESSA KODO&lt;/em&gt;
&lt;/h2&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Experiments &amp;&amp; Progress</title>
      <dc:creator>𝙉𝙚𝙨𝙨𝙖 𝙆𝙤𝙙𝙤</dc:creator>
      <pubDate>Thu, 25 Aug 2022 16:47:00 +0000</pubDate>
      <link>https://dev.to/nessakodo/experiments-progress-4i6g</link>
      <guid>https://dev.to/nessakodo/experiments-progress-4i6g</guid>
      <description>&lt;h1&gt;
  
  
  Context
&lt;/h1&gt;

&lt;p&gt;Within the scope of this post, I am going to delve into some of my understandings in my process of experimenting with the idea of coded music synthesizers. I have created a relatively simple audio synthesizer using the &lt;strong&gt;Web Audio API&lt;/strong&gt; and in future posts will deploy my synth as I enhance its interface and functions.&lt;/p&gt;

&lt;p&gt;To get an idea of what I will be discussing, &lt;/p&gt;

&lt;h4&gt;
  
  
  here is what the synth I've coded so far looks like!
&lt;/h4&gt;

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




&lt;h1&gt;
  
  
  Objective
&lt;/h1&gt;

&lt;p&gt;My primary objective in exploring this project, is to utilize the knowledge I've gathered with &lt;strong&gt;HTML, CSS, and JavaScript&lt;/strong&gt; to build a functional synthesizer and furthermore determine what possible parameters and displays I can add to it to create &lt;/p&gt;

&lt;h4&gt;
  
  
  an epic tool for creating algorithmic sound.
&lt;/h4&gt;

&lt;p&gt;This synthesizer uses an oscillator as the source of its sound, which I will briefly touch on in my thoughts below.&lt;/p&gt;




&lt;h1&gt;
  
  
  Inspiration
&lt;/h1&gt;

&lt;p&gt;Much of my inspiration stems from the live coding synthesizer &lt;strong&gt;Sonic Pi&lt;/strong&gt; which has been created by the wonderful &lt;strong&gt;Sam Aaron.&lt;/strong&gt; This program is free for anyone to use! &lt;/p&gt;

&lt;p&gt;Sonic Pi is basically an incredible Ruby based program in which you can build functions to create sounds and manipulate them in front of live audiences, AND Sam created a very in depth guide for how to use it.&lt;/p&gt;

&lt;p&gt;The photo below is a photo of the program, and a bit of code I've put into it to create a &lt;strong&gt;basic techno beat.&lt;/strong&gt;&lt;/p&gt;

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




&lt;h1&gt;
  
  
  Intention
&lt;/h1&gt;

&lt;p&gt;As I continue to work on this project, it will evolve in the way it works and functions, as my primarily goal is to integrate a container for code to generate and display as some of the parameters are adjusted within the synth. &lt;/p&gt;

&lt;h4&gt;
  
  
  I really appreciate what Sonic Pi has to offer its users, and really just want to bring more focus to the "algoraving" scene.
&lt;/h4&gt;

&lt;p&gt;This post serves to mainly delve into some of the code I created with my novice understanding of JavaScript, and I hope as I continue to work on this and other related projects, to display the skills I am harnessing as I &lt;strong&gt;(hopefully)&lt;/strong&gt; become a better coder.&lt;/p&gt;

&lt;h5&gt;
  
  
  The basic framework for creating a modular synth should involve a master volume control, and I established this with a JS variable:
&lt;/h5&gt;






&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const masterVolume = context.createGain();
masterVolume.connect(context.destination);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Though I am only going to tap on the topic of what an oscillator is for the sake of simplicity, &lt;strong&gt;(as I am not discussing my assignment of notes in this post)&lt;/strong&gt; I will include the general definition of what an oscillator is.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;An electronic oscillator is an electronic circuit that produces a periodic, oscillating electronic signal, often a sine wave or a square wave or a triangle wave.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To &lt;strong&gt;add an oscillator&lt;/strong&gt; to the sound source I created this variable, and also connected it to the volume variable in the code above.&lt;/p&gt;






&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const oscillator = context.createOscillator();
oscillator.frequency.setValueAtTime(220, 0);
oscillator.connect(masterVolume);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  ASDR
&lt;/h1&gt;

&lt;p&gt;In sound and music, an &lt;strong&gt;envelope&lt;/strong&gt; describes how a sound changes over time, and is essentially an amplitude effect typically made up of &lt;strong&gt;4 values: (A)ttack time, (D)ecay time, (S)ustain level, and (R)elease time, or ADSR.&lt;/strong&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  These are the four main controls of an envelope. Envelopes are what make a sound short and punchy, and also what enables you to fade in and fade out a sound.
&lt;/h4&gt;




&lt;h3&gt;
  
  
  Here is a visual that might simplify this concept.
&lt;/h3&gt;

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

&lt;p&gt;Within my code, I used JavaScript to create these variables for the synthesizer to call from.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web Audio API doesn’t have an envelope built in,&lt;/strong&gt; it is possible to simulate the same effect using gain nodes. Here is the code I used to set initial parameters for the sound envelope.&lt;/p&gt;






&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Envelope
let attackTime = 0.3;
let sustainLevel = 0.8;
let releaseTime = 0.3;
let noteLength = 1;

const attackControl = document.querySelector('#attack-control');
const releaseControl = document.querySelector('#release-control');
const noteLengthControl = document.querySelector('#note-length-control'):
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Within the synthesizer I've coded, I've included three interactive levels that a user to adjust the range of the Attack, Release, and Note Length.&lt;/p&gt;

&lt;p&gt;The event listeners below &lt;strong&gt;enables the levels that a user chooses to be registered as values&lt;/strong&gt; that can greatly change the dynamic of the oscillator chosen.&lt;/p&gt;






&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;attackControl.addEventListener('input', function() {
  attackTime = Number(this.value);
});

releaseControl.addEventListener('input', function() {
  releaseTime = Number(this.value);
});

noteLengthControl.addEventListener('input', function() {
  noteLength = Number(this.value);
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;It might have made sense for me to write this post on the way the sounds were implemented for the synthesizer to play, but &lt;strong&gt;I think that would be more appropriate for a more in depth post&lt;/strong&gt; lightly tapping into music theory, and some of the ways Sonic Pi also generates notes from numbers.&lt;/p&gt;

&lt;p&gt;Though I am only &lt;strong&gt;a few weeks&lt;/strong&gt; into my journey with JavaScript, I am looking forward to better understanding it through creating and contributing towards projects within my coding school curriculum at &lt;strong&gt;Flatiron School&lt;/strong&gt;, as well as personal projects I find myself working on incessantly in my free time.&lt;/p&gt;

&lt;p&gt;If you're interested in exploring the &lt;strong&gt;Web Audio API&lt;/strong&gt; for yourself, &lt;/p&gt;

&lt;p&gt;you can explore some documentation &lt;strong&gt;&lt;a href="//ttps://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API"&gt;here.&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  ʕっ• ᴥ • ʔっ Thanks for reading!
&lt;/h4&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>api</category>
      <category>music</category>
    </item>
  </channel>
</rss>
