<?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: Juan Barajas</title>
    <description>The latest articles on DEV Community by Juan Barajas (@juanthe3rd).</description>
    <link>https://dev.to/juanthe3rd</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%2F1095019%2Fc76d0769-d2dd-42d5-bb11-8500cc2e6ad2.JPG</url>
      <title>DEV Community: Juan Barajas</title>
      <link>https://dev.to/juanthe3rd</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/juanthe3rd"/>
    <language>en</language>
    <item>
      <title>How to Stop Procrastinating</title>
      <dc:creator>Juan Barajas</dc:creator>
      <pubDate>Tue, 29 Aug 2023 20:01:50 +0000</pubDate>
      <link>https://dev.to/juanthe3rd/how-to-stop-procrastinating-3i49</link>
      <guid>https://dev.to/juanthe3rd/how-to-stop-procrastinating-3i49</guid>
      <description>&lt;p&gt;Like all things in life, the greatest products require a longer process. When it comes to programming, this is especially true. As I reach the end of my journey at the Flatiron School, one thing is certain. I NEED to stop procrastinating. &lt;/p&gt;

&lt;p&gt;In today's day and age, it is so easy to get distracted doing other things whether those things are productive or not. It's become a recurring theme where I am provided a task within a given time frame, and I initially tell myself,&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This isn't that bad, I still have plenty of time so I can relax a little and focus on other things before I dive in.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Boy am I always wrong. Luckily, I always seem to pull it off at the end which is the very reason why I keep doing it. Even though I am completely stressed out by the end of the time frame, I still usually manage to pull it off. I'm sure this is a problem that a lot of people like myself tend to struggle with. So how exactly can we stop doing this?&lt;/p&gt;




&lt;h2&gt;
  
  
  Adjust Your Environment
&lt;/h2&gt;

&lt;p&gt;A good method to start with is by adjusting your environment. If you are already working in an office, chances are that you don't really struggle with this. However, if you are working from home, like myself, the environment alone is enough to distract you. As of right now, I don't even have a desk, so I'm always either sitting on the edge of my bed, or my couch just working on my laptop. If this is also you, you can definitely try investing in a desk and office chair just to have a reliable working environment. &lt;/p&gt;

&lt;p&gt;If getting a desk and office chair is out of the question, you can also try just working at the library or a Starbucks. Anywhere that'll put you into an environment where you can tell yourself, &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Okay, now it is time to get to work.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Set Daily Goals
&lt;/h2&gt;

&lt;p&gt;Another method you can implement is by setting end-of-day goals that are reachable. When it comes to programming, this is especially easy to implement. When you are building your own full-stack application, it is easy to find a certain aspect that you want to complete by the end of the day whether it be completing the functionality of a page, or setting up a server. &lt;/p&gt;

&lt;p&gt;This is a good method to implement because once you set these goals, as you approach the end of your day, you feel like you "have" to reach your goals. You can even plan ahead and set daily goals for the whole week at the beginning of the week to map out what you'll be working on each day.&lt;/p&gt;

&lt;h2&gt;
  
  
  Take Breaks
&lt;/h2&gt;

&lt;p&gt;When it comes to working on a big project like a full-stack application, it is so easy to be overwhelmed by the amount of work you have to complete. This is why it is important to take consistent breaks throughout your work shift. I've suffered through this personally where I work for multiple hours at a time and by the end of it, my eyes, brain, and temples are throbbing. I get to a point where I feel like I physically cannot keep working. This is discouraging and overall reduces productivity. &lt;/p&gt;

&lt;p&gt;Taking breaks throughout your work shift will have you feeling refreshed after every break you take. A common practice amongst programmers is working for 30min, then taking a break for 5min. This keeps you from wanting to collapse at the end of the day.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hold Yourself Accountable
&lt;/h2&gt;

&lt;p&gt;Finally, and maybe the most crucial method to stop procrastinating is to hold yourself accountable. Personally, a lot of the times even though I am falling behind, I tell myself,&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It's fine, I'll be able to catch up.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Even if it's true, I end up burning myself out and hating life by the end of it. This is why it is important to tell yourself, &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This is not okay, I need to get to working.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;At the end of the day, you are the only person that can keep yourself on track. This is why it is important to hold yourself accountable and stay focused.&lt;/p&gt;




