DEV Community: Ethan Gustafson

C - Basic Operators

Ethan Gustafson — Wed, 23 Dec 2020 04:45:52 +0000

int number = 10;

printf("This is the Postfix style: %d\n", number++);
// This is the Postfix style result: 10
printf("Now the variable number is assigned: %d\n", number);
// Now the variable number is assigned: 11

printf("This is the Prefix style result: %d\n", ++number);
// This is the Prefix style result: 12
printf("The variable number was already assigned: %d\n", number);
// The variable number was already assigned: 12

Assignment

Assignment Operators

Assignment operators use the Infix style. The values of the right operand are assigned to the left operand.

Numbers 1 - 6 are straight forward assignment operators. 7 & 8 are shift AND assignment operators. 9 - 11 are Bitwise assignment operators.

= - Assignment
+= - Add AND assignment
-= - Subtract AND assignment
*= - Multiply AND assignment
/= - Division AND assignment
%= - Modulus AND assignment
<<= - Left shift AND assignment
>>= - Right shift AND assignment
&= - Bitwise AND assignment
^= - Bitwise exclusive OR and assignment
|= - Bitwise inclusive OR and assignment

You would typically use these operators to store calculated values into variables without writing out the calculation yourself.

Arithmetic

Arithmetic Operators

Most of the arithmetic operators use the Infix style to perform calculations on two operands. Numbers 6 and 7 can use either the Prefix or Postfix style.

+ - Addition
- - Subtraction
* - Multiplication
\ - Division
% - Modulus
++ - Increment
-- - Decrement

int num = 1;

--num;

num++;

What is the difference in the increment/decrements 'fix' style? Running the operator before the variable num ensures the value incremented/decremented is assigned and returned right away.

Running the increment/decrement operator after the variable num will return the original value of the variable, and then assign the new value.

Logical

Logical Operators

Logical operators use the Infix style, except number 3, which uses the Prefix style. These are boolean operators that return a true or false value. They evaluate the two operands and run them against each other to test equality in some way.

&& - Logical AND (Returns true if both operands are true )
|| - Logical OR (Returns true if only one operand is true)
! - Logical NOT (Returns the inverse logical state of the operand it is being evoked on)

Relational

Relational Operators

Relational operators also use the Infix style.

== - if both operands are equal, return true.
!= - if the left operand is not equal to the right operand, return true
> - if the left operand is greater than the right operand, return true
< - if the left operand is less than the right operand, return true
>= - if the left operand is greater than or equal to the right operand, return true
<= - if the left operand is less than or equal to the right operand, return true

Bitwise

Bitwise Operators

Bitwise operators are a bit different. These operators operate on the bits in integer values. They're also different from Logical operators, as Logical operators will use two of these symbols whereas Bitwise will only use one.

They all use the Infix style, except for number 4. Number 4 uses the Postfix style.

& - Binary AND
| - Binary OR
^ - Binary XOR
~ - Binary One's Complement
<< - Binary Left Shift
>> - Binary Right Shift

I will go more in-depth on bitwise operators, operator precedence, plus other operators like cast and sizeof in the next few entries of this series. Thank you for reading!

What is the Clear Definition of an API?

Ethan Gustafson — Wed, 16 Dec 2020 04:52:31 +0000

When you search for the definition of an API online, there will be some very ambiguous results. I found myself and many others a bit confused when it came to the explanations provided.

I will explain a little bit of how various entities use the term API below but if you would just like the straight answer, jump here

What is an API?

As an overview, I was taught that an API is a way for one system to communicate with other external systems. Let's define more of what an API is.

The Wikipedia definition of an API is:

An Application Programming Interface (API) is a computing interface that defines interactions between multiple software intermediaries.

An Application is a program or a group of programs designed for an end-user (a user that is intended to use the application)
Programming is the process of creating a set of instructions that tell a computer how to perform a task.
An Interface is a shared boundary across which two or more separate components of a computer system exchange information.

You've probably seen various entities use the term API. Let's see some examples:

1.) React.js

At the very top of the page:

React is the entry point to the React library. If you load React from a script tag, these top-level APIs are available on the React global. If you use ES6 with npm, you can write import React from 'react'. If you use ES5 with npm, you can write var React = require('react').

2.) Ruby on Rails API

Ruby on Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

When you navigate to the GitHub link above for the Ruby on Rails repo and scroll down to the bottom, you'll see a link for the Ruby on Rails API Documentation.

API documentation is a technical content deliverable, containing instructions about how to effectively use and integrate with an API

3.) Graphql

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

4.) Google APIs

Google APIs are application programming interfaces developed by Google which allow communication with Google Services and their integration to other services.

5.) The Twitter API

The Twitter API enables programmatic access to Twitter in unique and advanced ways. Use it to analyze, learn from, and interact with Tweets, Direct Messages, users, and other key Twitter resources.

6.) Using Ruby on Rails as an API

Traditionally, when people said that they used Rails as an "API", they meant providing a programmatically accessible API alongside their web application.

In all of these cases, one entity interacted and outputted a result to a separate entity.

All the definitions and examples above still didn't give a straight forward answer as to what an API actually is.

The definition of an interface is a shared boundary across which two or more separate components of a computer system exchange information. Let's use React as an example.

What is React.js? A JavaScript library for building user interfaces.

A library is a collection of programs and software packages made generally available, often loaded, and stored on disk for immediate use.

A user interface is the space where interactions between humans and machines occur.

The graphical user interface (GUI) is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicators such as primary notation, instead of text-based user interfaces, typed command labels, or text navigation.

A command-line interface (CLI) processes commands to a computer program in the form of lines of text.

Essentially, React is used to create a way in which users can interact with the browser and/or other frameworks, such as Gatsby.js.

A web application (or web app) is application software that runs on a web server, unlike computer-based software programs that are run locally on the operating system (OS) of the device.

Web applications are accessed by the user through a web browser with an active internet connection.

Straight Forward API Definition

So what is the clear-cut definition of an API?

The Application Programming Interface is a programmatic interface. A programmatic interface is literally the code utilized in interacting with another program that has its own special methods, functions, and syntax.

For example, let's write a class component with React:

import React, { Component } from 'react';

export default class myComponent extends Component {
  render(){
    <h1>React Component Header</h1>
  }
}

React uses a declarative programming style. This means you programmatically declare what the program should do, but you don't explicitly define how the program will do it.

The React functions, methods, syntax, and rules for a component is the interface we utilized in order to interact with the browser. Component doesn't show us what it does under the hood.

The API of React is its syntax and features. You will use its syntax and features to interact with another program, typically the browser.

Thank you for reading!

C - Intro To Data Types & Variables

Ethan Gustafson — Wed, 09 Dec 2020 03:13:14 +0000

#include <stdio.h>

int main()
{
  signed int negativeNum = -10;
  signed short int smallerInt = 4;
  /* is the same as:

  int negativeNum = -10;
  short int smallerInt = 4;

  */ 

  printf("negativeNum: %d, smallerInt: %d\n", negativeNum, smallerInt);

  return 0;
}
// outputs: negativeNum: -10, smallerInt: 4

`unsigned`

The unsigned specifier specifies that the variable will only contain positive values.

#include <stdio.h>

int main()
{
  unsigned short int positiveShortNumber = 5;

  printf("positiveShortNumber: %d\n", positiveShortNumber);

  return 0;
}
// outputs: positiveShortNumber: 5

Final Note: Format Specifiers and the `printf()` Function

The printf() statement above in all the examples will output text to standard out (stdout). In order to use variable arguments to the printf() function, you must translate what the data type of the variable arguments are.

Format specifiers will be used to display variables as output. They begin with the percent symbol (%), followed by an argument specifying a data type. %d specifies that a variable will be of type int.

