DEV Community: waldowred5

How I Kickstarted My Dev Career by Doubling Down on My Education Debt

waldowred5 — Sun, 25 Apr 2021 13:46:29 +0000

For anyone looking to become a professional developer, there are only three ways to go from zero to coding hero:

Traditional Route - Study a bachelor of computer science at a university or college
Modern Route - Become a self-taught programmer
Industry Route - Enroll in a coding boot camp

All of these routes are viable paths to your first paid developer role, they are just not all equal. While each has benefits and drawbacks, there is one that is more likely to launch your dev career to the stars.

But first, a short story...

When I left high school, I was convinced I wanted to be a doctor. If I could go back and tell my younger self I would eventually be hired to help build the world's first blockchain-based superannuation* platform, I doubt he would believe me.

^{For all the non-Australian readers, superannuation is the Australian system for compulsory contributions to a retirement fund, similar to a 401k in the US.}

I went to university, studying a bachelor of medical science, eager to pave my way to 'Dr.' status. To my surprise and dismay, I hated it. With no passion or clear direction, I ambled my way through my degree, putting in an embarrassingly small amount of effort.

What seemed like the longest three years of my life, the end of my time at university was looming around the corner. I joined a charity sales call centre to get some cash and work experience. I know, one of 'those' people.

It was at this point I first discovered the tech industry, being recruited into the sales team for a global software company. I was flown around the world, the commission was great and I was loving life, but four years and a few companies later, the rose-coloured glasses had begun to crack. It was time to choose a career that suited me, instead of letting a career choose me.

I was seven years past the optimal point to start a new career, and another bachelor's degree was one of the least appealing options I could imagine. Was I really about to start all over again?

You have probably guessed which of the three routes I think is the best, but if not, it is the industry route, a coding boot camp.

While boot camps can have many different types of successful students, it is really best suited for those looking to switch careers, balancing the need to finish ASAP with the need to gain enough proficiency to land a job.

With that disclaimer out of the way, here are the top reasons why you should seriously consider enrolling in a coding boot camp if you want to be a professional developer:

Content

The most obvious advantage is the content delivered in a boot camp. Coding boot camps originated in Silicon Valley, run by the industry to teach only what was current and relevant for new coding initiates. These courses have been popping up all over the world and provide an education opportunity for those who want to learn about the tools they will be using on a daily basis as a junior developer.

These courses tend to focus on web technologies like HTML, CSS, JavaScript, Git, a front end framework (typically React) as well as some SQL and database design. Additionally, you are likely to glean many key tips about how to ace coding interviews (aimed at junior roles) without having to cram coding interview practice before the big day.

Community

There are a number of advantages that come directly from the people you study with.

When you are surrounded by people who are on the same journey, it is significantly easier to get help when you need it. While it is possible to find online communities, it just isn't quite the same. You will have peers that are coming across the same problems and have found a way to solve it that they are willing to share with you. Alternatively, you will always be able to ask your lecturers and educators who typically have a wealth of experience to draw from. This support network will significantly reduce the learning burden that comes with solving every single problem you face by yourself.

It may not be the case for everyone, but I certainly find it easier to stay motivated and commit to the task at hand when I am part of a group. There is an intrinsic level of competitiveness that helps drive my behaviour towards delivering my best work. I also found the work my peers would deliver and present gave me insight into novel solutions to problems I hadn't yet encountered as well as inspiration for future projects.

Finally, a more long term benefit, you will have met a group of developers that make their way into many different areas in the industry (or other industries entirely). These connections will be invaluable, as you will be in the loop for any new job opportunities that appear before they are posted on sites like LinkedIn, Seek and other job boards.

Challenge

A boot camp provides students a well-defined structure of increasing project difficulty. Whenever I looked back at the previous week, I was consistently blown away by how much I had learned. It was truly exponential, and what I considered really difficult at the time became totally trivial in a matter of days.

