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