DEV Community: allyn

Vue.js

allyn — Sun, 23 Jun 2024 20:40:45 +0000

Introduction

Vue.js is a JavaScript framework used for creating user interfaces. Using Vue.js, you can create components to efficiently build your program and enhance HTML with the template syntax provided that reflects the state of your component. When your state changes, Vue will automatically update the DOM upon said change. Let's go over the basics.

There are many ways to create components for your Vue projects and one way to do it is to develop single-file components, or SFCs. These SFCs contain all of the logic for the component with JS, the template with HTML, and the styling with CSS all in the same file. Vue SFCs use a *.vue file extension and are the recommended way to create Vue components.

Starting your Vue application

All Vue applications start out with an application instance that you get from invoking the createApp function. The createApp function takes an object for an argument that will be the root component of the application. Normally with SFCs, you can import the component you intend to have as your root component, and you pass that as your argument to createApp, similarly to how one would with an application using React.

Viewing your Vue application

Once you have your application instance, you'll need to be able to view your application. To do this, Vue provides the mount method that renders your application instance. The mount method's argument will either be a selector string or a DOM element, and the root component will be rendered inside the argument. One of the caveats of the mount method is that you should only invoke it once your application is totally configured and assets are fully registered.

The application instance

The application instance is more than just a return value of createApp; it allows you to add functionality across your entire application. One of the perks of the application instance is the config object that allows you to set up "app-level options", and the application instance provides a way to create assets for your application. As mentioned before, any assets or additional functionality you want to provide to your application must be done before mounting the app.

Templating

Vue templates are based on HTML and are comparable to AngularJS templates in how they "extend" the HTML syntax and are used to reflect the component's data to the client. Behind the scenes, Vue compiles the templates figures out the fewest components needed for a re-render, and manipulates the DOM on app state changes as minimally as possible.

For developers who like to use JSX in their applications, Vue supports JSX. You can write render functions with JSX instead of templates, however, you run the risk of compromising the compile-time of your components.

Data Binding

There are 2 forms of data binding in Vue: text interpolation and attribute bindings. Text interpolation, or "Mustache syntax", in Vue uses double curly braces in between HTML tags. The data inside the double curly braces will be interpreted and evaluated in plain text. Attribute bindings are used with the v-bind directive. The v-bind directive takes an argument, likely an HTML attribute, and will bind the value of that attribute to the component's specified property or any other specified value.

Directives

Directives are used to apply updates to the DOM and add special behavior to DOM elements. These directives are put inside the DOM element with the attributes and are prefixed with v-. Directives can perform a number of different operations, like looping, registering event handlers, updating HTML text, and many more. The syntax for a directive looks like this:

<element v-directive:argument="value" > ... </element>

Vue also provides syntactic sugar for their v-bind and v-on directives. The shorthand syntax for v-bind lets you omit v-bind and only use the colon with the argument and its value following right after.

<element :argument="value"> ... </element>

Or if you have the argument has the same name as the value it is being bound to, you also can shorten the directive even more.

<element :argument> ... </element>

The v-on directive is used to register event handlers to DOM elements and the shorthand for v-on uses the @ instead of the colon to come before arguments.

<element @argument> ... </element>

You have probably noticed by now that the arguments for these directives are static, but Vue provides a way for you to use dynamic arguments. These arguments are still prefixed by the colon but are wrapped in square brackets, and they come with a couple of constraints. Dynamic arguments are supposed to evaluate either to a string or null; if the argument is evaluated as null, this can remove your binding. Also, even if your argument evaluates to a string, the string must be able to be a valid HTML attribute, since that is what the argument of directives is, meaning using some characters will throw warnings. You should also be mindful of the casing of your dynamic argument because the browser will adjust the casing behind the scenes and the code will not work as you expect.

Vue allows you to customize your directives with modifiers that specify how the directive should be bound. Modifiers are attached to the directives argument with a dot.

This encapsulates the complete directive syntax for Vue applications.

<element v-directive:argument.modifier="value"> ... </element>

Vue provides lifecycle hooks as well for your application. These hooks cover the basic parts of the lifecycle, mounting, updating, unmounting, and since all Vue applications aren't server-side applications, there are hooks for other use cases of Vue.

Conclusion

Vue provides a streamlined way to create dynamic and interactive user interfaces for applications and I look forward to using Vue in the future.

Prisma ORM

allyn — Sun, 09 Jun 2024 20:08:19 +0000

Introduction

Prisma ORM is an open-source ORM made up of 3 parts: Prisma Client, Prisma Migrate, and Prisma Studio. Prisma Client is an auto-generated, type-safe database client for Node.js and TypeScript. Prisma Migrate is a migration system, and Prisma Studio is an interface to view and manipulate data in the database. As an ORM, Prisma ORM supports databases like MongoDB, PostreSQL, MySQL, and many more. Upon installation of Prisma, you have access to the Prisma CLI, which is how you will mainly interact with your Prisma project. All Prisma projects start off with a schema before any of the main components are utilized, so let's start with the Prisma schema.

Prisma Schema

We know that Prisma is not a database, but an ORM, which is a tool to "translate" the data in the database to the developer. We also know that Prisma supports many different databases, which vary in syntax and structure/architecture. This is where the Prisma schema comes in.

Your Prisma schema, made up of models, reflects your database schema and acts as a proxy database. These schemas are written inside a schema.prisma file and contain a connection to the database via datasource and a generator that 'indicates that you want to generate a Prisma Client'. Data models take up the most space in the Prisma schema because they represent the tables or collections in databases, and they act as the base of the Prisma Client. Prisma gives you 2 workflows to create these models: Prisma Migrate and introspection.

Introspection

