DEV Community: Amy Oulton

Set Up & Use A MetaMask Wallet on the Polygon Network

Amy Oulton — Wed, 20 Apr 2022 23:11:16 +0000

One of the first things you ever want to do when getting started in the Web3 space is to set up a “wallet”. A crypto wallet is just what it sounds like — a virtual wallet that stores your tokens for different cryptocurrencies. Wallets have also become your way to log in and authorize yourself with decentralized applications (DApps). So with that said, it makes sense why having a wallet of your own is one of the first steps you need to take.

Why MetaMask?

There are a lot of different options when it comes to choosing which wallet you want to set up. Personally, I really like MetaMask because I find it very user-friendly in its interface and extension, and it’s widely supported. I often come across a lot of smaller DApps that only support login with MetaMask.

It’s definitely one of the most popular wallets currently being used, and you won’t hesitate to find any amount of tutorials on it.

Setting Up Your Wallet

Firstly I have an entire video tutorial walking you through this process, so if you’re a fan of video tutorials, be sure to check that out! Otherwise, let’s get started:

Step One: Install MetaMask

You can install MetaMask as a browser extension at metamask.io. It’s supported on Chrome, Firefox, Brave & Edge, so as long as you’re not stuck in the days of Internet Explorer, you should be good! 😂

If it’s your first time setting it up, I highly recommend watching the video of the Secret Passphrase. It’s incredibly important to understand what it is and to keep a copy of it safe and secure.

Once you’ve finished setting it up the extension should look like this:

Step 2: Add the Polygon Network

You can add the Polygon network easily by going to https://polygonscan.com/. Scroll down to the footer and click “Add Polygon Network”.

This will prompt you in the wallet to add the network. It will flag a warning at the bottom asking you to verify that the chain ID yourself. The Chain ID for Polygon is 137, and it’s always a good habit to get in the habit of confirming that ID is correct for extra security when you aren’t manually adding a network yourself. The network is called “Matic Mainnet”, since Matic is the currency of the network.

If you prefer to manually add the Polygon network, you can do so by clicking on the “Ethereum Mainnet” in your wallet and then selecting “Add A Network” at the bottom of the dropdown menu.

You can fill out the new network as follows:

Now your network should be set up and look as follows:

And that’s it! As far as the Polygon network, the setup portion is complete. You can add money to your wallet by clicking on “Buy”. It will assist you through Transak, which is their integrated way to purchase crypto.

Step 3: Using The Wallet To Buy on OpenSea

So now what? Well, that depends on you. For the sake of this tutorial, we are going to discuss purchasing NFTs on OpenSea. OpenSea is one of the largest marketplaces for NFTs and it supports the Polygon chain. However, they don’t process payments with Matic but actually use ETH on the Polygon chain.

This is where a lot of people get confused but don’t worry, I’m going to walk you through it.

In your wallet, you’re going to hit the “Swap” button. You will need to have the amount of Matic you want to convert already in your wallet, plus a little bit extra for the gas conversion fee.

Once you’ve done that, enter the amount of Matic you want to swap to ETH, and search for ETH (Ether) in the “Swap to” section, as shown below:

You will then see something similar to this:

This highlights the conversion: how much ETH you’re getting for the Matic you’re converting, as well as the estimated gas fee. Once you’ve confirmed the amount is correct, you can go ahead and hit swap.

I want to point out that this is actually WETH (Wrapped ETH). You can read more about OpenSea using WETH here.

Once you’ve converted the amount it will show it as either ETH or WETH, depending. They have the same contract address and are the same token for the sake of working with OpenSea.

How it displays after I swap the token (as ETH):

How it displays when I “import” the token (as WETH):

Now, you can go to OpenSea and purchase the NFTs of your dreams! Connect OpenSea with your wallet and you’ll have your OpenSea account. The first time you make a purchase on the Polygon network you’ll need to “Unlock” the currency, which is a one-time fee. Then you’re free to buy as you wish!

If you found this article helpful and enjoy my educational content, I want to express my thanks, as well as share that I offer a lot of exclusive educational content for holders of Boos!, an NFT project that I lead. It would be fantastic if you would check it out, and it’s the perfect NFT for newbies because any holder gets access to the locked section of our discord where you’ll have access to chat with our devs and creators, as well as access to all the educational content that is exclusive to our holders (and we have lots more coming)!

Why Coding Is Crucial To The Future Of Business

Amy Oulton — Thu, 10 Feb 2022 18:04:07 +0000

This article was originally published on CodeCast.

Knowing how to understand even basic code can seem foreign and confusing to someone who has never approached it before. Programming as a whole can be intimidating to approach because it’s vast and varies greatly from industry to industry. As we move forward, the need for people who can code continues to increase in demand. But what makes it such a critical part of business?

Gone are the days of paper and pen. Even if you’re a small business and you prefer more traditional approaches to some aspects, it’s impossible to avoid doing something online. But for the most part, almost every technical aspect of business is now done online or via technology, and more specifically, through different kinds of software.

Of course, this means that most businesses need to have a developer at some point. But how does coding fit into this picture outside of requiring developers?

Knowing The What’s and The Why’s

Even if your business doesn’t have any developers permanently employed, knowing how to communicate what you need from developers is incredibly important. While you don’t need to know how to code, knowing how the moving parts of development works will greatly impact your ability to ask for what you want. Additionally, being able to have a solid understanding of what is going on on the development side of your business will make the communication between yourself and your team's way more fluid.

In the current climate, it’s nearly impossible to have an effective business without an online presence, and the demand for a solid online presence is only likely to increase. Understanding the behind-the-scenes will not only aid in communication within large companies but allow smaller businesses to be able to take advantage of the online market effectively. Even basic coding courses can allow you to work effectively with low-code platforms to be able to create the necessary pieces for your business.

Small things like being able to update your own website as needed without having to outsource or rely on external help will impact the efficiency of your business, as well as frankly make you appear way more professional.

Realistic Timelines and Goals

