<?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: Jason Cruz</title>
    <description>The latest articles on DEV Community by Jason Cruz (@jasoncruzdev).</description>
    <link>https://dev.to/jasoncruzdev</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%2F350829%2Fba974f5d-caf0-49c8-8a37-8c60aff6542d.jpeg</url>
      <title>DEV Community: Jason Cruz</title>
      <link>https://dev.to/jasoncruzdev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jasoncruzdev"/>
    <language>en</language>
    <item>
      <title>Can't Find What Your Looking For? Perform Better Searches!</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Mon, 12 Sep 2022 10:23:18 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/cant-find-what-your-looking-for-perform-better-searches-5004</link>
      <guid>https://dev.to/jasoncruzdev/cant-find-what-your-looking-for-perform-better-searches-5004</guid>
      <description>&lt;h2&gt;
  
  
  Trust me, I was there.
&lt;/h2&gt;

&lt;p&gt;Im currently using PyQt to design my GUI's for Python, and finding better ways to code is super important if your not trying to repeat youself. This week Im trying to investigate on YouTube "How To Load PyQt5 UI File Dynamically". And I found what Im looking for, but its not enough of an example. These YouTube Videos only last 10-15mis, and the Influencer wastes like 5-7mins talking about his or her merch they want to sell etc.&lt;/p&gt;

&lt;p&gt;If your like me, Im trying to solve my issue and move onto the next, one day when I dig myself out of the hole im in, ill buy everybodys merch! But ot today! &lt;/p&gt;

&lt;h2&gt;
  
  
  The Dilema
&lt;/h2&gt;

&lt;p&gt;When you need more coding examples, Google seems to be weak in alot of ways when investigating your issues further. Better ideas? Tonight I discovered I can use the same search pattern as I do with Google on Github! Yup!&lt;/p&gt;

&lt;p&gt;In the search I typed &lt;code&gt;"Pyqt5 findChild"&lt;/code&gt; because inorder to use my PyQt5 UI File I need to use &lt;strong&gt;findChild&lt;/strong&gt; to use the Labels and Textboxes etc. But Im the kind of learner that needs to see something to fully understand how it works. I found tons on github! &lt;/p&gt;

&lt;p&gt;And it wasnt much about how to's, it was actual code that others have written, completed assignments. Yup! Great examples! &lt;/p&gt;

&lt;p&gt;Not much time past after when I realized I need to do more searches this way, so I thought I'd share!&lt;/p&gt;

&lt;h2&gt;
  
  
  Quick read! Like, Share, Comment, Unicorn! lol Thanks!!
&lt;/h2&gt;

</description>
      <category>tutorial</category>
      <category>python</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Using Multiple Python Versions? How-To</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Sun, 11 Sep 2022 20:15:48 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/using-multiple-python-versions-how-to-23dl</link>
      <guid>https://dev.to/jasoncruzdev/using-multiple-python-versions-how-to-23dl</guid>
      <description>&lt;h2&gt;
  
  
  Jumping from Python 3.9 to Python 3.10 to Python 3.6?
&lt;/h2&gt;

&lt;p&gt;If your any programmer you will run into the issues of installing one package off PIPY "thinking - This package will work, because", because someone on YouTube in 2020 used it to make something but its now 2022 and those packages either could be out of date and not maintained, or no one uses those packages anymore, or perhaps a "different" package thats 1000x better than the one you WANT to work is better to install instead.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--K0DusBpt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fsquqp33uepoc0letl2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--K0DusBpt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fsquqp33uepoc0letl2.gif" alt="rage" width="240" height="196"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you feeling the same grief, your not alone. But if your also like me, trying to figure out how to go from Python 3.10 to Python 3.2 and everything inbetween at first can be hard. But today folks, it doesnt have to be that hard anymore!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nsDLQsTf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54rjt77mw8hogs6gbroj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nsDLQsTf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54rjt77mw8hogs6gbroj.gif" alt="funny" width="480" height="307"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ill make it easier for you because I couldnt find anything useful online, can you believe that?! The Nerve!&lt;/p&gt;