Read more on the printf() function, data types, escape characters, format specifiers and the standard input/output stream below. Thank you for reading!

Resources:

C - Program Structure

Ethan Gustafson — Wed, 02 Dec 2020 04:05:36 +0000

Big O Notation, Time & Space Complexity Overview

Ethan Gustafson — Wed, 25 Nov 2020 03:02:43 +0000

Rails 6 ActionCable Navigation & Turbolinks

Ethan Gustafson — Tue, 03 Nov 2020 12:26:25 +0000

ActionCable LifeCycle
- connection.rb
  - #connect
  - #disconnect
- channel.rb
- comments_channel.rb
  - #subscribed
  - #receive(data)
  - #unsubscribed
- javascript/channels/comments_channel.js
  - #connected()
  - #received(data)
  - #appendComment(data)
- Views
  - JavaScript TurboLinks
  - link_to
  - Visiting a URL

This is part two of navigating ActionCable. In the last blog, I configured ActionCable connections and channels. Streams could start, on the condition that there is a project param id in the URL.

But there was a big issue: Streams wouldn't start unless a user purposefully reloaded the page on a projects#show route. Users should be able to visit that route and have the stream start immediately.

What's going on? A stream must start based on whether or not it found a project instance. No Project.find_by_id method was called between page visits. Page visits didn't send requests to the server.

When are ActionCable methods called, and how can we make sure that those methods run when we need them to?

ActionCable LifeCycle

When a page loads, that is when ActionCable begins calling its methods. A request is sent to the server. A page-load is different than a page visit.

A page visit is when a user visits a link and no page load happens. The navigated page appears in the DOM, but the entire page didn't load from scratch. This is what a single page application does.

Rails uses JavaScript Turbolinks. Turbolinks allow a Rails application to perform as a single page application without the client-side JavaScript framework. Because of this, ActionCable methods will not run when we need them to. To get past that, we can turn off Turbolinks or purposely trigger page-loads.

`connection.rb`

When a user opens their browser and navigates to the website, that is when the server will start firing off Action Cable methods. There are two main methods in it: connect and disconnect. A private third method is used to find the current_user.

`connect`

This is where the Connection current user is set. This connection becomes the parent to all channel subscriptions the current user subscribes to. When a user navigates to the website, ActionCable will begin the process of creating the connection between client and server.

# app/channels/application_cable/connection.rb
def connect
  self.current_user = find_verified_user
end

Since I am using devise, I'm finding the current user through warden.

# app/channels/application_cable/connection.rb
def find_verified_user
  if verified_user = env['warden'].user
    verified_user
  else
  # You can find the reject_unauthorized_connection method
  # here -> https://github.com/rails/rails/blob/master/actioncable/lib/action_cable/connection/authorization.rb
    reject_unauthorized_connection
  end
end

`disconnect`

In this method, you would do any cleanup work when the connection is cut.

# app/channels/application_cable/connection.rb
def disconnect
  close(reason: nil, reconnect: true)
end

The close method can be found here in the repo.

# rails/actioncable/lib/action_cable/connection/base.rb

# Close the WebSocket connection.
def close(reason: nil, reconnect: true)
  transmit(
    type: ActionCable::INTERNAL[:message_types][:disconnect],
    reason: reason,
    reconnect: reconnect
  )
  websocket.close
end

`channel.rb`

We don't need to do anything in this file.

`comments_channel.rb`

This is the channel I generated. This is where users can subscribe to streams. Channels generated inherit from class ApplicationCable::Channel.

`subscribed`

If there is a project, start a stream, else reject the subscription.

# app/channels/comments_channel.rb
def subscribed
  project = Project.find_by_id(params[:id])

  if project
    stream_for project
  else
    reject
  end
end

`receive(data)`

This method is used when you rebroadcast a message. I will not be doing any rebroadcasting in my application, so this method is blank.

You would send data from the javascript channel back to the ruby channel. That data will go to the receive method, where it will be broadcasted to other users. It will also be broadcasted to the user who sent the message to be rebroadcasted.

`unsubscribed`

This is where you do any cleanup when a subscriber unsubscribes. By using the stop_all_streams, all streams with the channel will be cut.

# app/channels/comments_channel.rb
def unsubscribed
  # stop_all_streams -> Unsubscribes all streams associated with this channel from the pubsub queue
  stop_all_streams
end

`javascript/channels/comments_channel.js`

This is where you will manipulate the DOM with data sent from the server.

`connected()`

If there is work you would like to implement when the user is connected to a stream, this is where you'll put it.

For example, when a user is connected to the stream, I display a message on the screen stating that they are connected. In ten seconds, the message disappears.

// app/javascript/channels/comments_channel.js
connected() {
    // Called when the subscription is ready for use on the server
  var count = 9;
  const projectsNav = document.querySelector("#projects-nav");
    // connectedMessage appears as the first child element of the project nav links header
  const connectedMessage = document.createElement("p");

  connectedMessage.id = "welcome-message";
  connectedMessage.innerHTML = `Welcome to this project's stream! Comments will display in real time. Removing in ${count}...`;

    // The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon
  projectsNav.insertAdjacentElement("afterend", connectedMessage);

  var countDown = setInterval(() => {
    connectedMessage.innerHTML = `Welcome to this project's stream! Comments will display in real time. Removing in ${count}...`;

    count === 0 ? clearInterval(countDown) : count--;
  }, 1000);

  setTimeout(() => {
    connectedMessage.remove();
  }, 10000);
}

`received(data)`

When data is sent from the server, it is captured here. You can do whatever you wish with this data. In my received function, I implement a switch statement using the data's action from the server that determines which function will run next.

// app/javascript/channels/comments_channel.js
received(data) {
  // Called when there's incoming data on the websocket for this channel

  switch (data.action) {
    case "create":
      let containerDiv = document.createElement("div");
      containerDiv.id = `comment_${data.id}`;

      this.createComment(containerDiv, data);
      break;
    case "update":
      this.updateComment(data);
      break;
    case "destroy":
      this.deleteComment(data.id);
      break;
    case "error":
      this.handleError(data);
      break;
    default:
      console.log("No match found");
  }
}

`appendComment(data)`

This is a method I created that handles appending new data to the DOM. The only methods ActionCable provides are connected(), disconnected(), and received()

Views

We are able to purposefully trigger page loads by turning off Turbolinks on anchors.

JavaScript TurboLinks

JavaScript Turbolinks enable a Rails application to act as a single page application, where page visits will swap out the body and merge the head so that full-page loads don't happen.

`link_to`

link_to allows options of disabling the Turbolink on an a tag. This ensures a page load occurs.

Turbolinks can be disabled on a per-link basis by annotating a link or any of its ancestors with data-turbolinks="false"

<%= link_to project.name, project, data: {turbolinks: "false"} %>

Visiting a URL will also cause a page load.

Build a Rails 6 API Featuring Graphql

Ethan Gustafson — Wed, 28 Oct 2020 03:36:24 +0000

Initial Configuration
Generate a New Rails API
Gem Additions
rack-cors Gem Configuration
First Migration
New Graphql Generator
Schema, Types
Resources

In this blog, I'll be covering how to create an initial Rails backend API utilizing Graphql. If you don't know Graphql, if you're familiar with it or just need a refresher, this blog is for you.

Initial Configuration

Generate a New Rails API

Let's generate a new API-only application. I won't be using most of the gems that come with a new rails generation, so the command I will use with numerous options is:

rails new vacationme_backend --api --database=postgresql --skip-action-mailer --skip-action-mailbox --skip-action-cable

Gem Additions

Uncomment the rack-cors gem
Add gem 'graphql'
Add gem 'graphiql-rails'
Run bundle install

