DEV Community: Gabrielle J.

A Brand New World: An Intro to TypeScript

Gabrielle J. — Mon, 04 Sep 2023 04:51:11 +0000

TypeScript is a great addition to your toolkit if you’re a budding full-stack developer. It is popular amongst programmers today because it enhances JavaScript code making it more productive and less error-prone.

One of the main reasons for this increased productivity is the fact that TypeScript is a 'superset' of JavaScript: every piece of code you've ever written (or ever will write) in JavaScript is also TypeScript code.

TypeScript was created in 2012 by Microsoft, to help overcome the issues developers had when scaling up applications with JavaScript. The language’s popularity has slowly grown over the years with each successive, and open-sourced version, thanks to the broadening of its support for non-Microsoft branded environments and technologies.

Benefits & Drawbacks

At some point in your code journey, you’ll forget what every variable is supposed to be; it’s natural and everyone does it, no matter how skilled they are at coding.

Over at TypeScript's official site, they offer the following information:

"TypeScript provides static typing through type annotations to enable type checking at compile time. This is optional and can be ignored to use the regular dynamic typing of JavaScript."

In other words, TypeScript notates (this is called type annotation) your data type choices while you write code, and then actively checks throughout the life of the program whether or not you’ve stuck to the data types you defined earlier.

This early detection system helps you and anyone you may be collaborating with. The downside to this is you will spend more time writing your code.

It also makes the environment setup stage a longer process: you must interact with the tsconfig.json file to make your overall experience run smoothly. I will say, this does provide an opportunity for you to create a more customized experience.

Another concern is that TypeScript can’t run on a browser. The language must first be compiled, either by its in-house compiler, tsc, or another transpilation program such as Babel. A benefit of this translation process is that even though TypeScript identifies type errors, once the code has been compiled, those errors remain readable only in .ts files.

Now that we’ve got a conceptual understanding down, I’ve provided a short coded example of what TypeScript's type annotation looks and acts like. I highly recommend the TypeScript Sandbox if you’re interested in exploring the code yourself.

A Quick Visual Example


let message: string = 'Good morning, good evening, & good night';

After declaring the ‘message’ variable, I added a colon and the name of the data type.

Technically, you don’t have to set an annotation: TypeScript does this for you in the background, but while learning, this might just be the helpful visual reminder you never knew you needed.

Here's what happens when I try to reassign message to a different data type:

console.log(message = 2);  
// prints "Type 'number' is not assignable to type 'string'

Variables bound to arrays are written with a colon, followed by a one-word description of the element types, and a pair of brackets.

let authorsArray: string[] = ['Zadie Smith', 'Thomas Hardy'];

let anyTypesArray: any[] = ['eight', 8, true];

This article answers a few journalistic questions: the why, how, what and when of the TypeScript language. It was written to give you a quick introduction, but I hope it has piqued your curiosity, allowing you to explore and appreciate the many different and interesting aspects of TypeScript-based programming. Thanks for reading!

Sources:

Typescript
Wikipedia
Photo by Pixabay

Exploring Network Graph Visualization: Graphology and Sigma.js

Gabrielle J. — Tue, 15 Aug 2023 03:43:20 +0000

Graphology and Sigma.js are great libraries for those who want to learn to create interactive network graphs with JavaScript and Typescript.
Both projects are easy to install, and feature comprehensive, interdependent libraries for data modeling and graph visualizations. While Graphology handles what a graph will do, Sigma.js is responsible for the how the graph is experienced online.

Graphology

Graphology holds a reference implementation as well as a Graph object itself. A reference implementation combines all of the standardized requirements and common practices into one program. Examples of some of those requirements include graph layouts, metrics and algorithms that focus on community detection.

Important to the concept of a reference implementation, is testing, which is also included. Testing also provides you with some valuable training wheels while learning.

In tandem with its customized graph data structure, Graphology supplies properties and methods created by both the developers and contributors.

Here's an example of creating a new instance of the program's Graph object and some added properties, attributes and methods:

let graph = new Graph();

// a method to add nodes 
graph.addNode('Trantor');

// a setter attribute for that node
graph.setNodeAttribute('Hari Seldon', {school: "Streeling University"});

// a property that tells you the type of graph 
graph.type;