&lt;h2&gt;
  
  
  Stop Procrastinating
&lt;/h2&gt;

&lt;p&gt;Procrastination is probably one of the most dangerous work habits. Not only does it provide unnecessary stress, but a lot of the time, it produces products that are not at all to the best of your ability. To review, a couple methods we can implement to stop procrastinating include: adjusting your environment, setting daily goals, taking breaks, and holding yourself accountable. Using these 4 methods, you can stop. I believe in you! &lt;/p&gt;

</description>
      <category>motivation</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Coding Bootcamp vs. College, Which is Better?</title>
      <dc:creator>Juan Barajas</dc:creator>
      <pubDate>Mon, 07 Aug 2023 23:39:36 +0000</pubDate>
      <link>https://dev.to/juanthe3rd/coding-bootcamp-vs-college-which-is-better-2oi</link>
      <guid>https://dev.to/juanthe3rd/coding-bootcamp-vs-college-which-is-better-2oi</guid>
      <description>&lt;p&gt;Pursuing a career in Software Engineering is not an easy task. It may seem especially hard to decide on the path you want to take. Nowadays, it seems that there are 3 options. You can either:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Go to a College/University&lt;/li&gt;
&lt;li&gt;Take a Coding Bootcamp&lt;/li&gt;
&lt;li&gt;Teach yourself&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It is apparent that even though the 3rd option is possible with so many tools accessible via the internet, it is the hardest. When it comes to the two other options, there are a fair amount of advantages/disadvantages to either or. As a college student in computer science that transitioned into a coding bootcamp at the Flatiron School, I am going to give my genuine opinion as to what I think is better depending on what you are looking for. &lt;/p&gt;




&lt;h2&gt;
  
  
  Advantages to College
&lt;/h2&gt;

&lt;p&gt;It might already be clear as to what the biggest advantage of going to college is, but if it isn't, it's the fact that you come out with a Bachelor's Degree. When it comes to deciding between hiring someone that graduated from a 4 year University and someone that completed a coding bootcamp, the person that didn't go to college is going to need a lot more experience/projects to show their expertise. &lt;/p&gt;

&lt;p&gt;In addition to your degree, you have the opportunity of networking and connecting with so many intelligent and like minded individuals. This environment can lead to potential business inquiries in the future. You can argue that there are certain technologies at certain schools that students have access to that the general public do not. However, I don't believe that there is much technology that provides an advantage when it comes to this field. Ideally, if you have good working laptop with decent specs, you are going to be just fine. &lt;/p&gt;

&lt;h2&gt;
  
  
  Advantages to Coding Bootcamp
&lt;/h2&gt;

&lt;p&gt;When it comes to choosing this path, the biggest advantage is the time frame which can get certified. Here at the Flatiron School, you can complete your cohort in as soon as 4 months. They are also flexible for people that may have other commitments and have a part-time 8 month program as well. This is the main reason why I ended up switching from college to this bootcamp. I felt that I was taking too long taking classes when I can just go to this school for essentially 1 semester's worth of time and be done with it. &lt;/p&gt;

&lt;p&gt;In addition, it might just be this specific bootcamp I chose to go to, but the teacher to student ratio is magnificent. There are a total of 8 students in my class and 1 instructor. We are more than welcome to ask any questions we may have for 8 hours out of the day. When I was going to college, the classes were filled with sometimes up to 300 students. Even in Lab/Discussion classes, the classes were still filled to about 30-40 students per instructor. This means that at a bootcamp, you will have a lot more time and attention available to you from instructors than you would have at college.&lt;/p&gt;




&lt;h2&gt;
  
  
  Disadvantages to College
&lt;/h2&gt;

&lt;p&gt;When it comes to the requirements to graduate, there are a lot of classes that you will have to take that have nothing to do with computer science in any way. When I say a lot, I mean about a third of the classes you take, will have nothing to do with programming. This varies from school to school, but if you decide to go to a community to transfer to a 4 year, you are going to end up with about half of your classes having nothing to do with computer science. &lt;/p&gt;

