DEV Community: hartsean

Simple Comments with GraphQL & Vue.js

hartsean — Sun, 31 May 2020 18:25:09 +0000

Lately I've been getting into new frameworks and experimenting with their features while comparing them to frameworks I'm familiar with. Vue.js has been both surprisingly comfortable and exciting to learn and alongside my team, who were also relatively new to Vue, sought out to build simple common components from scratch in Vue rather than rely on too many outside libraries.

The app required a fully realized social networking aspect, so rather than user 3rd party services we thought it would be a great exercise to dive deeper into what Vue can do given its purposely minimal out of the box functionality. After making an auth system, I set out to implement the like feature and the comments feature which provided a few interesting coding tidbits I'd like to share today.

First I made a folder called comments in the src/components folder where others had been placing their files. We had chosen graphQL to build out our api, and knowing that making a query or mutation in graphQL can be somewhat lengthy, I went ahead and made 2 other files to give a little head room in the file size and overall file structure. So a CommentList component provided to be rendered on every post, that loads a single comment component, which inside of it contains the comment submit component. My queries happen on the submit, but by abstracting it two levels, my CommentsList component simply passes down and holds the structure of the collapsible divs to be toggled. The single comment can load the input and submit button's component, and give a fresh DOM slate for fine tuning style and alignment of the actual comment material.

As for the code, let's take a look at the Comment Input component and what it's doing.

   <template>
     <b-container>
       <b-row>
         <form ref="form" @submit.stop.prevent="handleSubmit">

             <b-form-input
               squared
               class="input-sub"
               :id="song.id"
               v-model="commentText"
               :state="commentState"
               @keypress.enter="handleComment(myId, song.id)"
             ></b-form-input>

          </form>
           <b-button
             squared
             class="comment-submit"
             @click="handleComment(myId, song.id)"
          >
            submit
           </b-button>
       </b-row>
     </b-container>
   </template>

Here is the top half of the template containing the html markup to receive the input data.

Then I can make a method in the scripts section that corresponds to the above form arguments and calls a function addComment on the input data.

    handleSubmit(event) {
      event.preventDefault();
    },
    handleComment(userId, songId) {
      if (this.commentText) {
       this.addComment(userId, songId, this.commentText);
        this.commentText = '';
        this.commentState = null;
      } else {
        console.log('please enter a comment');
      }
    },

This will deal with all the front end needs, so we can now look how we set up or backend and with GraphQL/Postgres.

Having created a comment table in the database, I set out to make the insertion function addComment that I had called on the input data to be sent to the api for insertion then receive the updated data.

    addComment(userId, songId, text) {
      // console.log('like', likes);
      const query = `mutation {
      addComment(id_user: ${userId}, id_song: ${songId}, text: 
      "${text}") {
        id,
        text,
      }
    }`;
      request(`${process.env.NODE_ENV === 'development' ? 
       'http://localhost:8081' : ''}/api`, query)
        .then((res) => {
          this.newUserComment = res.addComment;
          this.$emit('new-comment');
        })
        .catch((err) => console.log(err));
    },

The addComment function is a method on the CommentInput component which has access to the form data in the live html page which is also conveniently located in the same file with Vue.

It takes a userID, a songId (we were building a music sharing app) and some text for the message. In graphQL, mutations are POST queries and are structured like Javascript Objects with arguments that return functions that return promises. Crafting these are visually familiar because of the object syntax and structure but also appear to be very versatile with their functional nature. In the api/ define our schema with the syntax seen below, which gives the type and structure of the expected data followed by our custom raw SQL statement.

  const {
    GraphQLObjectType, GraphQLString, GraphQLID, GraphQLInt, 
    GraphQLBoolean,
  } = require('graphql');
  const { GraphQLDateTime } = require('graphql-iso-date');
   ...
  exports.CommentType = new GraphQLObjectType({
   name: 'Comment',
   type: 'Query',
   fields: {
    id: { type: GraphQLID },
    id_user: { type: GraphQLID },
    id_song: { type: GraphQLID },
    text: { type: GraphQLString },
    created_at: { type: GraphQLDateTime },
    username: { type: GraphQLString },
    url_avatar: { type: GraphQLString },
   },
  });