I was luckily able to escape the dreaded 'tutorial purgatory' by joining a course where I was given larger projects to sink my teeth into, with specific requirements that provided scope and direction, support from my peers and educators as well as deadlines and goals to drive my learning momentum at a rapid pace. For more reading on breaking down your first small projects, check out this guide on How to Plan and Build a Programming Project.

While there are many good reasons to enroll in a boot camp, one should nevertheless be aware of the following considerations:

Cost

Boot camps ain’t cheap. While they are a slightly lower cost option than traditional degrees you are still likely to need a HELP debt loan to cover the course fees.

This may be the primary reason many consider the self-taught route, but in my experience, it was worth every cent.

Time

The head start you get in your education by learning from industry experts is unparalleled and will save a significant amount of time in the long run.

While not impossible, it is incredibly unlikely you will be able to learn at the same pace in a self-taught environment. Studying at a boot camp will allow you to start your professional development journey sooner, leading to an earlier salary start date and earlier access to promotions. In most cases, this acceleration will translate to a larger financial benefit across an entire career than the initial cost of the boot camp course fees.

Discipline

For all the advantages boot camps bring, there is one factor that will dictate your ultimate success. Make no mistake, boot camps are hard work! Speaking from my own experience, what I’ve seen from my peers and read from previous students, to do well requires 60-70 hours per week (in a 6 month, full time course). It is a sure fire way to burn out if you don’t prepare a self-care routine in advance. If you aren’t able to dedicate this much time to a course, you may still be able to graduate, but as the saying goes, you only get out what you put in.

Comparison With Other Forms of Learning

Universities

Universities are a very traditional form of education, steeped in history. They date back to the original Platonic Academy of Greece in 387 BCE, and now form the bedrock of tertiary education in most countries around the world.

Due to their large size and moderately antiquated ways of working, a course syllabus will typically be updated every 3 years. For some perspective, there were 17 brand new programming languages developed and 11 framework releases in the 3 years leading up to 2014.

In contrast, the internet is less than 40 years old, and changes more frequently than the average job tenure of a millennial. Learning modern web-based skills in this traditional environment is likely to provide you a deep understanding of computing theory but put you behind the 8-ball in practical skills.

A drawback of trying to follow the traditional education path is the high bar set for entry. In Australia, most universities require a minimum ATAR of more than 90 (the 90th percentile of high school graduates) in order to be accepted into a program. As ATAR requirements tend to be driven by popularity more than technical difficulty, there are plenty of people who would be perfectly capable programmers that will never be accepted into bachelor of computer science.

On the other hand, for all of those that make it into a bachelor, a key benefit of studying at university is the ‘prestige factor’. Even though a large number of employers are starting to rethink the hard requirement of a degree for recruiting new hires, many still value traditional degrees over any other type of qualification.

Self-Taught

With the rise in short online courses at basement bargain prices, it is becoming increasingly popular to study online. It is even possible to learn everything you would find in a boot camp or bachelor degree syllabus online for free, if you know where to look.

The obvious problem for developers just getting started, is they won’t know where to look, how to read the technical documentation, what topics should take priority in their learning journey or whether you are progressing at a reasonable pace. Even if you could determine all of this on your own, there are so many areas in the industry you can branch into, there is no real way of knowing which languages and frameworks to focus on until you get there. It is also likely to take some time AFTER your first gig as a developer before you find exactly which type of programming you enjoy most.

A large barrier to measurable learning progress as a self-taught programmer is having no concrete accountability. If you haven’t invested much money into your education, you have no skin in the game. This makes it so much harder to stay motivated when faced with challenges (of which there will be plenty) and all the more likely you will abandon the idea of becoming a dev all together.

Probably the most dangerous and unanticipated factor in the journey of a self-taught programmer is the potential for a false sense of security. In the lead up to starting my boot camp, I bought a subscription to codecademy.com (a fantastic resource for learning new programming languages). I remember feeling a monumental sense of achievement whenever I finished one of the course topics and any of the small projects in each module. In hindsight, these small wins were so insignificant compared to what I built and achieved during my time at the boot camp and would have prevented me from seeing how much more I needed to learn before I was ready to take on my first professional role. After learning HTML, CSS / SASS, Git, Ruby on Rails, PostgreSQL, RESTful APIs, JavaScript and React, I still feel I was barely prepared for my first role as a front end developer (which is widely regarded by most developers as the less technical cousin of back end development).

