DEV Community: Ravi Katta

How to Add a favicon to the site in Rails 6 using Webpacker

Ravi Katta — Mon, 06 Jul 2020 00:18:03 +0000

In Rails 6, Adding an icon to the HTML tab is very easy with 3 simple steps.

1) Add an image
2) Reference an image
3) Link an image to HTML head

For the basic understanding on Webpacker, you may refer the useful guide by Chris Oliver (Webpacker Setup)

Here is how our directory structure would look like.

app
 |-controllers
 |-javascript
     |-images
         |-brand_icon.png
         |-brand_icon.ico
     |-packs
          |- application.js
     |-stylesheets 
          |- applicaiton.scss

1) Add an image

The images directory will hold all the images that we link in the project. We can add a types .png, .ico, or .jpeg, but I'd prefer .png as it supports better colors.

Let us save a home image as brand_icon.png to app/javascript/images/*

2) Reference an image

Declare a constant in packs/application.js file, to refer all the images in javascript/images

 const images = require.context('.../images', true)

Now, with this reference, we can embed all the images in our HTML with a pack tag.

 <%= image_pack_tag 'example.png' %>

3) Link an image to HTML head

Don't forget to link the JavaScript pack in Rails views using the javascript_pack_tag helper.

Now finally, embed the newly downloaded home_icon in HTML view with a helper method favicon_pack_tag.

<!DOCTYPE html>
<html>
  <head>
    <%= javascript_pack_tag 'application', 'data-turbo-links-track': 'reload'%>
    <%= favicon_pack_tag 'brand_icon.png' %>
  </head>
  <body>
  </body>
</html>

After compiling, the HTML would look like this.

 <link rel="shortcut icon" type="image/x-icon" href="pack/media/images/brand-icon-a3423sf.png">

As we can see the icon is being pointed to the image in the pack directory.

Result

That's all we need, CHEERS!!

Which is a best-advanced Udemy course on the Javascript?

Ravi Katta — Thu, 16 Apr 2020 00:57:11 +0000

Can anyone suggest the best courses to learn on Udemy? As it's a lot confusing to find the bunch of similar courses.

advanced Javascript
React
node and
AWS

1.Advanced Javascript:
a. One of the best to understand the weird parts ->
Advance Javascript Concepts

b. Reference book: You don't know Js

Ajax loading spinner in Rails with Javascript's events & mutation observer

Ravi Katta — Sun, 19 Jan 2020 23:35:07 +0000

This blog post is intended for intermediate programmers who have prior knowledge of rails ajax forms and javascript events.

There are tons of articles that explain the way to do the AJAX loader using JQuery but how can we solve it with javascript? This thought made me write this article.

Layout

Here we will be building a layout having an account as input and search button to show the list of matching accounts and the loader icon would show and hide during DOM events.

Events

Our main objective is to display a loading spinner during page loading or the time when accounts are being fetched from the backend. So, to fit the spinner in, we can think of 2 two main scenarios

To show a spinner, when a search button is pressed
and to hide it back, when a child is added to a DOM element via Rails AJAX

Setup: Routes, Controllers and Views

I'm not going through the code in detail as it would make the blog lengthy.

First,

We define a route to new and search actions

Rails.application.routes.draw do
  root to: 'accounts#new'

  resources :accounts do
    collection do
      post 'search'
    end
  end
end

Second,

Rendering js when a search action has occurred and sleep is added to delay the backend fetching time to see the loading spinner.

class AccountsController < ApplicationController

  def new
    @accounts = Account.new
  end

  def search
    @accounts = Account.where("name LIKE ?", "%#{new_params[:name]}%")
    sleep(2)
    respond_to do |format|
      format.js
    end
  end

  private

  def new_params
    params.require(:account).permit(:name)
  end

end

Third,

The View will make three things: one a search js, the other a partial and the last one for the main view

1) The partial _accounts.html.erb will be added as a child to the main DOM element via AJAX.

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Account Name</th>
      <th scope="col">Country</th>
        <th scope="col"> State</th>

    </tr>
  </thead>

  <tbody>
    <% @accounts.each do |acct,v| %>
      <tr>
        <td scope="row"><%=acct.name%></td> 
        <td scope="row"><%=acct.country%></td> 
        <td scope="row"><%=acct.state%></td> 
      </tr>
    <% end %>
  </tbody>
</table>

2) The main view new.html.erb, will have an input field, a search button wrapped in a form with remote: true option, and an empty div accounts-details for displaying the accounts list

<h1 class="text-info">Find Accounts</h1>

<div class="shadow-sm p-3 mb-5 bg-white rounded">
<%= form_for( @accounts, url: search_accounts_path, method: :post, remote: true ) do |f| %>

    <div class="form-group">
         <%= label_tag(:name, 'Account Name') %>
         <%= f.text_field :name, required: true%>
    </div>   

    <div class="form-group form-check"> 
        <div class="actions" class="btn btn-info">
            <%= f.submit("Search") %>
        </div>
    </div>

<% end %>

</div>

<!-- List will added as child when a search button is clicked--> 
<div id="accounts-details"></div>

3) The search.js.erb will do the magic by adding the partial ***_accounts.html.erb* as a child to an empty div accounts-details in the main view.

$("#accounts-details").html("<%= j render partial: 'accounts', locals: { accounts: @accounts } %>");

4) A modal dialog box to hold the loading spinner

  <body>
    <div class="container-md">
        <%= yield %>

      <div id="myModal" class="modal">
        <div class="text-center">
          <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </div>
    </div>
  </body>

Finally a loading spinner

a. Display a loading spinner on submit event listener


// Get the Id of the form
  const searchButton = document.getElementById('new_account');
// Get the Id of a loading spinner modal
  const modal = document.getElementById('myModal');

  const displayModal = (e) => {
    //e.preventDefault();
    modal.style.display =  'block' ;
  }

// Listen the submit click on the form and call display spinner
searchButton.addEventListener('submit', displayModal);

b. Hiding a loading spinner on when a DOM element is added by using Mutation observer

// Get the ID of empty div
  const accountsDiv = document.getElementById('accounts-details');

// Get the Id of a loading spinner modal
  const modal = document.getElementById('myModal');

 const hideModal = (e) => {
    modal.style.display = 'none';
  }

// callback function will return the list of things changed an entry DIV. // In our case, a *childList* will be returned true, as we as adding partial.
  const callback = mutations => {
    mutations.forEach( (e) => {
            if (e.type === 'childList' ) {
              hideModal();
            };
    }); 
  };

// Configuration for the observer to listen to the DOM changes
  const config = {
    attributes: true,
    subtree: true,
    childList: true
  };

// Initializing a mutation observer
  const observer = new MutationObserver(callback);

// The main Listener to see DOM element changes
  observer.observe(accountsDiv, config);

Note: As the event listener 'DOMNodeInserted' has drawbacks and so are using Mutation observer

 accountsDiv.addEventListener('DOMNodeInserted', hideModal);

and Finally, Wrap all the logic in DOMContentLoaded event listener.

  window.addEventListener('DOMContentLoaded', domLoaded)

Complete logic

kattak2k / ajax-rails-js-observer

loading spinner with ajax form

That's all, Thanks for reading!!

References

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
https://developer.mozilla.org/en-US/docs/Web/API/EventListener
https://www.rubyguides.com/2019/03/rails-ajax/

Ruby vs Javascript vs Python : Syntax & Semantics

Ravi Katta — Thu, 02 Jan 2020 05:34:46 +0000

An analogy between the Ruby, Javascript, and Python languages

Basics Intro
Arrays Functions
Compound Arrays
String Functions
Numerical Functions
Logical Conditions
Class and Methods or Functions
Regular expression (Regex)
Type Conversion
Heredocs

Basics Intro

Description	Ruby	Javascript	Python
Start Cli	irb	python	node
Integers & floats declaration	x = 1 ; y = 0.23	let x = 1; var y = 0.23	x = 1 ; y = 0.23
Contants Declaration	W = 'ruby'.freeze	const w = 'js'	W = 'ruby'
Variables in strings	"one is #{x}"	`one is ${w}\`	"one is {}".format(x)
Line Comment	# this is comment	// this is comment	# this is comment
Block comments	=being ; =end	/* block comment */	''' block comment '''
write output	puts 'write output'	console.log('write output')document.write("write HTML")	print('write output')
Arrays , Lists	arr = [1,'a',true] ; arr = Array.new	let arr = [1,'a',true]	arr = [1,'a',True]
Hashes, Objects, dictionaries	hash = { 'a' => 2, :b => 4 }	var obj = { 1 : 2 , 'a' : 4}	dict = {1: 2, 'd': 'e' }
Destructuring	a,b,c = [2,3,4] ; p b	var {x : a , y: b} = {x : 1, y : 2} ; console.log(b)	a,b,c = [2,3,4]

