Vue.js 2 CRUD

Vue.js 2 CRUD Front-end App with no Backend
Source Code
Vue + Vuex — Getting started Useful to make a basic front-end work with backend by storing state using Vuex.
Vuejs + Auth0 - Authentication with Vuejs.

Ruby Plus Podcast Episode 31

Removing Turbolinks from Rails 4

Turbolinks created problem with Stripe payment processing javascript and also with ouibounce javascript. I finally decided to remove it from my Rails 4 project. To remove Turbolinks with your Rails 4 application:

1. Remove the gem 'turbolinks' line from your Gemfile.
2. Remove the //= require turbolinks from your app/assets/javascripts/application.js.
3. Remove the two "data-turbolinks-track" => true hash key/value pairs from your app/views/layouts/application.html.erb

Removing Turbolinks from Rails 4

Testing Elasticsearch Server

Start with a Platform, and Then Use it for Everything

What Amazon Gets it Right
Six Reasons to Split Front End and Back End code into Two Git Repositories
Let's keep frontend outside of Ruby
The case for separating front and back
Splitting Monolithic Rails Applications

Another good reason to separate the front-end as a separate app from the backend is that front-end developers can evaluate their design by seeing what the pages look like with different datasets. They can use dummy data that conforms to the JSON API. They don't have to wait for the backend developers to complete the development.

Linode Longview

Setting Application Dimensions in Mac for Screencasting

#!/usr/bin/env bash

echo "Setting $1 bounds to 720p"

# 720p is 1280x720. 
# Bounds is startX, startY, endX, endY. Adjust size from starting position to account for this
osascript -e "tell application \"$1\" to set the bounds of the first window to {250, 220, 1530, 940}"

# activate the app, to bring it to the front
osascript -e "tell application \"$1\" to activate" 

Gist 

sudo chmod +x ./dimension.sh

dimension Terminal
dimension Chrome
dimension Safari
dimension Textmate

These commands automatically resizes the application dimensions with very minimal effort for screencasting. This script is stolen  from Screencasting Tip: Resize Your App To 720p (1280×720) In OSX.

CORS

Using HTTP/2 to Speed Up Performance of Rails App

If you are using Cloudfront in your Rails app, any new Cloudfront distribution you create after Amazon started to support HTTP/2 will automatically default to supporting HTTP/2 if the browser is capable of taking advantage of it. If you created a Cloudfront distribution before Amazon started to support it, you have to edit the existing configuration and change the selection as shown in the image.

No site key specified. recaptcha rails

In recaptcha gem version 3.3.0, the credential names was:

RECAPTCHA_PRIVATE_KEY
RECAPTCHA_PUBLIC_KEY

In recaptcha gem version 4.3.1, they are called:

export RECAPTCHA_SITE_KEY= '6Lc6BAAAAAAAAChqRbQZcn_yyyyyyyyyyyyyyyyy'
export RECAPTCHA_SECRET_KEY='6Lc6BAAAAAAAAKN3DRm6VA_xxxxxxxxxxxxxxxxx'

So:

RECAPTCHA_PUBLIC_KEY is now called RECAPTCHA_SITE_KEY and RECAPTCHA_PRIVATE_KEY is now called RECAPTCHA_SECRET_KEY.

You can set these environment variables in the .profile file in the home folder of your production server.

Since the recaptcha gem does not have any release notes, you have to compare different releases and look at the diff:

https://github.com/ambethia/recaptcha/compare/v3.4.0...v4.0.0

Comparing different versions I created a release notes on the wiki:

• 4.0.0 : Name of the credentials environment variable names changed
• 4.1.0 : Add Invisible reCAPTCHA implementation feature
• 4.2.0 : Make URLs configurable
• 4.3.0 : Allow random attributes to be rendered for invisible captcha button
• 4.3.1 : Add site key back to data attributes

not able to scroll up in terminal mac os

Run:

reset

in the terminal.

Sprockets Deprecation

** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns: DEPRECATION WARNING: You are using the a deprecated processor interface #.

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns: Please update your processor interface:

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns: https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns:  (called from install at /srv/lafon/shared/bundle/ruby/2.3.0/gems/autoprefixer-rails-6.3.7/lib/autoprefixer-rails/sprockets.rb:37)

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns: DEPRECATION WARNING: Sprockets method `register_engine` is deprecated.

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns: Please register a mime type using `register_mime_type` then

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns: use `register_compressor` or `register_transformer`.

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns: https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors

 ** [out :: rp] Notice: /Exec[bundle exec rake assets:precompile]/returns:  (called from block (2 levels) in at /srv/lafon/shared/bundle/ruby/

https://github.com/rails/sass-rails/issues/381

1. Add the sass rails gem to the the GemFile
   a) gem 'sass-rails', '~> 5.0', '>= 5.0.6'
2. Run gem install sass-rails on the terminal
   a) gem install sass-rails
3. Run bundle install
   a) bundle install --without production && bundle update

pg_search Rails 5.1 Incompatibility

pg_search (2.0.1) is not compatible with Rails 5.1

rails db:migrate

rails aborted!

StandardError: An error has occurred, this and all later migrations canceled:

Directly inheriting from ActiveRecord::Migration is not supported. Please specify the Rails release the migration was written for:

  class CreatePgSearchDocuments < ActiveRecord::Migration[4.2]

shadow effect in CSS

Define a class :

.paper {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Use it for the pages.

rails 4 Uncaught ReferenceError: $ is not defined

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work with $
});

ExecJS::RuntimeError rails

Resolution: 

Add the gem to Gemfile:

gem 'therubyracer', platforms: :ruby

Run bundle install.

Consuming JSON API using jQuery

Rails 5 jQuery .ajax method data format
How to render JSON from an ajax request in rails?
Rails with jQuery Ajax GET
Ruby on Rails: POST a JSON Array
Saving data with ajax in rails
Get progress of AJAX call to get JSON in Rails
Rails - ajax response handling
Ajax Bad Request 400 Rails


Simple Example to Consume JSON using jQuery
How to Use JSON APIs with jQuery
(JSONP to make calls to external domains)
JSONP Examples
jQuery JSON Docs