DEV Community: Amanda

Deploying an app with Cloudflare Pages (and Heroku)

Amanda — Fri, 29 Jan 2021 22:41:09 +0000

Hello!

The inspiration for this blog post came from my final project for the Bootcamp I attended. However, it will not be so much about code but rather the experience of deploying the app and the fun new tools I got to use!

Important to note that I built my app using React for the frontend and Ruby on Rails for the backend, and I have two separate repos.

When it came down to deciding where to deploy the frontend I wanted to use Netlify. I had heard good things about it, and most of the blog posts I could find said this was a good option.

I knew I wanted a platform that:

It would be easy to work with as this is the first app I was deploying.
Low maintenance.
Something I haven't used before (part of the requirements for the project).

I had already registered a domain through Cloudflare, and through suggestions, I was introduced to Cloudflare Pages (still in beta but worth requesting access to).

Once you have access, it's as simple as creating a Cloudflare account and connecting to GitHub. To deploy it, you must opt to create a project and select a repository. The second part of the setup is your build settings. It's pretty self-explanatory. You select a framework and add a build command.

The image below displays what to do:

For more details on how to set this up, you can check out their documentation on the link below.

Getting started with Workers

The whole setup takes a few minutes to complete. After the first deploy, you only have to push your changes to GitHub, and Cloudflare Pages does the rest.

Once the app is deployed, it will have a custom subdomain, but as mentioned earlier, I did have a domain to connect.

In order to be able to use my domain and send HTTP requests to both the front and backend, I set up Cloudflare Workers.
Workers let you add JavaScript in between your website's visitors and your server (in this case my backend which was deployed on Heroku).

A Worker has two parts:

The event listener that listens to any requests being sent to the website, such for example a request to navigate to another page.
An event handler, which is set up to handle the requests, which in my case are sent to either Heroku or Cloudflare Pages.

This addEventListener registers the worker:

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

The event handler finds out if the request should go to the backend or the frontend by checking the URI. In my Worker, it checks the pathname to determine it.

Once it has determined where it should go, it rewrites the hostname to send it to its destination.

/**
 * Determines if URL goes to the backend or not.
 * @param {URL} uri
 * @returns {boolean}
 */
function isBackendRoute(uri) {
  // ...
}

