Random Quote Machine

Today I completed the FreeCodeCamp Zipline: Build a Random Quote Machine!

It took me about two hours, plus an hour of styling to get something that I liked.

This is what the completed machine looks like:

quote

Check it out here.

To approach this Zipline, I broke it down into manageable parts.

  1. I created the HTML file with three main items: my page title, div container where I wanted to put the quotes, and two buttons. I used Bootstrap to get the positioning the way it is.
  2. I then wanted to add text to my currently empty div container so I did a Google search on how to dynamically add text with JavaScript and came across this.
  3. Then I created an array of quotes that could be randomly chosen by their array index number. I pulled a sample of quotes from here.
  4. When a user presses the ‘Another thought’ button, I want a quote from my sample to appear. I did a Google search on how to implement an .onClick event and found this.
  5. To pull randomly, I did a search on how to select random items in an array using jQuery and found this. I created a function to hold the sample array and the random number generator.
  6. To create the Twitter sharing button, I used this to help generate the correct data for my link. If you want to use Twitter’s pre-designed buttons, you can go here to generate code for that.
  7. After I got all that to work, I did the page styling. I used Unsplash for my background image. Go here for a text-shadow lesson.

Whoohoo! Working quote machine!

Advertisements

Ubuntu: Opening Sublime from Terminal

Ubuntu:

Download the Sublime package and extract the contents OR  follow the steps here to install from your terminal.
Move your extracted contents to the ‘opt’ folder in your terminal:

$ sudo mv Sublime\ Text\ 2 /opt/

Setting up a link:

$ sudo ln -s /opt/Sublime\ Text\ 2/sublime_text /usr/bin/sublime

Test if it worked by typing ‘sublime’ to open the text editor:

$ sublime

Installing Vagrant, Virtualbox

Vagrant is used to manage your Virtualbox images

Virtualbox is used to create customized development environments. You can create a Linux or Mac environment on a Windows machine with Virtualbox.

Here’s how to get started with Vagrant on Windows.

I installed Vagrant onto my Windows 10 OS first.

Then I installed Virtualbox

Setting up your Virtualbox

I ran the Virtualbox and selected the blue ‘New’ button to create a new virtual machine (which I named Ellen’s Linux). I kept all the values to their defaults and created a 5gb hard disk that is dynamic.

Unnamed QQ Screenshot20151221214033

Go here to download Ubuntu OS. I downloaded the 14.04.3 version.

Then go to your Settings>Display
Click on the CD icon (which should say Empty)
Then click on the CD icon on the right under Attributes>Optical Drive to select the Choose Virtual Optical Disk File
Find your Ubuntu OS .iso file and select it.

Unnamed QQ Screenshot20151221220339

Click the OK button and Run your new virtual machine.

If you get this error in your Virtualbox:

This kernel requires an x86-64 CPU, but only detects an i686 CPU, unable to boot

Go to General> Basic Settings and change the Ubuntu(32-bit) to Ubuntu(64-bit)

Unnamed QQ Screenshot20151221220256.jpg

If you notice your Ubuntu environment running super slow, go to Settings> Display

Check the ‘Enable 3D acceleration’ box in your virtual machine

Unnamed QQ Screenshot20151221220316

Setting up your Vagrant

After installing Vagrant, open your terminal and run this:

$ vagrant box add precise32 http://files.vagrantup.com/precise32.box
$ vagrant init precise32

If you get this error in your terminal:

Vagrant failed to initialize at a very early stage:

The plugins failed to load properly. The error message given is
shown below.

The RubyEncoder loader is not installed. Please visit the http://www.rubyencoder.com/loaders/ RubyEncoder site to download the required loader for 'mingw' and unpack it into 'C:/HashiCorp/Vagrant/embedded/rgloader' directory to run this protected script.

Then go here to download the RubyEncoder (MinGW). Unzip the folder ‘rgloader’ into HashiCorp/Vagrant/embedded/

If you’re prompted, replace any files with the same name.