&lt;p&gt;In addition to taking useless classes, sometimes the programming classes are not the most informative. For example, when I first took my Intro to Programming course, we started off learning html, css, javascript, and python to make simple web applications such as hangman. I remember a scenario of when I did not understand what was being instructed. I'm not exactly sure how the code looked, but it looked like something along the lines of&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;test = document.querySelector(`${name}`)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Instead of breaking down each individual piece of code, and what every single piece meant, the instructor just said,&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This is how you get a hold of this specific data&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For the remaining of the semester, I was able to successfully stay afloat with being able to program, yet I did not understand what I was writing. I understood what I was supposed to type, but I never understood why. This was a reoccurring theme all throughout the next couple years.&lt;/p&gt;

&lt;p&gt;Programming in college is taught in the sense that if you need to accomplish one specific task, this is how you do it. Whereas at this bootcamp, every single line of code is broken down to make sure the students understand the concept as oppose to just the final product.&lt;/p&gt;

&lt;h2&gt;
  
  
  Disadvantages to Coding Bootcamp
&lt;/h2&gt;

&lt;p&gt;The only disadvantage I can think of is that it seems like it might be harder to get a job as a student that's certified as oppose to a student that has a degree. However, the Flatiron School does set you up very nicely. Before graduating, we are set up with instructions on how to create a resume, how to network, how to potentially get hired through networking, how to prepare for interviews, how to essentially get a job. &lt;/p&gt;




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

&lt;p&gt;Overall, I personally believe that going through with a coding bootcamp is a lot more valuable in terms of money and time than going to college. Not only do you not have to waste your time, but everything you learn is useful to your career. Everything you learn throughout the cohort will be used when you start to work. If you are thinking about choosing between college or bootcamps, I would recommend choosing a bootcamp. It is a little more challenging than going to school, but the payoff is Huge.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Beginner's Guide to Using Sql to Create Databases</title>
      <dc:creator>Juan Barajas</dc:creator>
      <pubDate>Tue, 18 Jul 2023 20:42:54 +0000</pubDate>
      <link>https://dev.to/juanthe3rd/beginners-guide-to-using-sql-to-create-databases-4o4</link>
      <guid>https://dev.to/juanthe3rd/beginners-guide-to-using-sql-to-create-databases-4o4</guid>
      <description>&lt;p&gt;When it comes to developing applications, there is no doubt that being able to store data is a necessity. Whether you're trying to implement a log-in system, or you want to create personalized music playlists, or you want to create a program that takes care of all your haircut appointments. Whatever the case maybe, this data has to be stored somewhere. This is where databases come in handy. These databases allow you to store data in a way where if the program is to be stopped, and restarted, you can pick up exactly where you left off. If you decide to create a log-in system, the username in password has to be stored somewhere. Today I will be giving a step by step guide for how to create a simple database using SQL. &lt;/p&gt;




&lt;h2&gt;
  
  
  Setting Up Environment
&lt;/h2&gt;

&lt;p&gt;Before we can get into any actual programming, we must make sure that you have installed the required packages to actually use SQL. If you are using Mac, there is a chance that you might have it installed. Nonetheless, you can check by navigating to your VS Code terminal and entering:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;p&gt;If you see something like this, then that means that it is already installed. If not, you can continue on to install.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/usr/bin/sqlite3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you are using windows, skip to the "Installing on Windows WSL" section to install sqlite.&lt;/p&gt;

&lt;h3&gt;
  
  
  Installing on Mac OSX
&lt;/h3&gt;

&lt;p&gt;Assuming you already have homebrew installed on your environment, you can type this into the command line to install sqlite3.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brew install sqlite
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Installing on Windows WSL
&lt;/h3&gt;

&lt;p&gt;Once you have navigated to your VS Code terminal, you are going to type 3 different commands in order. Give it a little time in between each command as you don't want to interrupt the installation process.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt update
sudo apt install sqlite3
sqlite3 --version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that your environment is now completely set up, you can start coding. &lt;/p&gt;




&lt;h2&gt;
  
  
  Using SQLite3
&lt;/h2&gt;

&lt;p&gt;Once your environment is set up, you can navigate to your terminal once again and type this command to enter the SQL interpreter.&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;p&gt;Once you're in, you will see 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;SQLite version 3.38.2 2022-03-26 13:51:10
Enter ".help" for usage hints.
Connected to a transient in-memory database.
Use ".open FILENAME" to reopen on a persistent database.
sqlite&amp;gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you see this, everything is up and running which means you are good to go. &lt;/p&gt;