Unfortunately, the graphiql-rails hasn't been updated since January of 2019. There are many pull requests and issues stated, and quite a few direct you to how the application can begin working again. I will show you how you can do so further down.

`rack-cors` Configuration

In config/initializers/cors.rb, uncomment the following code:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :patch, :put]
  end
end

For Rails, you'll need to add this middleware on application startup. A practical way to do this is with an initializer file. For example, the following will allow GET, POST, PATCH, or PUT requests from any origin on any resource:

We use insert_before to make sure Rack::Cors runs at the beginning of the stack to make sure it isn't interfered with by other middleware (see Rack::Cache note in Common Gotchas section). Basic setup examples for Rails 5 & Rails 6 can be found in the examples/ directory.

In config/application.rb, add:

config.hosts << "localhost"

Rails 6 has support for blocking requests from unknown hosts, so origin domains will need to be added there as well.

A more detailed reason for this addition can be found here in the Ruby on Rails Guide.

First Migration

Graphql will be interacting with ActiveRecord. We will have to create our migrations and models as we normally would. I am using the bcrypt gem, so instead of a password field, it will be a password_digest field.

Run:

rails g model user name:string username:string password_digest:string
rails db:create
rails db:migrate

Remember to include has_secure_password in app/models/user.rb. Now let's write two seeds in db/seeds.rb:

User.create(
  name: "John Doe",
  username: "JohnDoe",
  password: "123"
)

User.create(
  name: "Ethan Gustafson",
  username: "GoodGuyGuf",
  password: "123"
)

Run rails db:seed

Mounting The Engine

The graphiql-rails gem enables one route in your application where you can open a browser and develop using an IDE for graphql.

After navigating through the issues, I stumbled onto the best solution I could use without changing much of the code I currently have. It can be found here in this issue.

Follow the graphiql-rails guide normally.

# config/routes.rb
post "/graphql", to: "graphql#execute"
if Rails.env.development?
  mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "graphql#execute"
end

You would navigate to "/graphiql" in your browser, and the path would still use the graphql#execute action.

In config/application.rb, uncomment:

require "sprockets/railtie"

Sprockets is a Ruby library for compiling and serving web assets.

To create the last fix, run touch app/assets/config/manifest.js to create a manifest.js file. Put this inside of it:

//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

That's all. This is so the gem can link to the CSS and js it defined in its own files. Now we can begin building the types.

New Graphql Generator

Now that we have a user and a record, we can generate the graphql install. Run:

rails generate graphql:install

This will create:

A graphql_controller
A graphql directory containing two subdirectories and one file:
- mutations, which contains 1 file
- types, which contains 10 files
- project_name_schema.rb

To keep it simple I won't go into detail about the mutations directory.

Schema, Types

GraphQL cannot execute a query without a type system.

There are object, mutation, query, scalar, enumeration, interfaces, union, and input types.

Every GraphQL service defines a set of types which completely describe the set of possible data you can query on that service. Then, when queries come in, they are validated and executed against that schema.

Before building a schema, you have to define an entry point to your system, which is called the “query root”. The query root will be the query_type.rb file.

# app/graphql/types/query_type.rb
module Types
  class QueryType < Types::BaseObject
    # Add root-level fields here.
    # They will be entry points for queries on your schema.

     # First describe the field signature:
    field :user, UserType, null: true do
      description "Find a User by ID"
      argument :id, ID, required: true
    end

    def user(id:)
      User.find(id)
    end
  end
end

The User Type:

module Types
  class UserType < Types::BaseObject
    field :id, ID, null: false
    field :name, String, null: false
    field :username, String, null: false 
    field :password, String, null: false
  end
end

Including the root query in the schema ensures that the application is now functional. Run rails s. Your application should be working normally, and you can run queries on the types above without a problem.

# app/graphql/vacationme_backend_schema.rb
class VacationmeBackendSchema < GraphQL::Schema
  mutation(Types::MutationType)
  query(Types::QueryType)

  # Opt in to the new runtime (default in future graphql-ruby versions)
  use GraphQL::Execution::Interpreter
  use GraphQL::Analysis::AST

  # Add built-in connections for pagination
  use GraphQL::Pagination::Connections
end

Results:

Resources:

Action Cable Configuration & Subscriptions in Rails

Ethan Gustafson — Wed, 21 Oct 2020 02:15:53 +0000

Action Cable
- WebSockets
- TCP/IP
- Terminology
- Queue Data Structure
Rails/JavaScript Code
- Server-Side Components
- Client-Side Components
- Client-Server Interactions
Configuration
- Redis
- Action Cable Server

NOTE: At the time this blog was written, the Rails version in use was 6.0.

In this blog, I will walk through configuring and implementing Action Cable into a Rails Application. As I'm writing, I don't know how Action Cable works and what underlying processes make it functional.

This is why I love writing technical blogs. It is such a great way to learn and document processes to reference later. There's no way I'm going to remember everything, but as long as the fundamentals are there I will know where to look when I need to remember.

Action Cable

Action Cable is a bundle of code providing a client-side JavaScript framework and a server-side Ruby framework.

It integrates WebSockets with the rest of a rails application. This allows the application to have certain real-time features to be written in Ruby.

For an example, I'm currently writing an application called FilmPitch, where filmmakers can fund their dream movies. A Project has_many :comments. When a user comments, the browser will update so that the comment will display in real-time.

So what are WebSockets and how do they make real-time features possible?

Web Sockets

There is a lot of Wikipedia information in this section. I wanted to piece together the important bits to know before going forward.

A WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection.

A communications protocol is a system of rules that allow two or more entities of a communication system to transmit information via any kind of variation of a physical quantity.

A full-duplex (FDX) system, or sometimes called double-duplex, allows communication in both directions, and, unlike half-duplex, allows this to happen simultaneously.

The WebSocket protocol is different from HTTP, the Hypertext Transfer protocol, although it is compatible with HTTP. Essentially, the WebSocket protocol facilitates real-time data transfer from and to the server.

HTTP is a request-response protocol. It doesn't keep a connection open. It only sends data when requested. The WebSocket protocol sends data back and forth between client and server continuously, without being requested by the client.

This is made possible by providing a standardized way for the server to send content to the client without being first requested by the client, and allowing messages to be passed back and forth while keeping the connection open. In this way, a two-way ongoing conversation can take place between the client and the server.

For example, cell phones are full-duplex, as two callers are allowed to speak and hear the other at the same time.

TCP/IP

The Transmission Control Protocol (TCP) is one of the main protocols of the Internet protocol suite. TCP provides reliable, ordered, and error-checked delivery of a stream of octets (bytes) between applications running on hosts communicating via an IP network.

TCP is connection-oriented, and a connection between client and server is established before data can be sent. The server must be listening (passive open) for connection requests from clients before a connection is established. Three-way handshake (active open), retransmission, and error-detection adds to reliability but lengthens latency.

Applications that do not require reliable data stream service may use the User Datagram Protocol (UDP), which provides a connectionless datagram service that prioritizes time over reliability. TCP employs network congestion avoidance. However, there are vulnerabilities to TCP including denial of service, connection hijacking, TCP veto, and reset attack. For network security, monitoring, and debugging, TCP traffic can be intercepted and logged with a packet sniffer.

The Network Function section of the TCP Wiki will detail more on how the protocol functions.

The Internet protocol suite is the conceptual model and set of communications protocols used in the Internet and similar computer networks. It is commonly known as TCP/IP because the foundational protocols in the suite are the Transmission Control Protocol (TCP) and the Internet Protocol (IP).