If you are able to stay motivated and disciplined, get by with a few low cost courses and subscriptions and find a well-laid out blueprint for your learning journey, it is possible to skip all of the education debt outright. If you choose this road it will be incredibly challenging, but anything worth doing is never easy.

Conclusion

Everyone has a different situation, with different priorities and challenges to face, but if you are still reading and haven't been deterred by any of the points above I would highly recommend enrolling in a boot camp as soon as possible. They are definitely not for everyone, but there are a number of different courses to choose from with different options for flexible study. If you are dedicated, enthusiastic and committed you will go very far, and nothing will be able to stop you from reaching your goals. I wish you all the best on your coding journey, and regardless of which route you take to get into the industry, the learning in this profession never stops.

A Beginner’s Guide to 3D Rendering with JavaScript: Part One — The Setup

waldowred5 — Thu, 15 Apr 2021 12:15:38 +0000

What is three.js?

three.js is a powerful JavaScript library and API allowing developers to create incredible 2D and 3D graphics that are animated in the browser without plugins (using WebGL).

To check out some of the amazing projects created by talented developers, you can check them out at the three.js homepage, as well as many advanced guides on getting the most out of the library.

What are we building?

In the header above (after clicking ‘Run Pen’), you can see a live demo of the animation we will be building in this tutorial. It is a cube that spins slowly, with four small spheres orbiting it at a much faster pace, each on its own orbital path. It is also brightly coloured because monochrome is drab.

Users also have the ability to spin the cube and spheres in any direction they want!

Getting Started

Before we start, lets get our project setup first. Create a project directory somewhere that is easy to reach with your terminal. The way I’ve structured my directory looks like this (important so the import paths work properly):



/first_threejs_project
|__ /css
|__ |__ main.css
|__ /js
|__ |__ main.js
|__ index.html

Type the following commands in your terminal to get your project directory setup correctly (don’t forget to press the ‘Enter’ key between each line):



mkdir first_threejs_project
cd first_threejs_project
mkdir css js
touch index.html
cd css
touch main.css
cd ../js
touch main.js

Your directory should now look something like this

You can setup your HTML and CSS any way you prefer, or you can use the following code as templates to work from:

index.html



<!DOCTYPE html>
<html lang=”en”>
<head>    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First three.js Project</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    // This line imports our javascript code from our /js directory
    <script type="module" src="./js/main.js"></script>
</body>
</html>

main.css



body {
    margin: 0px;
    height: 100vh;
}
canvas {
    display: block;
}

Now that we have our initial files ready to go, we need to import the three.js library into our project. There are a few ways to do this, all of which can be found in the three.js installation guide, but the best way takes a few steps:but the best way takes a few steps:

Open your terminal and navigate to your main project directory
If you are using node package manager (npm) enter the following into your terminal:

npm install --save three

Alternatively, if you are using yarn, enter:

yarn add three

(If neither of these commands work or make sense to you, you will probably need to download npm or yarn here).

This should have added a series of directories to your main project directory. Inside the /node_modules directory is the /three directory. If you open this, you will see the /build directory which includes the core library files you need to import into your code. The core library files include only the most important parts of the library, so to include other useful three.js features we will need to import them from another directory (which has already been downloaded for us during installation). These can be found in the sub-directory /examples/jsm, which includes controls, loaders and some post-processing effects.

Only one step left to finalise before creating our first scene. Head to your favourite code editor and open up the main.js file. At the top of the file, you will want to write the following two lines of code:

main.js



import * as THREE from '../node_modules/three/build/three.module.js';
import { TrackballControls } from '../node_modules/three/examples/jsm/controls/TrackballControls.js';

These two import statements above give our main.jss file access to the:

