Forem: Joy Palumbo

What is Redis and Why to Use Redis?

Joy Palumbo — Tue, 06 Jan 2026 19:55:22 +0000

Redis (which stands for REmote DIctionary Server) is an open source, in-memory NoSql database that uses key/value pairs to store data. Although Redis can be used as a stand alone database, it is often combined with other databases to improve performance. Redis excels in applications where live, instant data is needed such as leader boards, messaging, gaming, etc.

If I already have a database, why would I use Redis?
Redis holds most of its data in-memory (RAM), as opposed to on disk, which enables it to have extremely low-latency when reading and writing. Most of the time, read and writes in Redis are constant time 0(1). It reduces response time down to sub-milliseconds (around 1,000 to 10,000 times faster than accessing disk storage)! It is great in situations where a lot of caching is needed. It can make a huge difference in speed, especially when needing data from external data sources. In traditional systems, slow response times can cause performance bottlenecks, which is never good for the end user. Redis is here to save the day and provide feedback in lightning fast times. If a client is requesting the same data over and over again, Redis can cache that data and provide the data much, much faster.

Another great benefit about Redis is that it is easy to integrate and work with. There are so many ways to interact and use Redis for it to fit your specific needs. There are over a 100 open source clients available in the Redis library and I am sure that number will only grow! Redis has many useful systems and packages you can utilize, such as Redis Sentinel or Redis Cluster to ensure your data is well protected and functioning well. Redis Enterprise provides extra services, such as clusters for load balancing, etc so you or your team can focus on other aspects of development.

Although Redis's bread and butter is in memory storage, it can also persist data to disk using RDB snapshots so that it can protect the data stored to is, especially if it is used as a stand-alone database.

Redis can store almost every type of data, which makes it suitable for most situations. Redis also pairs great with AI and LLM.

Redis supports these datatypes:
String
Hash
List
Set
Sorted set
Vector set
Stream
Bitmap
Bitfield
Geospatial
JSON
Probabilistic data types
Time series

As mentioned above, one great quality of Redis is that it is easy to work with. The queries are simple to use and avoids using complex SQL query planning and parsing.
Let's take a look at some of the simple commands. *Note, generally all caps are used for the key words but it is not necessary. Your commands will still work with lower cased letters but it is industry standard to use capitalized letters.

To set a key value pair we can use the command Set.
example:

SET name Joy
# returns OK

If we want to get specific data We can use the command Get.

GET name
# returns "Joy"

*note all returned data will be returned as a string, similar to JSON.So integers will be returned as a string. In Javascript, for objects you will need to use JSON.parse() and JSON.stringify(). Keep that in mind when saving and querying data.

We can include an expiration time if we will only need the data for a short period of time. Let's say I only need the name to be valid for 1 minute. I can write:

SET name Joy Ex 60

You can use the command PERSIST to remove an expiration, making it permanent.

To delete a key value, use the command DEL

DEL name

If you want to check to see if a key exists, you can use EXISTS. If it doesn't it will return 0, if it does exist it will return 1. Below, since we deleted name we will get 0

EXISTS name
#returns 0

You can push items into a key value pair similar to the push method in javascript. You can either push to the left using LPUSH or to the right RPUSH. Subsequently you can pop items off using LPOP and RPOP.

These are just a few of the many commands, to give you a basic idea of how easy the commands are to use. It makes it easier for developers to hit the ground running with these simple to use commands.

Redis has a lot to offer. This article only touched base on just a couple of the basic points but hope you enjoyed it and learned a little bit about Redis. It has so much more to offer so I recommend checking out further resources (such as Redis docs etc) to see all of the many things Redis has to offer.

Open Source

Joy Palumbo — Sat, 08 Feb 2020 18:24:28 +0000

Anyone who has worked in the tech industry or is learning about software engineering may have heard about or be familiar with the term “open source code”. A lot of the tools software engineers use are open source. But what does Open Source really mean? And what are some specifics of how it works? Let’s start with the definition of open source. Open source is any program that is made available to the community to view, modify or redistribute freely.

