DEV Community: Patrick Jones

Leetcode #234 - Palindrome Linked List

Patrick Jones — Tue, 29 Sep 2020 18:20:52 +0000

Problem: Given a singly linked list, determine if it is a palindrome.

Method 1: Create an array of values

The structure of a linked list doesn't provide access to the total size of the list. To get around this we can iterate over the list and push the node values on to an array. At that point we have access to the array's length and can use a single pointer i to compare values opposite to eachother in the array.

var isPalindrome = function(head) {
    let values = []
    // push all node values into an array
    while (head !== null) {
        values.push(head.val)
        head = head.next
    }
    // iterate over array and compare values
    for (let i = 0; i < values.length >> 1; i++) {
        // (values.length - i - 1) is our virtual pointer
        if (values[i] !== values[values.length - i - 1]) return false
    }
    return true
};

The time and space complexity of this method are O(n)

Method 2: Reverse the Second Half in Place

We can use a fast and slow pointer to get to the center and the end of the list, respectively. Once we are able to determine the center, we use the slow pointer to re-link the second half of the list in reverse. I like to conceptualize this method as taking a snake and turning its tail into a head, resulting in a two headed snake with a tail (ListNode.next = null) in the middle.

var isPalindrome = function(head) {
    if (head === null || head.next == null) return true
    let slow = head
    let fast = head

    while (fast !== null && fast.next !== null) {
        fast = fast.next.next
        slow = slow.next
    }
    // if list length is odd, move slow over one to start
    // the second half of the list
    if (fast) {
        slow = slow.next
    }

    // reverse the second half of the list
    slow = reverse(slow)
    fast = head

    // check for palindromicity
    while (slow) {
        if (slow.val !== fast.val) {
            return false
        }
        slow = slow.next
        fast = fast.next
    }
    return true
}

function reverse(head) {
    let prev = null
    let next;
    while (head) {
        next = head.next
        head.next = prev
        prev = head
        head = next
    }
    return prev
}

The time complexity is O(n) and space complexity is O(1) as we are not creating any extra arrays.

Better Conditional Rendering with Is.js

Patrick Jones — Thu, 10 Sep 2020 04:27:38 +0000

What is Conditional Rendering

Conditional rendering as a term describes the ability to render different UI markup based on certain conditions. In React-speak, it is a way to render different elements or components based on a condition. This concept is applied often in the following scenarios:

Rendering external data from an API
Showing/hiding elements
Toggling application functionality
Implementing permission levels
Authentication and Authorization

Problems With Readability

Take the UserInfo component as an example. The user object must be populated with data before the h1 can be rendered. To achieve this, a Logical && is used to block the right hand side of the expression from being rendered if the left hand side is fails to meet a condition. This is also known as Short Circuit Evaluation.

function UserInfo({user}) {
  return (
    (user !== {}) && <h1>{user.name}</h1>
  )
}

While this format gets the job done, it can lead developers astray when trying to quickly infer the 'meaning' of a component. The problem is especially evident when rendering is dependent on array length.

function UsersList({users}) {
    return (
        (users && users.length > 0) &&
            users.map(user => <UserInfo user={user} />)
    )
}

This is objectively ugly and the nested && operators are just as bad as nested ternaries.

A Convenient Solution

Is.js is a micro-library that, at only 4kb when gzipped, solves this readability issue without adding much to an application's total package size. It comes packed with plenty of features, but I'll only be focusing on the parts that lend themselves to making conditional rendering more declarative and easy to read.

To get started, install is.js in your app:

npm install is_js

Now you can include is_js in any file.

// src/app.js
import React from "react"
import is from "is_js"
...

Examples

Check for Emptiness

function UserInfo({user}) {
    return (
        is.not.empty(user) &&
            <h1>{user.name}</h1>
    )
}

function UsersList({users}) {
    return (
        is.not.empty(users) &&
            users.map(user => <UserInfo user={user} />)
    )
}