&lt;h2&gt;
  
  
  Creating a Table
&lt;/h2&gt;

&lt;p&gt;Now that we are in the correct environment, we can start creating tables. Say that we want to open up a small car dealership and we want to store all of our cars in this SQL table. The first thing we would need to do is create our table. We can do this using this code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CREATE TABLE cars (
    id INTEGER PRIMARY KEY,
    make TEXT,
    model TEXT,
    year INTEGER,
    price INTEGER
);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What this code is saying is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Create a table called "cars" with 4 columns, one with an id that is an integer, another with the make which is a text value, another with the model which is also a text value, another with the year as an integer, and the price which is also an integer. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Based on the structure, we can see that each column is defined by the name of the column, then the data type for which this column will accept. &lt;/p&gt;

&lt;p&gt;We can also see that with the id, we included "PRIMARY KEY" which means that an id will automatically be assigned when a new car is input into the table. This will make it so that the first car will have an id of "1", and the next car will have an id of "2" and so on and so forth. This number will just keep incrementing for however many cars are input.&lt;/p&gt;




&lt;h2&gt;
  
  
  Inserting Values into the Table
&lt;/h2&gt;

&lt;p&gt;Once we have our table ready, we can start inserting values into it. Say for example, our finds us a 2015 Toyota Camry at a junkyard. If we wanted to input this new car into our database, we would type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;INSERT INTO cars 
    (make, model, year, price)
VALUES 
    ('Toyota', 'Camry', 2015, 10000);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What this code is saying is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Insert this new car into the table 'cars'. We are going to set the make value to 'Toyota', the model value to 'Camry', the year to 2015, and the price will be set at $10,000.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Notice how we did not include the id column, because remember that the id is automatically assigned. Since this is the first car we are adding, this will automatically be assigned an id value of 1. Go ahead and try to add a 2023 Nissan GTR priced at $150,000. (Keep in mind, integer values must not contain commas or dollar symbols)&lt;/p&gt;




&lt;h2&gt;
  
  
  Checking Your Tables
&lt;/h2&gt;

&lt;p&gt;If we want to see our tables, we can type this into the terminal to see which tables have been created.&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;p&gt;Furthermore, if we want to see our newly created 'cars' table, we can use this code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM cars;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What this code is saying is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Show me every column from the table 'cars'.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If we simply wanted to see a table of only the makes of the car, we could type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT make FROM cars;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This works for every column.&lt;/p&gt;




&lt;p&gt;In addition, the table itself might seem a little ugly, so let's go ahead and fix that. Type this code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.headers on
.mode columns
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now when you display your table, it'll be easier to read.&lt;/p&gt;




&lt;h2&gt;
  
  
  Congratulations!
&lt;/h2&gt;

&lt;p&gt;Congratulations on using SQL to create your very first table! You now have the fundamentals of coding in SQL to create databases. As you can imagine, we can use this for real world applications at a large scale. This was a very basic example, but I hope that you may feel a little more comfortable starting to learn SQL. Challenge yourself to create something BIG. Happy Coding!&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>sql</category>
      <category>tutorial</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Journey at Flatiron School</title>
      <dc:creator>Juan Barajas</dc:creator>
      <pubDate>Mon, 26 Jun 2023 18:18:20 +0000</pubDate>
      <link>https://dev.to/juanthe3rd/journey-at-flatiron-school-157i</link>
      <guid>https://dev.to/juanthe3rd/journey-at-flatiron-school-157i</guid>
      <description>&lt;p&gt;My journey here at Flatiron School has been a little &lt;em&gt;stressful&lt;/em&gt; to say the least. I didn't think that I'd be learning this much at this fast a pace. However, as we reach the midpoint of our journey, I am already starting to feel like a real programmer.&lt;/p&gt;

&lt;h2&gt;
  
  
  First Month's Material
&lt;/h2&gt;

