<?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: Stefi Rosca</title>
    <description>The latest articles on DEV Community by Stefi Rosca (@stefirosca).</description>
    <link>https://dev.to/stefirosca</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%2F698999%2F870db936-fda4-41d4-904f-e4cd43db5551.jpeg</url>
      <title>DEV Community: Stefi Rosca</title>
      <link>https://dev.to/stefirosca</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/stefirosca"/>
    <language>en</language>
    <item>
      <title>🧑‍💻 Essential Reads for New Software Engineers</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Mon, 01 Apr 2024 09:21:00 +0000</pubDate>
      <link>https://dev.to/stefirosca/essential-reads-for-new-software-engineers-1i8j</link>
      <guid>https://dev.to/stefirosca/essential-reads-for-new-software-engineers-1i8j</guid>
      <description>&lt;p&gt;Working as a software engineer is not only about knowing how to code. That is a big part of it, but besides this, many other aspects make the role. Plenty of the skills and processes that are important in the role as well as for your growth are not taught in a bootcamp or university/school or found in technical books.&lt;/p&gt;

&lt;p&gt;When you get your first tech role many things will be new. So why not get some insights on day-to-day software engineering aspects from non-technical books? Nothing beats practice and experience but reading about things can be so helpful.&lt;/p&gt;

&lt;p&gt;I also recommend them as a reference for experienced developers, especially these with limited work experience to a few companies. With these books you might fill in the gaps in your knowledge you probably didn’t even know you had.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.goodreads.com/en/book/show/57271519"&gt;The Missing README: A Survival Guide for New Engineers&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;by Chris Riccomini and Dmitriy Ryaboy&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It’s a very practical, in-depth, long book that covers every aspect of the job. From understanding a codebase (metrics, tech-debt, managing dependencies etc.) to dealing with managers, to doing on-call, and as well as navigating your career or learning to learn nothing is being left out.&lt;/p&gt;

&lt;p&gt;There might be parts that are new to you like Architecture and Technical Design Process. It’s great to have this book to come back to for those things that you haven’t yet touched as much to gather learnings and be prepared.&lt;/p&gt;

&lt;p&gt;If you are serious about your career and growth this book will be a great companion. Authors have shared from their personal experience and have thrown in plenty of example to make it easier to understand.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://learninpublic.org/"&gt;The Coding Career Handbook&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;by Shawn “swyx” Wang&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I really enjoyed the style of this book. At first, I thought there were too many links, which were distracting as I had to stop and check them out. Later, I decided to bookmark some and continued reading.&lt;/p&gt;

&lt;p&gt;Going through it I felt like having a conversation with “swyx”. You can see this book was written based on his experience during his first years in tech. It highlights some great strategies and principles for growth.&lt;/p&gt;

&lt;p&gt;"The Coding Career Handbook" offers practical strategies for career growth. From tips on building a strong online presence to navigating the job market, all are actionable pieces of advice that are relevant and achievable.&lt;/p&gt;

&lt;p&gt;Have a look at the table of contents &lt;a href="https://learninpublic.org/toc"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.goodreads.com/en/book/show/201545491"&gt;The Software Engineer Guidebook: Navigating senior, tech lead, and staff engineer positions at tech companies and startups&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;by Gergely Orosz&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A book that feels a bit less personal but nonetheless filled with plenty of great advice and ideas on how to grow in your career at each level. It gives insights into what engineers in higher roles do as well. What I like about the book is that each chapter builds upon the previous one just like in each role.&lt;/p&gt;

&lt;p&gt;The author talks from the perspective of an individual contributor as well as from an engineering manager’s view.&lt;/p&gt;

&lt;p&gt;Differently from the other two books, this one goes a bit more in-depth on soft skills, which are essential for the role. It also covers office politics and gives some hands on advice for owning your career.&lt;/p&gt;

&lt;p&gt;Have a look at the table of contents &lt;a href="https://docs.google.com/document/d/1w9I3D5JuVDiZD8_shNbHR9urYOBjTnW7x0YiD9jQjC8/edit#heading=h.6krpvzpexnka"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.goodreads.com/book/show/58502800"&gt;Engineering Management for the Rest of Us &lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;by Sarah Drasner&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A book I wish I read a bit earlier in my career. It shares insights on effective leadership, emphasizing care for the team’s well-being and fostering their growth. The book also encourages learning from mistakes and continuous improvement.&lt;/p&gt;

&lt;p&gt;Through reading, I got a clearer understanding of the engineering manager’s role and whether this would be a direction I’d like to go into. It helped me recognize the value of good managers and reflect on past experiences with poor management. It’s easy to underestimate the complexities of management from an outsider’s perspective, but with this book you get a glimpse on what goes behind the scenes.&lt;/p&gt;

&lt;p&gt;I found that after reading it and getting a better understanding of the role the relationship and the conversation with my manager during our 121 also evolved.&lt;/p&gt;

&lt;p&gt;If you are curious to know more check out &lt;a href="https://www.stefi.xyz/blog/engineering-management-for-the-rest-of-us-drasner-notes"&gt;my notes&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Additional recommendations
&lt;/h3&gt;

&lt;p&gt;Books I’d like to dive into soon:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.goodreads.com/book/show/25238425-the-effective-engineer"&gt;The Effective Engineer: How to Leverage Your Efforts In Software Engineering to Make a Disproportionate and Meaningful Impact by Edmond Lau&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.goodreads.com/book/show/4099.The_Pragmatic_Programmer"&gt;The Pragmatic Programmer: From Journeyman to Master by Andy Hunt and Dave Thomas&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A couple of books I’ve read that are more broad from which I gained great insights and I found useful in my software engineering role.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.goodreads.com/en/book/show/59616977"&gt;Building a Second Brain by Tiago Forte&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.goodreads.com/book/show/55539565-think-again"&gt;Think Again: The Power of Knowing What You Don't Know by Adam Grant&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>tech</category>
      <category>coding</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>🧑‍💻 Navigating Career Transitions: Is a Bootcamp Right for Me?</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Sun, 24 Mar 2024 09:58:21 +0000</pubDate>
      <link>https://dev.to/stefirosca/navigating-career-transitions-is-a-bootcamp-right-for-me-1pg5</link>
      <guid>https://dev.to/stefirosca/navigating-career-transitions-is-a-bootcamp-right-for-me-1pg5</guid>
      <description>&lt;p&gt;&lt;em&gt;Disclaimer: I completed a 6-month full stack development bootcamp in February 2020. I share at the end of the article my experience with attending a bootcamp and why I chose this over going to university.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; The answer to the question I raised isn't as simple as a yes or no. It depends on your learning style, finances, timeframe, and maybe location too.&lt;/p&gt;




&lt;p&gt;Before signing up for a bootcamp, make sure to get as much information as you can, and take into consideration the following points:&lt;/p&gt;

&lt;h2&gt;
  
  
  1. What are your expectations? In this market, you will not get a job that easily after graduating.
&lt;/h2&gt;

&lt;p&gt;Bootcamps are there to teach you coding but it’s not their responsibility to get you a job. A lot of bootcamp companies will make that promise and even offer a money-back guarantee. But be aware of some clauses that mostly point to the fact that you are the person responsible for the application process: you have to have a portfolio, write application letters, do networking, etc.&lt;/p&gt;

&lt;p&gt;Before 2020, finding job opportunities after after graduating from a bootcamp was often easier. I was still doing my bootcamp and was already able to land interviews. In March 2020 things completely changed as the demand of grads and juniors drastically decreased due to the uncertainty of the pandemic.&lt;/p&gt;

&lt;p&gt;Keep in mind that when you enroll in a bootcamp, you're investing in learning to code in a specific programming language, along with other essential skills for a developer role. Once you have the skills you get the opportunity to go after developer roles.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Are you willing to put in the work? Maybe you think your participation in a bootcamp is enough to get a job in tech. It's not.
&lt;/h2&gt;

&lt;p&gt;It’s important to realize that a bootcamp can be a shortcut for learning the basics you need to get into the tech industry. But the time is limited and you may not be taught some fundamentals. This means you will need to find the extra time to fill in some knowledge gaps afterwards.&lt;/p&gt;

&lt;p&gt;The bootcamp curriculum is packed. It is an intense three months if you do choose full-time rather than part-time. You won’t have the time to go over all the study material during the bootcamp. This means that the learning doesn’t end when you graduate. It takes continuous effort and self-study to succeed in getting a tech job.&lt;/p&gt;

&lt;p&gt;Are you ready to put in the work required to get into tech, also after completing the bootcamp?&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Have you tried out coding?
&lt;/h2&gt;

&lt;p&gt;Before taking a loan, or making a significant financial investment, it's wise to dip your toes into the world of coding to see if it's a passion worth pursuing. While coding offers various perks such as flexibility and higher pay, it's not necessarily for everyone. Remember, everyone can code, but not everyone might enjoy it.&lt;/p&gt;

&lt;p&gt;Consider spending some time with free coding tutorials in languages like Python or JavaScript. These resources offer a low-risk way to discover whether coding resonates with you. By investing time upfront, you can find out how you feel about coding before making a larger commitment.&lt;/p&gt;

&lt;p&gt;Speaking from personal experience, I initially thought I wanted to specialize in backend development. But, after exploring different aspects of coding, I found a passion for frontend development instead.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I sense that bootcamps are more FE focused as it feels easier to enter the market. I specifically looked for an only BE bootcamp with Java and only found 1 full time in Barcelona.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;If you haven’t tried out coding here is &lt;a href="https://www.stefi.xyz/blog/5-free-coding-resources-that-helped-me-get-my-first-frontend-developer-job/"&gt;a list of free courses + platforms I recommend for learning JavaScript&lt;/a&gt;. There are plenty more if you are interested in a different topic or programming language.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Can you afford it?
&lt;/h2&gt;

&lt;p&gt;In Spain, bootcamps offer different type of financing options, some with 0% interest rate. When I attended a bootcamp, I was able to split the payment into monthly installments without additional charges and also received a scholarship. While these options may have changed, it's worth checking with the bootcamp you're interested in.&lt;/p&gt;

&lt;p&gt;It is worthwhile checking out scholarships, for example, the &lt;a href="https://lesbianswhotech.org/codingscholarship/"&gt;Edie Windsor Coding Scholarship&lt;/a&gt;. There are many other scholarships, and some bootcamps offer (partial) scholarships as well. I recommend subscribing to &lt;a href="https://early-talent.diversifytech.com/subscribe?ref=klHnzXYNxZ"&gt;the Diversify Tech’s Early Talent Edition newsletter&lt;/a&gt; to find out about more of such opportunities. The newsletter also has information about jobs, events, and other career opportunities.&lt;/p&gt;

