Monday, April 4, 2016

Week 12 - Wikipedia App - devise, haml, simple_form, bootstrap-sass



Today I finished Mackenzie Child's 12 Apps In 12 Weeks Challenge.  Below is the wikipedia app. You can create articles and put them into categories, which can be used to filter the articles.  I used simple_format again, which allows users to input html into the form for each article.

Show View


I saved this app for last only because I wanted to do the other 3 after this one first.  They were very different from the other apps.

Features to add:
1. Table of Contents
2. Embed pictures
3. Rendering an iframe so youtube links become embedded videos right on the view page.
4. Rich text formatting
5. Ability to upload text files

Technologies used: devisehamlsimple_formbootstrap-sass

So this concludes my 12 in 12 challenge.  I will make a post about my experience building all 12 apps in my next blog.

Kenyacode

Friday, April 1, 2016

Week 11 - Dribble App - carrierwave, acts_as_votable, fog-aws, mini_magick, devise, simple_form, haml




Today I finished work on the Dribble App.  It is a cool way to display artwork and anything visually stunning. (i.e. Wonder Woman)  Since it supports pictures and gifs, I had to again use paperclip, I mean carrierwave.  Paperclip didn't work for me for the 3rd time.  It works well locally but integration with S3 did not compute.

I learned some cool new things in this app.  Like in the picture below, on the right I can display a random post.  It was done with one simple line of code.






While working on a bug for a few hours I ran into a solution that wasn't covered by Mackenzie Child. When you push this app to heroku, you will not have a database.  There is code in post/show.html.haml that is looking to display a post that will break because there aren't any posts.

The code looks for a post that does not have the same user_id as the post that is displaying, puts it into a collection and gets a random one to display.  So I just thought, well it should only show a post if there is more than 1 post.


So in line 1 I added an if statement. if Post.count > 1 display the random post else display the sentence You have the first post.


It is not a big deal, since I can populate the database and it takes just one to keep the app from breaking, but in my book its a bug that had to be fixed.

Functionality I would like to add:
1. Better picture formatting so each pic on index page is the same size
2. Search function.
3. Rich text formatting
4. Social media shareability
5. Make pictures 30%-50% bigger. Move random box view down to lower right corner.
6. Add a large version of the picture to have as a background image for each post.
7. Tie dislike button to comments, so a user has to leave a comment if disliking a post.

Tune in next week, for the final app.

Kenyacode

Wednesday, March 30, 2016

Week 10 - Forum App - devise, haml, simple_form, bootstrap-sass, heroku, normalize.css



Hello and welcome to another exciting episode of 12 apps in 12 weeks.  I'm your host Kenyacode and this is week 10.  Yesterday I made a forum site.  If you have been reading this blog since week one or have been doing the challenge yourself, you should have see that many of these apps share much of their functionality.  The forum app has posts and comments, just like the blog app, the raddit app, and the movie review app.  Websites can very different in content but be very similar in functionality.

Again I made a landing page that tells users and visitors what the site is about.  I plan to add a landing page to all 12 websites.  It just makes sense.

Here is the page you see when you log in.


Here is the show page for each Forum post.


What I had to figure out in this app was how to use normalize with bootstrap.  First I just imported bootstrap and bootstrap sprockets into the application.css.scss file at the bottom of the normalize imports.  Well that changed fonts and sizes for the rest of my page.  After 30 min I realized I needed to have the bootstrap on top of the normalize so normalize could override bootstrap.

Now it works great.

Features I would like to add:
1. Get avatars for users
2. Give users chat functionality.
3. List users currently online
4. To have this be part of my episodic app that i'm building. Hence why I named it episodic-forum.
5. Linking the tv show to its corresponding page on the forum.
6. This app would be good to incorporate AJAX.

Tune in next week, same app time same app url,

Kenyacode

Technologies used: devise, haml, simple_form, bootstrap-sass, heroku, normalize.css
Github page: https://github.com/kenyacode/forum

Friday, March 25, 2016

Week 9 - Notebook App - Normalize.css, font awesome, haml, simple_form, devise

Yesterday I finished my 9th App in Mackenzie Child's 12 apps in 12 weeks.  I changed the order a bit and did the 11th app on the 9th week.  I saw the design elements and couldn't wait to start it.  I was looking forward to working more on styling so I jumped right in.