Open source can be a huge benefit in many ways. Everyone has their own unique perspective and way of seeing things in life. A given resource/project/application can be limited by having only a few developers who only see things from one perspective. Open source allows others, who might have a different outlook to enrich the project and and bring more to the plate that can not only benefit other developers, but in the end, also benefit the users who use our applications. Another reason why open source is beneficial is that developers in the community can catch bugs or issues with a give program that may have been initially missed. They can further improve on the initial development. It is also a great way to involve the community and bring people together.

Is all open source code free? As far as whether open source is free or not...Usually open source code is free, but not always. People can choose to charge for the initial source code but usually people do not do this. Another way people can charge for open source is to charge for technical support. They release the source code for free and it can be distributed and modified for free but if someone needs assistance with anything, such as installation, etc they can charge a fee for that support. Most of the time though, open source code is free, which is really awesome and very beneficial to the coding community. Much of what we see on the internet is thanks to open source code.

What are the copyright laws for open source? Open source can sometimes have proprietary rights to the source code. It is best practice to have some sort of licensing for open source projects. There are a few different types of licenses. One form of licensing that is common in open source code is copyleft licensing. This type of licensing allows the material to be distributed freely but has the stipulation that any future versions be the same. The GMU project defined copyleft as: "the rule that when redistributing the program, you cannot add restrictions to deny other people the central freedoms [of free software]. What this means is future versions that are created cannot have additional restrictions added to the open source code. There’s an “permissive” licensing, which is similar to copyleft except that the software can be used in other programs that are distributed under other licenses, including proprietary licenses.

Another question is whether there are risks associated with open source. If any one can modify the code, wouldn’t it be easy for someone to insert viruses or malicious code? Technically any source code, whether it’s private or open source can be vulnerable to malicious code. Although hackers sometimes keep a close eye on open source communities and keep a look out for security vulnerabilities that are posted among the community for open source, there are preventatives that the original developers of the source code can do to reduce the likely-hood of something happening. The original developers can set up data decryption techniques, apply secure passwords, and set up data validation processes, to name a few, to help secure the software. Also, the number of people in the community who care about and work on a given software compared to the number of people who wish to do harm is much larger. Generally, people in the dev community will be able to spot and fix bugs and make the software more secure much faster than a hacker would be able to do damage. In the end open source code isn’t really more at risk that proprietary software, and some might argue might even be safer due to the large communities that review and update the code.

Open source is really cool. It's a great idea for all developers to contribute to open source code, both to give back to the community and to help grow as a developer. As a newer developer the idea of contributing to open source projects and software can seem really, really daunting.
Luckily there are a couple resources out there for people who are new to open source and have never contributed. This website has a list of recoursed that are great for people wanting to get their feet wet with open source: https://www.firsttimersonly.com/. I hope you decide to dive into open source. Have fun!

Uploading Images to Cloudinary in React Native Using Cloudinary's API

Joy Palumbo — Sat, 01 Feb 2020 17:39:38 +0000

It is very common to allow a user to upload a photo in a given application and can make an application more dynamic and interactive. Today we are going to talk about how to allow a user to upload an image to Cloudinary using Cloudinary's API and how to retrieve that image from Cloudinary. When trying to include Cloudinary in my application, I was running into issues with Cloudinary not accepting the file uploaded from Expo. I could not find very much helpful documentation on line so I'm hoping this tutorial will help others who run into the same issue as I did.

The first thing you will want todo is install Expo's ImagePicker. You can do this by entering the following code into your terminal.

expo install expo-image-picker

In any file that you wish to allow a user to upload a file, you will need to import ImagePicker at the top.

import * as ImagePicker from 'expo-image-picker';

Next we will write a function. Most of this code can be found in Expo's docks but I have included some extra code. The file type that image picker normal supplies is not the correct format for Cloudinary so I had to modify Expo's code a little bit so that Cloudinary would accept the file.

I started with declaring a variable to contain the url for Cloudinary's API.

In the Cloudinary Dashboard the first line is your cloudinary name. You will want to insert that into the cloudinayry url as seen in the code snippet below the cloudinary image. You do not need the curly brackets around your cloudinary name.