&lt;p&gt;Last month's material was fairly straightforward to me as it mostly revolved around Javascript and I fortunately already had some experience with the language. Before coming to Flatiron, I was a college student majoring in Computer Science. Due to this, I had already taken a couple of programming classes. These classes primarily revolved around languages such as html, javascript, python, c++, and a touch of css. Since I had a little bit of experience prior to starting this cohort, I assumed that I would be able to coast through. I would think to myself, &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I have always been good at school, maybe not getting straight A's, but the work always just came easy to me. I also already &lt;em&gt;kinda&lt;/em&gt; know how to program so this should be a piece of cake.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Boy was I wrong.&lt;/p&gt;

&lt;h2&gt;
  
  
  2nd Month's Material
&lt;/h2&gt;

&lt;p&gt;This last month, we primarily focused on using React JS to create Apps. This is something that was completely new to me. I have never worked with any kind of framework, let alone even understand what a framework was. I knew that this was going to be a challenge, but it was something I was still looking forward to. In addition, we were also instructed to get some work done over the weekend prior to the start of the month, which I did not do. The first week of a new month focuses on just learning new information everyday. As you may assume, I was behind that entire first week and was starting to feel a little overwhelmed. As the weekend approached, I managed to have less and less work to catch up on, yet I was still not done.&lt;/p&gt;

&lt;p&gt;My unfinished work followed me into the next week. Then it hit me, we have a test coming up and I am not at all prepared. The day of the test came, and I was fairly confident in myself yet there was still one module that I had yet to complete. I was confident in creating controlled components, using state, essentially everything the test would be based on. The last module consisted of using the useEffect hook as well as using fetch requests. The day of the test came and I had learned the useEffect hook, but I had yet to touch the data fetch material. Luckily, we had an hour to prepare before it was time to take our test. I used this time to learn data fetching within the module. Fortunately, we had learned data fetching in javascript the previous month, and as I open up the material, it is extremely similar to what we had learned. Due to this, I was able to get everything done in time to be prepared for my test. The test came, and I was fortunate enough to pass through the prompts. This day was probably the most stressed I've been during this cohort so far.&lt;/p&gt;

&lt;h2&gt;
  
  
  Thoughts on Flatiron
&lt;/h2&gt;

&lt;p&gt;Even though it hasn't been completely easy, I still love the fact that I am apart of the Flatiron community. Ever since my junior year of high school when I took my first computer science class, I knew that this was the field for me and that one day I would become a Programmer. I assumed that the only way to go about this would be through getting a Bachelor's degree in Computer Science, yet here I am today as a college dropout still pursuing my dream. I know it seems like a bit of a risk, but I think in the end, it will all be worth it. I am determined to become a software engineer and I feel like this school has given me the opportunity to do just that. &lt;/p&gt;

&lt;p&gt;In addition, the way things are taught at Flatiron, in my opinion, are a lot better than the way things are taught at college. In comparison to college programming courses, I have learned a lot more at Flatiron School in these 2 months than I did in 2 years at college. Throughout college, the way we were taught to program was very linear. We were taught, this is how you do this, now go ahead and try to do it yourself. However, here at Flatiron, we are taught, this is how you do this, now use what you have learned to create something new. At college, you are taught how to do one thing, then once that thing is learned, you move onto the next. However, at Flatiron, you are taught the tools and how to use those tools in various cases. There is a lot more flexibility in what you can achieve. Rather than focusing on the output, Flatiron focuses on teaching the building blocks. &lt;/p&gt;

</description>
      <category>softwareengineering</category>
      <category>career</category>
      <category>codenewbie</category>
      <category>learning</category>
    </item>
    <item>
      <title>Manipulating the DOM</title>
      <dc:creator>Juan Barajas</dc:creator>
      <pubDate>Mon, 05 Jun 2023 23:03:30 +0000</pubDate>
      <link>https://dev.to/juanthe3rd/intro-to-coding-in-js-1ejk</link>
      <guid>https://dev.to/juanthe3rd/intro-to-coding-in-js-1ejk</guid>
      <description>&lt;p&gt;When it comes to programming, it is very easy to be intimidated. After all, starting anything with no prior knowledge is quite intimidating. Not to worry, after this post, you will have some knowledge on what it takes to become a programmer. &lt;/p&gt;

&lt;h2&gt;
  
  
  What are we doing?
&lt;/h2&gt;

