The Iron Yard, Code School Week 11/12

Final Project pt 2.

We are in the middle of working on our final projects. Read about my concept and last week's progress in Week 10.

Week Digest

đŸ’ģ🙂đŸ˜ļ😐😒☹ī¸đŸ˜°đŸ˜ đŸ˜ĄđŸ˜ŽđŸ¤”đŸ™ƒđŸ˜€đŸ’ģ


I had overly complicated my font table structure and had to simplify to fix the issue of rendering children from an object. I had skirted this by using keyed fragments, but that solution wasn't scalable.

On an unrelated note, I had to revert back to a previous commit because of an npm error that wasn't worth excavating answers from Stack Overflow all afternoon.

Despite the minor set-backs, I added the search page of my app, configured routing with Backbone, and expanded the font table.

I stepped back from my final project for a few hours because I was frustrated, but I still wanted to be productive, so I finished my Flexbox Mondrian, a fun exercise in CSS Flexbox written in SASS.


Wrote the preview page of my app. It is just a placeholder for now. All of the content will be dynamically generated based on choices of colors and fonts.

We had a "mini MVP demo" session and everyone is progressing at different speeds with their respective projects. It is exciting to see ideas coming together!


I have had an idea of how I would like my app to flow based on a single page architecture and a navigation that allows a user to "page jump" to the various views (color palette, fonts, and preview). Each view would always be 100% of the view height and width when in focus.

I tried to use Backbone and hash routing to handle all navigation, but I wasn't quite achieving the interaction design I had in mind.

It was important to me that a user would know where they were within my app, and that the app transitions between views as described above. I wound up changing the architecture of my app and putting all three views on a single page. Backbone now handles the models generated based on Google Custom Search image results and not all of the routes.


After spending most of yesterday refactoring code, I went back to the font selection and created buttons that triggered functions to move through the linked font table.

I also passed color palette data down to this "dashboard" view as well.


Spent more time on the font table and wrote a list of priorities/bugs and nice-to-have's to keep myself on track. Both fortunately and unfortunately, the list is growing.


Working on the dynamic preview. I made a list of goals for this view and how to get it set up. I already had a png of the mobile phone on the page.

  1. Create a div over the mobile phone png and make sure it scales with the png.

  2. Get something to appear in the div (hard-code, not dynamic).

  3. Pass down the palette data on props, as done previously on dashboard view. Get one of the light swatch colors to appear as background color of the div.

  4. Link font data to this div as well. Based on font choice from above, fonts should write to div.

  5. Change the font color to the darkest shade of the palette.

Immediately, I ran into issues. I wrote a div to the page that was positioned on top of the png, but as I suspected, it wasn't scaling with the png. I could have kept them both at specific pixel values, but that killed the responsive design.

I knew I would have to go about generating a preview of a phone in a different way.

💡💡💡 What if I generated the mobile preview entirely in CSS? 💡💡💡 That would allow me to resize and change the screen dynamically. I chose to go this direction and am really pleased with how it is turning out, despite the initial setback.


I worked on accomplishing #2 and #3 on the list.