&lt;h2&gt;
  
  
  Only Applies To Windows 10 - Maybe Other Windows Too
&lt;/h2&gt;

&lt;p&gt;Those this only applies Windows 10, check your other systems and let me know! Id love to know!&lt;/p&gt;

&lt;p&gt;As far as I know, you can install all Python packages your Windows 10 PC. When working with Python inside VSCode I didnt realize you needed to work inside virtual enviroments. In this case, you literally can switch between enviroments too when you change your main Python Interpreter versions. &lt;/p&gt;

&lt;p&gt;Hit your Windows Key and type &lt;code&gt;CMD&lt;/code&gt;, now lets see what version Python you have. Now type &lt;code&gt;python --version&lt;/code&gt; inside your terminal. It should pull up something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qcbPIRQS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8tx3071kvo0g8gf8enn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qcbPIRQS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8tx3071kvo0g8gf8enn.png" alt="cheers" width="379" height="169"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now inorder to change your main Python Interpreter (meaning, when you pull up VSCode or any other IDE, as soon as you pull it up and want to use it to code, the first Interrupter that will comes up will be the default setting you have in your enviromental variables) lets open the &lt;strong&gt;Enviromental Variables&lt;/strong&gt;; &lt;/p&gt;

&lt;p&gt;Click the &lt;code&gt;Windows Key&lt;/code&gt; and type &lt;code&gt;enviroment&lt;/code&gt; and the first thing that pops up should be defined as the pic below. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yY1AkFMq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p73zk9v5ns4pxcjpakca.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yY1AkFMq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p73zk9v5ns4pxcjpakca.png" alt="no idea" width="408" height="707"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you click on &lt;code&gt;Edit the system enviroment variables&lt;/code&gt; next you will get a screen like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LNk3bqyx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yz8ws37przgij6m38qo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LNk3bqyx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yz8ws37przgij6m38qo.png" alt="maybe" width="436" height="487"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You guessed it! System Properties! Click on &lt;code&gt;Enviroment Variables&lt;/code&gt;, Highlight &lt;code&gt;Path&lt;/code&gt; and click on &lt;code&gt;Edit....&lt;/code&gt;. Next you will be inside the Enviromenal Variables: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ywz4fg-O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bun22srm92xvhgzt40si.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ywz4fg-O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bun22srm92xvhgzt40si.png" alt="example 2" width="636" height="606"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Highlight whatever Python Version you want to use, for sake of argument, Im going from Python 3.9.12 to Python 3.6.0. And move both variables to the top above what is currently your default Python Interpreter with the &lt;code&gt;Scripts&lt;/code&gt; being first on the list. (dont ask me why, idk it just works lmao) &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0o8SLcbl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vd0pxkl886qsj5zkejpb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0o8SLcbl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vd0pxkl886qsj5zkejpb.png" alt="example 3" width="636" height="606"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After you should get something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Fk0MqfZB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts91heec9zd0dblasscl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Fk0MqfZB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts91heec9zd0dblasscl.png" alt="example 4" width="646" height="609"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now save all your work! Hit OK to everything!!&lt;/p&gt;

&lt;p&gt;Now test to see if it saved correctly inside your Windows 10 CMD window you previously opened. You should have something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--R1qo_jvL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rvjs24fgqljhmnis5gu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--R1qo_jvL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rvjs24fgqljhmnis5gu.png" alt="python version 3.6" width="390" height="162"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  ISNT SHOWING? - PLEASE TAKE NOTE
&lt;/h2&gt;

&lt;p&gt;If you do not have this showing up, you probably MOST likely do not have that Python Version Package installed on your computer. What you are seeing is the remnants of the Path that wasnt deleted when you uninstalled your Python Package. So in order for you to make it work &lt;strong&gt;duh&lt;/strong&gt; you need to reinstall that version you wanted to switch too.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why doesn't anybody tell you this!?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  How simple it was. Changing it inside VSCode.
&lt;/h3&gt;