&lt;p&gt;While bootcamps can be costly, the value of the education and skills gained can outweigh the expense, provided you’re prepared to put in the necessary effort to secure employment afterward if this is your goal.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Structured Learning vs. Self-Directed Study: What Works for You?
&lt;/h2&gt;

&lt;p&gt;If you’re the type of person who needs a solid structure and deadlines to stick to, a bootcamp is ideal. This was something really important for me. On the other hand, if you’re confident in your ability to learn independently, there are plenty of free resources available online. My advice is to make sure you have a supportive community to turn to when you run into challenges/things become difficult.&lt;/p&gt;

&lt;p&gt;Initially, I attempted to teach myself coding. I made a plan and went all in. But I got stuck with the exercises. I couldn’t move forward and got very frustrated. Because of that, I had days when I just skipped the study as I didn't know how to solve some problems. With the structure and support of a bootcamp I was showing up every day.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. What is the current job market in your area?
&lt;/h2&gt;

&lt;p&gt;To get information about the current job market, it is good to attend free events, hosted by bootcamps where you can meet alumni. This can help you get a picture of how many of the recent graduates got hired. You can also do some research via LinkedIn.&lt;/p&gt;

&lt;p&gt;It is important to find out if tech jobs in your country typically require a Computer Science (CS) degree or if bootcamp graduates are accepted.&lt;/p&gt;

&lt;p&gt;I think most of them do but better to check. There are probably some countries where you need a Computer Science Degree to work as an Engineer or Developer. If that’s the case doing a bootcamp is not a good option, unless you are confident that you can find a remote job opportunity.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Internship opportunities?
&lt;/h2&gt;

&lt;p&gt;If you attend university you might be eligible to sign up for internships. Since I didn't attend a Computer Science university I can’t talk about it.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Should you rather get a Computer Science Degree?
&lt;/h2&gt;

&lt;p&gt;I would say, if you are young and have the time, and if it's free or costs less than a bootcamp, why not? Ideally, talk to someone who has pursued a degree to gain more insights. I’m not qualified to talk on this too much.&lt;/p&gt;

&lt;h2&gt;
  
  
  Other points to consider
&lt;/h2&gt;

&lt;p&gt;Learning a new set of skills is a &lt;strong&gt;time commitment&lt;/strong&gt;. Before deciding if a coding bootcamp is worth it, you’ll want to consider how you’ll fit this time commitment into your schedule.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Time investment:&lt;/strong&gt; Do you prefer to juggle learning to code while working full-time? Or do you prefer spending a shorter period of time in an intensive program dedicated 100% to coding? You can either go for a full-time bootcamp which is like a job every day from 9an-5pm and after that you'll have to work on homework or part-time. A part-time bootcamp is twice a week usually in the evenings plus Saturday.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Teaching style&lt;/strong&gt;: How do you like to learn? On-demand, in person or live teaching online&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I would look at:&lt;/strong&gt; sometimes Teaching Assistants are former students and you might not learn that much from them. So I would check how &lt;strong&gt;the size of the group&lt;/strong&gt; to know how often I could get in touch with the instructor and if I can ask questions on the go without the class running out of time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How many open hours are available&lt;/strong&gt;, these are slots of time where your instructor is available to take questions or where you can share your doubts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Check the curriculum&lt;/strong&gt; and ask someone who is doing the job, the one that bootcamp gives you the knowledge on, to give you their opinion. Also, check if there are jobs in the specific topic in your area.&lt;/p&gt;

&lt;p&gt;⚠️ &lt;strong&gt;Are bootcamps scams?&lt;/strong&gt; Some might be, better to check to make sure they are legit. → read reviews&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Other technical roles besides developer roles:&lt;/strong&gt; Doing a bootcamp can also help find a technical role that might be more on the support side, or Product Management or something where having the tech knowledge can be helpful. My first role was a Technical Support Engineering role. Once I got that role though it was a bit hard to move towards Frontend Engineering as the companies that were targeting me were looking for tech support rather than development.&lt;/p&gt;

&lt;h3&gt;
  
  
  My experience - Why I chose a bootcamp vs university?
&lt;/h3&gt;

&lt;p&gt;I did a career transition to tech via a bootcamp. I looked into doing a CS degree but it was more expensive. Also, it would have taken three years and I would not be earning any money during that time. And I am based in Barcelona, where at the public university the courses are taught in Catalan and not in Spanish. To be able to even attend I would first have needed to learn Catalan and even if I would have had a B1-B2 learning to code while struggling to understand the spoken language would have been too much of an extra challenge.&lt;/p&gt;

&lt;p&gt;Since I could not afford a bootcamp I started learning by myself via freeCodeCamp, CS50 (free Introduction to Computer Science course by Harvard University) and by going to the (free) codebar meetups. I realized that my progress was slow. It was hard to move forward when I was stuck because I didn’t have any set person/instructor to ask for help/guidance. CS50 for me was super challenging in terms of homework/exercises. I could reach out to people from codebar or friends but their availability was limited. I felt completely stuck sometimes, especially on weekends when I had more time for studying. Looking back I realize that CS50 was a hard course for beginners.&lt;/p&gt;

&lt;p&gt;Because I wanted to be able to move faster I signed up for a part-time bootcamp (6 months) and studied while keeping my full-time job. I was doing the bootcamp sep2019-march2020.&lt;/p&gt;

&lt;p&gt;Before deciding which school to pick I made a list of available options and went to visit the bootcamps to ask questions. &lt;a href="https://codeop.tech/"&gt;CodeOp&lt;/a&gt; stood out, they helped me financially, cleared my doubts and I was part of a small cohort. The support during the bootcamp was amazing and I loved the fact that it was a women’s, trans and non-binary bootcamp. I'm comparing this to a short intro course to C that I did in the past. I felt quite stupid. There wasn’t much empathy and I was surrounded by men who already knew a lot as they had experience and just wanted to get the certification.&lt;/p&gt;

&lt;p&gt;In 2019, when I had not even finished the bootcamp, I started applying for graduate jobs and got a bunch of interviews without having any portfolio. This completely changed once I graduated right when covid hit. Work went remote and also, a lot of layoffs happened. It was challenging to even get an interview.&lt;/p&gt;

&lt;p&gt;I feel that a bootcamp is not enough but it gives you a great starting point. The schools sell you the idea that you do a bootcamp and then you get hired. This might have worked pre-2020. In Barcelona many new bootcamp schools opened after 2020. Now there are a lot more bootcamp grads applying for graduate/junior positions. When I look at CVs from bootcamp grads, I see they always have the same projects and similar resumes. This makes it quite hard to stand out without doing work afterwards (expanding their projects, updating their portfolio etc.).&lt;/p&gt;

&lt;p&gt;If you want to know more about my journey in tech, here's &lt;a href="http://stefi.xyz/blog/my-journey-into-tech/"&gt;a more in-depth article&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Whichever path you choose know it won’t be that easy getting your first job in tech. Networking helps a ton. Good luck!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>learning</category>
      <category>career</category>
    </item>
    <item>
      <title>🚣 10 Must-Know VS Code Shortcuts</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Sun, 22 Oct 2023 21:08:47 +0000</pubDate>
      <link>https://dev.to/stefirosca/10-must-know-vs-code-shortcuts-1n17</link>
      <guid>https://dev.to/stefirosca/10-must-know-vs-code-shortcuts-1n17</guid>
      <description>&lt;p&gt;Moving from keyboard to mouse to perform some action can sometimes be annoying. VS Code has some really nice keyboard shortcuts to help keep me in flow when working with code. In this article, we'll explore 10 must-know VS Code shortcuts that I use on a day to day basis. These shortcuts are not only time-saving but also make you feel like a coding wizard 🧙‍♀️. Let's dive in!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Disclaimer: Please note that the keyboard shortcuts mentioned are for a MacBook keyboard. Keep this in mind and adapt them to your specific setup as needed.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Quick File Navigation with Command ⌘ + P
&lt;/h2&gt;

&lt;p&gt;Even if you are not working in a project with many files this shortcut will come in handy.&lt;br&gt;&lt;br&gt;
&lt;code&gt;Command ⌘ + P&lt;/code&gt; will open the search bar at the top, where you can start typing the name of the file you want to open.&lt;/p&gt;

&lt;p&gt;This shortcut allows you to quickly locate and open files without the need to manually navigate through folders, saving you valuable time and ensuring you stay focused on your code.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Easily Copy/Cut and Paste Entire Line/Block
&lt;/h2&gt;

&lt;p&gt;I didn't know that I could copy an entire line in VS Code without having to select the whole line. You can simply do &lt;code&gt;Command ⌘ + C or Command ⌘ + X&lt;/code&gt; on the line your cursor is on and it will copy/cut the whole line. Cool, right?&lt;/p&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%2Fpvxgh16paazevik2o69h.gif" 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%2Fpvxgh16paazevik2o69h.gif" alt="demo copy/cut and paste"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Move Code Up and Down / Move Lines Up/Down
&lt;/h2&gt;

&lt;p&gt;Sometimes you just need to take a code block and move it somewhere else either up or down from where it is to do this you have to:&lt;/p&gt;

&lt;p&gt;Select the code you want to move and press &lt;code&gt;Option ⌥ + arrow up/down&lt;/code&gt; to move the selected code&lt;/p&gt;

&lt;p&gt;If you want to move just one line you can do this without selecting the whole line.&lt;/p&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%2Fvd7pjwqcm5c6gnih83yg.gif" 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%2Fvd7pjwqcm5c6gnih83yg.gif" alt="demo move code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Toggle Side Panel and Integrated Terminal
&lt;/h2&gt;

&lt;p&gt;Sometimes all I want, especially when I am working on my 14" laptop screen, is to be able to focus on the file with the code without seeing the sidebar or in-build terminal.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Command ⌘ + B&lt;/code&gt; will show or hide side bar&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Command ⌘ + J&lt;/code&gt; will show or hide the in-build terminal&lt;/p&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%2Fe3ygpui80lt00azkhs1s.gif" 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%2Fe3ygpui80lt00azkhs1s.gif" alt="Demo Toggle Side Panel and Integrated Terminal"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I should mention that I keep my side panel on the right side as all code is left to right and I prefer having more space on the left rather than on the right which is the end of the file.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Multi-Cursor Editing
&lt;/h2&gt;

