DEV Community: Junko T.

Rails helper methods to change the form of strings

Junko T. — Mon, 17 May 2021 13:34:50 +0000

Rails has a lot of built-in helper methods that do not just help you write readable/clean code but also provide you with a great coding experience and this is one of the reasons why Rails is so popular. I have created a list of Rails helper methods for changing the form of strings and would like to share with you:

Camel Case

Each next word begins with a capital letter:



"admin_user".camelize #=> "AdminUser"

Snake case

Each space is replaced by an underscore (_) character. The reverse of .camelize:



"AdminUser".underscore #=> "admin_user"

Dasherize

Replaces underscores with dashes in the string:



"admin_user".dasherize #=> "admin-user"

Pluralize

Returns the plural form of the word in the string:



"user".pluralize #=> "users"
"person".pluralize #=> "people"
"fish".pluralize #=> "fish"
"octopus".pluralize #=> "octopi"
"apple and banana".pluralize #=> "apple and bananas"
"apple_and_banana".pluralize #=> "apple_and_bananas"
"apple-and-banana".pluralize #=> "apple-and-bananas"
"AppleAndBanana".pluralize #=> "AppleAndBananas"

Singularize

The reverse of .pluralize, returns the singular form of the word in a string:



"users".singularize #=> "users"
"people".singularize #=> "person"
"apples and bananas".singularize #=> "apples and banana" 
"apples_and_bananas".singularize #=> "apples_and_banana" 
"apples-and-bananas".singularize #=> "apples-and-banana" 
"ApplesAndBananas".singularize #=> "ApplesAndBanana"

Titleize

Capitalizes all the words and replaces some characters in the string to create a nicer looking title:



"the lord of the rings".titleize #=> "The Lord Of The Rings"

Humanize

Capitalizes the first word, turns underscores into spaces, and strips a trailing _id if present. Like .titleize, this is meant for creating pretty output:



"apples_and_bananas".humanize #=> "Apples and bananas"
"user_id".humanize #=> "User"

Classify

Creates a class name from a plural table name:



"user".classify #=> "User"
"apple_and_bananas".classify #=> "AppleAndBanana"

Tableize

Creates a name of the table for models:



"User".tableize #=> "users"
"AppleAndBanana".tableize #=> "apple_and_bananas"

If you know any other helper methods, please let me know in the comment!

How to implement nested routes with React Router

Junko T. — Tue, 11 May 2021 03:37:30 +0000

In the last article, I walked through how to implement client-side routes using React Router. What if we have a list of items and want to create a detail page for each item? Should we create paths like:

https://example.com/movies/1,
https://example.com/movies/2,
https://example.com/movies/3,

and so on?

No, we, web developers, are too lazy to hard-code. With React Router, you can create nested routes with parameters.

React Router uses nested routes to render more specific routing information inside of child components. We can make each item in a list clickable, so, when one item is clicked, the details page of the item will be displayed. And, by setting parameters, we could set routes for details pages dynamically.

I prepared movies data in App.js. Let's create MovieList page and MoveDetails page under it and set up nested routes.

Add links using `<Link>`

First, let's create <MovieList> component and render it in App.js:

// myapp/src/components/MovieList.js

import React from 'react'
import { Link } from 'react-router-dom'

const MovieList = ({ movies }) => {
  return (
    <>
      <h1>Movie List</h1>
      <ul>
        {movies.map(movie => {
          return (
            <li key={movie.id}>
              <Link to={`/movies/${movie.id}`}>
                {movie.title}
                  </Link>
            </li>
           )
         })}
      </ul>
    </>
  )
}

export default MovieList

The <Link> component renders an anchor tag that navigates to different a route defined in the application. There is also <NavLink> you can use when you want to add styling.

We will render <MovieList> component in App.js and pass movies data to it as props:

// myapp/src/App.js

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from "./components/Home"
import Contact from './components/Contact'
import AboutUs from './components/AboutUs'
import MovieList from './components/MovieList'

const App = () => {

  const movies = [
    { id: 1, title: 'Clockwork Orange', year: '1971' },
    { id: 2, title: 'Full Metal Jacket', year: '1987' },
    { id: 3, title: 'The Shining', year: '1980' },
    { id: 4, title: '2001: A Space Odyssey', year: '1968' }
  ]

  return (
    <>
      <h1>My App</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/home/about" component={AboutUs} />
          <Route path="/home" component={Home} />
          <Route exact path="/contact" component={Contact} />
          <Route path="/movies" render={() => <MovieList movies={movies} />} />
        </Switch>
      </BrowserRouter>
    </>
  )
}

export default App

Now we got a list of links in the <MovieList> page, and, if you click one of the items, you will see the id of the item added at the end of the URL, like http://localhost:3000/movies/1, as we defined.

Add nested routes with parameters using route props

Let's create <MovieDetails> component:

// myapp/src/components/MovieDetails.js

import React from 'react'

const MovieDetails = ({ movie }) => {
  return (
    <>
      {movie ?
        <>
          <h1>Movie Details</h1>
          <p>Title: {movie.title}</p>
          <p>Year: {movie.year}</p>
        </>
        :
        <p>No movie found.</p>
      }
    </>
  )
}

export default MovieDetails

It expects movie prop to be passed from the parent component. Now, let's go back to the <MovieList> component.

We want the paths to be like /movies/1, /movies/2. Whatever comes after /movies, we will define it in <MovieList> component. For that, we need React Router <Switch> and <Route>:

// myapp/src/components/MovieList.js

import React from 'react'
import { Switch, Route, Link } from 'react-router-dom'
import MovieDetails from './MovieDetails'