Coming up with ideas for your business and goals for your company's growth is an essential part of running a good business. However, often there can be a strong disconnect between what someone wants done and how to get it done. This issue is usually seen by looking at projected timelines. Perhaps you have a new idea for your business that you want to be able to get out by the end of summer, and you approach the developers with that information. The developers then respond telling you that with the current workload, that deadline is unrealistic.

Being able to have a sense of what goes into developing something will allow you to create more realistic timelines, and allow you to better communicate with your developers to create a timeline that works for both them and the business. There are a lot of industries that are known for putting a lot of pressure on their developers to meet set deadlines that sometimes are just not possible.

If you’re familiar with the launch of Cyberpunk 2077, you are aware of the type of issues that development timelines can create. Cyberpunk was delayed a total of three times with the launch initially anticipated in April of 2020 and was eventually released on December 10th, 2020. While developmental delays are nothing new in the gaming industry, the reason this specific game caught so much attention for its delays was that the game was being advertised and hyped way before it was ready to do so. Some developers even came forward to explain what they believed went wrong. The greater the people in charge’s ability to understand what goes into developing something, the greater the chance of your timelines being more accurate for the company as a whole.

Cyberpunk was unfortunately released with a lot of issues that they are still fixing today. In addition, they were forced to drop features that had previously been heavily advertised, upsetting a lot of people who had pre-ordered the game. While this is a debated topic in the gaming industry and there is a lot of speculation around what went wrong, I chose to use this example because it showcases the importance of good communication and understanding of the moving parts of the business in all aspects.

Problem Solving Skills

Knowing how to solve problems effectively is an important skill and one that isn’t as common as people might think. While we have an entire blog coming up about how to think like a programmer, for now, know that coding teaches you how to problem-solve effectively. Once you get past learning the language, an incredibly large volume of writing code is just solving the how and the why. You need to figure out how to make something work despite not having any pieces, or perhaps only broken pieces.

Taking some basic coding courses can help sharpen your brain into learning to think in different ways when looking at a problem. It’ll train you to break things down and view things from different perspectives. Considering a lot of businesses exist to help people overcome a problem or fill in a need, it’s easy to understand why business and problem solving go hand in hand.

Coding is also a much more creative field than people think. Often you’re presented with an idea, but how you get from point a to point b is entirely up to you. You can give a large group of developers the exact same problem, and most of them would solve it differently from one another. Learning to approach things in a creative way to come up with solutions is what developers succeed at.

Patience and Resilience

If you’re going to code, you’re going to need patience, and to be very comfortable with being stuck. Even the most senior developers get stuck on problems for days on end, completely unsure of how to proceed. This was personally one of the most difficult things I had to learn to adjust to when I began to code. Learning how to separate being stuck and being “bad at something”, is a difficult skill to master. Coding can have a way of making you feel incredibly dumb.

But the more you do it, the more you realise that you learn a lot in those moments you feel like you know nothing. And beyond the actual code, you learn how to be patient and push through those moments. This is a skill that will help anyone in any aspect of their life, but in the ever-changing world of business, it can be invaluable. The good news is that there are now endless amounts of free ways to learn to code!

Regardless of what business or industry you belong to, knowing even basic coding skills can make you that much more valuable. The online world is only growing as time goes on and with it the need for developers.

Create A Loading Spinner with CSS Keyframes

Amy Oulton ・ Feb 4 '22

#css #webdev #tutorial #beginners

For more of my content, follow me on like Twitter & CodeCast!

Create A Loading Spinner with CSS Keyframes

Amy Oulton — Fri, 04 Feb 2022 20:13:05 +0000

A great way to level up any application your building is to create a simple loading animation. Today, we're going to make use of free resources and pure CSS to create a loading animation of our own.

Of course, this is not integrated with anything. Integrating the spinner with actual loading time in the app is a whole other tutorial, but for now, we're going to worry about creating the actual spinner!

For this spinner I got this simple spinner of Pixabay (thanks gorkhs).

We start with just a very simple structure in our html.

<div class="spinner">
  <img src="./rainbow.png" class="img"/>
</div>

Tip: Make sure you include the correct path and name to your image.

To create the animation, we will use keyframes and the transform property. Below, we'll create a keyframe animation called spin:

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }

Now, let's style our actual spinner!

We created a div that contains the image in our HTML file, and assigned it the class of spinner. We will give it the following properties:

 .spinner {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
 }

Now, for the actual image:

 .img {
   height: 150px;
   animation: spin 2.5s linear infinite;
 }

Now we have a working spinner!

Want to see the full tutorial? Watch the YouTube video below or watch in on CodeCast to get access to all the code in the Player!

For more of my content, follow me on like Twitter & CodeCast!

You can also read my last blog here:

Create A Portfolio Website with only HTML & CSS

Amy Oulton ・ Jan 13 '22

#html #css #webdev #codenewbie

Create A Portfolio Website with only HTML & CSS

Amy Oulton — Thu, 13 Jan 2022 22:50:53 +0000

I have previously written about how important branding yourself as a developer is. Continuing along this line, I want to dedicate a couple posts to portfolio creation. Today, I'm going to talk about actually building your portfolio. The next article will be on creating content for the portfolio, so stay tuned for that.

I'm sure it comes as no surprise that having somewhere to showcase your work while simultaneously showing off your skills is one of the most effective ways to well - show your abilities.

But undergoing building a portfolio website is a big task, one that often seems like more time than you may have to dedicate. So, with that in mind, I have created an entire Series that brings you through creating the website from coming up with the design of the website, to actually deploying the built out website.

The tutorials span four hours and are broken up into twelve parts:

The Series is available as a full course for free on my CodeCast!

The Series

We start by designing out the website using Figma! This was my first time using Figma to actually design (as opposed to coding off of others designs on there), so it was a bit of a learning curve. There is plenty I would change in hindsight, and I address that throughout the Series. However, I think being able to have some basic skills in Figma as a developer is important, because having any design skills under your belt can really set you apart.

