Opportunities in data for recent web development graduates

Consider working with data science if you seek more ways to utilize your coding skills.

Coding bootcamps open the doors to those who need to change career path and are willing to work for it. Getting through a 3–6 month-long training is still not enough to find employment right away. A lot of companies are looking for at least two years of experience, which many of us don’t have.

Besides the helpful advice from your career coach and numerous blogs about succeeding as a fresh outta bootcamp web developer, this post attempts to expand the list of potential opportunities in employment.

Big Data has been the buzzword in the past few years. The popularity of free apps in the app store google play in exchange for data has been increasing. This means that the amount of data that has been analyzed is only the tip of an iceberg. So, what’s to come?

During my most recent employment experience as a data analyst working for an NGO that collects data on climate action, I struggled with so-called “dirty data”. So much insight is hidden underneath the walls of text coming from 7000 companies, 600 cities, and 120 states and regions through a survey. Simply applying an algorithm would peel away the important context of the individual story. This is why there is a need to engineer better systems to collect data.

I looked at job opportunities at a few companies and noticed that there are more positions available for data scientists/analysts/engineers than for software engineers. Although the requirements for data include proficiency in other programming languages, there are some overlaps. The more significant overlap might be the knowledge of database/SQL (and such), an overall understanding of data structures, as well as of object-oriented programming concepts.

If you know a few programming languages, it would be easier to pick up another one for work with data. Jobs in data have great potential to utilize your programming skills and create a positive impact around you.

Start by accessing the open data available to you from the sources like NYC Open Data and see how you could use it to show off your coding skills. Now, you are not so far away from having an additional option for employment in data.

Below is an example of how you can use data to build a web app using JavaScript.

1. Get a list of items from an API & render them.

To show all the items (for example, books) on the page, we need to fetch it first. When we get the response from our local host that is set to a variable URL, we convert it to a JSON format. Then, we grab the result (the books array) and iterate it so that each book can find its place in the list_UL (located inside the list “container” that contains the cells for our items. Since we want to grab an item by the id, but don’t necessarily want to show the id to the user, we place it inside the li tag and interpolate the title.

Flow for GET: fetch and iterate; insert interpolated result(s) into the li

2. Be able to click on a book and see the book’s thumbnail, its description and a list of users who have liked the book.

First, we need to set an event listener to catch that click, with the condition that the click happened in a specific location on our page: LI. In that case, we anchor our event target to li, and pair it to its id through dataset.id (which is equivalent to data-id in the HTML language, used in deliverable #1).

Flow for the click: find your li, create a condition using the tagName, locate your id in on the page

We already have book’s title, so now we are going to pull the rest of the details by fetching through the book id and insert it in the HTML container, as well as the array of users who liked the book.

Flow for getting the list of likers: iterate through the array of what the likers like, push it in the empty array and place that array in the appropriate location on the page

Again, we iterate through the array of books and get the users that need to be organized in the empty array. Not only do we need to prepare the space in our js file, but we also make sure the users land nicely on the page. We work with what we have, which is the show-panel that we have located as one of the elements in index.html.

We nickname the found space as show_Panel_Div and transform this div into a space that can accept an HTML object (a user). Then, we add those users as they get added to the list of book likers.

For the image source, alt is optional, yet, recommended for when you are completing the project for your client. Image sources may change when the code is inherited by other developers, so it is nice to accommodate them with an alternative link to the image as a backup.

3. You can like a book by clicking on a button: let’s set that up

We are tasked with a particular request to accommodate the user with the following attributes {"id":1, "username":"pouros"}, so to like a book send a PATCH request to http://localhost:3000/books/:id with an array of users who like the book. This array should be equal to the existing array of users that like the book, plus your user. For example, if the previous array was "[{"id":2, "username":"auer"}, {"id":8, "username":"goodwin"}], you should send as the body of your PATCH request:

Again, we start with the event listener attached to our checkout button. We also want to add the preventDefault button, so that the result is not skipped, but persisted in the console.

Then, we fetch and pull the array of users, data by id, since this is what we need for PATCH (and DELETE!) actions, and update it with an additional user via concat. Headers represent the information about what we are doing, what type of data is expected to go out or get returned.

Flow for PATCH: method, headers (standard accept & content-type), body (JSON.stringified).

And we push the results back into the div with the updated book JSON including the list of users who have liked the book (using .join).

That’s it! I hope this post is helpful to understand the flow of the abovementioned get and patch tasks!

Happy coding!