const MovieList = ({ movies }) => {
  return (
    <>
      <Switch>
        <Route path="/movies/:id" render={({ match }) => {
          const id = parseInt(match.params.id)
          const foundMovie = movies.find(movie => movie.id === id)
          return <MovieDetails movie={foundMovie} />
        }} />
        <Route path="/movies" render={() => {
          return (
            <>
              <h1>Movie List</h1>
              <ul>
                {movies.map(movie => {
                  return (
                    <li key={movie.id}>
                      <Link to={`/movies/${movie.id}`}>
                        {movie.title}
                      </Link>
                    </li>
                  )
                })}
              </ul>
            </>
          )
        }} />
      </Switch>
    </>
  )
}

export default MovieList

Let's see what is happening here.

First, you need to put the most specific routes first as I explained in the last article.

Second, what is match? When rendering a component through a <Route>, the function accepts an argument called route props. The route props include match, location, and history. The match object contains information about how a <Route path> matched the URL.

If you add an argument to render prop and console.log() it, you can see the actual route props:

<Route path="/movies/:id" render={routeProps => {
  console.log(routeProps)
  const id = parseInt(routeProps.match.params.id)
  const foundMovie = movies.find(movie => movie.id === id)
  return <MovieDetails movie={foundMovie} />
        }} />

The match object has properties including params. As we call the parameter :id, we can get the value from the URL by match.params.id.

Lastly, use .find method to find movie by id and pass it to <MovieDetails> component.

Using React Router, you can use routes to separate your single page application into usable pieces. It is important for letting users access different pages easily and consistently.

Implementing client-side routing with React Router

Junko T. — Mon, 03 May 2021 20:03:06 +0000

If you decide to use React for your application, you will likely be building a Single Page Application(SPA). As your application grows, you will want your app to have multiple URLs that contain different components. This is where client-side routing comes in.

The major benefit of client-side routing is speed. Using client-side routing, the whole application is loaded on the first GET request. Because of this, it can take a while when the application first mounts, but then we don't have to wait for a round trip server call for each page change after that.

React Router is the most popular routing library for React. It allows you to create intuitive routes that are human-readable so it will be easy to manage the application structure.

I am going to walk you through how to implement client-side routing in a React application using React Router step by step.

Installation

In your application, run this:

$ npm install --save react-router-dom

Or, if you are using yarn, run:

yarn add react-router-dom

Implementation

Add routes

Let's first create the <Home> page and add /home routes in our application so we can go to http://localhost:3000/home to see the <Home> page.

Here is our simplest <Home> page:

// myapp/src/components/Home.js

import React from 'react'

const Home = () => {
  return (
    <>
      <h1>Home page</h1>
      <h3>Welcome to my app!</h3>
    </>
  )
}

export default Home

Now, in App.js, let's set up a route to load the Home component:

// myapp/src/App.js

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'

const App = () => {
  return (
    <>
      <h1>My App</h1>
      <BrowserRouter>
        <Route path="/home" component={Home} />
      </BrowserRouter>
    </>
  )
}

export default App

Great! The <BrowserRouter> component creates a base router and the <Route> component configures each route and specifies the component that should render.

Let's also create <AboutUs> and <Contact> pages and add /about and /contact routes as well:

// myapp/src/components/AboutUs.js

import React from 'react'

const AboutUs = () => {
  return (
    <h1>About us</h1>
  )
}

export default AboutUs

// myapp/src/components/Contact.js

import React from 'react'

const Contact = () => {
  return (
    <h1>Contact page</h1>
  )
}

export default Contact

// myapp/src/App.js

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'
import Contact from './components/Contact'
import AboutUs from './components/AboutUs'

const App = () => {
  return (
    <>
      <h1>My App</h1>
      <BrowserRouter>
        <Route path="/home" component={Home} />
        <Route path="/about" component={AboutUs} />
        <Route path="/contact" component={Contact} />
      </BrowserRouter>
    </>
  )
}

export default App

Exact path

Hmmm, this is not exactly what we want. We want to show <Contact> page only when we go to /contact. In this case, we can use the exact attribute:

// myapp/src/App.js

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'
import Contact from './components/Contact'
import AboutUs from './components/AboutUs'

const App = () => {
  return (
    <>
      <h1>My App</h1>
      <BrowserRouter>
        <Route path="/home" component={Home} />
        <Route path="/about" component={AboutUs} />
        <Route exact path="/contact" component={Contact} />
      </BrowserRouter>
    </>
  )
}

export default App

Great! Now /contact/something path doesn't render <Contact> component.

Use `<Switch>` to set up exclusive routes

What if you change your mind and you want to add home/about instead of /about? Sure, we can do that. But first, you need to know how <Switch> works.

<Switch> works as the switch statement in JavaScript. It checks the path, and, as soon as it finds a match, it breaks out of the block. Let me show you what would be a problem without using <Switch>:

// myapp/src/App.js

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'
import Contact from './components/Contact'
import AboutUs from './components/AboutUs'

const App = () => {
  return (
    <>
      <h1>My App</h1>
      <BrowserRouter>
        <Route path="/home" component={Home} />
        <Route path="/home/about" component={AboutUs} />
        <Route exact path="/contact" component={Contact} />
      </BrowserRouter>
    </>
  )
}

export default App

Oh no. Why do we see the <Home> component too? This happens because of the way JavaSript matches strings.

> "/home".match("/home/about")
null

If I match /home with /home/about, it returns null. On the other hand, if I match /home/about with /home:

> "/home/about".match("/home")
[ '/home', index: 0, input: '/home/about', groups: undefined ]

