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: devise, haml, simple_form, bootstrap-sass

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

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

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 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

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: Haml, simple_form, bootstrap-sass, puma, postgreSQL
Github Page: https://github.com/kenyacode/workout