Forem: Beau Coburn

Async / Await in JavaScript

Beau Coburn — Tue, 18 Jun 2024 20:19:01 +0000

Here's a question for you. Is JavaScript synchronous, as in it finishes one task at a time, or is it asynchronous, where it can work on many tasks at one time? Now, JavaScript 101 would tell us that it is synchronous, because it basically works its way down the code and works on each task one at a time. If that is the case, how do async functions work? If JavaScript is synchronous, how can you have an asynchronous function? Isn't that contradictory? I'm going to take a deeper look and like many of my other articles I will use the MDN documents as my source with links at the bottom.

So, what happens if you are loading an application or a site and let's say you need to pull information from another source? Obviously, it is going to take longer to pull the information from the other source than it is to finish loading all of your application and your own content. I use this example because calling an API call with an async function is probably one of the most common uses of async functions.

Async functions are made to return a promise that is either resolved or rejected. They were made in order to make promises easier to write. Many times, an async function is accompanied by an await, but an await is not required when writing async functions. Without an await expression, the async function will run synchronously, but the await expression allows the async function to run asynchronously, because this is exactly when the promise is returned.

Here is an example of syntax without the await expression:

async function name(){
  return value;
}

Here is an example of syntax with an await expression:

async function name(){
  const x = await promiseFunction(val);
  console.log(val); //Value from the promise
}

So, to explain these two blocks. In the first block, the code is just called synchronously, and then the value is returned. In the second block, when the code is called, it starts synchronously also until it reaches the await expression. Every time it goes through the await expression it evaluates if the promise is resolved, rejected or still unfulfilled. If it has been resolved, then the value of the promise is returned and the function is finished. If the promise is rejected, then the value of course will be rejected and also the function is finished. However, if the promise is unfulfilled, the program continues to execute the next functions in the stack. Whenever the promise is either resolved or rejected, then it will be returned and added to the stack. In this way, even though JavaScript is technically synchronous, it can act as though it is asynchronous.

I really wanted to cover this topic because to be honest, this was a topic that was a little hard for me to get my head around in the beginning. I wanted to spend time on this topic to really understand it more in a deeper way and hopefully be able to explain it to more people.

Photo by Ferenc Almasi on Unsplash

Async Function - MDN. (n.d.). Retrieved June 18, 2024, from https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

How to Continue on the Path When You Want to Give Up

Beau Coburn — Sat, 08 Apr 2023 18:49:53 +0000

I've been studying Computer Science concepts now for the past couple of years, and I wish I could say that the path has been easy and lined with roses. Actually, the exact opposite is true. The path to build my skills has been a very difficult one and many times I still feel like a failure. I look at my own work and wonder why it's not as good as other people's work. I look at challenges from Hackerrank or Front End Mentor and many times I just feel lost.

With my current job, I work as an English teacher and I'm very fortunate that I have made a lot of good friends that are programmers. I'm drawn to the idea that I can work with technology and I can be creative. These are two things that I get very passionate about and I'm excited that even though I still feel like I suck at programming, this pushes me forward.

Many times, I have a love hate relationship with this profession. There are many times when I have a bug or I spend so much time trying to figure out a problem that I want to run my head through a wall. I guess maybe it's a good thing that the walls where I live are made of brick, so that kind of stops me there, but if you've been down this path I'm positive you know how this feels. Then all of a sudden, you find the solution to this problem and it's the best feeling in the world. Many people that I talk to relate this to feeling like a wizard or a god, because now I've found the solution to this problem and I've made this thing work that has taunted me for so long.

Spending a lot of time with these ups and downs, takes a toll on the body and the mind. After a while, many people feel like they want to just give up. Many times I've wondered if this was the right industry for me and maybe I just need to stop. There are already people who are much smarter than I am, not to mention the AI is coming and is going to take all of our jobs anyway. But, there is something that I have been learning along the way. None of that matters. Also, there is a way to get around our problems when they become too difficult or when we look at our goals and think that they are insurmountable.

The first thing that I believe that helps is to know that when we are feeling this way, we are not alone. Actually, to feel this way is very normal. We all go through this time, and the important thing to realize is that the thing that makes us successful is not failure or success exactly but the thing that makes us actually successful is not giving up. Things will be hard but that's ok. Don't give up.

When I realize that I need to keep pushing and that there isn't any new problem under the sun, but the problem still seems way too big, I need to change my thinking about the problem. Usually, it's my current thinking about the problem that is really contributing to this current problem. Also, as I'm changing my thinking about the problem, I can maybe look at the problem in a different way, but maybe I can start to break that problem down into smaller pieces. I don't really need to worry about conquering the whole mountain right now, but I only need to worry about taking the next step. Taking the next step is a lot less intimidating than climbing the whole mountain. We have a saying, "The best way to eat an elephant, is one piece at a time." We go little bit by little bit and then before we know it, we have gone much further than we've ever thought that we could before.