I get a truthy value. This is why /home/about renders both <Home> and <AboutUs> components. We can avoid this using <Switch> because it breaks after the first match found. Don't forget to put the most specific routes first and more general routes second since <Switch> matches from the top.

// myapp/src/App.js

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from './components/Home'
import Contact from './components/Contact'
import AboutUs from './components/AboutUs'

const App = () => {
  return (
    <>
      <h1>My App</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/home/about" component={AboutUs} />
          <Route path="/home" component={Home} />
          <Route exact path="/contact" component={Contact} />
        </Switch>
      </BrowserRouter>
    </>
  )
}

export default App

Perfect!

In the next article, I will introduce how to set up routes with parameters using React Router.

Slim down models and controllers using Rails Service Objects

Junko T. — Tue, 27 Apr 2021 02:26:21 +0000

Designed by tartila / Freepik
"Fat models, skinny controllers" is one of the best practices for refactoring Rails applications. As an application grows larger and becomes more complex, however, there will be more business logic in models and it gets harder to apply the single-responsibility principle. This is when we should consider extracting the business logic into Service Object to achieve "Skinny models, skinny controllers".

What is a Service Object?

Remember encapsulation in OOP? A service object in Rails is basically encapsulating business logic as a Ruby object which is designed to execute one single action. A service object can be called from anywhere, and it is also easy to test. Consider using it when:

the action is complex
the action is called in multiple models
the action interacts with an external service/API

Extract a service object

Let's see it in action. I have created a Rails application that generates hashtags using Google Cloud Vision API when a user posts an image. I am using the sample code I introduced in the previous post.

I have get_tags method in the Post model:

# app/models/post.rb

class Post < ApplicationRecord
  def get_tags(image)
    api_key = ENV['GOOGLE_API_KEY']
    api_url = "https://vision.googleapis.com/v1/images:annotate?key=#{api_key}"
    base64_image = Base64.strict_encode64(File.new(image, 'rb').read)

    body = {
      requests: [{
        image: {
          content: base64_image
        },
        features: [
          {
            type: 'LABEL_DETECTION',
            maxResults: 5
          }
        ]
      }]
    }.to_json

    uri = URI.parse(api_url)
    https = Net::HTTP.new(uri.host, uri.port)
    https.use_ssl = true
    request = Net::HTTP::Post.new(uri.request_uri)
    request['Content-Type'] = 'application/json'
    response = https.request(request, body)
    results = JSON.parse(response.body)
    results['responses'][0]['labelAnnotations'].each do |result|
      tag = Tag.find_or_create_by(name: result['description'])
      PostTag.create(post_id: id, tag_id: tag.id)
    end
  end
end

The model knows too much about how to tag the images. Let's refactor it extracting the action as a service object.

First, create app/services folder and tag_generator.rb below it. Move all the logic from get_tags to a class .call method:

# app/services/tag_generator.rb

class TagGenerator
  def self.call(post, image)
    api_key = ENV['GOOGLE_API_KEY']
    api_url = "https://vision.googleapis.com/v1/images:annotate?key=#{api_key}"
    base64_image = Base64.strict_encode64(File.new(image, 'rb').read)

    body = {
      requests: [{
        image: {
          content: base64_image
        },
        features: [
          {
            type: 'LABEL_DETECTION',
            maxResults: 5
          }
        ]
      }]
    }.to_json

    uri = URI.parse(api_url)
    https = Net::HTTP.new(uri.host, uri.port)
    https.use_ssl = true
    request = Net::HTTP::Post.new(uri.request_uri)
    request['Content-Type'] = 'application/json'
    response = https.request(request, body)
    results = JSON.parse(response.body)
    results['responses'][0]['labelAnnotations'].each do |result|
      tag = Tag.find_or_create_by(name: result['description'])
      PostTag.create(post_id: post.id, tag_id: tag.id)
    end
  end
end

Now it is a class method of the TagGenerator class. Let's update post_controller.rb as well.

Before:

# app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def create
    @post = current_user.posts.new(post_params)

    if @post.save
      @post.get_tags(params[:post][:image])
      redirect_to @post
    else
      render :new
    end
  end

After:

# app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def create
    @post = current_user.posts.new(post_params)

    if @post.save
      TagGenerator.call(@post, params[:post][:image])
      redirect_to @post
    else
      render :new
    end
  end

Now we didn't just downsize the Post model but also made the tag generator action maintainable and reusable.

This is the result of executing TagGenerator.call. The auto-generated hashtags from the image:

Reference:
7 Patterns to Refactor Fat ActiveRecord Models

Sample code to use Cloud Vision API with Ruby

Junko T. — Tue, 13 Apr 2021 02:00:24 +0000

Vision AI is a set of pre-trained machine learning models provided by Google. By using Cloud Vision API, you can easily integrate vision detection features within applications.
If you are unfamiliar with the API, you might think it would be too complicated to use it in your application and give up before you read the documentation till the end. Don’t worry. I have prepared a sample code that allows you to easily use Cloud Vision API in a Ruby application.

Before you begin, you will need to create an API key and enable Cloud Vision API. If you haven’t done it yet, please follow the official guide.

Here is a sample code:
*The image file used must be on your computer.