&lt;p&gt;Before we get into any actual coding, it is important to know what we will be doing. What we're going to be doing today is manipulating the Document Object Model (DOM) of a wikipedia website. What exactly is the DOM? The DOM is the data being presented on your screen. This very second, the DOM of this website is displaying my blog post which is what you're reading. When I say we are going to be "manipulating the DOM," what I mean is we are going to be changing the data being represented on the website. &lt;/p&gt;

&lt;h2&gt;
  
  
  Opening Developer Tools
&lt;/h2&gt;

&lt;p&gt;Now that we have an understanding of what we are going to be doing, go ahead and open a wikipedia website in google chrome of your favorite historical figure. Once the site is loaded, right click anywhere on the page, and click on the "Inspect" button. Once clicked, you should have access to the Developer Tools on the right-hand side of the screen. As you hover over the different lines of code, you can see different parts of the page being highlighted. As you may assume, the line of code you hover over correlates to the highlighted part of the page. Go ahead and find the line of code that highlights the main content of the page. It will look something like this:&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--B70lHpBf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j1jx0o1yizz509xur5z.png" alt="Example" width="800" height="456"&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Finding Header Element
&lt;/h2&gt;

&lt;p&gt;Once you found the line of code, press the triangle on the left side of that line. This will collapse the code to expose the underlying code. One more line of code will appear, go ahead and collapse the underlying code in that line as well. Keep repeating the process of finding the line of code that highlights the title until there are no more collapsible code lines. In the example I have provided, I will keep doing this until I see that "Abraham Lincoln" is highlighted. The line of code for my Abraham Lincoln page looks 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;&amp;lt;span class="mw-page-title-main"&amp;gt;Abraham Lincoln&amp;lt;/span&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your line of code should look very similar to this other than the class name, and text content being different. Now that we know what line of code is responsible for creating our title, we can get to the manipulation aspect of this process.&lt;/p&gt;

&lt;h2&gt;
  
  
  Manipulating the DOM
&lt;/h2&gt;

&lt;p&gt;Now that we have the element we want to manipulate, we can go ahead and go into the console. At the top of the of the developer tools, there should be an option that says "Console". Once clicked, we can start using javascript to change the header of this page. In the console, for the website I'm using, we are going to type this line of code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const header = document.getElementsByClassName('mw-page-title-main')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What this line is saying is we are going to be looking in the document, for elements with the Class "mw-page-title-main" and storing it into a variable called "header". In your website, the class name is going to be different than mine. Whatever the class name is in your span code line, go ahead and type that in here. &lt;/p&gt;

&lt;p&gt;There are various ways to retrieve this element which I will cover briefly later on. For now, this is the easiest way to do this task. Notice how the line states "getElements". This indicates that there will be more than one element being selected. The variable "header" will be stored with every element in the document that has this specific class name. Moving forward, we will write this code in the console:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;header[0].textContent = "I'm a Programmer!"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now remember, the header variable is stored with every element in the document with the class name "mw-page-title-main". We only want the first element in this list, which is why we put the 0 in the brackets. Then we are changing its text content with "I'm a Programmer!". After running this code, you should see "I'm a Programmer!" as the title of the page. You can go ahead and try changing its text content with whatever you like.&lt;/p&gt;

&lt;h2&gt;
  
  
  Congratulations!
&lt;/h2&gt;

&lt;p&gt;Congrats, you are now a programmer. You have officially manipulated the DOM using javascript. As mentioned earlier, there are various ways to retrieve elements from the DOM. Javascript provides us with 6 different methods to retrieve elements from the DOM. These methods include: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;getElementsByClassName (the one we used)&lt;/li&gt;
&lt;li&gt;getElementsByName&lt;/li&gt;
&lt;li&gt;getElementsByTagName&lt;/li&gt;
&lt;li&gt;getElementById&lt;/li&gt;
&lt;li&gt;querySelector&lt;/li&gt;
&lt;li&gt;querySelectorAll&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using these 6 different methods, we can retrieve any specific, or range of elements we want from the DOM. I will go ahead and save that for a different blog post. Feel free to do any research to try and use these different methods yourself. However, now that you  know the general gist of: how to grab a certain element from the DOM, store it into a variable, and change its content, go ahead and try to change any little thing you want on any website. Congratulations, you know have a taste of what it takes to become a programmer. Have fun out there changing every website you come across!&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>codenewbie</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