Create a directory anywhere on your computer and test your Vagrant.
$ mkdir vagrant-test
$ cd vagrant-test
$ vagrant up

Done!

Get into an instance:
$ vagrant ssh

Helpful links:
Ubuntu Vagrant Install and Getting Started/

Getting Started Vagrant Windows

Ubuntu

 

Starting up SASS

SASS is a Ruby gem

I am using Windows 10 to play with SASS:

1. Install SASS from your Terminal:
$ gem install sass

2. Create a SASS file:
$ touch style.css.scss

3. Run this to compile your SASS into CSS file:
$ sass input.scss output.css

4. Watch changes to this file’s directory (optional):
$ sass –watch app/sass:public/stylesheets

5. Watch changes to the stylesheet files:
$ sass –watch input.scss:output.css

This is really great to keep running in a separate terminal so that your stylesheet.css file gets updated with your .scss changes automatically.

Some helpful links:
@mixins: http://www.sitepoint.com/sass-mixins-kickstart-project/

@media queries: http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

Main site: http://sass-lang.com/

The Web & Design

Viking Code School Prep Work – Test Yourself

URL – Uniform Resource Locator, the address of a web page
Domain – the website URL
IP Address – Internet Protocol Address, numerical identification label assigned to each device
DNS – Domain Name System, where all domain names are stored
HTTP – HyperText Transfer Protocol
HTTPS – protocol for secure communication
POP & IMAP & SMTP – protocols for mail delivery

  • Post Office Protocol – allows email client to download emails locally from an email server
  • Internet Message Access Protocol – similar to POP3 but also keeps a copy of the email on the server.
  • Simple Mail Transfer Protocol – allows you to send a message to your server and then the server routes to the final destination.

API – Application Program Interface
Web Server – hardware or software that dispenses web pages
Bugs – errors
The Cloud – internet-based computing
Cookies – information that a website puts on your hard disk so that it can remember something about you at a later time
404 Error – server cannot find what was requested
SEO – Search Engine Optimization


Design

WYSIWYG – What you see is what you get
Responsive Design – scale your design for all devices
Grid System – using rows and columns to design your web page
RGB – Red, Green, Blue
Hex – codes colors are labeled with
Above the Fold – the portion of the web page that is visible when the page first loads
GUI – Graphical User Interface
Front End / Back End – front end is what user sees, back end is behind the scenes

The Command Line

Viking Code School

Web Development Basics

  1. What is the command line?
    A way to communicate with your computer by typing in lines of text.
  2. How do you open it on your computer?
    cmd.exe
  3. What is Bash?
    Bash is a Unix shell and command language
  4. How can you navigate into a particular file directory?
    cd
  5. How can you create a directory?
    mkdir
  6. How can you destroy a directory or file?
    rm test.html
  7. How can you rename a directory or file?
    mv test.html index.html
    test.html being the original file name
    index.html being the new file name
  8. Why are file permissions important?
    To keep your data secure.
  9. How do you view hidden files in a directory?
    ls -a
  10. How do you find information about a particular command?
    <command> –help
  11. What is a “Superuser” and how do you execute commands as this user?
    Execute commands as a superuser using ‘sudo’.
    This permits a user to execute a command as another user.
  12. What is Vim?
    A text editor in your Terminal
  13. How do you quit Vim if you get stuck in it?
    :q!
  14. What is the .bash_profile file and what is it used for?
    Bash will check .bash_profile to get more details of the user like user specific environment and startup programs.
  15. What is the $PATH variable?
    It specifies the directories in which executable programs are located on the machine so that they can be started without knowing the whole path to the file in the command line.
  16. Why might you need to add onto your $PATH variable?
    So that you can list multiple programs and start them without knowing the whole path to the executable file in the command line.
  17. What are alias commands?
    Commands you can save to a shortened string.
    Like if you are tired of typing ‘pwd’ all the time, you can set an ‘alias p = pwd’ so now you just need to type ‘p’.

Vim on Windows 10