The final product looks like this 👇🏻 You can find the design in the Figma community.

Throughout the Series we touch on:

building the structure of the application and styling it with Bootstrap and handwritten CSS (primarily handwritten).
changing SVGs to match our styling using a free editor
writing media queries to make our site responsive
creating responsive iFrames
adding in a typing animation to our heading
deploying the site on Netifly

We use the following free resources that I highly recommend:

Figma: one of the most popular resources currently available for designing. I use this all the time as a developer, as our designer uses Figma!
Pixabay: Pixabay is a widely used resource where you can get assets to use without attribution!
Coolors: I just discovered this website when I was building this project and it's fantastic for anyone who is not a designer (or even those who are). It lets you build colour palettes as well as browse pre-made colour palettes.
UXWing: This is an attribution-free and entirely free to use website with a collection of popular icons. It's honestly fantastic and I hadn't heard about it before this application!
Netifly: This is what I used to deploy my application!
SVG Editor: How I edited the SVGs!
CodeCast: This is what I used to make my tutorials and build my Series out on. It includes the media and the code together and the Studio (recording software) is available on Mac, Windows & Linux!

If you build this project out, I would love to see what you come up with and any changes you make along the way! The final version of my product can be found here!

You can also clone the GitHub repo with all the code, but I would highly encourage you to avoid this, and build it out by following along the tutorials.

amyoulton / my_portfolio

For more of my content, follow me on like Twitter & CodeCast!

You can also read my last blog here:

Learn JS Async/Await, Fetch Requests & APIs by Building a Trivia Game

Amy Oulton ・ Jan 13 '22

#javascript #tutorial #beginners #programming

Learn JS Async/Await, Fetch Requests & APIs by Building a Trivia Game

Amy Oulton — Thu, 13 Jan 2022 00:17:12 +0000

This tutorial is available as a free Series on CodeCast!

API's are intimidating when you're learning to code, especially ones that come with really complicated docs, needs unique keys, or require authorization.

Instead of jumping headfirst into a whirlpool, we're gonna wade in slowly into the world of API's by using a free and extremely simple API from Open Trivia DB.

We're also going to go over making requests from the API using JavaScript's fetch requests while making use of await/async.

You can find the entire collection of Casts in a free Series on CodeCast. The Casts contain both the video tutorials and all the code that is written, so it's very much worth checking out!

Step One - Connect The API

In this section, we're going to connect to the API. You can watch it on the Player where you can access the code, or watch just the tutorial portion above!

Grabbing the API URL

This API is incredible simple. It doesn't require tokens or any unique identifier. You simply provide the URL and make your requests directly to the API following their conventions.

We start by creating the .js file we will be writing all our code in, which I named "app.js".

Inside, we're assigning the url we retrieved from the API to a variable. Note that the API has a 'helper' that lets you build the unique url to contain specifically what you want.

These are the specifications I use to get the URL below:

  const url = 'https://opentdb.com/api.php?amount=100';

Now we can begin building out our fetch request. We'll start with the shell of the function:

 function getTrivia() {
 }

Inside the function, we're going to want to make a request to the url. Once we get a response from the API, we can then make use of the data that we returned:

 function getTrivia() {
   let response = fetch(url);
   let data = response.json();
   return data;
 }

However, if we were to run the function above, we would get some big problems. The code will run too quickly for the data to be retrieved by the time we're asking for it. We will not be able to be use to .json() to parse the response as it won't exist yet. This is where async/await comes in.

We will begin by placing the async keyword at the very beginning before the function declaration. This simply signifies that the function will always return a Promise. If you're not familiar with Promises, you can read up on them here.

So now our function will look like this:

 async function getTrivia() {
   let response = fetch(url);
   let data = response.json();
   return data;
 }

Now, we use the await keyword to ensure that JavaScript waits until that specific Promise is fulfilled and returns its results. We want to use it in two places within our function. Most critically, we want to use it to ensure that we don't move forward with parsing the response until the response exists. In other words, we want to add it to our fetch request.

We also want to add it to our parse request so our data is for sure parsed before it gets returned to us. Once those are done, we will return the data as normal. Our function now looks as follows:

 async function getTrivia() {
   let response = await fetch(url);
   let data = await response.json();
   return data;
 }

Now, we'll call the function to retrieve the data. But what do we do with that data? Because it's a Promise, we can use then .then() chaining method on the function to tell our application what we want to do next. In this case, we're simply going to just console.log out our data so we can ensure that our function is running smoothly. This call will look like this:

 getTrivia().then((data) => console.log(data.results));

With the result producing:

Now that we have our API connected properly, we can begin building out the rest of the application! To find the rest of the content, you can watch them on my CodeCast Channel, by purchasing my free Series, or on YouTube (code not available for copying on YouTube).

Happy Coding 👩🏻‍💻

For more of my content, follow me on like Twitter & CodeCast!

You can also read my last blog here:

How To: Create A Random Number Generator w. JavaScript

Amy Oulton ・ Jan 7 '22

#javascript #tutorial #beginners #programming

How To: Create A Random Number Generator w. JavaScript

Amy Oulton — Fri, 07 Jan 2022 19:56:35 +0000

Today we're going to build out a random number generator using JavaScript. Random number generators are a fantastic beginner JavaScript project. You get to work with some of the important basics while creating something that serves an actual use!

What Are Random Number Generators Used For?

I've been asked before about when we would actually use a random number generator. Sure, it's a fun quick, project, but what are some of the real life use cases?

Typically, you would use it as a standalone app like we've created here. It would likely be used within a larger application. A function such as randomNum() would return a random number, which could in turn do something like grab a specific item from an array (at the index of the random number returned). This allows you to create a basic lottery style system within an application.

I feel it's important to mention here that there is a lot of conversation regarding exactly how random these built out random generators are. When it comes to the way we're building it out here (using Math.random()), the answer is well, not so random. It's technically pseudo-random. I'm not going to delve deep into the mechanics behind that but if you're curious I would highly recommend this article by Daniel Simmons.