This app is quite different from the others.  There is a different root page for users and for visitors. Also you can only see the notes that you have created.  Your notes are not in anyway visible to other users.  Okay here is what it looks like if you are a visitor.

Click Here to got to the website

You get this great splash page with marketing info.  I have placeholders.  Can you guess what the theme is for the 3 columns on the bottom image?

If you are signed in, this is what you see.  Each note or scribble in my case, is represented visually as a card.


The design was really interesting.  I love getting new tools and tips so here's one for you.  The css I downloaded from Normalize.  Normalize makes browsers render all elements more consistently and in line with modern standards.  Go the page and click download then simply copy and paste into a new file in your app called app/stylesheets/normalize.css.scss.  There were some other css pages Mackenzie included on his github page and they were imported into application.css.scss
     @import 'normalize.css';
     @import 'global.css.scss';
     @import 'notes.css.scss';
     @import 'welcome.css.scss';

Another fun feature is the ability to include html in the notes/scribbles.  There is a method that you add to the show page that allows html.  It is called simple_format and it is provided by simple_form.


I put html code into the edit page and got a beautiful formatted notebook entry.

If you didn't know, when you allow html to be added into a form you leave your application open to hacks.  What happens is users are able to put javascript into the form that the server can interpret as your code.  Don't worry, thanks to some Wheaties eating developers at Ruby, we are protected from that type of attack.

Check out my "Marvel's Civil War Reading Guide" complete with links and pictures.


So that's it for week 9.  I am truly enjoying this process.  I'm getting better and faster at writing code, having a list of useful gems, and deploying to heroku.  Until next week.

Features I would like to add:
1. Instructions on how to format pics and text.
2. Group notebook together into a collection
3. Rich text formatting
4. Suggestions for users on subjects to write about.
5. Email notebooks
6. Social media shareability

Kenyacode

Technologies used: font awesomenormalize.css, hamlsimple_formpumapostgreSQL,
Github Page: https://github.com/kenyacode/notebook

Wednesday, March 23, 2016

Week 8 - Workout Log - Haml, simple_form, bootstrap-sass, puma, postgreSQL

Click here to go to website

Yesterday I finished the 8 app in Mackenzie Childs 12 apps in 12 weeks challenge.  The workout log has shown me that I have learned a lot and that I am much faster at programming than I was 8 weeks ago.

Last week I went to Carbon Five's Hack Night, a meet-up in Santa Monica. Michael Wynholds was speaking on date-time in code.  I had no idea that time had so many elements to it.  Is it the current time? A time ago? Do you want the time from the timezone where the user is or the server or the company? That talk came in handy when building this app as it allowed me to search for different ways to interpret date time than was shown in Mackenzie's tutorial.

This is a simple_form for a workout.  Line 2 is the input field for date.  The date used in the tutorial was formatted 2014-10-26 11:47:00 UTC. (see green image below) No one reads date time like that so I changed not only the displayed date time, but the drop down menu to input it as well. (see blue image below)






One look at his design and I knew I had to brighten the colors and add forms divs to make it look nice and neat.  I put a table in the first form with the workout info, then made a second form with the exercise info, then a third form with the form partial.






If you are wondering how I did it, I found a great blog by Akshay Mohite that had all the date-times in ruby displayed. https://hackhands.com/format-datetime-ruby/

Features I would love to add:
1. Add users
2. Drop down list of exercises, based on Body Section.
3. Social media shareability
4. Search Functionality
5. Edit and update each exercise

Until next time, Kwaheri (see you later)

Kenyacode

Technologies used: Hamlsimple_formbootstrap-sasspumapostgreSQL
Github Page: https://github.com/kenyacode/workout

Friday, March 11, 2016

Week 7 - Jobs Board App - Bootstrap-sass, Simple Form, Haml

Click here to visit page

Yesterday I made the 7th app in Mackenzie Child's 12 app in 12 weeks challenge.  These apps generally take a week to make, maybe a few days but I was able to make this app in one day.

I learned about the f.collection_select method that allows for the form to filter from an attribute on the job model.  We made a category model, but inputed them manually into the database using the console, so that they could not be adjusted by a user.

I realized I had to do add the categories to Heroku after uploading the app.  I like the styling too.  It looks "pretty" as my teachers used to tell me.

Features I would like to add:
1. Search functionality
2. Add fields for location and date inputed.
3. Categories
4. Search by company, city, category.
5. Add users
6. Add Employer users.
Kenyacode