let CLOUDINARY_URL = 'https://api.cloudinary.com/v1_1/{insert your cloudinary name here}/upload';

When using the Cloudinary API we don't need to use the API key, secret or environment variable. You will need an upload preset. Go to your Cloudinary Dashboard. Go to Settings. Once you are on your settings page, go to the "upload" tab. Scroll down to "upload presets". You will need to change the settings to "unsigned". This will then supply you with the upload preset that you need. You can either create a variable for it like we did for the cloudinary url but in my example I plugged it directly inside the function.

Now let's write the function! I will provide seudo code for each line explaining what each part does.

//allows user to upload a photo

  //asks phone for permission to access photos

  let openImagePickerAsync = async () => {
    let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

//this tells the application to give an alert if someone doesn't allow //permission.  It will return to the previous screen.

    if (permissionResult.granted === false) {
      alert('Permission to access camera roll is required!');
      return;
    }

 //This gets image from phone

    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],

//We need the image to be base64 in order to be formatted for Cloudinary

      base64: true
    });

//this just returns the user to the previous page if they click "cancel"

    if (pickerResult.cancelled === true) {
      return;
    }

    //sets image from imagePicker to SelectedImage.
//This is if you are using hooks. The hook for this I have set up as:
//[selectedImage, setSelectedImage] = useState("").  If you're using //anclass component you can use setState here.  This file format will be
//a file path to where the image is saved.  

    setSelectedImage({ localUri: pickerResult.uri });

    //***IMPORTANT*** This step is necessary.  It converts image from //file path format that imagePicker creates, into a form that cloudinary //requires. 

    let base64Img = `data:image/jpg;base64,${pickerResult.base64}`;

// Here we need to include your Cloudinary upload preset with can be //found in your Cloudinary dashboard. 

    let data = {
      "file": base64Img,
      "upload_preset": "insert your upload preset here,within quotations",
    }

    //sends photo to cloudinary
//**I initially tried using an axios request but it did NOT work** I was 
//not able to get this to work until I changed it to a fetch request.

    fetch(CLOUDINARY_URL, {
      body: JSON.stringify(data),
      headers: {
        'content-type': 'application/json'
      },
      method: 'POST',
    }).then(async r => {
      let data = await r.json()

//Here I'm using another hook to set State for the photo that we get back //from Cloudinary

     setPhoto(data.url);
    }).catch(err => console.log(err))
  };

We data we get back from Cloudinary will look similar to this. It can be saved as a string your database.

http://res.cloudinary.com/dary8ct/image/upload/v1580507361/fudyliwx7nxiezux561n.jpg

To render the photo in Expo, within your return section you can include this:

return (
<Text> Look at our pretty picture! </Text>
      <Image source={{ uri: "http://res.cloudinary.com/dary8ct/image/upload/v1580507361/fudyliwx7nxiezux561n.jpg" }} style={{ width: 150, height: 150 }} />}

)

Below is the code without seudo code:

import React, { useState, useContext } from 'react';
import * as ImagePicker from 'expo-image-picker';

export default function Photo(props) {
  let CLOUDINARY_URL = 'https://api.cloudinary.com/v1_1/{insert your cloudinary name here}/upload';


  let openImagePickerAsync = async () => {
    let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();
    if (permissionResult.granted === false) {
      alert('Permission to access camera roll is required!');
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
      base64: true
    });

    if (pickerResult.cancelled === true) {
      return;
    }

    setSelectedImage({ localUri: pickerResult.uri });

    let base64Img = `data:image/jpg;base64,${pickerResult.base64}`;

    let data = {
      "file": base64Img,
      "upload_preset": "insert your upload preset here,within quotations",
    }

    fetch(CLOUDINARY_URL, {
      body: JSON.stringify(data),
      headers: {
        'content-type': 'application/json'
      },
      method: 'POST',
    }).then(async r => {
      let data = await r.json()

      setPhoto(data.url);
    }).catch(err => console.log(err))
  };

  return (
    <View>
      <Text> Look at our pretty picture! </Text>
      <Image source={{ uri: "http://res.cloudinary.com/dary8ct/image/upload/v1580507361/fudyliwx7nxiezux561n.jpg" }} style={{ width: 150, height: 150 }} />}