One of the more intuitive features is the auto-generation of node keys: nodes require keys to help the graph recognize and store any optional information you may pass to it. By auto generating keys while you create nodes, you have the option to add more information later whenever you're ready to do so.

Leading into sigma.js, graphology includes event handler methods for interacting with users once your network graph is rendered.

Sigma.js

As mentioned earlier, Sigma.js handles how a graph is experienced; in other words, it manages the rendering process and any graphical user interactions on your website.

Here are a few highlights:

uses the popular JavaScript graphics API, WebGL
renders medium to large graphs
utilizes a plug-ins library for help with customization
it's open-sourced!
provides intuitive documentation and ample demos

In their interdependence, Graphology and Sigma.js provide great functionality for visualizing and interacting with network graphs capable of holding thousands of connections. They also do a good job at providing guidelines for those interested in diving into the realm of network data analysis. Hopefully this article has given you insight on some of the exciting graph tech available to you.

Thanks for reading!

Sources

Guillaume Plique. (2021). Graphology, a robust and multipurpose Graph object for JavaScript. Zenodo. https://doi.org/10.5281/zenodo.5681257

Sigma.js
Sigma.js on Github
Graphology on Github

Cover Photo by Shubham Dhage

Introductory Concepts in Network Analysis

Gabrielle J. — Mon, 07 Aug 2023 13:49:18 +0000

Whether or not you are a budding software developer, a historian interested in incorporating statistical analysis into your work, or a film fan who wants to know why that game Six Degrees of Kevin Bacon literally never fails in finding a path back to Bacon – If you haven't come across the term network analysis, you've come to the right place!

This article is meant to introduce you to the amazing (yes, amazing) field of analyzing networks – and I don't just mean that famous one that starts with an F.

Theoretically, it is possible to relate everything everywhere as belonging to a network. I suppose that’s why social networks like Facebook can be catnip for users who relish “going down the rabbit hole.” A network, after all, is just a complex, interdependent system. Even though this theory of ultimate interconnectivity is wildly unrealistic to implement as a research topic, networks are as much a part of human life as food & shelter. Thus, it’s natural for us to want to study why networks are so important to our wellbeing. With that, let's go over some of the concepts related to creating, designing and analyzing a network.

The concrete version of a network, one we can manipulate and study, is a graph, which is made up of nodes and edges. Examining the explicit and implicit connections between places, people and things, is what nodes and edges are all about. A node is an entity: an example being you or me, or anybody you or I know. An edge is the relationship between you (the node) and --let's say, hypothetically, your two siblings, your two closest friends, your basketball coach from 7th grade, and that drugstore clerk who's always looks so happy. All of these people are also nodes.

The way a network is studied and designed depends on those edges. For example, you have more experience with your two hypothetical siblings you grew up with, than with the hypothetical drugstore clerk you see every other week. This experience influences your behavior – whether you realize it or not. This is what the concept of centrality measures – how influential a node is in relation to other nodes and within the network itself.

The number of people you know, or node degree, can affect centrality. The fact that you share similarities in DNA with your two siblings also adds weight to the edges that represent your relationships with them.

Considering that 7th grade coach, there will never be a time when you will be able to travel back in time to become their 7th grade coach – your relationship with them is considered asymmetrical, also known as a directed edge. Conversely, undirected edges represent symmetrical relationships: an example of this would be if your two closest friends residing as nodes from that hypothetical network mentioned earlier, are also best friends with each other.

Zooming out a little further, let's say you’re visiting Manhattan, & you wanted to find out where, and if, you'll have to trek up and down Manhattan to find all of the most popular theaters on your to-visit list. You'd pull out your phone and look at a map app, right? Somewhere deep in the recesses of that application is a metric called a clustering coefficient, which identifies how clustered a group of nodes are. Milliseconds later, this metric will have conveyed to the proper app components that communicate to you, that you do not, in fact, have to spend most of the day traveling; all you have to do is get to the Theatre District. The map application itself is a powerful network visualization designed to analyze and produce information about the New York public transportation network.

For those of you still reading to figure out Kevin Bacon's elusive secret, I'm sorry to disappoint you, but he doesn't have one. There's a scientific observation called the small world phenomenon, that reports that although two nodes may not be directly connected, a short chain of edges belonging to other related nodes will ultimately bridge that gap between those two unconnected nodes.

