DEV Community: Christine Garaudy

Designing Schemas for Relational Databases

Christine Garaudy — Sun, 13 Sep 2020 23:43:42 +0000

What are Relational Databases?

While working for IBM in 1970, E. F. Codd developed the idea of a relational model for organizing database structure, and coined the term “relational database” in his research paper “A Relational Model of Data for Large Shared Data Banks”. He imposed a definition containing a dozen rules (Codd’s 12 Rules), two of which are considered necessary today at a minimum:

1- (Relational databases should) present the data to the user as relations (a presentations in tabular form, i.e. as a collection of tables with each table consisting of a set of rows and columns);

2- Provide relational operators to manipulate the data in tabular form.

A database can contain as many tables (or “relations”) as needed to store and organize necessary data. Each table is comprised of rows and columns (also known as “attributes”) with a unique “primary key” identifying each row (which are also sometimes called records). When the row of one table is linked to a row in another, a column containing a unique id for this linked row is created, which is called a “foreign key”.

The most common relational databases are MySQL and PostgreSQL, which use Structured Query Language to access and manipulate data, using commands like "INSERT", "SELECT", "ALTER", and "DELETE". SQL is straightforward and doesn't take very long to learn.

Relationships Between Data

When thinking about designing a database, you must first decide which data needs to be stored, then determine the relationships between the data. In order to identify the relationships between tables, you must examine them from both sides. They will fall into one of the following categories:

One-to-One

Each row in the first table is related to only one row in the second table.

One-To-Many

Each row in the first table can relate to any number of rows in the second table.

Many-to-Many

Any number of rows in the first table can relate to any number of rows in the second table. This type of relationship does not work for tabular data, so a junction (or intersection) table will be necessary to break them up into two one-to-many relationship tables.

Building Tables

Imagine we're creating a MySQL database for our local veterinarian's office. Important information to store would include pets' names and breeds and their owners' names and phone numbers. We could set up a table called "pets" that will contain the pet names, species, and age and give each pet a unique id.

To keep our tables nicely organized, we can store a list of all animals' species in another table, assigning a unique id to each species type.

The relationship between the pets table and the species table is a many-to-one: each pet can only belong to one species, but each species can have many pets.

We'll make an owners table that will store the full names and phone numbers of the owners.

Each owner could have an unknown and potentially large number of pets, so it's not a good idea to directly store pet information in this table. Additionally, each pet could have more than one owner listed, creating a many-to-many relationship that necessitates a join table in which we'll enter the unique ids of each owner and pet.

Each field should only contain one value, or have a single source of truth. This information could look something like this on a spreadsheet:

Putting it all Together

A very helpful tool for visualizing data and designing tables for MySQL and PostgreSQL databases can be found at https://dbdiagram.io/. You enter the table names and contents into the input field on the left and it will generate those nice tables for you. Here is what I typed to create the tables shown above:

Each table has a column for id, which will be an integer (int) called the primary key ([pk]). "varchar" signifies a string datatype and is followed by a number in parentheses to specify the maximum length allowed, up to 8,000 characters. Other data types include date, time, binary, et cetera. The full schema for our imaginary pet/owners database looks like this:

You can show those relationships by dragging from field to field, and it will generate a list for you at the bottom of the code editor. (You can also type them in yourself if you prefer.)

< means one-to-many
> means many-to-one
- means one-to-one

They even allow you to export the schema you've designed, or import an existing schema you may want to examine visually.

Conclusion

Relational databases store information in organized tables.

Data is accessed and manipulated using SQL.

Visualizing schema structure can be challenging. Using a designer like dbdiagram helps to understand the relationships between data in order to create an organized configuration.

Hooked on React JS

Christine Garaudy — Sun, 06 Sep 2020 15:01:54 +0000

INTRODUCTION

React was developed by Facebook in response to their growing need for more efficient and manageable code as the social media giant continued to expand. Released in 2013, React was initially met with some skepticism from the developer community, but quickly proved its versatility and stability, winning over tons of teams looking for a way to make their applications faster and more responsive for their users. React is an open-source JavaScript library designed for building user interfaces comprised of components- functions that can accept properties and which describe how a portion of the UI should appear on the page and be rendered on the DOM. You declare a view for different states in the application, and React handles communicating the updating and re-rendering via the virtual DOM, which makes changes appear quickly for the user. Keeping code organized by building encapsulated components that manage their own state allows for quicker editing and debugging- hugely important for large scale applications like Facebook, but equally convenient for handling programs of any size.

LIFECYCLE IN REACT

