DEV Community: Michael-Lee-1994

More Random JavaScript Tips

Michael-Lee-1994 — Sun, 04 Apr 2021 23:51:29 +0000

Intro

We are back again, with some more random JavaScript tips. Don't want to be that guy to link his own blog, but I do have a previous tips blog, you can check it out but I wont link it here cause it feels a little cringe to do so. Since this is part two I'm going to try and make this one a bit more straight to the point, and more showing off the cool tips, rather than explaining everything they do and etc. But let's get started.

Array.fill()

This is a simple built in function for arrays that can be useful in various situations, where you need "dummy" data or like data that you want to be generated for you.

const numbers = Array(10)
//this makes an array with a size 10

Now if you wanted to manually fill in this array with data you could type in the same code but with data filled in it, but a quick easy way to do it is to use the fill method like so.

const numbers = Array(10).fill(1)
//what ever you put between the () fill up the array. So if numbers was console.log you would get
console.log(numbers)
//[1,1,1,1,1,1,1,1,1,1]

Though there are different parameters for the fill method, the first being what you want to use to fill, the 2nd and 3rd being the start and end positions of when to fill. But I wont go in depth about those, here's a link that can explain more though if you want.

A unique way to find unique array items

Everyone knows about how they can use the looping method of .filter to map through and array in order to filter out the unique values of an array. But that method of selecting the unique values is highly dependent on your logic to make sense and work for it to be useful. However if all you want to do is to get all unique values of an array, you can use this method.

const numbers = [1,2,1,3,4,2,1,3,5]
const newNumbers = Array.from(new Set(numbers));

console.log(newNumbers)
//this will return [1,2,3,4,5]

Nullish coalescing ??

So this is a pretty cool tool, that works similarly to the logical OR or || syntax. The double ?? however works in a slightly different way, the || syntax is used when you are comparing 2 values and you want to get a return based on whether the comparison returns either a truthy comparison or a falsey one. However, one down side to || is that this doesn't completely work when the comparison happens with values that are null or undefined. This is where the ?? comes into play, so for the ?? if the comparison returns a null or undefined you will get the right-side return otherwise you get the left side return like so:

const something = null ?? 'default string';
console.log(something);
// expected output: "default string"
//if you used || instead you would get undefined as your console.log

const hmm = 0 ?? 4253;
console.log(hmm);
// expected output: 0

This can be better explained on the docs but it does have various use cases that can be helpful when trying to check if a value you define is null or undefined, or you can use it in other creative ways.

Conclusion

There are many more unique and cool tricks you can use in JavaScript that I haven't gone over, and since Javascript is always getting updates and changing more tricks and stuff are being added and created daily so, keep posted, while i browse around and look for more cool tips for you to use. Nullish coalescing has like a lot of different variations too that I didn't go over, mostly because I am still semi learning about it and am not comfortable explaining them but, maybe soon I will. Thanks for stopping by!

Random JavaScript Tricks

Michael-Lee-1994 — Sun, 28 Mar 2021 12:21:27 +0000

As you grow in your journey, to becoming the very best, at coding in whatever language, you start to learn a few things along the way. Some of these things are pretty common, for example in JavaScript, you might learn or come across simple things like for loops, or conditionals (if/else/else if), and other common features like, that. But then like most things, there are unique features that JavaScript has that can be seen as more niche like ternaries, IIFE's and etc. And here is where I am going to show you some of these more unique and cool JS tricks that can help you grow more in your journey as a developer.

Ternary

Now let's start with a ternary, and you might be thinking, hey this is just a simple ES6 trick to use a conditional without typing out as much. And if you know that much then awesome cool, you're right. But for those of you who don't know, A ternary is indeed a way to "simplify" a if/else statement. Look at this normal if/else:

