DEV Community: Ryan Moragas

The Basics of Sass

Ryan Moragas — Fri, 20 Mar 2020 15:48:34 +0000

When designing the front end of applications you can easily find yourself going down a rabbit hole of CSS. Trying to keep track of each id and class that has been styled while making sure it acts as it should everywhere through the app can get super tedious. The larger stylesheets become, the harder they can be to edit and maintain. In this article I'm going to walk through the basics of Sass, which helps simplify your code when styling applications.

Sass is a preprocessor scripting language that is compiled into CSS. SassScript is the scripting language itself, and it consists of two different syntaxes. The first is .sass which uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, .scss, also known as 'Sassy CSS', uses block formatting like CSS with braces to denote code blocks and semicolons to separate rules within a block. In my examples I will be using the .scss syntax.

Variables

Sass allows you to assign styles to variables. All variables start with a dollar sign, and are assigned with a colon. When assigning variables you may use four different data types, being numbers, strings (with quotes or without), colors and booleans. If you have any information that you'll want to use multiple times throughout your stylesheet, you'll most likely want to assign it to a variable. Once a variable is declared you can as often as needed to help keep your styling consistent.

$font-stack: Helvetica, sans-serif;
$primary-color: #49a2b8;

body {
  font: $font-stack;
  color: $primary-color;
}

Nesting

When writing code in HTML it quickly becomes apparent that all pages are essentially nested code blocks. Sass will let you nest your CSS selectors in a way that follows the same pattern of nesting your HTML.

nav {
  ul {
    margin: 5;
    padding: 0;
  }

  li { 
    display: inline-block; 
  }

  a {
    padding: 6px 12px;
    text-decoration: none;
  }
}

Modules

Sass also allows you to split up your style logic into multiple files using the @use rule, which can help keep your stylesheets from becoming obnoxiously long. This rule allows you to load another Sass file as a module, where you can use all of its code in your current file by simply putting @use <filename>; at the top of your style sheet.

// main.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #49a2b8;