Whether it is explicitly described in the code or not, all React class components undergo a four-part lifecycle: initialization (the component is constructed with its props and default state), mounting (the component is rendered onto the DOM), updating (the component is changed and the app is re-rendered and repainted), and unmounting (the component is removed from the DOM, freeing up related resources).


class Clock extends React.Component {
  constructor(props) { //initializes class with props and state
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
  //some code to run when component is rendered
  //maybe fetch some data
  }

  componentWillUnmount() {
  //perform cleanup after component is removed from DOM
  //cancel network request, clear a counter, etc
  }

  render() { //outputs its contents to DOM (required)
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date}.</h2>
      </div>
    );
  }
}

Formerly, only class components had access to these methods and the ability to handle state. Functional components simply output an element to the DOM. React developers changed all of that when they introduced hooks.

LET'S HOOK UP

Hooks were an experimental feature of React since 2018, but were officially introduced as part of React version 16.8, released February 2019. Hooks allow you to "hook into" lifecycle components without classes and give state to functional components, leading to code that is shorter and easier to read. Hooks are an "opt-in" feature, meaning that they are completely compatible with classes and won't break older code, allowing developers to easily experiment with implementing them into an existing codebase. Hooks can make components short and sweet:

//a class component

import React from "react"

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         answer: 'Yes'
      }
   }

   render() {
      return (
         <div> 
            <h1> Is state important to know? {this.state.answer} </h1>
         </div>
      )
   }
}

export default App

//a functional component using hooks

//you must import hooks
import React, { useState } from "react"

function App() {
   const [ answer ] = useState('Yes')

   return (
      <div>
         <h1> Is state important to know? {answer} </h1>
      </div>
   )
}

export default App

Two of the most commonly seen hooks are useState and useEffect.

useState()

This method manages state to display. It makes use of array destructuring. Its first value is what you're saving as state, and the second is a function that lets you change that state.


import React, { useState } from "react"

function App() {
  const [count, setCount] = useState(0) //default value is 0

  function increment() {
     setCount(prevCount => prevCount + 1)
  }

  return (
    <div> 
      <h1> {count} </h1>
      <button onClick= {increment}> Increment! </button>
    </div>
  )
}

useEffect

useEffect effectively replaces lifecycle methods by allowing us to create side effects- reaching outside of the component to do something, like make a network request, listen for an event, or manipulate the DOM. It takes a callback function and array in which you can specify the variable(s) to watch for.

//with no second argument, runs the function on every component render

useEffect(() => {
   functionCall()
},)

//replaces componentDidMount by putting array as second arg, runs once

useEffect(() => {
   functionCall()
}, [])

/* replaces deprecated componentWillUpdate by adding variables to the array 
that it will watch for changes on */

useEffect(() => {
   functionCall()
}, [watch, these, variables])


//replaces componentWillUnmount if returning function to clean up side effects

useEffect(() => {
   function doStuff() {
     //effect
   }
   return function cleanup() {
     //remove effect
   }
}, [])

Additionally, React includes these more advanced built-in hooks: useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue. You can even create your own hooks for handling complex logic specific to your program's needs.

CONCLUSION

React is a simple, but powerful library for quickly building interactive user interfaces that are broken down into encapsulated components which contain their own state and abstract away much of the complexity of its rendering methods. The introduction of hooks further simplifies React components, making complicated class components unnecessary by allowing functional components to "hook into" lifecycle methods and providing the ability to share reusable state logic across multiple components. Code becomes cleaner, more concise, and easier to read and reason about. Best of all, hooks are completely compatible with older React code, allowing developers to opt-in and experiment with introducing them into existing programs without breaking anything. You can avail yourself to React's many useful built-in hooks, or even create your own.

Getting SASSy with CSS: An Introduction to CSS and its Powerful Preprocessor

Christine Garaudy — Sun, 30 Aug 2020 15:34:17 +0000

What's the Deal with CSS?

Developed by the World Wide Web Consortium (W3C) and introduced in 1996, CSS (Cascading Style Sheets) is one of the cornerstones of web development, along with HTML and JavaScript. CSS allows developers to adhere to the best practice of separating concerns by keeping content and style formatting in different files to keep code neat and organized. Most new developers will use CSS early on to do things like change fonts and background colors before researching the basics of layouts and positioning, leading to some unexpected and unwanted surprises on the page. Understanding the box model and positioning keywords is necessary for designing layouts and arranging elements that behave as intended.

The CSS Box Model