&lt;p&gt;Now inside your VSCode hit &lt;code&gt;CTRL &amp;amp; SHIFT and hit P&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;Select &lt;code&gt;Python: Select Interpreter&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N0bjiv_W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9ukxhoz0edc7sete63p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N0bjiv_W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9ukxhoz0edc7sete63p.png" alt="select" width="639" height="612"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hit &lt;code&gt;refresh&lt;/code&gt; icon at the top right&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qItFDpj3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8meg4y79njwee13l5k8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qItFDpj3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8meg4y79njwee13l5k8.png" alt="refresh" width="648" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Select the Python Version you want you use:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DSfxXDDd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jacn41ifk8eus9m5geot.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DSfxXDDd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jacn41ifk8eus9m5geot.png" alt="new version" width="648" height="322"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After you have selected the new Interpreter you selected, file and open a python file you are working on and look at the very bottom right to see your awesomeness at work! &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Jbs4zkgx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elxxg04mxz3mdoyqx2df.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Jbs4zkgx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elxxg04mxz3mdoyqx2df.png" alt="example" width="396" height="79"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You should see the python version you selected.&lt;/p&gt;




&lt;h3&gt;
  
  
  TaDa!! Congrats For Reading!! Like, Share, Subscribe &amp;amp; Don't forget to Unicorn! lol
&lt;/h3&gt;

</description>
      <category>python</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Write Dynamically with Python &amp; PyQt5</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Sat, 10 Sep 2022 19:38:01 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/write-dynamically-with-python-pyqt5-2lnl</link>
      <guid>https://dev.to/jasoncruzdev/write-dynamically-with-python-pyqt5-2lnl</guid>
      <description>&lt;h1&gt;
  
  
  It can be a lot easier doing it this way
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Quick Tutorial
&lt;/h2&gt;

&lt;p&gt;Assuming you already know how to use the QT Designer program that can be easily installed using pip. Creating a dynamic file shouldnt be that hard to make, for me it was. I searched high and low for 2.5 days until I randomly found an interesting site that had a set by step way to try creating a dynamic python file using your interface.ui file you get when you save your design inside Qt Designer.&lt;/p&gt;




&lt;h2&gt;
  
  
  2 Important Things
&lt;/h2&gt;

&lt;p&gt;When working with Qt Designer, after saving your work, it will be saved inside a UI &amp;amp; QRC file. My old way of doing things was once I converted my interface.ui file to interface.py file, I forgot my icons, because with Qt Designer and python, those are not imported for you. I struggled for days on this issue.  &lt;/p&gt;

&lt;p&gt;Real quick.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You must import your resource file (resources.qrc) also to  a python file. Using this command:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;pyrcc5 resources.qrc -o resources.py&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Once you have created your python file, you wil want to import it into your dynamic file you are creating. As example below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CrYPoP0I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb9x8rrcwmb0nbpwm705.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CrYPoP0I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb9x8rrcwmb0nbpwm705.png" alt="Image description" width="449" height="492"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Main.py
&lt;/h2&gt;

&lt;p&gt;Or whatever you would like to call that file, this file will run your new python file, and from here you can make all the corrections to the mechanics of your program while the UI is the skeleton mode in a different file. This is helpful when you have to make changes to your UI file, this way you wont be overwriting your code that you wrote over and over again. &lt;/p&gt;




&lt;h2&gt;
  
  
  Hope that helps!
&lt;/h2&gt;

</description>
      <category>python</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>gui</category>
    </item>
    <item>
      <title>How to change SVG colors.</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Sat, 13 Aug 2022 23:03:19 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/how-to-change-svg-colors-gop</link>
      <guid>https://dev.to/jasoncruzdev/how-to-change-svg-colors-gop</guid>
      <description>&lt;h2&gt;
  
  
  ℹ️ Disclaimer
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;This will only worrk for svg icons that are solid colors, if you have 2 layers that or have spaces between the image, like a settings.svg icon that has a gear as an icon that has more than 1 gap between the image.. It wont work.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Do me a solid;
&lt;/h2&gt;