If you feel down and not sure you can continue, don't worry. Find someone else. Tell them what you are going through. Think about these different things, and remember that tomorrow is a new day.

Semantic HTML Elements vs the DIV

Beau Coburn — Fri, 31 Mar 2023 16:01:39 +0000

So lately, I started to take a Front End Web Development class because I wanted to go over and review basic concepts and also fill in any knowledge gaps that I may have. While taking this class I came across something that we are all very familiar with but I believe that maybe with work within our different tech stacks or focus on Javascript, we are losing sight of more and more.

I remember when I first learned about HTML elements when I was in high school during the 1990's. Yes we actually had computers back then and many of us already had the internet in our house. In my high school, this had to be around 1998 or so, we really had a basic HTML class. We of course talked a bit about styling, but there wasn't any discussion about separate style sheets, and we didn't even touch javascript.

I remember writing my first HTML tags and I thought they were really interesting how with only text I could change the way something looks. If you're reading this, I don't need to tell you how conventions over the decades have changed but also habits have changed as well.

For those that don't know, semantic HTML elements are descriptive and really work to help both the developer and the browser to layout the website in a very clear and coherent way. The very basic form of this is as follows:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1></h1>
    <p></p>
    <h2></h2>
    <p></p>
  </body>
</html>

Really there is more that I could put in the example but this is simple, it's easy for another developer to read and you know very easily what goes where and what everything will look like. Writing semantic HTML is also great for accessibility, such as things like screen readers, etc.

At the same time, habits change and I wonder how much a focus towards Javascript libraries and frameworks has destroyed the practice of using semantic HTML. Typical non-semantic HTML instead of using different tags for each element, is just full of div elements. A typical piece of non-semantic HTML may look something like this:

<div id="header"></div>
<div class="section">
    <div class="article">
        <div class="figure">
            <img>
            <div class="figcaption"></div>
        </div>
    </div>
</div>
<div id="footer"></div>

Source (freecodecamp.org)

Any developer with experience of course will tell you that this code is more difficult to read, many times it's harder to follow the developer's logic, and it is not very accessible at all. So why do we write our HTML in this way, including myself? I am just as guilty of this. This is faster and doesn't necessarily need as much thought maybe, but I think many of the frameworks and libraries really encourage people to write this way.

I'm not saying that we shouldn't use those resources, on the contrary, they are indispensable. I know that there will be some Vue or maybe Angular developer who will say that they don't have this problem at all, and maybe they are right.

I develop with React and of course you don't always have to use the

but it's definitely the default and it is encouraged many times for the sake of convenience. I really don't have any solutions to this problem and I know that this is a problem that has been talked about ad nauseum in many different forums, but if there are people that are smarter than me, and I know that there are mountains of you out there, let's talk about this. Let's try to push for a way that we can have the functionality that we crave but also keeping order with what we write.

freeCodeCamp.org. (2021, April 28). Semantic HTML5 elements explained. freeCodeCamp.org. Retrieved March 31, 2023, from https://www.freecodecamp.org/news/semantic-html5-elements/

Should I Choose Tailwind or Vanilla CSS?

Beau Coburn — Fri, 24 Mar 2023 23:23:28 +0000

So lately, I've started to break some habits. I am not great at managing CSS but I've really pushed myself to keep myself organized. I've tried to use inline styles only sparingly and I've really seen the benefit of using a separate stylesheet and working with classes to give style individual elements. This for the most part has worked pretty well and I like it. One of the main things that I like about this method is that it pushes me to be more organized. Everything has its place and everything looks cleaner and more organized.

Now more recently, I started to look into Tailwind CSS because of course it's the newer trendier thing that seems like everyone is using. I've used a bit of the other CSS libraries out there, of course especially Bootstrap, but I wanted something that can of course make things easier but also give me some flexibility. I don't know about you but I'm kind of tired of everything looking like Bootstrap.

Lately, as I dive into Tailwind, there are of course many things to like about it. While I like the idea of keeping everything very clean, I do like the idea that I don't need to leave the HTML or JSX to see changes. Also, it seems as though I can make changes to style much quicker than with the old way of doing things. There is much less typing than there is in Vanilla CSS to accomplish some of the same things. Also, there are so many more options than there is with Bootstrap and even if I don't like the built in options, which there are very many, I can very easily adjust the style to how I like it.