And here in the mutation file, we can create our mutation:

   addComment: {
      type: CommentType,
      args: {
        id: { type: GraphQLID },
        id_user: { type: GraphQLID },
        id_song: { type: GraphQLID },
        text: { type: GraphQLString },
      },
      resolve(parentValue, args) {
        const insertComment = 'INSERT INTO comment(id_user, id_song, text, created_at) VALUES ($1, $2, $3, now()) RETURNING id, text';
        return db.one(insertComment, [args.id_user, args.id_song, args.text])
          .then((data) => data)
          .catch((err) => { console.log('err', err); });
      },
    },

After successful connection, the resolve is called passing in our arguments, and the insert statement is declared and then returned using db.one function from graphQL. This can be called on the db with the query-string & arguments and will affect only one row. This will return a promise from the database with the id and text after successful insertion which we can then call in our then function to be used on the client's response object.

Having Vue's lightweight and super minimal but powerful functionality in its framework made this task end up looking concise and readable with just a few lines of code on each file and can easily be built out from here. Hoping this example conveys that you can use Vue successfully for rapid prototyping, and produce scalable and re-usable developer friendly code very efficiently.

An Event Loop Predicament

hartsean — Mon, 25 May 2020 13:39:37 +0000

This week I'd like to talk about a few things that have interested me about the event loop and it's importance when creating UI in JavaScript. I've been recently working on a front-end project (creating a web-audio drum sequencer using Tone.js audio library and Nexus UI for the instrument interface) made with the Vue.js front-end framework. At first, thought, the task seemed deceptively simple, but upon implementation, I realized my naivety in thinking that it could be solved by simply 'looping' through an array of toggled buttons within a matrix (buttons that represent a instrument[x] and a point in time[y]) and calling particular functions that play certain sound at specified times.

I realized I was looking at it as a 'single threaded problem', partially because visually I had laid out in a 2D matrix of off an on switches, and imagined the execution of the code to be relative to the visual context. But, the construction of the actual working code was a little different. It needed to be asynchronous and event driven because when you select a button, you are choosing an option in a still un-determined future patterns, and the computer will not know what sound to make or pattern to play once all other functions have finished and the event has occurred.

Here's a look at the starting code:

   const sequencer = new Nexus.Sequencer('#target',{
     size: [400,200],
     mode: 'toggle',
     rows: 2,
     columns: 10,
   });

Calling the sequencer (as we do when we create createSound function and tie events to it) will append a nice little grid of toggle-able buttons to the page for us to start programming. But here's where the visual naive implementation was thought up, so we're going to dive a little deeper into the event loop first.

Because JavaScript is single threaded, meaning that one line of code must be executed and completed before the next line can be read, asynchronous code is not inherent to the language, but can be achieved by adding on functionality and using the event loop. Although the event loop is there, you have to create a situation for your-self where it can be utilized to create asynchronous functionality.

That's what made me realize I needed to re-arrange the order of my code to ensure that all functions would be called before the event loop could fire.

Here are the inner workings of the createSound function. A sequencer is built on the page when this function is called and these 2 events are defined and bound to the sequencer object. When ever a button is toggled, the on.change event is fired. Whenever the loop has started, the step event is played.

   sequencer.on('change', (v) => {

    if (v.row === 1) {
     this.instruments.push('snare');
    }
    if (v.row === 2) {
     this.instruments.push('bass');
    }
   });
   sequencer.on('step', (v) => {
     for (let i = 0; i <= v.length; i++) {
       if (v[i]) {
         this.players[this.instruments[i]].start();
       }
      }
   });
   this.instruments = [];
   this.sequencer = sequencer;

Each time a button is toggled, an instrument is pushed to the instruments array stored in the app's shared state property 'instruments'. Each sequencer is already set up to move column by column every few seconds, so when that time happens, the step event is called and only then does it loop through whatever is in state at that moment, and fires those functions, and clears the state.