&lt;p&gt;*&lt;em&gt;❤️ 🦄, save &amp;amp; comment!  *&lt;/em&gt;&lt;br&gt;
Much ❤️❤️❤️❤️❤️&lt;/p&gt;

&lt;h2&gt;
  
  
  ℹ️ Back Story
&lt;/h2&gt;

&lt;p&gt;I recently found myself struggling with changing SVG colors when trying to do it within PyQt5 Editor. I struggled for 10mins when I realized that there HAS to be a better way. I asked Google, with the "stackoverflow" attached at the end, and It lead me to a thread that looked like 8Mile from movie.&lt;/p&gt;

&lt;p&gt;As per the thread found from 8yrs ago found. I wasn't going to "endulge" myself in reading that massive thread of word-vomit. So to make it super easier for the next programmer/coder looking for faster answers, here it is!&lt;/p&gt;

&lt;p&gt;You can change any SVG color. Now how to get it to hover a different color change inside a python application, is beyond me at this conjuction in life, but I am positive I will find what I am looking for when the time comes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://feathericons.com/" rel="noopener noreferrer"&gt;FeatherIcons&lt;/a&gt; also has some really nice icons, ready to go! What I used, but also &lt;strong&gt;JUST&lt;/strong&gt; found out I could do, is change the color I needed &lt;strong&gt;HERE&lt;/strong&gt; before I download the icons, &lt;strong&gt;PLUS&lt;/strong&gt; I can also adjust the size &amp;amp; stroke width before downloading lol (HUGE FAIL) &lt;/p&gt;

&lt;p&gt;You live and you learn!&lt;/p&gt;

&lt;h2&gt;
  
  
  Other ways
&lt;/h2&gt;

&lt;p&gt;My other way I did it before discoverying what I did in the previous sentence.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;DUPLICATE THE FOLDER OF SVG's YOU WANT TO EDIT (Assuming the color is Black), so another folder you can have can be white or red. I remade a folder for all white logos. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use any code editor, I used VSCode for this. Open the SVG inside your code editor. And it will show something like this.. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h2&gt;
  
  
  Note
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;You will want to make the changes to the attributes, &lt;strong&gt;fill="none"&lt;/strong&gt; &lt;strong&gt;stroke="currentColor"&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Flip the attributes of fill &amp;amp; stroke; You will want it looking like the picture below. after vscode edit&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Before&lt;/strong&gt;&lt;/p&gt;

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

fill="none" stroke="currentColor"


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

&lt;/div&gt;

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

&lt;p&gt;&lt;strong&gt;After&lt;/strong&gt;&lt;/p&gt;

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

fill="currentColor" stroke="white"


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

&lt;/div&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdoi2gbf92982z1ip8mj.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdoi2gbf92982z1ip8mj.jpg" alt="changed svg color, black to white"&gt;&lt;/a&gt;&lt;br&gt;
after edit&lt;/p&gt;

&lt;p&gt;I hope this was super helpful to you as it was to me..&lt;/p&gt;

</description>
      <category>css</category>
      <category>vscode</category>
      <category>python</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Tkinter How-To's</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Sun, 31 Jul 2022 19:03:23 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/tkinter-how-tos-3afo</link>
      <guid>https://dev.to/jasoncruzdev/tkinter-how-tos-3afo</guid>
      <description>&lt;h1&gt;
  
  
  Tkinter Python
&lt;/h1&gt;

&lt;h3&gt;
  
  
  A Python Package
&lt;/h3&gt;




&lt;h1&gt;
  
  
  The Story
&lt;/h1&gt;

&lt;p&gt;If your like me, and just started using Python. You will eventually need to use some kind of User Interface. Now there are some really good User Interfaces out there like PyQt, QtDesigner to name a few. But I stumbled onto Tkinter. &lt;/p&gt;

&lt;p&gt;But there's a clause to this, you must know some python for Tkinter. As it can be very intimidating when you first use it. I searched hi and low for Tkinter Tutorials on YT. But felt YT was lacking in that department. &lt;/p&gt;

&lt;h1&gt;
  
  
  Until..
&lt;/h1&gt;