I’ve just installed Vim on Windows 10. I’m completely new to Vim so if you have any great resources for learning, please leave a comment!

Vim is a text editor for your Command Prompt (or Terminal).

To install Vim on your Windows machine, you will have to download the executable file here.

To start up Vim, you can open your Command Prompt and type vi

Vim commands:

  • Switch between command mode and insert mode.
    • To switch from command mode to insert mode and insert text at the current cursor position, pressi.
    • To switch from command mode to insert mode and insert text at the beginning of the line, pressI.
    • To switch from command mode to insert mode and insert text at the end of the line, press A.
    • To switch from insert mode back to command mode use Esc.
  • Opening new lines
    • To open a new line after the current one and begin inserting text (switching to insert mode) use o.
    • To open a new line before the current one and begin inserting text (switching to insert mode) useO.
  • Navigating in the source using hjkl
    • Navigate up a line, press k.
    • Navigate down a line, press j.
    • Navigate left a character, press h.
    • Navigate right a character, press l.
  • Save
    • To save current edits use :w (short for write).
  • Exit
    • To exit, type :q (short for quit).
    • To save and exit, type :wq.
    • To force exit without saving, type :q!.
    • To force save and exit, type :wq!.
  • Undo
    • To undo last edit use u.
  • Redo
    • To redo use CTRL + r.
  • Copy and paste
    • To select a block of a text, Ctrl + v to switch to the visual mode, then select a block using the directional keys (hjkl).
    • To copy the selected block, yy (yank line).
    • To paste the selected block, p (paste).
    • To paste before cursor,P.
  • Tab complete
    • To use tab completion, CTRL + p.
  • Move to beginning and end of a file
    • To move to the beginning of the line, 0.
    • To move to the end of the line,$.
  • Substitute/Replace
    • To substitute the character under the cursor, type r followed by the character you will substitute.
    • To switch to replace mode use Shift + r and start typing.
  • Combine operators (like delete) with motions (like end of word)
    • As mentioned, Vim commands are composable. So you can combine operations like delete/change/copy with motions like beginning/end of word/line.
    • To delete to the end of the word, type dw.
    • To delete to the end of the line, type d$.
    • To delete the text within quotes, double quotes, parentheses, brackets use di', di", di(, di{, respectively.
    • To copy to the end of the word, type yw
  • You can type a number before the command to execute it multiple times
    • To delete 4 lines, type 4dd.
  • Repeat last command by typing ..
  • Jump to specific position in a file.
    • To jump to the beginning of a file use gg.
    • To jump to the end of a file use G.
    • To jump to the specific line in a file use 8gg (8 is the line number).
  • Search forward and backward.
  • Match parentheses and brackets.
    • To match the current parentheses or bracket use %.
  • Split horizontally and vertically.
    • To split the screen horizontally use :sp.
    • To split the screen vertically use :vs.
  • Switch between splits.
    • To switch to the next split screen use CTRL + ww.
  • Jump forward and backward.
    • To jump forward a page use CTRL + f.
    • To jump backward a page use CTRL + b.
  • Modify your environment via dotfiles.
    • You can do that after reading this tutorial 🙂 An easy way to edit your .vimrc file is :e $MYVIMRC.
  • Execute a shell command.
    • To execute a shell command simply type :sh followed by the command.

 Here is a cheat sheet for all commands:
vi-vim-cheat-sheet

This getting started guide by SitePoint provided the above information and goes more in-depth.

Vim Tutorial

How the Web Works

Viking Code School Prep Work Q’s