The intentions of this code are much more apparent because they are immediately readable by a developer. No interpretation required.

Make the move from Sqlite3 to Postgres in Rails 6

Patrick Jones — Thu, 27 Aug 2020 22:25:49 +0000

If you created a rails project without specifying a database, chances are rails defaulted to a sqlite3 database. While this is a great start for development, it can lead to substantial roadblocks as you encounter the need to deploy to services with ephemeral storage or want to use more advanced database features such as jsonb and array datatypes.

There are plenty of relational database options out there, but the most widely used and, in my opinion, the most versatile option is Postgresql. In this article I'll break down the process of installing postgres, modifying db configs, creating your database, and finally importing your existing database.

Install Postgres

If you are using a mac, the easiest way to get started with postgres is to follow the install instructions at https://postgresapp.com/.

For Debian based linux users, install is even easier. Just run:

sudo apt-get install postgresql

Check to make sure postgres is running:

sudo systemctl status postgresql
● postgresql.service - PostgreSQL RDBMS
     Loaded: loaded (/lib/systemd/system/postgresql.service; enabled; vendor preset: enabled)
     Active: active (exited) since Thu 2020-08-27 16:20:11 CDT; 50min ago
    Process: 1845 ExecStart=/bin/true (code=exited, status=0/SUCCESS)
   Main PID: 1845 (code=exited, status=0/SUCCESS)

Aug 27 16:20:11 ra systemd[1]: Starting PostgreSQL RDBMS...
Aug 27 16:20:11 ra systemd[1]: Finished PostgreSQL RDBMS.

Since this command returned an Active status, we are good to go!

Update Gemfile

Remove the sqlite3 gem from your project:

bundle remove sqlite3

Now add and install the postgresql gem:

bundle add pg --install

Update Database Config

Replace the current contents of config/database.yml with the following config. Make sure you replace <app_name> with the actual name of your application.

default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: <app_name>_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: <app_name>_test

production:
  <<: *default
  database: <app_name>_production
  username: pixel_place
  password: <%= ENV['PIXEL_PLACE_DATABASE_PASSWORD'] %>

Setup The New Database

Now that postgres has been added to your project and configured, a few changes need to be made to your migrations. If you have any columns of the type t.string in your migrations, it is highly recommended that you replace that type with t.text.

The main reason for this stems from the way ActiveRecord casts types between different databases. The type t.string will cast to a VARCHAR(255) in postgresql, limiting any existing string data to only 255 characters. Sqlite3 on the other hand is much more lenient with storing character data so your data may have been saved as text to begin with. To save ourselves any headaches further down the line, defaulting to the t.text type is a safe bet.

# db/migrate/01_create_users.rb
class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.text :first_name
      t.text :last_name
      t.text :username

      t.timestamps
    end
  end
end

You are are now ready to run a few rake commands:

rake db:setup

# or

rake db:create db:migrate db:seed

At this point you should have a working postgresql database. Be sure to run rails s and navigate to http://localhost:3000 to make sure your application is running without error.

Bonus: Import an existing sqlite3 database into postgres

If you have a populated database that needs to be saved, the process of importing data into postgresql is made trivial with a tool called pgloader.

First, install pgloader on your system:

# linux
apt-get install pgloader

# mac
brew install pgloader

Then use pgloader to import your sqlite3 db file:

pgloader ./db/db_name.sqlite3 postgresql:///db_name

Autoscrolling lists with React Hooks

Patrick Jones — Fri, 19 Jun 2020 18:39:51 +0000

Create a container

To start, create a component that recieves a list of [items] and displays each item by mapping over the list.

export const AutoScrollContainer = ({ items }) => {
    return (
        <div className="autoscroll-container">
            <div className="scroll-list">
                {items && items.map((item, index) => 
                    <p key={index}>{`${index + 1}. ${item}`}</p>
                )}
            </div>
        </div>
    )
}