The Internet protocol suite provides end-to-end data communication specifying how data should be packetized, addressed, transmitted, routed, and received. This functionality is organized into four abstraction layers, which classify all related protocols according to the scope of networking involved. From lowest to highest, the layers are the link layer, containing communication methods for data that remains within a single network segment (link); the internet layer, providing internetworking between independent networks; the transport layer, handling host-to-host communication; and the application layer, providing process-to-process data exchange for applications.

Terminology

The Action Cable Terminology section of the Ruby on Rails Guide will detail all of the terms I list below. I'll stitch together everything so that it makes more sense. If it doesn't, the configuration section will help make it clear.

Action Cable can handle many connection instances. There is one connection instance for every WebSocket. A user could have more than one tab open in their browser, which means that there can be more than one connection instance in a user's browser.

The client is referred to as the browser. The client of a WebSocket connection is called the consumer.

Each consumer can subscribe to multiple cable channels. When a consumer is subscribed to a channel, they act as a subscriber.

Pub/Sub, or Publish-Subscribe, refers to a message queue paradigm whereby senders of information (publishers), send data to an abstract class of recipients (subscribers), without specifying individual recipients. Action Cable uses this approach to communicate between the server and many clients.

Essentially, all users(consumers) subscribed to a channel will get updates without requesting them.

In software architecture, publish-subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published messages into classes without knowledge of which subscribers, if any, there may be. Similarly, subscribers express interest in one or more classes and only receive messages that are of interest, without knowledge of which publishers, if any, there are.

The connection between the subscriber and the channel is called a subscription. A consumer could subscribe to multiple chat rooms at the same time.

Each channel encapsulates a logical unit of work, similar to what a controller does in a regular MVC setup. For example, you could have a ChatChannel and an AppearancesChannel, and a consumer could be subscribed to either or to both of these channels. At the very least, a consumer should be subscribed to one channel.

Each channel can stream zero or more broadcastings. A broadcasting is a pubsub link where anything transmitted by the broadcaster is sent directly to the channel subscribers who are streaming that named broadcasting.

Controllers will work like normal. In my Commentscontroller, the #create action is what will create, save, and call the job that will broadcast the newly saved comment to the channel. ActiveJob will then handle broadcasting the information to channel subscribers.

Queue Data Structure

The Queue Data Structure is just like the Stack Data Structure. Stacks follow a LIFO (Last-in First-out) principle. Queues follow the FIFO (First-in First-out) principle.

Rails/JavaScript Code

This section details the purpose behind the files in app/channels and app/javascript/channels. Don't worry about configuration for now.

A lot of it is from the Action Cable guide, and that is on purpose. The important bits are set in bold. The Terminology section introduces the terms, this section introduces what you'll be working with, and the configuration section pieces everything together in a linear fashion.

Server-Side Components

Connections

For every WebSocket accepted by the server, a connection object is instantiated. This object becomes the parent of all channel subscriptions that are created from thereon.

The connection itself does not deal with any specific application logic beyond authentication and authorization.

Connections are instances of ApplicationCable::Connection. In this class, you authorize the incoming connection, and proceed to establish it if the user can be identified.



# app/channels/application_cable/connection.rb
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private
      def find_verified_user
        if verified_user = User.find_by(id: cookies.encrypted[:user_id])
          verified_user
        else
          reject_unauthorized_connection
        end
      end
  end
end

identified_by is a connection identifier that can be used to find this specific connection later.

The above example assumes that you authenticated your user somewhere else in your app and set a signed cookie with the user_id.

The cookie is then automatically sent to the connection instance when a new connection is attempted, and you use that to set the current_user. By identifying the connection by this same current user, you're also ensuring that you can later retrieve all open connections by a given user (and potentially disconnect them all if the user is deleted or unauthorized).

Channels

A channel encapsulates a logical unit of work, similar to what a controller does in a regular MVC setup. By default, Rails creates a parent ApplicationCable::Channel class for encapsulating shared logic between your channels.



# app/channels/application_cable/channel.rb
module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end

This is the parent channel.

You don't have to adjust anything here. Any new channel you create will inherit from ActionCable::Channel.

rails g channel --help will detail the ways in which you can generate a new channel. I will be creating a comments channel, so my command will be rails g channel Comments.

Subscriptions

Consumers subscribe to channels, acting as subscribers. Their connection is called a subscription. Produced messages are then routed to these channel subscriptions based on an identifier sent by the cable consumer.

Data is broadcasted to this channel.



# app/channels/comments_channel.rb

class CommentsChannel < ApplicationCable::Channel
  def subscribed
    # this is called when the consumer has successfully
    # become a subscriber to this channel.
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

Client-Side Components

Connections

Consumers require an instance of the connection on their side. This can be established using the following JavaScript, which is generated by default by Rails:



// app/javascript/channels/consumer.js
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.

import { createConsumer } from "@rails/actioncable"

export default createConsumer()

From the Action Cable guide, createConsumer will connect to "/cable" automatically if you don't specify a URL argument for it. There's not much else to this file.

Subscriber

In order for a user to subscribe to a channel, you have to create a subscription in your channel -> app/javascript/channels/${channel_name}.js.

My comments channel was generated like this:



import consumer from "./consumer";

// Generated with `rails g channel Comments`

consumer.subscriptions.create("CommentsChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // Called when there's incoming data on the websocket for this channel
  }
});

The channel name needs to match your rails channel name and/or room. If you've never seen the syntax above, it is a Method Properties shorthand feature in ES6.

It's essentially the same as:



{
  connected: function(){

  },
  disconnected: function(){

  },
  received: function(data){

  },
}

If you need to see the flow of their Consumer, Subscription(s) classes, you can find them here.

Client-Server Interactions

Streams

Streams enable a channel to route broadcasts to subscribers. When new data is sent, the stream allows the channel to route that data to clients connected to the channel.

stream_for and stream_from basically do the same thing. Here is their code.

stream_for is more used for a related model. It automatically generates broadcasting from the model and channel for you.

Broadcasting

A broadcasting is a pub/sub link where anything transmitted by a publisher is routed directly to the channel subscribers who are streaming that named broadcasting.

The default pubsub queue for Action Cable is redis in production and async in development and test environments.

I will show you how to use ActiveJob with rails so that Action Cable can use Redis in the configuration section. ActiveJob allows jobs to run in queueing backends.

Subscriptions

When a consumer subscribes to a channel, they become a subscriber. The connection between the two is a subscription. The data sent by the rails channel will be available as an argument to the method properties objects in the channel js file.

The received(data) method is called when there's incoming data on the WebSocket for a channel. In my comments_channel.js file, the data is an already rendered erb template. It's already in HTML, so I'm just appending it where I want it.



received(data) {
    // console.log("Recieving...")
    console.log(data);
    // console.log("Appending...")
    this.appendComment(data);
    // console.log("I have appended!")
  },

Passing Parameters to Channels

If you're looking at your ${name}_channel.rb #subscribed method confused about where the params are coming in from, they're coming from the ${name}_channel.js file. If you start byebug when the subscribed method is called, the only params you will get is the channel name because it was defined where the subscription was created at the top:



consumer.subscriptions.create("CommentsChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // Called when there's incoming data on the websocket for this channel
  }
});

Configuration

Note: I'm using Postgres & Devise in this application.

Redis

I will be using Redis as the queueing backend.

Redis is an in-memory data structure project implementing a distributed, in-memory key–value database with optional durability. Redis supports different kinds of abstract data structures, such as strings, lists, maps, sets, sorted sets, HyperLogLogs, bitmaps, streams, and spatial indexes.

If you don't have it installed on Mac, install it with brew install redis.

Install the Redis gem with gem install redis. In case this gem isn't in your Gemfile, add it and run bundle install.

In your config/cable.yml file, make sure the adapter for your environments is Redis. For some reason, Redis was having errors with the other adapters set with async, so I set them all to redis. Also set the URL, which should already be present in the environment file.



