<?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: obiabo Immanuel</title>
    <description>The latest articles on DEV Community by obiabo Immanuel (@0514b0).</description>
    <link>https://dev.to/0514b0</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%2F238892%2F949f20a6-c975-44be-a111-cd10b97224ef.jpg</url>
      <title>DEV Community: obiabo Immanuel</title>
      <link>https://dev.to/0514b0</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/0514b0"/>
    <language>en</language>
    <item>
      <title>I Got Laid Off Recently, So I'm Letting Go of the Project I Believed In the Most</title>
      <dc:creator>obiabo Immanuel</dc:creator>
      <pubDate>Thu, 08 May 2025 16:09:50 +0000</pubDate>
      <link>https://dev.to/0514b0/i-got-laid-off-recently-so-im-letting-go-of-the-project-i-believed-in-the-most-509b</link>
      <guid>https://dev.to/0514b0/i-got-laid-off-recently-so-im-letting-go-of-the-project-i-believed-in-the-most-509b</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm1xcsqx3jal1ifv3khf9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm1xcsqx3jal1ifv3khf9.png" alt="Image description" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  A tough pill 💊 to swallow.
&lt;/h2&gt;

&lt;p&gt;A few months ago, I got laid off.&lt;br&gt;&lt;br&gt;
I spent the whole night trying to migrate a legacy codebase, wrestling with ancient Redux Toolkit patterns and chasing weird bugs,  only to wake up the next day to a layoff I never saw coming. Long story. But that’s how quickly things flipped, both my day and finances.&lt;/p&gt;

&lt;p&gt;Since then, I’ve been applying to jobs, following leads, and doing what I can to stay afloat, even diving deeper into Rust, building side projects like daemons and SDKs to keep growing. But there’s one thing I kept thinking about, a project I’ve poured months of love into: &lt;strong&gt;Potatoe Squeezy&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It actually started from a small birthday idea, why can’t people just tip you on your birthday via GitHub using Solana, maybe through a Chrome extension? The same way Telegram lets you gift Premium, or X fills your screen with balloons.&lt;br&gt;&lt;br&gt;
From there, the idea evolved: What if GitHub Sponsorships were global, borderless, and hassle-free?, That’s how &lt;strong&gt;Potatoe Squeezy&lt;/strong&gt; was born.&lt;/p&gt;

&lt;p&gt;Sponsorships are slow and gated, most bounty platforms delay payouts or feel overengineered, and even Buy Me a Coffee is too tied to fiat and borders.&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;Potatoe Squeezy&lt;/strong&gt;, think &lt;em&gt;GitHub Sponsors meets Buy Me a Coffee&lt;/em&gt;, but &lt;strong&gt;borderless, crypto-native, and frictionless&lt;/strong&gt;. &lt;/p&gt;




&lt;h3&gt;
  
  
  🥔 What is Potatoe Squeezy?
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Potatoe Squeezy&lt;/strong&gt; is a fast, no-hassle platform for tipping and rewarding open-source developers with &lt;strong&gt;crypto&lt;/strong&gt;, and you don’t need in-depth knowledge of crypto to use it. Even my Abulito (grandfather) could use it!&lt;/p&gt;

&lt;p&gt;It works in two ways:&lt;/p&gt;

&lt;h4&gt;
  
  
  🛠 On GitHub
&lt;/h4&gt;

&lt;p&gt;A bot listens to issues and pull requests:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;💸 Maintainers tag issues with a bounty (e.g., &lt;code&gt;/bounty 10 USDC&lt;/code&gt;)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;✅ When a contributor closes the issue, &lt;strong&gt;the bot auto-pays them&lt;/strong&gt; ( They just need to add their Solana wallet address)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No setup, no dashboards, no friction. Just GitHub + crypto.&lt;/p&gt;

&lt;h4&gt;
  
  
  🌐 On the Web App
&lt;/h4&gt;

&lt;p&gt;For non-coders or direct supporters:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;You can tip anyone on the platform&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🧠 &lt;strong&gt;No crypto experience required&lt;/strong&gt;, contributors just link a wallet once&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🔐 Payments are &lt;strong&gt;P2P&lt;/strong&gt;, which makes them secure and fast. All you need to do is click "Tip User" and select or input the amount you want to tip.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s built to &lt;strong&gt;make supporting devs effortless&lt;/strong&gt;, even for casual users or non-technical sponsors.&lt;/p&gt;




