DEV Community: Gladys Pascual

Re-writing then/catch to async/await

Gladys Pascual — Sun, 28 Feb 2021 23:19:48 +0000

There are two main ways to handle asynchronous code in JavaScript:

then/catch (ES6), and
async/await (ES7).

In this post, I wanted to show to convert a then/catch syntax into an async/await syntax.

In this example, I will be using axios, a JavaScript library that allows making an HTTP request, and an alternative to the .fetch() method. Some of the advantages of using axios over the fetch method are that axios performs automatic transforms of JSON data and has better browser support compared to the fetch method.

then/catch

  useEffect(() => {
    axios
      .get(
        `https://finnhub.io/api/v1/news?category=general&token=${process.env.REACT_APP_API_KEY}`
      )
      .then((response) => {
        const firstTenNews = response.data.slice(0, 10);
        setCurrentNews(firstTenNews);
        setLoading(false);
      })
      .catch((err) => {
        console.log("Error fetching and parsing data", err);
        setLoading(false);
      });
  }, []);

async/await

  useEffect(() => {
    async function fetchCurrentNewsData() {
      try {
        const result = await axios.get(
          `https://finnhub.io/api/v1/news?category=general&token=${process.env.REACT_APP_API_KEY}`
        );
        const firstTenNews = result.data.slice(0, 10);
        setCurrentNews(firstTenNews);
        setLoading(false);
      } catch (err) {
        console.log("Error fetching and parsing data", err);
        setLoading(false);
      }
    }
    fetchCurrentNewsData();
  }, []);

I hope this helps. Some may argue that the async/await syntax is more readable compared to the then/catch syntax. What are your thoughts? Let me know in the comments below if you have a preferred syntax 👩🏻‍💻

Scoreboard App

Gladys Pascual — Wed, 16 Sep 2020 18:42:49 +0000

Hi all 👋 I have just deployed the scoreboard app I created using React, check it out 👩🏻‍💻

To give you an overview of how I tackled this project:

If you're curious about how I created the scoreboard app, here is my code.

Until my next project! ✌🏼😎

A beginner's guide to using Git when working with a team for the first time

Gladys Pascual — Wed, 05 Aug 2020 10:02:48 +0000

As part of my Front-End Web Development Course, we were put into a team of 4 for a group project, where we were tasked to create a website using HTML and CSS. Other than developing a static, responsive website with multiple pages, one of the main goals was to put what we have learned about Git and Github in practice.

What is Git?

The way I understand it, Git is a version control tool that allows a team of developers to work on the same code of the project, be able to maintain the code, track all the code modifications, and let them return to a previous version if required. All of these features allow for the development of new features more easily.

What is Github?

Github is a Version Management Web Service and possibly the biggest source code host. There are other services that do the same thing such as Bitbucket and Gitlab. Github is based on Git, but they are not the same thing.

So what now?

Putting Git into practice was a steep learning curve for me and my team. There was so much confusion as to what commands to use, what, when, or how to push. Our biggest struggle was that we were ending up with conflicts on our codes that we did not know how to resolve. In the end, my team and I were able to get a better grasp of Git and Github's basic concepts. To further help us, I created my simple, personal cheat sheet, to make sure we minimize these conflicts.

First things first

When working in a group project (or any project), make sure that you create a branch for the work/feature that you are doing. Do not commit a change directly to master. Always create a branch that will then be merged later to the master.

To create a new branch:

This command will make your new branch, but you will still stay on the current branch.

git branch name-you-want-for-branch

This command will make your new branch and switch to this new branch you've created.

git checkout -b name-you-want-for-branch

I believe that it is best practice in the industry to check every morning whether there is a change on the master branch (thanks Jerico for the heads up). For those who are like me, still learning, I hope the following will be useful.

To ensure that you have the latest master available from your group project's Github repo in your local machine:

This will minimize conflicts down the line.

Since you will be on your branch, switch from your branch to master

git checkout master

To get the latest version of the remote master from Github

git pull origin master

To switch back to the branch you are working on

git checkout your-branch-name

To merge the changes from master to your branch

git merge master

Always remember to work on your branch. Do not work on the master branch.

Guide to push your local branch to Github

To stage all your changes

git add .

This part is optional, but I like doing it. It should give a green text if the changes made were added successfully.

git status

To commit your changes

git commit -m "your-commit-message"

To push to Github

git push -u origin your-branch-name

Once you're happy with your code and want to merge your branch to the master branch in Github, you can create a pull request.

Click on the branches tab on Github.
Click New pull request tab on the branch that you want to merge to master.
Click on Create pull request button.

Note that our Github repo was set up so that at least one reviewer was needed before you can merge your branch to the master. This can be done by:

Going to settings, then branches
In Branch Protection Rules, click add rule
Type in master on the Branch name pattern
Tick Require pull request reviews before merging and Include administrators

I hope this helps! To finish off, I will list all the git commands that I find useful, hopefully, you will too ✌🏼

to switch from one branch to another

git checkout name-of-the-branch

to view all existing branches

git branch -a

to delete a branch

git branch -d branch-name

to check the destination of where your code is going to be pushed (rarely used but handy to know)

git remote -v

My Journey to Become a Wilder in Wild Code School

Gladys Pascual — Tue, 04 Aug 2020 17:53:18 +0000

In this blog post, I wanted to share my journey on how I became a Wilder by signing up for Wild Code School's Front-End Web Development part-time, remote course. In my first blog post, I talked about my motivation for a career transition to Software Development. As a continuation, I wanted to share my journey to be part of the Bootcamp course.