&lt;p&gt;I came across &lt;a href="https://www.youtube.com/channel/UCHCqnq9zF5prz7gcN3SW7lA"&gt;Tkinter Hub&lt;/a&gt; Randomly and boy, does this person have it together. And he doesn't talk as much, only as needed. Like they talk ONLY when things do not look right or can pose a problem. I absolutely love this channel because they get straight to the point, no fluff, no got my merch 2min spill, no sponsor junk. This channel doesnt even ask for the "Like or Subscribe". It's almost the norm, to like this great content AND subscribe. Because you would be a real fool NOT to subscribe!&lt;/p&gt;

&lt;p&gt;They are doing what they feel is best, and by god I love this simplicity! I feel like everyone working with Tkinter and Python should do the same by looking at his content and subscribing! These tutorials are 100% quality!&lt;/p&gt;

&lt;p&gt;Of course I wasn't paid for this post, I did it out of the kindness of my heart. With over 200 subs, I feel they need more love then what they get. &lt;/p&gt;

&lt;p&gt;Thank you &lt;a href="https://www.youtube.com/channel/UCHCqnq9zF5prz7gcN3SW7lA"&gt;Tkinter Hub&lt;/a&gt;!!&lt;/p&gt;

&lt;p&gt;-J&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>python</category>
      <category>beginners</category>
      <category>tkinter</category>
    </item>
    <item>
      <title>Just as I'm about to give up</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Wed, 25 May 2022 03:07:09 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/just-as-im-about-to-give-up-5bf0</link>
      <guid>https://dev.to/jasoncruzdev/just-as-im-about-to-give-up-5bf0</guid>
      <description>&lt;h2&gt;
  
  
  Just as Im about to give up.
&lt;/h2&gt;

&lt;p&gt;I make a breakthrough! Im so glad I push through it and figured it out. What a relief! &lt;/p&gt;

&lt;p&gt;Thanks for all my haters! lol You helped inspire me to keep going! Your most apprecaitated! &lt;/p&gt;

&lt;p&gt;;)&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>discuss</category>
      <category>programming</category>
    </item>
    <item>
      <title>Why cant I master ReactJS</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Tue, 24 May 2022 17:08:28 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/why-cant-i-master-reactjs-4d0h</link>
      <guid>https://dev.to/jasoncruzdev/why-cant-i-master-reactjs-4d0h</guid>
      <description>&lt;h1&gt;
  
  
  Are you a Jedi React Master?
&lt;/h1&gt;

&lt;p&gt;I can not find a decent tutorial that can go  in depth with the discussion about React JS. And right now with the whole React-Router-Dom V6 update, it makes learning so much worse. &lt;/p&gt;

&lt;p&gt;I know most say get good with Javascript, I hate Javascript frankly. And maybe thats my issue. I strongly dislike front-end work. And messing with CSS for that matter.. If I wanted to be a designer I would have went to school for UI/UX. Why does this shit havbe to be so complicated. Is there anywhere I can just copy and paste some decent CSS code ontop of the functions and states Im trying to get right? &lt;/p&gt;

&lt;p&gt;Now Python!? I fkin love Python. &lt;/p&gt;

&lt;p&gt;I'm so frustrated today. Ive been 24 days in this project I was assigned, with no where but a broken react routes. To top it off, everyone has their 'version' or how they would implement their private routes or protected routes. Ive been messing with this code stuff since 2016. I want to know it already. So I can move on with life and build shit that matters. smdh&lt;/p&gt;

&lt;p&gt;How do you feel about React JS? &lt;/p&gt;

</description>
      <category>programming</category>
      <category>beginners</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>First time writing Python with sub-directories?</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Thu, 21 Apr 2022 02:37:42 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/first-time-writing-python-with-sub-directories-2p22</link>
      <guid>https://dev.to/jasoncruzdev/first-time-writing-python-with-sub-directories-2p22</guid>
      <description>&lt;h2&gt;
  
  
  Are you writing your first Python program, and you have folders within folders, within folders?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Pretty Simple&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I'd like to learn how to run my own Image Recognition software using Python. I started with making a new file, and I named it main.py. Im thinking its going to be easy like what you see on YouTube. Ahhh ya.. not so much. &lt;/p&gt;