For those of you who are chess enthusiasts and/or budding developers, at some point you may have crossed paths with a problem called n-queens. The possible length of the n in that problem can be unsettling, just as dense networks can be untenable to analysts. A sparse network is a much more favorable attribute for creating optimized metrics. Related to the n-queens problem, is a style of computer programming called constraint programming. I won't spoil a potential learning opportunity, suffice it to say creating constraints on too much information makes analyzing it much more tenable.

In summary, there are many moving parts and factors to be considered when examining a network. Although network science may seem like a daunting field of work, if you relate its concepts to how we live -- how we have always lived throughout history -- you can discover how exciting and interesting network analysis can be. Hopefully, this article has helped introduce you to a few, important concepts that help developers, historians, chess fanatics, and many others analyze networks. I also hope this article illustrates just a bit about how much thought goes into designing the networks we use everyday – from transportation, to infectious disease tracking, to the lifespan of on- and offline communities (RIP GeoCities).

Feel free to give me feedback or just chat with me about this subject, and check out the sources list below for more information. Thanks for reading!

Loem, M. (2022, January 7). What is Network Analysis? - Towards Data Science

Caldarelli, G., & Catanzaro, M. (2012). Networks: A very short introduction.

Cover Photo by José Martín Ramírez Carrasco

Ruby: An Intro for the Curious-Minded

Gabrielle J. — Mon, 19 Jun 2023 14:14:03 +0000

If you're new to programming, Ruby is a great language to start learning. Ruby is a general-purpose, object-oriented programming language known for its readability and flexibility. It's primarily used for web application development, and is strongly associated with the popular web application framework Ruby on Rails.

Designed by Yukihiro Matsumoto in the early 1990s, Ruby was created primarily to accommodate the needs of
"humans, not machines". This article aims to break down why Ruby is something you should consider adding to your roster of useful things to learn as a budding programmer.

As mentioned earlier, Ruby has many advantages.

The same way that dictionaries are updated to include new words, Ruby also allows you to change how the language itself is used. You can use Ruby on many different operating systems. It is useful in many different types of professions - software development (both server- & client-side), development operations (aka DevOps), quality control & database management, amongst many others. Ruby developers are one of the highest-paid developers in the market, even though Ruby is not as well known as JavaScript, Python, or TypeScript.

Basic Syntax:

Here's an example of assigning a value to a variable and printing it. Notice that the variables are not explicitly declared, and the simplicity of its print statement:

my_Numeric = 115
myBoolean = true   
my_string = "Hello World"

puts my_string   // prints Hello World
puts 'Hi ' * 3   // prints Hi Hi Hi

Methods, Conditionals, and Arrays

Much like in JavaScript, methods are called after the variable and a dot.
Notice that the space between the array items doesn't affect the output, and the use of zero-indexing and bracket notation:

list = [3,2, 100, -54]
puts list.sort   //   prints -54, 2, 3, 100

daytime = 'During daylight savings time, the sun is still out at 8 AM.'
daytime.gsub('AM', 'PM') //  .gsub finds and replaces all occurrences of the 1st parameter with the second parameter

The first variable in the example below is an array with three elements. Using the index [1], you can access the second element.

The second variable points to a hash, which is a collection of key-value pairs. You can access the value next to the AM key by typing person[:AM].

veggies = ["cucumber", "celery", "lettuce"]
puts veggies[1]  # Output: celery

person = { name: "August", AM: "Good Morning!", PM: "Good Night!" }

puts person[:AM]  # Output: "Good Morning!"

And here is a simple control flow conditional statement and a loop:

The first block of code checks if y is greater than 5 and prints the corresponding message. The second block uses the times method to iterate five times, printing the iteration number.

y = 2

if y > 2
  puts "y is greater than 2"
else
  puts "y is less than or equal to 2"
end

5.times do |i|
  puts "Iteration #{i+1}"
end

Conclusion

In this article, we explored the fundamentals of why Ruby is a relevant and popular addition to your arsenal of knowledge and provided code examples to help you realize how simple and flexible Ruby can be. I hope this has been a beneficial and exciting introduction to Ruby.

Happy Coding!

Photo Credit: Ilya Pavlov @ Unsplash

An Intro to Structured Query Language(SQL)