</View>
  );
}

Hopefully this tutorial helped in allowing your application to upload photos to Cloudinary and display those images within your app!

Bootstrap

Joy Palumbo — Sun, 26 Jan 2020 01:17:22 +0000

What is Bootstrap?

Bootstrap is is a toolkit comprised of HTML, CSS, and Javascript tools. Twitter created Bootstrap to allow developers to design their apps with minimal effort so that they can focus on building features, instead of spending a lot of time trying to style the app. Bootstrap comes out of the box with designs and styles that you can easily implement but boostrap is also flexiable so you can modify anything in Bootstrap if you wish to alter the styles and add some of your own creativity. So, whether you don't want to deal with styling at all or you love to take charge of all styling aspects but want to save time on the basics, Bootstrap is for you!

Bootstrap comes with two versions, a precompiled version and a source code version. The sourse code version is a little bit more flexible but requires a little more work. If you are looking for something simple and quick to implement, then using the precompiled version is the ideal version to go with. If it is your first time using Bootstrap, I recommend the precompiled version. One you've gotten your feet wet and feel comfortable with Bootstrap, try out the source code version and try experimenting with the various ways to alter your styles. The sourse code version uses Less (there is also a version that uses Sass). Less and Sass are special stylesheet extensions that has built-in javascript like functionality built into them. This adds an extra level of learning on top of learning the basics of Bootstrap. Once you get the basics of Boostrap down, you can make your code a lot more effecient and faster to write once you start using the sourse code version with Less. But for today we will stick to the precompiled version.

Let's get started

You will need to download Bootstrap. There are two ways to get Bootstrap. The easiest way to download Boostrap is with npm.

npm install bootstrap@3

(if you use Bower you can run: bower install bootstrap)

If you want to use Less with Bootstrap, after installing Bootstrap run:

composer require twbs/bootstrap

Also, in order for the browser to be able to read Bootstrap it will need to be compiled and Boostrap used Grunt to to compile so you will need to install Grunt.

npm install -g grunt-cli

Another way to install Bootstrap is to download it directly to your computer from Bootstraps website. To download it that way or to get more info you can go to: https://getbootstrap.com/docs/3.4/getting-started/

Ok, now that we've got BootStrap installed let's get started!

Here is a basic html templated provided by the Bootstrap docs.:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">   </head> <body> <h1>Hello, world!</h1>  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </body> </html>

Boostrap uses JQuery so you will need to include the script tag for jQuery. This should go above any Javascript.

Bootstrap has a lot of built in templates. Some of them are grid, buttons, tables, dropdowns, accordians, tabs and much more. Below I will show some examples of a few of these.

Buttons are a very common item that most applications utilize. Bootstrap includes templates for many different styled buttons.

If you wish to have a clear button but with coloring specific to a type of function you can use the code below:

<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>

this is a basic button:

<button class="btn btn-primary" type="submit">Button</button>

Another item that most developers will need to implement is a nav bar. Bootstrap has several templates for nav bars and all of them can be styled to a developer's liking. Here are 3 versions of one of Bootstraps out of the box nav bar template:

<nav class="navbar navbar-dark bg-dark">
</nav>
<nav class="navbar navbar-dark bg-primary">
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
</nav>

In this article we went over how to download bootstrap and had some examples of some basic boostrap templates. Be on the loop out for more on Bootstrap templates and how to implement them.

Python Basics, for Javascript Developes: Part 2

Joy Palumbo — Mon, 20 Jan 2020 05:26:38 +0000

In the last article we learned about how to "declare" variables and learned what lists are in Python. Today we were learn about how to write functions and loops.

One thing to keep in mind going forward is that Python does not use curly braces or semicolons for organization or to signify code blocks. Instead Python uses spaces. In Javascript, it's always best practice to be mindful of spacing/indenting, but it won't break your code if you don't indent correctly. In Python, if you don't indent correctly it will cause errors. Indentation should be either 2 or 4 spaces.

