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

Technologies used: carrierwave, acts_as_votable, fog-aws, mini_magick, devise, haml,   simple_form, bootstrap-sass, heroku

Github page: https://github.com/kenyacode/dribble

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 awesome, normalize.css, haml, simple_form, puma, postgreSQL,
Github Page: https://github.com/kenyacode/notebook