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

My Open Bashrc

Prerequisites

  • Must be on an operating system that uses .bashrc (or zshrc).

What is a Bashrc

  • The .bashrc file is a file which executes on when you open the command console. It is typically used to set environment variables (such as PATH and LSCOLORS), to set custom aliases, and to set custom functions.

My setup:

My .bashrc file is split up into two separate files. One which contains secure data such as

  • Usernames
  • Passwords
  • Private API endpoints
  • API keys

And my common_bash.sh file which is posted below:

setopt correctall
alias untar='tar -zxvf'
alias common='vi ~/.common_bash.sh'
alias custom='vi ~/.custom_bash.sh'
alias gs='git status'
alias ga='git add .'
alias rs='rails s'
alias rc='rails c'
alias mvncp='mvn clean package'
alias mvnci='mvn clean install'
alias mvnc='mvn clean'
alias mvnp='mvn package'
alias mvni='mvn install'
alias es='elasticsearch'

alias flushdns='ipconfig /flushdns'
alias updatedb='sudo /usr/libexec/locate.updatedb'
alias home='cd ~/'
alias bye='exit'
alias ll='ls -l'
alias la='ls -a'
alias bashrc='vi ~/.zshrc'
alias vimrc='vi ~/.vimrc'
alias bs='source ~/.zshrc'
alias m2='cd ~/.m2'
alias projects='cd ~/Desktop/projects'
alias settings='vi ~/.m2/settings.xml'
LSCOLORS="gxBxhxDxfxhxhxhxhxcxcx"
export LSCOLORS
export PATH="$PATH:$HOME/.rvm/bin" # Add RVM to PATH for scripting
export PGDATA="/usr/local/var/postgres"

alias ls="ls -G"

function cd {
 builtin cd "$@" && ls -F
}

 

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.

 

Install NPM on Mac

Prerequisites

  • Must be running a Mac computer.
  • Must have brew installed on the computer. For help on installing homebrew please reference HERE

What is NPM?

  • NPM is a popular node package manager to find and install common Javascript packages to be used on web development

Steps

 

First off we will need to install XCode so run

xcode-select --install

from your command line.

Next up use brew to install node

brew install node

NOTE: This may take a few minutes to install.

Lastly, just check to make sure that it got installed correctly via

npm -v

And that’s it.

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.