<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Juan F Gonzalez </title>
    <description>The latest articles on DEV Community by Juan F Gonzalez  (@juanfrank77).</description>
    <link>https://dev.to/juanfrank77</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%2F76104%2F6d418cc0-5a74-4688-ac52-5f95bb9aa19c.png</url>
      <title>DEV Community: Juan F Gonzalez </title>
      <link>https://dev.to/juanfrank77</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/juanfrank77"/>
    <language>en</language>
    <item>
      <title>7 is the perfect number</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Fri, 06 Jun 2025 11:24:38 +0000</pubDate>
      <link>https://dev.to/juanfrank77/7-is-the-perfect-number-35lf</link>
      <guid>https://dev.to/juanfrank77/7-is-the-perfect-number-35lf</guid>
      <description>&lt;p&gt;Can you remember when you first started here on DEV?&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%2Fzy3317e7l3kxc07ipd1s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzy3317e7l3kxc07ipd1s.png" alt="7 years on DEV" width="800" height="522"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I can even though it's been quite long.&lt;/p&gt;

&lt;p&gt;I remember the first post I did, circa August 2018, was after I finished a short coding Bootcamp that I got into thanks to a friend.&lt;/p&gt;

&lt;p&gt;It's the first time I made a post of technical nature online in English (my second language).&lt;/p&gt;

&lt;p&gt;I still cringe a little reading it... But it was a stepping stone into technical writing (which I'd later find out it's quite difficult). &lt;/p&gt;

&lt;p&gt;I only started wanting to write &lt;em&gt;for real&lt;/em&gt; in January of 2020. Made 2 posts that month, couldn't keep up with a regular posting schedule and then you know what happened that year...&lt;/p&gt;

&lt;p&gt;With the extra time from being locked down at my home, I resumed the writing at the end of June and then kept going on posting (mostly) weekly for the rest of that year (and then the year afterwards).&lt;/p&gt;

&lt;p&gt;It's been quite a wild ride with all its ups and downs. &lt;/p&gt;

&lt;p&gt;And maybe it's time to come back here to post my learnings and experiences about my new undertaking in the World's Largest Hackathon of Bolt(dot)new.&lt;/p&gt;

</description>
      <category>dev</category>
      <category>writing</category>
      <category>meta</category>
    </item>
    <item>
      <title>Python Challenge Recap</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Sun, 20 Aug 2023 21:13:59 +0000</pubDate>
      <link>https://dev.to/juanfrank77/python-challenge-recap-g7b</link>
      <guid>https://dev.to/juanfrank77/python-challenge-recap-g7b</guid>
      <description>&lt;p&gt;Hello again, friend!&lt;/p&gt;

&lt;p&gt;I hope you had a great week in this mid-month of August.&lt;/p&gt;

&lt;p&gt;This time I come to present you my results of the learning challenge I started this past week.&lt;/p&gt;

&lt;p&gt;Let's get to it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Intro
&lt;/h2&gt;

&lt;p&gt;In case you are not aware, &lt;a href="https://dev.to/juanfrank77/how-long-would-it-take-you-to-learn-something-new-3go6"&gt;I threw around the idea&lt;/a&gt; of doing a challenge to show how long can it take to go from 0 to competent in a new language.&lt;/p&gt;

&lt;p&gt;In this case, I went with Python because I was at a total zero knowledge when it comes to it.&lt;/p&gt;

&lt;p&gt;And the whole goal was to learn enough of it to work on my first AI project and understand how LLM's work.&lt;/p&gt;

&lt;p&gt;But one thing is what you &lt;em&gt;plan&lt;/em&gt; to do and another one is what &lt;strong&gt;actually&lt;/strong&gt; happens.&lt;/p&gt;

&lt;p&gt;So, this is me telling you the "expectation vs reality" side of things.&lt;/p&gt;

&lt;h2&gt;
  
  
  What made the challenge harder
&lt;/h2&gt;

&lt;p&gt;A couple of things here made this experiment a real challenge.&lt;/p&gt;

&lt;p&gt;Like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Prior to this, I haven't touched a line of code in 2 years.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I only have experience in frontend development, nothing backend related.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I didn't do much prep work beforehand and I didn't know what I was getting myself into. (The only thing was asking an AI what would be the 80/20 of Python)&lt;br&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%2Fxir6km4nhit0fouh5szt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxir6km4nhit0fouh5szt.png" alt="Pareton of Python" width="800" height="370"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I never picked a real date to start with it and instead was kinda forced to do it by the circumstances.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I started it in a week where other projects, tasks, and due dates converged into. (This has been a pretty busy week...)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It reminds me of that saying, "when it rains, it pours".&lt;/p&gt;

&lt;p&gt;But I had to keep up with all of that regardless.   &lt;/p&gt;

&lt;h2&gt;
  
  
  What made the challenge easier
&lt;/h2&gt;

&lt;p&gt;This is the other side of the coin. &lt;/p&gt;

&lt;p&gt;These elements made the experiment less challenging.&lt;/p&gt;

&lt;p&gt;Like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Python is a very beginner friendly language. And many people say it's great for complete beginners to learn.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;There's a &lt;em&gt;lot&lt;/em&gt; of resources for learning and there are several "crash courses" on YouTube for it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Python is surprisingly similar to JavaScript. I found myself in many situations being like "hey, this is like X in JS!"&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The challenge was scoped. I was not trying to "become a master in Python". It was more directed to get productive and start building stuff with it.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And all of these balanced things out and helped me get a head start compared to other approaches.  &lt;/p&gt;

&lt;h2&gt;
  
  
  What ended up happening
&lt;/h2&gt;

&lt;p&gt;The expectation was to put around 2 hours every day to start learning and practicing. Also, to do all the prep needed like having Python installed and a dev environment properly set up.&lt;/p&gt;

&lt;p&gt;In reality... life happened.&lt;/p&gt;

&lt;p&gt;There was a big problem with my ISP on Monday afternoon. Where I live and other close towns lost the Internet, TV, and phone service. &lt;/p&gt;

&lt;p&gt;For more than 6 hours...&lt;/p&gt;

&lt;p&gt;I was offline after 4:40 PM until I went to bed at 10:30 PM.&lt;/p&gt;

&lt;p&gt;On Tuesday, I had several things to get caught up with and trying to finish what I couldn't the previous day.&lt;/p&gt;

&lt;p&gt;A couple of articles to post, projects to make progress on, and people to talk to both for work and personal stuff.&lt;/p&gt;

&lt;p&gt;On Wednesday, I was on a couple of meetings/webinars/and such. Kept making progress on work and several tasks.&lt;/p&gt;

&lt;p&gt;Later on, 2 technicians came over to check if the service was working and to change the router for a new one.&lt;/p&gt;

&lt;p&gt;It was until 5:30 PM that I could get a start to anything Python related. &lt;/p&gt;