I hope this was an interesting context to view and understand the basics of the event loop. My next post will be even more in depth look at the sequencer object itself, and a full demo of a working built out, event driven digital instrument built entirely with JavaScript.

A brief history of PHP

hartsean — Mon, 18 May 2020 13:19:57 +0000

PHP was my first introduction to any Programming language. In retrospect, it was a good introduction, and many of the concepts I picked up in my 'Advanced Music Tech' class that for some reason focused on PHP primarily and had us making dynamic webpages for musicians and a soundcloud-esque music player, have been extremely helpful in learning new languages and coding other types of programs. Today I want to talk about the history behind PHP, as well as some general use cases and code examples.

PHP is a scripting language that was created in 1994 by Rasmus Lerdorf. Originally, he has written some programs in C to perform some actions on his static website he had created for himself on the newly burgeoning internet. In doing so, he had unintentionally laid the foundation for new programming language, one that's purpose was primarily to interact with the servers and databases used to house his static files, and bring more life to the static sites that were the status quo of the internet at the time.

PHP stands for 'HyperText Pre-Processor' which is a recursive algorithm. Not only was this term coined by one of my favorite authors Douglas Hofstadter, but the recursive algorithm naming convention was a programming inside joke at the time PHP was created, and more of these 'jokes' a.k.a not to helpful when learning the definitions of things are found in the PHP code base and name.

PHP is scripting language, and it serves a wide range or purposes. Originally intended to handle form data on static websites, it has been developed to become its own programming language used to interact with databases and servers.

It can be embedded in HTML. Inside a normal HTML document, you can execute php code by adding the tags:

..some php
?>

..some html

<?php
...some more php
?>

It is a loosely typed language. Meaning that you don't have to specify the datatype when you are declaring or executing variables in the code. This makes it actually a little easier for beginners to pick up, as you don't have to be exactly specific about using common datatypes and it cleans up the syntax a great bit. However, you can opt in to this feature which is required in other programming languages such as C.

Here's some examples to get an idea of the syntax:

<?php
function printRole($a, $b) {
$role = "Student";
echo "{$a} + {$b}, is currently a {$role}";
}
?>
...SOME HTML
<?php 
printRole(‘John’, ‘Smith’);
?>

Another useful feature is that arbitrary code can be executed via the Command Line Interface. Also, PHP Can be used on any operating system or database, because it's been around forever and has become the standard. Most servers these days have a PHP interpreter module.

Hoping this article can serve as jumping off point in deciding what and why you would want to use this now classic programming language.

Contiguous Array Sum

hartsean — Mon, 11 May 2020 13:14:41 +0000

Hello! Today I'm going to to take you through an interesting toy problem that has known to show up in coding interviews. The goal is to create a function called contiguous or maximum array sum, that takes in an array of any size containing both positive and negative integers, and outputs the largest sum of contiguous numbers, which could be a single number or a series of numbers in the array.

What's interesting about this problem is that it can be solved surprisingly fast (magic) using a key principle that is found all across the wide world of programming. The key is to solve the larger big-picture problem by breaking it down into the smallest possible example of the problem. While we aren't necessarily going to recurse in the solution, we use this principle to save computation time and avoid unnecessary calculations.If we can solve the problem in an optimal sub-structure, the
solution will remain the same in the larger example.

So to solve this problem, you must use an array of integers with mixed signs, as a an array of positive integers will always have the entire set as the largest contiguous sum.

The brute force method was what came to mind when I first saw this problem, which was checking every number with every other number and then comparing each sum to find the largest sum.

So here's our input:

[-1, 3, 3, 4, -2, 0]

A contiguous sub array can be any length, but it must be a subset of the original array and have the items in their respective order without any breaks.

And if we use Kadane's algorithm, we can get an O(n) solution rather than the quadratic time complexity the brute force method gives us. This algorithm saves the value of the previous contiguous sub array sum as the best sum, so that the current sum can be immediately compared to it during the initial loop through the number. Having to not compute the sum for the entire sub array each time, we can simply add the next number to the previous sum.