With all that being said, let's get started building.

The Build

I've created a follow-along video that I originally recorded on CodeCast. I would recommend watching it on CodeCast over YouTube because you can follow along with the code and copy it as I write it (as seen in the gif below)!

If you prefer written tutorials then keep reading!

I went ahead and started with some simple HTML:

 <div class="cont">
   <h2 id="number">0</h2>
   <button class="btn" id="generate">Random Number</button>
 </div>

I also added in some styles because they never made anything worse! 🦄

 body {
   background-color: #00242e;
 }

 .cont {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 100px;
 }

 .btn {
   background-color: #32edd7;
   border: none;
   padding: 16px 32px;
   border-radius: 4px;
   font-size: 16px;
   cursor: pointer;
 }

 .btn:hover {
   background-color: #2ad1bd;
 }

 #number {
   font-size: 28px;
   color: pink;
 }

Next we'll begin writing out our JavaScript!

We start by writing two variables, num and btn and assign them to the correct node.

 const num = document.getElementById('number');
 const btn = document.getElementById('generate');

We'll then go ahead and create our function. We'll be using the built in .random method on the Math object.

 const randomNum = () => {
   return Math.floor(Math.random() * 1000);
 };

Next, we wanna add an event listener on the button to listen for whenever it's clicked. We can do that as follows:

 btn.addEventListener('click', () => {
 });

Now within the body of this, we want to add the logic that replaces the current num with a random number, as produced by the randomNum function.

 btn.addEventListener('click', () => {
   num.innerHTML = randomNum(); 
 });

Make sure you assign it to num.innerHTML and not num. Otherwise, we'll be overwriting the num variable and not updating the actual number visible on the page.

And there we are, a functioning random number generator! You can check out the built-out product in the codepen below!

For more of my content, follow me on Twitter & CodeCast!

You can also read one of my latest articles on branding yourself as a developer below:

How To: Brand Yourself As A Developer

Amy Oulton ・ Dec 15 '21

#webdev #beginners #productivity #career

My Top 10 Visual Studio Code Extensions

Amy Oulton — Wed, 05 Jan 2022 21:30:29 +0000

This article was originally published on CodeCast.

Visual Studio Code is one of the most popular code editors and a general favourite among developers. It’s definitely our editor of choice here at CodeCast. Through our never-ending pursuit of making our daily workflow easier, we have accumulated some Visual Studio Code extensions that we absolutely love. Without further ado, here are our top ten extensions:

~~Bracket Pair Colorizer 2~~ This is now deprecated and no longer being supported. Instead, this is now a native feature in VSCode.

Matteo Sacchetto kindly provided information on how to ensure it's enabled!

"Since the vscode release 1.60 bracket pair colorisation is natively supported, so the bracket pair colorizer extension is no more needed. To enable it you can simply enable these two settings of vscode:"

  {
   ...
   "editor.bracketPairColorization.enabled": true, 
   "editor.guides.bracketPairs": "active",
   ...
  }

EsLint: This is one of the most popular extensions available, and for good reason. If you’re not familiar with EsLint it helps you "to find and fix problems in your JavaScript code". This is incredibly valuable if you work with JavaScript (or a JavaScript framework), and I would highly recommend it. ‍
Language Snippets: This one is more of a category of extensions, where you would install the applicable ones for the languages you work in. Currently, on my machine, I have some snippets like EJS Snippets, React/Redux Snippets, and Ruby Snippets. They help add-in integrated language support like auto-closing tags, syntax highlighting and suggestions, and other features depending on the specific extension. This is very helpful when working with templating languages (like EJS) that don’t have auto-closing tags built into the editor.‍
Prettier +: This is a popular extension that auto-formats your code for you on save. It doesn’t work with all languages but works with a large number of the more commonly used ones. I personally really love this auto-formatter, but I will caution you that if you're a student, only download it once you’re comfortable with the language you’re working in because it will make you lazy about adding things like semicolons, and help structure your code automatically with proper indentation.
Git Lens: This is another very popular extension and is a fantastic tool if you work with a team of developers. This extension provides information about the code such as who wrote it and when it was changed directly within the editor, as opposed to needing to search for this information on GitHub. It makes it much easier for teams to discuss code and possible problems as the details of the code changes are directly available.
Live Server: This was another extension I relied on heavily when learning to code. It starts a live server so you can see how your code will appear in the browser. This was extremely helpful when learning HTML and DOM Manipulation. It starts with a simple click and updates the changes on every refresh of the browser window.
‍Footsteps: Footsteps is an extension that helps you keep track of where you were just working within a file. If you are working with hundreds of lines of code, and are scrolling back and forth between sections, this could be an incredibly helpful way to help you quickly find your place. It highlights the area or line of code you were just working on, slowly fading the line as you move away and write more code.
Peacock: This is an extension I just discovered, and I am honestly very excited about it. I am someone who likes having multiple instances of VSCode open at once, but it can become confusing about which window is which after working on them for a while. Peacock assigns a unique border colour to each of the instances, so you will be able to distinguish between them a lot easier. It’s a minor change, but can be incredibly helpful!

Icon Packs: What first seemed to be a purely aesthetic extension actually proved more valuable than I initially expected. It adds a substantial amount of unique icons for a large variety of different file types you find within languages. This makes it easy to quickly spot the file type you’re looking for. I currently use Material Icons, but there are a large number of them available and you just have to find which one is right for you!‍
Themes: As per most popular applications, you can customize your theme. However, VSCode takes it a step further and the customization capabilities are incredible. There are a ton of ready-made and available themes for download on VSCode that make reading your code a lot easier. Some of the popular themes are Dracula, Atom One, and the one I am currently using, Andromeda. The main draw of adding an additional theme instead of the default one is how much it colorizes or textually changes different parts of your code, so you easily understand exactly what you’re looking at.

