Running Particles.js in Rails

Prerequisites

  • Must be on a project that uses Ruby on Rails.

What is Particles.js?

Step(s)

First off navigate to http://vincentgarreau.com/particles.js/ to download the particles.js zip file.

The simply extract the zip file.

Next, create a new div in your application.html.erb layout file ex:

 

Now navigate to your application.js file and add

//= require turbolinks
//= require particles.min
//= require_tree .

Then copy the fileparticles.min.js from the folderparticles.js-master extracted from the zip file to the directoryassets/javascripts.

Next up let us add a little bit of styling to the div we created earlier. So add

#particles-js {
  width: 100%;
  height: 500px;
  background: #333;
}

to the file application.scss under the directory assets/stylesheets.

Finally, add the following javascript configuration code to one of the coffee scripts you own which are always loaded.

$ ->
  particlesJS('particles-js',
    {
      "particles": {
        "number": {
          "value": 80,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": "#ffffff"
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 5,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 6,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "repulse"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 400,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true,
      "config_demo": {
        "hide_card": false,
        "background_color": "#b61924",
        "background_image": "",
        "background_position": "50% 50%",
        "background_repeat": "no-repeat",
        "background_size": "cover"
      }
    }
  );

And that’s it, you now have a div which implements Particles.js

 

Advertisements

Store Git Credentials

Prerequisites

  • Must be in a project that uses git.

Why store Git Credentials?

  • Mainly simply for convenience. Storing your Git credentials makes it so you won’t be prompted for your username and password every time you try to push and pull to/from your Git repository.

Step(s)

First off navigate to the project which is managed by Git

Then type in:

git config credential.helper store
git push http://example.com/repo.git
Username: <type your username>
Password: <type your password>

And that’s it =).

Getting started with Java

Prerequisites

  • None

Steps

First off I am assuming 0 requirements so lets go out and download a text editor to write our first Java application in. I suggest Sublime 3 to start with which can be downloaded HERE and simply select your OS.

These next 2 steps are specific to windows.

  • I would recommend downloading CYGWIN because dealing with the windows terminal is pretty painful
  • Go through the installation process of Cygwin

Next up lets download the JDK (Java Developer Kit). Accept, read and then check agree to the Java SE Development Kit 8u102 and download it onto your computer.

Install the JDK by simple following the dialog.

Now that you have that all installed lets actually put your first JAVA file together.

Open up sublime and create a new file called HelloWorld.java

Inside HelloWorld.java include the following code:

class HelloWorld {
 public static void main(String[] args) {
 System.out.println("Hello World!"); // Display the string.
 }
}

Save that file up then open up cygwin.

So you are going to have to compile the HelloWorld.java file using javac HelloWorld.java. First lets make sure that you have the command ‘javac’ so type in ‘javac’ and click enter and if you get an error stating that the ‘javac’ command cant be found you need to add it to your PATH. You do this on windows by:

  • Navigate to /usr/bin via ‘cd usr/bin’ and creating a symbolic link to javac via
  • ln -s /cygdrive/c/Program\ Files/Java/jdk.1.8.0_102/bin/javac

or on mac by

  • opening up/creating a .bashrc file in ‘~/’ directory and adding in
  • export PATH="$PATH:<Whatever the path to the jdk.1.8.0_102/bin directory is>";
  • Restart cygwin

Next we can now compile the HelloWorld.java file by navigating to it on cygwin

ex: ‘/cygdrive/c/Users/BPurdy/Desktop/projects’

and executing javac HelloWorld.java.

This should create a HelloWorld.class file (which we can now execute)

Execute this file by running

java HelloWorld

and it will print out HelloWorld to the console!

 

Well done, you have now installed/compiles/and executed your first java application =). Hope this guild helped.

 

Send Email to locally running SMTP server

Prerequisites

  • Must have a smtp server running locally
  • Must have python installed

Steps

To do this we are going to be using a simple python script

So first open up a text editor

Add the following code snippet

#!/usr/bin/python

import smtplib
from smtplib import SMTPException


sender = 'FROM_DOMAIN'
receivers = ['EMAIL_BOX']

message = """From: From Person <FROM_DOMAIN>
To: To Person <TO_DOMAIN>
Subject: SUBJECT

BODY
"""

try:
 smtpObj = smtplib.SMTP('localhost', PORT)
 smtpObj.sendmail(sender, receivers, message)
 print "Successfully sent email"
except SMTPException:
 print "Error: unable to send email"

replace the following variables with their correct values:

  • FROM_DOMAIN – Can be anything. Ex: from@fromdomain.com
  • TO_DOMAIN -Can be anything. Ex: to@todomain.com
  • EMAIL_BOX – The location you are sending it
  • SUBJECT – the subject of the email
  • BODY – The body of the email
  • PORT – What port your smtp server is running on

Then just make sure the file you save it in is executable

To do this from the command line it is simply

chmod +x <NAME_OF_FILE>

then execute it

./<NAME_OF_FILE>

 

 

Compile Less to CSS using MVN

Prerequisites

  • Must have a project that is using MVN.

Steps

To do this we are going to be using the lesscss-maven-plugin

So first open up the pom.xml file

Add the following code snippet in under <plugins> </plugins>

 

<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.7.0.1.1</version>
    <configuration>
        <sourceDirectory>#{LOCATION_TO_LESS_DIRECTORY}</sourceDirectory>
        <outputDirectory>#{LOCATION_TO_TARGET_CSS_DIRECTORY}</outputDirectory>
        <includes>
            <include>#{SPECIFIC_FILES_TO_INCLUDE}</include>
        </includes>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>

