<?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: Michael Fazekas</title>
    <description>The latest articles on DEV Community by Michael Fazekas (@mikefazekas).</description>
    <link>https://dev.to/mikefazekas</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%2F407310%2Ff77f947c-30ac-4fbc-b101-3c37e921664c.jpeg</url>
      <title>DEV Community: Michael Fazekas</title>
      <link>https://dev.to/mikefazekas</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mikefazekas"/>
    <language>en</language>
    <item>
      <title>let vs var keyword</title>
      <dc:creator>Michael Fazekas</dc:creator>
      <pubDate>Tue, 22 Nov 2022 08:22:15 +0000</pubDate>
      <link>https://dev.to/mikefazekas/let-vs-var-keyword-3mf3</link>
      <guid>https://dev.to/mikefazekas/let-vs-var-keyword-3mf3</guid>
      <description>&lt;p&gt;If you're new to learning JavaScript and have taken courses on youtube or anything other platform and don't really understand the difference between let and var or wondering why var isn't a standard in JavaScript anymore.&lt;br&gt;
SAY NO MORE!&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%2F9l8ji3wd8lt0nawacpsw.gif" 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%2F9l8ji3wd8lt0nawacpsw.gif" alt="Image description" width="420" height="375"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Let
&lt;/h2&gt;

&lt;p&gt;first let's start with let. Let was introduced in ECMASCRIPT 6 === ES6 but you could use it a little bit in es5 for limited scope declarations. Wasn't until es6 that let and const were formerly introduced. &lt;/p&gt;
&lt;h2&gt;
  
  
  Stop using VAR!
&lt;/h2&gt;

&lt;p&gt;Let is a great way to prevent bugs in your code. why you ask?&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%2F8wnmueuolzcljyzp4ojh.gif" 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%2F8wnmueuolzcljyzp4ojh.gif" alt="Image description" width="253" height="190"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Because let is only limited to the scope of the block of code.&lt;br&gt;
so lets say you have a function.&lt;br&gt;
&lt;code&gt;&lt;br&gt;
function user(){&lt;br&gt;
let name = 'mike'&lt;br&gt;
}&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
but you have another let name outside of the function.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;br&gt;
let name = 'james';&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
remember all functions can access the global or root scope. so with let you cant reassign it, it can be modified but only inside the block scope.&lt;/p&gt;

&lt;p&gt;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;let = wizardLevel = false
function user(){
     wizardLevel = true;
    console.log('function',wizardLevel) &amp;lt;== returns true
}

user();
console.log(wizardLevel) &amp;lt;=== returns false
// because it happened outside of the function scope.

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Look How var is accessed in if statment
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var wizardLevel = false;
var experience = 100;
if(experience &amp;gt; 90){
     wizardLevel = true;
    console.log('inside',wizardLevel);
}

console.log('outside', wizardLevel);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both wizardLevel variables will return true because of access to the scope. see image for results&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%2Fe8134kwtg61zdt5azm73.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%2Fe8134kwtg61zdt5azm73.png" alt="Image description" width="800" height="213"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
    </item>
    <item>
      <title>Ternary Operator</title>
      <dc:creator>Michael Fazekas</dc:creator>
      <pubDate>Thu, 27 Oct 2022 19:40:09 +0000</pubDate>
      <link>https://dev.to/mikefazekas/ternary-operator-26fd</link>
      <guid>https://dev.to/mikefazekas/ternary-operator-26fd</guid>
      <description>&lt;p&gt;Hey Everyone!&lt;br&gt;
SO as the title suggest this post will be about Ternary Operator in JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why You ask?
&lt;/h2&gt;

&lt;p&gt;Well I find myself on this long journey of learning JavaScript and ES6+, I really want to share my knowledge of the basics and hopefully this can be some what resourceful to not only myself but someone down the road.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Ternary Operator?
&lt;/h2&gt;