&lt;p&gt;I went through 3 "crash courses" on YouTube to give me some context. At 1.75x speed (2x is too fast and couldn't understand anything).&lt;/p&gt;

&lt;p&gt;I also downloaded and installed Python on my laptop.&lt;/p&gt;

&lt;p&gt;On Thursday, there was more work, finishing stuff, live calls, and such.&lt;/p&gt;

&lt;p&gt;On the afternoon I picked back up the learning duties. But I was confused because it seemed like Python wasn't correctly installed. 🤔&lt;/p&gt;

&lt;p&gt;And it turns out... &lt;/p&gt;

&lt;p&gt;There's a version that can be installed from the Windows Store and there's the normal installer from the official Python website. &lt;/p&gt;

&lt;p&gt;Path conflicts ensued...&lt;/p&gt;

&lt;p&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%2Frcibp0u6g6687rmlnu54.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frcibp0u6g6687rmlnu54.png" alt="Expectation meme" width="617" height="615"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Uninstalling and reinstalling with custom options made it work. (Time that I spent &lt;em&gt;not&lt;/em&gt; learning the language.)&lt;/p&gt;

&lt;p&gt;On Friday, I was getting really anxious because it was very close to the weekend and my progress in this challenge was minimal. &lt;/p&gt;

&lt;p&gt;But since I made good progress in all the others tasks I had for the week, I could spend more time on the challenge.&lt;/p&gt;

&lt;p&gt;I continued reviewing parts of videos, doing exercises from Google's Python course, and learning how to use Colab Notebooks for more "real world" practice.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lessons learned
&lt;/h2&gt;

&lt;p&gt;I'm by no means an "expert" at this point. But looking at production-level Python code no longer looks like I'm trying to read German (which I know &lt;em&gt;nothing&lt;/em&gt; about it).&lt;/p&gt;

&lt;p&gt;I'm yet to learn more about those "list comprehensions" that look like a really nifty feature of the language. Also, tuples and sets are structures I have to practice more using.&lt;/p&gt;

&lt;p&gt;But now I know why the language is so popular. It's so versatile and it helps you do several things beyond "plain ol' software dev".&lt;/p&gt;

&lt;p&gt;I now know the difference between AI, machine learning, and data science. They overlap a lot and it's easy to confuse them. &lt;/p&gt;

&lt;p&gt;I have zero interest in linear regression, data visualization, statistics, and the research side. I rather be on the intersection between AI, algorithms, and user-facing products.&lt;/p&gt;

&lt;p&gt;I also didn't use AI to help me with any of this, it felt like cheating. I only used the approach I would've 1 or 2 years ago. &lt;/p&gt;

&lt;p&gt;(But imagine how farther could you go and how much you could accomplish if you used AI as part of the process.)&lt;/p&gt;

&lt;p&gt;And now, lesson &lt;strong&gt;for you&lt;/strong&gt;. Learning with an end in mind while ignoring the rest is the way to go.&lt;/p&gt;

&lt;p&gt;But &lt;a href="https://juanfrank.substack.com/" rel="noopener noreferrer"&gt;this kind of learning&lt;/a&gt; is more about mindset than aptitude or skill development at all.&lt;/p&gt;

&lt;p&gt;You'll have to get used with being uncomfortable, looking like a fool, and not knowing what you're doing at first.&lt;/p&gt;

&lt;p&gt;Before you can become competent and proficient faster than any of your peers.&lt;/p&gt;

&lt;p&gt;That's one thing you should write down and post it somewhere nearby.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;There you have it!&lt;/p&gt;

&lt;p&gt;Hope you've learned a thing or two that you can apply for future projects or experiments.&lt;/p&gt;

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

&lt;p&gt;I'll keep bringing you more ways to improve and &lt;a href="https://juanfrank.substack.com/" rel="noopener noreferrer"&gt;supercharge your learning.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Peace out!&lt;/p&gt;

&lt;h2&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%2Fwsdf8jzpur181gbce996.gif" alt="See ya" width="480" height="480"&gt; 
&lt;/h2&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@cdr6934?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText" rel="noopener noreferrer"&gt;Chris Ried&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/ieic5Tq8YMk?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>programming</category>
      <category>learning</category>
    </item>
    <item>
      <title>Diving into the serpentine end</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Mon, 14 Aug 2023 21:01:07 +0000</pubDate>
      <link>https://dev.to/juanfrank77/diving-into-the-serpentine-end-n8l</link>
      <guid>https://dev.to/juanfrank77/diving-into-the-serpentine-end-n8l</guid>
      <description>&lt;p&gt;Hello friend.&lt;/p&gt;

&lt;p&gt;If you've read my previous post, then you know what I'll be talking about.&lt;/p&gt;

&lt;p&gt;(&lt;em&gt;And if you haven't, now is a great time to do so...&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;I didn't know when to start that project because I felt like I needed to do more prepping or finish other stuff first.&lt;/p&gt;

&lt;p&gt;But this week looks like it's going to be the week for it. &lt;/p&gt;

&lt;p&gt;Particularly because I got accepted to an online course which is live. And I need to have some background knowledge about Python (for which I have absolutely none).&lt;/p&gt;

&lt;p&gt;So, from this Monday on, you'll see my attempt at going from &lt;em&gt;absolute zero&lt;/em&gt; to knowing enough to work on AI projects.&lt;/p&gt;

&lt;p&gt;And I don't mean this kind of absolute zero. 🥶&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%2Fstatic.wikia.nocookie.net%2Fomniversal-battlefield%2Fimages%2Fb%2Fbc%2FAbsolute_Zero_start.png%2Frevision%2Flatest%2F" 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%2Fstatic.wikia.nocookie.net%2Fomniversal-battlefield%2Fimages%2Fb%2Fbc%2FAbsolute_Zero_start.png%2Frevision%2Flatest%2F" alt="Absolute zero" width="685" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The challenge
&lt;/h2&gt;

&lt;p&gt;That's going to be from now, Monday 14 all the way to Saturday 19 of August.&lt;/p&gt;

&lt;p&gt;It'll be a learn and build kind of thing. &lt;/p&gt;

&lt;p&gt;By Sunday I should have something built that I can show. Even if it's something small and not too ambitious.&lt;/p&gt;

&lt;p&gt;Also, on that day, I'll be making another post like this with results and lessons learned from the challenge.&lt;/p&gt;




&lt;p&gt;That's pretty much it.&lt;/p&gt;

&lt;p&gt;I have a list of concepts &amp;amp; topics that I should learn first and a well laid out plan. All it needs now is some execution on my part.&lt;/p&gt;

&lt;p&gt;We'll see how it goes.&lt;/p&gt;

&lt;p&gt;Thanks for reading so far. &lt;/p&gt;

&lt;p&gt;I'll talk to you again on Sunday.&lt;/p&gt;

&lt;p&gt;Bye.&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%2Fyzr3crl5u9sto92bn03p.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyzr3crl5u9sto92bn03p.gif" alt="Bye" width="500" height="281"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@davidclode" rel="noopener noreferrer"&gt;David Clode&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/vb-3qEe3rg8" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>webdev</category>
      <category>writing</category>
    </item>
    <item>
      <title>How long would it take you to learn something new</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Mon, 31 Jul 2023 22:28:03 +0000</pubDate>
      <link>https://dev.to/juanfrank77/how-long-would-it-take-you-to-learn-something-new-3go6</link>
      <guid>https://dev.to/juanfrank77/how-long-would-it-take-you-to-learn-something-new-3go6</guid>
      <description>&lt;p&gt;Hello there, my friend.&lt;/p&gt;

&lt;p&gt;It's the end of July. The end of summer vacations for many people. And the start of the winds of August (well that used to be the case).&lt;/p&gt;

&lt;p&gt;Since many people start moving from summer break into the 2nd working half of the year and others start going back to their studies&lt;/p&gt;

&lt;p&gt;I think it's a good time to&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%2F0ciupxq9c7tplqh2q3e8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0ciupxq9c7tplqh2q3e8.gif" alt="Get back to work" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The origins
&lt;/h2&gt;

&lt;p&gt;Here's an interesting idea I had.&lt;/p&gt;

&lt;p&gt;I've talked at length before about many concepts &amp;amp; topics related to learning. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;From &lt;a href="https://tealfeed.com/4-powerful-steps-improve-learning-lhyl6" rel="noopener noreferrer"&gt;steps you can take to improve that process&lt;/a&gt;. &lt;/li&gt;
&lt;li&gt;Getting better not only in &lt;a href="https://blog.juanfgonzalez.me/getting-better-at-both-sides-of-the-stack" rel="noopener noreferrer"&gt;the technical aspect but also the personal one&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Powering up your &lt;a href="https://dev.to/juanfrank77/trying-to-learn-something-new-get-your-focus-on-first-4a57"&gt;learning with better focus&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;And making more progress with a &lt;a href="https://blog.juanfgonzalez.me/how-deliberate-practice-makes-you-an-epic-developer" rel="noopener noreferrer"&gt;different kind of practice&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But I realized that I've never &lt;em&gt;showed&lt;/em&gt; you how that plays out in the real world.&lt;/p&gt;

&lt;p&gt;Like how that would work for a new project/venture/endeavor.&lt;/p&gt;

&lt;p&gt;And so, I think that doing an experiment around it would be valuable for you to see how it works and also give you some ideas to try.&lt;/p&gt;

&lt;p&gt;Which brings me to this post's title...&lt;/p&gt;

&lt;p&gt;Here's a question for you...&lt;/p&gt;

&lt;p&gt;If you were to take on a new project or anything similar, &lt;em&gt;how long would it take you to go from zero knowledge to getting good results in that area?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Huh?&lt;/p&gt;

&lt;p&gt;Over the years, I've seen different timeframes. &lt;/p&gt;

&lt;p&gt;Ranging from a few weeks, 3 months, half a year, 8 months, a whole year, and so on.&lt;/p&gt;

&lt;p&gt;The important part here is not speed. It doesn't mean that someone is better than other just because is faster.&lt;/p&gt;

&lt;p&gt;It is not a general competition of who's better than who. After all, we're all in different stages of our journey and our wants and needs are different.&lt;/p&gt;

&lt;p&gt;The main thing here is improving over your &lt;em&gt;past self&lt;/em&gt;. Don't try to be better than some random person out there. &lt;/p&gt;

&lt;p&gt;Try and be better than &lt;strong&gt;you from a year ago&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This means, knowing what you know now, can you do something similar again and do it much better than before?&lt;/p&gt;

&lt;p&gt;It's not only about small gains either... I'm talking a real marked improvement. &lt;/p&gt;

&lt;p&gt;Let's say for instance, you were able to write and schedule 20 great social media posts in an hour. Can you do 40 equally great ones in 40 minutes or less?&lt;/p&gt;

&lt;p&gt;That might seem too much of a random example, so let me give you a real one.&lt;/p&gt;

&lt;p&gt;Back when I started writing online, I would take me 1 hour a day for an almost entire week to finish a blog post that's about 5 mins long.&lt;/p&gt;

&lt;p&gt;With more practice I could knock out a full one from start to finish in 1 hour per day for 3 days and then have it ready to post on the next day.&lt;/p&gt;

&lt;p&gt;Now, I can go from a mere idea to fully polished and ready to post in 2 hours. (True story, I did it last week.)&lt;/p&gt;

&lt;p&gt;That's the whole point. &lt;/p&gt;

&lt;p&gt;Not only doing &lt;em&gt;more&lt;/em&gt; of something. Instead, do more, much better, and in less time overall.&lt;/p&gt;

&lt;p&gt;But before you get to quality and volume, you first need to know what you're doing.&lt;br&gt;
Or in other words, need to be able to walk first before you can run.&lt;/p&gt;

&lt;p&gt;That's the general idea behind what I want to present to you.&lt;/p&gt;

&lt;h2&gt;
  
  
  The project
&lt;/h2&gt;

&lt;p&gt;My idea for &lt;em&gt;showing&lt;/em&gt; instead of only talking, is to show you how this different kind of learning (something I call "&lt;em&gt;&lt;a href="https://juanfrank.substack.com/" rel="noopener noreferrer"&gt;Supercharged Learning&lt;/a&gt;&lt;/em&gt;") works out there in practice. &lt;/p&gt;

&lt;p&gt;But...&lt;/p&gt;

&lt;p&gt;It won't be "just another random project". This will be more like a &lt;strong&gt;challenge&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Why a challenge, you may ask?&lt;/p&gt;

&lt;p&gt;Well, for starters, I've already done several of these experiments over the past years. And going over the same process would be pretty dull (for me at least).&lt;/p&gt;

&lt;p&gt;Doing a sort of "show and tell" and adding constraints would make it more interesting. With a time limit to make it actually challenging.&lt;/p&gt;

&lt;p&gt;And for that, I thought about this time doing a Python challenge.&lt;/p&gt;

&lt;p&gt;Here's how that would look like:&lt;/p&gt;

&lt;p&gt;Going from zero knowledge whatsoever about Python to getting good enough to make my first useful machine learning project. In one week. Part time. Alongside my other responsibilities.&lt;/p&gt;

&lt;p&gt;There will be a brief period of preparation, to gather resources and set out the stage, and then the week of the challenge. With a showcase of the results and then a brief review post with the good and the bad that happened.&lt;/p&gt;

&lt;p&gt;That's it in a nutshell.&lt;/p&gt;

&lt;p&gt;Is it clear enough?&lt;/p&gt;

&lt;p&gt;Do you have any additions or suggestions for it?&lt;/p&gt;

&lt;p&gt;Would you like to see something else or something different I didn't mention?&lt;/p&gt;

&lt;p&gt;Let me know your thoughts.&lt;/p&gt;




&lt;p&gt;That's it for now. I don't want to make this any longer than it needs to.&lt;/p&gt;

&lt;p&gt;As always, thanks a lot for reading so far.&lt;/p&gt;

&lt;p&gt;Keep on being awesome and see you again next time.&lt;/p&gt;

&lt;p&gt;Bye.&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%2Fzpf2ilk612qfxhsvp4ox.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzpf2ilk612qfxhsvp4ox.gif" alt="Bye" width="525" height="219"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>learning</category>
      <category>python</category>
      <category>development</category>
    </item>
    <item>
      <title>Happy DEV Anniversary!</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Fri, 02 Jun 2023 21:57:00 +0000</pubDate>
      <link>https://dev.to/juanfrank77/happy-dev-anniversary-1ed2</link>
      <guid>https://dev.to/juanfrank77/happy-dev-anniversary-1ed2</guid>
      <description>&lt;p&gt;Guess what happened yesterday?&lt;/p&gt;

&lt;p&gt;I received in my email one of those cool DEV messages giving me good news.&lt;/p&gt;

&lt;p&gt;I opened it up and this is what I found.&lt;/p&gt;

&lt;p&gt;...&lt;/p&gt;

&lt;p&gt;..&lt;/p&gt;

&lt;p&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%2Folqm0gst2rfeocubjf10.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Folqm0gst2rfeocubjf10.png" alt="DEV Anniversary" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I can't believe it's been 5 years. Time really flies!&lt;/p&gt;

&lt;p&gt;I first joined here before I even got my first developer job.&lt;/p&gt;

&lt;p&gt;I was just searching resources to learn UI and frontend development.&lt;/p&gt;

&lt;p&gt;And on October of that year, I accepted an offer to start working as a slightly more skilled junior developer.&lt;/p&gt;

&lt;p&gt;Since then, everything changed for me.&lt;/p&gt;

&lt;p&gt;I was a lurker here for the first years.&lt;/p&gt;

&lt;p&gt;In January of 2020 I decided to start writing to share knowledge and help more people not only on as a volunteer on the company I was working with back then.&lt;/p&gt;

&lt;p&gt;If it weren't for DEV, I would have spent more time fiddling around building my own blog and dealing with all the technical stuff instead of spending the time &lt;em&gt;actually&lt;/em&gt; writing.&lt;/p&gt;

&lt;p&gt;It has been a wild ride everything that has happened over the last years.&lt;/p&gt;

&lt;p&gt;And I will always be grateful to this wonderful community for giving me the start and helping me discover my love for writing online.&lt;/p&gt;

&lt;p&gt;Thank you all!&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%2Fri53m67snyuih6m9oti8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fri53m67snyuih6m9oti8.gif" alt="Appreciate you" width="268" height="268"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>wins</category>
      <category>webdev</category>
      <category>writing</category>
    </item>
    <item>
      <title>Don't get lost in the woods. Here, have a map</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Wed, 01 Feb 2023 17:51:30 +0000</pubDate>
      <link>https://dev.to/juanfrank77/dont-get-lost-in-the-woods-here-have-a-map-10j8</link>
      <guid>https://dev.to/juanfrank77/dont-get-lost-in-the-woods-here-have-a-map-10j8</guid>
      <description>&lt;p&gt;Welcome back and happy new year!&lt;/p&gt;

&lt;p&gt;2023 is upon us. There are many things that can happen, many that &lt;em&gt;we&lt;/em&gt; can make happen, and many that will invariably happen regardless.&lt;/p&gt;

&lt;p&gt;And since it's a new year, I can start writing about many topics in this and the following articles. &lt;/p&gt;

&lt;p&gt;But... &lt;/p&gt;

&lt;p&gt;I thought that instead of just getting started with those right out of the gate. &lt;/p&gt;

&lt;p&gt;I'd be doing you a disservice if I don't make it easy for you to find those previous articles. &lt;/p&gt;

&lt;p&gt;The ones that have had the greatest acceptance among folks and have helped some of them in their own learning journeys.&lt;/p&gt;

&lt;p&gt;So, if you want to get the kind of "tl;dr" of this blog, keep on reading. You'll find a map to navigate everything that's worthwhile here.&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%2Fsc3gfr84j1fi7gq3ievt.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsc3gfr84j1fi7gq3ievt.gif" alt="Using a map" width="400" height="256"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Web &amp;amp; personal dev in a nutshell
&lt;/h2&gt;

&lt;p&gt;Now, how this is going to work. I'll be grouping them in categories or "themes" and write a short description of them. Why they are important and why you should read them.&lt;/p&gt;

&lt;p&gt;There's also going to be a "miscellaneous" section. For those that can't quite fit other categories but they're still relevant or out of the ordinary in a way.&lt;/p&gt;

&lt;p&gt;So, let's get on with them!&lt;/p&gt;

&lt;h3&gt;
  
  
  Personal Development
&lt;/h3&gt;

&lt;p&gt;First things first, we start with the most important.&lt;/p&gt;

&lt;p&gt;This section is focused on &lt;strong&gt;you&lt;/strong&gt; as a person on how you can improve and be better.&lt;/p&gt;

&lt;p&gt;Because there's no point in having super-duper, ultra l33t haxxor skills, if you are a terrible person to deal with it and no one can stand you. &lt;/p&gt;

&lt;p&gt;And so, we start with the essentials first. Which, conveniently, I have an article on that&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/rediscovering-the-essentials-54ie"&gt;Rediscovering the essentials&lt;/a&gt;.  &lt;/p&gt;

&lt;p&gt;In this one, I talk about the 3 main concepts or "mental models" that have helped me many times in the past.&lt;/p&gt;

&lt;p&gt;These 3 are like the pillars from where everything else can built on top. In case you go to a transition in life or there's an abrupt change (like you know, a sudden pandemic...)&lt;/p&gt;

&lt;p&gt;After that, we move on to one of the most foundational building blocks, &lt;em&gt;habits&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/bad-habits-we-get-when-coding-and-how-to-break-them-2i3f"&gt;Bad habits and how to break them&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This is a short story of how I picked up a big number of bad habits while in college and my battle to overcome them.&lt;/p&gt;

&lt;p&gt;It also has practical actions you can take to break your bad habits and build more beneficial ones. Some of that advice is taken from one of my all-time favorite books.&lt;/p&gt;

&lt;p&gt;And once you have good habits in place, we move forward to put them in a working order. Starting with some proper routines. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/routines-our-different-operating-systems-1abk"&gt;Routines, our different operating systems&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Here you'll find what routines are, why they are important, a small peek into the operating system of the brain, and how to &lt;em&gt;actually&lt;/em&gt; implement all that into your own life. &lt;/p&gt;

&lt;p&gt;With all those things in place, you're in a much better position than the majority of people out there. (No, really, for sure.)&lt;/p&gt;

&lt;p&gt;What we can keep doing is keep piling up small improvements over and over to get better results. But as doing work is important, so is taking the time to properly rest &amp;amp; recover. &lt;/p&gt;

&lt;p&gt;Which leads me to... &lt;/p&gt;

&lt;p&gt;&lt;a href="https://blog.juanfgonzalez.me/making-good-progress-without-the-burnout" rel="noopener noreferrer"&gt;Making good progress minus the burnout&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This one comes from that time where I took the challenge to write a new article &lt;em&gt;each day&lt;/em&gt; for 5 days straight. &lt;/p&gt;

&lt;p&gt;In it, you'll find that approach I mention to make incremental progress without getting to that dreadful place others call "burnout".&lt;/p&gt;

&lt;p&gt;Lastly, I can't forget about this last one. I was a more "experimental" one and the few of those who got some peer feedback before getting published.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/trying-to-learn-something-new-get-your-focus-on-first-4a57"&gt;To learn something, get your focus on first&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In this one, you'll find one, &lt;em&gt;if not the most important&lt;/em&gt;, aspect of learning things quickly and efficiently. &lt;/p&gt;

&lt;p&gt;And I'm not going to spoil the article, so I'll leave it at that. 😆&lt;/p&gt;

&lt;h3&gt;
  
  
  Web Developmemt
&lt;/h3&gt;

&lt;p&gt;Now, we move on to the more commonly known form of development. &lt;/p&gt;

&lt;p&gt;There are several articles in this section. But only a handful were the most popular and valuable for others. &lt;/p&gt;

&lt;p&gt;So, here's that top selection for you.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/creating-a-new-project-with-no-design-skills-2oaf"&gt;Creating a new project, no design skills needed&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This one is for all those folks out there that are doing front-end web development. But they don't have any notions of what constitutes "good design". Fortunately, there are tools out there that helps us with it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/svelte-is-a-good-way-to-hone-your-web-dev-chops-49c9"&gt;Hone your dev chops with Svelte&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Speaking of front-end... &lt;/p&gt;

&lt;p&gt;The newest "kid on the block" of JavaScript, brings us all the good stuff of classic web development. &lt;/p&gt;

&lt;p&gt;And as well it gives us the opportunity to use that knowledge in real-world, production-ready framework. (This is even more relevant now that SvelteKit exists.)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/build-a-quote-switcher-with-vanilla-js-140o"&gt;Making a quote switcher with JavaScript&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And yes, speaking of classic web dev and JavaScript...&lt;/p&gt;

&lt;p&gt;Here's an example on how to build something pretty cool and functional without using any fancy frameworks or libraries that are popular out there. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/dailydotdev/level-up-your-git-workflow-3jio"&gt;Level up your git workflow&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;What is web development without a proper workflow for managing changes and updates to our projects? &lt;/p&gt;

&lt;p&gt;That's where Git comes into play. And although I've written about it in quite a few articles, this one is the one that stood out the most.&lt;/p&gt;

&lt;h3&gt;
  
  
  Misc
&lt;/h3&gt;

&lt;p&gt;In this section is where there are other articles who didn't make the cut in the previous two. But they're still useful and at least entertaining (maybe?)&lt;/p&gt;

&lt;p&gt;Like the first time I wrote an article for someone other than myself and was the beginning of me realizing that writing can actually be profitable.&lt;br&gt;&lt;br&gt;
(And not only used for knowledge sharing or personal reflection.)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/dailydotdev/stuck-in-tutorial-hell-here-s-a-way-to-breakout-j39"&gt;How to get out of "tutorial hell"&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In this one you'll find about that common scenario that most of us have found ourselves in some time here and there. And how to use some practical techniques to make sure that you can expand your knowledge out of the bubble of an online tutorial.&lt;/p&gt;

&lt;p&gt;Or the first time that I wrote an article recapping the events of the year. In a similar way to how development teams do after they finish a working sprint.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/2020-retrospective-240d"&gt;2020 Retrospective&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This one is just as the name implies. What happened in that year in a retrospective format. And a look to the future and possible events happening.&lt;/p&gt;

&lt;p&gt;Or the first time I got an article featured on Hashnode.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/can-you-learn-something-new-by-writing-5gpm"&gt;Learning something new by writing&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This is mainly a recap and lessons learned from my aforementioned 5-day writing challenge. &lt;br&gt;
And guess what? I wrote about 5 different lessons there. Kinda one per each day. Although I didn't plan to do it like that, it just happened that way. 😆&lt;/p&gt;

&lt;p&gt;And lastly, the article where I combined some of what I've talked in previous posted ones with some meta-learning and memory techniques. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/juanfrank77/make-learning-web-dev-easier-with-this-trick-4e2f"&gt;Learn web dev easier with this trick&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This one is pretty much what I said above about it. Even though it's geared towards learning web development, the "trick" works for other types of subjects. You just have to understand how it works so it can be applied to other areas.&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;And that's about it for this article. &lt;/p&gt;

&lt;p&gt;I think it went a little longer than expected. Then again, I wouldn't be surprised seeing that it has happened many times in the past with others as well. 😅&lt;/p&gt;

&lt;p&gt;But like I said at the beginning, this one was meant to give you a whole "overview" of what you can find in this blog. &lt;/p&gt;

&lt;p&gt;And is also to help surface some gems that are now buried in the sands of time (of previous years).&lt;/p&gt;

&lt;p&gt;Nothing left for me to say at this point. Other than thank you very much for the time you've spent reading this or any of the other articles posted in here. &lt;/p&gt;

&lt;p&gt;I really do hope that you've found some value in them and they have helped you in some way. &lt;/p&gt;

&lt;p&gt;Thank you for being awesome and I hope to catch you again next month!&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%2Flo17993nk2do230bjte6.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flo17993nk2do230bjte6.gif" alt="Bye bye" width="480" height="480"&gt;&lt;/a&gt; &lt;/p&gt;




&lt;p&gt;Photo by &lt;a href="https://unsplash.com/de/@tabeaschimpf?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText" rel="noopener noreferrer"&gt;Tabea Schimpf&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/9-xfYKAI6ZI?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>writing</category>
      <category>webdev</category>
      <category>personaldevelopment</category>
    </item>
    <item>
      <title>Looking back on this year</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Sat, 31 Dec 2022 17:32:12 +0000</pubDate>
      <link>https://dev.to/juanfrank77/looking-back-on-this-year-40g9</link>
      <guid>https://dev.to/juanfrank77/looking-back-on-this-year-40g9</guid>
      <description>&lt;p&gt;Hello, again my friend.&lt;/p&gt;

&lt;p&gt;We meet again one last time before the year ends.&lt;/p&gt;

&lt;p&gt;What a crazy year it's been right? &lt;/p&gt;

&lt;p&gt;A lot can happen in one year. Especially when you choose to make your path, pursue your interests, turn your curiosity into passion, and then go out there to seek it no matter where it takes you.&lt;/p&gt;

&lt;p&gt;Doing a recount of what happened this year would make this post pretty long, more than 10 mins to read. So in the interest of not rambling and instead giving some practical takeaways...&lt;/p&gt;

&lt;p&gt;I'm going to do a brief overview of the main hits of this year along with some lessons I learned that I hope and help you in the coming one.&lt;/p&gt;

&lt;p&gt;So, let's get on with it!&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%2Fjweu4vpydw00ris7ht8d.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjweu4vpydw00ris7ht8d.gif" alt="Let's go" width="414" height="252"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Beginning of the year
&lt;/h2&gt;

&lt;p&gt;In January, I don't remember why but I was really into health, fitness, improving my immune system and such. I was using most of my free time to read and learn about those topics.&lt;/p&gt;

&lt;p&gt;In the last week of that month is that I chose to quit my previous job before I got laid off (or worse).&lt;/p&gt;

&lt;p&gt;Since I started doing technical writing in mid-2020, I've been more interested in writing words on the internet instead of code that very few people will see, or have a positive impact on.&lt;/p&gt;

&lt;p&gt;And so, I went more on that writing route instead of the coding route.&lt;/p&gt;

&lt;p&gt;I posted one article in January and then had another one scheduled for February.&lt;/p&gt;

&lt;p&gt;But due to unforeseen events that happened, I missed the mark.&lt;/p&gt;

&lt;p&gt;I went live at the beginning of March instead...&lt;/p&gt;

&lt;p&gt;Why am I telling you all this?&lt;/p&gt;

&lt;p&gt;Because in that post I described what I thought my journey was headed towards.&lt;/p&gt;

&lt;p&gt;You can &lt;a href="https://blog.juanfgonzalez.me/jumping-into-the-not-so-unknown" rel="noopener noreferrer"&gt;read that one here&lt;/a&gt;. If you're curious or missed it at that moment.&lt;/p&gt;

&lt;h2&gt;
  
  
  Writing of different sorts
&lt;/h2&gt;

&lt;p&gt;In this part, I had to check emails from the first few months. Just so I can remember better what was happening back then 😅&lt;/p&gt;

&lt;p&gt;But yeah, throughout the year I reached out to some folks (and also got contacted by others) to do some guest posting and to create content for their platforms and communities.&lt;/p&gt;

&lt;p&gt;First, it was with the Aviyel community. I was able to contribute a post for them on different options of styling for React.&lt;/p&gt;

&lt;p&gt;The folks from Codespresso reached out and said if I wanted to repurpose some of my posts from DEV into "code shots". Small bite-sized pieces of code.&lt;/p&gt;

&lt;p&gt;I also got in contact with the Codiga people for an article about VSCode snippets and dev productivity. (That one didn't happen in the end).&lt;/p&gt;

&lt;p&gt;Around October or so, as luck would have it, I got in contact with the guy running the WonderShuttle studio.&lt;/p&gt;

&lt;p&gt;This time it was for Technical Ghostwriting. For my first assignment, I was to write a piece as if I was talking on behalf of the CEO of GitLab.&lt;/p&gt;

&lt;p&gt;The topic was about the advantages of open-source for a business model and how it could work for other big-scale tech companies.&lt;/p&gt;

&lt;p&gt;The end of that one was... quite peculiar I could say. It's a long story. In the end, the folks there replied, gave me feedback, and also paid me for the work.&lt;/p&gt;

&lt;p&gt;Can you imagine that?&lt;/p&gt;

&lt;p&gt;It was my first successful gig as a Technical Ghostwriter!!&lt;/p&gt;

&lt;p&gt;Plus a chance for continued work on other projects. (Which I'm hopeful can happen this coming year).&lt;/p&gt;

&lt;p&gt;And now...&lt;/p&gt;

&lt;p&gt;For the last kind of writing that I discovered this year...&lt;/p&gt;

&lt;p&gt;That one is called... &lt;em&gt;Copywriting&lt;/em&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%2Fqk53op4cbo100j1m4chu.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk53op4cbo100j1m4chu.gif" alt="What?" width="340" height="250"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's just say that was the kind of writing that I've put the most hours into since the start of March all to September.&lt;/p&gt;

&lt;p&gt;Boy, I never even anticipated how much my life would change by developing these writing skills.&lt;/p&gt;

&lt;p&gt;And what's cool is that it plays into my existing skills.&lt;/p&gt;

&lt;p&gt;Mainly my big o̶b̶s̶e̶s̶s̶i̶o̶n̶ interest in social psychology. Along with behavioral cues, personal development, and some tricks I picked up being a mentor in coding boot camps.&lt;/p&gt;

&lt;p&gt;I think here is where the first &lt;strong&gt;main&lt;/strong&gt; lesson comes into play.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Don't be afraid to explore other areas while you keep improving your skills. Lifelong learning is a journey that can take you places you wouldn't expect.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Leverageable skills and other goodies
&lt;/h2&gt;

&lt;p&gt;I always thought that programming skills would be my swiss army knife for all things delivering value and making a living out of it.&lt;/p&gt;

&lt;p&gt;After all, if you think about it.&lt;/p&gt;

&lt;p&gt;You can develop an app or site, deploy it, and have it running constantly with some maintenance. So you could leverage the time spent developing into recurring revenue each month. (Or so I thought).&lt;/p&gt;

&lt;p&gt;And after being in the tech industry for a little over 3 years...&lt;/p&gt;

&lt;p&gt;I realized how wrong I was.&lt;/p&gt;

&lt;p&gt;Most of the time, coding is the easy part.&lt;/p&gt;

&lt;p&gt;Communicating with stakeholders, prioritizing features, dealing with scope creep, working on different interdisciplinary teams, and so on. That's a &lt;em&gt;whole&lt;/em&gt; different story.&lt;/p&gt;

&lt;p&gt;Coding in general changes and evolves constantly. You have to catch up constantly and there are no certain things or repeatable patterns that you can take advantage of.&lt;/p&gt;

&lt;p&gt;In marketing, that is different.&lt;/p&gt;

&lt;p&gt;Why?&lt;/p&gt;

&lt;p&gt;Well, for starters human psychology has slightly changed for most of the time we've been living on this planet.&lt;/p&gt;

&lt;p&gt;And so, whatever it is that we build. We need to attract people's attention to it.&lt;/p&gt;

&lt;p&gt;The worse thing is spending a lot of time building something that no one cares about.&lt;/p&gt;

&lt;p&gt;So I think I put too much time into that and neglected the content I post in here monthly.&lt;/p&gt;

&lt;p&gt;Sorry...&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%2Fuuv0y5fa4i6ztsvnfueh.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuuv0y5fa4i6ztsvnfueh.gif" alt="Please forgive me" width="478" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  More kinds of development
&lt;/h2&gt;

&lt;p&gt;I wasn't completely out of the web development space. Although I dipped in and out of it a couple of times throughout the year.&lt;/p&gt;

&lt;p&gt;I also kept advancing further my self-development initiatives.&lt;/p&gt;

&lt;p&gt;Ones like...&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Joining &lt;strong&gt;Brian Johnson&lt;/strong&gt;'s Heroic platform.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Taking part in some fitness challenges.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Developing some relationships with people IRL.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Doing some traveling with whom were my friends at the time.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Several of those shenanigans kept happening until August.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quick side note: I used my writing skills to help a friend with a new job she got managing social media campaigns. It started well and I don't know who screwed up but it ended up being a mess. I didn't get paid for my time but I at least got some experience... writing on a language I'm not going to be using much&lt;/em&gt; 🤷‍♂️&lt;/p&gt;

&lt;p&gt;After that, I started writing on the Tealfeed platform and started refining the topics and areas I would be focusing on most for the rest of the year.&lt;/p&gt;

&lt;p&gt;I took my Twitter account and repurposed it for a new goal.&lt;/p&gt;

&lt;p&gt;To help other fellow knowledge workers to learn faster, more effectively, acquire new skills and be more confident performing in the workplace. Whether that is on a job, as a freelance, as a biz owner, indie hacker, or whatever else.&lt;/p&gt;

&lt;p&gt;And this is a good moment for another lesson learned.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The market is constantly changing. Some technologies come and go. New skill sets are now demanded. And for most people, having 1 job and 1 source of income is very risky.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  In Conclusion
&lt;/h2&gt;

&lt;p&gt;The last 3 months of the year were the ones with the most activity. I've done a bunch of different stuff. Explored many avenues. Found out that there's more hype than substance out there in every industry, not only the tech one.&lt;/p&gt;

&lt;p&gt;Found several things that don't work (or at least not for my situation). Found a few that do work. And in general, realized that simplicity in everything is the key.&lt;/p&gt;

&lt;p&gt;I went from having a full-time coding job to being a freelance writer and developer. To move more towards the indie hacker/solopreneurship road and now being set up with multiple income streams.&lt;/p&gt;

&lt;p&gt;It's been quite the ride.&lt;/p&gt;

&lt;h3&gt;
  
  
  Onwards to 2023
&lt;/h3&gt;

&lt;p&gt;For the new year, I want to double down on what has worked and little by little drop what hasn't.&lt;/p&gt;

&lt;p&gt;I plan on taking all the content that I've written here, on Twitter and elsewhere. And turn that into a course of effective learning.&lt;/p&gt;

&lt;p&gt;But not the traditional type of online course, noooo.&lt;/p&gt;

&lt;p&gt;I've done quite the amount of research this year to know that the traditional route won't cut it anymore.&lt;/p&gt;

&lt;p&gt;I also plan to create a newsletter where I can not only share some of the best stuff I've found and tried. But also to run learning experiments and share the progress on new ventures.&lt;/p&gt;

&lt;p&gt;Hopefully inspiring much more people to take the leap themselves and dare to do the awesome things they're capable of.&lt;/p&gt;

&lt;p&gt;And as for this personal blog. The "Web &amp;amp; Personal Dev" blog.&lt;/p&gt;

&lt;p&gt;It will keep living on.&lt;/p&gt;

&lt;p&gt;As I &lt;a href="https://blog.juanfgonzalez.me/moving-forward-to-the-future" rel="noopener noreferrer"&gt;mentioned in the previous post&lt;/a&gt;, I will keep writing about tech topics. But more on the &lt;em&gt;real&lt;/em&gt; practical side.&lt;/p&gt;

&lt;p&gt;That is, using technology to enhance, improve, protect, and change our lives. So far, AI and Cybersecurity are 2 topics on the top of my mind.&lt;/p&gt;

&lt;p&gt;And if you think about how I'm going to transition from Frontend development to those fields...&lt;/p&gt;

&lt;p&gt;Well, guess what?&lt;/p&gt;

&lt;p&gt;It's going to be a great opportunity and an experiment to put into practice those "effective learning" skills.&lt;/p&gt;

&lt;p&gt;Stay tuned if you want to know how that goes.&lt;/p&gt;




&lt;p&gt;Now congrats! You've arrived at the end of this post.&lt;/p&gt;

&lt;p&gt;Like I've said in the past 2 retrospectives I've done here, thanks for reading.&lt;/p&gt;

&lt;p&gt;Even if it's the first post you've read or you've been doing it the whole year.&lt;/p&gt;

&lt;p&gt;Keep on learning, keep on improving, and keep on growing as a person not only as a knowledge worker. There's so much to do, places to see, people to meet, and lives to change.&lt;/p&gt;

&lt;p&gt;Here's to the new year and bye-bye to the current one.&lt;/p&gt;

&lt;p&gt;Until next time...&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%2Fpcjaf03thpqnyyrhxp6m.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpcjaf03thpqnyyrhxp6m.gif" alt="Bye bye" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>yearinreview</category>
      <category>retro2022</category>
      <category>writing</category>
    </item>
    <item>
      <title>Make coding challenges surprisingly easy with these tips</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Fri, 30 Sep 2022 01:19:22 +0000</pubDate>
      <link>https://dev.to/juanfrank77/make-coding-challenges-surprisingly-easy-with-these-tips-515l</link>
      <guid>https://dev.to/juanfrank77/make-coding-challenges-surprisingly-easy-with-these-tips-515l</guid>
      <description>&lt;p&gt;Hello friend!&lt;/p&gt;

&lt;p&gt;Welcome to another post about... well you kinda already know what is from the title.&lt;/p&gt;

&lt;p&gt;This time we're going to talk about how to tackle coding in general in a different way so that it doesn't look like that big and scary challenge.&lt;/p&gt;

&lt;p&gt;Having said that, let's begin!&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%2F9o2g6ewoanx2990zztw1.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9o2g6ewoanx2990zztw1.gif" alt="let's get into it" width="500" height="281"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Intro
&lt;/h2&gt;

&lt;p&gt;Programming sometimes can be a mind-bogglingly difficult task. Trying to figure out the right way to write code can be frustrating and can lead to us getting stressed out. &lt;/p&gt;

&lt;p&gt;But don’t let that stop you; the more you learn about it, the better you’ll become. &lt;/p&gt;

&lt;p&gt;So how do we get better at it? Well, there are many ways; from how we prepare, to the specific programming languages we use. But in here I want to share with you some effective ways to become a better programmer in much less time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Jump-start from the beginning
&lt;/h2&gt;

&lt;p&gt;There are many ways to jump start from the very beginning. One way is to define what's that you want to do first. Having an aim of what you want to do in the future is better than picking a language only because it's "popular".&lt;/p&gt;

&lt;p&gt;Sure, there are multipurpose languages that you can learn, but some are better suited for specific tasks than others. &lt;/p&gt;

&lt;p&gt;For example, JavaScript has always been popular because it's the language of the web. But other very popular ones are PHP and Java. &lt;/p&gt;

&lt;p&gt;This are tried and tested languages that have proven to be functional and reliable and have their use in the backend.&lt;/p&gt;

&lt;p&gt;Something else you can do is to start learning right from your browser. You don't need to have a full developer environment to get started learning a language. &lt;/p&gt;

&lt;p&gt;Some languages have tutorials online that you can get started with without installing anything on your computer. &lt;/p&gt;

&lt;p&gt;For instance, you can &lt;a href="https://try.ruby-lang.org" rel="noopener noreferrer"&gt;learn Ruby online&lt;/a&gt; and you can also &lt;a href="https://www.tryhaskell.org" rel="noopener noreferrer"&gt;learn Haskell online&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Once you've learned the basics of the languages, you can start building programs with them and see if it makes sense to you. &lt;/p&gt;

&lt;p&gt;If for some reason you feel the language — whether is the syntax, the structures, or something else — is too abstract or obtuse for your mind to grasp, you can try a different one and see if vibes along better with you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Write code early and often
&lt;/h2&gt;

&lt;p&gt;One of the best ways to get better at programming is to write code. That doesn’t mean, however, that you need to sit at your computer and scribble out your next computer program from start to finish.&lt;/p&gt;

&lt;p&gt;While this does indeed work, it takes a long time, and you don’t really learn anything. Instead, write code often. This can include taking a sample program from a tutorial and adapting it to your needs. &lt;/p&gt;

&lt;p&gt;You could also write a program that automates repetitive tasks &lt;a href="https://www.youtube.com/watch?v=1F_OgqRuSdI&amp;amp;list=PL0-84-yl1fUnRuXGFe_F7qSH1LEnn9LkW" rel="noopener noreferrer"&gt;using python for example&lt;/a&gt;, or a write program that searches the internet for certain information and then log the results. &lt;/p&gt;

&lt;p&gt;Next time you have a practice session you can take some of your programs and modify them. Add extra features or change the functionality of existing ones.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reflection is key
&lt;/h2&gt;

&lt;p&gt;When learning to code, it’s important to be mindful of everything you are doing. This includes every choice you make, every action you take, and &lt;a href="https://www.youtube.com/watch?v=OMOGaugKpzs" rel="noopener noreferrer"&gt;&lt;em&gt;every breath you take&lt;/em&gt;&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Well... maybe not, don't take it that far 😅&lt;/p&gt;

&lt;p&gt;The reflection part is important when you start developing your skills. This is because as you start to become better at coding, you will naturally become more confident. &lt;/p&gt;

&lt;p&gt;That, however, doesn’t mean that you have to become arrogant. Instead, you need to build on that confidence and become aware that the more you learn, the more you realize that there are much more things to learn. &lt;/p&gt;

&lt;p&gt;This is &lt;a href="https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect" rel="noopener noreferrer"&gt;something quite common&lt;/a&gt; not just in coding.&lt;/p&gt;

&lt;p&gt;As you become better at it some things are going to become automatic and you won't pay them much attention. That's a common source of bugs later on. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I've been searching for hours what the error might be and haven-t find it...&lt;br&gt;
Ahh... I see now, I forgot a semicolon...&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;There are some things that might seem dumb at first but usually that's where you have to look.&lt;/p&gt;

&lt;h2&gt;
  
  
  Be curious about new things
&lt;/h2&gt;

&lt;p&gt;New advances in development are always coming about every month or so. &lt;/p&gt;

&lt;p&gt;This includes what new frameworks pop out, what programming languages are now used, or what will be the tooling of the future. &lt;a href="https://ziglang.org" rel="noopener noreferrer"&gt;Zig language&lt;/a&gt; doing rounds out there am I right?&lt;/p&gt;

&lt;p&gt;When it comes to learning coding, try to be curious about new things. This can include what people are saying about new tools, what new trends are in the coding industry, and what programming languages will be important in the future. &lt;/p&gt;

&lt;p&gt;By being curious about new things, you can have an easier time going about the learning process and don't get stuck on just one topic. &lt;/p&gt;

&lt;p&gt;That, in turn, will allow you to pivot to something else that you might find more enjoyable (or profitable). &lt;/p&gt;

&lt;p&gt;Curiosity is not only a powerful motivator but also a good way to direct your learning.&lt;/p&gt;

&lt;h2&gt;
  
  
  Don't Stop Learning
&lt;/h2&gt;

&lt;p&gt;It’s important to remember that no matter how confident you are in your programming skills, you are not done learning.&lt;/p&gt;

&lt;p&gt;That doesn’t mean you will forever be a novice programmer, or that you will never be able to write a correct program from the start. &lt;/p&gt;

&lt;p&gt;It simply means that you're on the continuous path of lifelong-learning and you will always have the chance to improve.&lt;/p&gt;

&lt;p&gt;But this shouldn't discourage into thinking that is a waste of time to try to learn something that will never end. &lt;/p&gt;

&lt;p&gt;Instead, see it as a way to become a more skilled professional and a much better person that your previous self. &lt;/p&gt;

&lt;p&gt;By being a student for life and putting in the practice sessions, you can keep developing your coding skills, while also having fun in the process.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;There are many ways to become better at coding, and we have outlined just a few in this post. &lt;/p&gt;

&lt;p&gt;Pick a language you aren’t as familiar with, write code often, reflect on what you do, be curious about new things, and don’t stop learning. &lt;/p&gt;

&lt;p&gt;These tips will allow you to become better at coding more efficiently and get more done at work as a result. &lt;/p&gt;

&lt;p&gt;Keep in mind, however, that good programming takes time. It’s okay to take a break from coding and come back to it when you have more time.&lt;/p&gt;

&lt;p&gt;It’s also okay to take a step back and think about what you are doing. This can help you become more aware of how and why you are coding, and how you can get better at it.&lt;/p&gt;




&lt;p&gt;That's it for this post! Thanks for reading all the way here (if you made it all the way here that is...)&lt;/p&gt;

&lt;p&gt;Hope these tips are useful so you can apply them to your own coding journey.&lt;/p&gt;

&lt;p&gt;If you have any questions or comments, let me know and &lt;a href="https://twitter.com/juanfrank77" rel="noopener noreferrer"&gt;let's talk about it!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;See you next time.&lt;/p&gt;

&lt;h2&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%2Fdvpbd022cpu5twc93v32.gif" alt="Bye bye" width="480" height="320"&gt;
&lt;/h2&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@ricaros" rel="noopener noreferrer"&gt;Danial Igdery&lt;/a&gt; on &lt;a href="https://unsplash.com/s/photos/coding" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>coding</category>
      <category>learning</category>
    </item>
    <item>
      <title>How Deliberate Practice makes you an epic developer</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Wed, 31 Aug 2022 23:27:24 +0000</pubDate>
      <link>https://dev.to/juanfrank77/how-deliberate-practice-makes-you-an-epic-developer-nc6</link>
      <guid>https://dev.to/juanfrank77/how-deliberate-practice-makes-you-an-epic-developer-nc6</guid>
      <description>&lt;p&gt;Well hello there. Long time no see.&lt;/p&gt;

&lt;p&gt;Yeah, I know. I've been the one who went missing for quite a while. &lt;/p&gt;

&lt;p&gt;But I had to return regardless of the situation or whatever obstacles I found in the way. &lt;/p&gt;

&lt;p&gt;And I'm back with recharged enthusiasm and more practical things to share.&lt;/p&gt;

&lt;p&gt;With that being said, let's get on with this article!&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%2Fpkmwy762hd5acq47i9ds.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpkmwy762hd5acq47i9ds.gif" alt="Let's get it" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Software development is a highly competitive field. If you want to succeed in this field, you need to be able to code. But software development is also a field that is constantly in change. &lt;/p&gt;

&lt;p&gt;If you want to grow as a competent software developer and make sure that can perform properly, you have to work on your skills. Not doing it only because "certain department said so" but doing it constantly to keep your skills sharp and ready to use.&lt;/p&gt;

&lt;p&gt;Best way to do this? Two words: Deliberate Practice. &lt;/p&gt;

&lt;h2&gt;
  
  
  What is deliberate practice?
&lt;/h2&gt;

&lt;p&gt;Deliberate practice is a method of learning that is specifically designed to improve your performance. It involves working on your skills with the intention of becoming better at them. Deliberate practice is different from normal practice in that it is specifically focused on improving your performance. &lt;/p&gt;

&lt;p&gt;Deliberate practice is also different from learning new things. When you learn new things, you are trying to acquire new knowledge or understanding. &lt;/p&gt;

&lt;p&gt;With deliberate practice, you are trying to improve your performance by developing new mental representations that let you do things you weren't able to do before.&lt;/p&gt;

&lt;p&gt;It allows you to see on a general scale your strengths and weaknesses. With it, you can know what areas you're competent in and identify others where you need to improve. It also helps to keep your goals in mind and know if you're moving closer towards them. &lt;/p&gt;

&lt;p&gt;Plus, it helps you to make sure you are practicing in a way that's most effective. &lt;/p&gt;

&lt;p&gt;Deliberate practice is not easy and it takes much more effort than traditional practice. It will be uncomfortable and not always feel rewarding and fun. &lt;/p&gt;

&lt;p&gt;The good part? &lt;/p&gt;

&lt;p&gt;It will help you improve faster than usual. You'll get to a point where you'll be amazed at the things you can create. You can afterwards look at previous projects and be like "damn, did I do that myself?"&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%2Fcthhvmw2fy90ftsbtzph.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcthhvmw2fy90ftsbtzph.gif" alt="Whoa" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Why is deliberate practice important?
&lt;/h2&gt;

&lt;p&gt;Aside from the already mentioned benefits above, deliberate practice has one characteristic that separates it from other kinds of practice... &lt;/p&gt;

&lt;p&gt;Allowing you to do things that you previously thought were not possible. &lt;/p&gt;

&lt;p&gt;You might think, isn't that what regular practice does in general? &lt;/p&gt;

&lt;p&gt;Not exactly. The regular type of practice we were taught in school or college, was pretty much "repeat the thing over and over until you know how to do it in that &lt;em&gt;specific&lt;/em&gt; context".&lt;/p&gt;

&lt;p&gt;In contrast, deliberate practice allows you to have a better view of what you're good at (maybe because of previous knowledge or natural affinity) and what you truly suck at.&lt;/p&gt;

&lt;p&gt;Talking about software development, most people I know of have only one of the things mentioned above (natural affinity). This makes learning the craft a rather difficult process compared to other areas of human skill.&lt;/p&gt;

&lt;p&gt;But the important part here is... &lt;/p&gt;

&lt;p&gt;It'll help you improve faster and deliver greater quality of work. &lt;/p&gt;




&lt;h2&gt;
  
  
  How to go about doing deliberate practice
&lt;/h2&gt;

&lt;p&gt;Since this type of practice is structured and intentional in its way of doing things, there are certain aspects that are necessary to take into account when doing it.&lt;/p&gt;

&lt;p&gt;This involves setting specific goals, breaking down the task into smaller components, getting feedback, and gradually increasing the difficulty of the task. &lt;/p&gt;

&lt;p&gt;More specifically, these is what you need to keep in mind when doing deliberate practice:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Set specific goals. What do you want to achieve with your practice? Make sure that your goals are challenging but achievable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Break down the task into smaller components. This will help you focus on one specific aspect at a time and make it less overwhelming.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Get feedback from a trusted source. This could be a mentor, coach, or even just a friend who is willing to give you honest feedback.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Gradually increase the difficulty of the task. This will help you push yourself and avoid getting stuck in a rut.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That is a more detailed roadmap of the steps you have to take to make sure you're having actual progress instead of rote repetition that "feels" like you're accomplishing something.&lt;/p&gt;

&lt;p&gt;If you keep these steps in mind, you can make real progress in your development career and progress much faster while creating awesome things in the process. &lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Deliberate practice is a skill that is invaluable for all of us as software developers. It is the process of actively working on a skill to improve and refine it. &lt;/p&gt;

&lt;p&gt;It works better when we are consistent with it and devote at least an hour a day for it. Even though it helps us progress faster than usual, it still takes some time for it to be effective. There's no "magic pill" or "overnight success's" here.&lt;/p&gt;




&lt;p&gt;There you have it. How you can become an epically skilled developer by applying deliberate practice in your learning process.&lt;/p&gt;

&lt;p&gt;If you came all the way down here, I appreciate you 🤗&lt;/p&gt;

&lt;p&gt;Thanks a lot for reading. Hope it was clear and useful. If you any questions about this I'm always happy to help. Shoot them &lt;a href="https://twitter.com/juanfrank77" rel="noopener noreferrer"&gt;my way&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Take care and see you in the next one.&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%2Fsihwkbpid4zotcarmpmp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsihwkbpid4zotcarmpmp.gif" alt="Goodbye" width="335" height="200"&gt;&lt;/a&gt; &lt;/p&gt;




&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@brett_jordan" rel="noopener noreferrer"&gt;Brett Jordan&lt;/a&gt; on &lt;a href="https://unsplash.com/s/photos/practice" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>learning</category>
      <category>writing</category>
    </item>
    <item>
      <title>Make learning web dev easier with this trick</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Tue, 21 Jun 2022 13:35:37 +0000</pubDate>
      <link>https://dev.to/juanfrank77/make-learning-web-dev-easier-with-this-trick-4e2f</link>
      <guid>https://dev.to/juanfrank77/make-learning-web-dev-easier-with-this-trick-4e2f</guid>
      <description>&lt;p&gt;Hello there friend.&lt;/p&gt;

&lt;p&gt;In this post I want to tell you about a memory trick I've been using since my college days but haven't really put all the pieces together before.&lt;/p&gt;

&lt;p&gt;I've been using in different situations to learn all kinds of stuff. From web dev, to psychology, neuroscience, social dynamics, body language, mindset, fitness, physical performance, health improvement and so on.&lt;/p&gt;

&lt;p&gt;Lately, I came across a video that put words to those notions I have and helped me made the connections necessary so I can now explain that intuition to friends and others.&lt;/p&gt;

&lt;p&gt;So let's get on with it shall we?&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%2F187hql9goau7em8ks2l8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F187hql9goau7em8ks2l8.gif" alt="Let's do it" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Intro
&lt;/h2&gt;

&lt;p&gt;Now suppose you are on your web development journey and you want to further improve your skills in creating better looking layouts for websites.&lt;/p&gt;

&lt;p&gt;You already know well your HTML and CSS chops and you want to take things up notch.&lt;/p&gt;

&lt;p&gt;You can look into a CSS preprocessor like SASS or Stylus. Or you can check out a styling framework like Bootstrap or Bulma.&lt;/p&gt;

&lt;p&gt;Or you might want to go more into the spec and strengthen your Flexbox or Grid muscles.&lt;/p&gt;

&lt;p&gt;Regardless of what you decide to use, the process is going to be very similar. &lt;/p&gt;

&lt;p&gt;You read the docs or watch a tutorial, see how it works, get acquainted with the basics and might even start making some things on your own to go from "passive learning" to a more "active" one.&lt;/p&gt;

&lt;p&gt;But of course, you have a pretty limited base of knowledge to start making things with so you constantly go back to the docs or to that super-duper tutorial you learned from and re-watch what you have missed or forgot about.&lt;/p&gt;

&lt;p&gt;And this happens even to the best of us when we want to recall something we don't use often or we did some time ago and never had to pick up again. &lt;/p&gt;

&lt;p&gt;We may miss something or misplace the order of variables or even change the name of functions altogether. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;"What was that function for separating arrays called? Slice? Splice? Split?.... Hmm..."&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;Or it happens when you're using Markdown syntax and can't remember how is it that a link can be embedded within the text. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;"Was it brackets first and then parentheses or the other way around?"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;"Hmm let's see… (this is a link)[&lt;a href="https://twitter.com%5D" rel="noopener noreferrer"&gt;https://twitter.com]&lt;/a&gt;"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;"... Dammit! that didn't work… Oh well"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;That can certainly be frustrating when you encounter some things that it doesn't matter how many times you've used them in the past. You can't remember how is it properly used…&lt;/p&gt;

&lt;p&gt;(Yeah, I'm looking at you RegEx...😒)&lt;/p&gt;

&lt;p&gt;Definitely some subjects are more involved than others, but it feels like some that are supposedly "easy" just come and go and don't really stick into the mind.&lt;/p&gt;

&lt;p&gt;And then when you want to recall what you learned to apply it in a project or somewhere else, your brain just gives you a 404 "topic not found" error.&lt;/p&gt;

&lt;p&gt;...&lt;/p&gt;

&lt;p&gt;Don't you just wish you could download the subject into your brain and be able to start using it?&lt;/p&gt;

&lt;p&gt;You know, kind of like in The Matrix.&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%2Fxc4arew6sgb0y88d2uij.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxc4arew6sgb0y88d2uij.gif" alt="I know kung fu" width="1024" height="1024"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While we can't do that just yet, there's something we can do to approximate that effect.&lt;/p&gt;

&lt;p&gt;But before we do that, let's look at why we have difficulty remembering in the first place.&lt;/p&gt;

&lt;h2&gt;
  
  
  The inner workings of "working memory"
&lt;/h2&gt;

&lt;p&gt;Working memory is a temporary storage that we have in the brain and it allows us to store and manipulate information that we are working with in the moment. &lt;/p&gt;

&lt;p&gt;For instance, when your doing mental math you can "see" the numbers in your mind and use them to come up with the result of the calculation. &lt;/p&gt;

&lt;p&gt;Or you also use it when someone tells you a phone number and you remember it until you write it down.&lt;/p&gt;

&lt;p&gt;Think about it as a temporal storage that you use to hold information relevant to the problem(s) that you are dealing with. &lt;/p&gt;

&lt;p&gt;Said it in another way, it's a "hot" data storage. Whereas your long-term memory is the "cold" data storage. &lt;/p&gt;

&lt;p&gt;What's interesting about this is that working memory is a "multi-compartment" system. It can hold different types of data that we may need, not just numbers.&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%2Fwww.simplypsychology.org%2FWorking%2520Memory2.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%2Fwww.simplypsychology.org%2FWorking%2520Memory2.jpg" alt="Working memory model" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.simplypsychology.org/working%20memory.html" rel="noopener noreferrer"&gt;Source&lt;/a&gt; &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It has a section dedicated with the "visual side" which is what allows to see things in the "mind's eye". Another section is dedicated to the "auditory side" which some people use to remember info by repeating it to themselves (like a phone number or an important history date).&lt;/p&gt;

&lt;p&gt;And it has a "central executive" part which is the responsible for coordinating the processes of the other sections and communicating with long-term memory (the "cold storage" remember?)&lt;/p&gt;

&lt;p&gt;Now, this storage is usually limited to about 7 +/-2 units or digits. This is one of the reasons that we can remember cellphone numbers but not something like a credit card number.&lt;/p&gt;

&lt;p&gt;The way you can sidestep this limitation is by grouping together digits or pieces of information into single units. &lt;/p&gt;

&lt;p&gt;Using this "chunking" process, you no longer remember a number like 300358249 digit by digit but instead remember it like: 300, 358, 249. &lt;/p&gt;

&lt;p&gt;This way we've only used 3 units of memory instead of nine!&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%2Fhruryzde0rdliclaazdq.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhruryzde0rdliclaazdq.gif" alt="Mindblown" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And we can take it a step further by associating groups of numbers with an image or object and then we just hold 3 images in memory which we use to retrieve the entire number in order.&lt;/p&gt;

&lt;p&gt;This is one of the ways that memory masters use to remember seemingly "impossible" things. (Like, you know, &lt;a href="https://www.youtube.com/watch?v=mI96Ph-yHcA" rel="noopener noreferrer"&gt;the first 100 digits of Pi&lt;/a&gt;.)&lt;/p&gt;

&lt;p&gt;What's awesome about this is that you are basically &lt;em&gt;compressing&lt;/em&gt; information that you can save for future use and when it's time to use it, you take it back and &lt;em&gt;extract&lt;/em&gt; the contents. &lt;/p&gt;

&lt;p&gt;It's like using a zip folder. &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%2Fseeklogo.com%2Fimages%2FW%2Fwinzip-logo-065E9E9282-seeklogo.com.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fseeklogo.com%2Fimages%2FW%2Fwinzip-logo-065E9E9282-seeklogo.com.png" alt="Win Zip " width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, knowing how this "memory compression" thing works, let's see how you can take advantage of it to store important concepts in your memory while on your learning process.&lt;/p&gt;

&lt;h2&gt;
  
  
  The memory trick explained
&lt;/h2&gt;

&lt;p&gt;The trick is essentially to create your own &lt;em&gt;developer cheat-sheets&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Ta-da!&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%2Fwkjbf2q60mhibtim2kfq.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwkjbf2q60mhibtim2kfq.gif" alt="Ta-da" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But, bear with me on this. &lt;/p&gt;

&lt;p&gt;You might think "why would I need to make &lt;em&gt;another&lt;/em&gt; JavaScript cheat-sheet when there are tons out there in the internet?"&lt;/p&gt;

&lt;p&gt;There are a couple of reasons why that you might not be aware of right now, so allow me to tell you.&lt;/p&gt;

&lt;p&gt;You gotta make that cheat-sheet in a sheet of paper about the A4 size. Everything that you can fit in there is the most relevant stuff that you need to know or have a hard time remembering.&lt;/p&gt;

&lt;p&gt;We can go a step further with the "compressing information" process and use all sorts of strategies like mnemonics, small drawings, key facts, rhymes and such to take concepts and reduce them to a small portion and fit them into the sheet of paper.&lt;/p&gt;

&lt;p&gt;By doing this, you're "actively" engaging with the material and getting your brain to process it. Doing it well enough to reduce the nonessential and stick with the important pieces. &lt;/p&gt;

&lt;p&gt;Later,  creatively turn those pieces into a mental representation that you can sketch or write and fit into the paper.&lt;/p&gt;

&lt;p&gt;You can also use location as a way to remember the concepts better. &lt;br&gt;
(e.g., put the mnemonics or images in the order you learned them so you know what goes after what and even create some form of storytelling between all of them.)&lt;/p&gt;

&lt;p&gt;And by using a smart layout, or other creative techniques, you can make the sheet memorable enough to put it in your visual memory.&lt;/p&gt;

&lt;p&gt;So the very &lt;em&gt;process&lt;/em&gt; of creating the cheat-sheets themselves is what will help you commit the information to memory, organize your thoughts, and greatly enhance recall in the needed moment.&lt;/p&gt;

&lt;h2&gt;
  
  
  A great example
&lt;/h2&gt;

&lt;p&gt;To show you a little more of what I mean, check out this very nice cheat-sheet about Git from the great folks at Egghead.&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%2F5mo7i1nbeqw8a5r92h7h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5mo7i1nbeqw8a5r92h7h.png" alt="Egghead GitMistakes CheatSheet" width="800" height="547"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It has some of the techniques I've mentioned for representing concepts and helping remember the syntax of some of it's commands. &lt;/p&gt;

&lt;p&gt;The thing with cheat-sheets is that what other person used probably won't make much sense to you and viceversa. &lt;/p&gt;

&lt;p&gt;If a person prefers sketching things and you lean more towards writing things in a specific layout, then your cheat-sheet would help others who prefer actual text instead of images.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Using this memory trick you can take pretty much any subject and &lt;code&gt;git commit&lt;/code&gt; it to memory ;)&lt;/p&gt;

&lt;p&gt;It doesn't matter if the subject is something like syntax of Sass mixins, &lt;/p&gt;

&lt;p&gt;or JS array methods… &lt;/p&gt;

&lt;p&gt;or GraphQL fragments… &lt;/p&gt;

&lt;p&gt;or React hooks...&lt;/p&gt;

&lt;p&gt;or anything else.&lt;/p&gt;

&lt;p&gt;You can get creative and use it to learn all kinds of subjects, even those who don't lend themselves too well to being restricted to a sheet of paper.&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%2Fp3z4hsvyc48594ngcg1v.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%2Fp3z4hsvyc48594ngcg1v.jpg" alt="All the things!" width="735" height="531"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;So there you have it! The memory trick to make your web development learning process much easier. Try it out and let me know how it works for you. &lt;/p&gt;

&lt;p&gt;You can also adapt it to your learning needs and see what you can change and improve after using it for a while.&lt;/p&gt;

&lt;p&gt;That's it for this post. Hope it's been useful and gave you a new tool to keep going on your learning journey. Making things a little bit better each time and keep improving on what is possible.&lt;/p&gt;

&lt;p&gt;As always, thanks a lot for your time. Take care and see you in the next one.&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%2Fwp7awe6pzg8c553boyna.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwp7awe6pzg8c553boyna.gif" alt="goodbye" width="384" height="212"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>learning</category>
      <category>beginners</category>
    </item>
    <item>
      <title>What's up with the number 4?</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Wed, 08 Jun 2022 21:32:05 +0000</pubDate>
      <link>https://dev.to/juanfrank77/whats-up-with-the-number-4-3jig</link>
      <guid>https://dev.to/juanfrank77/whats-up-with-the-number-4-3jig</guid>
      <description>&lt;p&gt;This week I was checking out my email to catch up with things from the previous week. &lt;/p&gt;

&lt;p&gt;There was nothing out of the ordinary initially. &lt;/p&gt;

&lt;p&gt;But then, I found something that snapped me out of my ordinary email-checking state.&lt;/p&gt;

&lt;p&gt;You wanna know what it was?&lt;/p&gt;

&lt;p&gt;Well, nothing more and nothing less than a new badge in dev.to.&lt;/p&gt;

&lt;p&gt;But not any kind of badge mind you.&lt;/p&gt;

&lt;p&gt;It was &lt;em&gt;THIS&lt;/em&gt; badge.&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%2Fauif0n3tulem6g81ab5v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fauif0n3tulem6g81ab5v.png" alt="Image description" width="800" height="434"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yo, that's a big, cool-looking number 4.&lt;/p&gt;

&lt;p&gt;"&lt;em&gt;Can you believe it's been 4 years already?!&lt;/em&gt;"&lt;/p&gt;

&lt;p&gt;I couldn't believe it at first. But on further inspection, I found it's true.&lt;/p&gt;

&lt;p&gt;It got me doing a trip down memory lane to the second half of 2018.&lt;/p&gt;

&lt;p&gt;I remember that I had seen some posts from folks here going around. And after several of them, I ended up thinking "let's just sign up for this site right? why not?"&lt;/p&gt;

&lt;p&gt;I didn't have very much activity on the site until August of that year when I wrote about experiences in a short coding boot-camp that I took.&lt;/p&gt;

&lt;p&gt;The response I got was pretty positive. Initially, I was just reading/learning from posts and commenting on those, no writing on my part.&lt;/p&gt;

&lt;p&gt;It wasn't until the beginning of 2020 that "writing" became part of my "new year resolutions".&lt;/p&gt;

&lt;p&gt;I wrote only 2 posts before realizing "damn, this writing thing is actually hard".&lt;/p&gt;

&lt;p&gt;Then, the pandemic struck and everything came crashing down.&lt;/p&gt;

&lt;p&gt;In June I started writing again after a period of depression and nihilism. Writing on this platform and sharing knowledge was one of the ways I used to cope with the situation and keep moving on.&lt;/p&gt;

&lt;p&gt;From there, I've gone to develop my writing skill…&lt;/p&gt;

&lt;p&gt;Had writing streaks for many weeks…&lt;/p&gt;

&lt;p&gt;Learnt a lot from tech and otherwise…&lt;/p&gt;

&lt;p&gt;Met incredibly smart, cool, talented people…&lt;/p&gt;

&lt;p&gt;And be part of one of the best communities for developers on the internet.&lt;/p&gt;

&lt;p&gt;It's been quite a journey with ups and downs but definitely never a boring one.&lt;/p&gt;

&lt;p&gt;I'm looking forward to what may come in the future and hopefully keep doing this challenging, but rewarding activity for more years to come.&lt;/p&gt;

&lt;p&gt;So, cheers for this anniversary and another year to come.&lt;/p&gt;

&lt;p&gt;And as always… Thanks for reading!&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%2F6x43u80aypp5ht6d5ss2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6x43u80aypp5ht6d5ss2.gif" alt="Cheers" width="600" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>watercooler</category>
      <category>meta</category>
      <category>writing</category>
    </item>
    <item>
      <title>Back to basics: Data fetching in React</title>
      <dc:creator>Juan F Gonzalez </dc:creator>
      <pubDate>Wed, 25 May 2022 19:52:12 +0000</pubDate>
      <link>https://dev.to/juanfrank77/back-to-basics-data-fetching-in-react-42o4</link>
      <guid>https://dev.to/juanfrank77/back-to-basics-data-fetching-in-react-42o4</guid>
      <description>&lt;p&gt;Welcome back friend! &lt;/p&gt;

&lt;p&gt;In this article we're going to take a look at one of the basics when working with React.&lt;/p&gt;

&lt;p&gt;That is, getting data from an external source and using it in our application.&lt;/p&gt;

&lt;p&gt;With that being said, let's get on with it!&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%2F559eqbcgpmdws2e1q5y0.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F559eqbcgpmdws2e1q5y0.gif" alt="Let's get it on" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting the stage
&lt;/h2&gt;

&lt;p&gt;Suppose that our task is to retrieve data from an external API and display it on a page. We'll be doing that using only React and the inbuilt functionalities of JavaScript. No external libraries needed.&lt;/p&gt;

&lt;p&gt;You might be asking why since there are utilities out there that can speed up the process for us.&lt;/p&gt;

&lt;p&gt;The reason for that is twofold. First, most of the times we become a little too dependent on abstractions that don't let us see how things work in general. Second, for the purposes of this article we'll use just what vanilla JS provides us.&lt;/p&gt;

&lt;p&gt;Also, revisiting the fundamentals is always a good thing to do when we want to deepen our knowledge and have a better grasp of what we &lt;em&gt;think&lt;/em&gt; we know.&lt;/p&gt;

&lt;p&gt;Now, lets move on to the details.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting the data
&lt;/h2&gt;

&lt;p&gt;We are going to fetch data from an API and present it on a page. The first thing that we need is that API endpoint that we can call. &lt;/p&gt;

&lt;p&gt;What could we use that we haven't used before?&lt;/p&gt;

&lt;p&gt;Hmm...&lt;/p&gt;

&lt;p&gt;How about we use the Rick and Morty API?&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%2Fs5dv8yrlrm599i0m4l4y.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs5dv8yrlrm599i0m4l4y.gif" alt="image of rick and morty" width="480" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We'll fetch the data of the characters and that's what we're going to display on the page.&lt;/p&gt;

&lt;p&gt;If you &lt;a href="https://rickandmortyapi.com/documentation/" rel="noopener noreferrer"&gt;read the documentation&lt;/a&gt; you'll find that the endpoint we're looking for is in this form &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%2F7fi053q9g9j1r5eqttn7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fi053q9g9j1r5eqttn7.png" alt="Api endpoint" width="711" height="114"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If we make a GET request there, we'll get an object with some metadata and the data we're expecting of the characters.&lt;/p&gt;

&lt;p&gt;Something like this…&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%2Fr61x3ovl4xl3pydgbso1.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%2Fr61x3ovl4xl3pydgbso1.jpg" alt="Image of the results" width="709" height="511"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So the results array is what we're mainly interested in. That's what we're going to save as our data to be displayed on the page. &lt;/p&gt;

&lt;p&gt;Now, let's create a function from where we're going to be fetching that data. And we'll be using the Fetch API for that (remember no external libraries needed)&lt;/p&gt;

&lt;p&gt;We'll now have something like this:&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="nf"&gt;getRickAndMortyData&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;apiUrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`https://rickandmortyapi.com/api/character`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;apiUrl&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&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;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;results&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;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;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;The error was:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;error&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;That works as our base for getting the data from the API. Now, we'll want to take that data and display it on a page. That's were React comes in to help us out.&lt;/p&gt;

&lt;h2&gt;
  
  
  Displaying the data
&lt;/h2&gt;

&lt;p&gt;First, we're going to create the markup for the page.&lt;/p&gt;

&lt;p&gt;We'll have a header and a section where the data of the characters will be displayed.&lt;/p&gt;

&lt;p&gt;Something like this for starters.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;header&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Rick and Morty characters
&lt;span class="nt"&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Rick&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;Morty&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
    &lt;span class="c"&gt;&amp;lt;!-- ...more characters --&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, we'll improve our previous function with some React powers. For instance, when the call to the API gets made, we'll save those results in state so we can use them where necessary.&lt;/p&gt;

&lt;p&gt;If you've been using React for a while you will remember that we use to have Class components where we set the initial state and then made the API calls on the &lt;code&gt;componentDidMount&lt;/code&gt; function.&lt;/p&gt;

&lt;p&gt;But since the introduction of hooks, we no longer need to use those class components. The &lt;code&gt;getRickAndMortyData&lt;/code&gt; function can now remain as a regular function. &lt;/p&gt;

&lt;p&gt;The only changes we'll need to do are the introduction of the hooks for setting state and handling API calls. So we'll change it accordingly like so.&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="nf"&gt;getRickAndMortyData&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="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;info&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setInfo&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; 
    &lt;span class="na"&gt;characters&lt;/span&gt;&lt;span class="p"&gt;:&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;apiUrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`https://rickandmortyapi.com/api/character`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;useEffect&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="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;apiUrl&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
      &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nf"&gt;setInfo&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;characters&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;results&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
      &lt;span class="p"&gt;})&lt;/span&gt;
      &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;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;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;The error was:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;info&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;Next, we'll take the current markup and improve it with the creation of components. One for the header and one for the characters.&lt;/p&gt;

&lt;p&gt;First is the &lt;code&gt;Header&lt;/code&gt; component that can be something like this.&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="nf"&gt;Header&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;header&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Rick&lt;/span&gt; &lt;span class="nx"&gt;and&lt;/span&gt; &lt;span class="nx"&gt;Morty&lt;/span&gt; &lt;span class="nx"&gt;characters&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/header&lt;/span&gt;&lt;span class="err"&gt;&amp;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;And then is the &lt;code&gt;Characters&lt;/code&gt; component that will be listing the characters data that we received from the API.&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="nf"&gt;Characters&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;characters&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ul&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;characters&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;character&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;li&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;character&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&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;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;img&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;character&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;image&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;            
               &lt;span class="nx"&gt;alt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;character picture&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;label&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;character&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/label&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/li&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="p"&gt;))}&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ul&lt;/span&gt;&lt;span class="err"&gt;&amp;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;With that done, we only need to use them in the markup passing in the correct data that's going to be displayed.&lt;/p&gt;

