DEV Community: Andy Pickle

.map(), .filter(), and .reduce()

Andy Pickle — Tue, 16 Jul 2019 18:48:05 +0000

Originally posted on my blog

For the last several weeks I've been applying for jobs. Sadly, the startup I was working at just didn't work out. I am super bummed it didn't work out, but that's how things go sometimes. Anyway, I've been posting on twitter that I'm looking around and such and I had a friend offer to do a mock interview.

Short story, he absolutely roasted me.

I'm so thankful that we did that, because I've honestly never been asked technical questions in an interview like that. I just cracked under the pressure. I wasn't that I don't know how to reverse a list. I just couldn't remember how to do it on demand.

So I've been reviewing some foundational JavaScript concepts because it'd be good for me to memorize what they do and how to use them. Instead of having to have to look it up each time. Yesterday I posted this code snippet in a tweet and it seemed to be pretty helpful to folks, so here's a bit more explanation.

Array.map()

from MDN:

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

You have an array, and you need to do something to every element. That's what map is for!

let numbers = [1,2,3,4,5]
numbers = numbers.map(numb=> numb+1)
console.log(numbers)
// will be [2,3,4,5,6]

The big hurdle for me initially with any of this was realizing that numb was totally made up. You can call it anything you want. Common practice is to call the array the plural of whatever is contained in your array, and the singular item for each computation. I'll be honest, lots of this clicked for me by using a forEach() for a long time, instead. The difference between them is .map() returns an updated array. So in the example above, the numbers array has been rewritten with each value plus one. But if you wanted to keep your original numbers array, you would simply declare it to a new array like so let numbersPlusOne = numbers.map(numb=> numb+1).

Array.filter()

from MDN:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

The main difference here, is that whatever condition you pass, will give you a mutated array of all the items that meet that condition.
For Example:

let numbers = [1,2,3,4,5]
numbers = numbers.filter(numb=> numb % 2 == 0)
console.log(numbers)
// will be [2,4]

Whatever condition you pass will be checked for each item in the array and it will be added to the new array and returned.

Array.reduce()

from MDN:

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

This one is just a bit more complicated, because there are more arguments. But in its simplest form you can take an array and perform the same function on each element to receive back a single value. Back to our numbers array

let numbers = [1,2,3,4,5]
numbers.reduce( (accumulator, currentValue) => accumulator + currentValue )
console.log(numbers)
// 15

Keep in mind the computation you do will be done on each item in the array, and the accumulator is the running total. There are also optional arguments of currentIndex and array that follow the currentValue (before the arrow function) but I won't get into those here.

Hope this helps!

Finding a Job

Andy Pickle — Fri, 21 Jun 2019 18:38:38 +0000

I lucked into my first development job, I had just left my previous job in coffee without any specific goals in mind, reached out to some acquaintances for some mentoring and they eventually hired me to work in their startup. I didn’t start in development but I’ve slowly moved over. Circumstances are leading me to look for another job, but I’m not sure where to start. I’d consider this my first real software job hunt.

I’d love to read other people’s stories of how they got their first job in software! Maybe there will be some wisdom for people like me.

Questions:
How did you find your first dev job?
Was/Is it remote, on-site, something else?
What was your experience/qualifications before you got the job?
Did you actually meet all the listed requirements before you applied?

Tell your story! I’d love to read it!

Roman Numeral Converter

Andy Pickle — Sat, 16 Feb 2019 23:33:04 +0000

My coding education journey has been a bit, disjointed to say the least. I've stop started on freeCodeCamp, CS50, other tutorials, books, and just hanging out with smart people. I made it a goal to go back and get some of the certifications I bounced around on this year, and today solved the "Roman Numeral Converter" on freeCodeCamp. I'd love to know how others solved this. Because this was just the first idea I came up with and I'm sure there are many other ways to get it done!

What are the pros and cons of your solution?

Here's mine:

Wireframing Discussion!

Andy Pickle — Tue, 20 Nov 2018 03:30:57 +0000

A project came up at work, and got delegated to yours truly. If I've never built any wireframes before, where should I start? What apps or tools should I use? Any primers on philosophy of design and processes to it?

I'll start a few comment threads with Apps/Tools, Philosophy/Process. If you have another idea, start a new thread!

Learning styles and open-sourcing notes

Andy Pickle — Fri, 16 Nov 2018 03:25:18 +0000

In June, I decided to sell my stake in the coffee shop I owned to pursue something else. One of our shops was in the Little Rock Tech Park and I got to know some of the entrepreneurs and tech folks in the building. Over the year working at that location I decided tech was an intriguing next step for me. So I quit(!) and started learning to code.
Over the next several weeks I also got a job at one of the tech companies in the building, just doing anything and everything they needed. (I’m still there actually! Vocool is a great place to work!)

One of my coworkers is a really talented Software Engineer and in addition to him answering my endless silly questions about how things work, we also talk a lot about learning styles. Because when you begin learning to code there are so many routes you can take. You can go to a university or take a MOOC, you can go the freecodecamp route or try another online service, you can enroll in a boot camp, or even just watch YouTube videos! Point being, there are several ways to learn, but at the end of the day you may need some help figuring out how you actually learn. I know it took me a few classes before I found my sweet-spot. And honestly one day things did start making more sense.

I am an immersive learner. I don’t just take the class, do my homework and move on. I surround myself with as many sources of information as possible even though I don’t understand. For example, I said “kubernetes” out loud before I had ever heard anyone else say it, that was pretty funny.

Here’s the deal. I love to take notes, a lot of notes, and I’ve always been a bit of a stickler about formatting them. So now that I understand how markdown works (go me!), I’m going to take my notes with it and then post them for all to see. I’ve started a GitHub repo with mine and I’m going to go back and format my notes from my first few classes and post any future classes there as well. A great reference place for me and who knows maybe someone else will find them useful.

So how do you learn best? Is there any particular practice you find useful to retain information?

Add an Emoji Favicon to your site!

Andy Pickle — Thu, 08 Nov 2018 22:12:43 +0000

Hey there, this is my first post on dev.to, so I thought I'd share a short little trick I learned that makes websites look better!

For starters, if you don't know what a favicon is, don't fret! I didn't until recently. Its the small thumbnail on your tab. If you use Google Chrome, it looks like this:

I've been working on a project1 for CS50 for web-programming class. The assignment: build a book review website, using Flask and PostgreSQL. While I was working on it, I got bit miffed that my site wasn't looking very professional. I was using Bootstrap, for the ease of formatting, but that wasn't looking great, just a tad better than the default. I decided adding a favicon would help a bit, but I didn't want to mess with making a logo or finding a picture and scaling it, so I thought. Maybe an emoji would work? It did, fantastically!

I decided it would be painless to find the emoji I wanted and then just add it to my

of my template.html. Here's how the code ended up looking:

This adds a great touch, and if a user is like me and has 15 tabs open at all times, the favicon, would help them find the correct page.

Here's how I did it:

Head to https://emojipedia.org/
Find your emoji.
Right-Click on the emoji style you prefer (I'm an Apple person)
Copy the link and insert into your <head> tag like so: <link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/books_1f4da.png">

And you're done! I was using flask for this project, so I put this in the layout page and it dynamically puts in on any template that has the

{% extends "layout.html" %}

at the top of the .html doc.

Here's how it looks!

As you can see, I'm still testing on a localhost, haven't quite finished the project yet, but it'll be on my profile site, and its own repo as well.

Thanks for reading! If you liked this, let me know. If there's a way it could be better, let me know! Feel free to follow me on Twitter or Github!