&lt;p&gt;There are times you might want to edit code on multiple lines and to do this you have two options:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Option ⌥ + Click&lt;/code&gt; to get multiple cursors where you click and what you type or delete will happen on all the lines where you see the cursors&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;select a word&lt;/code&gt; and then press &lt;code&gt;Command ⌘ + D&lt;/code&gt; as many times as you need. This adds a cursor on the the same word (if it exists) selected which every press of &lt;code&gt;Cmd + D&lt;/code&gt; and will allow you to change that specific word in all places at the same time. Pretty neat!&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%2Fh2sp5kyj7z2dnoss99wx.gif" 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%2Fh2sp5kyj7z2dnoss99wx.gif" alt="Multi-Cursor Editing"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Navigate a Line of Code Word by Word or from Start to End
&lt;/h2&gt;

&lt;p&gt;Holding &lt;code&gt;Option ⌥ + arrow left/right&lt;/code&gt; will make the cursor go through a line word by word, this works also in the terminal.&lt;br&gt;
If you press &lt;code&gt;Command ⌘ + arrow left/right&lt;/code&gt; you will navigate to the start or end of the line.&lt;br&gt;
&lt;code&gt;Command ⌘ + arrow up/down&lt;/code&gt; takes you to the beginning/end of the file.&lt;/p&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%2Frcg3jlfyf8yq8p61cla6.gif" 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%2Frcg3jlfyf8yq8p61cla6.gif" alt="Demo Navigate a line of code word by word or start / end"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Search in All Files with Command ⌘ + Shift ⇧ + F
&lt;/h2&gt;

&lt;p&gt;This is one of my favorites. Sometimes you want to quickly search for a function across the whole project. With &lt;code&gt;Command ⌘ + F&lt;/code&gt; you can search the file you are in but if you press &lt;code&gt;Command ⌘ + Shift ⇧ + F&lt;/code&gt; you can search in all files of the project.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Go to a Specific Line of Code in the File
&lt;/h2&gt;

&lt;p&gt;To go to a specific line in your file press &lt;code&gt;Control + G&lt;/code&gt; and then enter the line number. That's it! Comes in handy especially when pair programming and your partner asks you to change something on a specific line.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Close Current File When You No Longer Need It
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Command ⌘ + W&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Navigate Through Your Open Tabs
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Control + Tab&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Bonus: Copy the line you are on just below
&lt;/h2&gt;

&lt;p&gt;Put the cursor on the line you would like to copy below and press &lt;code&gt;Option ⌥ + SHIFT + arrow down&lt;/code&gt;. I haven't used this one too much so far.&lt;/p&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%2Fhq89n53diduriob135mv.gif" 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%2Fhq89n53diduriob135mv.gif" alt="Demo Copy the line you are on just below"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It's not easy to remember all these shortcuts at once. I recommend having a cheat sheet and starting to incorporate these slowly, building muscle memory over time.&lt;/p&gt;

&lt;p&gt;Happy coding 🚀&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>productivity</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>🏋️ 12 Beginner friendly Codewars challenges in JS</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Wed, 05 Jan 2022 18:05:50 +0000</pubDate>
      <link>https://dev.to/stefirosca/12-beginner-friendly-codewars-challenges-in-js-4nfo</link>
      <guid>https://dev.to/stefirosca/12-beginner-friendly-codewars-challenges-in-js-4nfo</guid>
      <description>&lt;p&gt;&lt;a href="https://www.codewars.com"&gt;Codewars&lt;/a&gt; katas, coding exercises, felt really intimidating. Even though I started with small easier challenges in the last weeks of my bootcamp at first I struggled. I didn't really understand what the kyu's were and wasn't sure where to start. Luckily I found a collection of &lt;a href="https://www.codewars.com/collections/javascript-beginners-bootcamp"&gt;Javascript beginners bootcamp katas&lt;/a&gt;. After completing these I still didn't feel ready for interviewing and I decided to keep going. &lt;/p&gt;

&lt;p&gt;The more challenges I solved the more comfortable I felt and I was able to take on some from different levels. I put together a list of &lt;a href="https://www.codewars.com/collections/61d49f93351e3f004a587719"&gt;21 Codewars katas&lt;/a&gt; in the hope this can help others on their learning journey. Here are 12 of them:&lt;/p&gt;

&lt;h2&gt;
  
  
  Warm up
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Returning Strings (8 kyu)
&lt;/h3&gt;

&lt;p&gt;A small fun kata to get you started. &lt;/p&gt;

&lt;p&gt;Description: Make a function that will return a greeting statement that uses an input; your program should return, "Hello,  how are you doing today?".&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.codewars.com/kata/55a70521798b14d4750000a4"&gt;&amp;gt;&amp;gt;&amp;gt; Solve Returning Strings&amp;lt;&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Multiply (8 kyu)
&lt;/h3&gt;

&lt;p&gt;Can you fix this code?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;multiply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
   &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://www.codewars.com/kata/50654ddff44f800200000004/"&gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; Solve: Multiply &amp;lt;&amp;lt;&amp;lt;&amp;lt; &lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  First round
&lt;/h2&gt;

&lt;h3&gt;
  
  
  3. Is it a number? (8 kyu)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Should return true:&lt;/span&gt;
&lt;span class="nx"&gt;isDigit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;isDigit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;  3  &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;isDigit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-3.23&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;//Should return false:&lt;/span&gt;
&lt;span class="nx"&gt;isDigit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3-4&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;isDigit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;  3   5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;isDigit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3 5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;isDigit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;zero&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/57126304cdbf63c6770012bd"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Is it a number?&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Basic Mathematical Operations (8kyu)
&lt;/h3&gt;

&lt;p&gt;Time for some math.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Examples(Operator, value1, value2) --&amp;gt; output&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;+&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;15&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;*&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;49&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/57356c55867b9b7a60000bd7/javascript"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Basic Mathematical Operations&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Opposite number (8 kyu)
&lt;/h3&gt;

&lt;p&gt;Can you find an integer or a floating-point's number their opposite?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="mi"&gt;14&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;14&lt;/span&gt;
&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;34&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;34&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/56dec885c54a926dcd001095"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Opposite number&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Second Round
&lt;/h2&gt;

&lt;h3&gt;
  
  
  6. String repeat (8kyu)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;repeatStr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// "AAAAAAAAAAAA"&lt;/span&gt;
&lt;span class="nx"&gt;repeatStr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// "HelloHelloHelloHelloHello"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/57a0e5c372292dd76d000d7e"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: String repeat&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  7. I love you, a little , a lot, passionately ... not at all (8kyu)
&lt;/h3&gt;

&lt;p&gt;Do you remember the flowers and petals game? Felt a bit nostalgic solving this one.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;howMuchILoveYou&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;nbPetals&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Maybe a little or a lot or passionately or not at all, Can you find out?&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/57f24e6a18e9fad8eb000296"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: I love you, a little , a lot, passionately ... not at all &amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Twice as old (8kyu)
&lt;/h2&gt;

&lt;p&gt;Let's have some fun! &lt;/p&gt;

&lt;p&gt;Your function takes two arguments:&lt;/p&gt;

&lt;p&gt;current father's age (years)&lt;br&gt;
current age of his son (years)&lt;br&gt;
Сalculate how many years ago the father was twice as old as his son (or in how many years he will be twice as old).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.codewars.com/kata/5b853229cfde412a470000d0"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Twice as old &amp;lt;&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Third Round
&lt;/h2&gt;

&lt;h2&gt;
  
  
  9. Is my girlfriend right? (8kyu)
&lt;/h2&gt;

&lt;p&gt;As with any enduring relationship, your function should be resilient to all manners of arguments and outside influences.&lt;/p&gt;

&lt;p&gt;A tricky one worth solving.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.codewars.com/kata/5877c57388976801ad0004cb"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Is my girlfriend right? &amp;lt;&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Recursive Replication (7kyu)
&lt;/h2&gt;

&lt;p&gt;Ready to solve this challenge with recursion?&lt;/p&gt;

&lt;p&gt;For example replicate(3, 5) should return [5,5,5]. If the times argument is negative, return an empty array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;replicate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;times&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// your solution here&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/57547f9182655569ab0008c4"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Recursive Replication&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  11.  Exes and Ohs (7kyu)
&lt;/h2&gt;

&lt;p&gt;Check to see if a string has the same amount of 'x's and 'o's.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;XO&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ooxx&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="nx"&gt;XO&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;xooxx&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
&lt;span class="nx"&gt;XO&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ooxXm&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="nx"&gt;XO&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;zpzpzpp&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="c1"&gt;// when no 'x' and 'o' is present should return true&lt;/span&gt;
&lt;span class="nx"&gt;XO&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;zzoo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/55908aad6620c066bc00002a"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Exes and Ohs&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Finish strong
&lt;/h2&gt;

&lt;h3&gt;
  
  
  12. Fizz Buzz (7kyu)
&lt;/h3&gt;

