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 =).