Gabrielle J. — Mon, 12 Jun 2023 07:45:59 +0000

SQL, or 'Structured Query Language' is a well-known, standardized programming language used to access and manipulate relational databases.

How do you say it?

It's been in use for more than 35 years, and can be pronounced either as 'sequel,' or as the acronym S.Q.L.

What's a 'relational database'?

Technically known as a relational database management system, or RDBMS, this type of database(there are others - non-relational, graph, etc.) stores multiple collections of related data entries.

The collections are called tables. Much like the tables that you can insert into a data processing document, a database table consists of columns and rows. In this case, rows are called records.

What does SQL do?

SQL can define and manipulate both tables and databases, send queries to RDBMS & retrieve the specified data, control user access privileges, and control the version of the data.

Who uses it?

SQL skills are particularly useful if you are interested in careers that focus on data science or analysis, database administration, or database design & architecture. But web developers also use RDBMS & SQL -- alongside several other programming languages -- quite often to create websites that need or produce lots of data.

Amazon's subsidiary AWS, gives an example of why SQL is popular:

[..] developers learn and use SQL because it integrates well with different programming languages. For example, they can embed SQL queries with the Java programming language to build high-performing data processing applications with major SQL database systems such as Oracle or MS SQL Server."

-- 'What is SQL (Structured Query Language)?'

What can you write with SQL?

Basic components of SQL are easy to learn due to their simplicity, and are categorized as commands, statements, queries; more complex components include stored procedures, and user-defined functions. Since this article is a simple introduction to SQL, it will not cover the more advanced components, but suffice it to say there are plenty of resources out there if you want to learn more!

Here are some simple definitions and corresponding examples of basic SQL components:

Commands - reserved keywords that communicate broad directives

CREATE TABLE;  // creates a table
REVOKE james3_user;  // revokes a user's access privilege

Statements - commands with additional descriptive language elements, including functions and conditionals

SET first_name = 'Gabriel';  // sets a user's first name to Gabriel

Queries - a group of statements and keywords

UPDATE User  
SET first_name = 'Jabriel'
WHERE first_name = 'Gabriel'
COMMIT; 
 // updates the spelling of all users whose first name is Gabriel

SELECT first_name, age
FROM wagstaff_students
WHERE age < 17 && age > 15; 
// selects the name and age for all students whose age between 15 and 17

How do you write it?

The main things to remember about SQL syntax are:

A semicolon always ends a command or a statement
Statements are NOT case-sensitive, although writing keywords/commands in upper-case, & column/row names in lower-case is expected

SELECT * FROM wagstaff_students;
// selects all of the contents of a table called wagstaff_students

Conclusion

I hope this article has helped you understand and appreciate the fundamentals of SQL. To summarize, SQL is a popular programming language specifically created to interact with databases that store relational data.

Because it's been around for so long, SQL can be used alongside many different front-end and back-end programming languages, as well as different open-source and corporate-owned relational database management systems.

It is useful for anyone learning full-stack web development or data structures and analysis, and is quite easy to learn considering the simplicity of its commands and statements.

Photo Credit: Photo by Mark Boss @ Unsplash

Accessible Image Description: Person leaning on fence inside building

Lexical vs. In-Memory Scope in JavaScript

Gabrielle J. — Fri, 05 May 2023 19:39:12 +0000

In programming, the concepts of lexical and in-memory scopes are two important tenets used to determine where a variable can be used in a program. Every programming language has its own scoping rules – this article covers JavaScript’s rules.

Lexical Scope

A very efficient definition of scope is laid out by Oluwatobi Sofela:

Scope refers to the area where an item (such as a function or variable) is visible and accessible to other code.

An item is said to be lexically scoped when it's first declared. In other words, its accessibility is created at the same time it is created. Lexical scoping can help to avoid naming conflicts, and it keeps variables localized to where they are needed.

var hasLexicalScope;   // a variable

function example(){
  console.log('I have lexical scope as well')
}   // a function declaration

Within the category of lexical scope, there are three sub-categories:

block scope (think, a conditional or a loop)
function scope
global scope

Variables defined in either a block of code or a function declaration can only be used in that block or function, because that's the area where they were created. Any attempt otherwise, will result in a reference error.