&lt;p&gt;A quite popular kata among beginners. Have you solved this one yet? &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.codewars.com/kata/5300901726d12b80e8000498"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Basic Fizz Buzz&amp;lt;&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Bonus
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Who likes it? (6kyu, I'd give it a 7kyu)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;[]&lt;/span&gt;                                &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt;  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;no one likes this&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Peter&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;                         &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt;  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Peter likes this&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jacob&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alex&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;                 &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt;  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jacob and Alex like this&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Max&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;           &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt;  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Max, John and Mark like this&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alex&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jacob&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Max&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;  &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt;  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alex, Jacob and 2 others like this&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.codewars.com/kata/5266876b8f4bf2da9b000362"&gt;&amp;gt;&amp;gt;&amp;gt; Solve: Who likes it?&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;If you want more to solve &lt;a href="https://www.codewars.com/collections/61d49f93351e3f004a587719"&gt;here's the whole JavaScript beginner-friendly collection&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>codenewbie</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>🥐 Giving my first tech talk while still learning to code</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Tue, 21 Dec 2021 09:47:12 +0000</pubDate>
      <link>https://dev.to/stefirosca/giving-my-first-tech-talk-while-still-learning-to-code-3664</link>
      <guid>https://dev.to/stefirosca/giving-my-first-tech-talk-while-still-learning-to-code-3664</guid>
      <description>&lt;p&gt;&lt;em&gt;Disclaimer: you never stop learning to code.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; Sharing my experience of submitting a talk proposal, getting accepted, preparing the talk and flying to Paris to deliver it. &lt;/p&gt;

&lt;p&gt;It wasn't a walk in the park. &lt;/p&gt;

&lt;p&gt;If you prefer to just watch the talk I gave about the importance of having a community when transitioning to tech, you can find it at the end of this article or on &lt;a href="https://www.youtube.com/watch?v=kiK4bSfGOpc&amp;amp;ab_channel=QueerJS"&gt;YouTube&lt;/a&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  Am I even eligible to give a talk?
&lt;/h3&gt;

&lt;p&gt;Not so long ago I was getting ready to fly to Paris to give my very first talk at a tech meetup in Paris. I'm not sure what I was thinking when I signed up other than I felt I had something to share that might help others which gave me the impulse to DM QueerJS on Twitter and ask them if I'd be eligible to give a talk as a non-developer. After telling them what I wanted to share plus the fact that I wasn't yet working as a developer, they said YES! and offered to fly me to Paris ✨. &lt;/p&gt;

&lt;h3&gt;
  
  
  Hello fear 👋
&lt;/h3&gt;

&lt;p&gt;A few days later panic kicked in. As an introvert, who doesn't feel comfortable talking in public, I started to doubt that I could actually pull it off. &lt;/p&gt;

&lt;p&gt;Instead of starting to work on it, as I usually would, way ahead of the deadline, I procrastinated. Secretly, I was hoping the event would get canceled and I wouldn't have to give the talk. Not having yet my flights and hotel booked was the perfect excuse to do nothing and hope it will go away. It didn't and I had to face it and start preparing my talk.&lt;/p&gt;

&lt;h3&gt;
  
  
  Sharing my first draft
&lt;/h3&gt;

&lt;p&gt;I put together a draft and then reached out to people in my community. Days later, in a co-working space, I gave the first version of my talk to a friend and her husband. They gave me lots of valuable feedback and I went on re-writing. Once I had an improved version I presented it to the girls in my coding school. I forgot parts of what I wanted to share but their feedback helped me improve. Finally I called one of my close friends, a storytelling guru and after an hour long call I knew what I had to tweak and started putting together the slides. It felt like my message was coming through.&lt;/p&gt;

&lt;h3&gt;
  
  
  Practicing the talk
&lt;/h3&gt;

&lt;p&gt;Now it was time to practice my talk and figure out how I would pull it off without freezing.&lt;/p&gt;

&lt;p&gt;My flatmate happens to be someone who gives tons of talks, is on TV, radio and whatnot so I asked her for advice. Because she doesn't speak English I couldn't present it to her.&lt;/p&gt;

&lt;p&gt;Now that I had it all, it was time to practice. I think I went through the talk at least 20 times, timed it every single attempt. Once I felt more confident about my performance I called another friend to be in the audience. We did a few takes, adapting the draft with live feedback, and then I asked him to record it.&lt;/p&gt;

&lt;p&gt;What if I chickened out or something happened? They were so nice and supportive. At least I could send them the video and they could play it. Right?&lt;/p&gt;

&lt;h3&gt;
  
  
  Freaking out!
&lt;/h3&gt;

&lt;p&gt;A few days before the event I looked at the list of speakers. There were other tech talks, one in particular was about something I didn't know anything about, related to VR and gaming, from a person who's giving talks all over the world, and is also an expert in the field. I wondered why this person was coming all the way from a different continent to speak at this meetup just to realize that the meetup was happening around a bigger tech conference.&lt;/p&gt;

&lt;p&gt;So the meetup I was talking at was on the agenda of that main event. Suddenly I didn't feel that eager to go to Paris. Not even the thought of eating delicious croissants and eclairs was convincing enough. &lt;/p&gt;

&lt;p&gt;The day I had to fly to Paris the train was delayed. Usually I would immediately make a plan, either get a taxi or get out and go take the airport bus. All I was thinking instead was, I could email them my video talk. &lt;/p&gt;




&lt;h3&gt;
  
  
  Day of the talk
&lt;/h3&gt;

&lt;p&gt;Arriving a day before to Paris gave me a full day to explore. I got to see my favourite Van Gogh painting, ate some croissants, and saw Paris from the Sacré-Cœur Basilica tower, beautiful! &lt;/p&gt;

&lt;p&gt;Rapidly it was dark and I had to get dressed and go to the meetup location, where I were to meet some new people, to whom I have to talk, yay! Why wouldn't I just give this in Barcelona, in front of people I know? &lt;/p&gt;

&lt;p&gt;I've made my way and as I was talking to the organizer they asked me if I'd be ok to be the one speaking last. What? This was not good. Some of the advice I've received on the codebar's Slack #helpdesk was to ask to be the first one giving the talk. I don't remember specifically why however given the fact that I wanted to come across as confident and cool I said of course I can go last. No problem. &lt;/p&gt;

&lt;p&gt;Probably because by now I got to watch two interesting, smart, perfectly delivered, fun tech talks and I was next with a non-tech talk, and, even more, of a person who wasn't even a developer. Yet.&lt;/p&gt;

&lt;p&gt;On top of everything else I had to hold a microphone, which meant I couldn't hold my notes and look down in case I would freeze.&lt;/p&gt;

&lt;p&gt;Nonetheless, I took the microphone, and gave my talk while focusing on a few people with whom I made eye contact which helped me deliver it. &lt;/p&gt;

&lt;p&gt;People clapped at the end. I was in awe! Not sure if they were just nice and polite, but this was the best feeling, and later one of the reasons I choose to talk at a queer meetup. &lt;/p&gt;

&lt;h3&gt;
  
  
  Talk delivered, time to network
&lt;/h3&gt;

&lt;p&gt;After the talks were over it was time network. I don't know how speakers do it, I just wanted to run to the hotel and hide.&lt;/p&gt;

&lt;p&gt;If I wouldn't have stayed though I wouldn't have had all these lovely people come over telling me how much they enjoyed my talk. One person I remember came over and said that she's been through some of this and that she knew what I was talking about and where I came from. This was such a powerful statement, the kind that makes one feel less alone and all of the stress worth it. &lt;/p&gt;

&lt;p&gt;Thank you &lt;a href="https://queerjs.com/"&gt;QueerJS&lt;/a&gt; for giving me this opportunity ♥️.&lt;/p&gt;

&lt;h3&gt;
  
  
  My talk at QueerJS
&lt;/h3&gt;

&lt;p&gt;Without further intro, if you are curious to also see the talk here it is:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/kiK4bSfGOpc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;




&lt;p&gt;PS. While I am currently working as a developer I am still actively part of some tech communities. As a recurse alumnus I'm part of the Recurse Center community, then codebar, Twitter, and some Discord channels. The ones I'm mostly active on are the one from &lt;a href="https://scrimba.com/"&gt;Scrimba&lt;/a&gt;(free) and my favorite &lt;a href="https://twitter.com/cassidoo"&gt;cassidoo's&lt;/a&gt; patron-only Discord chat(paid).   &lt;/p&gt;




&lt;p&gt;If you are looking to get into tech I wrote a long detailed article &lt;a href="https://dev.to/stefirosca/5-free-coding-resources-that-helped-me-get-my-first-frontend-developer-job-4ak4"&gt;🦩 5 Free coding resources that helped me get my first frontend developer job&lt;/a&gt; where I go more into details around some amazing communities too.&lt;/p&gt;

</description>
      <category>codenewbie</category>
      <category>beginners</category>
      <category>community</category>
      <category>womenintech</category>
    </item>
    <item>
      <title>🚠 My journey into tech</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Sun, 05 Dec 2021 14:50:14 +0000</pubDate>
      <link>https://dev.to/stefirosca/my-journey-into-tech-48fl</link>
      <guid>https://dev.to/stefirosca/my-journey-into-tech-48fl</guid>
      <description>&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; The path to becoming a developer isn't a walk in the park at least it wasn't for me but as you will see, not all obstacles are unshakeable.&lt;/p&gt;




&lt;p&gt;Did you ever want to do something that people like you aren't supposed to do? I knew early on that I wanted to study computer science but life got in the way. &lt;/p&gt;

&lt;h3&gt;
  
  
  High School &amp;amp; University
&lt;/h3&gt;

&lt;p&gt;Looking back this seems almost stupid, but having moved to a new school in 4th grade I felt like I had to pretend math wasn't my favorite subject just to be accepted and included. &lt;/p&gt;

&lt;p&gt;Later on I didn’t have the chance to pick a high school with an IT section as this didn't exist in the only German speaking high school in my hometown. Ironically, the opposite happened at the university. There was an IT uni where they taught in German but at this point I needed to leave home so I went on to study economics. &lt;/p&gt;

&lt;h3&gt;
  
  
  Building a blog
&lt;/h3&gt;

&lt;p&gt;While in uni my need to share ads and short films that I was finding online led me to create a blog. Using a template wasn't ideal so I started customising things through HTML and CSS. It wasn't easy. Back then there weren't many online resources but this didn't stop me from staying up late excitedly looking for solutions.&lt;/p&gt;

&lt;h3&gt;
  
  
  First job
&lt;/h3&gt;

&lt;p&gt;Being a student and not having money led me to get a job. Juggling school and work didn't leave me any time to ask myself if this was something I enjoyed and wanted to do. Once I had graduated and I got more experience I became aware of the fact that this was not what I wanted to do. But what do you do with this information at this stage? Moving to a smaller company gave me the opportunity to get a closer look at the tech department. It was clear I wanted to be part of it. Wasn't it too late though? Going back to uni meant optimistically 4 more years of school and starting over again in my 30's when one should already have their life figured out. This is when I asked a close friend who studied programming in high school how I could get started and she recommend that I learn C. Start there and then move on, she said. &lt;/p&gt;

&lt;h3&gt;
  
  
  Dipping my toes in C
&lt;/h3&gt;

&lt;p&gt;As advised, I signed up for a C class in Bucharest. This came after a failed attempt to learn Python on my own via Codecademy. &lt;/p&gt;

&lt;p&gt;After only two C classes I had to quit. Spending 3 hours in class feeling stupid while not understanding anything felt like a confirmation that this is not something I am capable of especially while seeing all the guys getting it. Now I could move on and try other things out.  &lt;/p&gt;

&lt;p&gt;So I signed up for a photography class to learn more about cameras and maybe start being more intentional about making YouTube videos. At this time I was also trying to move to Barcelona and got a job offer. YAY!&lt;/p&gt;




&lt;h3&gt;
  
  
  Moving to Barcelona
&lt;/h3&gt;

&lt;p&gt;Miles away this voice didn't get quieter. It kept yelling that programming is for me. Having shared this interest with my flatmate I've found out about &lt;a href="https://codebar.io/"&gt;codebar&lt;/a&gt;&lt;sup id="fnref1"&gt;1&lt;/sup&gt;, a non-profit organization running free workshops helping minorities get into tech. I decided to go to one of their meetups trying to learn Python. I convinced myself that I was doing this just to learn a programming language as the 5th language I 'speak'.  The first experience wasn't great but the people there convinced me to come back. The support of this community made it ok to feel stupid.&lt;/p&gt;

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

&lt;p&gt;At codebar I felt supported and although I was questioning this career change people here believed that I got what it takes and shared with me a lot of helpful free online resources like &lt;a href="https://www.freecodecamp.org/"&gt;freecodecamp&lt;/a&gt; or &lt;a href="https://scrimba.com/"&gt;Scrimba&lt;/a&gt;&lt;sup id="fnref2"&gt;2&lt;/sup&gt;. This helped me get started. For a long while, I hid what I actually wanted and pretended I only went in order to better understand html and css just to re-create my blog without using any template. &lt;/p&gt;

&lt;p&gt;As I got to know more stuff I felt more confident to join other meet-ups, mainly for minorities. Through these, I've got to meet other people who years ago were in the same position as me and transitioned. Meeting others who looked like me or were similar to me made this idea of wanting to become a developer a very realistic one that only needed execution.&lt;/p&gt;

&lt;h3&gt;
  
  
  By far the best intro to coding course
&lt;/h3&gt;

&lt;p&gt;Discovering &lt;a href="https://www.edx.org/course/introduction-computer-science-harvardx-cs50x"&gt;CS50&lt;/a&gt;&lt;sup id="fnref3"&gt;3&lt;/sup&gt; was a life-changing experience. Completing this course was a big struggle but thanks to the great network of people I met through the meetups I had the necessary support to keep pushing forward. I thought that if I can finish this course at &lt;strong&gt;Harvard&lt;/strong&gt; I will finally prove myself that I am capable of becoming the developer I dreamed. Professor David Mallan's energy and trust in me got transmitted through my laptop screen and I felt I could do it.&lt;/p&gt;

&lt;h3&gt;
  
  
  Attending a bootcamp
&lt;/h3&gt;

&lt;p&gt;Midway through CS50 I was sure I wanted to make the change but it felt too slow and the number of free resources was rather overwhelming. A bootcamp looked like a good solution but given they are very expensive I had to find  scholarships. Unfortunately, I missed the deadline for a scholarship but after talking to the founder of the school they offered me something similar. YAY! On top of that for the remaining amount they gave me a commission-free loan. The bootcamp , &lt;a href="https://codeop.tech/"&gt;codeOp&lt;/a&gt;&lt;sup id="fnref4"&gt;4&lt;/sup&gt;, is for women only and is based in Barcelona. If anyone wants to know more feel free to contact me. I might be able to get you a discount. &lt;/p&gt;

&lt;p&gt;Once in the bootcamp everything felt right and I just kept going. This was pre-pandemic and even though I didn't yet finish the bootcamp I was getting interviews. There were plenty of jobs for juniors and grads. Because I had to get my first job early on, due to financial needs, this time I wanted to take my time and see what I like more, thanks to my savings. It was  Katrina, the founder, who introduced me to the &lt;a href="https://www.recurse.com/"&gt;Recurse Center&lt;/a&gt;&lt;sup id="fnref5"&gt;5&lt;/sup&gt;, an incredible community where your goal as a participant is to become a better programmer. There is no curriculum and you are in charge of how you spend your time at &lt;a href="https://www.recurse.com/"&gt;RC&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4cm9dm706aewinvrub4p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4cm9dm706aewinvrub4p.png" alt="Posing in front of Sagrada Family after the bootcamp graduation" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Joining the Recurse Center, getting a tech-related job and doing a Mock interview with Cassidoo
&lt;/h3&gt;

&lt;p&gt;I joined RC in April 2020, which is when Spain went to complete lockdown. Covid made our future uncertain which forced companies to go on hiring freezes and suddenly  junior/graduate disappeared while many mid-senior developers got laid off. I was running very low on my savings and I was again in a position where I had to take a job. Therefore I applied also for tech-related roles, besides developer roles. &lt;/p&gt;

&lt;p&gt;The job I got was in a toxic environment which affected my mental health. Because they didn't allow me to spend 3 weeks working from my home country during Christmas, although I was only working remotely as the office was closed, I decided to quit and fly home to take some time to recover and study. Here I wouldn't spend too much money and would get delicious food for free. &lt;/p&gt;

&lt;p&gt;Around the time I decided to quit I got an email from &lt;a href="https://scrimba.com/"&gt;Scrimba&lt;/a&gt; about a competition to win a React Mock interview with &lt;a href="https://twitter.com/cassidoo"&gt;Cassidoo&lt;/a&gt; &lt;sup id="fnref6"&gt;6&lt;/sup&gt; which I got 😄. I had 2 days to prepare and was nothing close to ready. Having gotten this opportunity and learning what I was struggling with I decided to do a big recap on the &lt;a href="https://scrimba.com/"&gt;Scrimba&lt;/a&gt; platform while also working on a personal project I hadn't touched in a long while. Cassidy was very nice and supportive and thanks to her feedback I knew what I had to focus on.&lt;/p&gt;




&lt;h3&gt;
  
  
  Community is key
&lt;/h3&gt;

&lt;p&gt;During the week I've spent in Romania I've found some amazing mentors, via &lt;a href="//codingcoach.io"&gt;Coding Coach&lt;/a&gt;,&lt;a href="https://twitter.com/GiacomoRebonato"&gt;Giacomo Rebonato&lt;/a&gt; being one of them, and also kept pairing with other friends and mentors I've found through codebar and the RC. &lt;/p&gt;

&lt;p&gt;It was not easy getting my very first developer job but after many applications, interviews, and failed coding challenges I am officially a Frontend Developer whose code is already in production ✨.&lt;/p&gt;

&lt;p&gt;Something I've learned through this journey is to trust my guts, if something pulls you in, again and again, listen to it. Whenever stuck, ask for help. There are so many resources. Some people won't answer, don't let that discourage you, just write to more people and try to be specific about what you need to make it easy for them to respond.&lt;/p&gt;




&lt;p&gt;If you are looking to get into tech I wrote a long detailed article &lt;a href="https://dev.to/stefirosca/5-free-coding-resources-that-helped-me-get-my-first-frontend-developer-job-4ak4"&gt;🦩 5 Free coding resources that helped me get my first frontend developer job&lt;/a&gt; where I go more into details about the resources and communities mentioned in this article.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;&lt;a href="https://codebar.io/"&gt;codebar&lt;/a&gt;: their goal is to enable minority group members to learn programming in a safe and collaborative environment and expand their career opportunities. To achieve this they we run &lt;a href="https://codebar.io/events"&gt;free regular workshops&lt;/a&gt;, regular one-off events and try to create opportunities for our students making technology and coding more accessible. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn2"&gt;
&lt;p&gt;&lt;a href="https://scrimba.com/dashboard"&gt;The Frontend Developer Career Path&lt;/a&gt; from Scrimba contains over 70 hours of top-notch tutorials, hundreds of coding challenges, and dozens of real-world projects. Their tagline is: Don't waste $15K on a coding bootcamp Our Frontend Career Path helps motivated students become hireable developers for 1% of the price.  ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn3"&gt;
&lt;p&gt;&lt;a href="https://www.edx.org/course/introduction-computer-science-harvardx-cs50x"&gt;CS50&lt;/a&gt; Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience.  ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn4"&gt;
&lt;p&gt;&lt;a href="https://codeop.tech/"&gt;codeOp&lt;/a&gt; was founded in 2018 to help solve the gender disparity problem in the tech space. We're the first international tech school for women+ (embracing women, transgender, and non-binary individuals) who want to transition to, or upskill in tech. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn5"&gt;
&lt;p&gt;&lt;a href="https://www.recurse.com/about"&gt;The Recurse Center&lt;/a&gt; is a self-directed, community-driven educational retreat for programmers. It offers educational retreats for anyone who wants to get dramatically better at programming. The retreats are free, self-directed, and project based. You attend RC as part of a group of people, called a batch. Batches start every six weeks, and you can attend RC for either one, six or 12 weeks. When you do a batch of RC, you spend your time working at the edge of your programming abilities in a rigorous, supportive, and friendly environment. RC is for people of all ages and experience levels.  ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn6"&gt;
&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=ZV373VaS4UM&amp;amp;ab_channel=Scrimba"&gt;Mock React job interview (featuring Cassidy Williams)&lt;/a&gt; ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>wecoded</category>
      <category>womenintech</category>
      <category>career</category>
    </item>
    <item>
      <title>🧰 Setting up your username and email in Git at your first dev job</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Tue, 30 Nov 2021 10:37:15 +0000</pubDate>
      <link>https://dev.to/stefirosca/setting-up-your-username-and-email-in-git-at-your-first-dev-job-13ej</link>
      <guid>https://dev.to/stefirosca/setting-up-your-username-and-email-in-git-at-your-first-dev-job-13ej</guid>
      <description>&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%2Fdub8lvb336t4xu0o4nf3.png" 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%2Fdub8lvb336t4xu0o4nf3.png" alt="Before and after example with image and name from profile"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One of the things I had to do when getting my first job was configuring Git. Unless you setup your name and email address Git will take it from the environment. This is important because every Git commit uses this information and if it's not setup correctly it will not be linked to your Github account. Hence if you have a profile picture it won't show.&lt;/p&gt;

&lt;p&gt;There are 2 ways to do it:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Globally&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Open the command line and run the following commands with your name and email.&lt;/p&gt;

&lt;p&gt;To setup your username:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ git config --global user.name "Stefi Rosca"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To setup your email:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ git config --global user.email "stefi.rosca@me.com"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this case you only have to do it once and Git will always use this information for anything you do on that system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Repository-specific&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;From the command line, change into a repository directory where you want to make this change and then run the commands as below.&lt;/p&gt;

&lt;p&gt;To setup your username:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git config user.name "Stefi Rosca"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To setup your email address:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git config user.email "stefi.rosca@me.com"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To test that you set it up correctly you can run in your in a specific Git terminal &lt;code&gt;git config user.email&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Make sure you change the name and email in the example above to yours. &lt;/p&gt;

&lt;p&gt;For more information check out chapter on Getting Started from the &lt;a href="https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup" rel="noopener noreferrer"&gt;Pro Git book&lt;/a&gt;&lt;/p&gt;

</description>
      <category>github</category>
      <category>git</category>
      <category>beginners</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Adevinta's Hacktoberfest 2021 @s-ui-components project 🎉</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Thu, 07 Oct 2021 13:07:45 +0000</pubDate>
      <link>https://dev.to/adevintaspain/adevinta-s-hacktoberfest-2021-s-ui-components-project-1bg9</link>
      <guid>https://dev.to/adevintaspain/adevinta-s-hacktoberfest-2021-s-ui-components-project-1bg9</guid>
      <description>&lt;p&gt;Welcome to Adevinta's Hacktoberfest 2021 edition! For this edition, we have decided to improve our participation and create a document to summarise the event’s purpose, how it aligns with our point of view and objectives and how you could join. You can find it &lt;a href="https://github.com/SUI-Components/sui-components/discussions/1778"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;SUI Components is an open-source, high-quality library of React components that empowers teams to craft any product with ease.&lt;/p&gt;




&lt;h3&gt;
  
  
  👀 What is Hacktoberfest?
&lt;/h3&gt;

&lt;p&gt;"&lt;a href="https://hacktoberfest.digitalocean.com/"&gt;Hacktoberfest&lt;/a&gt;, in its 8th year, is a month-long celebration of open source software run by DigitalOcean. During the month of October, we invite you to join open-source software enthusiasts, beginners, and the developer community by contributing to open-source projects."&lt;/p&gt;

&lt;h3&gt;
  
  
  🌳 👕 What will I gain from participating?
&lt;/h3&gt;

&lt;p&gt;Complete the 2021 challenge and earn a limited-edition T-shirt. Rather than receive t-shirts as swag, you can choose to have a tree planted in your name and help make Hacktoberfest 2021 more carbon neutral. You need to be within the first 50k participants to integrate 4 different PR's on any participating open-source project to be eligible for a t-shirt.&lt;/p&gt;

&lt;h3&gt;
  
  
  🚀 Let's get started
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Sign up to Hacktoberfest 2021&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Make sure you sign up on the official &lt;a href="https://hacktoberfest.digitalocean.com/"&gt;Hacktoberfest&lt;/a&gt; website. To get started, you’ll need to sign up with your GitHub or GitLab account. If you don’t have a GitHub account yet, you can create one.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Make sure you read the &lt;a href="https://hacktoberfest.digitalocean.com/resources/participation"&gt;Participation Rules&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If it's your first time participating, we recommend reading &lt;a href="https://hacktoberfest.digitalocean.com/resources/beginners"&gt;this post&lt;/a&gt; as well. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Make sure that you've read our &lt;a href="https://github.com/SUI-Components/sui-components/discussions/1597"&gt;Code of Conduct&lt;/a&gt; as well as the &lt;a href="https://sui-components.vercel.app/"&gt;Contributor Documents&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Pick a challenge from our &lt;a href="https://github.com/SUI-Components/sui-components/discussions/1778"&gt;list&lt;/a&gt; and solve it.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Hurry up some have already been completed!&lt;/p&gt;

&lt;p&gt;Our Design-Ops team has put together a list of over 50 issues we consider suitable for this event. We've split these by complexity as explained below.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;VERY EASY&lt;/th&gt;
&lt;th&gt;EASY&lt;/th&gt;
&lt;th&gt;MEDIUM&lt;/th&gt;
&lt;th&gt;DIFFICULT&lt;/th&gt;
&lt;th&gt;HARD&lt;/th&gt;
&lt;th&gt;EXTREME&lt;/th&gt;
&lt;th&gt;HACKER&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;☆☆☆☆☆☆&lt;/td&gt;
&lt;td&gt;★☆☆☆☆☆&lt;/td&gt;
&lt;td&gt;★★☆☆☆☆&lt;/td&gt;
&lt;td&gt;★★★☆☆☆&lt;/td&gt;
&lt;td&gt;★★★★☆☆&lt;/td&gt;
&lt;td&gt;★★★★★☆&lt;/td&gt;
&lt;td&gt;★★★★★★&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;After cloning the &lt;a href="https://github.com/SUI-Components/sui-components"&gt;repository&lt;/a&gt; run the following commands to get started:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ npm install -g @s-ui/studio @s-ui/mono
$ npm install --prefer-online --legacy-peer-deps
$ npm run phoenix

// run a specific component, run category/component
$ sui-studio dev [category]/[component]
// run all
$ sui-studio start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;4. Follow us &lt;a href="https://www.twitch.tv/adevintaspaintech/schedule"&gt;Twitch&lt;/a&gt; for our  Weekly Sync Streams every Wednesday at 12:30 CEST (in Spanish)! and &lt;a href="https://twitter.com/SUIEngineers"&gt;Twitter&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Have fun!&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>contributorswanted</category>
    </item>
    <item>
      <title>🦩 5 Free coding resources that helped me get my first frontend developer job</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Thu, 07 Oct 2021 10:43:17 +0000</pubDate>
      <link>https://dev.to/stefirosca/5-free-coding-resources-that-helped-me-get-my-first-frontend-developer-job-4ak4</link>
      <guid>https://dev.to/stefirosca/5-free-coding-resources-that-helped-me-get-my-first-frontend-developer-job-4ak4</guid>
      <description>&lt;p&gt;When I wanted to learn how to code I thought the only available options were either to go to university or attend a bootcamp. Given I wasn't sure if this was what I wanted to do long-term, I wasn't ready to invest. Luckily I found out about some great free online resources and some amazing communities that I am sharing in this article.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Disclaimer: I've attended a paid bootcamp as well and paid for the Scrimba subscription plan but I do believe that all the resources mentioned together with the paid ones helped me land the job. Some of the courses I've done post-bootcamp.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Free coding courses&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://www.freecodecamp.org/learn/" rel="noopener noreferrer"&gt;freeCodeCamp&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.edx.org/course/introduction-computer-science-harvardx-cs50x" rel="noopener noreferrer"&gt;CS50&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://scrimba.com/" rel="noopener noreferrer"&gt;Scrimba&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/playlist?list=PLRD1Niz0lz1uR4W3ms6DygWMjXW-6hDB_" rel="noopener noreferrer"&gt;JavaScript Games with Ania Kubow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript30.com/" rel="noopener noreferrer"&gt;Javascript30&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Bonus:&lt;/strong&gt; &lt;a href="https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2" rel="noopener noreferrer"&gt;A Beginners Guide To Pure CSS Images&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Communities:&lt;/strong&gt; &lt;a href="https://codebar.io/" rel="noopener noreferrer"&gt;codebar&lt;/a&gt;, &lt;a href="https://mentors.codingcoach.io/" rel="noopener noreferrer"&gt;Coding Coach&lt;/a&gt; and &lt;a href="https://www.recurse.com/" rel="noopener noreferrer"&gt;the Recurse Center&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;More details on each option below. &lt;/p&gt;




&lt;h2&gt;
  
  
  5 Free coding courses
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Freecodecamp
&lt;/h3&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%2Fu99t3vxx2pwb0tuayxkf.gif" 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%2Fu99t3vxx2pwb0tuayxkf.gif" alt="freecodecamp demo"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.freecodecamp.org/" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Sign up for freecodecamp here&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;It's a great resource for beginners as it doesn't require any previous experience and covers in detail basic as well as advanced concepts.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Since joining I've completed the Responsive Web Design, the JavaScript Algorithms and Data Structures certification and the React part from the Front End Development Libraries certification. Although I had already done a course on React I choose to go through this again. It really helped as I got to go through everything again at a slower pace.&lt;/p&gt;

&lt;p&gt;In this Responsive Web Design Certification, you'll learn  HTML and CSS and will have a few projects build on your own. What I liked about this curriculum is that you get to put everything into practice with the projects you will have to build.&lt;/p&gt;

&lt;p&gt;In the JavaScript Algorithm and Data Structures Certification, you get to learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions. Even are already familiar with these concepts I still recommend going through them as a repetition exercise. &lt;/p&gt;

&lt;p&gt;Additionally, there is a Coding Interview Prep section where one can practice coding challenges in JS. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;My advice:&lt;/strong&gt; don't try to do the curriculum all at once and just to complete it. Take the time to make sure you understand. Some things you will forget especially with HTML and CSS. By building things on your own these concepts will be easier to remember and hey, there is nothing wrong with going back and looking up things.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. CS50: Introduction to Computer Science | Harvard University
&lt;/h3&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%2Fy57plzysin3pb94lhrcn.jpeg" 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%2Fy57plzysin3pb94lhrcn.jpeg" alt="Prof. David J. Malan"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.edx.org/course/introduction-computer-science-harvardx-cs50x" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Sign up for CS50 here&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Even though it's labeled as a beginner course, for me it was the most challenging one I took so far.&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;Why? First, it starts with C and then there is no walkthrough with the solutions, but you learn a lot during this struggle. I remember watching the lectures 2-3 times to realize some things just weren't discussed. That's when I bought the recommended book and improved my search skills. This is what actually happens in real life and I am grateful to have learned it early on. &lt;/p&gt;

&lt;p&gt;Prof. David J. Malan's energy is contagious. The passion he has teaching can make one fall in love with coding and also believe they can definitely learn it too. &lt;/p&gt;

&lt;p&gt;The reason I took this course was because I thought I needed a university diploma to prove I could be a real developer, and one from Harvard is not a small thing. &lt;/p&gt;

&lt;p&gt;They say the course can be completed in 12 weeks by investing around 10-12 hours a week. It took me around 8 months and I've reached out to various developers for help throughout the journey. Many times I wanted to through the laptop but once I've finished I felt everything was possible. &lt;/p&gt;

&lt;p&gt;Languages in this course include C, Python, SQL, and JavaScript plus CSS and HTML. The goal, ultimately, is for students to feel not that they “learned how to program in X” but that they “learned how to program.”&lt;/p&gt;

&lt;p&gt;Students who earn a satisfactory score on 9 of the 9 programming assignments and submit a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule but you can also attend live via Zoom.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Scrimba
&lt;/h3&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%2Fmz55c0v2geopm0v0hj70.gif" 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%2Fmz55c0v2geopm0v0hj70.gif" alt="Scrimba demo free courses"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://scrimba.com/" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Sign up for Scrimba here&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Ideal for beginners who want to learn Frontend Development.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;While learning CSS on freecodecamp I was told that there are 2 courses that might explain better &lt;a href="https://scrimba.com/learn/flexbox" rel="noopener noreferrer"&gt;Flexbox&lt;/a&gt; and &lt;a href="https://scrimba.com/learn/cssgrid" rel="noopener noreferrer"&gt;CSS Grid&lt;/a&gt;, on Scrimba. Once I started going through the course I've found this platform to be amazing. It's because you can pause the course and immediately code in the course. Cannot explain it very well you have to try it yourself.&lt;/p&gt;

&lt;p&gt;Besides this, I've completed also the &lt;a href="https://scrimba.com/learn/design" rel="noopener noreferrer"&gt;Learn UI Design Fundamentals&lt;/a&gt;, &lt;a href="https://scrimba.com/learn/learnreact" rel="noopener noreferrer"&gt;Learn React course&lt;/a&gt; and &lt;a href="https://scrimba.com/learn/portfolio" rel="noopener noreferrer"&gt;Build and deploy your portfolio&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Since I've joined Scrimba they have created a &lt;strong&gt;paid subscription&lt;/strong&gt; which can be around 15 Euros per month (depending on where you are located and the plan you choose) which gives you access to all paid courses as well as the &lt;a href="https://scrimba.com/learn/frontend" rel="noopener noreferrer"&gt;The Frontend Developer Career Path&lt;/a&gt;. Before paying though I recommend trying it out and doing the free courses. There are plenty of them and if you feel you want more then sign up.&lt;/p&gt;

&lt;p&gt;I did 80% of the Frontend Developer Career Path and as a bootcamp graduate can tell you this is an incredibly valuable course that includes way more material.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. JavaScript Games with Ania Kubow
&lt;/h3&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%2F4hvvqeolt4hzkbdlqjjj.gif" 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%2F4hvvqeolt4hzkbdlqjjj.gif" alt="JavaScript Games with Ania Kubow Youtube Playlist"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://www.youtube.com/playlist?list=PLRD1Niz0lz1uR4W3ms6DygWMjXW-6hDB_" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Checkout the JavaScript Games with Ania Kubow playlist on YouTube&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;To go to these you need to have a basic understanding of JS, HTML and CSS.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This was one of my favorite JS tutorials. There are no frameworks involved and you get to build retro games that you might have played growing up if you were born in the 80s. From PacMan to the Nokia 3310 Snake game to a Tetris game and way more, with these tutorials you not only get a better JS understanding but you also have something to show off in your portfolio. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/ania_kubow?lang=en" rel="noopener noreferrer"&gt;Ania Kubow&lt;/a&gt; is an amazing teacher, who explains very well what she is building so I highly recommend following her on YouTube where all her videos and tutorials can be found. Good stuff I promise! &lt;/p&gt;

&lt;p&gt;&lt;a href="https://stefi.codes/Nokia3310-Snake/" rel="noopener noreferrer"&gt;Here's a demo of my Nokia Snake Game&lt;/a&gt; build with Ania's tutorial.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. JavaScript30
&lt;/h3&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%2Fyres582qsl981x86ph22.png" 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%2Fyres582qsl981x86ph22.png" alt="JS30 website screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://javascript30.com/" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Sign up for JavaScript30 here&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;To go through this course you have to already know the basics of JavaScript.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Repetition is the mother of learning. The more I code, the better I get at it which makes it seem easier. Therefore I signed up for JS30. It has 30 chapters/challenges which take between 30-60 min to complete. It won't involve any frameworks or libraries.&lt;/p&gt;

&lt;p&gt;I'm currently at 21/30 and I can tell you I've learned a lot of new things, understood better some concepts, and had fun too. &lt;/p&gt;




&lt;h3&gt;
  
  
  Bonus: A Beginners Guide To Pure CSS Images
&lt;/h3&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%2Fnv230lms80g7io3rx4f3.png" 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%2Fnv230lms80g7io3rx4f3.png" alt="Screenshot A Beginners Guide To Pure CSS Images article"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Checkout the beginners guide to pure css images here&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;CSS basic knowledge required.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;When browsing on &lt;a href="https://codepen.com/" rel="noopener noreferrer"&gt;Codepen&lt;/a&gt; I've kept seeing amazing art being created with only CSS. I looked at the code but was quite intimidated by it and thought I'd never be able to do something similar. One day I decided to look into it and searched for a  beginner’s guide. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/michaelmangial1?lang=en" rel="noopener noreferrer"&gt;Michael Mangialardi&lt;/a&gt; wrote a great intro guide on the topic. After following this I got a better basic understanding and tried to create a few myself like the one shared below. If you'd like to get started I recommend starting with this detailed explanation of how to create pure CSS images. It starts with an overview and then you will learn how to create a Koala in pure CSS in less than an hour. Total fun!&lt;/p&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%2Flr67m2ygaipzjit5tgs7.png" 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%2Flr67m2ygaipzjit5tgs7.png" alt="Screenshot Recurse Center Logo made with CSS"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Code at:  &lt;a href="https://codepen.io/stefi23/pen/poEpeNX" rel="noopener noreferrer"&gt;https://codepen.io/stefi23/pen/poEpeNX&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Communities:
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1.Codebar
&lt;/h3&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%2Fygfbmrsf79hud1rs1nyo.jpeg" 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%2Fygfbmrsf79hud1rs1nyo.jpeg" alt="codebar event"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://codebar.io/" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Checkout codebar here&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Codebar is a non-profit organization that facilitates the growth of a diverse tech community by running regular programming workshops in various cities around the world, currently running remotely. Besides their meetups, codebar has a very active Slack channel where you can ask for help on #helpdesk or find out about events as well as jobs. &lt;/p&gt;

&lt;p&gt;What I like about the community is how involved they are in helping minorities get into tech. They are all volunteers that offer their time to help people with code. They played  crucial role in journey becoming a developer. &lt;/p&gt;

&lt;p&gt;Sign up for the next codebar event either as a coach or student at &lt;a href="https://codebar.io/events" rel="noopener noreferrer"&gt;https://codebar.io/events&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. The Recurse Center
&lt;/h3&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%2Fwmxtudiah883poiu0fk1.png" 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%2Fwmxtudiah883poiu0fk1.png" alt="cover recurse center"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;RC is a free educational retreat for people who already know how to program, and for programmers of all experience levels. In oder to attend a batch you have to get through an application process and get accepted.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;It is quite hard to describe what doing a batch at the Recurse Center is like, I'd say it's a life-changing experience. I've learned and grew a tone! I can't even believe it. Of course, I wish I've done more but luckily I'm never graduating and the journey will continue 🐙&lt;/p&gt;

&lt;p&gt;At RC you are surrounded by programmers of all levels who program in different languages. You don't have any set curriculum and can work on any project you want or get into play with a technology you're curious about. The only goal is to become a better programmer by the end of it and along the way you will get  the support needed.&lt;/p&gt;

&lt;p&gt;The Recurse Center is a free 12-week programming retreat in New York where you can go to learn fun new things about programming. I've done a remote batch in Spring 2020. RC is about learning whatever interests you and allowing yourself to change your mind. As a junior, I've had a lot of pairing opportunities, got code reviews, was able to give a talk and learned a lot from my peers through various groups. Besides coding, we also had a feelings checking and job support group. &lt;/p&gt;

&lt;h3&gt;
  
  
  3.Coding Coach
&lt;/h3&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%2Ffh27q8lxz8ohdknebdnv.gif" 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%2Ffh27q8lxz8ohdknebdnv.gif" alt="Demo search on Coding Coach"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://mentors.codingcoach.io/" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Checkout Coding Coach here&amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Coding Coach is a free, open-source platform that aims to connect software developers and mentors all over the world. You can filter by technology, language and country. Once you have an account you can get the contact details and reach out to a mentor and ask if they are available to help. Here I've found a few wonderful coaches who offered their time for free to help me.&lt;/p&gt;




&lt;p&gt;There are other places where you can find communities for example on Twitter or there are various Discord channels, the one from Scrimba(free) or my favorite one &lt;a href="https://www.patreon.com/cassidoo" rel="noopener noreferrer"&gt;cassidoo's patron-only Discord chat&lt;/a&gt;(paid).&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>✨ 7 Tips &amp; tricks to make your console.log() output stand out</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Tue, 21 Sep 2021 08:45:51 +0000</pubDate>
      <link>https://dev.to/stefirosca/7-tips-tricks-to-make-your-console-log-output-stand-out-389g</link>
      <guid>https://dev.to/stefirosca/7-tips-tricks-to-make-your-console-log-output-stand-out-389g</guid>
      <description>&lt;h2&gt;
  
  
  1. Styling your console.log
&lt;/h2&gt;

&lt;p&gt;Is this necessary? Probably not, but if you want to leave an easter egg message on your portfolio website's console why not a styled one? You never know who is looking. Check out mine at &lt;a href="https://stefi.codes/" rel="noopener noreferrer"&gt;stefi.codes&lt;/a&gt;&lt;/p&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%2Fw58ftk8kyv6plfns3nhv.png" 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%2Fw58ftk8kyv6plfns3nhv.png" alt="Screenshot Easter Egg Personal Portfolio site"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To do this you would us the string substitution method that is explained below where you add a %c variable and then as the variable parameter add the styles as shown below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;console&lt;/span&gt;&lt;span class="nc"&gt;.log&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;
  &lt;span class="s1"&gt;"%cDebug with style with these console.log tricks"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
  &lt;span class="s1"&gt;"font-size:50px; background:#F9F9F9; color:#581845; padding:10px; border-radius:10px;"&lt;/span&gt;
&lt;span class="o"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;/p&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%2Fedbkcxccv47ncxvnufkk.png" 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%2Fedbkcxccv47ncxvnufkk.png" alt="Styled console.log example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Warning, Errors and Info
&lt;/h2&gt;

&lt;p&gt;Probably you've seen warning and errors in the console but didn't know how to add them. The info icon doesn't appear anymore therefore there is no visual difference between console.log and console.info in Chrome.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="c1"&gt;// 4. WARNING!&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;warn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;console.warn()&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// 5. ERROR :|&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;console.error()&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// 6. INFO&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;info&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;console.info()&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;/p&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%2F20940z66086kv738usgf.png" 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%2F20940z66086kv738usgf.png" alt="Demo Warning, Errors and Info"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This comes in handy as the browser allows you to filter based on these types.&lt;/p&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%2Fmzoubc63qqh8kjsi7ws6.png" 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%2Fmzoubc63qqh8kjsi7ws6.png" alt="Demo Filter to console.log"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Clear the console
&lt;/h2&gt;

&lt;p&gt;Need a clean console. Simply run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clear&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&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%2Ffe7zztyh4zkvr42luqfa.gif" 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%2Ffe7zztyh4zkvr42luqfa.gif" alt="Demo console.clear()"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Grouping things together together
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Expanded
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;group&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Console group example&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;One&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Two&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Three&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;groupEnd&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Console group example&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&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%2Fykao2y2wzo7kgd86wlen.png" 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%2Fykao2y2wzo7kgd86wlen.png" alt="Demo console group"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This can be helpful for example when looping through an object and wanting to show results in a more organized manner like below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dogs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Ashley&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Bruno&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hugo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt;

 &lt;span class="nx"&gt;dogs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;group&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`This is &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; is &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; years old`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; is &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; dog years old`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;groupEnd&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="p"&gt;});&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&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%2Fyc4pr9rbru1brl2gbbdo.png" 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%2Fyc4pr9rbru1brl2gbbdo.png" alt="Demo of console.group"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  2. Collapsed
&lt;/h3&gt;

&lt;p&gt;To get the same result but as a collapsed list you have to change &lt;code&gt;console.group&lt;/code&gt; to &lt;code&gt;console.groupCollapsed&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Output:&lt;br&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%2Fenx6eobgvp76e8m36y78.png" 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%2Fenx6eobgvp76e8m36y78.png" alt="Demo results collapsed"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  5. Keep count of console.logs
&lt;/h2&gt;

&lt;p&gt;The console.count() method can be useful if you'd like to know how many times a component was rendered or maybe how many times a function was called. If you want the counter to start over the countReset can be used.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="c1"&gt;// 11. COUNTING&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;one&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;one&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;one&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;two&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;three&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;two&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&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%2Fcdozrt8c2p80egzhgqdb.png" 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%2Fcdozrt8c2p80egzhgqdb.png" alt="Demo console.count()"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  6. Output arrays or objects as a table
&lt;/h2&gt;

&lt;p&gt;Organize the output of an object of array by using the &lt;code&gt;console.group()&lt;/code&gt; method.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="c1"&gt;// 13. TABLE for ARRAYS&lt;/span&gt;
 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dogs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
 &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Ashley&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
 &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Bruno&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
 &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hugo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
 &lt;span class="p"&gt;];&lt;/span&gt;

 &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cats&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Juno&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Luna&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Zoe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;      
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;table&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dogs&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
 &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;table&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cats&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&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%2Fxcfmxwpxz1yr6tq6se4z.png" 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%2Fxcfmxwpxz1yr6tq6se4z.png" alt="Demo console.group()"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  7. String Substitution &amp;amp; Template Literals
&lt;/h2&gt;

&lt;p&gt;Is String Substitution still used? For styling the console.log yes, but for other use case givewe can use template literals I don't think so. But here is how it do to it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;emoji&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;🙈&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;This %s is my favorite!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;emoji&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using string substitution might have been done to avoid having to use the + to add strings together.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;emoji&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;🙈&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;This &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;emoji&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt; is my favorite emoji&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With template literals on can easily output this as below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;emoji&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;🙈&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`This &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;emoji&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; is my favorite emoji`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;br&gt;
   To find additional console methods have a look at the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/console" rel="noopener noreferrer"&gt;MDN Web Docs.&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>🤺 7 Useful VS Code extension for junior web developers</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Thu, 16 Sep 2021 19:45:26 +0000</pubDate>
      <link>https://dev.to/stefirosca/7-useful-vs-code-extension-for-junior-web-developers-3pg5</link>
      <guid>https://dev.to/stefirosca/7-useful-vs-code-extension-for-junior-web-developers-3pg5</guid>
      <description>&lt;p&gt;In my early days of coding I used to get quickly frustrated when my code didn't run. It felt like I was doing everything right but the web app still didn't work. Mostly it was a silly mistake, some sort of typo, a missed comma, bracket or semicolon. This made me question my potential of becoming a developer. &lt;/p&gt;

&lt;p&gt;More experienced developers always had fancy extensions and in the beginning I felt quite nervous downloading any. I didn't see the value and I didn't want to add stuff that might break my current setup or that I didn't quite understand. &lt;/p&gt;

&lt;p&gt;With the extensions I share below I became a bit more productive and spend less time debugging. &lt;/p&gt;

&lt;h2&gt;
  
  
  1. Prettier
&lt;/h2&gt;

&lt;p&gt;This extension is a code formatter that you can set to automatically format your code on save. This will make it easier to read and write code as it removes unnecessary space and aligns everything well. &lt;/p&gt;

&lt;p&gt;It works with JavaScript, TypeScript, Flow, JSX, JSON, CSS , SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown and YAML.&lt;/p&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%2F2u0z8x742go3zqaanvfa.gif" 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%2F2u0z8x742go3zqaanvfa.gif" alt="Demo Prettier extension"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To make this extension format your code automatically on save you have to change this in settings as per the screenshot below.&lt;/p&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%2Fy1quup7fsar69nj2peh3.png" 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%2Fy1quup7fsar69nj2peh3.png" alt="Settings - automatically format your code on save"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Get Prettier here &amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Highlight Matching Tag
&lt;/h2&gt;

&lt;p&gt;This extension is useful to find matching opening and/or closing tags especially when having tags with a lot of tags inside.&lt;/p&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%2F68pwj26la1p0x9gare9z.png" 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%2F68pwj26la1p0x9gare9z.png" alt="Demo Highlight Matching Tag"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Get Highlight Matching Tag here &amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Auto Rename Tag
&lt;/h2&gt;

&lt;p&gt;Have you ever had to change maybe an h1 for an h3 or div for a ul? If so with this extension when you rename one HTML/XML tag, you can automatically rename the paired HTML/XML tag. Pretty useful I'd say.&lt;/p&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%2Ffnd8hsasvg654c8luvtj.gif" 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%2Ffnd8hsasvg654c8luvtj.gif" alt="Demo Auto Rename Tag"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Get Auto Rename Tag here &amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Error Lens
&lt;/h2&gt;

&lt;p&gt;A bit annoying at times as I don't finish typing and it tells me something is missing but found it super useful for those forgotten brackets or commas. It highlights errors visibly right in the line where something is not right.&lt;/p&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%2F9oefz8qzd865hs99ola6.png" 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%2F9oefz8qzd865hs99ola6.png" alt="Screenshot 2021-09-06 at 15.46.00"&gt;&lt;/a&gt;&lt;/p&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%2Fdo9n64p6nwz7jm8fj03s.png" 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%2Fdo9n64p6nwz7jm8fj03s.png" alt="Screenshot 2021-09-06 at 15.45.14"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Get Error Lens here &amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Live Server
&lt;/h2&gt;

&lt;p&gt;A helpful extension when working on static websites - HTML, CSS and JS and no framework as you won't have to reload every time you make a change. After each save it will be automatically reload the page.&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Get Live Server here &amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Sort Lines
&lt;/h2&gt;

&lt;p&gt;I'm not sure if one really needs this extensions but I've found that some people like to sort their CSS lines plus you look cool. Simply select the content you want to sort alphabetically and click: Keybound to F9 on a Mac.&lt;/p&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%2Fl4db11y7nb2jhtw3c3ik.gif" 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%2Fl4db11y7nb2jhtw3c3ik.gif" alt="Demo Sort Lines"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Bracket Pair Colorizer 2
&lt;/h2&gt;

&lt;p&gt;This extension highlights matching brackets with the same colour. This makes it easier to find a missing bracket. &lt;/p&gt;

&lt;p&gt;Demo without extension: &lt;br&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%2Ffxo0nkk0l7504u0xli6p.png" 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%2Ffxo0nkk0l7504u0xli6p.png" alt="Screenshot 2021-09-06 at 15.37.11"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Demo with extension:&lt;br&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%2Fxm2wrhdjrx71rq2bjdm0.png" 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%2Fxm2wrhdjrx71rq2bjdm0.png" alt="Screenshot 2021-09-06 at 15.41.07"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Although with the new VS Code update you could activate this functionality directly the IDE by setting the bracketPairColorization.enabled in the settings section.&lt;/p&gt;

&lt;p&gt;&lt;br&gt;
   &lt;a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" rel="noopener noreferrer"&gt;&amp;gt;&amp;gt;&amp;gt; Get Bracket Pair Colorizer 2 here &amp;lt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Bonus extensions&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" rel="noopener noreferrer"&gt;ESLint&lt;/a&gt; - super useful for debugging as well&lt;/li&gt;
&lt;li&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" rel="noopener noreferrer"&gt;ES7 React/Redux/GraphQL/React-Native snippets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" rel="noopener noreferrer"&gt;Material Icon Theme&lt;/a&gt; - makes your IDE more fancy looking&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" rel="noopener noreferrer"&gt;GitLens&lt;/a&gt; - helpful especially when working with others via source control&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Do you use other extensions that you find useful? Please add them in the comments below. &lt;/p&gt;

&lt;p&gt;Thank you!&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Hi there 👋</title>
      <dc:creator>Stefi Rosca</dc:creator>
      <pubDate>Sat, 11 Sep 2021 16:41:11 +0000</pubDate>
      <link>https://dev.to/stefirosca/hi-there-24da</link>
      <guid>https://dev.to/stefirosca/hi-there-24da</guid>
      <description>&lt;p&gt;My name is Stefi. I am a speciality coffee lover, skier, occasional longboard skater and someone who might spend way too much time watching YouTube videos. In the near future I'd like to finish a triathlon and share things I'm learning on my journey in tech online including on this platform.&lt;/p&gt;

&lt;p&gt;I come from Romania, Brasov and currently, I live in Spain, Barcelona. I'm quite introverted and I used think a lot about switching to tech.&lt;/p&gt;

&lt;p&gt;Asking myself often "Who Are You?" and "Are You You?" helped me keep going. These questions come from a mini series I've seen on &lt;a href="https://youtube.com/playlist?list=PLXYEaUHc07uZwOT63py0RTY8CKHOYnMaG" rel="noopener noreferrer"&gt;YouTube&lt;/a&gt;.&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%2Fzuq4hf2dt0b7a98xv3fi.jpg" 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%2Fzuq4hf2dt0b7a98xv3fi.jpg" alt="Shantell Martin asks, ‘Who are you?’" width="800" height="560"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My engineering journey started about two years ago. Although I didn’t pursue a computer science degree, I’ve naturally found my way to it. I’ve participated, hosted and presented at some tech meetups in Barcelona. &lt;/p&gt;

&lt;p&gt;For example, I've organized study sessions for the &lt;a href="https://www.facebook.com/groups/DevCBarcelona/" rel="noopener noreferrer"&gt;Facebook Developer Circle&lt;/a&gt; in Barcelona and in December 2019 I spoke ​at ​ &lt;a href="https://queerjs.com/paris/" rel="noopener noreferrer"&gt;​QueerJS​&lt;/a&gt; in Paris about &lt;a href="https://www.youtube.com/watch?v=kiK4bSfGOpc&amp;amp;ab_channel=QueerJS" rel="noopener noreferrer"&gt;The importance of community when transitioning to tech&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In addition to programming, I have over five years of experience in Digital Marketing and Communication roles.&lt;/p&gt;

&lt;p&gt;In my spare time I also enjoy reading, spending time with friends, and when restrictions allow, independent and adventurous travel!&lt;/p&gt;

&lt;p&gt;You can find me on &lt;a href="https://twitter.com/Stefania_Rosca" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;, &lt;a href="https://github.com/stefi23" rel="noopener noreferrer"&gt;Github&lt;/a&gt; or &lt;a href="https://www.linkedin.com/in/stefaniarosca/" rel="noopener noreferrer"&gt;Linkedin&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Nice to meet you 😊 &lt;/p&gt;

</description>
      <category>codenewbie</category>
      <category>womenintech</category>
      <category>introduction</category>
    </item>
  </channel>
</rss>