&lt;h3&gt;
  
  
  🌍 Why This Matters
&lt;/h3&gt;

&lt;p&gt;Open source is global. Recognition and rewards shouldn’t be gated by borders, payment processors, or fiat systems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Potatoe Squeezy&lt;/strong&gt; was designed for GitHub users everywhere, whether you're a maintainer in Berlin, a contributor in Lagos, Manila, Buenos Aires, the Caribbean, or even the Arctic Circle.&lt;br&gt;&lt;br&gt;
If you’ve ever wanted to pay/reward someone for fixing your bug, adding docs, or helping out,  this makes it easy, no matter where they are in the world.&lt;/p&gt;




&lt;h3&gt;
  
  
  💔 Why I’m Letting It Go
&lt;/h3&gt;

&lt;p&gt;The truth is: I can’t keep it alive right now. With the layoff, my focus has to shift to finding work and staying financially stable.&lt;/p&gt;

&lt;p&gt;So, I’ve decided to sell &lt;strong&gt;Potatoe Squeezy&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It’s live, fully functional, and at the MVP stage. Everything is clean and ready to be handed off:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;🧱 Well-structured code (TypeScript + Solana)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;💻 GitHub bot + web app&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🧾 Docs and deployment guides&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I would have loved to continue building it, as I am so bullish on it, but I’m biting the bullet and selling to get some funds to stay afloat. Yea, it’s a very difficult and hard decision.&lt;/p&gt;

&lt;p&gt;I tried uploading to marketplaces like Acquire.com, but it was rejected because the project is pre-revenue and still in the early stage. So, here I am, reaching out to anyone who might be interested in taking it to the next level.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Potatoe Squeezy&lt;/strong&gt; has also gotten some good traction: it was &lt;strong&gt;top 1 in the Web3 category of the week on Product Hunt&lt;/strong&gt; in its first week of launch, and &lt;strong&gt;top 10 on the first day&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  📬 Interested?
&lt;/h3&gt;