Introspection is defined as a "program's ability to examine the type or properties at run time". In the context of Prisma, introspection is when the program reads your database schema and generates your Prisma schema based on your database schema. Introspection is commonly used for an initial version of the Prisma schema, however, it can be used repeatedly, mainly when Prisma Migrate is not being used. If there are any changes to either schema, you can use introspection to ensure that both your database schema and Prisma schema are congruent. The workflow using introspection uses commands like prisma db pull and prisma db push that allow for said congruency in your project.

The workflow for introspection will follow, per Prisma's documentation.

Prisma Migrate

Prisma Migrate is used to synchronize your Prisma schema and database schema as either one evolves. One of the main uses of Prisma Migrate is to ensure updates to your Prisma schema are reflected in your database schema, and this is done by using the migrate commands from the Prisma CLI. The objective of the commands under the Prisma Migrate umbrella of the Prisma CLI is to apply and resolve migrations, or updates, to the Prisma schema. Also as a result of creating a migration, SQL migration files are generated which act as a documented history of changes to the schema.

Let's look at the prisma migrate dev command which will be one of the main prisma migrate commands.

The prisma migrate dev command will rerun the existing migration history on a "shadow database" to detect schema drift, which are changes and deletions of migration files or changes made directly to the database schema. The shadow database is a second, temporary database used to detect issues in your migrations. Shadow databases have a lifespan of however long the prisma migrate dev, meaning they are created every time the command is run and is deleted once the command is complete. Pending migrations are applied and thus generate a new migration file, documenting what changes were made to the database and warnings if applicable.

/*
  Warnings:

  - You are about to drop the column `artistId` on the `Album` table. All the data in the column will be lost.
  - You are about to drop the column `name` on the `Album` table. All the data in the column will be lost.
  - Added the required column `albumName` to the `Album` table without a default value. This is not possible if the table is not empty.
  - Added the required column `artistName` to the `Album` table without a default value. This is not possible if the table is not empty.

*/
-- DropForeignKey
ALTER TABLE `Album` DROP FOREIGN KEY `Album_artistId_fkey`;

-- AlterTable
ALTER TABLE `Album` DROP COLUMN `artistId`,
    DROP COLUMN `name`,
    ADD COLUMN `albumName` VARCHAR(191) NOT NULL,
    ADD COLUMN `artistName` VARCHAR(191) NOT NULL;

The code block above is an example of what a migration file consists of when you make changes to your schema.

Once you're content with the state of your database and ready to add records to your database, you can move on to using Prisma Client.

Prisma Client

Prisma Client is your database client built on your Prisma schema and is how you make queries to your database. In order to use your Prisma Client, you must run the prisma generate command in your terminal. after you run prisma generate, you should see this in your terminal.

✔ Generated Prisma Client (v5.15.0) to ./node_modules/@prisma/client in 45ms