require 'base64'
require 'json'
require 'net/https'
# Step 1 - Set path to the image file, API key, and API URL.
IMAGE_FILE = './sample.jpg'
API_KEY = 'XXXXXXXXXX' # Don't forget to protect your API key.
API_URL = "https://vision.googleapis.com/v1/images:annotate?key=#{API_KEY}"
# Step 2 - Convert the image to base64 format.
base64_image = Base64.strict_encode64(File.new(IMAGE_FILE, 'rb').read)
# Step 3 - Set request JSON body.
body = {
  requests: [{
    image: {
      content: base64_image
    },
    features: [
      {
        type: 'LABEL_DETECTION', # Details are below.
        maxResults: 3 # The number of results you would like to get
      }
    ]
  }]
}
# Step 4 - Send request.
uri = URI.parse(API_URL)
https = Net::HTTP.new(uri.host, uri.port)
https.use_ssl = true
request = Net::HTTP::Post.new(uri.request_uri)
request["Content-Type"] = "application/json"
response = https.request(request, body.to_json)
# Step 5 - Print the response in the console.
puts response.body

The main features that can be used with Cloud Vision API are as follows:

TEXT_DETECTION
CROP_HINTS
FACE_DETECTION
IMAGE_PROPERTIES
LABEL_DETECTION
LANDMARK_DETECTION
LOGO_DETECTION
OBJECT_LOCALIZATION
SAFE_SEARCH_DETECTION

See the details here.

Let’s try it out. Here are the results of LABEL_DETECTION, FACE_DETECTION, and OBJECT_LOCALIZATION as examples.

LABEL_DETECTION

{
  "responses": [
    {
      "labelAnnotations": [
        {
          "mid": "/m/01yrx",
          "description": "Cat",
          "score": 0.99598557,
          "topicality": 0.99598557
        },
        {
          "mid": "/m/04rky",
          "description": "Mammal",
          "score": 0.9890478,
          "topicality": 0.9890478
        },
        {
          "mid": "/m/09686",
          "description": "Vertebrate",
          "score": 0.9851104,
          "topicality": 0.9851104
        }
      ]
    }
  ]
}

FACE_DETECTION

{
  "responses": [
    {
      "faceAnnotations": [
        {
          "boundingPoly": {
            "vertices": [
              {
                "x": 85,
                "y": 32
              },
              {
                "x": 228,
                "y": 32
              },
              {
                "x": 228,
                "y": 198
              },
              {
                "x": 85,
                "y": 198
              }
            ]
          },
          "fdBoundingPoly": {
            "vertices": [
              {
                "x": 96,
                "y": 53
              },
              {
                "x": 220,
                "y": 53
              },
              {
                "x": 220,
                "y": 183
              },
              {
                "x": 96,
                "y": 183
              }
            ]
          },
          "landmarks": [
            {
              "type": "LEFT_EYE",
              "position": {
                "x": 137.98528,
                "y": 107.89613,
                "z": -0.0003142357
              }
            },
            {
              "type": "RIGHT_EYE",
              "position": {
                "x": 182.86436,
                "y": 108.30501,
                "z": 3.7897882
              }
            },
            {
              "type": "LEFT_OF_LEFT_EYEBROW",
              "position": {
                "x": 124.37836,
                "y": 98.03804,
                "z": 3.9364848
              }
            },
            {
              "type": "RIGHT_OF_LEFT_EYEBROW",
              "position": {
                "x": 151.22585,
                "y": 97.4466,
                "z": -5.1410694
              }
            },
                                 .
                                 .
                                 .
],
          "rollAngle": 0.5700898,
          "panAngle": 5.027816,
          "tiltAngle": 7.44839,
          "detectionConfidence": 0.89301175,
          "landmarkingConfidence": 0.7306799,
          "joyLikelihood": "LIKELY", # The face seems happy!
          "sorrowLikelihood": "VERY_UNLIKELY",
          "angerLikelihood": "VERY_UNLIKELY",
          "surpriseLikelihood": "VERY_UNLIKELY",
          "underExposedLikelihood": "VERY_UNLIKELY",
          "blurredLikelihood": "VERY_UNLIKELY",
          "headwearLikelihood": "VERY_UNLIKELY"
        }
      ]
    }
  ]
}

OBJECT_LOCALIZATION

{
  "responses": [
    {
      "localizedObjectAnnotations": [
        {
          "mid": "/m/0199g",
          "name": "Bicycle",
          "score": 0.86724836,
          "boundingPoly": {
            "normalizedVertices": [
              {
                "x": 0.6728187,
                "y": 0.673309
              },
              {
                "x": 0.9256048,
                "y": 0.673309
              },
              {
                "x": 0.9256048,
                "y": 0.92176706
              },
              {
                "x": 0.6728187,
                "y": 0.92176706
              }
            ]
          }
        },
        {
          "mid": "/m/02dgv",
          "name": "Door",
          "score": 0.84919137,
          "boundingPoly": {
            "normalizedVertices": [
              {
                "x": 0.40092757,
                "y": 0.31736398
              },
              {
                "x": 0.51375383,
                "y": 0.31736398
              },
              {
                "x": 0.51375383,
                "y": 0.7087951
              },
              {
                "x": 0.40092757,
                "y": 0.7087951
              }
            ]
          }
        },
        {
          "mid": "/m/0d4v4",
          "name": "Window",
          "score": 0.8491046,
          "boundingPoly": {
            "normalizedVertices": [
              {
                "x": 0.11334894,
                "y": 0.2133823
              },
              {
                "x": 0.28181157,
                "y": 0.2133823
              },
              {
                "x": 0.28181157,
                "y": 0.5806629
              },
              {
                "x": 0.11334894,
                "y": 0.5806629
              }
            ]
          }
        }
      ]
    }
  ]
}

Voila! Now you are ready to build a Ruby application with Vision AI. I am excited to see innovative products and services in the future.

Building a Word Counter App in Node.js Using Axios

Junko T. — Tue, 06 Apr 2021 03:31:02 +0000