Everything on the page can be thought of as a box in CSS. Every HTML element is contained inside of a box, and the box is comprised of four parts that allow the size and space inside and outside of the element to be adjusted as well as defining the space between each element. The different parts are called the content, padding, border, and margin.

Content refers to the actual text, image, or video being displayed. The padding is the space inside, between the content and its border. The border wraps around the padding and content and won't be visible unless its width and color are specified. Finally, the margin is the space between the element and other elements on the page. It's important to consider the whitespace in and between elements to ensure content isn't cramped and the page looks neat and organized.

Positioning Elements

The position property specifies how elements are arranged on the page. There are many keywords that can be applied to dictate location, but the main five are static, relative, fixed, absolute, and sticky.

Static positioning is the normal, un-styled position an HTML element will take based on its order in the document, which defaults to top left of its container. Relative is the distance away from that default placement. For example, relative, top: 20px will move an image 20px away from its normal top position. Fixed will glue an element to the viewport, and it will stay put regardless of scrolling. This is most often applied to navbars and headers that are intended to remain visible at all times and not move. Absolute means relative to the nearest positioned parent element's div. If a parent is not found, it will be positioned relative to the body. Sticky is like a combination of fixed and relative. Sticky elements will remain fixed on the screen until a certain condition is met; for example, a scrolling div in the middle of a page that stays fixed until its scrollbar reaches the bottom, at which point the entire page resumes scrolling as usual.

Once you understand how to position and size elements effectively, you can move on to the fun stuff like customizing colors and fonts, or the more advanced business of incorporating the power of a preprocessor into your projects.

What is a CSS Preprocessor?

A program that has its own unique syntax and features that will compile down into regular old CSS is called a preprocessor. Similar to a library or framework in a programming language, a preprocessor may introduce a more organized structure, more powerful features, or make the code easier to read and maintain. There are many choices out there, but SASS is the clear leader in popularity. It's useful for any aspiring front end developer to get familiar with SASS, as it's likely to be used on the job.

Time to get SASSy

SASS (Syntactically Awesome Style Sheets) is a language extension for CSS released in 2006 designed to expand the capabilities of CSS and improve the maintenance and scaleability of larger programs. SASS must be compiled into plain CSS to be read by the browser. One major advantage of SASS is that it allows nesting over the simpler and potentially wordier block style of CSS, creating a hierarchy that immediately communicates the relationships of elements, similar to the way HTML and programming languages nest indented child elements.

//SASS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

//CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

In a large program with many elements to keep track of, this visual organization is extremely helpful.

More Cool Things SASS Can Do

SASS's similarities with programming languages don't just end at nesting, however. SASS allows for variables, which is great for keeping code concise. You can assign a variable to a particular color you want to use throughout a page layout and refer to it by that name instead of looking up its hex code repeatedly or trying to memorize it.

$pink: #ffbcd9;
$adagio-font: 'Adagio Sans', 'Arial', 'Helvetica', sans-serif;
$carto-font: 'Cartogothic', 'Arial', 'Helvetica', sans-serif;

h1 {
  font: $adagio-font;
  color: $pink;
}
a {
  font: $carto-font;
  background-color: $pink;
  padding: 5px;
}

You can even do loops and conditionals with SASS!

//SASS conditional

@if width(body) > 500px {
  background color: blue;
 } else {
  background color: white;
 }

SASS features mixins that make reusable chunks of code that can accept SASS variables as arguments. The mixins get compiled directly to CSS code.