development:
  adapter: redis
  url: redis://localhost:6379/1

In order for Rails to connect to Redis, you have to start a server in another terminal. Start a Redis server by running redis-server.

Action Cable Server

The Action Cable Server can run either separately from or alongside your application. I have it set so that it runs when I launch my Rails server.

`config/application.rb`

In config/application.rb, you have to mount the path for Action Cable: config.action_cable.mount_path = '/cable'. This is where it will listen for WebSocket requests.

`views/layouts/application/html.erb`

In the views/layouts/application/html.erb, add an action_cable_meta_tag in the head. ActionCable.createConsumer() will connect the path from this meta_tag and use it as an argument.



  <%= action_cable_meta_tag %>

To configure the URL, add a call to action_cable_meta_tag in your HTML layout HEAD. This uses a URL or path typically set via config.action_cable.url in the environment configuration files.

`config/environments/development`

In config/environments/development, add:



config.action_cable.url = "ws:localhost:3000/cable"

  config.action_cable.allowed_request_origins = [/http:\/\/*/, /https:\/\/*/]
  config.action_cable.worker_pool_size = 5

Action Cable will only accept requests from specified origins, which are passed to the server config as an array.

Set the pool size equal to what you have in your config/database.yml file.

...your server must provide at least the same number of database connections as you have workers. The default worker pool size is set to 4, so that means you have to make at least 4 database connections available. You can change that in config/database.yml through the pool attribute.

`config/routes.rb`

I don't believe I saw this in the Action Cable guide nor the example application they had, but it is present in many other blog examples. Not sure why it's omitted in the guide, have to look into it later.

Mount the Action Cable Server in config/routes.rb:



  mount ActionCable.server => '/cable'

`app/channels/application_cable`

In this directory, you'll find two files: channel.rb and connection.rb.

That channel is the parent channel, so you don't need to alter that file at all.

connection.rb is where you will authenticate and authorize your user for their connection. I'm using Devise, so my user is authenticated like so:



module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    def disconnect
      # Any cleanup work needed when the cable connection is cut.
      # close(reason: nil, reconnect: true)
    end

    private
      def find_verified_user
        if verified_user = env['warden'].user
          verified_user
        else
          # You can find the reject_unauthorized_connection method here -> https://github.com/rails/rails/blob/master/actioncable/lib/action_cable/connection/authorization.rb
          reject_unauthorized_connection
        end
      end
  end
end

Essentially, logged in users connect to the action cable server. They don't become a subscriber yet, though. The channel's #subscribed method will handle that portion. This class is all about authenticating and authorizing the user for this specific connection, allowing Action Cable to find the connection later.

reject_unauthorized_connection is a method given to you by ActionCable::Connection::Authorization. You can also find this method here in the Github.

`comments_channel.rb`

I generated my comments channel with the rails g channel command.



class CommentsChannel < ApplicationCable::Channel
  def subscribed
    project = Project.find_by_id(params[:id])
    # in Rails 6.1, a new method for handling the below control structure is defined as
    # stream_or_reject_for(record), which houses this code:

    # if there is a record, subscribe the user and start a stream, else reject
    # the user and don't start a new stream.
    if project
      stream_for project
    else
      reject
    end
  end

  def receive(data)
    # Rebroadcast a message sent by one client to any other connected clients
    # ActionCable.server.broadcast(project, data)
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
    # stop_all_streams() -> Unsubscribes all streams associated with this channel from the pubsub queue
  end
end

Right now, only the #subscribed method is functional. The params id is given to me from javascript. If the URL doesn't have a project id, the subscription won't be set, and no stream will start.

`comments_channel.js`



import consumer from "./consumer";

// Generated with `rails g channel Comments`

var url = window.location.href;
let id = url.slice(url.length - 1, url.length);

consumer.subscriptions.create({channel: "CommentsChannel", id: id}, {
  connected() {
    // Called when the subscription is ready for use on the server
    console.log("Connected to the comments channel!");
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // Called when there's incoming data on the websocket for this channel
    // console.log("Recieving...")
    console.log(data);

    // console.log("Appending...")
    this.appendComment(data);
    // console.log("I have appended!")
  },

  appendComment(data){
    const commentSection = document.getElementById("comments");
    commentSection.insertAdjacentHTML("afterbegin", data);
  }
})

For right now, the server gets the id from the URL. It sends it as a param to the rails channel subscribed method.

`ActiveJob` & Broadcasting



class CommentBroadcastJob < ApplicationJob
  queue_as :default

  # Broadcast a hash to a unique broadcasting for this <tt>model</tt> in this channel.

    # def broadcast_to(model, message)
    #   ActionCable.server.broadcast(broadcasting_for(model), message)
    # end

  # Active Job objects can be defined by creating a class that inherits from the 
  # ActiveJob::Base class. The only necessary method to implement is the “perform” method.


  def perform(project, partial)
    CommentsChannel.broadcast_to(project, partial)
  end
end

This class is used to send the broadcasts. What I'm doing here is having the project and partial broadcasted. It gets called in the CommentsController.

`comments_controller.rb`



def create
    @comment = Comment.new(comment_params)

    if @comment.valid?

      @comment.save
      # You have to use methods found in ActiveJob::Core::ClassMethods -> 
      # https://edgeapi.rubyonrails.org/classes/ActiveJob/Core/ClassMethods.html

      # To enqueue a job to be performed as soon as the queuing system is free, use:
      # .perform_later(record)

      @obj = {
        id: @comment.id,
        description: @comment.description,
        user_id: @comment.user_id,
        project_id: @comment.project_id,
        display_name: @comment.user.display_name
      }.as_json

      CommentBroadcastJob.perform_later(
        @comment.project, 
        render_to_string(
          partial: 'comments/comment',
          locals: {
            comment: @obj
          } 
        )
      )

    else
      redirect_to project_path(comment.project)
    end
  end

This is all messy right now, but the data in my views are using a comments hash, so I'll end up refactoring this later. Either render or render_to_string works here. The partial will be created with the data you want while using rails helpers in the views:



<!-- views/comments/_comment.html.erb -->

<div>
  <div>
    <h4><%= comment['display_name'] %></h4>
    <p><%= comment['description'] %></p>
  </div>

  <% if current_user.id == comment['user_id'] %>
    <div>
      <button>Edit</button>
      <p>
        <%= link_to 'delete', 
        { controller: "comments", action: "destroy", id: comment['id'] }, 
        data: { confirm: 'Are you sure?' }, 
        method: :delete %>
      </p>
    </div>
  <% end %>
</div>

This has allowed two users to see comments in real-time. Here is a gif showing the process:

I still have to figure out how I can stop displaying the edit/delete buttons for other users.

I figured it would be great to have this blog have the meat of everything. I spent a good amount of time going through many Wikipedia pages, rails guides, rails repos, blogs, and videos to figure out exactly how to get Action Cable to run. Hope it helps clear some confusion!

This is the project repo: FilmPitch

If you have any questions or observations, please comment below. 🤩

Building a Website With Gatsby.js

Ethan Gustafson — Tue, 13 Oct 2020 21:39:40 +0000

This blog is purposed to be a simple overview of creating a website using Gatsby. The Gatsby website will guide you along in creating a website, even if you don't know much about web development. It will teach you topics during the tutorials, but I will walk you through everything all together and will be as direct as possible.

What is Gatsby?

Gatsby.js is an open-source framework that utilizes React.js to generate static websites. What is a static website?

A static website doesn't dynamically change. Dynamic websites render different content depending on the data it receives. A static website will be delivered to you as it is stored. Although Gatsby uses Graphql(which is a query language), there is no database. Instead, data retrieving occurs when the app is being built, from local files.