Modern applications communicate with other servers to accomplish tasks like sending emails, upload/download images, and embedding live Twitter feed. That is when we need HTTP requests. There are multiple ways to make HTTP requests in Node.js. In this article, I am going to introduce the Axios library.

Axios is a JavaScript library that works in both Browser and Node.js platforms. Axios is promise-based, and this lets us perform requests asynchronously.

Implementation

Let's implement a feature in the Node.js-React application I created in the last article that accepts a URL as an input from a user, load the content of the URL, and counts the number of word occurrence in its DOM. I am going to use a URL of a large .txt document of The Mysterious Affair at Styles by my favorite mystery writer, Agatha.

Before we move on, let's create api/app.js and edit api/server.js to separate responsibilities:

// api/app.js

const express = require("express")
const app = express()
const cors = require("cors")

app.use(cors())

app.post("/", function (req, res) {
 // fetch the content from the URL
 // clean the content
 // count the word occurrence and send it back
})

module.exports = app

// api/server.js

const app = require("./app")

app.listen(3000, () => {
  console.log("app listening on port 3000")
})

Now, let's create a module for each task:

Fetch the content from the URL
Clean the content
Count the word occurrence ***

Fetch the content from the URL

First, we need to install axios. Run:

$ cd api
$ npm install axios

Create api/fetch-url-content.js and write:

// api/fetch-url-content

const axios = require('axios')

exports.fetchUrlContent = url => {
  return axios.get(url)
    .then(response => {
      return response.data
    })
    .catch(error => {
      console.log(error)
    })
}

response.data is the response that was provided by the server. Let's use catch for error handling.

Clean the content

To count the occurrence properly, we should:

Remove numbers
Remove special characters except for apostrophes that are part of the words
Replace 2 or more spaces to 1
Remove whitespace from both ends of a string
Convert strings to lowercase

To do this, we need Regular Expression. Create api/clean.js and write:

// api/clean.js

