DEV Community: Naya Willis

From Trucker to Software Engineering Apprentice at Twitter

Naya Willis — Sun, 20 Dec 2020 02:53:21 +0000

On Wednesday, December 17th 2020, I received some exciting news that I was selected to be an Apprentice Software Engineer at Twitter. I was super excited about the news. To be quite honest, it still hasn't processed in my mind yet. At least until my official Twitter merch arrives in the mail :) and my start date gets closer. This was a tedious and long process, and I enjoyed every bit of it and talking to the future team members. But I'd like to share my story on how I even got up to this point.

First off, hello, the name is Naya Willis. I'm a truck driver in Queens, NY. I've been driving trucks for a few years now. I started coding at 21 years old. I'm 29 now. Back in 2010-2012 I was attending Queensborough Community college. I majored in Mechanical Engineering. A little into that degree program I realized that it wasn't really for me. I knew that I wanted to do something engineering wise, but not Mechanical Engineering. I for one love challenges, and Mechanical Engineering just didn't seem challenging enough. Not to mention, I was young and wasn't taking things too seriously back then. I never completed Queensborough Community College. It turned out college just isn't for everyone.

A few weeks after this realization, I was walking home from school one day, and I couldn't tell you what made me walk into a Barnes and Nobles book store. I felt as if some entity took over me like "Watch out, I got this!". So I walk into the store and ask a representative about their books on computer programming, since I initially started doing some research about it at home. She directed me downstairs. I searched through the books in the computer section and came across a C++ Programming For Dummies book. I thought that that book was the holy grail of programming and had everything that I needed to know in it. Who was I kidding? I later found out that it was just a language and not programming and it's entirety. This led me down a rabbit hole in search for more and more information.

I later found a book on Amazon titled Beginning Programming For Dummies, 7 Books in 1. This was it! My whole Software Engineering journey really took off with this book.

This book shed light on so many programming topics. It actually became the passenger in the truck that I drive for work. At work I had a lot of downtime and would sit in the truck with that book and start highlighting text like crazy. Although, this slightly proved to be ineffective as I wasn't really able to immediately apply what I've been learning. At that point I was forcing myself to retain information. It wasn't like I could use my laptop on the truck. I eventually found my footing, and started prioritizing programming more than other things. I would get home from work and do further research on my laptop, practice some coding problems, you know? The whole shebang. I touched upon many different technologies back then. I actually fell in love with Python, and Javascript. I even dabbled a bit in Java at one point.

Fast forward to 2019, years later, I thought to myself that I wanted to make a career out of this. All of those years of just being a newbie had to come to an end. That's where Flatiron Coding Bootcamp comes in. I joined the September 9 2019 cohort. There I learned how to become a more focused developer. I've become more structured, and welcomed the accountability. This stuff isn't a walk in the park as you can imagine. I graduated in July 2020. From that point on it was just continuous learning and sharpening my skills. I found it most helpful to do website clones and whatnot. It helped me tremendously. I even did a Twitter Clone, go figure. And then there was the job search.

Some time into the job search process a friend of mine named Chaya (who I thank so much for telling me about this Twitter Apprenticeship program) said that I should apply. So, I did. She and some other classmates and I got together to tackle algorithms to prepare for it, and it went pretty well. Before I landed this Twitter Software Engineer Apprentice role I applied to at least 100 plus jobs. It was no fun at all, and even with rejection after rejection I didn’t give up. I most certainly wasn't going to just take any job. I had to really feel passionate about it. I always wanted to be involved in the development of a social media platform because I feel that there will always be new features to work on and new technologies to learn, which will feed my creative nature.

The whole interview process took about a month. I had a very pleasant experience and I’m grateful to have met some of the kind and friendly tweeps so far. After a few interviews and not so long wait periods in between them the anxiety and anticipation came to an end. I received an email from my recruiter that I’ve been selected and extended an offer for a Twitter Software Engineering Apprentice. At the time of this writing it still feels surreal, but I know it will eventually fade away as the date that I start gets closer. I’m excited to embark on this journey to further solidify my knowledge about programming and learning from the other brilliant individuals at Twitter.