React's useRef hook will provide a reference to a DOM element at the bottom of the list. Then we can use the browser's scrollIntoView() API to do the scrolling for us.

export const AutoScrollContainer = ({ items }) => {
    const bottomRef = useRef();

    const scrollToBottom = () => {
        bottomRef.current.scrollIntoView({
        behavior: "smooth",
        block: "start",
        });
    };
    return (
        <div className="autoscroll-container">
        <button type="button" onClick={scrollToBottom}>
            Scroll To Bottom
        </button>
        <div className="scroll-list">
            {items &&
            items.map((item, index) => (
                <p key={index}>{`${index + 1}. ${item}`}</p>
            ))}
            <div ref={bottomRef} className="list-bottom"></div>
        </div>
        </div>
    );
};

Add a button to trigger the scroll and watch the magic happen before your eyes.

That's pretty neat! But at this point this is nothing auto about this solution. To fix this, we can react to changes in [items] using useEffect to trigger the scroll from there. I'm adding another useEffect hook to handle the initial mount as well.

export const AutoScrollContainer = ({ items }) => {
    ...

    useEffect(() => {
        scrollToBottom()
    }, [items])

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

    ...
}

Let's also add a some logic to mock live data.

const ITEMS = "perferendis asperiores adipisci voluptatibus autem repellendus".split(" ")
export const App = () => {
    ...
    // Add a new item to `items` every second.
    useEffect(() => {
        let interval = setInterval(() => {
            let item = ITEMS[Math.floor(Math.random() * ITEMS.length)];
            setItems([...items, item])
        }, 1000);

        // remember to clear timers
        return function cleanup() {
            clearInterval(interval);
        };
    });
}

Conclusion

You now have an auto-scrolling react component! You could implement an infinite scroll to handle very large lists of live data if you felt inclined.

Build a Highly Performant Api with Rails 6 and fast_jsonapi

Patrick Jones — Fri, 19 Jun 2020 17:59:57 +0000

Create a boilerplate Rails project

First generate a new rails api:

$ rails new rails-jsonapi \
  --database=postgresql \
  --skip-action-mailbox \
  --skip-action-text \
  --skip-spring -T \
  --skip-turbolinks \
  --api

$ cd rails-jsonapi

This will create a boilerplate Rails api project using postgresql as a database with a few things removed to keep it concise.

Next, generate the models and controllers:

rails g resource Author name:string --no-test-framework
rails g resource Article title:string body:text author:references --no-test-framework

Don't forget to add the has_many macro to the author model to complete the association.

# app/models/author.rb
class Author < ApplicationRecord
    has_many :articles
end

Add some seed data to get started.

bundle add faker

# db/seeds.rb
require 'faker'

Author.delete_all
Article.delete_all


10.times {
    Author.create( name: Faker::Book.unique.author)
}

50.times {
    Article.create({
        title: Faker::Book.title,
        body: Faker::Lorem.paragraphs(number: rand(5..7)),
        author: Author.limit(1).order("RANDOM()").first # sql random
    })
}

Setup the database, run migrations and generate seed data.

rails db:create db:migrate db:seed

Setup the `Api` endpoint and controller

Wrap the generated routes in a scope block to add /api as the base route for all routes nested with it. Don't worry about explicitly defining controller actions at this point.

# config/routes.rb
Rails.application.routes.draw do
  scope :api do
    resources :articles
    resources :authors
  end
end

Setup ArticleController and AuthorController with basic actions :index and :show, called by GET requests to /api/articles and /api/authors, respectively.

# app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
    before_action :find_article, only: :show
    def index
        @articles = Article.all
        render json: @articles
    end

    def show
        render json: @article
    end

    private
        def find_article
            @article = Article.find(params[:id])
        end
end

# app/controllers/author_controller.rb
class AuthorsController < ApplicationController
    before_action :find_author, only: :show
    def index
        @authors = Author.all
        render json: @authors
    end

    def show
        render json: @author
    end

    private
        def find_author
            @author = Author.find(params[:id])
        end