All of this being said, I'm not exactly sure if I'm sold on Tailwind, and this is for one reason. Tailwind definitely makes the HTML or JSX a bit more difficult to read because now there are many more classes that are written into the elements. It doesn't look as clean nor as organized as it was before and there is a part of that that bothers me. I'm not sure if I just need to get over that or move on and find a different alternative.

Let me give an example, let's say that I want to adjust the margin and the padding of a div. With Vanilla CSS I would create a class in a separate CSS file, and inside of this class I would put all of my adjustments. Then I add the class to that div element which applies that style.

.vanilla {
  margin-top: 12px,
  margin-bottom: 12px,
  padding-left: 12px,
  padding-right: 12px
}

<div class="vanilla"></div>

In Tailwind the same can be achieved by putting everything into the div element.

<div class="mx-3 py-3"></div>

When I insert mx-3, this adjusts the margin of the element on the x axis by 12 pixels, and py-3 adjusts the padding on the y axis by 12 pixels. This is much less code than the Vanilla CSS. Also, if you want to have a separate CSS file you can but it's not necessary. It's also very fast to change styling on the fly.

I know that many people will tell me about Sass or many different libraries, and I think that's all great but right now for me, I think I'm going to try Tailwind for a while.

What in the World is the DOM?

Beau Coburn — Sat, 18 Mar 2023 23:29:22 +0000

So I'm writing this series blogs about topics that I feel like I should know because I hear people talk about them all the time as though I should know, but I have to make a confession, I have no idea what these things are really. Maybe it's because I don't have a proper CS degree, and if I'd only took this program in university, I would have all of the answers. I have of course done quite a bit of self study, and to be honest I think technical reading is a great way to put yourself to sleep or it really triggers my ADD. I want to help others like me get a bit more of a grasp on these kind of subjects.

When talking about the DOM I'll be pulling my information from the MDN. If you don't know about the MDN, you should definitely take a look. It is a project that was started by the people at Mozilla, which is the same people that started the Firefox browser. This is important because groups like this are fighting to keep the web free and open, and I highly recommend that if you can you should support them for these reasons.

Now, maybe you've heard about the DOM or the Document Object Model, but usually when people talk about the DOM, they usually talk in relatively abstract terms. For example, people talk about manipulating the DOM and how the DOM is a representation of the website. All of these things are true, and every website has their own instance of the DOM, but I want to try to get a little more hands on with the concept of the DOM.

The DOM itself is not a programming language but is really an interface that programming languages can use to manipulate and change a website (MDN). In many ways people describe the DOM as like a tree with nodes that represent each part of the site, such as the head, body, p, h1, and img tags. These are all nodes in this tree.

The Document Object Model - Wikimedia

The Document, which is what holds the entire website, actually is a part of the Window Object. When we interact with the Window Object, we can actually start to interact with things like the browser, but the Document inside of the the Window object can be seen in two ways. It can be seen as code inside of a text editor or an IDE, or it can be seen as a web page, just like you are seeing now.

When interacting with elements and objects on the DOM, we have to use DOM interfaces (MDN). If you've ever seen javascript before then you have definitely seen these interfaces. These interfaces are APIs that help us to manipulate the DOM. Maybe you see document.querySelector() or maybe you have seen document.getElementById() these are examples of the interfaces or APIs that are used to manipulate the DOM and they are used primarily be Javascript to make websites and apps to be interactive.

Many times these types of topics can be a bit frightening or even a little confusing. I know that I have definitely struggled to understand them before, and to be honest there are still many things that I am working to make clearer for myself. I plan to continue writing these blog posts to continue to make these topics more and more clear for people who are just beginning in the area of Computer Science but especially Web Development.

Introduction to the DOM - web apis: MDN. Web APIs | MDN. (n.d.). Retrieved March 18, 2023, from https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Wikimedia Foundation. (2023, February 23). Document object model. Wikipedia. Retrieved March 18, 2023, from https://en.wikipedia.org/wiki/Document_Object_Model

Constantly Changing Technology

Beau Coburn — Fri, 10 Mar 2023 19:33:06 +0000

Entering into this area of technology can be equal parts exciting and terrifying. The exciting part is of course we can take tools, especially tools that are pretty commonly and freely available to anyone, and we feel as though we can create anything that we have in our imagination. However, especially for people that are just starting in the industry, engaging in this field can be a little scary because we have to invest in a lot of time and resources to learn this area, but there always feels like there is a threat that all of that time and resources may just go out the window because the next day that technology that you were learning is being replaced by the new hot thing. This is a bit terrifying.