FYI

In case anyone is interested, the next Apprenticeship program is scheduled for April 2021. Keep an eye out for that. Here is the link to find out more information about it.

ALSO

Add me on LinkedIn Naya Willis

The Pug Template Engine

Naya Willis — Sun, 13 Dec 2020 13:48:35 +0000

What is Pug?

Formerly known as Jade, Pug is a template engine for Node/Express. It allows you to write dynamic HTML which converts to plain HTML. In pug, when defining your html you don't have to use closing tags. You only specify the opening one. Once the file is converted to plain html, it will create the opening and closing tags for you.

html(lang="en")
        head
             meta(charset="UTF-8")
             meta(name="viewport", content="width=device-width, initial-scale=1.0")
             title=title

=>

<html>
     <head>
          <meta charset="UTF-8">
          <meta name="viewport", content="width=device-width, initial-scale=1.0">
          <title>This Page</title>
     </head>
</html>

To install

npm i pug

To use

Make sure that after you install it, that you tell express to set pug as your preferred template engine like so:

app.set('view engine', 'pug')

Optionally, you should tell it where to look for your pug files as well. Most likely you'll have them in a views folder which is the default. If you have them in a different folder, you'll have to explicitly tell express:

app.set('views', 'folder')

Now that that's finished, let's go over some Pug syntax.

Defining Attributes

To define attributes you define the html element, then immediately next to it (no whitespaces) you define the attributes within parenthesis like so:

form(action="/path" method="POST")

The above compiles to

<form action="/path" method="POST">
     ...
</form>

To add a class or id

h1.heading#main_heading Some text

The above compiles to

<h1 class="heading" id="main_heading">
     ...
</h1>

Note the text 'Some text'. To actually define text content you put a whitespace after you have finished defining your attributes, classes, id, what have you.

To define dynamic content

Say inside your backend somewhere in a render method, you passed some data to that method in an object.

i.e res.render('/path', { title: "This Page" })

To use the value of 'title', there are 2 ways to make this happen.

title=title

or

title #{ title }

Either or works and compiles to

<title>This Page</title>

Writing a comment in pug

Uncommented
p Let's comment this out

Commented
//- p Let's comment this out

Conditionals

Say you wanted to render some content, ONLY if the user is logged in. That would look a little something like so:

if user.loggedIn
     a.logout_button(href='/logout') Logout
else
     a.login_button(href='/login') Login

The a tags convert to

<a class="logout_button" href='/logout'>Logout</a>
<a class="login_button" href='/login'>Login</a>

INDENTATION IS IMPORTANT. Make sure you are indenting accordingly. If the if statement above belongs in a header, then that's where you should put it.

Iterations

More often than not you will be making requests to a database to get some data to work with. For example, you make a request to your backend to get all of your favorite cars. Each car has a make, model, image. It just so happens you have 3 currently. If you wanted to display this on a webpage dynamically, you would do this:

div.car_card
     if favCars.length > 0
          each car in favCars 
               div.card
                    div.car_image
                         img(src=car.image alt="car image")
                    div.car_make
                         h1=car.make
                    div.car_model
                         h2=car.model
     else
          p No cars available

The above converts to

<div class="car_card">
     <div class="card">
          <div class="car_image">
               <img src="/nissan.png" alt="car image"/>
          </div>
          <div class="car_make">
               <h1>Nissan</h1>
          </div>
          <div class="car_model">
               <h2>Maxima</h2>
          </div>
     </div>
</div>

The above defines a cars card template. This template will be used for each car rendered.

< CAR IMAGE >
CAR MAKE
CAR MODEL

repeat 3x (your 3 favorite cars in the database)

Extends and Blocks

Using the extends keyword with a file path defined in addition, allows us to inherit some template code from that file into the current file you are working in.

The easiest example I can provide is this:

//- main-layout.pug

html
  head
    title=title
    link(rel="stylesheet" href="/css/index.css")
    block links

Here we define a layout.pug template that has the basic html tree structure. It has a head which has a title which is set dynamically. Then it has a link that points to the css folder containing an index.css file. We specify that link because we want the styles defined in index.css to be used across all files that we 'extend' this template to. We then use the block keyword in addition to any name you want to use next to it. In our case we used links. What happens now is that when we extend this template to another pug file we can create additional links to css files that are only relevant to that specific pug file.

