Machiko Yasuda

day six: deploying

How to deploy an AngularFire – Yeoman project to GitHub

  1. Follow these instructions at Yeoman
  2. If you get fatal CRLF errors, install dos2unix. Type into Terminal: brew install dos2unix and then, use the tool to convert your troublesome files in the dist folder by running: find /dist -type f -exec dos2unix {} +. This will convert all the files for you, without changing the filenames.
  3. Make sure that your dist folder is in the root directory.
  4. After your dist folder is added to the gh-pages branch, push it by running: git subtree push --prefix dist origin gh-pages. This should push only your dist folder to your gh-pages branch. You should have an index.html in the root.
  5. Go to your-name.github.io/your-repo-name
  6. Enjoy!

A weekly stand-up:

What I did this week –

  1. Thanks to Theresa for having us over at her house this weekend. Climbing takes my mind off all the stress.
  2. I worked on three roadblocks in my project: a Firebase refreshing problem and not getting tests to run and deploying.
  3. Yesterday I went to a mini-Madison Ruby meet-up in LA. It’s always fun to meet other web developers in the area that really care about the community, ethics and the future of the Internet in general.

Roadblocks I faced this week –

  1. Thanks to Josh helped me fix my refreshing bug. Takeaway: If you’re creating new Firebase collection upon a button click, separate the functions into different controllers.
  2. Thanks to Delmer for helping me move Firebase call from the controller to the service. This helped me get Jasmine/Karma tests to run. Takeaway: Separate your Firebase into a service.

What’s next –

  1. Now that I’ve deployed, I can start doing real testing on my phone and other people’s non-iPhones. This will hopefully inform how I can continue to improve the user experience of typing, clicking, checking things off.
  2. I also want to work on my datamap project and my personal portfolio page.

day five: almost mvp?

Today

I got the URL generating somehow.

Next week:

  1. Front-end/UI – Re-do introduction welcome language and style.
  2. Make a “Bookmark this” and “Send this” button.
  3. Add viewport styling for web browser and iPad.
  4. TESTING!

Go back to my datamap project 1. Fix d3 chart 2. Add map 3. Add dropdown menu to choose datasets 4. Add more datasets.

day four: traversing along

Today:

Today our group took a different approach. We talked about our main back-end roadblocks and broke up into groups to tackle them together.

What did I learn? The amazing/insane/crazy thing in programming is when you think you’ve applied all the same methods to your friend’s project — and the results are not the same as yours. Group-debugging is much better than self-debugging.

Roadblocks:

My personal roadblocks, prioritized:

  1. Back-end: URL generation + new Firebase collection. This involves a sequence of steps:

  2. Create new Firebase collection

  3. Generate new URL accordingly
  4. Prompt user to bookmark that link, share with friends

Everything else after this is not so much part of the MVP.

It would be nice to learn things like: jQuery Mobile, Sass, more about viewports/media queries, mobile interactions…

Tomorrow:

  1. Testing: how to set up Karma
  2. Still work on URL.

Next week:

  1. Deploying!

day three: all sorts of things

Today:

  • Learning about try-catch-finally-throw See the gist there.
  • try: the function you are testing
  • catch(e): the fall-back function in case try does not work.
  • finally: always runs – usually an alert. optional.
  • throw: define different variations of the catch “e”, like NaN, out of range exceptions.
  • Did a little Mustache.js. See the code there.
  • I think I will get to implement some Mustache.js in my Datamap project. I will insert things like Census report name or table name into the JSON, and use it later on the front-end.
  • On my project, I added some new stylings, but no new JavaScript functions. The data now persists to database.

Roadblocks:

  • Should users be able to edit item names? If so, what’s the best mobile UI for that? A button or something else?
  • Tomorrow I plan to start generating unique URL with an unique ID for each checklist. That ID must somehow correspond with the correct Firebase collection.

Tonight:

  • Figure out how to run my Jasmine/Karma tests.

Code challenge:

  • Start nit-picking for Ruby and JS excercism.
  • Start a new challenge. Maybe find a friend to program with.

day two: enter Firebase

Today:

  • Did not go back into Cloudbees. Never again.
  • Moved repository to GitHub instead, and started using a Node.js webserver for development.
  • Hooked up Firebase to the Angular project and started adding items to Firebase database with my first controller.
  • Wrote a few short JavaScript functions to (1) see how many items there are, (2) see how many are remaining and (3) calculate and show the progress.
  • My model is as follows, at the moment: An array of item objects, which have a name (text) and status (true/false). False is not done. True means it’s checked and done.

Road blocks:

  • GUID URL generation and persisting into database. I will need to (1) create a new URL for each new checklist, (2) save that ID into the database with the array of items with statuses and names. When a user returns to that specific URL, the user will see that same list. It will not refresh and go blank (like it currently does).
  • Have not done any test-writing yet. But I want to! I’ve been writing in Sublime Text, console.log() into console and running the app. I would like to test, though.
  • Down the line, we need to figure out how to deploy – Heroku or GitHub pages?

Tomorrow:

  • I hope to set up testing somehow, with Jasmine, Karma or whatever.
  • I hope to start saving and persisting data, even if I don’t have unique URLs yet.

Code challenges:

  • To make up for what I didn’t do yesterday, I did a Ruby exercism.io and a JavaScript one.
  • I will push them to GitHub as soon as they are approved.

day one - configuring

Today:

  • Start CloudBees account with a basic Angular.JS build from Angular-Seed
  • It took a really long time.
  • Learned a little bit about ng-controller and ng-model, filters and directives.