Wednesday, March 9, 2016

Week 6 - Todo App - Postgresql, Puma Server, Heroku

Click here to open in a new window
Today I started and finished this todo app in about 3.5 hrs.  A todo app is the first app I ever coded. The cool styling is all just Sass, so basic css.  I used a google font called "Lato" and "font-awesome" that allows you to use hundreds of icons.

You just add the cdn to your application.html.erb as in line 9.  I love the slick, simplistic look of the app.  I played around with the colors and I'm really happy with it.

Features I would like to add:
1. Users
2. Ability to uncheck a todo item.
3. Search funtionality
4. Edit each item.
5. Add a splash page.
6. Add due date
7. Add reminder
8. Add categories by color.
9. Add labels
10. Filter by labels.

Kenyacode

Friday, February 26, 2016

Week 5 - Movie Review app - Carrierwave, Fog, Rmagick, Fog-aws, Mini-magick

Click here to go to website
Yesterday I began the movie review app.  I was excited about this one.  I love love love movies and I love to see the art work too.  I love the way this app displays the posters in the index view so while I was making it, I decided to use fan art instead of the original posters so I could give the site a fresh but classic look.

While working on this app I had an issue with the search method.  The current way to do search is to use elastic search.  Its great and works real well.  It will do a search on all the text in the data that you are searching in.  Too bad heroku doesn't support elastic search... for free.  Yes they do support it, but you have to pay $10/month as of Feb 26, 2016.  That doesn't work for me so I used html to do search.

<%= form_tag search_movies_path, :method => 'get', class: "navbar-form", role: "search" do %>
<%= text_field_tag :search, params[:search], class: "form-control" %>
<%= submit_tag "Search", name: nil, class: "btn btn-default" %>

# I needed a search method in the corresponding movies controller.rb

 def search
  @movies = Movie.search(params[:search])
 end

# Then I created a search view search.html.erb

class="row">
  <% @movies.each do |movie| %>
  
class="col-sm-6 col-md-3">
    
class="thumbnail">
     <%= link_to (image_tag movie.image.url(:poster), class: 'image'), movie %>
   

<% end %>
The search is in the _header.html.erb partial
<%= form_tag search_movies_path, :method => 'get', class: "navbar-form", role: "search" do %>
<%= text_field_tag :search, params[:search], class: "form-control" %>
<%= submit_tag "Search", name: nil, class: "btn btn-default" %>

I needed a search method in the corresponding movies controller.rb
def search
@movies = Movie.search(params[:search])
end

Then I created a search view search.html.erb

class="row">
<% @movies.each do |movie| %>

class="col-sm-6 col-md-3">

class="thumbnail">
<%= link_to (image_tag movie.image.url(:poster), class: 'image'), movie %>
</div>

<% end %>
</div>

Here  is where I put my search results.  This search method is not the best. 
    If the search field is left blank, there are no results.
    You also have to spell whole words correctly. Iron Man will not return Ironman.

Looking forward to work with Elastic Search and any other gems that simplify my life.

Check out my github for this app.  Better yet see the app live

Features I would like to add:
1. Use an api to pull in imdb info
2. Reformat show view to a more landscape display of info.
3. Upload multiple poster.
4. Display multiple posters.
5. Show a trailer of the movie.
6. Use a better search method. Heroku has a free add-on called SearchBox Elasticsearch
7. Rich text formating

Until next week, same blog chanel, same blog time,

Kenyacode

Friday, February 19, 2016

Week 4 - Pinterest app part 2 - jQuery, Haml, Simple form, Bootstrap-sass, Paperclip

Click Here to go to Website
Ok, I had to fly out of town but I found a great co-working space in Chandler, AZ, just 20 min from Phoenix.  Stop by if you are ever in town.  Its called gangplank


So yesterday and today I have been working on changing this app from paperclip to carrierwave and setting the env variables.  I did some stupid rookie mistakes! I put code in a place where it didn't belong.  I was following a fix from stackoverflow that did not work.  I forgot to remove all the code from the fix that didn't work.  It kept throwing errors and I didn't figure it out for 2 hours.

Now that I got that fixed, I simply had to create a prod database on amazon s3 and set that in my env and on heroku config:set and I was up and running.

Note: make sure you use the same wording when setting vars. From your computer to your app to heroku.  I had 2 sets, one upper case and one lower case.  I now have 4 working apps and it only took me... 5 or 6 weeks.  Yikes!