&lt;p&gt;So the &lt;code&gt;App&lt;/code&gt; component will look like this.&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="nf"&gt;App&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;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;getRickAndMortyData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Header&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;main&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Characters&lt;/span&gt; &lt;span class="nx"&gt;characters&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;characters&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/main&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/&amp;gt; &lt;/span&gt;&lt;span class="err"&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;h2&gt;
  
  
  Putting it all together
&lt;/h2&gt;

&lt;p&gt;With all those pieces in place, you'll see that the characters now appear as a list with just 20 of them at first.&lt;/p&gt;

&lt;p&gt;If you look at the documentation, you'll see that the response from the API already comes paginated. &lt;/p&gt;

&lt;p&gt;In the &lt;code&gt;info&lt;/code&gt; object that contains the metadata, there's the info of how many pages there are and the links of the next and previous pages (if they exist)&lt;/p&gt;

&lt;p&gt;Knowing this, it wouldn't be difficult to implement a "next page" button that will bring the next 20 characters in the list.&lt;/p&gt;

&lt;p&gt;Although, that's something you can implement as an extra credit for this particular exercise. We'll not be extending this article further with the implementation of that functionality.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrapping up
&lt;/h2&gt;

&lt;p&gt;The styling of this exercises is up to you to make it look however you like.&lt;/p&gt;