&lt;p&gt;Ternary Operator is like a short-hand method of if/else statement.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FOoa1-Y3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhltur83fwprt6ypivdb.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FOoa1-Y3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhltur83fwprt6ypivdb.gif" alt="Image description" width="400" height="250"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What's so Great about it?
&lt;/h2&gt;

&lt;p&gt;instead of having to code out something like this: &lt;br&gt;
&lt;code&gt;Function user(){&lt;br&gt;
  if(something){&lt;br&gt;
//Code that does something&lt;br&gt;
}else{&lt;br&gt;
// code that does something else.&lt;br&gt;
}&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;you can just use a ternary Operator.&lt;br&gt;
Example of a ternary Op.&lt;br&gt;
&lt;code&gt;Condition ? expression 1 : expression 2;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Some Good things NOT to do with Ternary OP.
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TTv85DiM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76773cafhmg6ilhrmnu6.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TTv85DiM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76773cafhmg6ilhrmnu6.gif" alt="Image description" width="200" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Nest the operator makes it harder to read
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//example
condition
?
expression 1 :
expression 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;DON'T DO IT! I will hunt you down! (only kidding jeez)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;using it on complex problems (chances are it wont work anyways but be mindful.)&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Why React can not access images from public</title>
      <dc:creator>Michael Fazekas</dc:creator>
      <pubDate>Wed, 27 Apr 2022 14:13:07 +0000</pubDate>
      <link>https://dev.to/mikefazekas/why-react-can-not-access-images-from-public-2dic</link>
      <guid>https://dev.to/mikefazekas/why-react-can-not-access-images-from-public-2dic</guid>
      <description>&lt;h2&gt;
  
  
  How I got to this question.
&lt;/h2&gt;

&lt;p&gt;So the other night I was working on a small react project. I’ve imported images once before with no issues. But this one was giving me a &lt;code&gt;module error with webpack&lt;/code&gt;. &lt;/p&gt;

&lt;h2&gt;
  
  
  Here’s what I found.
&lt;/h2&gt;

&lt;p&gt;So when you save images or images folders it best to use &lt;code&gt;src/assets&lt;/code&gt; Inside your react project, don’t save them to the &lt;code&gt;public/folder&lt;/code&gt; even though you can tweak that html file webpack does not process it because that folder is technically not part of the final bundle when you build production. The fastest way is to move images to src file where all your ‘component/folder’ files are in.&lt;/p&gt;

&lt;h2&gt;
  
  
  Okay but why?
&lt;/h2&gt;

&lt;p&gt;Images stores in Your &lt;code&gt;src/folder&lt;/code&gt; directory is apart of the final bundle with webpack, so they have a bonus of being able to be imported as a JavaScript module. &lt;/p&gt;

&lt;p&gt;So in addition if it’s something you’re going to be importing to put it In your &lt;code&gt;src/&lt;/code&gt;. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>juniordevs</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to display DOM elements with ForEach()</title>
      <dc:creator>Michael Fazekas</dc:creator>
      <pubDate>Sat, 12 Mar 2022 03:19:24 +0000</pubDate>
      <link>https://dev.to/mikefazekas/how-to-display-dom-elements-with-foreach-45ci</link>
      <guid>https://dev.to/mikefazekas/how-to-display-dom-elements-with-foreach-45ci</guid>
      <description>&lt;p&gt;So I'm digging into ForEach() using JS and decided to make a quick way to display your Array index to the DOM in JavaScript.&lt;br&gt;
*side note I already have a blank UL created in my html like this you'll need this at the end of you forEach method.&lt;br&gt;
`&lt;/p&gt;
&lt;br&gt;
    &lt;h1&gt;ForEach&lt;/h1&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;ul&amp;gt;

&amp;lt;/ul&amp;gt;
&amp;lt;script src="app.js"&amp;gt;&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;`&lt;br&gt;
 first you want to create an Array&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const todos = [
    "clean room",
    "study JS",
    "work out",
    "eat healthy"
];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;create your forEach() method forEach takes in todos like this (I like using arrow functions btw) and pass in your argument todo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;todos.forEach((todo)=&amp;gt;{
// do something here
})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;start creating your elements and classNames inside of the forEach function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;todos.forEach((todo)=&amp;gt;{
    const li = document.createElement("li");
   const liText = document.createElement("span");
   let newDiv = document.createElement("div");`



    li.className = "list";
   liText.className = "items";


 liText.innerHTML = todo;


   li.appendChild(liText);


   newDiv.appendChild(li);


document.querySelector("ul").appendChild(li);

})

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

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>developer</category>
    </item>
    <item>
      <title>Been to long..</title>
      <dc:creator>Michael Fazekas</dc:creator>
      <pubDate>Tue, 22 Feb 2022 05:05:18 +0000</pubDate>
      <link>https://dev.to/mikefazekas/been-to-long-53gd</link>
      <guid>https://dev.to/mikefazekas/been-to-long-53gd</guid>
      <description>&lt;h2&gt;
  
  
  If you're like me...
&lt;/h2&gt;

&lt;p&gt;and you've taken a 9-12 month "Break", it's really tough to start back where you once left off. I know, I know it feels like you have to start over completely. truth if you really don't.&lt;/p&gt;

&lt;h2&gt;
  
  
  Here's why!
&lt;/h2&gt;

&lt;p&gt;You are more capable than you really know. I recently got back into building projects for my portfolio (I need a career change and I love this field) and JS has always kicked my ass. But now that I am back at it I feel like I've gained more from taking that break "the really long break I shouldn't have taking but you know life happens..." So your brain doesn't fully forget the concepts of certain things especially if you worked on a certain one for so long. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UiQRx_a0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h5mkoq0wozn7mohr7hj.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UiQRx_a0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h5mkoq0wozn7mohr7hj.jpg" alt="Image description" width="700" height="483"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Don't waste your time stressing about things you have or might have forgotten, the greatest thing about programming is you don't have to know all the answers. You get to cheat and google your solutions. &lt;/p&gt;

&lt;h2&gt;
  
  
  Some Advice that will help
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Code at least 30 mins a day or every other day.&lt;/li&gt;
&lt;li&gt;Don't think you have to race through your learning.(You don't learn anything that way.)&lt;/li&gt;
&lt;li&gt;Take breaks (Not long ones, I mean NOT month long ones maybe a day or two)&lt;/li&gt;
&lt;li&gt;Schedule a time to sit down build something.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I usually sit down after work, even if I'm not feeling it. I say to myself okay just 30 mins that usually turns into a couple of hours or building or learning something new.&lt;/p&gt;

&lt;h2&gt;
  
  
  Be consistent
&lt;/h2&gt;

&lt;p&gt;I think this is what really messed me up. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7WfISczU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksc35giiqoohz2277hl7.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7WfISczU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksc35giiqoohz2277hl7.jpg" alt="Image description" width="600" height="400"&gt;&lt;/a&gt;&lt;br&gt;
It's true being Consistent is the key.&lt;br&gt;
"Wish I would have realized that in the my early 20s"..&lt;br&gt;
Being good at anything in life is being consistent, Sports figures, actors, lawyers and Programmers all have one thing in common. Being Consistent.&lt;/p&gt;

&lt;h2&gt;
  
  
  Figure out what is best for you
&lt;/h2&gt;

&lt;p&gt;Sit down, take some notes of what has and hasn't worked for you in the past. Guide yourself, You're a Self-Taught Dev for crying out loud. Running to the new shiny toy of frameworks and languages will only dig you deeper into that hole. I know I'm just now coming out of it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Take all of this with grain of salt.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;YOU know you more than I know you. so sit down and think about it. It's hard, it makes you want to cry and some point. Only because deep down you want it so bad... SO Get comfortable being uncomfortable. "Favorite Quote"&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>career</category>
      <category>codenewbie</category>
      <category>discuss</category>
    </item>
  </channel>
</rss>