I did have to help out some family here in Arizona for a few days but I'm still 2 weeks long.  Well the movie app is next and I'm excited about this one.  I have my own idea for a tv show review app that I really want to build.

Features I would like to add:
1. Search function
2. Multiple image upload. Auto img rotation on show view.
3. Social media shareability
4. Facebook log in.
5. Add a splash page.

See you next week,

Kenyacode

Tuesday, February 9, 2016

Week 4 - Pinterest app - jQuery, Haml, Simple form, Bootstrap-sass, Paperclip

It is week 4 on Mackenzie's 12 in 12 challenge.  It is my third week and this paperclip gem has been giving me a tough time.  I scrapped the whole app twice and started over.

This time I am using carrierwave gem with rmagick and fog.  Fog is made specifically to upload to Amazon S3.

I'm going to go through what I had to learn.

Having ENV variables:  This is a file on your computer that your apps can point to and get information that you don't want to have in your app.  More on why this is important later!

I didn't understand how it worked.  The directions said:

Since it's a bad practice to have your credentials in source code, you should load them from default fog configuration file:~/.fog. This file could look like this:
default:
  aws_access_key_id:     
  aws_secret_access_key: 
So there is a file called .fog that is in my directory and I should put my aws credentials there.

Ok, did that, app doesn't work.  I now know that the repo for fog needs to be a whole more descriptive.  Developers assume you know some things that they don't tell you and it is annoying reading these readme files.  Like for instance, the .fog file did not exist, I had to create it.  Also, the app needs you to specify the region and the bucket name.

Here is my slack conversation with a senior developer.

You'll need to provide your fog_credentials and a fog_directory (also known as a bucket) in an initializer.  For the sake of performance it is assumed that the directory already exists, so please create it if need be.  You can also pass in additional options, as documented fully in lib/carrierwave/storage/fog.rb. Here's a full example:

```ruby
CarrierWave.configure do |config|
  config.fog_credentials = {
    :provider               => 'AWS',                        # required
    :aws_access_key_id      => 'xxx',                        # required
    :aws_secret_access_key  => 'yyy',                        # required
    :region                 => 'eu-west-1',                  # optional, defaults to 'us-east-1'
    :host                   => 's3.example.com',             # optional, defaults to nil
    :endpoint               => 'https://s3.example.com:8080' # optional, defaults to nil
  }
  config.fog_directory  = 'name_of_directory'                     # required
  config.fog_public     = false                                   # optional, defaults to true
  config.fog_attributes = {'Cache-Control'=>'max-age=315576000'}  # optional, defaults to {}
end
```



So I put my credentials in this file and pushed to github.  Some of you are cringing right now because you know what that means.  I realized a while later that my ENV variable go in place of 'AWS','XXX' and so forth.  The fact that the example has the actual region 'eu-west-1' made me think this is where those credentials go.  After I fixed this, the app was still throwing errors!

        
         Joshua Munene 9:27pm
I can’t gain access to amazon’s server
terminal

```AllAccessDisabledAll access to this object has been disabled209C1CF7E929B824Sj2Yrfph0TqpclltpXM0Sz46vNnPb4uR6w3AxfFez+X2hpVvqnml54pLhgQpIsfW1JTyzqK9yHE=```

Same error

Same error in the browser as before 403 forbidden


```Excon::Errors::Forbidden (Expected(200) <=> Actual(403 Forbidden)
excon.error.response
  :body          => "\nAllAccessDisabledAll access to this object has been disabled209C1CF7E929B824Sj2Yrfph0TqpclltpXM0Sz46vNnPb4uR6w3AxfFez+X2hpVvqnml54pLhgQpIsfW1JTyzqK9yHE="
  :headers       => {
    "Connection"       => "close"
    "Content-Type"     => "application/xml"
    "Date"             => "Wed, 03 Feb 2016 05:29:34 GMT"
    "Server"           => "AmazonS3"
    "x-amz-id-2"       => "Sj2Yrfph0TqpclltpXM0Sz46vNnPb4uR6w3AxfFez+X2hpVvqnml54pLhgQpIsfW1JTyzqK9yHE="
    "x-amz-request-id" => "209C1CF7E929B824"
  }
  :local_address => "192.168.1.217"
  :local_port    => 56683
  :reason_phrase => "Forbidden"
  :remote_ip     => "54.231.16.216"
  :status        => 403
  :status_line   => "HTTP/1.1 403 Forbidden\r\n"
):
  app/controllers/recipes_controller.rb:20:in `create'