&lt;p&gt;Check the project: [&lt;a href="https://potatoesqueezy.xyz/" rel="noopener noreferrer"&gt;https://potatoesqueezy.xyz/&lt;/a&gt;]&lt;br&gt;&lt;br&gt;
DM me on Twitter: &lt;a href="https://x.com/obiabo_immanuel" rel="noopener noreferrer"&gt;obiabo_immanuel&lt;/a&gt;&lt;br&gt;&lt;br&gt;
Or email: [&lt;a href="mailto:rootkit.obiabo@gmail.com"&gt;rootkit.obiabo@gmail.com&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;I’ll provide the code, docs, support, and a smooth handoff.&lt;br&gt;&lt;br&gt;
I’m open to all reasonable offers , I just want to see it in good hands and need some funds to stay afloat.&lt;/p&gt;

&lt;h3&gt;
  
  
  💼 Open to New Opportunities
&lt;/h3&gt;

&lt;p&gt;I’m also actively looking for new opportunities. Feel free to check out my portfolio:&lt;br&gt;&lt;br&gt;
&lt;a href="https://www.obiabo.tech/" rel="noopener noreferrer"&gt;https://www.obiabo.tech/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And my GitHub profile:&lt;br&gt;&lt;br&gt;
&lt;a href="https://github.com/yhoungdev" rel="noopener noreferrer"&gt;https://github.com/yhoungdev&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  And Finally…
&lt;/h3&gt;

&lt;p&gt;I’ve spent countless hours coding, debugging, and contemplating the meaning of life (and whether Solana will ever make it to $1 again). I truly believe in &lt;strong&gt;Potatoe Squeezy&lt;/strong&gt;, and though it’s hard to let go, it’s all about passing the torch to someone who can take it further.&lt;/p&gt;

&lt;p&gt;If you’re the one who’s going to take &lt;strong&gt;Potatoe Squeezy&lt;/strong&gt; to new heights, I’ll be forever grateful and will always accept tips in the form of cat memes or Solana (both equally valuable).&lt;/p&gt;

&lt;p&gt;And hey, if you want to sponsor me or fund me? I’m always open and available, like you can see the Burj Khalifa or the sun from afar, hard to miss! 🌞&lt;/p&gt;

&lt;p&gt;Thank you for reading this far, you’ve earned a virtual high five. ✋&lt;/p&gt;

&lt;p&gt;Take care, and may everything you touch turn into success (or at least some good coffee). 😄&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>cryptocurrency</category>
      <category>github</category>
    </item>
    <item>
      <title>How to check the speed of your internet on Ubuntu</title>
      <dc:creator>obiabo Immanuel</dc:creator>
      <pubDate>Tue, 19 Oct 2021 08:07:51 +0000</pubDate>
      <link>https://dev.to/0514b0/how-to-check-the-speed-of-your-internet-on-ubuntu-409p</link>
      <guid>https://dev.to/0514b0/how-to-check-the-speed-of-your-internet-on-ubuntu-409p</guid>
      <description>&lt;p&gt;sometimes when our browsing is going slow or moving slowly, we wonder what might be the cause of this, and will like to the speed of the internet.&lt;br&gt;
  so in this tutorial we are going to be checking the speed of our internet connection, we are going to use a tool called &lt;strong&gt;FAST&lt;/strong&gt;. Fast is a package used for checking the speed of our internet connection&lt;/p&gt;
&lt;h4&gt;
  
  
  Installing Fast
&lt;/h4&gt;

&lt;p&gt;we are going to install Fast from Snapcraft &lt;br&gt;
so to install fast from snap &lt;br&gt;
just open your terminal and type&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo snap install fast&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;after the installation is completed just open your terminal and type &lt;/p&gt;

&lt;p&gt;fast or you can also add the -u flag and this will calculate your speed &lt;/p&gt;

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

</description>
    </item>
    <item>
      <title>How to install Applications on Linux</title>
      <dc:creator>obiabo Immanuel</dc:creator>
      <pubDate>Tue, 16 Feb 2021 16:09:12 +0000</pubDate>
      <link>https://dev.to/0514b0/how-to-install-applications-on-linux-2aed</link>
      <guid>https://dev.to/0514b0/how-to-install-applications-on-linux-2aed</guid>
      <description>&lt;h5&gt;
  
  
  Are you a Linux user and you have been looking for a way to install applications ?
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;Today we are going to learn how to install applications in linux &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  WHAT IS SNAP
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Snap is a software packaging and deployment system created by Canonical for the operating system that use Linux kernel &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Snap and it tool snapd  works across all range of Linux distro &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Installing Snapd in your computer
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;if you use Ubuntu 16 upward , dont worry you already have  snap installed&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;but incase if you think you dont , you can install it this way
##### To installo snap you need to do this &lt;/li&gt;
&lt;li&gt;&lt;code&gt;sudo apt install snapd&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;now once snap is installed you can check the version , of the snap of have installed by doing this :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open your Terminal ( CTRL + ALT +T )&lt;/li&gt;
&lt;li&gt;type &lt;code&gt;snap version&lt;/code&gt; once you press enter you will see the version &lt;/li&gt;
&lt;/ul&gt;

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

&lt;h4&gt;
  
  
  How to install apps from snap
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;snap is very easy and simple to use &lt;br&gt;
installing apps in snap is via the terminal &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  steps
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;go to %[ &lt;a href="https://snapcraft.io/" rel="noopener noreferrer"&gt;https://snapcraft.io/&lt;/a&gt; ]&lt;/li&gt;
&lt;li&gt; click on the search bar , then search for the  application you want to install &lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;click on the app you want to install &lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;once you are navigated to the app page &lt;/li&gt;
&lt;li&gt;click on the install button , a drop down will appear &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F89upso7d3pcqewnn5eum.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F89upso7d3pcqewnn5eum.png" alt="insta.png" width="800" height="456"&gt;&lt;/a&gt;&lt;br&gt;
*now copy the installation code to your terminal &lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;now press enter and wait for the installation to finish &lt;/li&gt;
&lt;li&gt;After installation has finished it will create a desktop entry &lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Css variable explained for newbie</title>
      <dc:creator>obiabo Immanuel</dc:creator>
      <pubDate>Tue, 09 Feb 2021 12:55:58 +0000</pubDate>
      <link>https://dev.to/0514b0/css-variable-explained-for-newbie-514p</link>
      <guid>https://dev.to/0514b0/css-variable-explained-for-newbie-514p</guid>
      <description>&lt;h5&gt;
  
  
  Have you have been in a scenario where you have lots of elements , but want them to have same stylings like ( color , font-size , hight , width e.t.c) ?
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;oooh yes &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h6&gt;
  
  
  So what was your move toward the issue ? is it by giving them same sudo property ?
&lt;/h6&gt;

&lt;blockquote&gt;
&lt;p&gt;Nope ! The best answer or solution to that is by using CSS Variable &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h5&gt;
  
  
  Now Lets get started
&lt;/h5&gt;

&lt;h5&gt;
  
  
  WHAT IS A CSS VARIABLE ?
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;A CSS varibales are variable used for reducing repetition in codes , with CSS variable you can write once and do many &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h5&gt;
  
  
  HOW THE CSS VARIABLES WORKS
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;The CSS Variable works in a very simple way , and clean manner , the CSS variable looks   like  object in Javascript, and works like a varibale in Javascript also &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h5&gt;
  
  
  UNDERSTANDING CSS VARIABLE.
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;the CSS variable is easy to understand , and in this tutorial we gonna break everything down &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h6&gt;
  
  
  BREAKING DOWN
&lt;/h6&gt;

&lt;blockquote&gt;
&lt;p&gt;CSS variable is bound in a psudo element in css which is called :root ,&lt;br&gt;
the :root element is where all your defined styles are kept ( wrapped in ) this is how the css variable looks like , below&lt;/p&gt;
&lt;/blockquote&gt;

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

&lt;h6&gt;
  
  
  THE BREAKING DOWN EXPLAINED HERE
&lt;/h6&gt;

&lt;blockquote&gt;
&lt;p&gt;As we said earlier the CSS styled values are wrapped in the :root element , and we said this is the element the holds the stylings we want &lt;br&gt;
the :root holds all the css styles we want . &lt;br&gt;
 in the image above we defined some stylings inside the :root element , and the best things to store inside the :root ( css varibale are , colors , font-size ,background-colors e.t.c )&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h6&gt;
  
  
  NOW LETS WORK WITH AN EXAMPLE
&lt;/h6&gt;

&lt;blockquote&gt;
&lt;p&gt;In this example we are going to store some list of colors in our :root element&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  :root {
     --color:red;
    --color2:yellow;
   }

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

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Now you can see the example above , inside the :root {} we stored our colors there , and there are 2 dashes(-) in frotn of the color names , those dashes are used to tell the :root {} that , this is a variable , hold it do nothing with it , till it is being called back ,&lt;br&gt;
  and lets share more light on what variables are in programming : Variables are containers used to hold different kinds of value.&lt;br&gt;
so now the -- tells the browser that anything that comes before it is a variable name &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h6&gt;
  
  
  THINGS TO NOTE
&lt;/h6&gt;

&lt;blockquote&gt;
&lt;p&gt;the things you should note are there are 2 dashes (--) that comes before the variable name , and after the values that the variable holds there is a semi colon at the end as usual &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h5&gt;
  
  
  CALLING THE VARIABLES BACK TO ACTION
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;Calling the variables to action , means calling the variables back to render the values it holds .&lt;br&gt;
  check the image below&lt;/p&gt;
&lt;/blockquote&gt;

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

&lt;blockquote&gt;
&lt;p&gt;in the image above you can see something like this in the first line &lt;br&gt;
var(--color)&lt;br&gt;
   NOTE: you can see the 2 dashes , but this time it is wrapped in a bracket () &lt;br&gt;
this tells your browser that render the value of --color to the property of color.&lt;br&gt;
and when your browser compile it , you will see color:rgba(25,169,236); which is the color code for sky blue &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h6&gt;
  
  
  CALLING THE VARIABLE TO ACTION WITH AN EXAMPLE
&lt;/h6&gt;

&lt;blockquote&gt;
&lt;p&gt;Let site an example on how the variable is being called to action , like you see above&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   /* lets style a div */

  div {
            color:var(--color)
  }

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

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;now in the code you can see var() with the variable name inside ,&lt;br&gt;
the "var" keyword stands for variable , and it can only receive a single parameter which is a variable name&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    property:var(variable name )
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;that is how the var works &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;###### NOW LETS WRITE A FULLCODE BASE ON WHAT WE LEARNT &lt;/p&gt;

&lt;h6&gt;
  
  
  HTML ELEMENT
&lt;/h6&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;div class="hashnode"&amp;gt; This is a tutorial on css variable &amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  CSS STYLINGS
&lt;/h6&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  /* Lets declear 2 varibales in our root */
   :root {
       --learn:blue;
       --test:30px;
   }

 /*now lets style our div and call the variables back to action */
.hashnode {
     color:var(--learn);
     font-size:var(--test);
}

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

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;now when your browser compile this code , you see the CSS like this ,&lt;br&gt;
     .hashnode{&lt;br&gt;
            color:blue;&lt;br&gt;
           font-size:30px;&lt;br&gt;
     }&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  SUMMARY
&lt;/h4&gt;

&lt;p&gt;###### CSS variables are used to hold different styles values , &lt;br&gt;
  ###### its write once and do many &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;the Joy of using CSS varibale is that you can write once and do many &lt;br&gt;
once you edit one value it changes the rest properties associated to that variable &lt;/p&gt;
&lt;/blockquote&gt;

</description>
    </item>
    <item>
      <title>Deploying CRA to Vercel</title>
      <dc:creator>obiabo Immanuel</dc:creator>
      <pubDate>Tue, 09 Feb 2021 12:49:10 +0000</pubDate>
      <link>https://dev.to/0514b0/deploying-cra-to-vercel-fae</link>
      <guid>https://dev.to/0514b0/deploying-cra-to-vercel-fae</guid>
      <description>&lt;h5&gt;
  
  
  Have you ever faced the issue of deploying CRA ( Create react app ) to vercel ?
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;yeap i do , i faced this issue for 3 days &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  How  frustrating it is to deploy your app and the next thing you see is deployment error
&lt;/h4&gt;

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

&lt;blockquote&gt;
&lt;p&gt;its too painful and frustrating seeing deployment error , when you really need push your app to production &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  HOW VERCEL TREATS CRA
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;Vercel sees all CRA warnings and treats them as error , because  process.env.CI = true &lt;/p&gt;
&lt;h5&gt;
  
  
  take a look at this frustrating photo below
&lt;/h5&gt;
&lt;/blockquote&gt;

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

&lt;blockquote&gt;
&lt;p&gt;i get pissed of and very angry and feel like braking my laptop screen , and i know you felt the same way too , no one likes errors &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h5&gt;
  
  
  Don't panic , this is the end of it
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqe77mf33o6p6cju9v2xv.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqe77mf33o6p6cju9v2xv.jpeg" alt="103238786-idea-face-with-a-lightbulb-business-start-up-flat-design-vector-illustration-.jpg" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;be happy cause today you will put a stop to that &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  STEPS :
&lt;/h4&gt;

&lt;h5&gt;
  
  
  go to vercel
&lt;/h5&gt;

&lt;h5&gt;
  
  
  now import your CRA app from your github repo you wanna connect
&lt;/h5&gt;

&lt;h5&gt;
  
  
  now you will be taking to the deployment page
&lt;/h5&gt;

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

&lt;h5&gt;
  
  
  now click on SELECT to select the account you want
&lt;/h5&gt;

&lt;h5&gt;
  
  
  you will be taking to the main deployemt screen
&lt;/h5&gt;

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

&lt;h5&gt;
  
  
  now if we click on deploy it will give us some errors and result in deployment failed , cause my code has many warnings from CRA
&lt;/h5&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;LETS PASS THE WARNINGS AND ERRORS AND DEPLOY OUR APP&lt;/code&gt;
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;now lets deploy our app even with lots of errors from CRA&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;NOW TO DO THAT&lt;/code&gt;
&lt;/h4&gt;

&lt;h5&gt;
  
  
  now when you are in the main deployment screen
&lt;/h5&gt;

&lt;h5&gt;
  
  
  click on the &lt;code&gt;build and Output Settings&lt;/code&gt; to open expand the other options
&lt;/h5&gt;

&lt;h5&gt;
  
  
  now in the build command input box where you see &lt;code&gt;npm run build&lt;/code&gt; or &lt;code&gt;react-scripts build&lt;/code&gt;
&lt;/h5&gt;

&lt;h5&gt;
  
  
  *now click the override button to toggle it on
&lt;/h5&gt;

&lt;h5&gt;
  
  
  *now you will be given the access to write in the field
&lt;/h5&gt;

&lt;h5&gt;
  
  
  *now inside the text field write &lt;code&gt;CI= npm run build&lt;/code&gt;
&lt;/h5&gt;

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

&lt;h5&gt;
  
  
  *now click on deploy , to start the deploy process
&lt;/h5&gt;

&lt;h5&gt;
  
  
  * now wait for the deployment process to finish
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff3v70vgqy67bmin5ncyl.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff3v70vgqy67bmin5ncyl.jpeg" alt="sup.jpeg" width="205" height="246"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Boom our site is ready &lt;/p&gt;
&lt;/blockquote&gt;

</description>
    </item>
  </channel>
</rss>