three.js core library
Trackball controls module which will allow us to use our mouse to click and drag to spin our animation in any direction

Creating Your First Scene

Everything is now set up and ready to go for our first lines of three.js code! Every animation (or ‘scene’) we create needs three crucial objects:

Scene: A parent object where we place all of our rendered objects, lights and cameras
Camera: An object that allows us to see our other objects. There are a few types of cameras, but the one that we want for standard perspective rendering is the PerspectiveCamera
Renderer: An object that renders our scene for us with the WebGL API

The code for these three objects looks like this:



const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.6, 1200);

const renderer = new THREE.WebGLRenderer({antialias: true});

Now let’s take a deeper dive into these three lines of code so we can understand what is going on under the hood:

Scene: Pretty simple, we are creating a new three.js scene object to place everything
Camera: As mentioned before, we have created a PerspectiveCamera, which takes four parameters (in order):

^{Source: ResearchGate}

Field of View (FOV): This is a number (in degrees) which represents the vertical FOV (see diagram left)
Aspect Ratio: This is the ratio between the width and height of the scene (width divided by height). Most of the time we want to set this to the width and height of our window so we don’t ‘squish’ the objects in our scene. In this case, we use the .innerWidth and .innerHeight properties of the window object (the window that contains the main DOM document element of our HTML)
Near Clipping Plane: The boundary plane closest to the camera. Anything closer to the camera than this value won’t be rendered
Far Clipping Plane: The boundary plane furthest from the camera. Anything further from the camera than this value won’t be rendered

Tip: If you set the Far Clipping Plane to be equal or less than the Near Clipping Plane, nothing will be rendered. Don’t be that dev.

Renderer: Here we create a WebGL renderer object to render our objects. While this function can be called without any arguments, we can also pass an object with any settings we want to change from the default behaviour.

^{Source: 3dPrint.com}

In our case, we have changed the antialias property from false to true. See diagram (left) for an example of what our scene will look like with or without anti aliasing

The last three lines of code we need for the initial scene creation are:



renderer.setClearColor("#233143");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

.setClearColor: Our first line sets the colour of the scene background (in this case a HEX value passed as a string). You can optionally pass a float between 0 and 1 to the second parameter (known as the alpha) to set the opacity
.setSize: This sets the size of our app, in our case we want to fill the whole window so we set the width and height to the .innerWidth and .innerHeight properties of the window object again. You can use smaller values if you only want your app to take up part of the window. For example, renderer.setSize(window.innerWidth/2, window.innerHeight/2) would display our app at 50% of the size of our window
.appendChild: This line adds the renderer to our HTML document as a <canvas> element which is responsible for drawing our objects and animations with the WebGL API.

A note on responsive design:

When creating web applications it is important to develop for all devices, from smartphones to tablets and 4K desktop monitors. This is already taken care of for us by the .setSize() function for the native screen size of the device.

What if the user changes the size of their window on a desktop or laptop?

^{Our cube gets cut off when the window size changes}

Our render will be stuck in the center of the screen and become covered, instead of matching the new size of the window. To solve this problem, we need to add an event listener to the window for ‘resizing’ so that we can recalculate the window size for our canvas if a user changes the size of their window.

We can get around this problem with the following code:



window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
})

Here, we change the size of the canvas back to the size of the window, as well as resetting the aspect ratio to match. Finally we call the .updateProjectionMatrix() function to apply the new changes.

With all of the code we have added so far, you should have something like this:

main.js



import * as THREE from '../node_modules/three/build/three.module.js';
import { TrackballControls } from '../node_modules/three/examples/jsm/controls/TrackballControls.js';

// Scene
const scene = new THREE.Scene();

// Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.6, 1200);

// Renderer
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#233143");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Make Canvas Responsive
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
})

We now have our environment completely set up, including a scene, a camera and a renderer to draw everything for us. Don’t panic if you can’t see anything, we haven’t built anything to be rendered yet.

To see how we go about building the rest of the animation, head over to the second part of this tutorial. See you there!

^{We will be building these objects very soon!}