Let's take a look at functions in Python. To bein, a function is declared with the word "def". After 'def' write the word 'function', in paranthesis put what you want to name your function, then a colon. The next line should be indented. That will be the body of the function. Side note, Python has what is called docStrings which allows a developer to write comments about what the function does. Let's take a look at an example:

name = 'The knights who say Niii!'

def beware(name):
"""This function says beware of
the persons passed in as parameter"""
        print('Beware of the' + name)

Returning in Python is the same as returning in Javascript. All you have to do is write the word 'return'. Also, calling a function in Python is the same as calling a function in Javascript.

name = 'The knights who say Niii!'

def beware(name):
"""This function says beware of
the persons passed in as parameter"""
    return 'Beware of the' + name

beware(name)

Time to move on to Loops!

Python has two types of loops, the for loop and while loop. In Javascript, if we wish to exit a loop, we can add a return. In Python, for both the for loop or the while loop, use the key word 'break'.

The For Loop

The for loop, iterates over a sequence, such as a list. As a javascript developer,the structure of a for loop in Python reminds me of the for in loop that we use on objects.

roman_names = ['Brian', 'Pilate', 'Biggus Dickus', 'Incontinentia Buttocks', 'Sillius Soddus']

for name in roman_names:
    print(name)

//'Brian'
//'Pilate'
//'Biggus Dickus'
//'Incontinentia Buttocks'
//Sillius Soddus'

One cool thing about for loops is they have a few extra things you can do with them, using specific key words. One key word that can be used is 'range'. Range lets you iterate over a set of numbers.

for x in range(5):
    print(x)
//prints 0, 1, 2, 3, 4

for x in range(3, 6):
    print(x)
//prints 3, 4, 5

The While Loop