We loop through the numbers and keep track of the current and best sums,
and after the loop passes one time, we can deduce our answer for this problem.

And here's the final code solution:

let currentSum = 0;
  let bestSum = nums[0];

  nums.forEach(num => {
    currentSum = Math.max(num, currentSum + num);
    bestSum = Math.max(bestSum, currentSum);
  });

  return bestSum;

Introduction to Nuxt.js

hartsean — Mon, 04 May 2020 03:04:20 +0000

                                      :-:
                                    .==-+:
                                   .==. :+- .-=-
                                  .==.   :==++-+=.
                                 :==.     -**: :+=.
                                :+-      :*+++. .++.
                               :+-      -*= .++: .=+.
                              -+:      =*-   .+*: .=+:

Hello, I'd like to introduce you to Nuxt.js, a Javascript framework that can be used to create powerful full stack applications very quickly assembled with a wide variety of options while maintaining best practices and scalability.

With a few easy steps, you can get a production ready app in minutes, and Nuxt.js will automatically configure your app with provided options to essentially any specification. Let's take a look.

First, make sure you are familiar with HTML and Javascript fundamentals, because Nuxt.js is built on top of Vue.js another Javascript framework. Vue.js was created to allow javascript markup to co-exist with html, and uses a component based architecture to load new or updated information to the screen dynamically.

Vue.js solves the same problems that React does for front-end development, but in very different ways which means they could have different use cases in a variety of scenarios. It's ultimately up to you to decide which one is better suited to your needs, so hopefully this article will explain some pros and cons that Vue.js/Nuxt.js will have for your consideration, especially if you are already familiar with React.

To install, you can use NPM or Yarn, which will install the Nuxt.js package to your project folder.

npx -v

check version and/or install npm

npx create-nuxt-app record-shop

create your project

When you run the create command, the console will prompt you with options for your app build specifications. You can choose a front end UI framework, server-side framework, middleware, routing, etc. Or you can click through and start from scratch, because Vue.js/Nuxt.js are designed to be open ended and versatile to suite any project. This trait also allows Vue.js apps to be integrated into an existing project with east.

For my demo, I chose the following settings:

? Project name Record Shop
? Project description
? Author name hartsean
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Bulma
? Choose custom server framework Fastify

Once you've chosen the settings the app will install. Once the app in installed type:

cd record-shop

cd into project directory

npm run dev

Start Development Servers

Keep in mind that Vue is meant to be lightweight and un-configured for a reason, and that is to allow the developer complete control on deciding the structure and functionality of every asset of the application. For beginners or if you are seeking a more streamlined development process(Vue.js can be hard to set up from scratch) Nuxt.js fills that gap by optimizing Vue.js's native speed using pre-rendered html, and code splitting that loads only the needed javascript.

Nuxt.js is indexed by search, so will perform better in search engine's than a standard Vue.js build. It comes pre configured with Vue Router and Vue-meta, and Vuex, which are not included by default with Vue.

Vue also has no standard file structure, so Nuxt.js provides us with one as well. For routing, Nuxt.js gives you a pages folder, that will automatically set up routes when you place a single component file within it. Let's see how our build is doing in the console.

ℹ Preparing project for development                                   18:59:17
ℹ Initial build may take a while                                      18:59:17
✔ Builder initialized                                                 18:59:17
✔ Nuxt files generated                                                18:59:17

✔ Client
  Compiled successfully in 9.16s

✔ Server
  Compiled successfully in 9.49s

ℹ Waiting for file changes                                            18:59:28

 READY  Server listening on http://localhost:3000                     18:59:28

Succcess!

The app was generated and immediately available for development on my localhost. Time to add some code!

Why MySQL?

hartsean — Mon, 06 Apr 2020 02:10:33 +0000

MySQL is a structured query language relational database system designed to handle large amounts of data at high speeds, in all types of conceivable scenarios. Battle tested and used by organizations large and small to manage their digital information. It is flexible and integratabtle into most established applications. It's an extremely useful database system.