So, what do we do with this problem? For me personally, I've been pouring myself into learning Javascript and even more specifically working on React. Even though React is very important and popular in the moment, I remember when Php was in the same spot. There is always that fear that there will soon be a new Javascript library or even something outside of Javascript completely that will come and make all of this hard work completely useless.

One great thing is that as the technology changes, the core principles and concepts really don't change that much, and I have been able to see this in other fields. For example, a long time ago I worked for quite a while as a sound engineer. During that time working as a sound engineer, there were major shifts in technology and workflow for most in that industry. Most of the engineers of that time were used to working with analog sound systems before that time but now there was a huge push to make everything digital and with a computer interface. While many sound engineers are obviously very technically minded, the idea of changing old workflows many times would introduce a lot of new stress. All of this being said, there was still good news. Even though equipment and workflows were changing, the old principles of dealing with sound waves were still the same. The methods of EQing mics and speakers were really still the same. There really was just an evolution on the old concepts.

I say this because in this field were we joke that every week there is a new Javascript library or framework, Javascript is still Javascript. Computer Science is still Computer Science. The principles within the industry will of course evolve and hopefully continue to grow, but in the end it will not change very quickly. Maybe we need to learn how to apply them differently, but that's ok, because it is an opportunity to still be able to apply what we already know and maybe be able to grow into something new still.

HTTP for Those That Are Afraid to Ask

Beau Coburn — Fri, 03 Mar 2023 22:38:30 +0000

I'm not sure how many of you have gotten a good introduction to HTTP when you were learning programming or web development, but I have to be honest, for me it's something that was always a bit mysterious to me.

I've recently started taking some Front End Development courses and this topic came up. I wanted to write about it not because I'm an expert but because I myself was someone who felt like they should know what this is but didn't and at the same time I was afraid to ask and feel dumb. I am a newbie. Let me try to explain this in words that even I can understand.

For my resources, I'm going to be using the MDN and Wikipedia. If there are other sources that you think I should use, please by all means be nice but please share, because at some point there may be another newbie just like me that comes along and they, along with myself, may benefit from the resources that you bring.

HTTP, or Hypertext Transfer Protocol was a technology that was invented in the early days of the internet by the famed Tim Berners-Lee and his team at CERN back in the beginning of the 1990's. They developed HTTP in order to support their idea of the "World Wide Web". (Wikipedia)

There are a few things that I really want to focus on when I talk about HTTP. I want to talk about the protocols that are built into HTTP, such as TCP and UDP, but I also want to talk about the main methods of HTTP, and the status codes that are important to HTTP.

Like I mentioned, there are two different protocols that underpin HTTP called TCP and UDP. TCP, or Transmission Control Protocol is the older protocol when it comes to usage within HTTP. Since the beginning TCP has been relied on over other protocols, because TCP has always been more reliable. However more recently UDP has started to be implemented in the recent transition to HTTP3. (Wikipedia)

Essentially, the process that HTTP uses to deliver the internet to us is a series of requests and responses. While there are a lot of methods that HTTP uses to move and manipulate data, there are four main methods that are used, POST, PUT, GET, and DELETE. Essentially, with POST the web server is looking to create new data. With PUT, the server is going to change existing data. GET is exactly as it sounds as it is retrieving data. DELETE is obviously removing data. As I said, there are also other methods but these are the most common. (MDN)

Finally, I wanted to talk about the status codes that HTTP uses to let the user know what is happening with their requests. These status codes come in the form of three digit numbers that HTTP uses to communicate to the user what is going on with the requested data. The 100 level numbers are information requests, like status code 102 Processing means that the request is being processed and there isn't any response yet. 200 level codes indicate successful responses. The most important of these is status code 200 OK meaning that the request has been processed successfully and as expected. This may be the request that we receive all the time but we never actually see it because all we see is the page that we actually requested, but this code is being displayed in the background. 300 level codes are redirection messages. The 400 level codes are for client errors. Of course the most common of these is the 404 Not Found. This is the code that all of us are very familiar with because it maybe the most forward facing of all of the status codes. We know that if we come across this status code, then we've come to the wrong place. Finally is the 500 level codes. These are for the server error responses. If you ever see a 502 Bad Gateway, this means that while the server was processing the request, it got an invalid response. (MDN)

I know that this blog post is not enough to explain about all of HTTP, nor was it supposed to. I know that I left out crucial parts and someone will need to give some corrections. I really wanted to share this because this is such an important piece of technology that almost all of us see everyday but we never know what it's for. Hopefully this was helpful to you, and please feel free to discuss down below.

An overview of HTTP - http: MDN. HTTP | MDN. (n.d.). Retrieved March 3, 2023, from https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