body {
  font: $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'main';

.inverse {
  background-color: main.$primary-color;
  color: white;
}

Mixins

A mixin is a block of code that lets you group CSS declarations that you might reuse throughout your site. To create a mixin you use the @mixin command followed by a space and your mixin name, followed by the block of code you want to reuse. You will then use that mixin by using the @include command.

@mixin flex {
    display: -webkit-flex;
    display: flex;
}

.row {
    @include flex;
}

Inheritance

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The @extend command lets you share a set of CSS properties from one selector to another.

.button-basic  {
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

This wraps up the most basic aspects of writing Sass, but there are plenty of other advanced features that the language has to offer. It can help you write stylesheets faster, while keeping your code DRY. After writing in .scss you can even find .css to be harder, since you'll notice it takes much more time composing after getting used to the multiple shortcuts Sass brings to the table. If you are still using basic CSS and find yourself wasting time repeating yourself often, Sass is the perfect tool to learn.

An Intro to Elixir from a JavaScript Background

Ryan Moragas — Sat, 08 Feb 2020 21:00:34 +0000

Elixir is a functional programming language that extends the Erlang language, which is an older language that gained its popularity in the 80's, and is mixed with Ruby syntax. The language is fairly new, being created in 2011, and has excellent documentation. It is a functional programming language and has no classes, but instead modules with module functions. Elixir also has a mature web framework called Phoenix, which makes using it much easier when developing real world applications.

After you install Elixir you will have three new executables right out of the box, being iex, elixir and elixirc. If you compiled Elixir from source or are using a packaged version, you can find these inside the bin directory. For these exmaples I'll use iex (or iex.bat if you are on Windows) which stands for Interactive Elixir. In interactive mode, you can type any Elixir expression and get its result immediately in the terminal.

Before getting started it is probably best to cover the basics on Elixir, and that starts with its simple data types. There are several different types of simple data types in Elixir, being integers, floats, strings, atoms, booleans, lists, and tuples. I'll touch on each of these data types with a brief explanation of what they are.

Integers and floats are both number data types. Integers can be thought of as whole numbers, and floats are integers with decimal values. While these data types might seem similar, integers and floats are two completely different values and can never be strictly equal to each other. With that being said, you can still use integers and floats together in operations, and sometimes operations on integers will automatically produce floats.

iex(1)> 2 + 2 
4
iex(2)> 3 * 3
9
iex(3)> 3 / 3
1.0
iex(4)> 1 === 1.0
false

As seen from the code above, performing division on two integers will always produce a float. You can also see that even though mathematically 1 === 1.0 is true, since they are two different data types in Elixir they are not strictly equal values.

Next on the list of simple data types we have strings. All strings in Elixir must be declared using double quotes. Strings are essentially binaries converted to characters, so you can treat them the same. To append strings together, unlike using + in JavaScript, you use the <> operator. You can use simple concatenation to add strings together. You can also interpolate values but placing them into the #{//value} interpolation syntax.

iex(5)> intro = "hello"
"hello"
iex(6)> "#{intro} " <> "world!"
"hello world!"

Atoms are simple data types that will always equal themselves. The can be defined by putting a colon in front of the value. In other languages, they are sometimes called symbols. A close reference would be assigning a value to const in JavaScript, but atoms also act similar to booleans.

iex(7)> :atom === :atom
true
iex(8)> :true === true
true
iex(9)> :true === "true"
false

Lists are complex data types that store references to any value types in a specific order. They are defined with brackets, and very comparable to arrays in JavaScript. Any data type can be stored in a list and data is accessed in reference to the head and the tail. The head is the first value in a list and the tail is a list of all values after the head. The values in a list can be accessed with the hd/1 and tl/1 functions. To concatenate two lists you would use ++, and to subtract you would use '--'.

iex(10)> list = [7, 16.6, :atom, "bird"]
[7, 16.6, :atom, "bird"]
iex(11)> list ++ ["cat", false]
[7, 16.6, :atom, "bird", "cat", false]
iex(12)> list
[7, 16.6, :atom, "bird"]
iex(13)> hd list
7
iex(14)> tl list
[16.6, :atom, "bird"]

Tuples are also lists of values, and defined with curly brackets. They still act more like a JavaScript array rather than an object, as the don't have key value pairs. A tuple may contain elements of different types, which are stored contiguously in memory. Accessing any element takes constant time, but modifying a tuple, which produces a shallow copy, takes linear time. Tuples are good for reading data while lists are better for traversals. Tuples are typically used either when a function has multiple return values or for error handling.

Hopefully this was a helpful first glance into Elixir. While they have some similarities, Elixir and JavaScript also have many differences. The documentation for Elixir is extremely helpful, and their website also has beginner tutorials if you'd like to learn more.

Intro to Authentication & Authorization

Ryan Moragas — Sat, 01 Feb 2020 15:32:29 +0000

When talking about auth, it's easy for early developers to get confused about what the differences are between authentication and authorization. The two are spoken about interchangeably, but they actually mean two completely different things. In this article I'll break down what each term specifically pertains to, and why each is important to implement in you applications. I'll also show how I recently implemented auth in my most recent app.

Authentication

Authentication is the process of verifying wether or not a user a user is who they claim to be. This is done by obtaining some sort of credentials and using those credentials to verify the user’s identity. The are multiple methods that you can use to authenticate users, like a simple username or password combination, captcha tests, or 2FA (two-factor authentication). If the user's credentials prove to be valid, the authorization process can be implemented. The authentication process always proceeds to Authorization process.

Authorization

Authorization is the act of giving a user permission to access specific functions and resources in your application. After a user is successfully authentication, authorization determines their ability to access you system and up to what extent. There are plenty of ways that uses can be authorized, wether it is solely on your website or application, or by using third parties like google or facebook to enable features accessing things like the user's contacts or calendars.

In my most recent application I used google to authenticate and authorize users. This is a super common practice where the user is redirected to google, google validates that the user is who they say they are, and gives them a one of a kind auth code. The user then returns to your application with the auth code to be authenticated, and you can exchange the auth code for an access token from google. This in turn can grant your application access to user information like calendars or contacts. You can easily use google for auth in your app by registering a project in the google dev console, and in turn have them authenticate users by using their pre-existing google accounts. This in turn can allow you to easily implement OAuth 2.0, which is seemingly becoming the standard when it comes to user authorization.

  //function to sign in with google auth
  const googleSignIn = async () => {
    try {
      const { type, user, accessToken } = await Google.logInAsync({
        iosClientId: IOS_AUTH_KEY,
        androidClioentId: ANDROID_AUTH_KEY,
        scopes: ["profile", "email"]
      })
      if (type === "success") {
        //key values to add to the userInfo global state
        axios.get(`${AXIOS_URL}/users/${user.email}`)
          .then(res => setUserInfo(userInfo => ({
            ...userInfo,
            signedIn: true,
            username: user.username,
            email: user.email,
            photoUrl: res.data.photo,
            id: res.data.id
          })))
          .catch(error => console.log('failed to find user', error));
      }
    } catch (error) {
      console.log(error)
    }
  }

The function about is how I used google with expo to authenticate users in my react native app. If you ever find yourself building a mobile application, I would highly recommend checking out expo with react native. They have a ton of APIs built in, many of which can streamline the auth process. As you can see from the code above, with the help from expo I was able to authenticate and authorize in one relatively easy function. After registering my app with google I was given auth keys for both android and iOS users. Once the user was authenticated, google would then return an access token grating access to the users profile and email address which we could instantly save and use on our application. Streamlined auth like this is not only easy to implement, but also make for a much simpler user experience.

To break it down as simple as possible, authentication means confirming your own identity, while authorization means granting access to the system. Authentication is the process of verifying who you are, while authorization is the process of verifying what you have access to. Hopefully this helps in understanding the differences between the two, but also why they are important and usually spoken of together.

React: Using Hooks with Global State

Ryan Moragas — Sun, 26 Jan 2020 01:50:05 +0000

Passing down state in React can start to get kind of tedious. The larger the application gets, the more you'll find yourself passing down props to children components. In larger apps you may find that the components you're using to pass props down aren't even using those props at all, but need to pass them in order for children components to use the state. If you're building an app in React Native and using the React Navigator you will definitely learn how confusing it can be managing global state, especially in an app with many moving parts. In the article I'll cover how to use the useContext hook in react to give your application global state, without having to pass props down to every connecting child.

If you're new to using hooks, I would recommend reading my first article on them. It covers the useState hook, which is how I'll be manipulating the state from our global context. I know this may not be the ideal way to manage large complex global state, but it's the way that I managed to figure out how to make it work in my most recent React Native application.

Intro to React Hooks

Ryan Moragas ・ Jan 13 '20 ・ 3 min read

#javascript #react #webdev #beginners

Setting up useContext

The first thing that needs to be done in order to use React's useContext hook is to import it like any other hook. When using useContext it is good practice to initialize your global state in a separate file from the rest of your components. For the sake of this article we will be managing a small object that we will use for our global state, and this state will hold some user information that we want to be shared throughout or app. In a new file we will start by initialing this object.

import { createContext } from 'react';

export const UserContext = createContext({});

Above we are importing the hook, and then making a UserContext variable that we will be manipulating. The value in the parenthesis will be the default value of this state. For now it's empty, but we will fill in the key value pairs in this object later. Now that we have initialized our global state we can pull it into our app. Since we want our entire app to be able to access this state, we will bring this state into our main app component.

import React, { useState } from 'react';
import DrawerNavigator from './navigation/DrawerNavigator';
import { UserContext } from './context/UserContext';

This will be a react native app to further justify this example. When using react-navigator, it acts as a switch statement for what components you will display, and when. The complicated thing about using react navigation is that it makes it super difficult to pass props down to all of the children components from the components above. Above we imported the useState hook, our drawer navigator to switch between views, and the userContext value that we made above. We're all set to pass this down to the rest of our application.

export default function App () {
  const [userInfo, setUserInfo] = useState({});

  return (
    <View>
      <UserContext.Provider value={[userInfo, setUserInfo]}>
        <DrawerNavigator />
      </UserContext.Provider>
    </View>
  )
}

Above we are initializing a new variable using the useState hook. We are calling our state userInfo, and we will be using the function setUserInfo to manipulate this state. This function's actions can be decided at call time to do exactly what we want. In our app the only thing we are rendering is our DrawerNavigator, which holds all children components. In order to use our UserContext state, we need to wrap our DrawerNavigator in the appropriate UserContext.Provider tags. We then pass the value that we want to send as this global state, and here we are also sending it with the function that we declared in our useState hook. When we wrap a component in useContext provider tags it effectively gives all children of that component access to our global state. No more passing props through any unnecessary components, you simply export the value to any child component that has to read or change these values.

import React, { useContext } from 'react';
import { UserContext } from '../context/UserContext';

In any child component that needs to access this global state, we will import the useContext hook like we did above. We also need to import the UserContext from the file that we declared it in, and then we're good to go.

export default function Login () {
  const [userInfo, setUserInfo] = useContext(UserContext);

  return (
    <View>
      <Button
        title="Sign In"
        onPress={() => {
          setUserInfo(userInfo => ({
            signedIn: true
          }))
        }}
      />
    </View>
  )
}

Above we have a simple Login component. We want to keep track of wether or not our user is signed in. We are bringing our UserContext in and setting it to a hook like we did previously. In our return statement we have a sign in button that will set the state of signedIn to true. We can make this function add, remove, or edit any values in our global state object, and all of these changes will be seen by all other components importing the UserContext. By using these hooks you can access state in any components that you'd like, without having to pass down props to every component connecting them. Hopefully this will be helpful when trying to find a simple way to read and manipulate global state in your apps.

Git Workflow

Ryan Moragas — Sun, 19 Jan 2020 06:08:14 +0000

Git is something that can be pretty confusing at times, especially to new programmers. It can be super easy to get overwhelmed by the different workflow models you should use to contribute code to a repository. Mistakes will definitely happen, but when using Git correctly it will act as a safety net from these mistakes. In this article I'll try to break down the basics on using Git with a team, and what to do in certain situations.

Basic workflow

Forking and pulling code is something that you will most likely do many times when working on repositories with other people. A fork is essentially your own personal copy of the repo for you alone to work on. To fork a repo you simply click on the "fork" button on the the right hand side of the main repo page.

git clone https://github.com/<username>/<repo>.git <REPO NAME>

git remote add https://github.com/<username>/<repo>.git

After the repo is forked you will then clone your fork. You can clone the repo into any directory you'd like using the code from the first snippet above in your terminal. The last parameter in the first snippet is optional for when you want to save the clone with a new name. The second snippet will set the main repo as your fork's upstream, which you will need to pull changes and keep your master current. Once you have your cloned repo you should create a new branch to start coding. Working in a new branch is beneficial for multiple reasons, with the main reason being that is keeps your master branch safe.

Once you have successfully cloned your repo you can safely work on it without affecting the main master branch. It's good practice to commit your changes every time you add a new feature using the command git commit. Committing your code essentially saves a 'snapshot' of your changes, and you can use these saves to also look back and revert to older stages of your code. Once you have completed you addition you can then upload that code to your remote fork's master branch using the git push command.

Finally, once all your changes are good to go and everything is pushed to your master, you can submit a pull request to the main repo. On the GitHub page of your remote fork, click the “pull request” button. One you submit your PR you'll wait for the repo owner to merge or comment your changes. If the owner suggests some changes before merging, you can simply push these changes into your fork by repeating the last steps. Pushing your updated changes will automatically update your pull request.

The steps listed above walk you through the basic workflow for using git, but sometimes things can get a little more complicated. When working on a team you will often have other programmers simultaneously working on the same repo you are. To make sure that you have the most up to date version of the main repo's master code, there are a few more commands you should familiarize yourself with.

Keeping your fork current

Each time the main repo is updated you should also update your forked repo's master branch. Since we already set the main repo's master to our forked master's upstream, we can fetch changes and stay current using git fetch upstream. We then want to merge the changes from the upstream repo into our fork using git merge upstream/master. Doing this will ensure that we are always working on the most up to date code, and will lessen the chance of having merger conflicts when we make a pull request.

Working on multiple features

If you find yourself working on multiple features at once, you'll want to push them separately from each other. Its best practice to create a separate pull request for each feature. A pull request should always be bound to its own branch in a git repo, so you will need to create a separate branch for each feature.

To start, you should always switch to your fork's master when creating a new branch. This will ensure that your master will serve as the feature branch's source branch. To switch to your master you will use the command git checkout master or git co master for short. You'll then want to create a new branch for the feature that you are about to work on using git checkout -b <feature_branch>. This will not only create a new branch for you, but it will also switch directories into your new branch. To upload the changes in that branch to the remote fork you will use git push --set-upstream origin <feature_branch>. You can also switch between feature branches using the same git checkout command we used to switch to our master branch above.

Hopefully this git tutorial will help you get the basic workflow of git down. There are plenty of other git commands out there to help you as well. When running into trouble it is best not to panic, since there are git commands to fix ALMOST any git error you can make.

Intro to React Hooks

Ryan Moragas — Mon, 13 Jan 2020 01:20:29 +0000

If you've used React, you're probably familiar with the struggle of trying to decide if your components should be stateful or functional. Class components, also known as stateful components, can get bulky pretty quickly, but are necessary to hold all of the state that your app needs. Functional components are usually much less code, but rely on stateful components to pass down props for them to utilize. React hooks easily help solve this dilemma, and in this article I'll cover the basics that you need to know to start utilizing them.

First off, let's take a look at what a normal stateful component would look like.

import React from 'react'

class Counter extends React.Component {
 constructor(props) {
   super(props)
   this.state = {
     counter: 0
   }
   this.handleIncrement = this.handleIncrement.bind(this)
 }

 handleIncrement() {
   this.setState({
     counter: this.state.counter += 1
   })
 }

 render() {
   return
     <div>
       <div>{this.state.counter}</div>
       <button onClick={this.handleIncrement}>+</button>
     </div>
 }
}

Above we have a simple stateful component named Counter. We've set the state for a counter starting at 0. We bound the handleIncrement function to the current this at call time, a defined the function increase the counter by 1. Then we render the current state and link the function to a button. This is a pretty simple stateful component, but using hooks can make this even easier.

The first thing that we need to do in order to use Rect hooks is import the hook that we want to use. The hook used for setting state is called 'useState', and we can import it on the first line with react.

Import React, { useState } from ‘react’;

After we import the hook we can then use it in our component. Using the useState hook makes it even easier to set state than how we did it above in our stateful component. We do so by declaring a variable in an array. The first value in the array is the name that we want to use for our state, and the second is the function that we use to set that state. We then set that state to whatever default value we want to give it.

const [counter, setCounter] = useState(0);

The code above can be used to set state just like how we did in our stateful component above, but does so using much less code. Before hooks the only way we could access state like this in functional components was to pass it from a stateful component as props. Hooks allow us to define and change state on the fly from functional components.

import React, { useState } from 'react'

function Counter() {
 const [counter, setCounter] = useState(0)
 function handleIncrement() {
   setCounter(counter + 1)
 }

 return (
   <div>
     <div>{counter}</div>
     <button onClick={handleIncrement}>+</button>
   </div>
 )
}

The snippet above does exactly what the code in our stateful component does, but is noticeably shorter. We no longer have to create all of the code using the constructor or super functions. We also no longer have to use the this keyword when referring to state, or have to bind the function that we use to set the state. We can use hooks not only for setting and manipulating state, but we can also easily manage life cycle methods. To do this we use the useEffect function we simple import it, just like how we imported our useState hook.

Import React, { useState, useEffect } from ‘react’;

Class components manage side effects using life cycle methods, like componentDidMount() or componentDidUpdate(). In functional components we can now use the useEffect() function to perform side effects in functional components. By default, effects run after every completed render. But, you can choose to call it only when certain values have changed by passing an array of variables as a second optional parameter. Passing an empty array as the second parameter will only call useEffect when the app is initially rendered.

  componentDidMount() {
    console.log(`The counter is now ${this.state.counter}`);
  }

  componentDidUpdate() {
    console.log(`The counter is now ${this.state.counter}`);
  }

The snippet above uses componentDidMount to log the counters initial value on the console. We then use componentDidUpdate to log the counters value every time it is changed. With hooks we can manage all of our life cycle methods in one just function.

 useEffect(() => {console.log(`The counter is now ${counter}`);},[counter]);

These are just two of multiple hooks react has for use to utilize. We can even create custom hooks to do whatever we want. They greatly expand the possibilities of what we can do with functional components, and allow us to write in simpler, easier to read code.

Main Types of Computer Memory

Ryan Moragas — Sun, 15 Dec 2019 20:21:20 +0000

In this post I'll be talking about the main aspects of computer memory. Memory is used to store all of the data and instructions that our computers use. There are two types of computer memory, volatile and non-volatile. Volatile memory is memory that loses its contents when the computer or hardware device loses power. Your computer's random access memory, known as RAM, is an example of volatile memory. It is why if your computer freezes or reboots when working on a program, you lose anything that hasn't been saved. Non-volatile memory is memory that keeps its contents even if the power is lost. An example of non-volatile memory would be your hard drive.

When a program is opened, such as your Internet browser, it is loaded from your hard drive and placed into RAM. This process allows that program to communicate with the processor at higher speeds. Anything you save to your computer, such as a picture or video, is sent to your hard drive for storage.Although both the hard drive and RAM are memory, it's more appropriate to refer to RAM as "memory" or "primary memory" and a hard drive as "storage" or "secondary storage." The average amount of RAM in a modern computer ranges from about 4GB to 16GB, and about 500GB of hard disk drive storage.

Non-volatile memory is much slower that volatile memory when it come to read and write times. Non-volatile memory does not require a connection to a power source to retain information, and can be thought of as your computers long term memory. Not only does it use less power, but it is also considerably cheaper than volatile memory. It is used to store essentially all of the information that is stored on your computer. Solid state drives, or SSDs, are much faster than normal hard drives since they don't have moving pieces needed to read and write to them, but their speed still doesn't compare to the speed RAM.

Volatile memory can be thought of as your computers short term memory. It holds all of the information that your computer thinks it might need immediately, like data that may be used when running software. It needs a constant supply of power, but since it generally has less moving parts than volatile memory, the things stored in RAM can be accessed almost immediately. The more RAM that your computer has, the better it will be at running larger applications or multi tasking.

There are two main types of volatile memory. Static, also known as SRAM, requires a constant flow of electricity to hold its information. There is never any refreshing needed to update its stored data. There is also dynamic volatile memory, known as DRAM. It requires pulses of electricity to update its stored information, and general accessing speeds are slower than SRAM. With the slower speed comes a lower price tag, and usually higher storage capacities.

Above we can see the differences between storage size and reading and writing speeds of SSD and RAM data. This graph was comparing DRAM and a SSD on a 2014 macBook air. On average RAM read speeds were 6.3 times faster that SSD, and write speeds for RAM were an average of 4.5 times faster. Both types of memory have their pros and cons, and both are essential for your computer to operate as efficiently as possible.

React: Efficiently Rendering Lists

Ryan Moragas — Sun, 08 Dec 2019 17:42:27 +0000

React JS, which was created by Facebook, is today's most popular JavaScript Library for building User Interfaces. We can use React to build sleek, fast Single Page Applications or websites. In the article I'm going to talk about the keys to efficiently rendering lists in React, and show how rendering list's correctly is the main thing that helps React maintain super fast performance.

Updating the DOM is usually one of the main bottlenecks when it comes to web performance, especially when using a bunch of CSS effects and animations. If you have large amounts of data that need to be rendered to the page, performance can take a pretty big hit trying to keep up with everything that needs to be rendered. Normally when something on a page get's edited, the entire page will update, rendering things that haven't even moved or been changed. One of React's main focuses was aimed to fix this problem, and it all starts with the React Virtual DOM; a DOM kept in memory. React essentially renders everything to its virtual DOM, compares that to the real DOM, and then updates the real DOM by only rendering the things that have changed.

Rendering to the virtual DOM is very easy. You start by calling the render method off of the ReactDOM object, which takes two parameters. The first argument you give function is the element that you want to render to the page, and the second is where you want it to be rendered.

const name = 'Ryan Moragas';

const nameElement = <h1>Hello, {name}</h1>;

ReactDOM.render(nameElement, document.getElementById('title');

Above you can see the basic syntax for writing in React JS. You can use JSX, which can be thought of as a kind of javaScript/HTML hybrid that is extremely easy to learn. You can create HTML layouts directly in you javaScript code, and anything that needs to be evaluated in javascript goes inside of curly brackets. Pretty simple, right? Dynamically rendering lists in react is also extremely simple.

const SimpleList = () => (
  <ul>
    {[3, 2, 1].map(num => <li key={index}>{num}</li>;)}
  </ul>
);

In the snippet above I made an array that we'll use for our list to render. We wrap our list in the unordered list tags, and then in curly brackets we use the native map method to loop through the list and create a JSX element for each value. In this example you can see that we are giving each list item a key of the num itself, and this is extremely important when rendering lists in React. The framework uses the key value given to each element to try and determine wether or not the item needs to be re-rendered.

Let's imagine that we wrote some code that rendered the list we wrote above, and added a click button that dynamically added a number each time the button was clicked. For the sake of this example , assume that the code written had the key of each item set to the item's index.

In the example above, the click button adds to the array and the value is dynamically rendered to the page. The problem with this is that each time an item is added to the array, its index changes, and react renders everything to the page every time a new number is added. Above is an example of what not to do when assigning keys to things being rendered. You should always try to use a unique ID key that no other item on your page will have. This helps ridding your application of wasted renders, and allows React to render your lists items as efficiently as possible.

In the refactored code above, we set the keys to the numbers themselves, assuring that no keys will be changed once originally created. You can see that this fixed our rendering problem, and now the only thing being rendered to the app is the newly added item. In conclusion, you want to write all javascript in curly brackets, use native javascript methods to dynamically render items and save time, and always use unique keys for items being rendered.

jQuery Basics

Ryan Moragas — Sun, 01 Dec 2019 23:15:32 +0000

JQuery is quite possibly the most popular JavaScript library out there, and provides a bunch of features still super useful for present day development. It is a lightweight JavaScript library, and its creator has given it the slogan of "write less, do more". The purpose of jQuery is to make it much easier to use JavaScript on websites. The library takes a lot of common tasks that used to require multiple lines of JavaScript code to accomplish, and wraps them into methods that you can easily call with a single line of code.

There are a couple of important steps that need to be taken in order to use jQuery on your website. The first step to take is to actually download the library and link your HTML page to it in a source tag. That should look a little similar to this.

<script src="https://code.jquery.com/jquery-3.3.1.js"</script>

Another thing that has to be done before you can start using jQuery is calling a document.ready function. All of your code will go inside of the function body. This will ensure that everything on the DOM is fully loaded before any jQuery methods will be invoked, since you wouldn't want to manipulate an element before it even loads on the page.

$(document).ready(function() {
    // All your jQuery will go here!
});

Selecting with jQuery

After the last two steps are competed, we can now start using jQuery! To begin, we use jQuery methods calling either jQuery() or just using the bling symbol, like $(). We access the DOM using mostly CSS syntax, and apply an action using one of the given two methods. The basic syntax for doing anything in jQuery is written like so $("selector").method();.

Selectors are essentially how we tell jQuery which elements we want to work on. Let's look at a few of the ways we can select elements.

// Select all image tags and add the class 'profilePic'
$("img").addClass("profilePic");
// Select all elements with the 'custom' class and change to green text
$(".custom").css("color", "green");
// Select all elements with the 'custom' id and set font size to 20px
$("#custom").css("font-size", "20px");
// Select all <a> tags inside of <li>'s and set font to bold
$("li a").css("font-weight","Bold");

For example, running $(“h1”) will select all of your your header 1 tags. You can manipulate DOM elements using css methods by simply using the css keyword. If you wanted to change all of the header elements to have blue font, you'd type $(“h1”).css("color", "blue");.

jQuery methods

After selecting the DOM element that you want to manipulate, the jQuery library has a ton of methods that you can use to work on them. The .css() method takes two parameters, the first one is the css property that you want to change, and the second is the change that you want to make. You can also add and remove classes using the .addClass() or .removeClass() methods. The .keypress() and .on() methods work as event handlers, and can trigger functions when certain events take place on the specified selectors. The .fadeOut() method will hide the matched elements by fading them to transparent, and the .slideUp() method will hide the matched elements with a siding motion. It can also make writing AJAX calls way easier than originally writing it with vanilla javascript.

In conclusion jQuery is a super easy library to use, especially if you already know javascript. Even though it is older in comparison to the newer frameworks coming out, it is still very much in demand, being implemented in more than 80% of websites that use javascript. It can do some of the same things as vanilla javascript in simple, easy to read one liners. Overall jQuery is a perfect beginner library to use that will help you to write less and do more.

The Dirt on Binary Search Trees

Ryan Moragas — Sun, 24 Nov 2019 17:44:59 +0000

Just like storing anything else, when it comes to storing our data there are multiple ways that we can organize and store it. Each can have its own unique advantages depending on the situation at hand. In this article I'm going to cover tree data structures; specifically binary search trees, or 'BST's.

A binary search tree is a node-based data structure where each node can have a maximum of two child nodes. The first node of the tree is called the root node, and each child must either be a leaf node (having no child nodes of its own) or the root of another binary search tree. The left sub-tree contains nodes with values less than it's parent node, and the right sub-tree contains nodes with values greater than it's parent node. What determines a node being less than or greater than another node depends on the data type being used.

The sorting of values in BST keys help make operations run as efficiently as possible. BST traversal has an average time complexity of O(log n) when searching for, inserting, or removing data. Each operation reduces the size of the input by half, so we are constantly narrowing and speeding up our search, as long as the tree is properly balanced.

The key to having BSTs operate as efficiently as possible lies in keeping them balanced. The picture above shows a balanced tree on the left and an extremely unbalanced tree on the right. In the balanced tree, element #6 can be reached in three steps, but in the extremely unbalanced tree it takes six steps to reach element #6. There are multiple routes you can take to keep a BST balanced, like periodically balancing it or auto rebalancing after each addition or removal of values.

Above we can see how easy it can be to set up a binary search tree. In this example, I used the prototypal method to set up the tree's nodes and methods for node traversal. We pass the main value to the root node, and set up the left and right nodes for future additions of data. The chosen method should mostly depend on how much data is being stored in your BST, as rebalancing it with every change can get expensive if sorting through massive amounts of data.

Searching for data can also be super easy with BSTs. In the example above, I simply pass the value being searched for into the contains method I built on the tree. If the value is found on the root node, it is returned immediately. If not, and the value is less than the root, we search the left side of the tree recessively, and will search the right the same way if the value is greater than the root. The addition and removal of data can be done almost exactly the same way.

In conclusion BSTs can be a great choice when choosing a data structure for storing data. They allow us to efficiently store and update data efficiently in a sorted order, and offer O(log n) time complexity when traversing them. When in doubt, leaf it to BSTs to do the dirty work for you.