Plugins, Themes, Starters

There is an abundance of plugins available that add functionality to your application, such as Responsive Images, an RSS feed, Google Analytics, etc.

Gatsby Themes are Plugins that come with pre-configured functionality, data sourcing, and/or UI code. There are "Starters", which are website boilerplates that are pre-configured with a direct purpose in mind, like creating a portfolio.

Installation, Creation

Install Gatsby globally with npm install -g gatsby-cli.
To create a new website, run gatsby new {your-project-name} {link-to-starter} ({link-to-starter} can be omitted)
Run the server with gatsby develop.

If you didn't use a starter, then here are some plugins to help get you started. Gatsby image, react helmet, plugin sharp, and the transformer-sharp plugin should already be configured in gatsby-config.

Each of those plugins can be installed after you create the project.

File Structure

When you open your newly created project, it used gatsby-starter-default to generate everything. You'll see a few gatsby.js files in the root directory, along with the src directory, which contains three folders:

components
images
pages

Note: If you decide to rename the files within these folders, you might have to make sure that when you begin importing other files, that the name of what you are importing matches the casing of the filename. If you don't, the terminal will report warnings to you about modules casing inconsistency concerning certain file imports.

For example, I changed the name of layout.js to Layout.js, and I began receiving warnings about modules with different casing names.

/* It turns out that imports I had in other files like 404.js were: */
import Layout from "../components/layout" 
// When it needed to be 
import Layout from "../components/Layout"
// To remove the warnings

`components`, `images`, `pages`

The pages folder contains your 'routes'. Each new file created will become a new page in your project, where the name of the file will become the name of the URL route. For example, about.js would generate the URL route /about.

You'll find four files inside. 404.js, index.js, page-2.js, and using-typescript.tsx.

Inside of the index.js file, you will see this code:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

What's happening here? The index.js file is the file gatsby loads upon starting the server. The contents of this file are rendered and sent to the browser.

Layout is a component in the components directory. In index.js, everything inside of Layout is an argument to the Layout component. If you are doing data retrieving, layout.js is where you can query the data with Graphql to be shown in the browser.

If you look at the return statement, you'll see this code:

return (
    <>
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer style={{
          marginTop: `2rem`
        }}>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.com">Gatsby</a>
        </footer>
      </div>
    </>
  )

Everything is wrapped with React Fragments(<></>), and as you can see the JSX represents the body of the HTML document. There is a Header, main, and footer. The Header component is receiving the data retrieved from layout.js.

main is containing children, which were passed into Layout as arguments(from index.js). Every argument Layout takes in will become a child element of the main tag.

After Layout, you will see: <SEO title="Home" />. SEO stands for Search Engine Optimization. All of your page contents are available to search engine crawlers because Gatsby uses Server-Side-Rendering.

The SEO component deals with the metadata in the head element. It uses Graphql to query metadata to be placed in the head.

At the very bottom, you will find this:

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

What is .propTypes ? In React, propTypes deals with type checking. Type checking is used to ensure that props contain certain prop types.

The children prop is being type-checked. PropTypes define types of data for props. node is any value that can be rendered on the screen. isRequired ensures that the type of data the children prop should be receiving is of the node type.

`image.js`, `header.js`

What is gatsby-image? How does it function?

gatsby-image works with gatsby-transformer-sharp and gatsby-plugin-sharp. gatsby-source-filesystem connects your local files together so that gatsby-image can locate them in your Graphql queries. gatsby-image doesn't require any configuration when used within Gatsby.

gatsby-image is used in image.js to handle images. The Gatsby Image API states:

gatsby-image is a React component. It is designed to work with Gatsby's native image processing capabilities powered by Graphql and gatsby-plugin-sharp to optimize image loading for your site.

gatsby-image is not a drop-in replacement for <img />. It’s optimized for responsive fixed width/height images and images that stretch the full-width of a container. There are also other ways to work with images in Gatsby that don’t require GraphQL.

gatsby-image:

loads the optimal image size for each device size and screen resolution
holds the image in a solid position while your page loads so the elements on the screen don't jump around
shows a blur effect on images before they are fully loaded
lazy loads images.

There are two types of responsive images supported by gatsby-image, fixed, and fluid. fixed is for images with a fixed width and height. fluid is for images that stretch across a fluid container.

In image.js, you'll find that the return value is either stating the picture wasn't found, or the image with its specified responsive type.

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  if (!data?.placeholderImage?.childImageSharp?.fluid) {
    return <div>Picture not found</div>
  }

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}

As you can see, the query and the return specify what type of image it will be. You as a developer will get to choose which kind it is.

Overall, header.js just contains what is in the header element. layout.js contains the Header component as well as the rest of the body. SEO contains what is in the head. index.js loads SEO and Layout, the head, and the body.

`gatsby.js` files

In the root directory of your project, you'll find four gatsby.js files.

gatsby-browser.js is where you can respond to events within the browser and can wrap your site in additional components.

gatsby-config.js is where you can set the configurations options for your site. Some things you can configure are siteMetaData(where you can store common pieces of data across pages for reuse), plugins, pathPrefix, Polyfill(Gatsby uses the ES6 Promise and not all browsers support it, so Gatsby includes Polyfill by default), etc.

The code in gatsby-node.js is run once in the process of building your site. You can use it to dynamically create pages, add Graphql Nodes, or respond to events during the build lifecycle.

gatsby-ssr.js correlates with Server-Side-Rendering. SSR is where the server renders a web page, then sends it to the browser, instead of letting the browser render the web page. This file will let you alter the content of static HTML files while they are being rendered by the server.

Graphql

Graphql is a query language developed by Facebook. It doesn't interact with a database, it interacts with APIs. Queries allow you to get all the information you need inside of a single request.

Gatsby uses Graphql to interact with local files. This allows you to reuse common pieces of data.

`import { useStaticQuery, graphql } from "gatsby";`

There are two types of queries you can use in Gatsby, static and page queries.

useStaticQuery is a React Hook that is used to query data with Graphql at build time. React Hooks let you use state and other React features without writing a class.

React Hooks do not work within classes. You can also build your own hooks. Hooks let you use state outside of a class. React preserves the state between re-renders. More on hooks here: Hooks Overview

const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

When generated with the default starter, Gatsby configures this variable for you in Layout.js. It assigns the query to the variable data. This query executes during build time.

graphql is a Gatsby tag that enables page components to retrieve data from a Graphql query. query is the operation type. In Graphql, there are query, mutation, and subscription types. SiteTitleQuery is the name of the query. The name of your query can be omitted, but it is helpful to include when it comes to debugging.

query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }

site will be the beginning key of the query, it isn't referencing a key in gatsby-config.js. The data we are asking for from gatsby-config.js is title from siteMetadata.

In JavaScript, object properties can be accessed using dot notation. We can access the results of the query with data.site.siteMetadata?.title.

<Header siteTitle={data.site.siteMetadata?.title || `Title`} />

If you haven't seen that question mark before, it is the optional chaining operator.

Simple Recursion & Challenges(ruby, js, python)

Ethan Gustafson — Tue, 06 Oct 2020 10:21:55 +0000

What is Recursion?

Recursion is where a function calls itself from within the function.

Example: String Reversal

function reverseString(string){
    return (string === '') ? '' : reverseString(string.substr(1)) + string.charAt(0);
}

How is it able to call itself from within the function and keep the return values? It stores each call into the Call Stack.

Call Stack

The Call Stack is a Stack Data Structure that stores an ordered series of items just like a list. When you think of an array, you can add and remove an item at any index. With a stack, the first item added is the last item to be removed.