MySQL uses queries for retrieving a piece of data from a table in a database.

Let's look at the SELECT keyword as it is one of the many queries you can make in MYSQL.

SELECT * FROM users WHERE name = 'John' AND age < 30;

The select key word can be used to get values stored in the database. Other query keywords can be used to narrow down your search.
MySQL employs a Shared-Nothing Architecture. In this format, each node where a value is stored is independent of other nodes, giving the data structure a powerful durability. If a node fails in some way, or part of a query fails for example, the rest of the program and subsequent information is not affected and can still run.

MySQL also offers a query caching feature. A query itself will be stored in a table alongside its resulting value in a cache. When tables receive multiple identical queries the value can be returned when matching query is received, rather than reading and running another query operation. This increases speed and performance and works best when working with tables that do not fluctuate too much. This speed is kept when scaled upwards because of the unique relational nature of MySQL. This technique is one of the many reasons MySQL is a great choice for creating and managing your databases.

Angular JS Getters and Setters

hartsean — Mon, 30 Mar 2020 12:10:13 +0000

Angular JS is a front end framework that supports the MVC architecture design pattern. Within this framework, the model is changed by a controller who in turn tells the view what has changed in order to render an updated DOM, which in turn takes in data to be read again by the controller. Today I'll talk a little about Angular JS's getter and setter methods, how they are useful, and some warnings to heed.

Angular JS gives us a few ways to bind data being passed down through the modules of our program. Getters and setters are methods in Angular JS for taking some user input in the DOM and within our controller, retrieve and/or update the model with a passed in argument.
A getter method is just a function that returns a property on an object. The getter and setter is bound directly to the ng-model rather than a directive or using the bindings object. This is a great way to make various changes to requests within the controller that will be passed to the model with specific intentions.

Consider a user model. The form below takes in a username, that user name is passed to the model using a getter and setter, which uses its value as an argument to the options directive.

<div ng-controller="example-form-view">
 <form name="new-user">
   <label>Choose Name:
     <input type="text" name="userName"
          ng-model="user.name"
          ng-model-options="{ getterSetter: 'hartsean' }" />
   </label>
 </form>
 <pre>user.name = <span ng-bind="user.name()"></span></pre>
</div>

This is a way to access variables not in scope, and to manipulate the data being passed in to the view with arguments at call time. Although the above code seems fine and normal, as the getter and setter is performing a specific and necessary task for this context, it can become unwieldy in different forms.

The reason we use modular code and keep our code DRY as well as the point of having scope, is to keep our code private and functional. If there is more structure and intention built in to your app, you will probably rely less on getters and setters, as they can become cumbersome, and hard to trackdown and add complexity to the flow of logic on your app. Hiding a way an object gets manipulated is a principle that gets broken with this approach to handling the incoming data, but it's great to have the ability to get and set values on a model when needed.

jQuery Inheritance

hartsean — Mon, 23 Mar 2020 16:47:07 +0000

Since the arrival of jQuery in 2005, client side web applications have grown substantially more dedicated to taking advantage of the newly popularized paradigm wherein javascript based interactions with the user trigger the modification of data presented on the screen.

Today, 75% of websites on the internet are using jQuery and practically all of the most popular websites in the world are heavily reliant on Javascript to perform their functions. Inheritance has been a concept so infused with classical object oriented programming that it doesn't at first glance appear to go hand in hand purely functional javascript and the realities of client side architecture. But, Inheritance is by nature a proven characteristic of data models that are widely used and distributed to perform required tasks more efficiently and sustainably in a given environment or across networks.

Here are some example of how jQuery uses inheritance to expand its usefulness as client side manipulator of data.

$(document).ready(function(){

function Character(name, job) {
this.name = name;
this.job = job;
}

Character.prototype.sayHey = function () {
return this.name + " says hello";
};

var sean = new Character("sean", false);
sean.sayHey();

$(".test").append("

Hello World!")
$(".tClass").css("color", "green");

$("input").focus(function(){
$(this).css("background-color", "cornflower-blue");
});

});