There is no shortage of extremely valuable extensions available on Visual Studio Code. You can easily search to find exactly what you’re looking for, or for extensions that help make writing in your preferred language easier. But if you’re new to extensions, hopefully some of our faves will help get you started and make your coding that much easier!

For more of my content, follow me on like Twitter & CodeCast! You can also read my last blog on branding yourself as a developer here.

Why Learning To Code Should Be Your 2022 Resolution

Amy Oulton — Wed, 22 Dec 2021 21:42:06 +0000

This blog was originally published on CodeCast.

To a lot of people, a new year means new potential. It feels like a fresh start and the drive to make changes and do well is at an all-time high. A lot of that is because after the madness of the holidays and reflecting on the year behind us, we’re able to take a slight break before going back into our routine - and often, we’d like that routine to change.

Resolutions are nothing new. They have been around for a very long time and even though a lot of people make resolutions they end up breaking, the idea behind the resolution is what we find important.

Striving to grow and change and be a better version of ourselves is something we should all be doing throughout our entire lives. It keeps everyone constantly moving forward and adapting, and I think that’s important. It also gives us a chance to reflect on our lives and see what we’re happy with, and what we want to change.

Last January, I found myself doing exactly that - wanting a change. I had been in the pet & retail industry for 11 years and was itching to do something else. I had previously earned a degree in Creative Writing but hadn’t found a job that I felt matched who I was. I wanted a job that challenged me and also allowed me to not dread coming into work every day.

I’d always loved working with computers, and after rebuilding my husband’s gaming computer for Christmas last year, I started thinking more and more about finding a profession within the tech industry. I just didn’t yet know exactly what I wanted to do, so I started weighing my options and talking to people who were also in the industry. This led me to have a conversation with a friend who has previously gone through a local coding bootcamp. She felt it was the best choice she had ever made for herself. I begin wondering if it was perhaps also the right choice for me.

Fast forward to March and I was attending a coding bootcamp. The bootcamp ended up becoming entirely remote due to the pandemic, where we relied on CodeCast within our school to learn, something I felt helped out the remote learning process immensely. I graduated from the bootcamp and several months later, applied for an internship working for CodeCast. Now, over a year later, I still work here full-time as a developer and content creator, and for the past year, haven’t spent my time dreading going into work. Now you might be thinking “that’s cool and all, but how does this apply to me learning to code?”.

What we need to figure out is what path is right for you. While there’s a ton of value in learning even a little bit of programming knowledge, that doesn’t mean it’s necessarily the right career choice for you. Being a developer isn’t for everyone (though I suspect if you clicked on this article, you have your suspicions it could be right for you). However, even if you don't think it's your path, learning basic coding skills is becoming increasingly important for roles outside of pure development. It also gives you the opportunity to start your career as a developer, and transition into different roles based on what feels right for you.

I’ve previously written about why coding is crucial to the future of business, and a lot of the points I could make in this article would overlap those, so I would encourage you to read that article as well! However, there are a few key points I do want to touch on about the value of learning to code in the coming year.

An Invaluable Skill - For Free?

While many people choose to go my route and take a coding bootcamp, or more intensively earn a computer science degree, a lot of people are now getting employed in developer roles after teaching themselves to learn using free online resources. Now, before everyone starts debating the value of the different paths in the comments, I want to point out that each path is different and serves a vitally different purpose. The path of a person with a CS degree versus a self-taught dev might look similar on the surface but are often entirely different in application. How you choose to learn and gain skills is entirely based on your desired profession, role, and proficiency in specific areas.

However, for those who are interested in learning at their own pace online, it’s important to note that there is a lot of success in the industry from this. As devs, our roles are more unique as the majority of us are always learning on the go. We have the foundation to find the solution, but a significant part of our job is to problem solve and learn. This means that starting a career using free online resources is entirely possible. Sites like freecodecamp, Codecademy, Scrimba, and CodeCast are fantastic resources to get started!

Places like CodeCast are two-fold because you can learn and create, so you can brand yourself and create content while your learning to begin building out your portfolio and increase your chances of landing your desired role!

What do I learn?

That entirely depends on what career path you choose! If you want to do web development you might want to focus on things like JavaScript and a backend language like Python whereas if you want to do things like app development, you might want to learn JavaScript than focus on things like React Native!

There are a ton of fields within the tech industry that require entirely different stacks, languages, and specific sets of knowledge, so do some research to figure out what you might be the most interested in. The good news is that a lot of the time, these languages overlap between fields, so you can alter your course or change your mind without having to start entirely from scratch!

The Industry Itself

I want to touch a little bit on the industry and the leading desire that causes a lot of people to pursue a job within it. There's a lot of conversation surrounding compensation and freedom in the tech industry. Being a developer is often seen as a very lucrative career choice, and often that is very true. The potential to earn money absolutely is there. It also is often a very flexible career choice in that companies tend to be more lenient with schedules, vacation, and where you work as opposed to other industries.

All that being said, I’ve known people who have entered this industry for that reason alone, and I would discourage you from only changing career paths for the dollars signs. Money is a great motivating factor and it is important, but the industry itself is competitive, a lot of work, and requires a certain type of person to be successful as you have to get really comfortable with being uncomfortable.

Learning to code was extremely frustrating at times. JavaScript in particular had a way of really messing with my self-confidence and making me question everything. However, despite the downs, there were (and are) a lot of things I absolutely love about this industry. Firstly, it’s a lot more creative of a role than one would expect, even if you’re hiding away in the backend. You can give 10 devs the same problem and they would likely all solve it differently. Languages have syntactical rules, but the implementation requires creativity, problem-solving, and ingenuity, and that’s half the fun!

All in all, there are a lot of pros and cons, as there are with any industry, but if you’re interested in learning to code, just start! You’ll decide how you feel along the way, it’s a valuable skill regardless of which path you take, and you get to be a part of a fantastic online community!

For more of my content, follow me on like Twitter & CodeCast! You can also read my last blog on branding yourself as a developer here.