When you go past the maximum call stack size, it is called Stack Overflow. If you don't include a condition in a method in order to stop a recursive call, it will loop on endlessly, adding on more calls to the call stack, until memory runs out.

This is a problem with Recursion. The computer needs to allocate memory for things. You can run out of memory when the call stack size is exceeded. In order to stop this from happening, you need to include a base case.

The Base Case

There are two things you have to do in a recursive function. You have to have a recursive call and a base case.

The base case is a condition set in the function determining when the recursive call should stop.

There is one problem when it comes to returning values. Remember that the first item added to a stack is the last item removed from the stack. Once the base case condition is met, the stack will remove items, starting with the last item added to the call stack.

So let's say we don't explicitly return a value we want to receive in JavaScript. It will get to the last recursive call, return the value, then will start popping off the rest of the calls within the call stack. The value you wanted to get will not be there, once you get to the final return.

You would have to explicitly return the recursive call in order to get the correct value. The return value of all recursive calls would be the final recursive call return value.

Duplicate Letter Challenge

If you are up to it, here are some recursion challenges. The JavaScript Solution details the process I took in solving the challenge, as well as a way to solve it without Recursion.

Guidelines:

You must use Recursion.
You must take in a string as an argument to the function.
The return value must be a Hash(Ruby)/Object(JS)/Dictionary(Python), containing keys of each letter in the string.
The value to each key will be how many times the key appears in the string.

C - Environment Configuration(VS Code, macOS)

Ethan Gustafson — Wed, 30 Sep 2020 00:07:21 +0000

Program Execution Process

A computer needs to be told what to do. It needs instructions to follow. The instruction set is the bridge between software and hardware. It lives on the CPU.

The CPU is the brain of the computer. It executes the instructions it receives. The only instructions it can understand are in machine language.

In order for us to send instructions to the CPU in the C programming language, we need to compile source code. Source code is what is written in a text editor using a programming language.

During compilation, the source code is converted into object code. Object code is a portion of machine code. Machine code is a program written in machine language. Machine language is binary.

Resources:

Instruction Set Architecture

Linker

After the source code has been compiled into object code, your program will go through the "linking" process.

This is where the compiler will link together object modules and external libraries into your program. It's about gathering all dependencies and linking them together in your code in order to produce an executable file.

It will also display errors if there was a problem linking with your program. For example, it would report an error if a certain library was missing or couldn't be found.

The final result of the linking process will be an executable file. In Windows, executable files end with .exe. Unix won't have that file extension but the program can be executed with the path to your executable.

Resources:

Linker

Configuring environment for C on macOS with VS Code & Clang

The Terminal

If you would like to run your code without an IDE on macOS, you will only need a Text Editor, Compiler, and a Terminal.

If you already have XCode installed, you will have a C compiler. If not, you can install clang like this: xcode-select --install

To create and run a simple program:

Create a simple hello_world.c file
Running gcc hello_world.c or /usr/bin/clang hello_world.c will compile the file
Run the executable with ./hello_world

Visual Studio Code

It is easier to use an Integrated Development Environment (IDE) instead. You will have to install 2 things:

Then we will begin configuring the VS Code IDE. We will have to create a few .json files through VS Code.

The Source Code

For this configuration walkthrough, we will be creating a simple 'Hello World' program. Create a new project directory and name it however you wish. Open the directory in VS Code.

I created another Hello_World directory inside of the project folder, but you don't need to. Create a Hello_World.c file inside of the Hello_World. Place the following code inside of it:

#include <stdio.h>

int main()
{
    printf("Hello World!");
    return 0;
}

Before you begin the next sections of writing the json files, please read the tasks.json/launch.json Variables Reference

The Compiler Path (`c_cpp_properties.json`)

In order to ensure that the IDE can find the compiler, we have to set up a c_cpp_properties.json file to link the compiler path.

To do that, open the Command Palette either by going to the view tab at the top or by running Cmd + Shift + P. Search for c/c++ and find Edit configurations UI. Mac will most likely have found the compiler path for you, but if not it will be located in /usr/bin.

Next, scroll down to the IntelliSense mode:

Make sure you have the right mode selected. It should be clang-x64.

Once you have finished settings those, it will create the c_cpp_properties.json file:

The Compiler Build Settings (`tasks.json`)

Each and every time you begin a new program, you have to configure these build settings in a project's root directory. They are specific to your program.

Enter the command palette and search for tasks. Find Configure Default Build Task. Choose Create tasks.json from template file, then select Others.

The command will be "command": "/usr/bin/clang"
The "args" will have a couple of options: -g, which is the compilation command for global, -o, which will generate an object file, after that we name the executable as "${file}", which is the currently opened file, then after that, we specify the source files.
The "group" will specify "kind": "build" & "isDefault": true. "kind" specifies that the task will run when you run cmd + shift + B.

Debugging Settings (`launch.json`)

launch.json is used to set up the debugging settings. To create the launch.json file, enter the command palette, and search for launch. Select "Debug: Open launch.json". Select the C++ (GDB/LLDB) environment.

The only two things we will change are the program and stopAtEntry.

program will specify the executable we want to run.
stopAtEntry will be set to true.

Compiling/Executing The Program

To compile your program, run cmd + shift + B. This will create the executable and the debugging folder called HelloWorld.dSYM.

To execute the program, simply run the path to the executable. Since my program executable is inside of another directory of my project directory, I have to run the program as Hello_World/HelloWorld

Resources:

Intro To Learning C

Ethan Gustafson — Wed, 23 Sep 2020 03:58:38 +0000

Table of Contents:

Introduction
Understanding Terms
Interpreters, Compilers, Assemblers
Programming Language Levels
Procedural, Object-Oriented, and Functional Programming
What is a Scripting Language?
Dynamic Typing
Garbage Collection
What is C?
Why learn the C programming language?
Conclusion & Next Steps

Introduction:

The first programming languages I messed around with were C++ and Python back in early 2018. Back then I was slowly weighing my options as to how I would begin learning to code, so I never fully learned these two languages.

Fast forward to October 2019 and I'm enrolled in the online Flatiron School Software Engineering program. I was taught Procedural and Object-Oriented Programming with Ruby in the first month. I believe it was a really great way to start learning how to program.

I will talk a decent amount about both Ruby and C. Although I know programming fundamentals, procedural, OOP & functional programming principles, I don't really know how Ruby works behind the scenes. I don't believe that ultimately makes me a great software engineer.

So how can I learn more about computer science, computer architecture, program execution, and how high-level programming languages work behind the scenes as well as practice more data structure and algorithm challenges?

Learning C offers the great opportunity of learning everything above all at once. But before we can learn how to use the C language, we have to confirm what we know and what we should know moving forward about programming and computer science.

In my previous blogs, I would only begin to write my drafts after I finished learning and programming. This time, I will be writing out the step-by-step process I am taking to learn C in real-time.

I am going to be direct with terms, concepts, and code as you read onward and will reference where the information comes from.

Understanding Terms

Ruby itself was actually written in the C programming language by Yukihiro "Matz" Matsumoto in the 1990s. It is an interpreted high-level general-purpose scripting programming language. It is also dynamically typed and uses garbage collection.

Did that sound like a lot? What do those terms really mean?

Interpreters, Compilers, Assemblers

A Compiler is a computer program that translates code written in a programming language into another programming language. There are many different types of compilers.

The compiler for C will be translating C source code into object code.
Object code is the code produced by a compiler and is unrelated to Object-Oriented Programming. This doesn't really describe what object code is, though. It is a portion of machine code that has not yet been linked into a complete program.
Machine Code is a computer program written in machine language, which is Binary. Machine Code is the lowest level of software.
Object Code has to be placed inside of Executable, Library or Object Files.