end

At this point we have a working api that response to requests with json! Any request sent to GET /articles However, we haven't implemented any of our associations into our response logic, so the response body for GET /articles does not include any author data.

[
  {
    "id": "1",
    "type": "article",
    "attributes": {
      "title" "Where the Red Fern Grows",
      "body": "...",
      "author_id": 2,
    }
  }
]

We could solve this by changing the render lines to include the associations...

...
def index
  @articles = Article.all
  render json: @articles, include: [:author]
end

...but this can get cumbersome very quickly, and is not DRY at all. There are many ways to solve this issue, one of which being the active_model_serializers gem. If you just need to wrangle your json responses, this is a a viable option.

Enter Fast JSONapi

Fast JSONapi is a Ruby library created by the Netflix development team. It includes a serializer that implements the full https://jsonapi.org/ spec. This will introduce a bit more complexity in both the frontend and the backend, but the performance benefits can easily outweigh all of that, depending on your situation. You can learn more about fast_jsonapi's performance benchmarks https://github.com/Netflix/fast_jsonapi/blob/master/performance_methodology.md.

Add the fast_jsonapi gem to the project.

bundle add 'fast_jsonapi'

We can now use the serializer generator that is bundled with fast_jsonapi.

rails g serializer Article title body
rails g serializer Author name

This will create two files:

# app/serializers/article_serializer.rb
class ArticleSerializer
  include FastJsonapi::ObjectSerializer
  attributes :title, :body
end

# app/serializers/author_serializer.rb
class AuthorArticleSerializer
  include FastJsonapi::ObjectSerializer
  attributes :name
end

To keep it simple, we will only define the associations on the ArticleSerializer.

# app/serializers/article_serializer.rb
class ArticleSerializer
  include FastJsonapi::ObjectSerializer
  attributes :title, :body
  belongs_to :author
end

Implement the serializers in their respective controllers.

# app/controllers/authors_controllers.rb
class AuthorsController < ApplicationController
    before_action :find_author, only: :show
    def index
        @authors = Author.all
        options = { include: [:articles]}
        render json: AuthorSerializer.new(@authors, options).serializable_hash
    end

    def show
        options = { include: [:articles]}
        render json: AuthorSerializer(@author, options).serializable_hash
    end

    private
        def find_author
            @author = Author.find(params[:id])
        end
end

# app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
    before_action :find_article, only: :show
    def index
        @articles = Article.all
        options = { include: [:author]}

        render json: ArticleSerializer.new(
            @articles.preload(:author), 
            options
        ).serializable_hash
    end

    def show
        options = {:include => [:author]}
        render json: ArticleSerializer.new(@article, options).serializable_hash
    end

    private
        def find_article
            @article = Article.find(params[:id])
        end
end

Run rails s to start up the rails server.

If you're not already using a rest client such as Insomnia or Postman, get with the times! Make a GET request to localhost:3000/articles.

The response should look similar to this:

{
  "data": [
    {
      "id": "1",
      "type": "article",
      "attributes": ...,
      "relationships": {
        "author": {
          "data": {
            "id": "9",
            "type": "author"
          }
        }
      }
    },
    {
      "id": "2",
      "type": "article",
      "attributes": ...,
      "relationships": {
        "author": {
          "data": {
            "id": "3",
            "type": "author"
          }
        }
      }
    },
    {
      "id": "3",
      "type": "article",
      "attributes": ...
      "relationships": {
        "author": {
          "data": {
            "id": "3",
            "type": "author"
          }
        }
      }
    }
  ],
  "included": [
    {
      "id": "9",
      "type": "author",
      "attributes": {
        "name": "Tawna Denesik PhD"
      }
    },
    {
      "id": "3",
      "type": "author",
      "attributes": {
        "name": "Mrs. Carmela Herzog"
      }
    }
  ]
}