exports.clean = string => {
  const alphabet = string.replace(/[^A-Za-z']+/g, " ").trim()
  const lowerCase = alphabet.toLowerCase()
  return lowerCase
}

As the replace() method searches a string for a specified value and returns a new string where the specified values are replaced, .replace(/[^A-Za-z']+/g, " ") replaces everything besides alphabets, and apostrophes that are neither ends of a string with one space.

The trim() method removes whitespace from both ends of a string.

The toLowerCase() method returns the calling string value converted to lower case.

Count the word occurrence

Let's create api/count.js and implement a function to count the word occurrence of cleaned string:

// api/count.js

exports.count = string => {
  let map = {}
  const words = string.split(" ").filter(word => word !== "")

  for (let i = 0; i < words.length; i++) {
    const item = words[i]
    map[item] = (map[item] + 1) || 1
  }

  return map
}

Call the functions asyncronously

Now in api/app.js, we can call functions provided by each module:

// api/app.js

app.post("/", async function (req, res) {
  const url = req.body.url
  const content = await fetchUrlContent(url)
  const cleanedContent = clean(content)
  const result = count(cleanedContent)
  res.send(result)
})

We need async and await to wait for the fetchUrlContent function to finish executing and then run the rest of the POST method.

Use body-parser to simplify the `POST` request

Also, it is better to use the body-parser Express middleware to read the body of incoming request data, and simplify it. This time we use express.json() and express.urlencoded.

Now, api/app.js should look like this:

// api/app.js

const express = require("express")
const app = express()
const cors = require("cors")
const { fetchUrlContent } = require("./fetch-url-content")
const { clean } = require("./clean")
const { count } = require("./count")

app.use(cors())
app.use(express.urlencoded(({ extended: true })))

app.post("/", async function (req, res) {
  const url = req.body.url
  const content = await fetchUrlContent(url)
  const cleanedContent = clean(content)
  const result = count(cleanedContent)
  res.send(result)
})

module.exports = app

Build the client

Lastly, let's build a form and a table in client/App.js for UI:

// client/App.js

import React from "react"
import "./App.css" // Added some styling

class App extends React.Component {
  state = {
    url: "",
    result: {}
  }

  genRows = obj => {
    return Object.keys(obj).map(key => {
      return (
        <tr key={key}>
          <td>{key}</td>
          <td>{obj[key]}</td>
        </tr>
      )
    })
  }

  submitHandler = e => {
    e.preventDefault()
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accepts: "application/json",
      },
      body: JSON.stringify({
        url: this.state.url,
      }),
    }
    fetch("http://localhost:3000/", options)
      .then(res => res.json())
      .then(data => {
        this.setState({ result: data, url: "" })
      })
  }

  render() {
    return (
      <>
        <h1>Word Counter</h1>
        <form onSubmit={e => this.submitHandler(e)}>
          <label>
            URL:
          <input
              type="url"
              name="url"
              onChange={e => this.setState({ url: e.target.value })}
              value={this.state.url} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <table>
          <thead>
            <tr>
              <th>Word</th>
              <th>Count</th>
            </tr>
          </thead>
          <tbody>
              {this.genRows(this.state.result)}
          </tbody>
        </table>
      </>
    )
  }
}

export default App

This is it! Let's see what we get from The Mysterious Affair at Styles:

How to create a React-Node.js application

Junko T. — Tue, 30 Mar 2021 03:27:42 +0000

React is a JavaScript library for building web applications. Since it won't load in browsers without a web server, we need some mechanism to load the React application's index.html containing all the browser dependencies such as CSS and JavaScript files. In this article, I will walk through how to use Node.js as a web server loading React assets and accepting API calls from the React application.

0. Prepare tools

Before you start, make sure Node and NPM are installed on your computer. If they are not, check Nodejs.org.

1. Create the project directory

Let's start with creating the project directory. In the directory where you would like to save your project, run:



$ mkdir my-app
$ cd my-app

2. Create a React app

It is the best way to start building a React application using Facebook's create-react-app that sets up your development environment. Let's name the application "client."



$ npx create-react-app client

3. Create a Node.js app

Create a directory named "api" for the Node.js application:



$ mkdir api
$ cd api

Now you need to add a package.json file to manage dependencies. You can do it by running a CLI command and answering the questions:



$ npm init

# Click enter to skip the questions and use the default values.
{
  "name": "api",
  "version": "1.0.0",
  "description": ""
}

Express.js is a Node.js web application server framework. You can easily install it by running:



$ npm install --save express

Now, let's create server.js for the API implementation:



$ touch server.js



// api/server.js

const express = require("express")
const app = express()

app.listen(3000, () => {
  console.log("app listening on port 3000")
})

The listen method runs a web server on port 3000.

4. Configure routes

Let's set a GET method route on the homepage to see if the server is working:



// api/server.js

const express = require("express")
const app = express()

app.get("/", function(req, res) {
  res.send("It's working!")
})

app.listen(3000, () => {
  console.log("app listening on port 3000")
})

Start the web server and go to localhost:3000 in your browser:



$ npm start

If you see this message in your browser, your Node.js application is ready!

5. Connect the React client to the Node.js server

Let's use the Fetch API to retrieve data from the web server. In the App.js file of the client:



import React from "react"

class App extends React.Component {
  state = {
    name: ""
  }

  componentDidMount() {
    fetch("http://localhost:3000")
      .then(res => res.json())
      .then(data => this.setState({ name: data.name }))
  }

  render() {
    return (
      <h1>Hello {this.state.name}!</h1>
    )
  }
}

export default App

To send name to the client, rewrite the response of the GET request in server.js of the server:



app.get("/", function(req, res) {
  res.send({"name": "Jane Doe"}) // Should be json format
})

Now, let's start both applications and see the result. First, run npm start in the server:



$ cd api
$ npm start

Then, open another tab in your terminal window and run npm start in the client as well:



$ cd ../client
$ npm start

Make sure you start the server first on localhost:3000 so the client runs on localhost:3001.

Let's go to localhost:3001.

Hmmm...We don't see the name. What's the error? If you open the developer tool, you will see this:

This happens because a cross-origin request occurred when the Fetch request was made. To solve this, we need to install the CORS package in the server:



$ npm install --save cors

Add these lines to server.js in the server to require cors and tell express to use it:



const cors = require("cors")

app.use(cors())

Now, stop the server and restart it:

Voila! We have just created a full stack application.

In the next article, I will implement some feature in this application.

Make your Rails application SEO friendly by setting meta tags

Junko T. — Mon, 22 Mar 2021 03:03:07 +0000

SEO and meta tags

Search engine optimization (SEO) is the practice of increasing the quality and quantity of traffic to a website from search engines. Sharing your website on social media has become crucial to improve the SEO of your websites.

Meta tags are a type of HTML tag that provide search engines with information about a webpage (metadata). It is not displayed on the page itself. Search engines use this metadata to understand additional information about the webpage for crawling and indexing.

Open Graph protocol

Open Graph is a protocol that allows developers to control the previews of their websites on social media when they are shared. It has been very common to see rich previews of websites with appealing images and catchy descriptions on social media these days.

Implementation

Install `meta-tags` gem

Add the meta-tags gem to your Gemfile:



gem 'meta-tags'

And run bundle install command.

Congfiguration



# app/helpers/application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'MyMovies.dev',
      title: 'MyMovies',
      reverse: true,
      separator: '|',
      description: 'The most popular movie website in the world',
      keywords: 'action, horror, drama',
      canonical: request.original_url,
      noindex: !Rails.env.production?,
      icon: [
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'MyMovies.dev',
        title: 'MyMovies',
        description: 'The most popular movie website in the world', 
        type: 'website',
        url: request.original_url,
        image: image_url('login-page.png')
      }
    }
  end
end

The image file should be placed in app/assets/images. The standard size of the Open Graph image is 1200×627px.

Add meta tags to views

Add this to the main layout to set meta tags:



# app/views/layouts/application.html.erb

<head>
  <%= display_meta_tags(default_meta_tags) %>
</head>

This will display the default meta tags we configured in app/helpers/application-helper.rb. This is necessary especially when you don't set meta tags for each page of your website.

Now, let's set meta tags for individual pages. In the beginning of the html.erb file:



<% set_meta_tags title: 'Contact page', description: 'Contact us from...' %>

You don't need to place it inside the <head> tag if you have the <head> tag shared in app/views/layouts/application.html.erb.

This is it! If you want to check how the meta tags are set, go to your website and view page source.

Internationalize your Rails app with Ruby I18n gem

Junko T. — Mon, 15 Mar 2021 02:36:45 +0000

If you plan to create a Rails application in languages other than English, let Rails help you with the translation. Ruby I18n gem provides an easy-to-use framework for translating your application to a single custom language or for providing multi-language support in your application so that you can focus on the development.

In this article, I will walk you through its installation and configuration, as well as demonstrate its usage.

Installation and configuration

Let's configure Japanese translations in our application.

We start with adding i18n to your Gemfile:

# Gemfile

gem 'i18n'

First, let's change the default locale to ja in config/application.rb:

# config/application.rb

config.i18n.default_locale = :ja

The locale key for Japanese is :ja. For other languages, check ISO 639-1 codes.

If you would like to use a different location for your translations, you will need to add load path in config/application.rb:

# config/application.rb

config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}')]