An Interpreter is a computer program that directly executes instructions from a programming or scripting language without having them previously compiled into a machine language program first. There are a number of strategies the interpreter utilizes in order to do this.

"The terms 'interpreted language' and 'compiled language' effectively mean that the implementation of that language is an interpreter or a compiler, respectively."

For example, the Ruby Interpreter is YARV which is a bytecode interpreter that was created to greatly reduce Ruby program execution times.

Before YARV, the Ruby interpreter was MRI. The MRI interpreter was written in C.

An Assembler is a computer program that creates Object Code by mnemonics and syntax for operations and addressing modes into their equivalent numerical value.

Unix is also written in C along with Assembly.

Programming Language Levels

What's all this about language levels? There are two kinds:

1.) Low-level

Wikipedia says:

"A low-level programming language is a programming language that provides little or no abstraction from a computer's instruction set architecture—commands or functions in the language map closely to processor instructions. Generally, this refers to either machine code or assembly language."

What this means is that you really are writing everything from scratch. Usually, low-level languages are used to write software directly for specific hardware, so they aren't portable. This means you cannot use the same software in different environments. For example, Unics(Unix) was first written in Assembly. It would only function on the type of hardware it was designed for. Unix wasn't portable until it was rewritten in C.

Low-level languages do not require a compiler or interpreter. They can convert to machine code themselves.

2.) High-level

High-level programming languages are designed so that you can focus on the problem at hand without worrying about lower-level processes. They make the code look as human-readable as possible while abstracting away work you would have to do with machine language.

Let's say I created a custom Person class that initializes objects with two attributes: name and skill. This is how you can create an 'instance of' a Class in Ruby, using the new method:

  ethan = Person.new(name: "Ethan", skill: "Ruby")

This will create a new object containing my data. This is very easy to understand. I told it what to do using the Ruby syntax and it did it.

But how was that object stored into memory? Where was it stored? What enabled it to be converted into a language the computer could read? Where was it sent in order to be executed? What happens to this data when a program is done using it?

Categories of Programming Languages

Procedural, Object-Oriented, and Functional Programming

A Programming Paradigm is a way to classify languages based on their features. A programming language can have many paradigms.

Wikipedia's description says:

"Procedural Programming is a programming paradigm, derived from structured programming, based on the concept of the procedure call. Procedures (a type of routine or subroutine) simply contain a series of computational steps to be carried out. Any given procedure might be called at any point during a program's execution, including by other procedures or itself."

Basically, procedural programming involves executing a series of steps in order to complete a task.

Object-Oriented Programming is a programming paradigm based on the concept of objects. An object can have an identity, attributes, and behaviors. OOP Principles involve S.O.L.I.D and G.R.A.S.P principles.

Ruby is an object-oriented, procedural and functional programming language.

Functional Programming

"Functional Programming is a programming paradigm where programs are constructed by applying and composing functions. It is a declarative programming paradigm in which function definitions are trees of expressions that each return a value, rather than a sequence of imperative statements that change the state of the program."

A lot of functional programming is taught in JavaScript.

Dynamic Typing

Ruby is dynamically typed. "A dynamically typed language is a class of high-level programming languages, which at runtime execute common programming behaviors that static programming languages perform during compilation."

Garbage Collection

Garbage collection is about memory management. The collector will remove memory from objects that are no longer used by a program. You don't have to manually garbage collect in Ruby. That is done for you behind the scenes.

What is a Scripting Language?

A scripting or script language is a programming language for a special run-time environment that automates the execution of tasks;[1] the tasks could alternatively be executed one-by-one by a human operator. Scripting languages are often interpreted, rather than compiled.

What is C?

Wikipedia says:

"C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides constructs that map efficiently to typical machine instructions. It has found lasting use in applications previously coded in assembly language. Such applications include operating systems and various application software for computer architectures that range from supercomputers to PLCs and embedded systems."

C is a high-level imperative procedural programming language.

Imperative programming is a paradigm where a developer will explicitly describe the actions a program will take.
Declarative programming is a paradigm where a developer will describe what a program will accomplish, rather than describing how it will accomplish it.

C is high-level compared to Assembly. C is considered low-level compared to Ruby. This is why when you search the internet what level C is on, it will tell you at times that it is low-level or high-level.

Why learn the C programming language?

Most operating systems are written in C languages. This gives you a better understanding when you approach learning what your operating system can do.
Many programming languages are written in C. Learning it will help you become a better developer in other languages.
Since C isn't object-oriented, you can fully focus on procedural programming.
It will help you learn computer architecture.
You will understand how high-level languages operate and how programs execute.
You can run C in Ruby and you can run Ruby in C. The Ruby C API details how you can run C in Ruby and how you can run Ruby in C.
C's execution time is very fast.

Conclusion

That was a lot! What I learned at Flatiron is starting to make more sense. Now with that out of the way I feel more than ready to dive into learning the language.

The next blog in this series will detail how to configure your C environment with VS Code on macOS.

DEV Community: Ethan Gustafson

C - Basic Operators

Table of Contents:

Overview

Binary, Unary, Prefix, Infix, and Postfix

Assignment

Arithmetic

Logical

Relational

Bitwise

What is the Clear Definition of an API?

What is an API?

Straight Forward API Definition

C - Intro To Data Types & Variables

Table of Contents:

Memory

RAM

Variables and Constants

Declaration and Initialization

Data Types

Primitive

int

float

double

_Bool, bool

enum

char

Other Type Specifiers

short

long

long long

signed

unsigned

Final Note: Format Specifiers and the printf() Function

C - Program Structure

Table of Contents:

Recap

Program Structure

Case Sensitivity

Semicolons

Indentation

Comments

The main Function

int

Preprocessor

Big O Notation, Time & Space Complexity Overview

Table of Contents:

Big O Notation

Runtime

Time Complexity

Space Complexity

Notations

Constant: O(1)

Logarithmic: O(log N)

Linear: O(n)

Quadratic: O(n^2)

Log Linear: O(n log(n))

Exponential: O(2^n)

Factorial: O(n!)

Big O Cheatsheet

Rails 6 ActionCable Navigation & Turbolinks

Table of Contents:

ActionCable LifeCycle

connection.rb

connect

disconnect

channel.rb

comments_channel.rb

subscribed

receive(data)

unsubscribed

javascript/channels/comments_channel.js

connected()

received(data)

appendComment(data)

Views

JavaScript TurboLinks

link_to

Build a Rails 6 API Featuring Graphql

Table of Contents

`int`

`float`

`double`

`_Bool`, `bool`

`enum`

`char`

`short`

`long`

`long long`

`signed`

`unsigned`

Final Note: Format Specifiers and the `printf()` Function

The `main` Function

`int`

Constant: `O(1)`

Logarithmic: `O(log N)`

Linear: `O(n)`

Quadratic: `O(n^2)`

Log Linear: `O(n log(n))`

Exponential: `O(2^n)`

Factorial: `O(n!)`

`connection.rb`

`connect`

`disconnect`

`channel.rb`

`comments_channel.rb`

`subscribed`

`receive(data)`

`unsubscribed`

`javascript/channels/comments_channel.js`

`connected()`

`received(data)`

`appendComment(data)`

`link_to`

`rack-cors` Configuration

`config/application.rb`

`views/layouts/application/html.erb`

`config/environments/development`

`config/routes.rb`

`app/channels/application_cable`

`comments_channel.rb`

`comments_channel.js`

`ActiveJob` & Broadcasting

`comments_controller.rb`

`components`, `images`, `pages`

`image.js`, `header.js`

`gatsby.js` files

`import { useStaticQuery, graphql } from "gatsby";`

The Compiler Path (`c_cpp_properties.json`)

The Compiler Build Settings (`tasks.json`)

Debugging Settings (`launch.json`)