How To: Brand Yourself As A Developer

Amy Oulton — Wed, 15 Dec 2021 22:24:56 +0000

This post was originally published for Codecast.

Branding yourself online has become increasingly important as landing a role in the tech industry is constantly getting more competitive. If you want to freelance, creating a personal brand is the absolute best way to land roles, but it’s still important for those of us looking to gain more traditional roles. Creating a strong online presence that is clearly branded will help employers and clients understand exactly what you can do for them. It will also create a strong sense of skill and authenticity, as well as display your communication skills. Plus, it’s a great way to network.

So what exactly goes into creating a personal brand? The good news is that you don’t need to be a marketing expert to accomplish this, you just need to spend a bit of time.

Figure Out Who You Are

I don’t mean this in the existential “who am I and what is my purpose here” way. That’s a whole other ballpark! What you want to do is figure out exactly what you’re brand is all about. Are you a developer? A designer? Are you specified in your stack or interests? Is there a specific language you’re extremely proficient at? Figure out exactly what you excel at and want people to know you excel at. Once you’ve decided that, you have the core foundation of your brand. Now we just need to establish it.

Be Everywhere

Sign up for all the core and popular social sites that are relevant to your field. For example, as a software developer, I have accounts and am active on LinkedIn, Twitter, dev.to, CodeCast, Medium & Hashnode. I use these to discuss relevant topics as well as showcase my skills and promote my work. I enjoy writing content, so for me, it makes sense to sign up to places like dev.to and Medium, but depending on your content, you'll need to find your own niche spots!

I also don’t hesitate to share a single blog post across all the different platforms at the same time. I have had some junior developers ask me in the past where the best place to share your writing is to get views. The answer is honestly everywhere. There is no single ideal source, every person will have a different experience based on their content, so until you know what is and isn’t successful for you, share it everywhere you have an account!

Share Your Strengths

If you’re great at something, make it known. If you excel at the front-end, for example, share CSS tips & tricks, or perhaps some work you’ve done that you’re proud of. Do a walk-through on CodeCast where you build out a small project or walk through a tutorial, or show off a previous project you’ve done. Regardless of how you do it, you want to showcase something you are confident in and something you enjoy! Passion is the biggest motivator and most people can feel your passion when it’s sincere - so use it to your advantage!

Most people also mistakenly think they need to be a developer for a very long time before they would ever be suited to teach someone else something. Not only is this not true, but teaching something to someone else strengthens your own knowledge of the topic! It will also allow you to gain a wider audience because as developers, we are always looking for new resources or information every time we need to do something new. It can also be used to help make a portfolio, which is something we will be discussing in the coming weeks!

Engage, Engage, Engage

Getting the attention of a bigger influencer somewhere like Twitter can be helpful, but the biggest factor will be being consistent. If you constantly engage with people on different platforms, you will slowly grow your audience. Getting your first 100 followers is the hardest part and takes the largest amount of time, but once you have a decent base, you’ll start to slowly grow.