&lt;p&gt;I personally made it very minimalist with these few lines of CSS.&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;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Arial&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;sans-serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;ul&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;list-style-type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;li&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;flex-direction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;column&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;li&lt;/span&gt; &lt;span class="nt"&gt;img&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;130px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;130px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;align-self&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;li&lt;/span&gt; &lt;span class="nt"&gt;label&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;margin-bottom&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1rem&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;18px&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;And here's a codepen with a working version of this app.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/juanfrank77/embed/yLvBeOv?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;There you have it. A simple React app that gets some data from an external API and then displays it on a page. With no other libraries required. Just Vanilla JavaScript.&lt;/p&gt;

&lt;p&gt;"Look ma, no libraries!"&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%2Flphami0xs6ilq48pmfjt.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flphami0xs6ilq48pmfjt.gif" alt="Look ma, no hands" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;That's it for this article. Thanks a lot for reading. Hope it was informative and clear enough for you.&lt;br&gt;
If you have any questions or suggestions for this. Send them &lt;a href="https://twitter.com/juanfrank77" rel="noopener noreferrer"&gt;my way&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Take care and see you in the next one.&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%2Fokqxssp7z7bijcr40j20.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fokqxssp7z7bijcr40j20.gif" alt="Goodbye" width="500" height="323"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>writing</category>
    </item>
  </channel>
</rss>