Conversely, if a variable is not block- or function-scoped, it has global scope -- it is accessible from anywhere in its program.

let isGloballyScoped = "example";
console.log(isGloballyScoped); // prints example


function isFunctionScoped() {
  let message = "I can only be accessed from inside my 
  function !";
}
console.log(message); // prints Reference Error: message is 
not defined 


if (1 === 2) {
  var isBlockScoped = "I can only be accessed from inside 
  my code block!";
}
console.log(isBlockScoped); // prints Reference Error:
isBlockScoped is not defined

In-Memory Scope

In-memory scope refers to the availability of a variable or function while it's being executed. This means, that when a function or a variable is running, its information is temporarily stored in memory, in a structure referred to as an execution context. In-memory scoping can make it easier to share data between different parts of the code.

If you've heard the term call-stack, you already known what an execution context is!

A variable can be accessed from any part of the code that is called by the same execution context. It's important to note that every time a function is called, a new execution context is created.

function outer() {
  const message = "Hello, world!";

  function inner() {
    console.log(message); // This will also log "Hello, world!"
  }

  setTimeout(inner, 1000); 
}

outer();

In this example, the variable message is still declared inside the outer function, but it is also accessible inside the inner function, which is called by the setTimeout function after a delay of 1000 milliseconds. Since inner is called by the same call stack as outer, it can access the message variable even though it is not in its lexical scope.

To sum up, the main difference between lexical and in-memory scope is that lexical scoping is determined at compile-time and remains fixed at runtime, whereas in-memory scoping is determined at runtime and can be changed during the execution of the program.

I hope this article has provided you clarity on this crucial topic in computing, & thank you for reading!

Photo by Tim Mossholder from Pexels

Conditional Statements: A Quick Intro

Gabrielle J. — Fri, 10 Mar 2023 16:48:27 +0000

Image Description: Photo by Sivani Bandaru on Unsplash

Think back to all of the police procedural dramas you may have binged on...the one thing that always gets the criminal to confess is the detective's line of questioning. The questions flow in a logical, controlled manner, slowly narrowing what the criminal can truthfully speak to.

With conditional statements, you can mirror your favorite detective's method of manually controlling the flow of what JavaScript should evaluate next.

This post covers the most basic of conditionals -- if...else statements and switch statements.

If...else statements

There are three stages to if...else statements.

The first stage is an if-statement. It says if the code you write resolves to true, then execute the code block attached to the statement.

Here is an example of this process in action:

let x = "Sunday";

// if x equals either Monday or Tuesday,
if(x === "Monday" || x === "Tuesday"){

//execute this code
  console.log("It's the start of the week.");
}

If the if-statement evaluates to false, a new condition and code block are outlined in the else-if statement.

Although there can only be one if-statement, you can write many else-if statements depending on your line of questioning.

The else-if statement follows the same logic as the if-statement.

//else if x equals Wednesday or Thursday,
else if(x === "Wednesday" || x === "Thursday"){

//execute this code
  console.log("It's the middle of the week.");
}

The final statement, the else statement, provides a set of instructions to be executed in the event that all statements before it evaluate to false.

//if all else fails, execute this code
else{
  console.log("It's the weekend, I'm taking a break!");
}

Switch Statements

Based on whether the conditions are true or false, a switch statement can present many different conditions and instructions to follow.

Read the code below to get a step-by-step example of a switch statement’s structure.

let y = "cerulean blue";

// the variable y is an expression that the statement will try to match with each case 
switch(y){

//if y matches this case,
  case "vermilion":

//execute this code
    console.log("These are half off!");

//break statements stop the evaluation, and point JavaScript towards the next case 
    break;

//you can group cases together if you want them to produce the same outcome
  case "black":
  case "forest green": 
    console.log(`Do you mean this one?`)
    break;
  case "cerulean blue":
    console.log("Is this it?");
    break;

//default statements serve the same purpose as the else statement - if all else fails,       
  default:
    //execute this code
    console.log("Sorry, we're out of stock in that color!");
}

And that’s it!

Hopefully, this article has given you a quick and easy rundown of what conditional statements are – a line of controlled questioning developed by you, the developer, that allows JavaScript to take different actions based on its evaluation of the conditions you’ve given it.

I appreciate your time spent reading this, and if you have feedback, let me know!