We don’t need to shoot for the moon and try to get hundreds of thousands of followers (though I definitely wouldn't discourage that)! But an account with a thousand followers is a lot more trustworthy on first impression than an account with eight, so taking the time to engage is well worth it and will make an impact on how well your brand resonates with other people.

Consistency

Try to be as consistent as possible. Months of nothing followed by short bursts of posts won’t do much for you. Being able to create a small amount of content that you regularly post will perform much better for you. If you have time to generate a large amount of content all at once, refrain from posting it right away. You can use free apps like Later to help you schedule outposts, or save them as drafts and publish them at a consistent pace.

Outside of timing, you also want to be consistent about the type of content you post. If your account is all over the place, people will have no idea what your brand is. Consistency about the type of content, as well as keeping it to the appropriate level of professionalism for your goal, is probably the most important aspect of branding yourself.

There are a lot of little things you will learn along the way, so with that my advice is to always just start, and make adjustments as you see fit. You don’t need to have a fancy logo or banner, or posts that are completely original and mind-blowing - you just need to make posts that are true to yourself and your desired brand. The rest can come with time.

How To: Explain Coding Projects To A Team Of Non-Coders

Amy Oulton — Wed, 08 Dec 2021 23:17:53 +0000

This article was originally published on CodeCast.

We've all been a part of (or have overheard) a conversation where you have no idea what someone is talking about. Perhaps you've tried to read a medical report given to you or your pet, and even though it was in English, it felt entirely foreign to you. This can be the case with the programming world as well. Trying to communicate with non-coders about specific coding aspects can leave them feeling lost.

Coding is incredibly jargon-heavy. Not only that, but the jargon can often differ in meaning depending on the language. While there are aspects to any coding projects that nearly anyone can understand, a lot of it requires you to understand the jargon. Trying to communicate with non-developers about your project requires you to find ways to explain it without using confusing jargon.

The goal of this blog is to give you tips and advice on how to effectively explain your projects to non-coding members of your team so that everyone is on the same page about what is going on in the workplace.

Explain the End Goal

Unless your project is incredibly developer-specific, try to explain the project in broad and general terms first like you would explain it to a potential user. While you’ll likely have to get into the specifics later, a general understanding of the end goal is vital for someone who is not familiar with code. It will help them be able to picture the smaller details and comprehend the more complex components by relating them to an overall picture.

If the end product is still slightly unclear, begin by explaining some features of what you’re currently working on, or explaining your overall vision for the product. Find some way to relay it to the other person that makes them as excited for the project as you are.

Use Analogies

One of the most effective ways to have people understand something is to compare it to something they might already be familiar with. While I'll go into relating it to a similar product later, don't get stuck on that if something similar doesn't exist or is too complicated. I’ll give an example of what I mean.

Say perhaps you’re trying to explain your role in the backend of a project to someone who doesn’t know anything about code. You want to convey to someone that your role in the project is building out a significant portion of the server. While this is simple to understand as a developer, we want to explain it in a way that has nothing to do with the project.

Firstly, knowing your audience is a great start. Explaining something to a tech-savvy person versus someone who hates technology will be very different. While most people who are familiar with tech will understand what a server is, someone who isn’t might be completely lost if you assume it’s an understood word.

Once you have a grasp on what your audience’s knowledge base is, you can decide what analogy will best fit. But with coding, one of the tried and true examples when explaining general client-server architecture is to use the restaurant analogy. So if you want to convey your role in the company and the project as working on the backend, it could be helpful to portray it as you being the “kitchen”. There is a great article that dives deeper into using this analogy for those that may be interested.

Regardless of your chosen method, choose an analogy that is simple and understandable.

Keep It Simple

One of the best things to remember when trying to explain a project or concept to someone less familiar with the topic is to remove anything that they don’t need to know. Don’t bog them down with information about the language and framework if they don’t need to know any aspect of it to understand it. Generally speaking, when having to explain a project to a non-coder, you're trying to explain what the project can currently do, or what it is going to be able to do. The more unnecessary information you provide someone with, the more likely they are to get confused.

It’s very easy to get excited and passionate about something you’re working on. Being able to convey that to other people on your team is important, but it’s important to not overwhelm them with any information they don’t need.

Show Them Inspiration

Very often, coding projects and software ideas come from a developer or team of people wanting more from a currently available software. Sometimes they wish a software had more features or a better sense of community, so they set out to make their own software that borrows some concepts and functionality while expanding on it with their own ideas.

This is best explained via social media. Essentially, the core of all social media is exactly the same, yet we have so many different applications available to us. You’ll also notice that when a company adds on a new feature, other applications scramble to stay relevant by implementing the same feature on their own.

This is not specific to social media and is the case with most software and applications. Unless you have an incredibly unique and niche product or service, there is probably already something similar on the market. Relate the product you’re going to be building to something else someone would have come in contact with, or can easily look up to see it working in action. Then explain how the software or application that you are building differs from it, and what features you will be adding.

All in all, the best way to describe something that is outside of someone’s knowledge base is to keep it simple and be able to relate it to things they understand already. Whether you do this through analogy or comparison, knowing how to communicate your ideas to non-coders is an essential skill as a developer.

For more of my work, check me out on Twitter, LinkedIn, CodeCast, & Medium!

How To: Avoid (More) Common Mistakes By Junior Developers

Amy Oulton — Wed, 01 Dec 2021 20:28:03 +0000

It’s been a year since I graduated from my Bootcamp and about 8 months of working at CodeCast. While I’m still a junior developer through and through, I’ve started to get more comfortable with where I am at. Looking back I can see a lot of things I wish I had done differently, which is great, to be honest. Being able to recognize that I’ve changed and grown as a developer is fantastic.

I previously wrote a post about some of the common mistakes that junior developers make. Since then, I’ve come up with a new list of mistakes I see myself and others making, so I thought it was the perfect time to write a second part. Without further ado, let’s get into it!

Wait… What’s Going On?

When you start developing, it’s very easy to just assign super quick names to things like functions and variables so you can focus your attention on understanding and building out the logic. We all want to focus on the difficult aspects, and sometimes, coming up with a good name for something can take some mental energy. However, it’s important to overcome this bad habit for several reasons.

Firstly, even if you’re the only person who is ever going to touch your code, you’d be surprised at how quickly you can forget what you’ve written. Sometimes I’ll write an entire chunk of code and the next day look at it and be like ...hold on, I have NO idea how this works. It happens! But if you have a bunch of functions and variables working together named well, it makes figuring out what the code is doing again a lot easier.

Secondly, even if you’re the only one working on your code now, that’s not always going to be the case. You’ll have your code reviewed, work on existing codebases, or move on and leave your codebase to a brand new developer. Anyone who has ever picked up someone else’s code knows how incredibly different two people can write something that achieves the exact same thing. Wrapping your head around someone else’s thinking style is difficult enough without having random variables like a and secondOne thrown into the mix.

Even if you don’t think it affects you now, it’ll come back to haunt you later on, and it’s best to get in the practice of assigning clear and informative names sooner rather than later.

Unnecessarily Difficult

Preposterously convoluted code is harrowing and onerous leaving your colleagues irate and wanting to throttle you (probably like you now wanna do to me).

I could have just said “unnecessarily difficult code will make everyone that works with you want to strangle you” and you would have understood it perfectly. Being complicated for the sake of being complicated is an easy trap to fall in. You learn some new methods and practices and want to write them into your code so you don’t forget them.

Knowing how to use something is important, but knowing and appreciating the basics is even more important. Returning back to our first point, at some point you’ll be writing code that other people have to read. It’s easy for juniors to want to write impressive code to show off their skills. They want to make it obvious to their peers that they’re capable. But if you’re consistently the person getting comments on their PR’s about re-writing chunks of your code to be simpler and clearer, consider that more often than not, simpler is simply better.

Learn and then ...Learn More?

One of the hardest things to grasp when you’re entering the world of coding is that there will never be a day where you suddenly feel like you are ‘ready’. Or, at least there very much wasn’t for me. Students consistently feel like they need to learn more and more stuff before they can enter the job market. This is especially true in the programming world because essentially, your job will always require learning - it’s not a skill set you can cap out on.

Take a look at any single developer job listing on LinkedIn and you’ll see a list of skills longer than your grocery receipt. It feels overwhelming and it feels impossible to know everything you’ll need to know.

So what do you do? You apply anyway. You’ll never check every single box on those lists as a junior developer. You’ll likely not even check them as a senior. The easiest way to learn and increase your skills is to do so while working. Those ‘ah ha’ moments happen after being stuck on a ticket or feature for a while.

If you’re sitting there feeling like you’ve been learning to code forever and you’ll never be ‘ready’, chances are, you never will. You just have to become comfortable with feeling uncomfortable and put yourself out there.

Not sure where to learn? Check out CodeCast to watch some of our tutorials, like this one on React/Redux!

Eat. Sleep. Code. Live Your Life.

There are a lot of trends with junior developers that are based around coding every spare second you have. The "Eat Sleep Code Repeat" mantra (as seen above) is a popular one. While consistency is important, so is taking care of yourself. Burning out quickly or giving yourself no time for yourself isn’t helping yourself or anyone else. You have to make sure you’re taking care of yourself and not focusing on delivering 110% all the time.

Burnout is a very real thing and needs to be taken seriously. Don’t push yourself beyond your capabilities every possible second. As a junior developer, do you often have to work harder to prove yourself? Absolutely. But don’t do it at the cost of sacrificing yourself and your wellbeing. Elsa has previously written a blog post about achieving a healthy work-life balance, and it’s definitely a skill to learn in itself.

All in all, as I said in my previous blog, juniors are expected to make mistakes. Don’t beat yourself up when you make them. Recognize them, actively work on being better and one day you’ll notice those mistakes start happening less and less.

For more of my work, check me out on Twitter, LinkedIn, CodeCast, & Medium!

Understanding Basic Coding Terminology: Industry Basics ✏️

Amy Oulton — Wed, 24 Nov 2021 18:37:24 +0000

This article was originally written by me for CodeCast.

If you’re just entering the world of development, one of the first things you will likely notice is how much jargon there is. I know when I first started, it felt like there was at least one word in every sentence that I had never heard before. Like any field, there is very specific jargon related to the field of development. With coding, there is specific jargon for different types of programming as well as jargon that is unique to specific languages, libraries, and frameworks.

I know I've looked up what words mean only to be more confused after reading the definition. It can all feel a little daunting to start, so our goal in this post is to introduce some of the broader and more commonly used terms in coding to help get you started on your coding journey!

Developer/Programmer

Even in the small amount of text you’ve already read, both of these things have come up. They’re mentioned basically everywhere, and one of the most common questions from people new to coding is "what is the difference between a programmer and a developer". Essentially, within the industry, these two terms are used almost interchangeably. There are some technical differences between them, but even that meaning can shift from company to company. But generally speaking, a programmer has a more specific task or workload than a developer. A programmer will be working on a project in a much narrower scope, instead of having the hands in many different pieces of the pie like a developer.

But for simplicity's sake, especially when you’re just starting out, it’s safe to understand that when you read ‘programmer’ or ‘developer’, they are meaning ‘someone who codes’.

Front-End/Back-End/Full Stack

One of the first things you will be introduced to (and likely already have been) when you look into the world of coding are front-end and back-end developers. This is one of the easier concepts to grasp, as it’s quite simple in what the roles are.

Front-End Developer: Someone who codes the aspects of a web application that a user directly interacts with. This includes all the visual aspects of the application, as well as the interactivity and functionality. They’ll be the ones to make the requests to the back-end and implement the information the back-end provides to them. Because of all this, the front-end is known as the “client-side”.

Back-End Developer: Someone who is responsible for the “server-side” logic of the application. Essentially, they’ll use the requests made by the front-end to return information from things like a database or an API that the front-end can use. We’ll get more into what these two terms mean later.

Full-Stack: You may have already guessed this one, but a full-stack developer is someone who works on both the client and server-side. Generally, most programs or bootcamps will teach coding as full-stack because even if someone prefers to work in either the front or back-end, and eventually seeks jobs only doing one, you need a solid understanding of the other side to know what your code is doing.‍

Database: A database is simply a collection of data. It’s where all the information is stored, like users' emails, passwords, names, birthdays, etc. It’s what the server extracts data from to obtain the specific information a client may be requesting.

API

An API stands for Application Program Interface. Clear as mud right? API’s are one of the things I struggled with wrapping my head around in my bootcamp because they can be a bit difficult to grasp as a beginner. In very simple terms, an API is something that allows you to communicate with a separate piece of software. It allows you to make a request to an entirely different piece of software than you’re currently working on, and receive a specific piece of data or information back. Often this is a third-party API and there will be clear documentation on how to make the requests to get back the desirable information.

API’s are a bit difficult to wrap your head around, but understanding will come as you use them. Think of this example. You visit a website for a restaurant and you click on a specific location, which brings up a small map showing you the location. The website (almost definitely) didn’t create a match from scratch, but instead, made a request to an API (like Google Maps API) with a location, and the API gave it back the information needed to render out the map on the page.

If you want to read more into APIs, I personally really like this article by How To Geek, as they really try to simplify it while going deeper into what APIs are.

Language/Library/Framework

This one is a bit more difficult, at least in my opinion, to wrap your head around. I will do my best to explain it in a simplified version. These terms are vast and can vary (annoyingly so!). So think of these definitions as a guide to get you understanding the concepts as a whole, as opposed to the hard and fast rules of what they are.

Language: The language is all the syntax, grammar, and rules for how you write different parts of code, like functions, variables, classes, etc. The language is just a set of rules for how something needs to look syntactically to work.

Library: A library is a collection of individual pieces of pre-written code. Many languages have pre-set libraries that are built by the people who developed the language. These are called standard libraries. There are also third-party libraries that people have written to make coding in a specific language easier. You can think of a library as something that provides you with ‘helper functions’, something that has a consistent output that you don’t have to write yourself.

Framework: A framework is essentially what we know the word to mean in common speech: a foundation which you can build on top of. The framework is the base on which you add your own code to. Most frameworks have a collection of libraries that provide structure and common tools to begin building your code. Frameworks define how the base and structure of the code should work, making less room for errors.

Again, this is a highly simplified version and as your journey progresses, they will likely get a bit more complicated, but so is the life of a developer!

Alright, for now, I think this is a good place to start. These are some of the broad and vague concepts and terms used within the industry and are important to know when learning how to code. I intend to continue this series, so keep an eye out for more blog posts coming later!

Find more of my stuff here:
How To: Avoid Common Mistakes By Junior Devs
Essential Keyboard Shortcuts
JavaScript Constructors.