Challenges:

  • I will have to generate unique URLs for each checklist. I’m wondering how I’ll do that…

Tonight:

Code challenge of the day:

-None. Yet. :(

Life / Home:

  • I’m reading Flow by Mihaly Csikszentmihalyi. Jeff Casimir, aka @J3, recommended the book during his presentation at LA Ruby the other month.

Log 0

Inspired by JZ and Vyki’s Summer of Code Captain’s Logs, I’ve decided I should organize my project progress, thoughts and homework every day. And what a good chance to practice writing and editing (in VIM and Markdown, no less.) There will be as little bikeshed-painting, yak-shaving as possible! Yesterday JZ and Vyki presented the lessons they’ve learned so far from diving into open source coding. One of the Pivotal Labs developers also talked about their dedication to being enabling and empowering by being transparent, constantly shipping and iterating and sharing best practices. Although I’m not working on this project as a pair, I want to keep myself accountable by writing a “stand-up” every day.

What I did today:

  • Finish writing user story process.
  • Finish writing preliminary milestones. Put it all on GitHub
  • Finish writing user stories into Pivotal Tracker – haven’t written all specific tasks yet.
  • Finish first wireframe and start a working prototype in HTML/CSS.
  • Start using iOS Simulator to see how prototype renders in iPhone.
  • Start thinking about my development environment, testing frameworks, things like that.

What I am curious about and Googling:

I’ll post questions I’ve been thinking about and what I’ve Googled and read about it.

  • Front-end: Can I use Sass or LESS with Angular? What about Twitter Bootstrap? What kind of responsive grid do I want? (Yes on the first two questions).
  • Testing: What testing frameworks can I use with Jasmine? (You can use Cucumber.js).
  • Mobile-first design: What user experience considerations should I be thinking about? Mouse-overs, hovers won’t really work. The checkbox will have to be well-designed and sized to fit the finger. Each item row will have to have enough height to be readable, clickable, editable. I have to take in consideration the keyboard that pops in and out. Typography and colors will matter even more. I’ll have to immediately test how it looks and feels when the mobile keyboard pops up and takes up most of the page.
  • I learned it all from this series of blog posts on Angular best practices.

What’s next:

  • Start Sass or LESS with mobile viewports.
  • Start Jasmine testing soon.
  • Deploy as soon as I can, so I can run a real test on an iPhone.

Practice of the day:

I’m going to tackle a programming problem every day. Here are some exercises I’ve been trying and liking:

  • Exercism.io (JavaScript and Ruby)
  • Ruby Warrior
  • Ruby Koans
  • JavaScript Koans
  • Finally finish Learn Ruby the Hard Way

new habit

1
git commit -m "Add a new blog post on commits."

I have a strange, short-term memory these days. Memories will come back to me like vivid movie scenes, but if you asked me what I did seven days ago — I might come up blank. Maybe it’s all the learning and working.

What’s been changing my week so far though, has been the simple act of committing each minor project accomplishment as a git commit.

Version Control on git is not just for easier collaborating and sharing work, I’ve realized. I can look back on my commits from a month or two months back and re-read some jQuery I wrote to refresh my brain on syntax and methods. Or I can go back and see what I’ve done in the past week.

Projects are daunting. Starting at zero and trying to get to the finish line in one long leap is a daunting leap to make. Instead of fretting over getting it perfect the first time, I’ve been celebrating each tiny little commit. Because it’s those little steps in between that will get me there.

Things that can happen, revisited

  1. Silently disco dance at the corner of Main and Temple
  2. Pillow fight strangers at Pershing Square
  3. Travel by Big Blue Bus, Angel’s Flight, Gold Line, my own car
  4. Overlook the typical 110 jam, bike down 7th Street Bridge
  5. Play dodgeball on the street
  6. Walk on the sidewalk, get cut off by people on stilts
  7. Eat on top of a double-decker food truck
  8. NOSAJ THING. (Sit next to FlyLo)
  9. J.ROCC. V.J.
  10. Run into Nathaniel Ayers and bass on a sunny Sunday morning in front of Disney Hall
  11. Ice skate at Pershing Square, witness child skating prodigy
  12. Drive very badly, on the wrong side of the street, over railroad tracks, running out of gas
  13. Run into a lady who talked to me on the bus once, ate dim sum with her on Chinese New Year
  14. Watch Gustavo Dudamel conduct the L.A. Phil, only to hurt his neck during the first movement
  15. Watch Damien Rice play at the Orpheum. He wore a luchador mask, a birthday gift from Glen Hansard.
  16. Club with metal detectors. Enough said.
  17. Watch museum patrons jump into a pool. An interactive sculptural art exhibit of course.
  18. Run into a friend on the crosswalk. Say happy birthday!
  19. Cook food in a real professional kitchen; feel like I’m on a reality cooking competition show; feed people; get fed with love.
  20. Bike into a television commercial set.
  21. Sit inside a real-life hand-made robot.

Overheard, the greatest hits

A collection of quotes I’ve heard lately and I have now have been playing in my mind, on endless repeat:

“Be resilient to failure. It’s like wearing a bulletproof vest.” “Shit is easier. I make it myself.” “Keep learning fun — you’ll have more dopamine in your system and your memory will skyrocket.” “Write, even if you don’t publish. You will learn from it” On side projects for learning: “It doesn’t matter if someone else did it.” “Everyone here is free to be wrong.” “Trying fails, awareness cures.” “Don’t warehouse knowledge.” “If design is the how, art direction is the why, front-end is the what and back-end is the factory. Digital is the norm”