let dog = "Kitty"
if(dog === "Kitty") {
   console.log("Your dog is a kitty?" ) 
} else {
   //the backticks allows for string interpolation another cool trick
   console.log(`Your dog's name is ${dog}.`
}

This is a pretty simple conditional, if condition is true, you get "Your dog is a kitty?" and if it's false you get "Your dog's name is " whatever you named your dog variable. Simple, but a lot of typing right? This is where a ternary comes into play. Look here :

let dog = "Kitty"
dog === "Kitty" ? "Your dog is a kitty?" : `Your dog's name is ${dog}.`



 Explanation(Kinda)
//Let's break the ternary down here.
//The first section 
dog === "Kitty" 
//This is what condition you want to test, or what you would normally wrap in the () for a if/else
//next comes the ?
?
//This signifies that your done defining your condition and creating the ternary
//Next is the true condition : false condition
"Your dog is a kitty?" : `Your dog's name is ${dog}.`
//Like explained above, on the left side of your : is the return value you get when your condition is true
dog === "Kitty" is true
//Making the right side being what you get returned if it's false
dog === "Kitty" if false

This code block is basically a one liner, that does exactly the same thing as the code above. You might look and compare and ask, but wait, the ternary one doesn't even have a console log, but the other one does, you wouldn't get the same out put right? But that's also wrong, ternaries have what you call an implicit return, so what ever values set to be used as your return values ie. the strings we used, will be the return or consoled values. True they aren't complete the same but they are pretty close. We could wrap them in a console.log if you really wanted. Or change the conditional above to just return the strings.

You might also think, well okay ternaries are cool and all but, for normal conditionals you can have multiple else if, and you can nest them, can you do that with ternaries? Well yes you can but they do look a bit more confusing when you nest them. Like this:

let age = 18

age >= 18 ? 
age > 21 ? "You are able to drink at the bar" : "You can enter the bar, but you can't drink"
: "You are underaged" 

//So in this case you have, another ternary to act as a else if

Immediately Invoked Function Expression IIFE

Another cool JS trick you could use, is called IIFE, or an immediately invoked function expression. Now what is an iffe? simply it's a function that runs immediately on a webpage as the dom renders. Now if you don't know what dom is, this might not be as useful to you, but for those who do. An iffe is something that acts similarly to the react function componentDidMount, in that as soon as you program runs, what ever is in your iffe will run. This is helpful in various ways, but explaining it all in detail would be a much longer blog. I will just show you an example

(function() {
    // Function contents, the code you want to run as soon as the dom renders
You can wrap your whole code in this but at the same time its not necessary, most people use it, when they what to do some async api calls to get data then using that content they can render that content onto the dom in real time
})();

//you can also write it like this 

//same thing
(() => {
    //some code
})();

// It can also be used asynchronously 

( async () => {
   await //some code
})()

Conclusion

Yea I ended up explaining about ternaries a bit much so I ran out of time to really go in depth about IIFEs and the other neat JS tricks but if you do get curious, ill try and make a less in depth but more content version soon!! Thanks for the read, any questions just leave a comment.

What is OOP (Object-Oriented Programming)

Michael-Lee-1994 — Sat, 20 Mar 2021 23:58:23 +0000

If you work in the Tech sphere long enough you come to hear the phrase Object-Oriented Programming or OOP, quite often. Especially so if you are newer to the programming world and you are interviewing for your first job as a developer, you might get asked the question, "What are the 4 major principles of OOP?". If you are here you probably don't know what they are and you are hoping to find out, if you do know and you're still here, well maybe you can get a refresher or point out my mistakes if there are any in how I define what OOP and its 4 major principles are, though there are more than 4 principles, we will only go over the major 4.

Defining OOP

Now Wikipedia defines OOP as “ a programming paradigm based on the concept of “objects”, which may contain data, in the form of fields, often known as attributes; and code, in the form of procedures, often known as methods.” Now for me personally being given this "textbook-like" definition gets me more confused, so I try and simplify its definition like this. Object Oriented Programming is one of many different ways to create structure behind how you write or organize your code into more readable and reusable forms. These forms that you organize your code into are known as objects, thus the name Object oriented programming.

Things you need to know

So before we go into the actual major principles of OOP, you need to know how to define a few things: Objects, Classes, Methods, Instances.
Object: Are simply an instance of a class.
Class: A model of what you want your objects to do.
Method: Simply a function, the way you modify state or properties of your class.
Instance: Instances are better described with an example. In a manufacturing company, when they create their product in bulk, they often use a blueprint. These blueprints can be seen as objects of a class. But once that product is created, it's not an object any more but because it becomes something physical or tangible it becomes an instance of that object, thus the name Instance.

The 4 Major Principles

Encapsulation

Encapsulation, is probably the easiest of the major principles to understand, and in my eyes it's mostly used to hid or restrict access of classes. For example, say you have a class of Users, now these users will probably have multiple methods and a bulk of sensitive data that you don't want just anyone to access or retrieve. If you don't encapsulate your User, class, any class you make will have access to the methods and data store in your User class and thats a no no. So encapsulation is used to protect classes from each other and requires you to use getter or setter methods in order to access or use the protected class. Now how do you use encapsulation? There are usually keywords in your language that similar or are Private/Public, etc. Private classes are usually the encapsulated/protected classes, that need special setter/getter methods in order to access them.

Abstraction

Abstraction is basically an extension of encapsulation. Abstraction is the practice of hiding how an object works. For example, when you are using your phone or something and you want to access an app, you simply touch that app, the app opens up, the pictures you want to see load, your status updates, etc. Basically a lot of things happen with one click. Abstraction is used to basically hide all functionality and only show the user the simple easy clicks. Thus organizing and cleaning up how code works.

Inheritance

Next is inheritance, so this leads into the concept of having one object you create, having children to other objects. So when one object meets another object and they really like each other... Just kidding. So think of it like this say you are a car dealership, you probably have a ton of cars, but they are all the same make or model of the car. So how would you create this kind of relationship with code. Simply you use the parent/child relationship with inheritance. So you would have a car object(the parent) and since all cars have similar features like all cars will have a make/model/etc. You create separate but similar classes for each make, so a Ford class, Porsche Class, etc. Now if you created this classes just individually without inheritance, you can see the problem of having multiple classes having repetitive data and thats wasted space and time. So instead you use inheritance and the Ford/Porsche class would become children of the Car class, and through that you can allow repetitive data to be inherited, rather than repeating code. So if the Car class has a specific method, all of the children of the Car class(Ford/Porsche) will have those methods as well.

Polymorphism

Now inheritance has some problems, that are addressed with polymorphism. So polymorphism is used on children class, in order to customize methods inherited from the parent and adjust them to work uniquely for that child. This is done either by using something called method overloading or method overriding. So let's use a different example for this. Say we have a Shape class, and 3 different children classes square, circle, triangle. Now we give the shape class a method called calculateArea. The 3 children now have the same calculate area method, but look at this problem, the formulas for area in a square, circle, and triangle are all different. This is where you can use method overriding to change what the calculateArea method does for a square, circle, and triangle so that the formulas match the shape. Overloading is when you have multiple methods in a class with the same name, but with different number of parameters.

Conclusion

Welp these were kinda messy, but hopefully simplified and good definitions of the 4 major OOP principles. There are more principles such as Association, Aggregation, Composition, and such, but if you're only worried about getting starting or more beginner tech jobs you probably wont be asked about these principles. Though you might come across questions about other types of programming structures like functional or procedural and how they differ or compare to OOP and that might be my next blog topic, if y'all want. Just leave a like and I'll take that as a sign to write about that.

Useful React Native Packages

Michael-Lee-1994 — Sat, 30 Jan 2021 01:22:13 +0000

Intro

If you have read the title of this blog, you've probably stopped by because you want to learn about some useful React Native packages, so that you can use them for your next React Native project. So let me just get started, if you are new to React Native, feel free to look up my previous blog about how to get started with React Native, or just look at it to get a refresher if needed, though it is kinda a rough read.

Overview

To get started, I will just list out the packages I will be going over for you right here.

React Native Animatable
React Native Vector Icons
React Native Snap Carousel
React Navigation
Axios

Now most of these packages are stylistic, or have to deal with how your application looks, but the rest deal with useful functionality that you might end up needing, if you plan on using React Native to create a full robust application. I don't plan to write extensively about each of these packages, mostly because, I'm not the best writer, but also because these packages are pretty well documented and they have a ton of functionality so going through them in complete depth would end up having me write a novel.

Also a quick disclaimer, I will be showing some code snippets on here that will be using npm install, but know that you can use npm/yarn/expo interchangeably for most of these installations, probably.

React Native Animatable

First off is React Native Animatable, and as the name suggests, this package helps you add animations to elements contained in mobile components. Now you can find more information about this package here, but I will try and explain how to use this package in your project. To add this package to your app, you will need to use either of these commands in your terminal.

npm install react-native-animatable --save
yarn add react-native-animatable
//If this is an expo application
expo install react-native-animatable

Then in order to use this package, you need to import this package in each of the components that you intend to use the animations like so.

import * as Animatable from 'react-native-animatable';

Then to use it on a component you are importing from react you can implement the animatable like so.

//There are various props you can add to the Animatable tag you should look on the doc for more customizations 
<Animatable.Text 
 //Some type of styling to the text
 style={{}}
 //The type of animation you want the text to have
 animation="jello"
 //A delay, if you want your animation to be have a delayed activation, not required
 delay={1500}
>
 Hello World
</Animatable.Text>

React Native Vector Icons

Next is React Native Vector Icons, this package helps you add various icons to mobile components. Now you can find more information about this package here, this is how to implement this package to your app, you will need to use either of these commands in your terminal.

npm install react-native-vector-icons --save
yarn add react-native-vector-icons
//If this is an expo application
expo install react-native-vector-icons

Then in order to use this package, you need to import this package in each of the components that you intend to use the icons like so.

//The FontAwesome section, is and should be replaced, with the type of icons you would like to use, the list of compatible types are on link above
import Icon from 'react-native-vector-icons/FontAwesome';

Then to use it on a component you are importing from react you can implement the Icons like so.

//There are various props you can add to the Animatable tag you should look on the doc for more customizations 
<Icon
//The name is the name of the icon you want to use
name="user-o"
//Color and size are pretty self explanatory
color="#05375a"
size={25}
/>

React Native Snap Carousel

Next is React Native Snap Carousel, this package helps you add a sliding modal like this
to mobile components. Now you can find more information about this package here, this is how to implement this package to your app, you will need to use either of these commands in your terminal.

npm install react-native-snap-carousel --save
yarn add react-native-snap-carousel
//If this is an expo application
expo install react-native-snap-carousel

Then in order to use this package, you need to import this package in each of the components that you intend to use this carousel like so.

import Carousel from 'react-native-snap-carousel';

Since implementation for the carousel is a bit more complex, I wont show how to implement it here, but if you'd like a blog about that, just let me know in the comments below. But a simple way to know is to look at their docs or this like here for example code. Also on their github link itself.

React Navigation

First off is React Navigation, and as the name suggests, this package helps you add navigation or screen routing to your mobile app. React Navigation holds a similar concept to React Router, but for mobile apps. Now you can find more information about this package here, but I will try and explain how to use this package in your project. To add this package to your app, you will need to use a ton of these commands in your terminal.

npm install @react-navigation/native --save
yarn add @react-navigation/native
//If this is an expo application
expo install @react-navigation/native
//You will also need these commands these can be run with npm/expo/yarn
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

The implementation of React Navigation is also extremely dense and will also need a new blog post, maybe on my next one where I also explain snap carousel.

Axios

Next is Axios, this package helps you make http requests from node.js, it supports the Promise API. Now you can find more information about this package here, this is how to implement this package to your app, you will need to use either of these commands in your terminal.

npm install axios
yarn add axios
//If this is an expo application
expo install axios

Then in order to use this package, you need to import this package in each of the components that you intend to use the icons like so.

import axios from 'axios'

Then you should look at the various ways to implement this into your code on the github link but heres an example

// this axios will be referring to the axios in your import above
axios.get('Your URL')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Conclusion

There are loads of other packages that I would like to show off, but I there are way too many to explain with just one blog, but in the future maybe I will be able to write about some more. But at least coming in the next blog, there will be some more explanation about snap carousel, and react navigation at least.

What is React Native?

Michael-Lee-1994 — Thu, 28 Jan 2021 09:05:24 +0000

Intro

If you have been working with Javascript for awhile you should have heard about the framework maintained by FaceBook, called React. And you might also know what React is, and that it's a library for building user interfaces, or a mobile app, website, etc. Now React, by itself, is only used for the frontend of your app, or what the user interacts with. Because React only really "handles"(using this term lightly) the frontend, you need to use other backend languages, to create a fully functional, full-stack application. A popular combination of frameworks that is used with React, is the MERN stack. MERN, stands for MongoDB(the database to store your applications data), ExpressJS( a web framework that uses Node.js), ReactJS(the client side framework), and NodeJS(the backend of your framework). However, there is also a thing called React Native that is similar to React, but it is for mobile apps. Being familiar with React, you might think, oh so React Native, must be a way to have your React web app, work in a mobile device, but it's not quite that. React Native is more than a web app that looks like a mobile app, it's a native, like in the name, mobile app that works with either Android or IOS. Normally, in order to create a mobile app, for Android or IOS, would need to know specific languages, such as Objective C/Swift for IOS, and Java/Kotlin for Android, but for React Native, like its' web counterpart you just need JavaScript. This distinction is why React Native grew in popularity.

How To Get Started

Now in order to really fully build and understand how to build a React Native app, you should confer to the React Native documentation, on their website here. But I will try to get you a quick run down and quick setup guide to creating a React Native app and show you some tools you can use in conjunction with it. Now there are two distinct methods for implementing react native, one requires a secondary tool, called Expo, and the other one is more vanilla and uses React Native directly. React Native's CLI is a way to use javascript code to create a fully functional mobile app. This app is sometimes confused to be a web app, running on your phone, but this is not the case and it is actually a fully mobile targeted application creator. Now though you can create an app using react native, using purely JS, you can also use native IOS and Android languages while using React Native as well. Similarly, Expo applications are written primarily using JS, and TypeScript, a language very similar to JS, but with various differences here and there. However the key difference between the two is that Expo does not support native IOS and Android languages. So now the big decision arises, when you ask, which CLI should I use to create my mobile app, Expo or Pure React Native. The major deciding factor in choosing either Expo or Native, should be made based on these two things, are you worried about some compatibility issues, and do you want to use native IOS or Android modules. Expo, since it strictly focuses on JS/TS code, was made for web developers in mind, so that they can create mobile applications easier without having to worry too much about learning native mobile languages. Though Expo, may sound like the way to go, having mostly pros about it, because of how Expo was built, it ends up being a larger in overall size, and uses more memory, compared to Pure React Native. This explanation is fairly basic but if you want a more in depth explanation for choosing either Expo or Native, you can look at the link above and the differences between the two are more detailed. Because I am mostly a Web developer, and because Expo applications can always be converted to pure React Native code, I will be explaining how to start off an Expo mobile application in my tutorial.

Now in order to get started, I am assuming you know how to install node modules via npm on your command line to get node packages. This tutorial is also on Mac, but windows installation should be fairly similar.

//This command installs the expo cli globally to your computer
npm install --global expo-cli
//This command uses that newly installed expo cli to initialize a new expo application, the my-project is what you want to name your new app 
expo init my-project
// You can leave it blank and expo will ask you what you want to name it too :)

Now after you init, and give your app a name you will be presented with 5 options for how you want Expo to initialize your base React Native app, there are 2 JS templates and 3 TS, so test out each one and see which one you like best. These are literally templates with some being more vanilla than others.
Now after youe app installs, you will have to navigate to the new project folder that was installed and then run the command expo start. If you have yarn or npm, you can also run yarn start, or npm start too.

// navigate to app folder
cd app name
//run expo, npm, yarn start to build your expo app
expo start

Now as soon are run these command the Expo Metro Bundler will open up on your browser, using a localhost domain and it will prompt you and tell you multiple things, these things are just options on how you want to run your app. There are few options, such as running either a IOS/Android emulator, running it as a website, or as you can see there is a big QR code that you guessed it, you can run the app on your actual mobile device. However there is one catch to this, you need to install the Expo application on your phone from your app store and use that to "look at via the camera" the QR code, which will then prompt your phone app to open your expo app on your phone.

And Voila!!!

You have created your first Expo app, it was as easy as that! Now mess around, with it on your code editor, write "Hello World" where ever you want! Look at the expo docs for various helpful tools, tips, and steps you can take to create a beautiful mobile app.

How I got here...

Michael-Lee-1994 — Wed, 02 Dec 2020 19:34:01 +0000

When a hero is born, they usually have some type of origin story. Mine, started a long time ago, in a galaxy far, far away... If you look from at it from the perspective of someone with a lifespan of a fly, that lives in a galaxy that isn't close to the Milky Way. But for any human, my story began several years ago at the cross roads to end of my college career. It was here that I was faced with the reality breaking question, of "what am I going to do after I graduate?". As a college senior, who had experienced various trials and tribulations throughout my collegiate experience, I had thought my road was paved and lead to a clear path, but I was mistaken.

As I pondered, my questions about the future grew larger and more uncertain as my graduation day approached. I started to wonder about whether the path of a Political Scientist was the correct path for me. My doubts led to me questioning myself, about what I really enjoyed in life. This is when I started to realize, that in my life of consistent change, the only thing that had really been consistent in it was my interest in playing gaming. As a child, I lived a life full of sudden change, and those sudden changes ended up being the norm for me. But no matter the change, I could always rely on my level 100 Charizard to be by my side.

Games, though they, may seem insignificant in the large scheme of things, were always there for me in hard times. In times, when I moved from one state to the other, these games kept me connected to friends of the past, while also introducing me to new ones as well. This bond that I had formed with gaming was one sided in my youth, in that though I had interest in games, that interest was solely towards the content of the games, and not about their creation or origin. Sure if you had asked as a child, how to beat a Bowser in Super Mario, or how to catch a legendary Pokemon, in Pokemon Red, I could give you an answer within minutes. But if you asked me anything about who created Pokemon, or how it was created, or more importantly what field of study you needed to be in, in order to recreate these games, I would be at a loss.
Looking back at my life and comparing it with today, I can truly marvel about how much life has changed in such a short amount of time. As a child, finding life changing information was not as simple as it seems like it is today, where you can google one phrase and be flooded with millions of responses within seconds. This being said, I was ignorant about things I cared about. But then, here I was a bajillion years late to the party, and once again in a life pickle, games came to my rescue. In my struggles to find my true life calling, I finally researched how games were created and I stumbled upon coding and software development as a result. And just like that a whole new world blossomed in front of me, but it seemed like I was too late to the party for it to matter.

Being flooded with so much new information, I was overwhelmed, but at the same time I was lucky. Around the time I started my search, was and still is a time, when tech companies were in dire search for more computer programers in this technologically booming time. Not only were there a growing number of coding bootcamps popping up, to help people move towards a career change toward these new medium, but there were also an increase in job opportunities as well. But the even bigger coincidence was that, I had a bigger connections to the computer programming world than I had realized, my sister was already a part of that world. My sister, walked me through and explained about what she knew about this strange world of coding to me, and with her help I started testing out the waters to see if they were the right temperature for me. Because of how accessible information is nowadays, she told me I should look up either YouTube tutorials, or look at some free websites for coding introductions. So I did, and at my first "Hello World" I knew I would be hooked for life. This new world of slowly understanding how gaming worked, "in real life", was truly mind blowing. But soon enough these video tutorials became too hard to follow and seemed a bit much for one gamer to handle so I asked my sister again for some advice on what to do. It was here that she told me to research about the world of coding bootcamps, or if I was really serious about it, to consider going back to school for a degree in Computer Science to follow in her footsteps. And it was here that I realized that I truly was about to become born anew.

Now as I am writing this section of the blog, I realize now that I ended up talking more about my past ignorance, rather than talking about my coding journey. But because of how complicated my coding journey was, its seems like a new story on its own, but I'll give you a story version here. I started my journey with YouTube tutorials about coding, the specific languages I studied were web development based, with the (HTML,CSS, JavaScript) trio. But this led to a seemingly large gap of information that I wanted to know, but with only videos felt like I couldn't acquire. Then I moved towards a newer approach with enrolling in a coding bootcamp, specifically the one offered by the University of Washington's Full Stack Developers bootcamp. It was shortly after completing that bootcamp that I still felt incomplete, and had a few more journeys(a coding "job", formal collegiate teaching) along the way. But that blog is coming up in the near future, because I'm on a new adventure learning more about coding, with my favorite Cohort in a bootcamp taught by FlatIron School.

How I Overcome My (f)Errors

Michael-Lee-1994 — Thu, 12 Nov 2020 20:22:17 +0000

Errors are Erverywhere!!!

Regardless of who you are, a student, a professional, or an average Joe/Jane, you are probably familiar with or have ran into the 404 Page Not Found, while browsing the web. You also may have wondered what a 404 is, and why so many different websites provide you with this notification, when their website is down or when you type a domain name that doesn't exist. This warning is a commonly known server error that happens when a user attempts to open a dead or broken link. However, from a users standpoint, this kind of error is confusing and frustrating to experience. However, from a developers standpoint, this error is easily handled and fixed if you know how to approach the problem. That being said there are many different types of error or bugs that someone can have while creating code, and I am here to help you understand how to solve these issues a bit better. That being said, I am not a professional debugger of any sort, but I do have various experience in writing and debugging code, so if you are a professional code tester, or debugger this is definitely not the place for you.

Where to start?

The first thing you should know about debugging a problem is to know what types of problems can exist while writing a program or code. Sure there are numerous different scenarios and reasons why a code can break, and some of those might not be covered on this blog, but I will try to cover as much as I can with my limited knowledge. Now what I will go over in this blog is how to identify what kind of error you have, and how to solve or approach solving your error using the tools you have at your disposal. One disclaimer beforehand, is that I will be going over errors that might show up mainly in the coding languages of Ruby, Rails, Java, JavaScript, HTML, CSS, SQL, and some other random languages. That being said I cannot cover all of these, but I have also seen many of these errors and will try and guide you through the steps I take when trying to fix these problems.

Check The Little Things

The first rule that I always go by when running into an error is, "check the little things". Now this advice, while it may seem obvious, is honestly the most important rule, when trying to solve all of the pesky problems you hit when writing working code. Now this advice may seem dumb, and you might ask, how would you define "little things"? And I would tell you by asking you to ask yourself, "what small mistake could I have made to break my code". Now what does this mean? Simply, I'm telling you to look for syntax or spelling errors. I find that a large majority of errors are user error, and you might be thinking, "thanks a lot Mr.Genius" in a sarcastic manner, but this approach is extremely helpful. The more you write code and the more you look at code the more fuzzy it can become and the more easy it can become skewed or messed up. For example, look at the word recipe. Let's say we start typing the word recipe, because we want to make an app, or webpage that has a lot of recipes or uses the word recipe a lot. Over time and through long hours, the more you look at the word recipe, the more reciepe, starts to look weird. And when you start noticing that the word reciepe starts to look weird, the more you question whether or not its your eye and brain playing tricks on you or if you are making a mistake. Now for the sharp ones reading this blog, you have probably noticed that midway through I started typing recipe weird and syntactically I spelled reciepe with an extra e. Now this is only one example of how you can make a simple syntax error, and how you can break your code because of this small mistake. Now when you look at this example visually, it's easy to tell that it's a syntax error and that the mistake is a spelling error, but let's look at how this error would appear if it was in a program.

Look at this example. This is an extremely simple example, but lets read and analyze what we see in the error message above. As we can see in this code, if you know ruby or similar languages, we have a variable named recipe. This variable is assigned a value of "This is a recipe". Now line 3 says puts reciepe, which should tell the computer to read what value is assigned to reciepe and return that value, but as you can see we get an error instead that says "undefined local variable or method reciepe". This is because we spelled recipe wrong and are trying to puts a variable that isn't created. Pretty straightforward. Let's take a closer look at the error though. So the error here is extremely helpful. First its finding, or Traceback, where we hit our error and it tells you, test.rb:3:in. Now what does that mean? It shouldn't take a genius to add up that test.rb is the name of the file that we ran, and that the 3 following it refers to the line number where the error occurred, because its followed by the in right after and if we look at our actual code, that all matches up. Next we get the actual error where it tells you what went wrong that we went over above. So if you can read you can clearly see what the problem is. However, not all errors are this simple.

Look at this example, this is an example of another common error, known as a logic or logical error. This type of error, is harder to fix, because like you see above, there is no visible error. This logical error is also hard because it makes you question your own knowledge as a developer. But because of this it brings out good questions to ask yourself in order to solve these types of problems. Some of these questions are: what am I trying to get my code to do, what kind of output should my code return, and lastly the hardest question to answer, am I actually writing the correct logic in order for this code to work. These simple questions, are question you must ask yourself in order for you to fully understand where you must look when trying to fix your problem. In the example above, like the previous one, we want to print out the variable recipe that we created and show it back to the user in the console. The first step, in knowing that it is indeed a logical error is that there is no visible error being returned to us in the console. However, more complex logical errors can also display a visual error so do not confuse simple errors with logical errors only on the fact that a visual error appears or not. But back to the code, we see above, if you know ruby, you would know that implicitly when a variable is called the return value of all variables is nil or empty. So when we call only recipe, in order to get its value back to us, in the console it returns nothing or nil. And this is how a logical error can be solved. Now all of these examples so far are simple errors that do not need much time, while solving, but what happens when you move to more complex problems? Do you need to change how you approach debugging the problem? No, you should ask the same questions, but you also might need to ask the harder question more often. The harder question being, am I actually writing my logic correctly when trying to make my program run correctly? Now what do I mean by "writing your logic correctly"? What this question is asking is, am I writing the correct code, to run that task that I want to run? For example, if you know about the built in ruby methods .each and .map, you will know that they are both enumerables, or methods that will run in a loop and can be adjusted to run in various different ways. However, these 2 methods being very similar in use case, they have one very distinct difference, while otherwise being the exact same method. This difference is that the .map method will return a new changed array, while the .each will return the original array unchanged. This is where the question "am I writing my logic correctly" comes into play. In the example with .each and .map, if you had code that uses one of these methods and you ran them, both would run without giving you visual errors, while the only one would provide you with the expected response. Though that being said you could write code that does give you visual errors with .each and .map, but thats not super relevant to explain. Because we are not talking about what methods give you errors, but if the logic in your code will give you errors or not.

How to approach fixing a logic error?

Now that you've isolated the problem to a logic error, what steps should you take to fix it? If you know what logic problem it is, that makes things easy, and you can go straight to the source and edit the code and rerun your tests. Otherwise, here are a few things to try. One method would be to use one of the built in debugger tools or a debugger gem to help visual the steps your code is taking in order to see what is happening every step if the way in your codes life cycle. Some debugger tools are pry or byebug. If you want more info on these things feel free to google them. With these tools, you can stop your codes runtime, and run tests inside the terminal in order to isolate the problems source. If this doesn't help, or if I look at my code and the logic seems to work as I think it should, I head to my one true savior, Go.....ogle. Yes, as annoying as this might be, Google knows all. All jokes aside though, googling documentation about how certain programming methods, or code works can be a helpful solution to your problems. There are millions and millions of programmers out there and there's even more references and code/programs you can use as references to verify if you are coding correctly. Since the coding world is so big, chances are that a problem you run into has been ran into by someone else before too. So using your googling skills you can solve the errors you run into. However, that being said there are some do's and don't when it comes to googling errors. One of the major don'ts is to not just copy the whole error you get and paste it into your browser. Sure this might work some of the time, if your error is small or common, but if not you wont get anywhere and you'll be stuck googling for eternity trying to fix your problem. Rather than googling the whole excerpt of the error, it is okay to take snippets, preferably from the beginning or the end and pasting that into google and then reading and comparing your errors to those of other previous programmers.

Like for this example, sure if you copied this whole error, and pasted it into google, you might get lucky and get a result. But it would be better practice and a better learning experience if you copied only the first part "Syntax Error: Unexpected token < in JSON at position 0". This way your searches might be a bit more broad, and you'll be able to get more results. This also helps you in the long run to start to memorize errors and familiarize yourself with them and once you fix your problem, if you see a similar error message you might be able to isolate the problem easier the second time around. Like the verbiage Syntax Error, or Unexpected token, are very common error message that refer to usage of syntax that is extra or missing, when you need or should use different syntax instead.

Final

Now before this blog gets too long I'll leave you off with one final example of a logic error I ran into, and how I managed to solve it(Though I did end up needing some outside help).

Now in this example, I have an webapp, that allows users to create an address and attach it to the users information, after creation of an account. However, because of how I setup my user and address relationship, the user is unable to create an address at the same time as when they create a login account. So the solution I came up with was, that when a user's account is created, they can add an address after the fact. Now the problem, I was facing was that when a user tried to create an address and that address was being added to the database, I would try and update the user, so that they would know what address the user belonged to. This relationship in databases is known as foreign key relationships or parent-child relationships. As you can see in the images above, the addresses were being created and stored into the database, but for some reason I was unable to update the address_id(foreign key) in the users database, to match the newly created address. So in order to check this I used one of the debugger tools at my disposal, byebug, so I could see step by step what was happening and surely, my address would be saved into the database, but when I would try and update my user, the update would rollback, or fail, but the program would continue on and render the website without a visual error of a problem. Step by step, I checked every logical part of my code, until I was finally stumped, and was pushed by a professor, to google some documentation on how to update or change a singular column in a database table. Which lead to, a discovery of a logic mistake that for some reason, the update method built into a program I was using, did not like updating only a single column, but wanted to use update_attribute, to do this task instead. And thus like magic, my problem was solved, and you can see with the yellow text in the image above "UPDATE users" worked and my database was fixed. True, this fix was aided by a professors suggestion, but it could also have arrived if I had first taken the time to google updating a singular element in a database versus multiple. There seemed to be a small gap in my knowledge in this aspect of editing databases.

Conclusion

Thanks for reading the really long and hopefully helpful blog, I apologize for how poorly it is written and how seemingly obvious all my tips were, but hopefully you gained some knowledge about how to approach errors and bugs. On final note is that there are way more kinds of errors and bugs that can occur than I went over and there are lots of things I wanted to cover but couldn't but feel free to ask or leave a comment below and hopefully I can reach them or help with them if I see them. Have a great one!

VS Code Tricks & Tips for Mac

Michael-Lee-1994 — Wed, 21 Oct 2020 03:22:43 +0000

Welcome

Anyone who learns to code or writes code for a living, use some sort of medium in which they can take the coding logic that they have stored inside their head and translate that it into a working program. These software programs can be used to help bring the users visualizations to life and are called code editors. That being said there are lots of different software programs that are classified as code editors, and like most products with variation, there are many differences between each code editor.

Intro- Visual Studio Code or VS Code

Some example of popular code editors are Atom, Sublime Text, and Notepad++. But this blog isn't about those editors and you know that because it's written in the title of this blog. This is a tricks and tips about the code editor most people enjoy called Visual Studio Code, or VS Code. Many code editors have their own pros and cons but since I am most familiar with VS Code this blog will focus on how to manipulate VS Code and use it to its full potential.

Basics

To start, I will be assuming that if you are reading this blog that you are somewhat familiar with VS Code, but want to know more about the more niche tools that VS Code has to offer. However, if you ended up here with no prior knowledge about VS Code, then this next section is specifically for you. I will walk you through some of the main features of VS Code.

UI of VS Code

This is a basic image of how VS Code will look when you open it up. It might not be in dark mode, or the dark color layout, but you can set it to that color scheme or a lighter colored mode upon installation or through the settings menu. In this window you can see various clickable side tabs, multiple options to open folders, project, workspaces and etc. in the boot-up menu. All pretty basic functionality needed in for a code editor. Near the lower portion of this image you can see highlighted red box, inside of it, VS Code has listed various helpful links and videos that will walk you through, in more detail, some of the feature of VS Code that I won't talk through. But feel free to click on those helpful links if you get interested in VS Code and decide to download it for yourself.
This is the link to the tips and tricks right here: https://code.visualstudio.com/docs/getstarted/tips-and-tricks#vscode

Themes

Now we talked about how my VS Code was set to a dark theme, one of the fun things about VS Code is that changing how the interface looks can be simple and helpful. Since this trick is also in the link above I'll only list the commands needed and an image of what happens, don't be shy and go visit the site above, I promise no viruses unless you're on windows then oops, I can't promise you no viruses on windows and its not my fault if you somehow get a virus through my link 😜. But to the point in order to change your interfaces theme you need to press ⌘K and then press ⌘T anywhere in the application in succession, then select the theme you like. When you initially press the ⌘K, you will be able to see at the very bottom of your VS Code window and prompt will appear, signifying that you pressed ⌘K, and notifying that it wants a second input action. Now if the default themes that are available are not to your liking, you can always add more by visiting the Extensions tab on your left tab bar, or the tab that looks like 4 boxes, to install new themes to your theme selections. The Bearded Themes extension, is a personal favorite of mine. Now aside from ascetics, these themes tend to be helpful in color coordinating certain code elements so that you can visually catch any syntax or spelling errors you made while coding, more easily. Though not all of these themes will follow this pattern, most will.

Now that you've customized your themes to fit you liking, we can get to the more helpful tricks you can use. Im sure if you've used or played with VS Code, by now you will know that there are somethings known as extensions that you can download to your application, that will help you in your coding journey. But since extensions are a numerous in number and function, will skip over them in this blog aside from the theme based one introduced above.

Mass typo or word selection ⌘D

What we will go over in this section, is how to manage your code in a more efficient way. One example of this is through the multi selection and code editing feature. This feature in VS Code's documentation, is listed as "add selection to next find match" or ⌘D. Note this command should be used on an open file. So if you're familiar with coding, you should know by now that most code editors, for good reason, do not have a built in spell checker, unlike how most text editors have a dictionary to check for misspelled words. So in a code editor, if you typed bananna, or bannana but wanted to spell banana you would be at a loss and those errors would be kept and possibly unnoticed. And say that while working hard through your code writing pages and pages of it, you finally notice, through bugs or errors when running your tests, that for some reason you have bananna, written down some places, bannana written in others and banana written it the rest of you file. Darn!! Now normally you would have to go through your code, manually track down your errors or use the ⌘F or the find all function in your code to highlight your errors so you can make your code run.

However if you double click the word you want to find and use ⌘D, you can select all instances of that selected word in your code. You might think, wait if I just search for the word with ⌘F or the other find all feature I can find my mistakes that way. The problem, with this method is that you need to know how to you spelled the misspelled word, and you would also need to possible search through every variation of that word to fix your problem. ⌘D however lets you select all words without having to know the spelling of the word, by just selecting/highlighting the word. You might think, "well sure thats cool you found them so what, I still have to go through and manually change each highlighted word like I do with ⌘F." But thats where you are wrong! While you have them selected you can change all of the instances of that selected word a the same time, and you could even change them to be the word "Chicken."

Sure there are limits to this function, like seen above, in that ⌘D didn't select the "nas" in banannanas but it can be very helpful for fixing typos in your code quickly if you select the exact word you would like to fix.

Word can (w)Rap!

Now on to the next tip. Now you might be trying to recreate my banana text above to work on this mass selection yourself or you might be noticing something unique in my code that your code doesn't seem to do. And that is word wrapping. You might've read word wrapping and thought words can't wrap, but think again cause they can. Ba-Dump-Ching!! They can wrap, and by wrap I mean that your sentences can wrap around the text window instead of flowing off the page and becoming unreadable. Like so.

Now this screenshot is exactly the same code as the above image but with word wrap turned off. And as you can see the words flow right off the page and are unreadable. Unless you like scrolling or don't mind swiping left on them words, like Tinder this problem can become annoying quite fast. How do you fix this problem? If you guessed another ⌘ + Letter command, you're close but no cigar. It's an alt/option command with the letter Z. Or if you're familiar with this key symbol: ⌥Z. This will allow you to see your code on the page without that stubborn scrolling to see what text is cut off the end. This also opens up the door to working with multiple tabs open in your code editor, which is pretty neat!

Code movement

Now lastly before this blog gets too long, I'll leave you with one last handy trick that I use often accidentally while typing when I'm not on VS Code. This helpful trick should be implemented in all and any application that utilizes typing in bulk. This trick is moving your code lines either up or down one or multiple lines 😲.

What? You seem disappointed... This trick is a lot more helpful than you would imagine. Especially when you have blocks of nested code and you're trying to see where your code is breaking down. Or if you just have code that you need to run sooner or later in your top down coding language and you want to quickly reorganize where it is in your file, without having to copy and paste that code snippet in the correct spot. And the best part is you don't even need to highlight the code or select the whole code to move it. With the ⌥↑↓, or option arrow up/down, you can move any code big or small up and down with the click of 2 easy buttons. I wish I could have a gif of me demonstrating the capabilities of this shortcut, but I will have to improve my gif making abilities first.

Finally

Hopefully though, if you even made it this far into my poorly written, maybe? helpful blog, you got something useful out of it. Maybe you learned a tool or two or maybe you just liked the links to the actual VS Code page I posted above that actually had detailed lists of tricks and tips. But anyways thanks for stopping by, maybe I'll continue on the saga of tricks and tips later, when I get better at writing blogs. There are lots more tricks, but I end up rambling and lost the time to put them here but hopefully I helped y'all in some way. Thanks for reading, and Keep Coding.

DEV Community: Michael-Lee-1994

More Random JavaScript Tips

Intro

Array.fill()

A unique way to find unique array items

Nullish coalescing ??

Conclusion

Random JavaScript Tricks

Ternary

Immediately Invoked Function Expression IIFE

Conclusion

What is OOP (Object-Oriented Programming)

Defining OOP

Things you need to know

The 4 Major Principles

Encapsulation

Abstraction

Inheritance

Polymorphism

Conclusion

Useful React Native Packages

Intro

Overview

React Native Animatable

React Native Vector Icons

React Native Snap Carousel

React Navigation

Axios

Conclusion

What is React Native?

Intro

How To Get Started

And Voila!!!

How I got here...

How I Overcome My (f)Errors

Errors are Erverywhere!!!

Where to start?

Check The Little Things

How to approach fixing a logic error?

Final

Conclusion

VS Code Tricks & Tips for Mac

Welcome

Intro- Visual Studio Code or VS Code

Basics

UI of VS Code

Themes

Mass typo or word selection ⌘D

Word can (w)Rap!

Code movement

Finally

*Disclaimer, not all of these images are owned by me, I am not claiming to own these images in the slightest