async function handleRequest(request) {
  try {
    const uri = new URL(request.url);
    if (isBackendRoute(uri)) {
      uri.hostname = TRAVEL_TIPS_BACKEND_HOSTNAME;
    } else {
      uri.hostname = TRAVEL_TIPS_FRONTEND_HOSTNAME;
    }
    let res = await fetch(rewriteURL(request, uri.toString()));
    return new Response(res.body, res);
  } catch (e) {
    return new Response(`ouch! hit a snag: ${e.message}`, {
      status: 500,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }
}

I suggest reading the following to better understand how Workers work.

How Workers works

For the backend, Heroku worked well with Rails. I followed the instructions from the following guide:

Getting Started on Heroku with Rails 6.x

It automatically created a PostgreSQL database.

Final thoughts on Cloudflare Pages:

Easy to integrate
Documentation is pretty straightforward
The UI is user-friendly

Overall just a good experience. I look forward to creating other apps and deploying them with Cloudflare Pages.

If you get a chance, definitely check it out!

Building your personal website

Amanda — Wed, 06 Jan 2021 19:16:46 +0000

As I approach graduation day at my boot camp, I decided to work on my brand. Over the holidays, I started building a website to display all of my work.
It was time to put everything I had learned to the test.
This blog post is about the experience and the tools that I used along the way. Please note that this is my personal experience and not a set of guides, but I do hope you take something from this.

I figured that the first step was to get excited about this, and everything would fall into place.
Well, it turns out that coming up with designs for websites is a tough thing to do. I had these half ideas of where I wanted certain elements, styles, and colors to go, but I couldn't see the big picture.

So I started looking for inspiration online. I looked through Pinterest, searched for people's portfolios, and eventually landed on a website called Dribbble.
Dribble is a website for designers to share and promote their work as well as hire a designer. You can look through the explore tab for the popular design and designers or research specific themes.
I knew I wanted something minimalistic and easy to navigate.
After only a few minutes of looking through the designs, I knew where I wanted to start!
Behold!

I had a black background!

Kidding!

I mean, the background is black, but I did feel inspired enough to come up with a design.

So then came the time to begin building the app, using React, of course. I used Jamboard(not my favorite but couldn't think of anything else, neither did I want to pay for an app) and my iPad Pro to start sketching the design, as well as the components I would need.
The idea was to use React to build the website, but I wanted to add an admin page, so the backend was built with Rails (which is what I am most familiar with at the current time).

I am slowly falling in love with React and had set the goal to learn about Hooks over the winter break.
I knew I wanted to use only Hooks for my small app, and I set out to learn as much as I could.
So like any React super fan, I started reading the documentation,
and watched this video(as most people have)
"React Today and Tomorrow and 90% Cleaner React With Hooks"

Now I got my black background, some HTML, basic CSS, my functional components with their states, and all that is left to do is make sense of it. I used Bootstrap for the basics of adding containers, rows, and columns, but from early on I knew I wanted to do most of the CSS myself.

The plan was to display every blog post or GitHub link in a beautiful carousel. I wanted to find a library out there that had the code ready and then add the pretty to it, and I did! I found a library for the carousel of my dreams.

After a few days of working with the carousel and I hit tons of obstacles trying to customize it to my liking.
The lesson there:
Do a thorough research of the library if you want to implement them on your website.
In the end, I had to decide to ditch the carousel and build something from scratch. Getting rid of the carousel now meant that the design would be compromised.

It proved to be an opportunity for me to work with animation and CSS. Also, to learn how to compromise. I was upset I had wasted hours trying to fix something that would not work. However, it provided me the chance to learn about third-party libraries, and sure enough, it came in handy when I had to add animation.

I will be the first person to tell you that I did not know the first thing about animation. I think it's fascinating, but I did not imagine how complex it can be. After exploring multiple libraries, I landed on Framer Motion.
Read through most of the documentation and knew it would allow me to do most of the things I needed.

Ta-da!
I have a nice transition of mouseOver/mouseLeave between divs!

I relied heavily on Font Awesome for all of the icons you see above and all of the buttons I have on the site.

The experience of putting together something for myself, exactly the way I wanted was what kept me so motivated.
I spent a ridiculous amount of hours working on it and I feel really proud of the work I did. None of it was easy, and at times I got so frustrated I just had to walk away. But what I took from this is that I do like coding and learning new things, and after an intense 4 months or so of Bootcamp, it's good to be reminded of that.

I regret to say I don't have the site to link here yet because I am deciding where to deploy it. Once it's out there, I will be sure to refer back to this and link it.

For a list of all other resources used:

cdnjs
Animate.style.
Css-tricks.
React Router.
npm.

Simpler Asynchronous JavaScript code with Async/await

Amanda — Mon, 30 Nov 2020 15:34:54 +0000

It all started when our class began learning about Promises. In short, a promise is an object that represents awaiting for some operation to complete. There are situations where you might need promises and situations where you will not. For example, if you are looking things up in the DOM or writing to the DOM, this code executes synchronously, meaning our code will block and wait for the result on that particular line.
In the following example, we are doing a simple query for an <h2> element in our document:

let lookUp = document.querySelector("h2")

JavaScript, while it is executing this line, will not be doing anything else. The result will be returned to lookUp before executing the next line. So there are some (most) operations in JS where it will automatically wait for a result.

For other things, such as HTTP requests, JS will not wait for a result, therefore promises are needed to allow JS to continue executing other operations while waiting for results. The following example will only start the operation but will not give us the final result yet.

let promise = fetch("http://example.com")

Async functions help us with the situations where JS will not automatically wait for a result.

For a more complete understanding of promises, as well as this blog post, you can read up on promises here.

I happened to have stumbled upon async functions. Every time I wrote a fetch request inside a function using .then syntax, I would get these faint-colored dots right below the function's name. Upon clicking on these dots, VSCode gives you the option to convert it to an async function, as demonstrated below:

I have since started using async functions for any HTTP request, but without knowing much of its functionality. I decided to write this blog post as I became curious about the different syntax and if there are benefits to writing async functions. This blog post is a beginner's level explanation of how async functions work. A decent amount of research was done, but as a beginner to JavaScript myself, please feel free to leave any feedback, and I will gladly update this post.

Before we get into the syntax of async/await, we should review what a regular function that will handle asynchronous operation will look like.
The following snippet shows a fetch request using .then syntax:

function sameFunction() {
  return fetch("some_url")
    .then((response) => response.json())
    .then((resultFromResponse) => doSomethingWithResult(resultFromResponse));
}

When using a regular function or non-async function, the code can look somewhat messy and more difficult to understand. Also normal built-in JavaScript syntax such as if statements and for loops become difficult to use.

Async Functions

But what is an async function? This is what I've gathered so far:

These are regular functions that will begin with the keyword async.
Once marked with async, the function will only return promises now.
Once marked with async, the await keyword can be used inside the function to help with handling promises.

In one snippet,

async function someName() {
  let response = await fetch("some_url");
  return await response.json();
}
someName() // => Promise<pending>

Async functions with the await keyword make for much simpler handling of promises. The await keyword does exactly what you might think it would, it waits until a promise is either fulfilled or rejected to resume. Meanwhile, other functions in your code will be allowed to run. Keep in mind that the await keyword only works inside async functions.

Just a heads up, async functions are not currently supported by all browsers, and you might have to use some other tools to make it more widely compatible.

Error handling

The last thing I would like to address is error handling. In regular functions, when handling errors, you need to consider errors that can happen asynchronously. Consider the following example:

function errorHandlingDemoWrong() {
  try {
    fetch("http://thisisjustademo.com/").then((res) => {
      console.log(`status code: ${res.status}`);
    });
  } catch(e) {
    console.log("this will never happen")
  }
}

This function is trying to fetch this domain and because the domain does not exist, it will error out. Because the error occurred inside the promise chain, it will stay within the promise chain. Therefore catch in this snippet will never be executed.

The correct way to handle this error would be to use .catch:

function errorHandlingDemoCorrect() {
  fetch("http://thisisjustademo.com/")
    .then((res) => {
      console.log(`status code: ${res.status}`);
    })
    .catch((err) => {
      console.log(`an error occurred while fetching fake domain: ${err}`);
    });
}

As a beginner, trying to figure out which is the right way to handle errors can be confusing.

This is another way async/await makes writing JavaScript better. In this snippet, all error handling is done with the built-in try/catch syntax, instead of there being two different error handling methods.

async function errorHandlingDemo() {
  try {
    let response = await fetch("http://thisisjustademo.com/");
    console.log(`status code: ${response.status}`);
  } catch (err) {
    console.log(`an error occurred while fetching fake domain: ${err}`);
  }
}

Handling asynchronous code can be very tricky, and async/await makes it easier and more readable.

Life of a student attending a boot camp

Amanda — Tue, 10 Nov 2020 20:49:09 +0000

I decided to write about this because I do think boot camps are a great intro to programming.

Keep in mind that this is my personal opinion. I want to describe what is like behind the scenes of a boot camp from a student's perspective. I won't go into detail as to why I decided on a boot camp vs. a four-year college SE degree (it comes down to time and money).

Let's dive into it!

Schedule

I find I am more productive and engaged if I am dedicating myself to something full time. For that reason, I signed up for a full-time experience at a boot camp. So what does this mean? I had to quit my paying job. A lot of thought and preparation went into this, but it was still a scary and bold move for me.

So what do my days look like now? I attend online classes from 9 in the morning until 6 in the evening from Monday to Friday. In reality, my schedule looks like this:

Be ready to have unpredictable days. You will need to learn to deal with ambiguity. I think it's possible to balance your boot camp activities with your non-boot camp activities. It just might require a lot of discipline, which brings me to my next topic.

Discipline

If I were to research articles on "why one should attend a boot camp" or "what are the benefits of a boot camp vs. a four-year degree," I would find arguments for and against boot camps. This blog post will be no different. It is necessary to do your research, but keep in mind that these are people's opinions. Boot camps will work for some but not for others. In the end, you only get what you put in. It's a rigorous and demanding course. I find I am stressed out most of the time, especially as a beginner. But it is also worthwhile. The number of things I've learned in this short period has exceeded my expectations.

However, it comes down to discipline. You can find a boot camp that guarantees you a job, but it won't apply to you unless you dedicate the time and the effort to learning and practicing. Boot camps are a way to learn the foundations of the given language that's part of their curriculum. You will be learning how to learn a new language. Because of the pace of this program, you will not dive deep into anything in particular. It will come down to YOU and what you think you need to focus on. Hence why your schedule might look a bit hectic like mine!

Personal Life

I feel like this can be a delicate topic to talk about because everyone's experience will be different. But I will tell you about how this is working for me. I decided to start a boot camp during the pandemic. I got tired of working with customer support, and I knew I wanted to learn how to program. I figured this was the best time to focus on programming since we are all stuck at home anyway. It is working.

However, it is challenging to balance time to study and the time to spend with loved ones or doing things you enjoy. I often forget to respond to people's messages because all I can think about all day is code. I know it might sound like it's not a big deal, but it is so crucial to find the time to do other things besides code.

Burnout is a real thing. You need to know when to step away (momentarily) from your screen.

Expectations

It is impossible to graduate from a boot camp knowing everything. You will learn the necessary skills, and your first job will help mold you as a programmer. You will never stop learning. Software is always changing and evolving. Be prepared to be wrong and to get things wrong often. Writing tests, understanding them, and debugging your code is how one learns. I had very unrealistic expectations going in, and I had to adapt. I initially found it discouraging, and it put me off tracks, but looking back, if I hadn't done that, I probably would've decided to drop out.

My days are very long now, and there's a lot I still don't know. I think it's important to remind yourself why you want to learn how to program and why you are doing this. This post is not to discourage but to show what to expect out of a boot camp.

Resources For New Programmers

Amanda — Thu, 22 Oct 2020 19:55:03 +0000

Hi Dev World!

My name is Amanda, and I am a Software Engineer student.
It's a pleasure to join your community.

I thought a lot about my first post here, and to be sincere, I don't find myself ready to write a well-crafted post about anything programming-related as of yet. As a new programmer, I must admit that there are days where nothing makes sense, and I know I am not alone in this. I get stuck on the same problem for hours and cannot find an answer. After a few walks, some snacks, lots of questions asked, the desire to close the laptop and cry, and the occasional glass(bottle) of wine (weekends only or outside of school/work hours), I am capable of figuring it out.

So far, the most troublesome part for me about programming has been learning how to talk about code (I will address this in another post).

There are a few things that I find myself doing(very often) that are not practical, like opening multiple tabs about Ruby documentation (sometimes the same one), GitHub, or Stack Overflow. It can be incredibly overwhelming when your browser has over 40+ tabs open, or when I try to take notes about code on a Note-book, on an iPad, sticky-notes, and on the back of my hand (kidding).

So I decided to write my first blog post on the tools that are making my coding experience digestible, giving me back the time to freak out about whiteboard challenges and figure out why I keep getting NoMethod errors.

Some of these tools are free, and some you have to pay; keep in mind that these are just suggestions. You don't have to purchase anything. These are the tools that work for me and are guiding me through this learning journey.

So without further ado, here is my top five, in no particular order. I won't be adding the cost of any of the apps here. So you can google it yourself :)

Ruby is the first official programming language I am learning, and everything was going smooth until I learned about:

https://ruby-doc.org/

What an incredible and intimidating little tool. As helpful as it is to have every information about Ruby classes and methods, I must admit I have found myself with four tabs open with the same definition for the .reduce method.

Enters...

Dash

Dash is an app that searches over 200 documentation sets for everything from programming languages APIs to Snippet Manager, and cheat-sheets.

Disclaimer: I paid for the app, but was recently informed that you can use it for free as well(there's a delay until you see your search). The app works for macOS only.

Notion

So instead of having multiple code snippets and or notes written across many different platforms, I decided to use Notion. Mind you, I know it's not a code-specific app, but it is an app I am familiar with and have been using for quite some time.
While researching the best note-taking apps, I did come across a few that are worth mentioning like, Boostnote, Stackedit, and Typora. I have not tried them, so if you have, please leave feedback about the app in the comments.

Learn X in Y Minutes

This gem was first introduced to me by a fellow engineer. It's a community-driven website with easy to digest basics in different languages. One of the cool things about this website is that it's available in multiple languages. What I love about it, it's the fact that the documentation is short, easy to read, and it goes straight to the point.

Learn X in Y Minutes

Awesome

Awesome is a helpful directory of all kinds of subjects in programming. In other words, it's a kick-ass list of kick-ass lists! Right now, I am using it to learn more about git. (Likely to write a post about git later).

Leetcode

And lastly, I recently came across this helpful site called Leetcode. Leetcode is a platform that helps you improve your skills, expand your knowledge, and prepare you for technical interviews. The platform offers daily challenges, contests, monthly challenges, and tech questions for specific companies like Google, Apple, Facebook, Microsoft, and Amazon.
Leetcode is free to try, but it does offer some kick-ass benefits on its premium subscription. I am still in the early stages of using this app, and I might be getting ahead of myself, but these challenges are proving to help solidify my understanding of programming.

And this sums up my list.

I am always looking for new tools and am open to suggestions.