Wikimedia Foundation. (2023, February 26). HTTP. Wikipedia. Retrieved March 3, 2023, from https://en.wikipedia.org/wiki/HTTP

Blending Humanity with Technology

Beau Coburn — Fri, 24 Feb 2023 18:45:29 +0000

I know what you are probably thinking...

ChatGPT and I'm going to talk about AI and it's going to either save us or enslave us all.

Actually I think we have a bigger problem/opportunity that's in front of us already and I literally never hear anyone talk about this, because we are all focused on being destroyed by the Terminator or being unemployed and homeless.

You see, ever since the beginning of the "Information Revolution", there has been a strong focus on developing technology just for the sake of developing technology. While many things of course would benefit humans, it wasn't necessarily important that it would actually do so. If it was shiny enough and new enough and dazzled enough people, then that alone would be enough for that technology to gain acceptance and be pushed out to many people.

I believe we have a tremendous opportunity in front of us though. There is a whole category of science that is focused on what it means to be human. Many times this science gets downgraded in society because it's only "soft science". Many times psychology, sociology, politics or anthropology get discounted because there is a lot of question about how do these disciplines actually move us forward. Many times it's hard to measure progress with these sciences because there isn't hard numbers that we can look at and see concrete progress. However, these fields should not be ignored because they directly affect the human condition.

Imagine the things that we could accomplish if we were able to integrate technology more with psychology. We could help improve people's psychological condition, whether they start from a good point or not, in a very noninvasive way. Many times we hear about how maybe technology is affecting people's psychology in a negative way, through too much screen time or social networking's impact on the brain. Instead, maybe we can use technology to help people to examine the things that bother them, make them worry, scare them, or cause problems in their relationships. We can do this in a way that is engaging and not intimidating.

We also have access to big data. What if we were to start to analyze the types of videos that get posted online, try to map those to certain locations on a map and then try to ask some questions about those relationships? What could we learn from the world around us if we did those things and then had a discussion about these questions?

The thought here is not to make people feel like they are only being examined or psychoanalyzed, but actually looking to see if we can solve some of the bigger issues in our world. While it's always nice to have a nice shiny new gadget, imagine if that gadget could help us with the real problems in our lives.

Career Changes

Beau Coburn — Sat, 18 Feb 2023 20:04:00 +0000

What do you want to be when you grow up?

This is a question that every little kid hears when they are growing up and then there is this part existential and part practical question that forms in the mind.

What do I want to be when I grow up?

My stock answer was normally that I needed to grow up first, because in reality the way my brain works, this is a very difficult question. When I was young, there were so many things that would capture my attention and my imagination, and I knew in those moments that I just needed to do that specific job "when I grew up".

Now as an adult I have definitely done a few things. I spent time as a sound engineer for live show, which I absolutely loved this job. At the same time, I spent time working with a production house that developed commercials for business clients, and this too was really great. Later I was a General Manager for restaurants, and even though that was a difficult life, I really liked the aspects of running a business.

The one thing that really jumps out to me is that there was a lot of change during this time and especially when I was younger I felt like I was lost. Later in life, when I could finally get away from all of these thoughts of what I should do with my life and my career, I started to take time to listen to myself. I started to analyze what were the things that I enjoyed about all of the things that I've done in the past. From sound engineering and the production company, I learned that I liked being technical and creative. Also, from running the restaurants, I learned that I really liked running a business. So when I was analyzing myself, I was thinking, "What could I could I do that is creative, technical and run a business?" Programming and especially web development stood out to me as a very strong possibility.

I know that recently, there are more and more people that are starting to become more interested in programming more later in life. I hope that when I write, I can write to you who are wondering what to do. Wondering if you are making the right decision to try this new technical career that can be so scary and intimidating. There are times when we are learning to code that it is very easy to get very frustrating and confusing and discouraging. I think all of these moments are very normal. You hear about these guys that finish a program and learn how to code and get a job in three to six months, and you wonder why am I not smart like that. Don't worry, we are kindred spirits. You are not alone. Don't give up. Maybe you also wonder, "Can I really start a new career at my age?" "Will they think I'm too old to be a junior developer?" "How do I feel being a junior anything?" Again, you are not alone. These thoughts are normal but that does not mean that we cannot go through this time and come out successful on the other end.

You know there is a very famous quote by JRR Tolkien, "Not all who wander are lost." Even though maybe at a certain time that quote seemed a little cliche in the past, I think that quote definitely applies to many of us today and now. We have taken a long path to get to where we are now, but you know what? All of that experience that we have in the past, we can use that and channel that into our new lives and new careers in the future. It is ok. It is never too late to start. Just start and don't stop once you have.