Start using Prisma Client in Node.js (See: https://pris.ly/d/client)

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

You will receive a block of code you can copy and paste into whichever files you will be making queries to your database. This also shows a peek into how user-friendly Prisma is. The prisma generate command can also be used to solidify changes made to your database since this is how you'll interact with the data inside the database.

This will be put at the top of your file where you'll be making queries, with the rest of the import statements.

server/index.ts
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

Once you import your Prisma Client, you can now make queries with the prisma variable. The syntax for making queries is as follows:

prisma.<model>.<queryMethod>({})

According to Prisma's documentation, "all Prisma Client queries return plain old JavaScript objects", but these queries can be made asynchronous with async/await or using Promise methods like .then() and .catch().

Prisma Studio.

Prisma Studio is a "graphical user interface for you to view and edit your database" in the browser. It's important to note that Prisma Studio is not open-source.

Conclusion

Prisma ORM is a highly flexible and type-safe tool that makes interacting with your data in the database more transparent and streamlined for developers.

Step into TypeScript (part 1)

allyn — Mon, 27 May 2024 04:03:01 +0000

Continuing my exploration of JavaScript has led me into the world of TypeScript. TypeScript is a free, open-source, typed programming language that is a superset of JavaScript.

TypeScript was released in October 2012 with version 0.8 and developed by Microsoft. A superset of JavaScript, TypeScript knows JavaScript and adds additional syntax to make a more fortified application. Also, being built on JavaScript, TypeScript can be transpiled into JavaScript and perform type inference so you do not have to add any additional code. Type inference is defined as "the ability to deduce, either partially or fully automatically, the type of an expression at compile time," with 'type' referring to data types (i.e. 'string', 'number', etc.).

TypeScript focuses highly on data types, hence the name and enhanced syntax and features we will go over. One of these features is defining types with interface declaration. Interfaces, in TypeScript, act as contracts that enforce consistent assignment of types. Interface declaration can be compared to JavaScript's subclassing, in the sense that you establish the structure and/or type of something. All of your JavaScript code will not always be inferred, so you use interfaces to ensure that TypeScript knows what values are to be expected. Let's take a look at an example.

These examples are provided by TypeScript's documentation.

const user = {
  name: "Allyn",
  id: 0,
};

Here we have an object called user that has properties of name and id. The properties of name and id can be inferred as a string and number respectively, but there's a way to enforce that these properties are consistently strings and numbers.

interface User {
  name: string;
  id: number;
}

By using interface declaration, you can ensure that name will always be a string and id a number. Think of this User interface as a blueprint for user objects. To make sure that JavaScript follows this blueprint, we create an 'instance' of a type by adding : TypeName in between the variable name and the assignment operator.

const user: User = {
  name: "Allyn",
  id: 0,
};

From a JavaScript perspective, this is comparable to subclassing. In fact, you can use interface declaration for classes too, since both JavaScript and TypeScript support classes.

TypeScript can use primitive JavaScript data types in interfaces, which include: booleans, null, and undefined. TypeScript adds to this list with types like any, never, and void. The any type is to signify that there aren't any restrictions to what type can be assigned, the never type is to determine what type will never be assigned, and the void type is used for having no type at all, undefined, and is commonly used in the context of function return values.

Out of the box, TypeScript uses primitive data types, but what about complex data types such as collections? Fortunately, TypeScript allows you to create your own type. The 2 most popular ways to create types are with unions, which can be recognized with a pipe |, or with generics, following this syntax: <variable>.

Unions can be used when a type can be one out of many types and are commonly used for defining options out of a set. In this example, color can be one out of many colors, and spice can be one of many numbers.

const ColorOptions = "green" | "yellow" | "pink" | "black";
const SpiceOptions = 1 | 3 | 5 | 7;

Generics act as variables for types and are commonly used to describe what type an array contains. For example, this NamesArray will consist of strings. Take note of the type keyword that creates an alias for the type. In this case, NamesArray is the alias for the array type.

type NamesArray = Array<string>;

In this example, provided by the TypeScript documentation, you can use generics in conjunction with interfaces to create types that have a predetermined consistency.

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

// This line is a shortcut to tell TypeScript there is a
// constant called `backpack`, and to not worry about where it came from.
declare const backpack: Backpack<string>;

const object = backpack.get();

Let's go through this code line by line. We start off by creating a backpack interface that consists of 2 methods: add and get, both refer to the Type variable that will be filled in later when the interface gets used. Next, our backpack variable gets 'string' passed in, meaning the obj is a string and the get method returns a string since both refer to the Type variable.

From what we've gone over, we can see how essential data types are for TypeScript. We can see that the syntax follows closely to JavaScript but the use of the language shifts to hone on consistency and avoiding errors. In my next post, I will go over the Structural Type System, Classes, and how TypeScript can be compared to JavaScript.

Raspberry Pi

allyn — Mon, 22 Apr 2024 01:26:15 +0000

Increasing my time on the computer since learning software development has increased my curiosity about computers as a device. What makes a computer? How does a computer connect to the internet? What is the relationship between hardware and software? I came across Raspberry Pi and decided to explore what it is, how it is used, and what it is used for.

Raspberry Pi is a series of single-board computers created by the Raspberry Pi Foundation. When I searched what a Raspberry Pi was, what I saw did not look like the computers I was familiar with. That's because single-board computers are fully functioning computers built on a single circuit board. These boards have a microprocessor, input-output functions, and memory built on as well as a predetermined amount of RAM (Random Access Memory). Raspberry Pi computers are built on Arm architecture, which describes the rules for how the hardware and software interact. In addition to the Arm architecture, Raspberry Pi also utilizes the Linux operating system and includes amenities like general-purpose input-output pins that allow you to "explore the Internet of Things". IBM defines the Internet of Things as a "network of physical devices that have embedded sensors, software, and network connectivity that allow them to collect and share data".

Since 2012, Raspberry Pi has 3 series of computers with varying generations. Most generations have 2 models: Model A and Model B; Model A is more affordable but has less RAM and ports. The first original Raspberry Pi computer only had 256 megabytes of RAM. The latest edition, Raspberry Pi 5, has a 4 GB RAM option and an 8 GB RAM option, both are twice as powerful as the Raspberry Pi 4. To put it into perspective, 4 GB or 8GB is sufficient for browsing the web and web processing, per Lenovo, which is 15X more RAM than the original Raspberry Pi.

Pictured above is an [early Raspberry Pi 1 Model A]. (https://en.wikipedia.org/wiki/Raspberry_Pi).

Pictured above is a Raspberry Pi 5.

There are many options for projects you can choose with your Raspberry Pi that can help you learn computer science, machine learning, and programming. A common project is to build your PC but you can turn devices into smart devices with the GPIO pins that give you access to the Internet of Things. However, there are more adventurous avenues to take with your computer. Brad Chacos lists 10 projects you can do with your computer. You can set up a home-theater PC with the $35 original Raspberry Pi, and with the $21 TV accessory, you can read TV signals. Or you can turn your TV into a smart TV with Raspberry Pi 2 - 4, letting you browse the internet. Raspberry Pi computers are generally under $100, with the average being around $35, and the cheapest, Raspberry Pi Zero is $5, you don't burn holes in your pockets by investing in one.

Pictured above is the Raspberry Pi Zero, introduced in 2015.

Raspberry Pi's main supported operating system Pi OS (formerly known as Raspbian), is open-source and runs open-source software. If you're looking into programming your Raspberry Pi, Vibha Gupta lists programming languages that are better suited for it. The more popular options include, but are not limited to Python, C, and C++. But those of us who know JavaScript should fear not because Raspberry Pi supports JS and jQuery.

In conclusion, the single-board computer Raspberry Pi has a ton of might and versatility and is something I would like to explore as a software developer who doesn't know much about the technology she uses daily!

LeetCode

allyn — Sun, 14 Apr 2024 04:25:15 +0000

When I started learning software development last year, I heard the word "LeetCode" mentioned before but I never took it upon myself to look into it until now, as a more seasoned developer.

LeetCode is a platform and community centered around assessing technical proficiency and preparing for interviews for tech companies. The platform consists of over 2000 code problems ranging in difficulty and a multitude of discussions across the community. Founded in 2015, and becoming international in 2018, LeetCode has built a large community and impact in the industry.

With so many problems across the spectrum of difficulty, LeetCode provides coding assessments and exercises for beginners and advanced developers around the world. According to Jovitha Sukunthan, LeetCode supports Java, C, JavaScript, Ruby, Python, C++, and PHP to name a few. These problems cover algorithms, data structures, dynamic programming, SQL, AI, and databases. In addition to providing problems, the community provides solutions!

As developers, we know there are many ways to arrive at a solution when facing a problem while coding or implementing a new concept. In the discussion sector of LeetCode, solutions are shared for problems, allowing developers to compare the steps they took to get the same solution and explain their reasoning. With these discussions available, one can find a new skill to add to their toolbelt. Duncan McArdle shares that he was able to learn about Hash Maps from LeetCode discussions for a problem he solved and now knows to consider them as an option for drafting up solutions. That being said, posting your solution with your explanation can have a similar impact on developers like you in the future.

Another aspect of LeetCode is its use in the hiring process in the tech industry. Lots of large tech companies, including FAANG (Facebook, Amazon, Apple, Netflix, and Google), use problems from LeetCode in the hiring process. With a premium account, you can have access to some of the problems that might come up in the interview as well as the solutions people have provided. This allows Leetcode to be a good tool for interview preparation but producing a solution will not guarantee the position you are interviewing for. Part of the process focuses on your ability to "identify methods and apply concepts" instead of the actual answer you submit. With that being said, it might be better to reference the answers for recognizing patterns that might fare better with certain details of problems, than trying to remember the code someone posted.

Another way Leetcode can be used as an interview prep tool is that it provides mock interviews and mock code assessments. LeetCode can simulate real code assessments from companies like Google, Uber, Microsoft, and Adobe, with a premium membership of course. However, they do have options for their regular members that simulate different types of interviews.

In my research of learning about LeetCode, I wanted to know what companies were known for using LeetCode in their hiring process and there were more results for companies that do not use LeetCode and some admitting their displeasure for LeetCode altogether. Some of the posts described LeetCode as unorganized and alleged it was centered around memory-based learning. From what I saw in my research, I didn't see anything claiming that LeetCode would be an educating tool, but more so that it has resources available to introduce you to concepts that will push you to learn them. As far as the website being unorganized, in my brief time using it, I can only attest to the interface for the Problems section being "unorganized" because there doesn't seem to be any rhyme or reason with the display. However, I think this is something that could be overlooked by many. Another comment was directed at the limited access without a premium membership, I can also agree that the gap makes a difference in its effectiveness but this could vary based on the user's purpose for using LeetCode.

With so many opinions about LeetCode, I decided to try it out myself and see what it's like to solve a problem of theirs. The problem I chose was #2703 "Return Length of Arguments Passed" just to get a feel for the website and its features. It was an easy problem under the Javascript tag, where you are responsible for returning the number of arguments passed to the function. When you have the problem open, the solutions are available to you to look at as well as comments/discussions from members of the community. Upon submission, a graph shows where you fall in their range of runtime for submitted solutions.

Overall, I can see LeetCode can be useful to developers at any stage of their career. Despite its shortcomings, I believe that LeetCode can sharpen your technical skills as well as your interview skills. Having a community makes a world of a difference when trying something new, especially as adult learners who are heading in similar directions and I see the LeetCode community easing the growing pains of increasing your skills. If you are teaching yourself how to code, the Problems can be especially helpful in gauging your understanding of concepts. In summation, I think everyone who is breaking into tech and software development could benefit from using LeetCode in some way, shape, or form; whether it be for testing your proficiency, preparing for an interview, or connecting with other developers.

What is AngularJS?

allyn — Mon, 08 Apr 2024 03:44:41 +0000

As I dip my toe in JavaScript frameworks in my learning journey, I come across AngularJS. I had a very brief and unsuccessful run-in with AngularJS and with that failure, I decided to look into what AngularJS was to demystify it and get more comfortable with it. Since my journey of learning Javascript includes learning the many tools of the language, mainly jQuery, I will also be comparing the 2.

Before I get too deep in the weeds of this post, I'd like to insert distinctions between libraries and frameworks. Libraries provide functions that can be used when the developer feels the need to. Frameworks are implementations that have your code used for the details of said implementation. As part of learning the tools of JavaScript, I have come to learn the difference between libraries (jQuery) and frameworks (AngularJS).

AngularJS is a framework that is used to create dynamic web applications. It allows the developer to use an HTML template and "extend its syntax" to display the components of the app. More specifically, AngularJS allows the developer to create cleaner and reusable code for CRUD apps with features such as data binding, modules, and giving DOM elements specific behavior through the templates.

By adding AngularJS to your application, you will first have to create a module, which is essentially a container for your controllers and directives. You can have multiple angular modules in your application tailored to handle specific features or hold certain directives. When you load up your app, the modules inserted will pause the execution of the application to "resolve" dependencies. To create your module, you will call on the module with the module method, pass in a string of the name of your method, and an array that would point to any modules that the module you are creating depends on.

angular.module('myApp', []);

As I mentioned before, modules can contain controllers which can be defined as "a JavaScript constructor function that is used to augment the AngularJS Scope". The controller will define a new scope just like JavaScript functions normally do and with that scope, you can add behavior. This scope's syntax is $scope and is an object, a tangible function "scope" that you can add to. To create a controller, you call the controller method on the module created, pass in the string of the name of the controller, and an array of the initial state of the $scope object.

MyApp.controller('theController, [$scope, function(){}]

To add behavior to DOM elements, you have to add what is called directives to the DOM element that you want to adopt the behavior specified. These directives are inserted similarly to an HTML attribute and have a "ng" prefix.
<div ng-bind="context">
AngularJS comes with some built-in directives but you also can create your own. To create your own directive, you'll first have to have a module to attach it to. Applications can have many modules that handle various features. The general syntax of creating a directive is to give the directive a name and a callback function that describes the behavior.

angular.module('moduleName', [])
  .directive('directiveName', function() {
    // insert behavior
  });

The AngularJS documentation describes data binding as the "automatic synchronization of data between the model and view components," meaning when one component changes, these changes are updated across the board. The use of double curly braces {{}} is indicative of data binding in AngularJS that displays content from the model to the view. This can be used in place of the ng-bind directive.

Data binding and directive take away from the initialization process of JavaScript which makes for cleaner more succinct code. Instead of creating variables that point to various locations of the DOM and initializing dynamic functions that can be used in multiple locations of the web app, you can create the directive that contains the reusable function and insert the directive in the DOM element. Think of when only using JS and jQuery to create a dynamic web app, creating variables that point to DOM elements and writing functions that have sprinkled in jQuery. This can become redundant if you have components with similar needs.

One of the (personal) drawbacks of AngularJS is what comes with learning new frameworks and that is adjusting to the syntax/implementation of the framework. Personally, there is a learning curve with conforming to AngularJS. Another would be that AngularJS is not suitable for every web application. Since AngularJS simplifies the creation of CRUD applications, this means that if your application does not include CRUD programming such as games or business-based applications, AngularJS would not be needed. Also with the increase of abstraction, that means that your code becomes less flexible. As mentioned before, data binding synchronizes the model and view so when one changes, so does the other. This can become worrisome for beginner developers as a separation of concerns is removed.

AngularJS and jQuery share DOM manipulation to an extent so it may be difficult to discern when to use the 2. Since one is a framework and the other is a library, one might opt to use both but their closeness in front-end usage makes it difficult as well as unnecessary to use both. In a post by SynapseIndia, AngularJS would be the better option for large applications with a simple layout but complex structure whereas jQuery can be used for more overall simpler and smaller applications

Dive into ES6 pt. 2

allyn — Mon, 26 Feb 2024 12:55:41 +0000

In this post, we'll go over, generators, iterators, proxies, and reflections.

Generators.

Generators can be broken down conceptually into 2 parts; the function and the object. But as a whole, they are functions that can return multiple values sequentially. Let's take a look at the syntax first.

function* greeting () {
  yield 'Hello!';
  yield 'Good morning!';
  return 'Have a nice day!';
}

The reason why generators can be broken down into 2 parts is because when you make your function call, the code does not execute. Instead, it returns an object, known as the generator object, to handle execution. This object consists of 2 values; the value property which holds on to the returned value, and done which represents the completion status of the function with a boolean.

Let's dive a little deeper.

Since the call to the generator returns the generator object, how will we begin to execute the code? With the next() method! When you invoke the next() method, it runs the execution until it hits the first yield statement. Once we hit our yield, the function pauses and returns whatever value follows yield. In the example above the first call to greeting().next() will return "Hello!" and wait for the next call to greeting().next() to continue. This also updates our generator object. After the first call to greeting().next(), our generator object now looks like this.

{ value: 'Hello!', done: false }

The value property has its value from our yield statement and done has a value of false because our function isn't complete. Once our function hits the return statement, the done value will become true. Continuous calls to the next method will progress our function.

A feature of generators is generator composition which allows you to 'transparently "embed" generators in each other'. By using the yield* syntax, we're able to compose inner generators inside an outer generator. This also does not compromise memory to store the results.

Yield can not only return values, it can also receive them. You can pass arguments into the next method which will take the place of the yield statement.

Moving on to iterators.

According to MDN, an iterator can be defined as an object containing a "next() method that returns an object with two properties." This would make generators an iterator.

On to Proxies.

In plain English, proxies are something used to represent the value of another thing. In programming, proxies are objects used in place of another object. With proxies, you also can redefine essential object operations including getting and setting.

Proxies are created with 2 parameters: the target which is your focal object, and the handler which is an object of the operations you are redefining. The proxy object also acts as a prototype chain, meaning you can access properties from your target object and perform lookups.

Handlers are sometimes referred to as traps because they can "trap" certain operations. Let's take a look at this example from MDN.

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler2 = {
  get(target, prop, receiver) {
    return "world";
  },
};

const proxy2 = new Proxy(target, handler2);

When we try to access our target properties, what do you think will happen? If you have peered into data structures, specifically hash tables, you remember that JS objects are instances of hash tables, which means they come with getting and setting operations. Instead of calling get or set methods on objects, we use dot or bracket notation. So if we were to try to access our target object's properties, we would get 'world' back instead of the properties because we overwrote our get operation. This is a trap.

Finally, let's peak into Reflections.

Reflections are often used in conjunction with proxies because the Reflect object simplifies creating proxies. The Reflect object consists of static methods and cannot be constructed, like the Math object. These methods are named just like the methods one would redefine in a proxy. Reflections can save you from traps like our get method by allowing us to use default operations.

This concludes my dive into ES6. Happy coding!

Dive into ES6

allyn — Thu, 22 Feb 2024 06:51:26 +0000

I began learning JavaScript using the ES5 version to understand the fundamentals of the language. Once I got my feet wet with ES5, I was introduced to ES6. There were so many updates that I became too anxious to fully immerse myself into another level of JavaScript until recently. This will be part 1 of my learning journey of ES6. In this post, we’ll review Promises, destructuring, Modules, transpiling, and the spread and rest operators.

Starting with Modules.

Modules are collections of small independent units known as components. Components can be described as “everything that can be exported by the export statement that can be reused in our application” by Dler Ari in A Practical Guide to ES6 modules. These modules improve scalability which is the ability to adapt to large amounts of data without compromising performance and efficiency. By “encapsulating behavior”, debugging becomes easier to pinpoint. Modules allow a separation of concerns and give you the ability to import and export only the necessary modules for your functionality which keeps your code DRY (Don’t Repeat Yourself).

Next: Spread and Rest Operators.

Differentiating the two operators can be difficult considering they have identical syntax: ...value. The difference can be seen by examining the logic using the operator. Despite looking the same, the spread operator and rest operator are opposites of each other. The spread operator expands iterable values into a collection and the rest operator condenses the remaining values into a collection. On top of that, you can do a multitude of things with the spread operator; you can split strings into an array, copy values from collections into other collections, and pass function arguments. For the rest operator, you can reduce values into a condensed collection.

Moving on to destructuring.

To destructure is to extract values from arrays, and properties from objects, and store them in a variable. There are many uses for destructuring, such as swapping values or used as function parameters, but the main object of destructuring is accessing certain values in collections. Let’s start with the syntax for destructuring

At first glance, it appears to be the inverse operation for variable assignment which is close to what destructuring does behind the scenes. Depending on the collection you are destructuring, your variables will directly correspond with the collection’s values. If you are extracting from an array, the order of the variables will affect what element will be assigned to it; the first variable will be the value at the 0th index, the second variable will point to the 1st index, etc. When extracting from an object, the variable name will have to match the property’s key that you are targeting. Thankfully there’s a workaround for each of these issues.

The comma separator allows you to skip elements when destructing arrays. Keep the space empty between the commas to determine the element you want to skip over.

const campers = ['Lazlo', 'Clam', 'Raj', 'Lumpus']

const [duckDuck,,, goose] = campers;
console.log(goose); // Lumpus

If you wanted to assign a new variable to an object’s property but didn’t want it to have the same name as the property’s key, you could do just that.

const myCar = {
  color: 'red',
  year: 2004,
  hasGas: false
}

const { color : jetta } = myCar;
console.log(jetta); // red

You can also incorporate the rest operator in destructuring to stash leftover values.

const family = {
  daughter: 'Peppa',
  mother: 'Mummy Pig',
  father: 'Daddy Pig'
};

const { daughter, ...parents} = family;
console.log(parents); // {mother: 'Mummy Pig', father: 'Daddy Pig'}

Now let’s look at transpiling.

Aakarshit Giri said in his JavaScript Transpiler article, transpilers (aka transformation compilers) “convert code written in one programming language into another programming language while preserving the original functionality”. In other words, taking out ES6 code + converting it into ES6 so it can be read by all browsers/networks. Popular transpilers include Babel and Webpack. In this post, we’ll focus on Babel.

Babel transpiles versions of Javascript, mainly from ES6 into “backward compatible” versions suitable for browsers/environments. Made from plugins, Babel targets certain syntax and refactors the code to fit the desired version. For example, the @babel/plugin-transform-arrow-functions plugin targets arrow functions and transforms them into function expressions/definitions with the function keyword and maintains functionality. With that being said, you run the risk of having larger, less efficient code. However, that does not hinder your ability to write cleaner code.

And finally, we’re on to Promises.

MDN defines promises as an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. GeeksforGeeks likens promises to a receipt being that the receipt is a promise that you will receive your order and is a placeholder for your purchase. These promises came about as a means to avoid callback hell, which is excessive nesting of callback functions that increases the complexity of the code you’re writing and also makes it difficult to read and execute. Promises have a task that will be checked for success or failure and instructions on what to do depending on the execution of the task.

From reading that, one would infer that the instructions for the result of the operation would be callback functions and they are! Except they aren’t passed into functions, instead they are attached to the promise, like methods (which is what they are).

The callbacks you’ll chain to promises will either be .then() or .catch(). The then method handles both success and error callbacks and catch is used for error handling. You can use the then method for only telling the program what to do if the operation is completed because the second parameter is reserved for an optional error callback. But if all of your error handling for every step in the chain is the same, you can use catch at the end of the chain.

const myPromise = new Promise((resolve, reject) => {
  let a = false;
  setTimeout(() => {
    return (a) ? resolve('a is found!'): reject('sorry, no a');
  }, 300);
}); 

myPromise
.then(value => { console.log(value) })
.catch(err => { console.log(err) });

// 'sorry, no a'

In this example from Kingsley Ubah in his post about Promises, he provides a great example of what a promise chain looks like and its behavior. The code shows what the outcomes will be once the Promise is settled. Since myPromise rejects or fails, we know that the error will be logged to the console. A question that may come to mind is 'how do we reach the catch method?' and the answer to that is the then method will return a Promise regardless of its completion or failure. If we do not return a Promise, we won't be able to determine its status of completion, and that will lead to a multitude of errors.

These new features make accessing values more flexible, code more readable, and averts errors. This concludes part one of my deep dive into ES6 features. In my next post, I will go over generators, iterators, proxies, and reflections.

Ruby on Rails vs. JavaScript

allyn — Mon, 05 Feb 2024 14:16:31 +0000

Intro

As a beginner to software development, I want to explore the many different programming languages available. Today we’ll be taking a look at one of the most popular beginner friendly programming languages, Ruby on Rails. We’ll be looking at what RoR is, what it’s used for, it’s architecture, and how it compares to my main programming language, JavaScript.

What is Ruby on Rails?

In “What Is Ruby on Rails, And What Is It Used For?” Brad Mitchell describes RoR as ‘open-source full-stack framework software specifically to build different web applications.’ Ruby on Rails can be broken up into 2 parts: Ruby and Rails. Ruby is the all-around programming language and Rails is the framework that is utilized for web development and app creation. Ruby is a primarily back-end language but works with HTML, CSS, and JS for the front-end. This is due to the architecture of Ruby on Rails. One of the main reasons RoR is so popular is because a lot of the work is done for you and is simplified for the programmer. Ruby also have 2 philosophies to follow: DRY (“Don’t Repeat Yourself) and “convention over configuration” or CoC. CoC is to make programming easier as long as you follow the conventions of the language.

Ruby on Rails Architecture

Ruby on Rails follows the Model-View-Controller pattern. The model component interacts with the database and manages the data that will then be passed to the view component. Guessing from the name, this component pertains to anything that will be visible to the user. With the view component falling on the front end, we will incorporate HTML, CSS, and even Javascript into our code to make a dynamic and presentable website or application. Lastly is our controller component that ties everything together. The controller component “receives data from the model component and passes it to the view component” as said in ‘What is Ruby on Rails?’ by Ashish Thakur.

Let’s take a look at an example of a model in Ruby.

# == Schema Information
#
# Table name: users
#
#  id                  :integer          not null, primary key
#  aspiring_occupation :string
#  bio                 :string
#  display_name        :string
#  email               :string
#  employer            :string
#  occupation          :string
#  password_digest     :string
#  created_at          :datetime         not null
#  updated_at          :datetime         not null
#
class User < ApplicationRecord
  validates :email, :uniqueness => { :case_sensitive => false }
  validates :email, :presence => true
  has_secure_password

  has_many(:ai_messages, { :class_name => "AiMessage", :foreign_key => "user_id", :dependent => :destroy })

  def prompt
    <<~TEXT

    TEXT
  end

end

In the above image, we can see how simple it is to interact with the database. When I said that a lot of the work is done for me, this is a glimpse into that. I did not type most of that file. Majority is what was generated for me when I passed the data model code as a command in the terminal. When creating a User model, Ruby on Rails knows that we will need to verify the user's information so each User model will automatically know to verify the user when signing in.

<div class="my-3">
  <div>
    <h1 class="sr-only">
      Message details
    </h1>

    <div>
      <div>
        <a href="/ai_messages">
          Go back
        </a>
      </div>


    </div>
  </div>
</div>

<hr>

<div class="card" >
  <ul class="list-group">
    <li class="list-group-item"><%= @user_message.content %></li>
    <li class="list-group-item"><%= @assistant_message.content %></li>
  </ul>
  <div class="card-footer">
    <%= time_ago_in_words(@user_message.created_at) %> ago
  </div>
</div>

<hr>

<div class="my-3">
  <a href="/delete_ai_message/<%= @user_message.id %>">
    Delete Message
  </a>
</div>

Here in the view component, we have mainly HTML but instead of using script tags to have our backend interact with the front like we do in JS, we have embedded ruby tags that specify where exactly we want these pieces of memory to interact.

def create
    @user = User.new
    @user.email = params.fetch("query_email")
    @user.password = params.fetch("query_password")
    @user.password_confirmation = params.fetch("query_password_confirmation")
    @user.occupation = params.fetch("query_occupation")
    @user.bio = params.fetch("query_bio")
    @user.display_name = params.fetch("query_display_name")
    @user.employer = params.fetch("query_employer")
    @user.aspiring_occupation = params.fetch("query_aspiring_occupation")

    save_status = @user.save

    if save_status == true
      session[:user_id] = @user.id

      redirect_to("/ai_messages", { :notice => "User account created successfully."})
    else
      redirect_to("/user_sign_up", { :alert => @user.errors.full_messages.to_sentence })
    end
  end

In this controller component we can see how the model and view components intermingle. Certain aspects of our controller manage data from our model and direct to the view (look for the word ‘template’ followed by an arrow pointing to a html.erb file which is an HTML page with embedded ruby).

What is RoR used for?

Ruby on Rails can be used for making a multitude of programs, such as social network apps, content-management systems, and project management tools. Ruby has produce such versatile results with the help of RubyGems. Morganne Gagne describes Ruby gems as “open source libraries that contain Ruby code and are packaged with a little extra data” in her blog ‘What is a Ruby Gem?’. These can be compared to libraries like Moment.js, Underscore.js, or jQuery.

Ruby on Rails vs JavaScript

One of the biggest benefits of Ruby is how clear it is to read. Ruby is known for how easy it is to read and it’s built in framework that makes it easier for beginners to create web applications, but how does it compare to JavaScript?

RubyGems allow a lot of work to be simplified but one of the downsides of the gems is that some conflicts can arise. With an over reliance of Ruby gems, your gems can become incompatible. Gems are created by developers in the Ruby community so conflicts are a possibility. On the other hand, JavaScript libraries don’t have the issue of affecting the performance of another.

A huge difference between Ruby and Javascript is that Ruby is a compiled language while JavaScript is an interpreted language. Compiled languages translates the program into machine readable code. This can result in your program taking up a lot of memory. Interpreted languages produce a result from running the code, this means that you can run JS in your browser and see real time changes.

While Ruby on Rails is one of the most-popular amongst newbies, JavaScript is one of the most used programming languages across the world with “98.4% of websites using JavaScript”, stated by Zach Paruch.

Conclusion

Ruby on Rails is a great introduction to coding with clear syntax, simplified code conventions, an expansive library and interactive framework to show you the wonders of web development. In fact, Ruby on Rails was the first programming language I learned and the code examples you see are from my first application that I created only 3 months into coding. Ruby on Rails being my first language made programming less scary and learning JavaScript easier due to their similarities. I say all this to say that Ruby on Rails are not competitors but more like teammates and they have their own specific benefits that make them great for learning.

Higher Order Functions from a Big Brain

allyn — Tue, 09 Jan 2024 01:00:45 +0000

Higher order functions(HOFs) are a great way to simplify code when working with arrays. They iterate through the passed array for you and invoke the passed callback function to each iteration of the array. In addition, their return value varies depending on the HOF. You can slice the lines of code you have to write in half, making it more efficient for you.

The main idea with HOFs is that they do a lot of the work for you. The most you have to do is come up with the callback function that will be called on each element of the array. Since you will have an idea of what the contents of the array will be, writing the code becomes simpler because your parameter(s) be used to indicated the type of element(s) you will deal with. And with some of them, you can return a value that is not an array, such as an object, string, or number which can be even less code to write.

Starting off with the .forEach() method.

.forEach()

To help you visualize how .forEach() works, I'll give you an example of how it could be written.

forEach = (array, callback) => {
  for (let i = 0; i < array.length; i++){
    callback(array[i]);
  }
}

This method applies the callback method to each element of the array it is called on and is one of the functions that can return any data type, hence the lack of a return statement in the code.

const arr = ['Allyn', 'Nancy', 'Kelly'];

let forEachExample = arr.forEach((person) => {
  console.log(`Hello ${person}!`)
})

The result of this code does not return an array but instead, logs each element inside the arr array to the console.

Next is the .map() method.

.map()

The .map() method is very similar to .forEach() except it returns a new array that consists of the results from invoking the callback method on each element. Let's take a closer look.

map = (array, callback) => {
  var output = [];
  for (let i = 0; i < array.length; i++){
    output.push(callback(array[i]));
  }
  return output;
}

At a glance, .forEach() and .map() appear nearly identical but the difference is that .map() returns output, an array of the modified elements.

In this example, we'll use an array consisting of objects.

const cities = [
  {
    city: 'New Orleans',
    state: 'Louisiana',
  }, 
  {
    city: 'Chicago',
    state: 'Illinois',
  }, 
  {
    city: 'Los Angeles',
    state: 'California',
  }, 
  {
    city: 'Houston',
    state: 'Texas',
  }
];

let mappedCities = cities.map((place) => {
  return `${place.city}, ${place.state}`;
})

In this example, .map() acts on each element of the cities array and calls the callback function on each element and returns a new array with the modified elements from cities. If you were to log mappedCities, you would see that the cities array now consists of strings in place of the objects and formats the cities in a human-friendly way.

Up next: .filter()

.filter()

Similarly to .map(), .filter() returns an array that contains the return values from the callback function. Except that these values are not modified and they are only returned if their result after invoking the callback function is true.

filter = (array, callback) => {
  var output = [];
  for (let i = 0; i < array.length; i++){
    if (callback(array[i])){
      output.push(array[i]);
    }
  }
  return output;
}

Let's look at an example of how .filter() works.

const students = [
  {
    firstName: 'Sydney',
    grade: 88,
  }, 
  {
    firstName: 'Steve',
    grade: 74,
  }, 
  {
    firstName: 'Matthew',
    grade: 78,
  }, 
  {
    firstName: 'Chris',
    grade: 65,
  }, 
  {
    firstName: 'Patrick',
    grade: 70,
  }, 
  {
    firstName: 'Tyler',
    grade: 99,
  }
];

let over75 = students.filter((student) => student.grade > 75);

When we log over75 to the console, we see that the array is shorter than the students array. That's because over75 only consists of students whose grade was over 75.

On to the more complex HOF: .reduce

.reduce()

What sets .reduce() apart from the rest of these HOFs are the parameters. It takes in a callback function like the rest but there is an additional optional parameter, known as the seed or initial value, that determines what the return value will be and is the starting value of the function. However it can get a little more complicated.

reduce = (array, callback, seed) => {
  let output;
  if (seed === undefined) {
    output = array[0]
    for (let i = 1; i < array.length; i++){
      output = callback(seed, array[1]);
    }
  } else {
    for (let x = 0; x < array.length; x++) {
      output = callback(output, array[i]);
    }
  }
  return output;
}

The callback functions parameters can be referred to as the accumulator and the current value at call time. If an initial value parameter is provided, when the callback function is invoked, the accumulator holds on to the initial value and will determine the return value. If the initial value is not provided, the accumulator will point to the first item of the array. This leads to what the current value parameter will be. The current value parameter will point to the first value of the array if an initial value is not passed, if it is, the current value will point to the next element in the array.

The object of this function is to "reduce" the array into a single value.

Let's look at an example of calling .reduce() on an array without passing a seed.

let nums = [5, 10, 15, 20];

let sum = nums.reduce((acc, curr) => acc + curr);
console.log(sum);

The result of this code is the 50 which is the sum of all the elements of the array, meaning nums has been reduced to 1 number. Without having a seed value, .reduce() started at the first element, 5, which is why the return value is a number.

Now let's look at an example of calling .reduce() but with a seed value this time. For this example, we'll be using the students array from the .map() example.

const students = [
  {
    firstName: 'Sydney',
    grade: 88,
  }, 
  {
    firstName: 'Steve',
    grade: 74,
  }, 
  {
    firstName: 'Matthew',
    grade: 78,
  }, 
  {
    firstName: 'Chris',
    grade: 65,
  }, 
  {
    firstName: 'Patrick',
    grade: 70,
  }, 
  {
    firstName: 'Tyler',
    grade: 99,
  }
];

let studentGrades = students.reduce((acc, curr) => {
  acc.push(curr.grade);
  return acc;
}, []);

When you log studentGrades to the console, you see that instead of there being an array of objects, it's an array of just the grades from all the students.

From what we've seen in these examples, HOFs do a lot of the coding for you, leaving you to attach your HOF of choice to an array and only giving it specific directions as a function to do the work for you. In summation, HOFs can be used for sorting, modifying, filtering, and accumulating and make your code more flexible.