Now we need to store our translations in config/locales/ directory.

You can use YAML (.yml) or plain Ruby (.rb) files, but YAML is preferred among developers. It would be hard to manage if you put all the translations in one file. Instead, it's better to separate models from views and organize files in a hierarchy.

For example:

config
└── locales
    ├── model.ja.yml
    └── views
        ├── admin
        │   ├── user_sessions
        │   │   └── ja.yml
        │   └── users
        │       └── ja.yml
        ├── shared
        │   └── ja.yml
        ├── user_sessions
        │   └── ja.yml
        └── users
            └── ja.yml

Now it is time to do some translation:

# config/locales/model.ja.yml

ja:
  activerecord:
    models: # translation for model name
      user: ユーザー 
    attributes: # translation for attributes of each model
        user: # translation for each attribute of User model
          id: ID
          first_name: 名前
          last_name: 姓
          email: メールアドレス
          password: パスワード
  attributes: # translation for attributes that are common for all the models
    created_at: 作成日
    updated_at: 更新日

# config/locales/views/users/ja.yml

ja:
  users:
    index:
      title: 'ユーザ一覧'
    show:
      title: '%{user_name}さんのユーザー情報' # You can send parameters to interpolation.
    edit:
      title: '%{user_name}さんのユーザー情報を編集'

Usage

Rails provides convenient helper methods to look up the locale inside views.

Views

We can look up the users.index.title value inside app/views/users/index.html.erb template like this:

# app/views/users/index.html.erb

<%= t '.title' %>

# This is equivalent without automatic translation scoping
<%= t 'users.index.title' %>

Models

For models, there are helper methods: model_name.human and human_attribute_name.

# app/views/users/index.html.erb

# This will return activerecord.models.user, "ユーザー"
<li><%= User.model_name.human %></li>

# This will return activerecord.attributes.user.id, "ID"
<li><%= User.human_attribute_name(:id) %></li>

# This will return activerecord.attributes.user.email, "メールアドレス"
<li><%= User.human_attribute_name(:email) %></li>

The strength of Ruby/Rails is that there are a lot of gems provided by the community that do heavy lifting for you, and I18n is one of them.

Reference:
Rails Guides "Rails Internationalization (I18n) API"

Naming conventions for models and methods grammar wise in Ruby/RoR

Junko T. — Sat, 06 Mar 2021 15:02:16 +0000

How much do we pay attention to the names of models and methods? If you are a native English speaker, it might have been easy for you to get a sense of it. To be honest with you, it wasn't too easy for me till I understood there are some conventions, as English is my second language. In this article, I will introduce those conventions that apply to Ruby and Rails.

Model names should be noun

# Bad
class Pay
end

# Good
class Payment
end

This is because if we assign instances to a variable, the name of the variable will be weird.

pay = Pay.new
pays = Pay.all # pays??????

If there are more than two words for the model name, use adjective + noun or noun + noun.

# Bad
class AttachFile
# This is confusing because it looks like a method name.
end

# Good
class AttachedFile
end

# Good
class UserSegment
end

A method which executes something should be verb or verb + noun

# Change user's status to "active"

# Bad
user.active

# Good
user.activate

# Send an email to the user

# Bad
user.email

# Good
user.send_email

Be careful using uncountable nouns in Rails

In Rails, there is a convention for using singular/plural forms when you define something like routes and models. Some uncountable nouns like "information" are accepted, but you should be really careful when using uncountable nouns since it can cause not just confusion but errors.

If you are not sure whether the word you want to use is uncountable or not, or if you don't know what its plural form is, there is a very non-native friendly method in Rails. .pluralize returns the plural form of the given string.

# console

"person".pluralize
 => "people"
"sheep".pluralize
 => "sheep"
"octopus".pluralize
 => "octopi" # Did you know this?!
"the blue mailman".pluralize
 => "the blue mailmen"
'CamelOctopus'.pluralize
 => "CamelOctopi"

# You can set the optional parameter for the count
"apple".pluralize(1)
 => "apple" 
"apple".pluralize(2)
 => "apples"

Besides those conventions, it is always a good idea to get someone to review your code. It helps you get a better sense of naming models and methods.

Understanding the difference between where and select in Rails

Junko T. — Mon, 01 Mar 2021 16:10:47 +0000

In my previous post, I talked about how to solve the N+1 query problem in Rails to improve the performance of the application. There is another thing you should be aware of when filtering data.

When you want to filter a Model in Rails, you have two options: .where and .select. The bottom line is that we should always use .where rather than .select to improve the speed and save the memory of the application. Here is the explaination.

Difference in speed

How do .where and .select work?

.where

Active Record takes care of building the query to avoid injection attacks, and will convert from the ruby type to the database type where needed.

.select

This will build an array of objects from the database for the scope, converting them into an array and iterating through them using Array#select.

This means .select fetches everything from the database, converts them to Ruby objects, and then runs the given block to filter them, while .where puts together a SQL query, lets the database handle the filtering, and then fetches the filtered records. Because of the number of records transported from the database server to the web server, .where works faster than .select.

I experimented in a Rails application where I have 10,000 users. There is a great module in Ruby, Benchmark, which can measure the time used to execute code.

Let's retrieve users who are active by using .select.

# console
Benchmark.measure{ User.select { |user| user.active } }
       user        system    total (user + system)      real
#=>   0.033274    0.120817          0.154092        ( 0.167964 )

These numbers displayed as output are the time taken by code to execute in seconds in four different ways, the user CPU time, system CPU time, the sum of the user and system CPU times, and the elapsed real time. The unit of time is seconds.

Now, let's see what happened when I used .where. The result is quite surprising.