@mixin overlay() {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.modal-background{
  @include overlay();
  background: black;
  opacity: 0.9;
}

@ includes tells the program to use the previously defined @ mixin.

SASS even has functions like a real programming language. These functions can accept or output other functions, or produce a value for a CSS property.


@function calculator-function($number-one, $number-two){
  @return $number-one + $number-two
}

.this-div {
  padding: calculator-function(10px, 5px);
}

.this-div {
  padding: 15px;
}

(They seem similar, but remember: functions output a value, and mixins output lines of code.)

Conclusion

At least a little CSS know-how is required for any front end task. This was an extremely brief introduction to the basics of positioning elements as a starting point for creating well-designed, intentional layouts, but there are so many awesome things you can do with CSS, including filters, animations, click event effects, and many more, limited only by your imagination. Leveraging the power of SASS's features takes the possibilities even further, and requires less code to make it happen. Happy experimenting!

Image Sources

Box Model: espezua.github.io

CSS Positioning: medium.com/@demayous1/about-css-positioning-7a913dc7425a

Classical vs Prototypal Inheritance

Christine Garaudy — Sat, 22 Aug 2020 22:25:57 +0000

Inheritance is an important concept in all object-oriented programming languages. Inheritance methods create reusable and DRY (don't repeat yourself) code, which is quicker to write, easier to maintain over time, and quicker to run. The idea is to create a class or a primary object that passes down or shares its properties and methods to subsequent related objects, thereby reducing the amount of code to write each time a new object is made. The new objects can have additional characteristics the original object or class does not, but they will all share the original properties. This also makes for more readable code, as it will be immediately clear what the relationship between the objects are.

There are two main types of inheritance patterns- classical and prototypal. Most programming languages follow the classical pattern, including Simula (which was the first object-oriented language), Java, C++, C#, Ruby. Class-based languages usually have somewhat rigid inheritance rules and go from the top down, beginning with a general idea and moving toward specifics. Prototypal inheritance is more flexible and can move in either direction. The most commonly used prototype-based programming language is JavaScript, which was greatly influenced by Self, the first language to use prototypal inheritance.

With prototypal inheritance, new objects are direct clones of the original. They can have additional properties the original prototype did not have, and any property or method lookup not found on the new object will fall through to the prototype. In classical inheritance models, the new instances are instantiated through a more complicated process involving the interpretation of the blueprint of the parent.


//Java

class Animal {
  private name;
  public Animal(String name) {
    this.name = name;
  }
  public String getName() {
    return this.name;
  }
}

class Cat extends Animal {

}

Cat cat = new Cat("Fluffykins");

JavaScript uses its built-in prototype chain to link the Constructor.prototype of the child directly to the Constructor.prototype of the parent, resulting in a tightly-coupled single-ancestor parent-child hierarchy that some prefer to describe as “behavior delegation” rather than true inheritance.


//JavaScript

function Animal(name) {
  this.name = name;
}

Animal.prototype.getName() {
  return this.name;
}

function Cat(name) {
  Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);

const cat = new Cat("Fluffykins");

JavaScript's prototypal inheritance model can be strange and confusing for programmers coming from a background of class-based language experience, so the class keyword was introduced to JS as a major update of ES6. Now, we would write the code above like this:


//JavaScript ES6

class Animal {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

class Cat extends Animal {

}

const cat = new Cat("Fluffykins");

This new class syntax does not change the way objects inherit, but is simply syntactic sugar that obscures the process going on under the hood, making it look similar to other languages.

Here are the main takeaways:

1) In class-based languages like Java, a class is like an architectural plan all future objects will follow, like a template or a blueprint with directions.

2) In prototypal inheritance as in JavaScript, the prototype is itself an object from which new objects will inherit properties directly.

For example, in class-based languages Java and C++, classes only exist when the code is compiled, and the inheritance occurs then, at compile time, statically. With JavaScript's prototypal inheritance model, any object can be extended to allow access to its properties, creating a new object. This new object can do the same, creating a dynamic chain of objects at runtime.

The addition of the class keyword in ES6 has resulted in JavaScript having a sort of split personality regarding inheritance, so it's useful to have a basic understanding of both classical and prototypal inheritance models to see what's really going on behind the scenes, particularly for developers coming to JavaScript from other languages.

MongoDB with Mongoose for Beginners

Christine Garaudy — Sun, 26 Jul 2020 16:13:48 +0000

What is MongoDB?

A NoSQL "document database with the scalability and flexibility that you want with the querying and indexing that you need," according to the docs at www.mongodb.com. You can run it on the cloud with MongoDB Atlas, or on the server of your choice. It's designed to be simple for developers to learn to use while still being powerful enough to handle the complex requirements of large-scale applications. It stores data in JSON-like document objects that are malleable and easy to work with. It's open-source and free for anyone to use! With MongoDB, you manipulate data through object-oriented APIs rather than having to learn a special query language with SQL, which makes it more familiar and easier to understand for someone like me with no prior database management knowledge, but some general JavaScript know-how.

What is Mongoose?

Besides the adorable and vicious fuzzy African snake-killers, Mongoose is an Object Data Modeling (ODM) library for managing data that works with MongoDB and Node.js. MongoDB is schema-less, which is liberating but potentially messy, so Mongoose helps to enforce a document data structure that makes it easier to store and manipulate information. The library comes with many built-in helper functions that allow us to quickly and easily perform basic CRUD operations (create, read, update, and delete.)

How do we use them together?

First you'll need to either install MongoDB on your server with these docs: https://docs.mongodb.com/guides/server/install/ or on https://www.mongodb.com/cloud/atlas if you want to float around in their cloud. Now we'll install Mongoose in the terminal

$ npm install mongoose

You're going to have to require mongoose in the project and connect it to the database you're going to make. I'm running a server on my local machine.

const mongoose = require('mongoose');
const DB_NAME = 'catSchema';
const DB_URI = `mongodb://localhost/${DB_NAME}`;

mongoose.connect(DB_URI, { useNewUrlParser: true, autoIndex: true })
  .then(() => console.log('Connected to database'))
  .catch(err => console.error('Failed to connect to database', err));

Here, I've included success and error messages so I can be sure I'm properly linked up.

Let's make a Mongoose schema to organize our data,

const mongoose = require('mongoose');
const catSchema = new mongoose.Schema({ 
  name: String, 
  breed: String, 
});

then use the model method to CREATE it

module.exports = mongoose.model("Cat", catSchema);

Best practice with Mongoose is to split up models into their own separate files, so in a new file we can require the Cat model and use it to make a new cat. Mongoose will let us write promises, so let's do it that way to keep the code nice

const Cat = require("./models/Cat");

function saveCat(cat) {
  const c = new Cat(cat);
  return c.save();
}

saveCat({
  name: 'Fluffykins',
  breed: 'Persian'
})
  .then(doc => {
    console.log(doc);
  })
  .catch(error => {
    console.error(error);
  });

Now that we have something in there, we want to use another built-in Mongoose method to get stuff out of the database, aka READ with find() or findOne(). FindOne() will return the first document to match your query, while find() will return an array of all documents that match. If you don't specify a query, find() will return an array containing all of the documents in the collection.

const fluffy = await Cat.findOne({ name: "Fluffykins" });
//returns first Fluffykins object

const cats = await Cat.find({ name: "Fluffykins" });
//returns all Fluffykins objects in an array

const cats = await Cat.find();
//returns all cat objects in an array

We can UPDATE our cat with her favorite toys and then save it.

const fluffy = await Cat.findOne({ name: 'Fluffkins' });
fluffy.toys = ['mousie', 'catnip ball', 'string'];
const doc = await fluffy.save();
console.log(doc)
/*
 * {
 * toys: ['mousie', 'catnip ball', 'string'],
 * _id: 59e8tsdf726e5n87y92hf6234o
 * name: 'Fluffykins',
 * breed: 'Persian',
 * }
/*

(MongoDB will also assign a unique id to your entries.)

Finally, you can DELETE with the remove() method

const fluffy = await Cat.findOne({ name: 'Fluffykins' });
const goodbye = await fluffy.remove();

Conclusion

Learning how to work with the back-end can be challenging. It's more difficult to conceptualize the work being done with servers and databases in the beginning, compared to tweaking elements on the front-end and being able to immediately see the changes on the page. However, if we want to be able to create any real-world applications that will be useful to other people, we must learn how to manipulate and persist data. Mongoose helps us do just that with its handy, easy to read methods.

An Introduction to Ruby for Javascript Devs

Christine Garaudy — Sun, 19 Jul 2020 14:30:00 +0000

SOME BACKGROUND

Ruby is "a dynamic, open-source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write," according to its docs on ruby-lang.org. Developed in 1995 by Osaka native Yukihiro Matsumoto, who "really wanted a genuine object-oriented with easy-to-use scripting language" as an alternative to Python. Focused on "developer happiness," Ruby is a beginner-friendly language that was intended to be written more closely to human language than its predecessors, using verbs like 'puts' and 'do' for keywords.

Ruby is most commonly implemented with Rails, a framework that extends the language and provides structure and scaffolding to make writing code quicker and easier. It is considered an opinionated framework, as there is typically only one correct way to do a task, making it potentially easier for beginners to learn than a language/framework that has many different ways to achieve the same results. Ruby on Rails works on the backend of an application to fetch from databases and display data that contains HTML, CSS, and JS. With its database-driven design, model-view-controller (MVC) architecture, and built-in testing, Ruby on Rails allows for maximum productivity- one language to rule them all. Many of today's most popular websites were built on the Ruby on Rails framework, including GitHub, Airbnb, Groupon, Hulu, Soundcloud, and Kickstarter.

RUBY VS JAVASCRIPT

Ruby and JavaScript are both object-oriented programming languages that were developed in the same year. Matsumoto designed Ruby with developers' satisfaction in mind, famously stating his intent was to 'help every programmer in the world to be productive, and to enjoy programming, and to be happy.' JavaScript's main goal was to be a programming language that could be run easily and efficiently in web browsers. They are both common first languages for beginners, and both are popular choices for coding bootcamps, but Ruby is often considered easier to learn, mostly because of its brevity, structure, and simpler syntax.

Every programming language must provide ways to iterate over data. Let's check out some simple while loops:

//JavaScript

let x = 1;
while (x <= 10) {
  console.log(`The number is ${x}.`);
  x++;
}

//Ruby 

x = 1
while x <= 10 do 
  puts 'The number is #{x}.'
  x += 1
end

Pretty similar looking, but Ruby's syntax uses verbs that we really use in English, allowing us to tell at a glance what action each line will perform.

A key difference between the two languages is that Ruby is a true class-based language. Although with ES6, JavaScript adopted some keywords like 'class' and 'new' to make it look familiar to programmers coming from other languages, JS is really a classless language. That means that in Ruby, objects are created directly from a class, whereas JavaScript objects are actually created from prototypes.

//JavaScript

class Cat = (name, breed, treats) {
  this.name = name;
  this.breed = breed;
  this.treats = treats;
  this.receiveSnacks = () => {
    treats++;
    console.log(`Enjoy your ${treats} snacks, ${name}, 
you chubby ${breed}!`);
  }
}

garfield = new Cat('Garfield', 'orange tabby', 3);
garfield.receiveSnacks();

//a prototype done with an object constructor


//Ruby

class Cat 
  def initialize(name, breed, treats)
    @name = name
    @breed = breed
    @treats = treats
  end

  def receive_snacks
    @treats+= 1
    puts 'Enjoy your #{@treats} snacks, #{@name}, 
you chubby #{@breed}!'
  end
end 

garfield = Cat.new('Garfield', 'orange tabby', 3)
garfield.receive_snacks 

//a class made with class keyword and initialize method

The class keyword in JavaScript is simply syntactic sugar designed to obscure away some of the complexity of its inheritance methods.

Overall, the languages are overwhelmingly more similar than they are different, and if you have a solid understanding of JavaScript, you should have few problems adapting to Ruby's ways. You may even find that its simplicity saves you a little time.

CONCLUSION

There's a lot of talk online in developer forums about whether Ruby's heyday is over, but the truth is that it doesn't appear to be going anywhere. It did enjoy a resurgence in popularity in the early 20-teens which has since waned a bit, but the language was recently given some tweaks that increased its already-great performance significantly, with a major update just released in May of this year. The language continues to evolve in response to trends and feedback, remaining a solid choice for developers who want to write concise and clean code that is readable and powerful.

Introduction to UX/UI Design

Christine Garaudy — Sun, 12 Jul 2020 16:55:24 +0000

Vocabulary

Creating with the experience of the end user in mind has been a core principle of design for as long as people have given any consideration at all to the attractiveness of the objects they make and use- UX (user experience) in design is not new. Most of us want to interact with beautiful things, and our lives are richer and more pleasant when we do.

What is fairly new, is the concept of an interface. UX and UI are sometimes used interchangeably, and they are extremely similar, but the latter specifically refers to the user experience of interacting with an interface. UI (user interface) marries technology and art, considering the design aspects of all the various ways users will interact with your application on their computers, smartphones, or tablets. With so many easily-accessible distractions available on the web, a user will quickly drop your application and move on to the next if yours is visually displeasing or unsatisfying in any way.

Psychology

Taking psychology into account and understanding some basic ideas about human behavior are also important considerations in UX/UI design- applications must work with people's basic needs, desires, and habits. Designers must strive to combine functionality with appealing aesthetics and satisfying interactions. We are all now used to engaging with apps in a few particular ways, and have been conditioned to find scrolling, clicking, and pinching gestures pleasurable. It must feel gratifying to use an application or we will quickly lose interest in it.

Try to identify and appeal to your target demographic where possible and relevant. If you're designing for a young brand geared toward hip twenty-somethings, your stylistic choices should no doubt be different than they would be for a sophisticated company marketing itself toward a more established and wealthy clientele.

Basic Design Principles

Color

We can achieve more personalized-feeling results by considering elements such as color: the former brand and their demographic might respond to bright, loud splashes of color whereas the latter may be more appropriately represented by a softer color palette and more restrained tastes. Sometimes we can say more with negative space, allowing simpler, uncrowded images to speak louder.

Balance

Size and scale are important things to consider. Larger elements carry more significance. Symmetry and balance (or their inversions) can communicate strongly to users- symmetry and consistent proportions are familiar and calming, while asymmetry and exaggeration can feel urgent, jarring, and stimulating. Alignment affects the way people will scan the page, guiding them in a certain direction visually. Consider your intentions.

Contrast

Along with balance, contrast can help establish a visual hierarchy. We can create dominance and emphasis by giving a focal point more weight. Making the elements surrounding this point lighter creates variance and visual interest. We can communicate what is most important on the page instantly using contrast to guide users organically toward the most important elements.

Typography

Font styles are abundant and can make or break the design of a page. You can choose fonts from different typeface families, but try to stick to just two (three at the very most), such as an exciting one for the title and a more classic, readable style for the body. Make sure the pairing works well together but that they are also different enough for the choice to look intentional. Many find typography to be a particularly challenging facet of web design. When in doubt, choose something traditional and easy to read and make more daring choices elsewhere.

Consistency

Staying true to a theme is important for usability and overall cohesiveness. Strive for unity by keeping colors and fonts consistent across the application. Predictability is important- you want users to immediately and intuitively understand how to use your features. Try to limit hidden information in drop-down menus- keep options simple and put information in plain sight, like on buttons if possible. One exception is basic website navigation that users have come to expect in the form of a triple-lined "hamburger" menu in the upper right or left corner. Keep text links obvious by making them all the same color.

Conclusion

Even for those not in charge of aesthetic choices, becoming familiar with basic principles of design can help any developer or programmer grow. There is always an end user of your application. Keeping their user experience in mind can help you create more useful, beautiful, and intuitive software.

What are APIs and What Does it Mean to be RESTful?

Christine Garaudy — Sun, 05 Jul 2020 14:33:13 +0000

Introduction to APIs

APIs (application programmable interfaces) most simply allow different programs or machines to work together. They are able to call each other to give and receive information necessary to allow the software consuming that data to function properly. By outsourcing some of the functionality of our programs to APIs, developers are able to simplify their process and focus on making the product itself. We encounter these all the time when we download a new app on our phones and it asks for permission to access another application on your phone, like the map being used to provide location services, or your camera granting access so you can use funny filters on Instagram. Even the weather app is using an API to get the information it's giving you: there isn't anyone who works for Apple going around placing temperature gauges all over the planet to gather that data; it's using The Weather Channel's API to receive it and then passing it along to you. If you buy smart home features like thermostats, lighting, or security products and give them permission to access your smart speaker so you can tell your home robot assistant to make it cooler in here because it's July in New Orleans and we're melting, that device is using Alexa's API to share information back and forth.

A developer utilizing an existing API to build out the functionality of their app is wisely outsourcing some extra complexity. You don't have to understand everything going on under the hood of a car to drive it using the pedals, steering wheel, shifter, and instrument panel. You are provided with an interface that makes it user-friendly and relatively easy to operate. If you had to build the engine and transmission every time you needed a new vehicle, you might just have to start taking the bus and give up driving altogether. If every aspiring developer had to create every complicated feature of their app from scratch each time, we'd have far fewer developers at all with the massive skills required to make our cool new playthings.

RESTful APIs

REST is an abbreviation for 'representational state transfer.' It's a set of rules for a particular approach dictating how software components will talk to each other, what kind of messages they will send, and how they will handle these requests. It is actually just one possibility for internet architecture, but has become the most widely-used thanks to its many benefits over competing styles. The concepts REST embodies are as old as the internet itself, but it was packaged up and formerly introduced in 2000 by computer scientist Roy Fielding in his doctoral dissertation at UC Irvine called Architectural Styles and the Design of Network-based Software Architectures. It's essentially a distilled collection of internet architecture wisdom guiding best practices for implementing HTTP protocol. REST is an alternative to SOAP (simple object access protocol), created by Microsoft in 1998, which only allowed XML data formatting.

REST allows several data formats, most notably JSON, which is easy to understand, supported by all common browsers, and uses little bandwidth, making it the standard for data transfer and thereby elevating REST's success. REST also allows for caching static information (components that don't need to be changed often), allowing applications to run faster.

REST enforces HTTP protocol for sending messages over a network, using standardized keywords like 'GET', 'POST', and 'DELETE' for receiving, creating, and getting rid of information, making requests explicitly clear. In a current assignment for Operation Spark, we are working on a client side project that accesses data stored on an external server. Here's a partial example of how we could make a request in our code:

create: function(message) {
  $.ajax({
    //communicate with the parse API server.
    url: Parse.server,
    type: 'POST',
    data: JSON.stringify(message),
    contentType: 'application/json'
  }
};

This snippet is using the 'POST' keyword in a function that will create messages.

REST guidelines specify that relations between the client and server are 'stateless'- there shouldn't be a stored record of prior exchanges between the two, and each individual request must be handled only with the information that accompanies it at the time of request, ensuring efficiency and speed. Additionally, the client and server should be loosely-coupled entities, allowing each to be expanded or enhanced independent of the other.

Conclusion

The history of APIs isn't long, but its impact on technology development is significant. Salesforce was the first company to market its own API in 2000, a part of its signature "Internet as a Service" package. In the next few years, E-Bay and then Amazon developed their own APIs, expanding their market reach by allowing other sites to access them. Soon after, in 2004, Flickr released a photo-sharing API giving users the power to embed images stored on Flickr's servers into their own websites and blog posts. Then came Facebook and Twitter with their APIs in 2006. Now virtually anyone has the power to create and use helpful 'widgets' and APIs across applications, increasing the functionality of their program and its ease of use for both developer and end user. Adhering to RESTful principles when creating and using these APIs allows for greater flexibility and efficiency for everyone involved.

How to think about the JavaScript keyword 'this'

Christine Garaudy — Sun, 28 Jun 2020 14:10:46 +0000

The keyword this can be very useful, especially when creating classes or constructor functions, but it can be difficult to understand exactly what it's referring to sometimes because its meaning can change in different execution contexts within the program and with different patterns of invocation that may appear very similar when you're first exposed to them.

"Execution context" refers to the meaning and value of functions, objects, and variables, at a particular point in the program. Because the Javascript compiler will read the code from top to bottom, the execution context, and therefore the value of these aspects, can change from one line to the next depending on how and when we invoke functions.

There are four main patterns or styles of invoking functions in our programs. Let's explore those and see how they can each change the meaning of this and what it will be bound to.

Free Function/Global Invocation

Unless we specify, the context of this is bound to the global object (which is the window object in the browser) by default.

function garfield () {
  console.log("mmm lasagna");
  console.log(this === window);
}
console.log(garfield()); //logs mmm lasagna true

Since we didn't specify what we referring to, this automatically was bound to the global window object.

Method Invocation

When we call on a function that is created inside of an object, we say we are invoking a method of that object.

const cat = {
  noise: 'meow',
  speak: function() {
    console.log(this.noise);
  }
}

console.log(cat.speak()); //logs meow

Above, we invoke speak, which is a method of our cat object. Most of the time we can look to the left of the dot at call time of a function to see what this belongs to. In our case, cat is to the left of the dot when we invoke the function speak, so we know that this is bound to it.

Constructor Invocation

Constructor functions allow us to create a sort of blueprint for making new objects that are related. Instead of using camel case (camelCase) to declare a variable, we'll use an upper case letter to denote that this is a constructor function so other developers can tell right away that's its intended purpose. Then we use the keyword new to create new instances of that object that will share the characteristics specified inside of the constructor.

const Cat = function(breed, color) {
  this.breed = breed;
  this.color = color;
}

const myKitty = new Cat('Persian', 'white');

The new keyword lets us know that this will be bound to then newly-created object.

.apply(), .call(), and .bind()

Using .apply() or .bind() we can specify exactly what we want this to refer to, ensuring it will be what we intended and not a fun surprise.

.apply() takes two arguments- an object and an array of the arguments of the function we attach it to. .call() works in the same way as .apply, except that the function arguments will be separated by commas and not inside of an array literal. Both will invoke the function immediately.

const person = {
    firstName: 'Jenny',
    lastName: 'Smith'
}

function feed(greeting, foods) {
    return `${greeting}, human called ${this.firstName}.
            Feed me ${foods} now, or else.`;
}

console.log(feed.apply(person, ['Good morning', 'wet food and treats']));
//Good morning, human they call Jenny. Feed me wet food and treats now, or else.

Using .apply(), we specified that this would refer to our person object and we gave our feed function the arguments in the array.

What if you want to hang on to that context and re-use it? Instead of having to use .apply() or .call() over and over again, we can just use .bind() to return a function that will always have our specified context of this and save it with a variable.

const demands = feed.bind(person, ['Good morning', 'wet food and treats'])

console.log(demands());

This will give us the same output as the .apply() approach we used above, but with a lot less code to write. Each time we want to use it, we can simply invoke demands() and get the desired output for less work.

this can be a powerful tool for creating, using, and manipulating objects in JavaScript, but it takes some time and experimentation to learn how to use it correctly. Once we do, it can be a powerful tool in our developer toolbelts.