&lt;p&gt;Did you know, that when you have a file structure like this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;user/desktop/src/Lib/site-packages&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;and in your code you would like to import a package from &lt;code&gt;site-packages&lt;/code&gt; but your main.py file you just made is in your src folder. Just importing like this isnt enough.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import PySimpleGUI
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because once you run and complie your main.py file, you will most likely get a error that says something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ImportError: cannot import name 'PySimpleGUI' (unknown location)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then it hits you. You are the worse programmer that ever exists. Don't worry, I was there today.. &lt;/p&gt;

&lt;h2&gt;
  
  
  GUESS WHAT!?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;It's just imposter syndrome kicking in, you are not a failure.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Matter of fact, something I discovered that took me 3 hours to find was a tiny little file called:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;__init__.py&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Believe it or not, this file is in every folder that has some kind of python file. Supposely, for everwhere you want your code at, or where your packages are, you need an &lt;code&gt;__init__.py&lt;/code&gt; file. &lt;strong&gt;EVEN&lt;/strong&gt; if the file is blank. &lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;init&lt;/strong&gt;.py file lets the Python interpreter know that a directory contains code for a Python module. An &lt;strong&gt;init&lt;/strong&gt;.py file can be blank. Without one, you cannot import modules from another folder into your project.&lt;/p&gt;

&lt;h2&gt;
  
  
  YOUR WELCOME!!
&lt;/h2&gt;

&lt;p&gt;I know right!? Could it have been that easier with everything else in life.. If only!&lt;/p&gt;




&lt;p&gt;So next time you get stuck in Python and you cant run/compile your code, hopefully you remember did you add an &lt;strong&gt;init&lt;/strong&gt;.py file to your directories yet?&lt;/p&gt;

&lt;p&gt;Hopefully, you do from now on. &lt;/p&gt;

&lt;p&gt;Save this post! It will save your life from the aggervation you will find yourself in.. lol&lt;/p&gt;

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

</description>
      <category>aws</category>
    </item>
    <item>
      <title>Don't Sweat The Small Stuff</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Sat, 26 Mar 2022 18:18:51 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/dont-sweat-the-small-stuff-504c</link>
      <guid>https://dev.to/jasoncruzdev/dont-sweat-the-small-stuff-504c</guid>
      <description>&lt;h2&gt;
  
  
  Great Example
&lt;/h2&gt;




&lt;p&gt;Great example on what not to do.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FxVmZTtm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry5iob0kdja99n3drexh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FxVmZTtm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry5iob0kdja99n3drexh.png" alt="firebase name creation" width="683" height="532"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I found myself stuck on this when creating a firebase auth account. Im sure you get stuck here too.&lt;/p&gt;

&lt;p&gt;This question was asked, what would you like to Project public-facing name to be? Please enter a project name: &lt;/p&gt;

&lt;p&gt;Mind you it also says, that whatever you choose will be shown publicly. Like when you signup to MailChimp and they send you an Authentication Email to verifiy accounts. But what if this project is to act as part of my portfolio. What then? Firebase or your momma cant help you here.&lt;/p&gt;

&lt;p&gt;So I spent 22min staring at this 1 problem like a deer stuck looking at a cars headlights. &lt;/p&gt;

&lt;p&gt;So many questions arised instantly after:&lt;/p&gt;

&lt;p&gt;What if I wanted to change it?&lt;/p&gt;

&lt;p&gt;How hard would it be to switch or rename?&lt;/p&gt;

&lt;p&gt;Is it really this important to have a good name?&lt;/p&gt;

&lt;p&gt;Why is this so hard?! &lt;/p&gt;




&lt;h2&gt;
  
  
  LMAO
&lt;/h2&gt;




&lt;p&gt;It isnt. &lt;/p&gt;