# console
Benchmark.measure{ User.where( active: true ) }
       user        system    total (user + system)      real
#=>   0.001249    0.008157          0.009407        ( 0.022937 )

Difference in memory

The difference between .where and .select affects memory consumption as well. When you filter an array using .where, the actual query will not be executed till it is called for the object. If you use .select, it will instantiate everything right away. This is why .where takes less memory than .select.

There is another module in Ruby, ObjectSpace, that can show the consuming memory size of an object.

# console
users_with_name_select = User.select { |user| user.active }

The memsize_of method of ObjectSpace helps to get the size of an object in bytes.

# console
ObjectSpace.memsize_of(users_with_name_select)
 => 89712

Now, let's try the .where method. As you can imagine, the difference in memory is significant too.

# console
users_with_name_where = User.where( active: true )

# console
ObjectSpace.memsize_of(users_with_name_where)
 => 136

Small differences in code make big differences in the performance of the application. It is good to know tools like ObjectSpace and Benchmark so that we can always keep track of how our applications perform.

Rails N+1 queries and eager loading

Junko T. — Sat, 26 Dec 2020 03:27:43 +0000

What is the N+1 query problem?

The N+1 query problem is one of the common performance antipatterns in ORMs. It happens when a query is executed on each result of the previous query, in other words, when an application gets data from the database and then loop through the result of that data.

This works just fine if your application is small enough and there are only a small number of requests and queries, but if you want to keep your application scalable, you have to eliminate the N+1 problem from your application.

Here's an example with Rails:



# app/models/post.rb
class Post < ApplicationRecord
  belongs_to :user
end



# app/models/user.rb
class User < ApplicationRecord
  has_many :posts
end

Let's print the title and user's username for all the posts.



Post.all.each do |post|
  puts "#{post.title} was written by #{post.user.username}"
end

ActiveRecord executed the queries below:



Post Load (0.4ms)  SELECT "posts".* FROM "posts"
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 4], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 4], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 4], ["LIMIT", 1]]
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 4], ["LIMIT", 1]]

It first retrieved all the Post objects and then user for each post. There are 6 posts in the database in this example, so 7 queries in total were executed.

What if there are 10,000 posts in the database? The number of database connections is limited and you might hit query timeout.

Solve the N+1 problem with "eager loading"

As opposed to lazy loading, eager loading is the process whereby a query loads a resource as soon as the code is executed. It also loads related entities as part of the query.

In Rails, you can use includes method for eager loading.

The includes method specifies relationships to be included in the result set.

Let's rewrite the example using the includes method:



Post.includes(:user).each do |post|
  puts "#{post.title} was written by #{post.user.username}"
end



Post Load (103.7ms)  SELECT "posts".* FROM "posts"
  User Load (32.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" IN (?, ?, ?, ?, ?)  [["id", 2], ["id", 4]]

Now we got the same output by only 2 queries.

What happened is Post.includes(:user) told ActiveRecord to retrieve the corresponding user records from the database immediately after the initial request for all posts. Since the records of users were already in the memory, post.user.username could be retrieved by only one query. Now, even if we have 10,000 posts in our database, we can execute the example code above by just 2 queries! This is a huge difference.

Find the N+1 query problem with the Bullet Gem

Even if you review your code carefully trying to eliminate N+1 queries from your application, errors can slip into production code. The Bullet Gem is a great tool to automate the process.

The Bullet gem is designed to help you increase your application's performance by reducing the number of queries it makes.
It will watch your queries while you develop your application and notify you when you should add eager loading (N+1 queries), when you're using eager loading that isn't necessary and when you should use counter cache.
>- Bullet Gem README https://github.com/flyerhzm/bullet

As your application gets bigger, you need to pay more attention to its speed and performance. Eager loading in Rails is really easy to implement but makes a big difference.

DEV Community: Junko T.

Rails helper methods to change the form of strings

Camel Case

Snake case

Dasherize

Pluralize

Singularize

Titleize

Humanize

Classify

Tableize

How to implement nested routes with React Router

Add links using <Link>

Add nested routes with parameters using route props

Implementing client-side routing with React Router

Installation

Implementation

Add routes

Exact path

Use <Switch> to set up exclusive routes

Slim down models and controllers using Rails Service Objects

What is a Service Object?

Extract a service object

Sample code to use Cloud Vision API with Ruby

LABEL_DETECTION

FACE_DETECTION

OBJECT_LOCALIZATION

Building a Word Counter App in Node.js Using Axios

Implementation

Fetch the content from the URL

Clean the content

Count the word occurrence

Call the functions asyncronously

Use body-parser to simplify the POST request

Build the client

How to create a React-Node.js application

0. Prepare tools

1. Create the project directory

2. Create a React app

3. Create a Node.js app

4. Configure routes

5. Connect the React client to the Node.js server

Make your Rails application SEO friendly by setting meta tags

SEO and meta tags

Open Graph protocol

Implementation

Install meta-tags gem

Congfiguration

Add meta tags to views

Internationalize your Rails app with Ruby I18n gem

Installation and configuration

Usage

Views

Models

Naming conventions for models and methods grammar wise in Ruby/RoR

Model names should be noun

A method which executes something should be verb or verb + noun

Be careful using uncountable nouns in Rails

Understanding the difference between where and select in Rails

Difference in speed

Difference in memory

Rails N+1 queries and eager loading

What is the N+1 query problem?

Solve the N+1 problem with "eager loading"

Find the N+1 query problem with the Bullet Gem

Add links using `<Link>`

Use `<Switch>` to set up exclusive routes

Use body-parser to simplify the `POST` request

Install `meta-tags` gem