replace the following variables with their correct values:

  • LOCATION_TO_LESS_DIRECTORY – Typically src/main/webapp/resources/less but this is where you will be hosting your less files you wish to be compiled to CSS.
  • LOCATION_TO_TARGET_CSS_DIRECTORY – The output directory for the CSS files. Typically src/main/webapp/resources/css. NOTE: Their names will be the same as the less files names just with the extention .css instead of .less
  • SPECIFIC_FILES_TO_INCLUDE – If you wish to compile only specific less files then list their path here

And thats all there is to it. Simple run

mvn clean package

and your css files will be generated.

An additional useful feature the lesscss-maven-plugin has is the ability to “watch” your less files. By running

mvn lesscss:compile -Dlesscss.watch=true

in the directory of your pom file it will “watch” your less files so that when you change one of them. The CSS file is automagicly recompiled.

 

Flyway with MAVEN

Prerequisites

  • Have a project setup using MAVEN
  • The example will be connecting to a MYSQL database but FLYWAY can connect to several different types of databases

What is Quick Search?

Flyway is a tool used to manage a scheme across several developers. Using GIT or SVN flyway allows you to commit SQL that other developers will pull down and using the flyway:migrate command the needed SQL queries will be performed to their database. The process for getting FLYWAY stood up is fairy straight forward and for any further documentation can be viewed HERE.

Steps

First and for most lets add the FLYWAY plugin to our pom.xml file. So open up your pom.xml file and add the following snippet:

<plugin>
    <groupId>org.flywaydb</groupId>
    <artifactId>flyway-maven-plugin</artifactId>
    <version>3.2.1</version>
    <configuration>
        <url>jdbc:mysql://{IP_ADDRESS}:{PORT_NUMBER}/{DATABASE_NAME}</url>
        <user>{USERNAME}</user>
        <password>{PASSWORD}</password>
    </configuration>
    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.36</version>
        </dependency>
    </dependencies>
</plugin>

The above snippet is to connect to a MYSQL database however many different types of databases can be connected to. To connect to different databases you would need the change the dependency to use the correct connector for your db.

 

Replace:

  • {IP_ADDRESS} with the ip address of your database instance.
  • {PORT_NUMBER} with the port number to connect to your database instance.
  • {DATABASE_NAME} with your database name.
  • {USERNAME} with a user to connect to the database with.
  • {PASSWORD} with the password for the user to use to connect to the database.

Run

mvn clean package

To pull down any FLYWAY artifacts that aren’t in your local repository yet.

Next you need to create the directory:

db/migration

under your “resources” directory. This is the default location of where FLYWAY is looking for new scripts to be executed.

Next up run:

mvn flyway:baseline

This command will create a new table called “scheme_versions” that FLYWAY uses to know which scripts have and have not been executed.

 

Now lets test it out by adding a dummy file under the “db/migrations”  called “V1_1__Create_dummy_table.sql” with the following content in it:

create table DUMMY1 (
    ID int not null,
    NAME varchar(100) not null
);

Notice the same of the script. All scripts in this directory must be called “V{VERSION_NUMBER}__{DESCRIPTION_OF_SQL_SCRIPT}.sql“. FLYWAY parses the version part of the file name to keep an index of which scripts have/havent been executed yet.

To run any pending migrations (any migrations in this directory that have yet to get applied to your database) run the following command:

mvn compile flyway:migrate

And there you have it. Your project is now integrated in with FLYWAY!

Go you!

 

 

 

 

Elasticsearch Ruby on Rails intergration

Prerequisites

  • Ruby on Rails installed
  • Basic project created
  • Basic knowledge on Ruby on Rails
  • Mac or Linux OS
  • Homebrew is installed (If not, follow the instructions located HERE)

What is Elasticsearch?

Elasticsearch is a easy to use, free search engine that has recently been picking up steam in the market. It is developed by “Elastic” who has developed a number of tools including Logstash and Kibana (Which i will be going over when i find the need to integrate them into my current project). To view more about Elasticsearch visit their website located HERE.

Steps

First of all we need to download Elasticsearch

brew install elasticsearch

now start it up

elasticsearch --config=/usr/local/opt/elasticsearch/config/elasticsearch.yml

to verify that elasticsearch is up and running curl localhost

curl -X GET http://localhost:9200

to retrieve the given output

{
  "status" : 200,
  "name" : "Nameless One",
  "version" : {
    "number" : "1.2.2",
    "build_hash" : "9902f08efc3ad14ce27882b991c4c56b920c9872",
    "build_timestamp" : "2014-07-09T12:02:32Z",
    "build_snapshot" : false,
    "lucene_version" : "4.8"
  },
  "tagline" : "You Know, for Search"
}

Good job, you now have elasticsearch installed and running. Next we will be integrating it into our Ruby on Rails project. To do this we will be using the “elasaticsearch-rails” gem who’s github documentation is available HERE.

First of all lets add the gems to our Gemfile

gem 'elasticsearch-model', git: 'git://github.com/elasticsearch/elasticsearch-rails.git'
gem 'elasticsearch-rails', git: 'git://github.com/elasticsearch/elasticsearch-rails.git'

and run bundle install

bundle install

Next we need to let ruby know which models we wish to be searchable by elasticsearch. To do this we need to change our model a little bit. I want my “Movie” model to be searchable so that is the one I’m going to be changing.

require 'elasticsearch/model'

class Movie < ActiveRecord::Base
  include Elasticsearch::Model
end

 

Notice I added the require and inclusion of the elasticsearch/model

Now we need to create the appropriate index in elasticsearch and import our models associated data. To do this it is easiest to open the rails console

rails c

and initialize the index importing the current data

Movie.index force: true

That is all it takes to setup and map elasticsearch to a model. To verify it you can now search in that given application via

Movie.search("Titanic")

and retrieve relevant results. For more in-depth documentation please visit this gems details page located HERE.