&lt;p&gt;I realized that my end goal is to complete a sustainable MVP, good enough to show the neccessary skillz needed for recuiters and potential clients to see. So does it REALLY matter if its JUST a portfolio product demo?&lt;/p&gt;

&lt;p&gt;Then this happens:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--J14a9c9Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya9386pnh26jakdbi1wt.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--J14a9c9Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya9386pnh26jakdbi1wt.jpg" alt="wrecking ball against a wall" width="841" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thats right! I made a break through. &lt;/p&gt;

&lt;p&gt;Why not call it &lt;code&gt;portfolio-product-demo&lt;/code&gt; or better yet &lt;code&gt;Portfolio Product Demo&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Even better why not K.I.S.S. ( Keep It Super Simple )&lt;/p&gt;

&lt;p&gt;So I decided on JasonCruz.Dev Sign-Up Confirmation&lt;/p&gt;




&lt;h2&gt;
  
  
  I know what your thinking..
&lt;/h2&gt;




&lt;p&gt;Could it have been that easy!? YES! It could have.. But since this is my first real use-case application on Firebase, you can imagine how stuck someone can get when anything new appears.&lt;/p&gt;

&lt;p&gt;FYI: When writing this blog post, I literally didnt have a friggin clue what to name it. But I persisted. As I start blogging this post for the purpose of helping others decide and figure out what not to do and in the mist of it all, discovered what name I will be using. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ssTCYauv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7b4uhiyzw6ye87wvjhl.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ssTCYauv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7b4uhiyzw6ye87wvjhl.jpg" alt="world dominiation" width="620" height="460"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thanks Dev.To for your continue support! One day when I become big and strong, I'll be making a blog app for my own blogs and others! Plus I already have an idea on what it will look like! I can not wait! &lt;/p&gt;

&lt;p&gt;So heres to you newbie developers! Cheers!&lt;/p&gt;




</description>
      <category>webdev</category>
      <category>firebase</category>
      <category>react</category>
      <category>newbie</category>
    </item>
    <item>
      <title>MAKING API CALLS without React Hooks</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Mon, 14 Mar 2022 03:34:25 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/making-api-calls-without-react-hooks-10jc</link>
      <guid>https://dev.to/jasoncruzdev/making-api-calls-without-react-hooks-10jc</guid>
      <description>&lt;h2&gt;
  
  
  MAKING API CALLS
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Without React Hooks&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;Something I wrote for my reference when not using react hooks.&lt;/p&gt;

&lt;p&gt;// Making API calls&lt;br&gt;
&lt;code&gt;const [user, setUser] = useState();&lt;br&gt;
const [error, setError] = useState();&lt;br&gt;
useEffect(() =&amp;gt; {&lt;br&gt;
  fetchUserData(userId)&lt;br&gt;
    .then(res =&amp;gt; setUser(res.data.user))&lt;br&gt;
    .catch(err =&amp;gt; setError(err.response.message));&lt;br&gt;
});&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;// Manipulating the DOM&lt;br&gt;
&lt;code&gt;const [count, setCount] = useState();&lt;br&gt;
useEffect(() =&amp;gt; {&lt;br&gt;
  document.title =&lt;/code&gt;Count is: ${count}&lt;code&gt;;&lt;br&gt;
});&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;useEffect(() =&amp;gt; {&lt;br&gt;
&lt;code&gt;console.log("The component has mounted.");&lt;br&gt;
}, []);&lt;/code&gt;&lt;/p&gt;




</description>
      <category>react</category>
      <category>api</category>
      <category>beginners</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Axios Scripts</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Sat, 05 Mar 2022 02:45:04 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/axios-scripts-1pic</link>
      <guid>https://dev.to/jasoncruzdev/axios-scripts-1pic</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Axios Scripts Made Easy&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When I was attending bootcamp a year or so ago, some of my bootcamp friends and I discovered the way to add a script to an npm package better known as &lt;code&gt;Axios&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Axios&lt;/strong&gt; is a Javascript library used to make HTTP requests from node. js or XMLHttpRequests from the browser and it supports the Promise API that is native to JS ES6. It can be used intercept HTTP requests and responses and enables client-side protection against XSRF. It also has the ability to cancel requests. (Thanks Google)&lt;/p&gt;