While loops in Python are similar to while loops in Javascript. They run as long as a defined boolean is met. In the example below, we are telling the loop to iterate as long as the number is less than 5. In this example, in order for it to work, we have to increment the number by 1 every iteration(if we don't, we get the dreaded infinate loop NOOOOO!).

count = 0
while count < 5:
    print(count)
    count += 1
//prints 0, 1, 2, 3, 4

That was some exciting stuff! We're slowly getting the hang of Python! I encourge anyone who is interested to take a further dive into learning Python. It is an easy language to learn and much sought after by employers! It can really help beef up your reseme and make your coding projects more diverse! I hope to continue writing more about Python because there is so much more to talk about! Stay tuned!

Python basics, for Javascript developers: Part One

Joy Palumbo — Mon, 13 Jan 2020 03:48:42 +0000

Python is a great coding language to learn. There are a lot of reasons to learn Python. Aside from the fact that it's name came from the great Monty Python, it is relativly simple to learn, popular among various jobs and allows coders to code quickly. Like Javascript, Python is an object oriented programming language.

If you are interested in coding in Python, you will need to install it on your computer. You can download Python by going to https://www.python.org/downloads/. After it is installed, you will need to see if the coding editor you use requires an extension. When creating a new file, the file end with .py (as apposed to .js for javascript).

Now that our computers are set up for Python, we can learn the basics!

Let's talk about variables!
In Python, all variables are objects. Unlike Javascript, in Python, variables do not need to be declared before using them. There is nothing like 'var', 'const' or 'let'. Not having to type 'var', 'const' or 'let' can help us code faster. In javascript we sometimes declare a variable and set it to an empty string, array or other data type, as a place holder. In python, a variable can be any data type and does not need to be defined ahead of time and therefor we do not need to set variables as place holders. A simple way of looking at it is, you are simply naming a value.

Example:

witch = 1

name = 'Sir Lancelot'

my_list = ['african swallow', 'coconuts', 'the oppressed']

Variables can also be re-assigned different types

black_knight = 'worthy adversary'

black_knight = ['Tis but a scratch', 'I've had worse', 'Oh, come on, you pansy!']

Another handy thing about variables, and something else that is attributed to Python being an easy, fast language to use, is that you can define more than one variable at a time.

obj1, obj2 = 'holy grail', 'shrubbery'

Now, let's take a look at arrays...or in Python, they are called lists! For the most part, lists in Python are very similar to arrays, but there are a few differences. One interesting thing about lists is, unlike arrays in Javascript, where it's best practice to have to same data type within one array, in Python you can mix the data types that are stored inside a list.

monty_python_list = ['witch', 'false', 1, ['knights of the round table', 'Castle Anthrax']]

Another interesting thing about lists in Python is that they can have negative indexes (which we don't usually see in Javascript).

roman_names = ['Brian', 'Pilate', 'Biggus Dickus', 'Incontinentia Buttocks', 'Sillius Soddus']

print(-3) // 'Biggus Dickus'

Let's learn how to add to a list! In Javascript there are several ways to add to an array. The most common way is to use .push. The equivalent in Python is .append.

political_groups = ['Judean People's Front', 'People's Front of Judea', 'Judean People's Front']

political_groups.append('People's Front') // political_groups = ['Judean People's Front', 'People's Front of Judea', 'Judean People's Front', 'People's Front']

To add multiple items to a list you can use .extend

monty_python_cast = ['Graham Chapman', 'Michael Palin', 'Terry Jones'] monty_python_cast.extend('Eric Idle', 'John Cleese') //monty_python_cast = ['Graham Chapman', 'Michael Palin', 'Terry Jones', 'Eric Idle', 'John Cleese']

Today we've covered how to set up Python, basic variables and lists. Next week we will delve a little more into python! We will talk more about methods we can use on lists, functions and more! Stay tuned!

Javascript Async Callbacks

Joy Palumbo — Fri, 13 Dec 2019 01:17:48 +0000

Let's talk a little bit about async callbacks. First we need to talk about synchronicity vs asynchronicity. Javascript is a syncronous, single threaded language. What that means is that javascript reads code line by lineand reads everything in order, from top to bottom. Let's take a look at a simple example:

var a = 1; var b = 2; console.log(a); console.log(b);

In the example above, javascript will read/run each line in order. "a" will console 1st, then "b" will console. In an example like this, all is fine. But what about when we start building apps. No problem right? Actually, this can cause a lot of problems. There are many situtions where we have code that does something, such as query a data base, or requests info from an api. Those querys can take a long time. We don't know how long it will take to receive that data back. Because Javascript is syncronous, it will send the request, then keep on going and run the rest of the code. This can cause a lot of problems, such as our data being undefined. Lets look at an example of how this might happen:

```function getData() {
var data;
$.get("This is a get request, trying to get data", function(response) {
data = response;
});
return data;
}

var data = getData();
console.log("The data is: " + data);```

This function is syncronous. We have a get request that is requesting data but it might be a while for that data to come back. In the meantime, javascipt will move to the next line and return data. But we haven't received any data back so the data will return undefined so in the next couple of lines, when we console.log data, it will console.log "undefined". This is no beuno. If a developer is not aware of such issues, this could cause a lot of problems and a big headache. Luckily there is a solution...

Asyncronicity...

Asyncronicous code allows us to run long network requests and queries without holding up other code. 3 common ways to do this is callbacks, promises and async/await. Promises and async/await are great but today we're talking about callbacks.

Callbacks are functions that are passed into other functions as a paramater. Named functions or annonymous functions can be used. Let's look at an example of how to use a callback:

Here we have a function called "greeting". We will use this as our callback function.

function greeting(name) {
 console.log(`Hello ${name}, welcome to OpSpark!`);
}

Below, we have another function that takes a callback as one of it's paramater and we will pass in the greeting function as the callback.

function introduction(firstName, lastName, callback) {
 const fullName = `${firstName} ${lastName}`;

 callback(fullName);
}
introduction('Pickles','McPickleton', greeting); // Hello Pickles McPickleton, welcome to opSpark!

When "introduction" is ran, it calls the callback and "greeting" doesn't run until it is called inside "introduction". This is just a basic example but callback functions are very handy in succesfully passing or manipulation data.

Callbacks are good for short, asyncronous operations but you should be carefully not to nest too many callbacks because you will enter callback hell which can make it very hard to debug your code. If you think you are going to have more than 3 or so nested callbacks, it's best to use a promise or asyn/await.

In conclusion, when using javascript, it's best to be asyncronous and one way to do this is to use callbacks. Callbacks can be very helpful, but be careful not to get too carried away.

Components: React components VS AngularJS components

Joy Palumbo — Mon, 09 Dec 2019 03:47:32 +0000

First, let's talk about what components are. Components are reusable pieces of code that return html that is rendered onto the user interface. We should try to keep in mind seperation of concerns and keep each compent small. Each component should only do one thing. Ideally you should be able to re-use components because each component only has one task. It is best practice to have each component only perform one task for re-usablitiy, organization, preventing spaghetti code and it will also make it easier to de-bug your app. If you keep all your code in one component it makes it a lot more difficult to find problems when things start to break.

In the photo below, each box ideally would be a seperate component.

Both React and Angular use components but there are some differences between the two. First let's take a look at the general set up of a component in React and AngularJS.

React: React components can be made using functions or with a class. Each component has life-cycles. There are many life-cycles but 3 major life-cycles that are often used are render, componentDidMount and the constructor function. Render is the only manditory life-cycle.

               Class component in React:

Class CatListContainer extends React.Component {
 constructor(props){
   super(props)
   this.state = { cats: [] }
 }
 componentDidMount() {
   fetchCats(cats => this.setState({ users }))
 }
 render(){
   return <CatList Cats={this.state.cats} />
 }
}

                Function component in React:

function CatListContainer = (props) => {
   return (
    <div className="CatListContainer">
        <CatList />
    </div>
   )
}

Generally when making a react component, it is best making it with a function, as long as your working with static data. Notice there is no "render" key word. Render is still happening but you do not need to write the word "render". It will automatically do it for you. After the return statement, (which is used with parentheses instead of curly brakets), JSX is used to render html onto the UI. If you going to dynamically render data that will change, you will need to make your component using class. Class components take a constructor function and will need both the "return" and "render" keyword.

AngularJS: The component controls the view. Each component has the properties: selector, template and style. Instead of passing in props, like react, AngularJS used binding to pass paramaters into a component.

                     AngularJS component:

angular.
 module('myApp')
 Component('greetCat', {
   template: 'Hello {{$ctrl.cat}}!',
   controller: function GreetCatController(){
     this.cat = Pickles;
   }
 });

Let's break down the differences by functionality. First, let's talk about state and mutation. With AngularJS the creaters believe that components should be mutable. This means we can easily change the data any time. AngularJS achieves this, and passes data with dependancy injection and the use of services. But React, however believes components should be immutable and they use state and setState to achieve this and to pass data.

To talk a little bit more about passing data, AngularJS also uses bindings to help pass data from one components to another. Output is made by children components and listened to by the parents. React uses props to pass data. React allows us to update parent state from the child.

As far as rendering and styling goes, AngularJS uses templates to put html on the DOM, which is outside a component, whereas React renders html within the render method, which lies inside the component.

In conclusion, React and AngularJS components are very similar overall but each one has slight differences in how they pass and render data.

CSRF Attacks

Joy Palumbo — Mon, 02 Dec 2019 07:56:14 +0000

CSRF stands for Cross-Site Request Forgery. It's a web-security vulnedrability that allows an attacker to force a user to perform actions they don't actually want to do. It's often referred to as a one-click attack because often all it requires for a user to do is one click. With just one click, it can allow an attacker to change a user's email or password, transfer funds or completely take over a users account. Luckily with CSRF attacks, the attacker cannot access any vulndrable data about the user. But that beings said, CSRF attacks can still do a lot of damage. CSRF attacks are in the top 10 mosyt frequently used attack methods.

Attackers usually accomplish a CSRF attack using HTTP requests. An attacker can do this by creating a web page. Within the webpage (usually in the html) they can insert an HTTP request to a specific website. The HTTP request can then be triggered and sent when a user clicks on a link or submits a form. Belowe is an example of code an attacker could put in their html. The action has a link to whatever website they want access to and specificially the page that changes a users email address. Then the attacker inserts their own email address. If the user is currently logged onto that specific site when the HTTP request is triggered,their cookies will enamble the attacker to access their account.

<br> document.forms[0].submit();<br>

It is a developer's responsibility to protect their users from CSRF attacks. Unfortunately CSRF attacks are very easy to produce so it is imperative that developers set up ways to prevent CSRF attacks. Developers should use CSRF anti-forgery tokens. These tokens are hidden in the htlm code and when the server renderes a page that has sensitive information, it requires an anti-forgery token, and the server will validate it. Another way a developer can protect their site is with SameSite cookie attributes. SameSite was created by google and other browers, such as fire fox have adopted it too. This allows developers to tells the browser whether or not to send cookies to a third-party domain.

Users should be careful though. You can't assume that all websites, even big named websites are protected. Often times sites aren't protected or they haven't protected their site correctly. A couple examples of big named companies that have been vulnedrable to CSRF attacks are Netflix, google, UTorrent and YouTube, just to name a few. A few things users can do to protect themselves are: Have up-to-date anti-virus soft wear. Some CSRF attacks can install malware on your computer. Also, only having one tab open in your browser at a time, always logging out after going to sensitive sites, such as a bank website, and don't store passwords in your browser.

In conclusion, even though data cannot be accessed through CSRF attacks they are still bad and can cause damage. CSRF attacks are very easiy to create. A few things a developer can do to prevent CSRF attacks are anti-forgery tolkens and SameSIte cookies.

Singly and Doubly Linked Lists

Joy Palumbo — Mon, 25 Nov 2019 04:13:52 +0000

There are three types of linked lists: singly, doubly and circular. Today I will be talking about singly and doubly linked lists. Linked lists are a type of data structure that helps us store data that are made up of nodes. Linked lists are linear and are an alternative to using arrays. The data is stored in a non-contigious way, which means the data is storad randomly and not in a straigh line. Unlike arrays, the size of a linked list is not fixed. The size/length of the list can increase or decrease on demand. One down size to a linked list is that it does not allow direct access to individual elements(nodes) like arrays do.

Singly Linked Lists:

 Let's start with singly linked lists.  A singly linked list has nodes that contain a piece of data and a pointer that references the next node in the list.  When searching for data, you have to start at the head, which will point to the first node, which then only points to the following node and so on. It is similar to looping through an unsorted array.  The time complexity of a singly linked list the most efficiant but does not take up much memory. Singly linked lists are mainly used to implement stacks.

Let's take a look at the ES6 setup for a singly linked list:

class Node{
    constructor(data, next = null){
        this.data = data,
        this.next = next
    }
}

Doubly Linked Lists:

   Doubly linked lists also contain nodes. What makes Doubly linked lists different from singly linked lists is that in addition to each node holding data and a pointer that points to the next node, it also has a pointer that points to the previous node as well. With a singly linked list you can only traverse the list by starting at the head, but with the doubly linked list you can start at either the head or the tail. This makes it a little bit more efficiant to traverse through than a singly linked list.  However, due to the extra pointer, doubly linked lists take up more memory. Doubly linked lists can be used to make stacks, heeps and binary search trees

Here is the ES6 set up for a doubly linked list:

class DoublyLinkedListNode {
   constructor(data) {
       this.data = data;
       this.next = null;
       this.previous = null;
   }
}

Here is a look at the time complexity of linked lists:

Linked lists are good when needing to insert or delete data. Worse-case Scenario time complexity for inserting or deleting in linked lists is O(1) which is constant. Unfortunately when accessing or searching, the time complexity is O(n)(linear) which means it willtakelonger to access or search.

In conclusion, when trying to decide which data structure to use for your project, think about what your project will be doing and what is most important to you.  Are you going to be constantly adding and deleting data or are you mostly only going to be accessing/looking up data?  What is more important to you: effeciancy or memory.  Both singly and doubly linked lists are handy but depending on your needs you may chooseoneover the other.