```

Joshua Munene [9:40 PM] any ideas???
Emmanuel Mwangi [9:41 PM] What is your CarrierWave config?
Joshua Munene [9:41 PM] 
```CarrierWave.configure do |config|
        config.fog_credentials = {
            provider:                                'AWS',
            aws_access_key_id:            ENV['AWS_ACCESS_KEY_ID'],
            aws_secret_access_key:    ENV['AWS_SECRET_ACCESS_KEY']
        }
        # To let CarrierWave work on Heroku
        config.cache_dir                    = "#{Rails.root}/tmp/uploads"
        config.fog_directory            = ENV['S3_BUCKET']
end

module CarrierWave
    module MiniMagick
        def quality(percentage)
            manipulate! do |img|
                img.quality(percentage.to_s)
                img = yield(img) if block_given?
                img
            end
        end
    end
end
```

so I made a directory at 
~/.fog
that is where I put my credentials. Inside is:

```aws_access_key_id: '(can't show you that)'
aws_secret_access_key: '(That one either)'
s3_bucket: 'recipe-box-dev'```

that is what the config.fog_credentials should be pointing to right?
Emmanuel Mwangi [9:47 PM] do this:
`env | grep AWS`
on the command line

Joshua Munene [9:48 PM] AWS_SECRET_ACCESS_KEY=(Hidden)
AWS_ACCESS_KEY_ID=(Hidden)

thats the output
Emmanuel Mwangi [9:48 PM] ok now
`env | grep S3`(edited)

Joshua Munene [9:49 PM] nothing outputs
Emmanuel Mwangi [9:49 PM] `cat ~/.bash_profile | grep S3`

Joshua Munene [9:50 PM] => export S3_BUCKET_NAME="recipe-box-dev"
Emmanuel Mwangi [10:06 PM] Then you just need to `source ~/.bash_profile`
Then `env | grep S3` should show you
`S3_BUCKET_NAME=recipe-box-dev`
Then rails should pick it up and everything should be good.

Here is when I learned about the .bash_profile and how it works with Iterm or terminal.  This is a file that has your ENV variables and you can use it to make sure that they are set correctly.

Can I just say how awesome it is to have friend who is a developer/jedi master. He illuminated my path as I was in the darkness, barely able to feel the force. But this padawan is learning.

Ok so earlier I told you that ENV variable are for info that your app needs but you can not put in your app.  There reason is that your aws credentials must be inputed into Heroku config manually so your app can use it.  NOT through a file in your app.  I made this mistake when I first put my credentials in the carrierwave.rb file.  I got a message from Amazon.  I'll let you read it.

Case ID: 1648488551
Subject: Your AWS account  is compromised
Severity: Low
Correspondence: Dear AWS Customer,

Your AWS Account is compromised! Please review the following notice and take immediate action to secure your account.


Your security is important to us. We have become aware that the AWS Access Key AKIAI3273*hidden along with the corresponding Secret Key is publicly available online at https://github.com/search?q=AKIAI3273PKPPCD3KFPQ&type=Code&utf8=%25E2%259C%2593.

This poses a security risk to your account and other users, could lead to excessive charges from unauthorized activity or abuse, and violates the AWS Customer Agreement.

We also believe that this credential exposure led to unauthorized activity in your account. 

Your current EC2 usage is about $1200 per day.

My eyes were fixated on that number after the $.  Whaaaaat

Good thing Amazon is so cool.  They congradulated me on fixing the problem so soon and started a refund request for me.  See the thing is I had no idea this was happening.  I pushed the file to github and then I knew it wasn't the right thing to do and deleted it.  I was reading this email 2 days later saying "Lord Jesus please handle this. We both know I ain't got no $1200"  So i'm still waiting to hear from Amazon as to the refund request.

So to recap, I switched the app from paperclip to carrierwave and the documentation for carrierwave is more detailed that paperclip.  (after finishing this app) I went back and read the paperclip gem and I believe I can use it on amazon s3.  But I understood it only after using carrierwave.

Sorry for some of the formatting issues.  The background makes it easier to read code, but copy and pasting my chat history from Slack comes with some color issues.

Kenyacode