Arrays Functions

where x is [3,4,5,6,7,8]

Description	Ruby	Javascript	Python
Remove last element	x.pop x.pop(2)	x.pop()	x.pop()
Remove first element	x.shift(9)	x.shift()	x.remove(x[0]) del x[0]
Add last element	x.push(9) x.append(9) x << 9	x.push(9) y.concat(5)	x.append(9); x.extend([9]); x.insert(len(x), 9)
Add first element	x.unshift(2)	x.unshift(2)	x.insert(0,2)
Sort	x.sort	x.sort()	x.sort()
Reverse	x.reverse	x.reverse()	x.reverse()
Count	x.count(6)	var count = {}; y.forEach(val => count[val] = (count[val] \	\
Length	x.length; x.size; x.count	y.length	len(y)
Maximum	x.max	Math.max(...x)	max(x)
Minimum	x.min	Math.min(...x)	min(x)
index	x.index(3)	x.indexOf(3)	x.index(3)
insert	x.insert(2, 'Feb')	x.splice(1, 0, 'Feb')	x.insert(2, 'Feb')
Make a copy	y = x.dup	let y = [...x]	y = x[:]
Select, filter	x.select{\	el\	el > 4 }
Reduce	x.reduce(:+)	lx.reduce((result,el)=> result + el,0)	reduce(lambda result,y: result + y, x)
Map	x.map{\	el\	el*2}
Each	z = [] x.each{\	el\	z << el*2} p z
Reverse loop	z = [] x.reverse_each{\	el\	z << el*2} p z
Clear , Reset	x.clear	x = []	del x[:]

Compound arrays

where, x is [1,2,3] & y is [2,4,5,6]

Description	Ruby	Javascript	Python
Intersection	x & y #=> [2]	x.filter(e => y.includes(e))	list(set(x) & set(y))
Union	x \	yx.union(y)	var z = [...x,...y][...new Set( z )] 'or'Array.from(new Set(z))
Join	x + y	[...x,...y]	x + y
Difference	x - y	x.filter(e => !y.includes(e));	list(set(x) - set(y))

Strings Functions

where, s = 'Cheat sheet '

Description	Ruby	Javascript	Python
UpperCase	s.upcase	s.toUpperCase()	s.upper()
LowerCase	s.downcase	s.toLowerCase()	s.upper()
SwapCase	s.swapcase	NA	s.swapcase()
Trim	s.strip!	s.trim()	s.strip()
StartsWith	s.start_with?('cheat')	s.startsWith('Cheat')	s.startswith('Cheat')
Repeat	'Hi ' * 3	'Hi '.repeat(3)	'Hi ' * 3
Split	'asdf'.split('')	'asdf'.split('')	list('asdf') 'a#s#d'.split('#')
Join	['a','s','d','f'].join()	["a", "s", "d", "f"].join('')	''.join(['a','s','d'])
Replace	s.replace('Hey')
Find
Count

Numerical Functions

where, el = -22.45

Description	Ruby	Javascript	Python
Ceil	el.ceil	Math.ceil(el)	import math math.ceil(el)
Floor	el.floor	Math.floor(el)	math.floor(el)
Round	el.round(1)	Math.round(el)	round(el)
Absolute	el.abs	Math.abs(el)	abs(el)
Random	rand(10)	Math.ceil(Math.random(10) * 11)	import random random.randrange(1,10)
Zero	el.zero?
Negative	el.negative?

Logical Conditions

Description	Ruby	Javascript	Python
If	if elsif else end	if : elif : else:	if () {} else if () {} else {}
case	case a when else end	switch(expression) {case x:break;case y: break; default:}	NA
Ternary Operator	true == false ? 1 : 2	true == false ? 1 : 2	1 if (True == False) else 2

Class and Methods or Functions

Description	Ruby	Javascript	Python
Instance Methods	def name(input) p inputend	name = function(input) {return `${input}`;} name = (input) => "input"	def name(input): print("This is " + input)
Static Methods	def self.age(input) p inputend	static age(input) {return `${input}`;}	@classmethod def age(input): print("This is " + input)
Class	class Personattr_accessor :name def initialize(name)@name = nameendend	class Person {constructor(name) {this.name = name;}}	class Person:def init(self, name):self.name = name
create instance Object	p = Person.new('Bezos')	let p = new Person("Bezos")let p1 = Object.create(Person)	p = Person("Bezos")
Single Inheritance	class Employee < Persondef initialize(name)super name@name = nameendend	class Employee extends Person {constructor(name) { super(name)this.name = name;}}	class Employee(Person):def init(self, name):self.name = name
Multiple Inheritance	module Studentdef walkendend class Personinclude Humanend	class Student extends Person	class Student(Person):
default values	def name(input='bezos') end	function(input='bezos')	def name(input='bezos')

Regular expression (Regex)

where, lx = "titan titan titan"

Description	Ruby	Javascript	Python
First occurrence	lx.match(/t[a-z]*n/)[0]	(/t[a-z]*n/).test(lx) //=> true	import rere.search("t[a-z]*n", lx).group()
All occurrences	lx.scan(/t[a-z]*n/)	lx.match(/t[a-z]*n/gi)	re.findall("t[a-z]*n",lx)

Type Conversion

Description	Ruby	Javascript	Python
string to Integer where, str2int = \'99\'	str2int.to_i	int(str2int)	parseInt(str2int) Number(str2int)
Integer to string where, int2str = 66	int2str.to_s	str(int2str)	int2str.toString()

Heredocs

Description	Ruby	Javascript	Python
Multiline string	content = <<~HEREDOCI welcome your contributions.please suggesta topic or report an issueHEREDOCp content		content = """ I welcome your contributions.please suggesta topic or report an issue"""print(content)