//- cars.pug

extends layouts/main-layout.pug

block links
     link(rel="stylesheet" href="/css/cars.css")

Now the cars.pug file has everything that's in the main-layout.pug file PLUS the newly added link to the cars.css file. This keeps our code DRY. We don't have to copy the html tree structure from the main-layout.pug file and then paste it in the cars.pug file.

Partials work similarly, but in pug it's referred to as includes.

There's more that you can do with pug. I covered some of the basics. To learn more read their documentation.

Pug Documentation

5 Helpful CSS Tips

Naya Willis — Sun, 06 Dec 2020 21:21:47 +0000

1. Center an element directly on a page

Before Centering Styles are applied

page {
     height: 100vh;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}

Child elements being flexed must be block level elements.

After Centering Styles are applied

2. Add shadow to an image directly (Image must have transparent background (PNG))

img { 
     filter: drop-shadow(5px 5px 4px #b6b6b6);
}

Result:

3. Properly sizing an image.

Have you ever added an image to your html file and it just took up space on almost the whole page?

When working with images, it is good to have an image container. When you set a fixed width to that image container, and then set the actual images width to 100% it will then take up 100% of its parent container.

Fix:

div.image-container {
     width: 200px;
}

div.image-container img {
     display: block;
     width: 100%; // of the image containers 200px width
}

Result:

4. Use the CSS properties border or outline like crazy!

To get a visual representation of your website layout or where all, or some of your elements are on a page use

border: 1px solid <some color>

or

outline: 1px solid <some color>

This tremendously helps you to save time guessing where everything is.

The outline property doesn't impact the layout of other elements around the element with the outline property defined. So outline may be better to use.

5. Bring out elements with box-shadow

I feel like everyone should learn a little something about box-shadow. It really makes your website stand out. I would suggest learning about the property and its value. Once you understand it, then check out this website that autogenerates box shadow code for you.

The Four Pillars of Object Oriented Programming

Naya Willis — Sun, 29 Nov 2020 23:07:37 +0000

In this blog I will explain the 4 pillars of OOP and provide small examples. Small enough examples that you and I can comprehend easily.

Abstraction

Abstraction is essentially "need to know". We hide the major implementation details, while keeping the obvious usage at the forefront. So remember this "hide the details, show the relevance".

Abstraction example...

This is a signup form of an app I'm working on (the relevance).

This is the form's submission implementation logic. (the need to know).

Polymorphism

Polymorphism is when you use one block of code, you change the version of the code being used based on the inputs being giving to it. So to make it a bit clearer, different classes can be used with the same interface but can provide its own implementation of that interface.

Polymorphism example...

class Animal {
  speak = () => console.log('makes sound')
}
class Dog extends Animal {
  speak = () => console.log('woof')
}

class Cat extends Animal {
  speak = () => console.log('meowww')
}

class Cow extends Animal {
  speak = () => console.log('moooooo')
}

let dog1 = new Dog()
let cat1 = new Cat()
let cow1 = new Cow()

dog1.speak() // => woof
cat1.speak() // => meowww
cow1.speak() // => moooooo

The Cat, Dog, and Cow classes are inheriting from the Animal class. This allows the Cat, Dog, and Cow class to use the Animal's interface. They only have the speak method available to them though. If we were to leave the speak method out of the Cat, Dog, and Cow class, and then create instances of a Cat, Dog, and Cow class we would still be able to call the speak method on those instances. The only issue is that it would print out the Animals 'makes sound' instead of the appropriate sounds that a Cat, Dog, and Cow makes ('meow', 'woof', 'moo').

This is where method overriding comes in. If we redefine the speak method in the Cat, Dog, and Cow classes, we can customize it to print out the sounds that cats and dogs make.

Encapsulation

Encapsulation binds together the data and functions that manipulate the data, and that keeps both safe from outside interference and misuse. A good example of encapsulation is a class. We can actually refer back to the example above where we talk about Dogs, Cats, and Cows with some slight modifications.

class Dog {
  constructor(name) {
    this.name = name
  }
  printName = () => console.log(this.name)
}

class Cat {
  constructor(name) {
    this.name = name
  }
  printName = () => console.log(this.name)
}

class Cow {
  constructor(name) {
    this.name = name
  }
  printName = () => console.log(this.name)
}

let dog1 = new Dog()
dog1.name = "Max"
dog1.printName() // => Max

let cat1 = new Cat()
cat1.name = "Mark"
cat1.printName() // => Mark

let cow1 = new Cow()
cow1.name = "Tom"
cow1.printName() // => Tom

Notice when we create instances for each animal we also assign a name to each. The takeaway here is that the '.name' after each created instances (i.e dog1.name) are all different. Those '.name' are encapsulated within their according classes. Assigning a name to an instance does not modify any other instances name value.

Inheritance

Inheritance is probably the most easiest one to grasp. Inheritance is the concept of one class using(inheriting) the interface of another class. It then becomes a child or subclass while the class that it's inheriting from is the parent or superclass. We actually did some inheriting in our second example above. The Cat, Dog, and Cow class inherits from the Animal class in order to have access to the speak method. Just make sure to add the extends keyword.

Thanks for reading, please do let me know if this was clear or not. Leave a comment below.

Working with Models in Rails vs Node

Naya Willis — Sun, 22 Nov 2020 20:56:38 +0000

Directory structure (And still growing)

So far, throughout my Node.js learning journey it's been quite fun. Me personally, I love to have my code organized. So, what I've done was mimic rails like architecture. I created and app folder, and inside this app folder I have a few other folders such as models, controllers, routes, middleware, and tests. I didn't use 100% of rails architecture but just enough to help me have an organized directory structure.

Modeling an object

I come from a rails background so seeing the way Node deals with Models is a tad different, but not "oh my god, what the hell" different. Say we had a model named 'Note' representing something that a user writes. The note has a title, and content. In rails you would define your schema within a migration file like so:

def change
     create_table :notes do |t|
          t.string :title
          t.string :content
     end
end

You would then go inside your note.rb file to define any validations and associations like so:

class Notes < ActiveRecord::Base
     validates :title, :content, presence: true

     belongs_to :user
end

This is what it would look like in rails. Pretty straightforward huh? Now, let's check out modeling inside of a Node project.

You define the schema and validations within the note.js file. By the way I'm using the MongoDB database which is a non-relational database. You associate your models using referencing and embedding as opposed to belongs to or has many. Let's define a Note schema and validations. I'll be using the Joi npm package to assist in the validation of a note.

Simple enough?

FYI, the validations defined within the Schema will do just fine. Using the joi package is a plus, setting up some validations on the client side.

To associate a note with a User, you can simply embed the schema into a user. So a user will have an array of NoteSchemas (Every created note).

It'll look a little something like this:

If you take a look at the notes property defined in the UserSchema, we set the type to [NoteSchema]. This indicates that the user "has many" notes.

My Twitter Mobile Clone

Naya Willis — Sun, 15 Nov 2020 22:27:09 +0000

LINK TO LIVE CLONE (Click the home button at bottom, for some reason it doesn't load the homepage right away)

So, I cloned Twitter's mobile version. It was pretty challenging but I've managed to do the best I could. I used React and SCSS/CSS to build this. I practically made everything a component. I felt that the more components I use the more structured I would feel getting further into this project. After all, that's the point of react right?

Hompage

This is the Twitter feed you would see. I'm actually using the npm package 'faker' to generate the fake users with fake tweets.

This is the explorer page. I actually have a friend who sent me a random article to use which the one that you see on the page now.

The Navbar component at the bottom was the easiest part of the project to implement. The Navbar component is reusable across every page. I love that type of consistency. I tried to do the same with the header but it didn't work out how I wanted because of the icons on the right side of the header. For the most part, they are all different across pages.

Create Tweet Page

This is the "Create Tweet" page.

It was a little tough finding the exact same icons so I had to improvise and find closely similar ones. I actually used fontAwesome for the icons displayed.

My favorite page to build was the one and only 🥁🥁🥁🥁🥁🥁...

Notifications Page

As I looked at this and then looked at my phone to compare the clone and the actual page from the app, I said to myself, "Damn, I'm really getting good at this, the hard work is really paying off". This was a proud moment for me.

To conclude, not everything on the clone is functional, again, it was mere UI practice. This clone helped me to understand component isolation a bit more. I will definitely be doing more of these. Thanks for reading.

LINK TO LIVE CLONE (Click the home button at bottom, for some reason it doesn't load the homepage right away)

Node.js Under The Hood Routes vs Express Routes

Naya Willis — Sun, 08 Nov 2020 23:39:40 +0000

So, I've been learning Node Js recently. It's been a little on and off but I'm still pushing through when I can. So far I'm really enjoying it. I'm actually learning it from one of my favorite developers. His name is Mosh. He has a very straightforward way of explaining things. I've actually used his videos in conjunction with another developer who goes by the handle The Net Ninja. He's pretty straightforward as well.

I really enjoyed how The Net Ninja starts off showing you what's going on under the hood in is Node.js series. For example, defining your routes without using express would include you using either a switch case, or an if else block. It'll look a little something like this.

The req.url is basically the condition. We want to check if any of the following cases match this condition. If we get a match we add the .html file to the value of path so that html can be rendered. Basically, the path variable is "./views/". Which tells the application where to look for the corresponding .html file. In this case it's our views folder.

On the other hand you have express which provides us some middleware functions such as app.use, app.get, etc. This makes our routing a bit more cleaner and to be honest I find it quite fun. To set up routing with express we basically do the following

Install express => npm i express
Import it => const express = require('express')
Invoke it, returning the value and setting it as the value of a variable named app (by convention) => const app = express()
Start defining those routes like so

app.get('/', (req, res) => {
     res.send('This is the root page')
})

app.get('/about', (req, res) => {
     res.send('This is the about page'
})

And so on. Clearly we see that this is more fun than using a regular switch statement or if and else block.

Learn some Node my friends. If you aren't already.

Hacker Rank: Compare the Triplets

Naya Willis — Mon, 02 Nov 2020 04:59:22 +0000

Hacker Rank Challenge - Compare the Triplets

Problem:
Alice and Bob each created one problem for HackerRank. A reviewer rates the two challenges, awarding points on a scale from 1 to 100 for three categories: problem clarity, originality, and difficulty.

The task is to find their comparison points by comparing a[0] with b[0], a[1] with b[1], and a[2] with b[2].
If a[i] > b[i], then Alice is awarded 1 point.
If a[i] < b[i], then Bob is awarded 1 point.
If a[i] = b[i], then neither person receives a point.

My Solution

function compareTriplets(a, b) {
    const scoreBoard = [0, 0]
    let i = 0
    while (i < a.length) {
        if (a[i] > b[i]) {
            scoreBoard[0] += 1
        } else if (a[i] < b[i]) {
            scoreBoard[1] += 1
        }
        i++
    }
    return scoreBoard
}

I created a scoreBoard and set it equal to [0, 0], each element representing both Alice’s and Bob’s points initially.
I created a counter and while loop that uses that counter.
I created an if else if conditional.
If a[i] Alice’s criteria score is greater than b[i] Bob’s criteria score, then we increment Alice’s final score by 1 which is scoreBoard[0], otherwise if Bobs criteria score is greater than Alice’s then we increment Bob’s final score by 1.

Leetcode: First Unique Char

Naya Willis — Sun, 25 Oct 2020 22:28:10 +0000

Overview

Today I will be solving the First Uniq Char leetcode challenge. The instructions are as follows.

Given a string, find the first non-repeating character in it and return its index. If it doesn't exist, return -1.

const firstUniqChar = s => {
    // code goes here
};

Step 1

I started off with a for loop to loop through str.

const firstUniqChar = str => {
     //
}

Step 2

For each character in the string I get the index of it by using the method

str.indexOf(i => current index)

. Obviously on the first go round it will be the 0th index.

Step 3

I created a if block to check if the letter at index of i has a second appearance within the string by using str.lastIndexOf(i => current index). Within that if conditional

if str.indexOf(i) is === to str.lastIndexOf(i)

. There might be a chance that there are 4 occurrences of that letter and lastIndexOf doesn't count occurrences. But, it is good enough to find out if at least there is a repeat within the string.

So going back to the conditional,

str.indexOf(i) is === to str.lastIndexOf(i)

. If both str.indexOf(i) and str.lastIndexOf(i) are the same indices then we know that, that letter isn't a repeat letter and then we'll return it.

if(s.indexOf(s.charAt(i)) === s.lastIndexOf(s.charAt(i))){ 
     return i 
}

In the event that there isn't a uniq char then we will just return -1

All Together

const firstUniqChar = s => {
    for(let i = 0; i < s.length; i++){
        if(s.indexOf(s.charAt(i)) === s.lastIndexOf(s.charAt(i))){ 
             return i 
        }
    }
    return -1
};

Leetcode: FizzBuzz

Naya Willis — Mon, 19 Oct 2020 00:17:47 +0000

Today, I will be solving the famous FizzBuzz code challenge on Leetcode. The instructions are as follows.

Instructions

For numbers with multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”. The twist is, they want you to return the string representation of each output stored in an array.

Overview

const fizzBuzz = n => {
    // Code goes here
};

Let's play

Step 1:

I created 2 variables. One to handle a counter in a while loop, and one to store fizz buzz values as strings.

let count = 1 //Starting at 1 because we only want to check from number 1 to n

let results = []

Step 2:

Start the while loop

while(count <= n) {
        if(count % 3 === 0 && count % 5 === 0) {
            results.push("FizzBuzz")
        } else if(count % 3 === 0) {
            results.push("Fizz")
        } else if(count % 5 === 0) {
            results.push("Buzz")
        } else {
            results.push(count.toString())
        }
        count++
}

In this while loop a few things are happening. We set a condition in the while loop to do what ever it is in the while loop block as long as the current count is less than n (n = any number).

Then we setup our if else block. The first one is checking to see if count divided by both 3 and 5 is equal to 0. We should do this first to avoid having only Fizz or only Buzz print out when it see's that a count is divisible by ONLY that number. So remember, it should be FizzBuzz when count is divisible by both 3 and 5. If it is we push the string "FizzBuzz" into the results array.

In the else if's we are checking if count is divisible only by 3, and then only by 5. In that case either "Fizz" or "Buzz" will be appended to the array.

In the event that count isn't divisible by either 3 or 5 we'll stringify the current count and then append it to the array. For example => 1. 1 is not divisible by 3 or 5 so we'll just push 1 as a string ( "1" ).

Finally we return the results array. So after all is good we have...

const fizzBuzz = n => {
    let count = 1
    let results = []
    while(count <= n) {
        if(count % 3 === 0 && count % 5 === 0) {
            results.push("FizzBuzz")
        } else if(count % 3 === 0) {
            results.push("Fizz")
        } else if(count % 5 === 0) {
            results.push("Buzz")
        } else {
            results.push(count.toString())
        }
        count++
    }
    return results
};

Leetcode: Reverse Integer

Naya Willis — Sun, 11 Oct 2020 23:24:20 +0000

Today I will be walking through the Reverse Integer Leetcode coding challenge.

Instructions

Given a 32-bit signed integer, reverse digits of an integer.

Note:
Assume we are dealing with an environment that could only store integers within the 32-bit signed integer range: [−231, 231 − 1]. For the purpose of this problem, assume that your function returns 0 when the reversed integer overflows.

Overview

const reverseInteger = num => {
     // CODE GOES HERE
}

Example 1

Input: x = -4253
Output: -3524

Example 2

Input: x = 721
Output: 127

Let's Play

Step 1

There were 2 exponent expressions that I evaluated first. 1 - (-2 ^ 31) and 2 - (2 ^ 31 - 1). I used the Math module to handle those exponent expressions.

let startPoint = Math.pow(-2, 31)
let endPoint = (Math.pow(-2, 31) - 1)

Step 2

I converted the passed in number into a sting using the toString() method.

let numToString = num.toString()

Step 3

Split the string, reversed it, and then joined it back together.

let numSplitReversedJoined = numToString.split('').reverse().join('')

Step 4

Check if there is a hyphen at the beginning of the string, split the string, then use the shift method to remove and return the hyphen. Otherwise, we do nothing.

let hyphen = numToString.includes('-') ? numToString.split('').shift() : null

Step 5

If there is a hyphen, concatenate it to the numToString then parsing it back into a number

let numValueWithHyphen = parseInt(hyphen + (numSplitReversedJoined))
let numValueWOHyphen = parseInt(numSplitReversedJoined)

Step 6

Return either the number if it has a hyphen, or the number without it.

let numValue = hyphen !== null ? numValueWithHyphen : numValueWOHyphen

Step 7

Lastly, check if the number reversed is within range of the startPoint and endPoint that we defined in the beginning. If it's out of range I return 0, otherwise I return the number.

if (numValue <= startPoint || numValue >= endPoint || numValue === 0) {
     return 0
}
return xValue

All together

const reverseInteger = num => {
     let startPoint = Math.pow(-2, 31)
     let endPoint = (Math.pow(-2, 31) - 1)

     let numToString = num.toString()
     let numSplitReversedJoined = numToString.split('').reverse().join('') 

     let hyphen = numToString.includes('-') ? numToString.split('').shift() : null

     let numValueWithHyphen = parseInt(hyphen + (numSplitReversedJoined))
     let numValueWOHyphen = parseInt(numSplitReversedJoined)

     let numValue = hyphen !== null ? numValueWithHyphen : numValueWOHyphen
     if (numValue <= startPoint || numValue >= endPoint || numValue === 0) {
          return 0
     }
     return numValue
}

And, there we have it.

IsPalindrome Code Challenge

Naya Willis — Mon, 05 Oct 2020 03:11:32 +0000

Hello, everyone. Today I will be walking you through the isPalindrome problem on LeetCode. Your approach may be different, or perhaps even better but don't rub it in, just enjoy. Ok, so let's do this.

The Task

Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.

const isPalindrome = s => {
    // CODE GOES IN HERE
};

My Approach

I started by first converting the passed in string to lowercase letters to avoid any case sensitivity issues.

s = s.toLowerCase()

Next, I created a string containing letters a-z and number 0-9 to rule out any special characters i.e !?:.

let alphas = "abcdefghijklmnopqrstuvwxyz0123456789"

Next, I created a variable called caughtAlphas which I'm going to use to push all of the alphas into that array, meanwhile ignoring special characters.

let caughtAlphas = []

Then I declared 2 let variables, one that I'll use to convert the caughtAlphas array to a string, and the second one will give me a boolean value based on whether or not the string is a palindrome

let caughtAlphasToString;
let checkIfPalindrome;

To handle the checking of each character in the string, I used a for loop like so...

for (let i = 0; i < s.length; i++) {
     if(alphas.includes(s[i])) { //alphas contain current char?
          caughtAlphas.push(s[i]) //great, so push it in caught alphas
     }
}

Now, to convert the caughtAlphas array into a string...

caughtAlphasToString = caughtAlphas.join('')

Now, checking it against itself reversed then assign it to the checkIfPalindrome variable

checkIfPalindrome = (caughtAlphasToString === caughtAlphasToString.split('').reverse().join(''))

Lastly, returning it

return checkIfPalindrome

So, now if we put it all together we have...

const isPalindrome = s => {
    s = s.toLowerCase()
    let alphas = "abcdefghijklmnopqrstuvwxyz0123456789"
    let caughtAlphas = []
    let caughtAlphasToString;
    let checkIfPalindrome;

    for (let i = 0; i < s.length; i++) {
        if(alphas.includes(s[i])) {
            caughtAlphas.push(s[i])
        }
    }

    caughtAlphasToString = caughtAlphas.join('')
    checkIfPalindrome = (caughtAlphasToString === caughtAlphasToString.split('').reverse().join(''))
    return checkIfPalindrome
}

This challenge was fun. Hope you enjoyed the breakdown. Post your solutions in the comment section.