Web Development Basics

  1. What is the internet?
    The internet is just billions of computers connected through wires run all over the Earth.
  2. How is information broken down and sent?
    Information is sent in packets to an IP address.
  3. What are packets?
    Packets are small bits of information sent over the internet.
  4. What is a “client”?
    You! Your browser or computer. Something that’s able to communicate with a server.
  5. What is a “server”?
    Server is where information is stored.
  6. What is HTTP and how does an HTTP request work?
    Hypertext Transfer Protocol. Protocol browsers and servers use to communicate. Browser will send a GET message across the internet when you enter a web address.
  7. What are DNS servers?
    Domain Name Servers are like a phone book. They hold all the domain names and match them with their IP addresses.
  8. What is HTML and how is it used?
    HTML (Hypertext Markup Language) is used to identify and display content.
  9. What is CSS and how is it used?
    CSS (cascading stylesheets) is used to style content.
  10. What is your browser’s Web Inspector (aka Developer Tools) and how can you use it to poke around in a page’s HTML?
    I use Chrome to see what the content and styling is for each HTML element
  11. What happens behind the scenes after you click “search” on google.com?
    Great explanation here:
    http://www.google.co.in/insidesearch/howsearchworks/thestory/

    Unnamed QQ Screenshot20151209030654

Add to Calender link in Mailchimp

I currently help organize the Free Code Camp Atlanta Meetup and am creating an email newsletter for people who don’t use Facebook to get updates about our next meeting. A user pointed out that it would be great if there was an option to add the event to their mobile calendar.

Currently, there is no easy add-to-calendar option in Mailchimp when creating email templates (not that I know of anyway), so how can you add an option for your readers to add events to their calendar?

You can manually create a URL!

To do this,

1. Start your calendar URL with:

https://www.google.com/calendar/render?action=TEMPLATE

2. Add the title of the event:

https://www.google.com/calendar/render?action=TEMPLATE&text=FCC+Meetup+Sandy+Springs

The &text= is necessary before you start your title.
The plus signs (+) will show up as spaces in the calendar event.

3. Add the date and time:

Next you will need to add the start date time and the end date time using &dates=.

https://www.google.com/calendar/render?action=TEMPLATE&text=FCC+Meetup+Sandy+Springs&dates=20151217T230000Z/20151217T020000Z

  • The format for this is: YYYYMMDDTHHMMSSZ/ YYYYMMDDTHHMMSSZ
    YYYYMMDD is the year/month/date
  • Follow the starting YYYYMMDD with a T to separate the date from the starting time.
  • HHMMSS is the starting time. This needs to be in GMT format and will adapt to your user’s timezone.
  • Z needs to be at the end of the time

Follow the same format for the ending date and time.

Since I am in the EST zone, I used this really helpful chart to convert my time into GMT. (We really need to get rid of Daylight Savings Time in the U.S. It’s so confusing to me.)

4. Add a description

https://www.google.com/calendar/render?action=TEMPLATE&text=FCC+Meetup+Sandy+Springs&dates=20151217T230000Z/20151217T020000Z&details=Come+pair+program+with+us!%0AMeet+at+Atlanta+Bread+Company%0AInside+the+Perimeter+Pointe+shopping+center+next+to+Regal+Cinemas%0ADo+not+forget+your+laptops

  • Here, to denote a line break, use %0A
  • To denote a double line break, use %0A+%0A

5. Add the address:

https://www.google.com/calendar/render?action=TEMPLATE&text=FCC+Meetup+Sandy+Springs&dates=20151217T230000Z/20151217T020000Z&details=Come+pair+program+with+us!Meet+at+Atlanta+Bread+CompanyInside+the+Perimeter+Pointe+shopping+center+next+to+Regal+CinemasDo+not+forget+your+laptops&location=1155+Mount+Vernon+Hwy,+Sandy+Springs,+GA+30328

So your URL will end up looking something like this when you finish:

https://www.google.com/calendar/render?action=TEMPLATE&text=FCC+Meetup+Sandy+Springs&dates=20151217T230000Z/20151217T020000Z&details=Come+pair+program+with+us!%0AMeet+at+Atlanta+Bread+Company%0AInside+the+Perimeter+Pointe+shopping+center+next+to+Regal+Cinemas%0ADo+not+forget+your+laptops&location=1155+Mount+Vernon+Hwy,+Sandy+Springs,+GA+30328

Copy and paste your URL into your browser to test how it will look!

Got these steps from the great article about it from Hubspot here.