Step 1: Online Assessment

The first step to my journey of becoming a Wilder was to complete an online assessment. This involved creating a static website using HTML and CSS. This sounds scary at first, but don't worry, they did not just throw me on the deep end and expect me to know everything about what they are about to teach me. The idea was to see whether a candidate was motivated, able to learn, and adapt to challenges by being resourceful. The school ensured that I get to work and learn with like-minded individuals in the course on an everyday basis through assignments and project work, but of course with the guidance of an instructor who will mentor us if we get stuck on something.

Wild Code School have their own learning platform called Odyssey. To me, it's like a very organised notes that compiled all the useful articles and videos per topic, in this case, HTML and CSS, which I found very useful as a beginner. In addition to the assessment, they also asked me to complete Codecademy's first seven chapters on Introduction to Javascript.

To me, having this assessment and intro to JavaScript prior to starting the course was a really good idea as it ensures that everyone would be starting at the same level prior to starting the course.

On top of the resources available in Odyssey, the five-week Coursera course on HTML, CSS and Javascript for Web Developers I did prior to joining Wild Code School helped me a lot on this assessment. If you're interested, here is the website I created as part of the assessment. PS. I did not know Flexbox back then! 🙈

Step 2: Motivational Interview with the Campus Manager

After I submitted and successfully passed my online assessment, I was scheduled for a motivational interview with the campus manager, Francesco, who also gave the presentation that convinced me to join the school in the first place. I won't go into detail about my motivation as I have discussed this in length in my fisrt blog. Overall, I had a great chat with Francesco and I was onto the next stage!

Step 3: Livecode assessment with the course instructor

The final step was a livecode assessment where Anelisy, the course instructor, gave me a JavaScript problem and I solved it while she watches. The idea was for her to see my thought process and how I would Google to find the solution. It lasted for 30 minutes and it went well overall! I can't remember exactly what she asked me to do, but I remember that there was a for loop involved! 😊

Wrap Up

Overall, I really loved the process of getting into Wild Code School. The rigorous assessments and motivational interview ensured that I get to work and learn with people who have the same level of motivation as I do. For more information about the course, you can find it here.

Using lockdown to switch careers - from Chemical Engineer to Software Developer

Gladys Pascual — Sat, 20 Jun 2020 22:22:11 +0000

As Ireland went into lockdown following the Covid-19 outbreak, I decided that this was the perfect time to upskill and further my prospects within the tech industry.

Although I enjoy my current job, I'm aware of the opportunities and flexibility that a career in tech can offer, not only in Dublin but also abroad. The decision for a career transition did not come easy. After all, I spent so much time to get to the career that I have right now, with four years to do my Bachelor's and another four to complete my PhD. My biggest worry was: am I just throwing all those years away? Luckily, I have a supportive partner who made me realise that I have 30+ more years of working life ahead of me. A lot can change in those 30 years and I would like to put myself in a position where a vast amount of opportunities are widely available.

So why coding?

An area of my job that really interests me is developing modelling solutions. I believe that the problem-solving skills that I obtained from my background in Chemical Engineering are transferable into coding and with enough fundamental knowledge, a career in tech is a path that I can excel in and also enjoy.

First step to my career change

I started considering my options around February 2020, but I wasn't sure which course option to go with. I did not want to quit my full-time job, therefore a part-time course was the best option for me.

I started with a five-week Coursera course on HTML, CSS, and Javascript for Web Developers delivered by Yaakov Chaikin. It was an amazing course that gave me strong fundamentals on HTML, CSS, and Bootstrap. More importantly, it strengthened my passion for coding, and quickly realised that becoming a Front-End Web Developer would suit me best. I was ready to take my coding journey to the next level.

After extensive research on which course would give me enough skillset and project work to get me that first Junior Developer role, my options were either on-campus bootcamps in Dublin or online learning programmes. I was leaning more on the online programmes such as the Front End Development or Full Stack JavaScript Techdegree courses offered by Treehouse, or the Front End Web Developer or React Nanodegree programmes offered by Udacity. On-campus boot camps were quickly out of consideration as the commute during Dublin's rush hour would not be feasible with my demanding work schedule.

THEN THE LOCKDOWN HAPPENED. Fortunately, my company remained as an essential business and we continued our operation during the lockdown. On the other hand, all my extra-curricular activities and travel plans were postponed which led to all the extra hours I now have on my hands. As Ireland went into lockdown following the Covid-19 outbreak, I decided that this was the perfect time to upskill and further my prospects within the tech industry.

Next, I saw that Wild Code School was offering their part-time Front-End Developer Course remotely due to the current lockdown. I went to one of their remote presentations in April to learn more about the course, but without any intentions of the course, mainly because it is a lot more expensive compared to the other online courses we've looked at. I'm glad that I went, because I learned that the remote course offered a curriculum structure that I want, the supervisor that I need, and most importantly the ability to work with a group of like-minded people. I signed up, started the remote course in mid-April, and fast forward to today I am on my week 10 of the course and I am loving it! I am always excited to come home and learn more JavaScript and now React, despite how tired I am from a full day of work.

If you got this far, thank you for taking your time to read my story. If you're someone thinking of a career change, I understand that it's not an easy decision and I hope this blog helped a little bit. Don't hesitate to comment or contact me if you have any questions. ✌🏼