&lt;p&gt;If you are like me, I look for better ways to code. And at the time, I was struggling with coding and understanding Axios. When I did however, I made something for me to use from then to the end of time. And last I checked, it was still there for me to use. I used it today! I thought i'd share it with you. Because I want to see you the follow succeed in coding. &lt;/p&gt;

&lt;p&gt;I made 2 scripts for Axios. Inorder to access them, you MUST install the package via &lt;code&gt;npm i axios&lt;/code&gt; first. Once you have, create a seperate axios file and in the area where your about to code, type: &lt;code&gt;axx or aax&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And you will get one of these functions:&lt;br&gt;
&lt;code&gt;aax&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8b_nU3iy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yru1xu769e1na7zt33ks.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8b_nU3iy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yru1xu769e1na7zt33ks.png" alt="axios functional component" width="638" height="698"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope this help you. Follow me for some more tips and tricks! Share the post with ppl you think may need it as well..&lt;/p&gt;




</description>
      <category>axios</category>
      <category>help</category>
      <category>programming</category>
      <category>react</category>
    </item>
    <item>
      <title>VS Code User Interface Browser</title>
      <dc:creator>Jason Cruz</dc:creator>
      <pubDate>Fri, 04 Mar 2022 03:15:37 +0000</pubDate>
      <link>https://dev.to/jasoncruzdev/vs-code-user-interface-browser-nci</link>
      <guid>https://dev.to/jasoncruzdev/vs-code-user-interface-browser-nci</guid>
      <description>&lt;h2&gt;
  
  
  Simple Browser inside VS Code Editor
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;CONTEXT&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Did you know that you can open a simple browser inside the VS Code editor? No, I don't mean the type of browser that you run for live server. But an actual browser inside the VS Code User Interface Editor. I thought I'd bring this up because it took me weeks to look for this method online with no success. &lt;/p&gt;

&lt;p&gt;It could have been, that I wasn't looking up the information correctly, but what happens when you don't know what to call it and by "IT" I mean the issue you are having. Today, it just hits me. Do a search for VS Code Browser. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9PUzdhyw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwfguey8g24k2cnohaph.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9PUzdhyw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwfguey8g24k2cnohaph.gif" alt="Mind bLown" width="640" height="420"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Little did I know to look it up that way. OK! I get it. lol&lt;/p&gt;

&lt;p&gt;Here's a how-to! Its super simple!&lt;/p&gt;

&lt;p&gt;Inside VS Code: &lt;/p&gt;

&lt;p&gt;Command + Shift + P (Mac users) or  Control + Shift + P (Windows Users)&lt;/p&gt;

&lt;p&gt;inside the search type &lt;code&gt;browser&lt;/code&gt;, scroll down and click on where you see something that says &lt;code&gt;Simple Browser&lt;/code&gt;. Click on that!&lt;/p&gt;

&lt;p&gt;Inside Simple Browser type &lt;code&gt;http://localhost:3000/&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iP9g8Jgt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nwkvqg0p3n9bbsy0nec.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iP9g8Jgt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nwkvqg0p3n9bbsy0nec.png" alt="Simple Browser Inside VS Code User Interface" width="880" height="521"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;YOURE WELCOME!!&lt;/p&gt;

&lt;p&gt;Now you can access a browser within VS Code. Why even care about something like this?&lt;/p&gt;

&lt;p&gt;Well dudes - dudettes.. if you have a laptop, and you are like me and are working in web development, I do not like tabing into the chrome broswer to look at my work, this is perfect! Its just something super simple for me to access quickly as I code, to make sure Im correctly coding something. Of course if you need to get more technical, I highly recommend using Mozilla Firefox Browser. It has some of the the best developer tools you can use in your coding journey.&lt;/p&gt;




</description>
      <category>vscode</category>
      <category>hacker</category>
      <category>webdev</category>
      <category>react</category>
    </item>
  </channel>
</rss>
