Day 12!

I tried to add user authentication with EmberFire and Ember Simple Auth. I get through the provider workflow with Twitter, see a new user in Firebase, see the correct user data in the network panel in Chrome, and the ember_simple_auth-session cookie has “authenticated” in the content field. But session.isAuthenticated never seems to be true.

I must be doing something wrong, but I don’t have the time to figure it out today. Time to keep packing. I’m buying a house tomorrow and moving in this weekend!

Day 8! Another short session of work on a plane before I go home and pack up my apartment. Today I finished separating different functional parts of my components into individual components and started integrating Ember data.

I hit an issue I wasn’t able to research since I wrote it only a place without internet access, so the below might be wrong.

My models:

export default DS.Model.extend({   garden: DS.belongsTo('garden'),   startDate: DS.attr('date'),   name: DS.attr('string'),   color: DS.attr('string'),   daysToMaturity: DS.attr('number') });  export default DS.Model.extend({   name: DS.attr('string'),   startDate: DS.attr('date'),   plants: DS.hasMany('plant') }); 

Tomorrow’s goal:

• Figure out why store is throwing errors for me

Day 7! Today I’m traveling, but I got some work done on the plane: I figured out my routes and started breaking apart components to their individual functions.

My routes:

Router.map(function() {   this.route('login');   this.route('signup');   this.route('gardens', function() {     this.route('edit', { path: ':slug' });     this.route('new');   });   this.route('public-profile', { path: ':user_slug' }, function() {     this.route('garden', { path: ':garden_slug' });   }); }); 

Tomorrow’s goal:

• Finish breaking the components apart
• Get the new routes working

Day 6! Short update today after tons of phone calls, move packing prep, and packing for a trip.

Today’s progress

• Removed the mocked plant data for my testing and built out the plant addition flow:
  • If there are no plants, hide the chart, show the form, and show a header
  • After adding a plant, hide the form, render the chart, and show the Add a Plant button
  • Only add the resize listener after the chart renders

I also tried to fix a bug with the color picker where it wouldn’t close, but didn’t solve it.

Amanda gave me another good idea today: For items like tomatoes, it would be good if there was another bar at the end that was lighter to signify a harvesting time window.

Today’s commits:

1. first use flow

Tomorrow’s goal:

• Dig in further to tailwind for styling
• Read the Ember Data docs
• Use D3’s update() to update the chart instead of destroying and redrawing it
• Break the components apart

I’ve wanted to do Advent of Code for a few years, but I just can’t get excited about random puzzles. Not knocking all the folks involved in it–more power to you! It just isn’t for me. So I haven’t participated.

Last week while flipping through a seed catalog to figure out what I’m going to plan in my garden next year, I had an idea: I want to build a plant starting/harvesting calendar for my garden. Building that will be my own Advent of Code project this year.

Today was Day 1, planning day.

Name

Plant Gantt. Amanda came up with it and it is perfect. A gantt chart for plants.

Goals

1. Build an interactive planting/harvesting calendar for vegetables.
2. Deploy my own Ember app with a user login system on something like EmberFire
3. Beef up on my D3 and Ember skills.
4. Use Tailwind for the first time
5. Make progress every day.

Features

• Ability to add a plant name, seed start date, days to maturity, and pick a label color for it.
• Visualize the plant’s growing period on a 52 week calendar
• See the current day marked across the full calendar
• Ability to hover over a plant and see how long it has been growing and how long left until harvest
• Ability to create an account and save your calendar
• Ability to print the calendar you created
• Ability to create multiple calendars with unique names

I may not get this done in 25 days, but I intend to make progress every day. It will be tough with the month ahead: Two out of state trips, moving into our new house, and holiday parties. I’ll carve out time every day to get some work done, though.

Today’s progress

1. Picked a name and got a domain
2. Planned out the features and my goals for the project
3. Set up the git repo and basic Ember app
4. Install add-ons: ember-d3, ember-cli-tailwind

Tomorrow’s goal

• Figure out the basics of the D3 gantt-style chart

I find myself regularly scouring business websites for logos to use. More and more of them use build pipelines that take all SVGs and embed them inline, making it impossible to just right click and download the image.

Here is my short workflow for downloading inline SVGs:

1. Open up your inspector and copy the whole SVG element.
2. Open your favorite text editor (mine is VSCode) and paste the whole SVG element you just copied into a new file and save it as companyname.svg
3. Open your new companyname.svg in Sketch.app and change the colors if needed. Sometimes the colors are applied via CSS, which won’t come in with the SVG element.
4. Export the logo as your filetype of choice. Mind the size because inline SVG elements are often small. I usually export PNGs at @2x.

Note: I still use steps 3 and 4 even if my end goal is SVG. First, I want to make sure the colors are correct. Second, Sketch adds some important attributes to SVGs like Viewbox that are helpful if you are using the file on the web.

Here is a video I made walking through the process:

I transitioned by previous book notes section to a new reading list section. Why?

1. I read a lot of fiction and don’t tend to take notes on it
2. I wanted to keep a list of books I’ve finished.
3. The book notes was not a great medium for doing #2. Writing the full set of notes was a pretty big barrier most of the time and I tended to go a few months at a time without updating the page, creating a large backlog.
4. I came across Frank Chimero’s reading page and loved it. I also noticed that James Somers takes a similar approach with just listing the books out.

So, I decided to implement Frank Chimero’s design with my own reading list.

Instead of just hardcoding them in a page and repeating tons of HTML for the rest of my life, I decided to put the reading list in a Jekyll data file (I chose yaml) that I could easily add to and make a simple template to output.

First, I started with my previous book notes section. Since they were stored in a Jekyll Collection, I was able to write a quick Liquid for loop to generate most of my list for me. But I didn’t want to: include a full star rating, just a recommended star. So I chose to star books that I rated 5/5:

{% assign reviews = site.book_reviews | sort: "date" | reverse %} {% for review in reviews %}  - title: "{{ review.title }}"   author: {{ review.author }}   link: {{ review.book-link }}   star: {% if review.stars == 5 %}yes{% else %}no{% endif %}  {% endfor %}

The result looked like this:

- title: "Stories of Your Life and Others"   author: Ted Chiang   link: http://amzn.to/2Ghql7a   star: yes  - title: "A Burglar's Guide to the City"   author: Geoff Manaugh   link: http://amzn.to/2rElHgb  - title: "The Story of Sushi: An Unlikely Saga of Raw Fish and Rice"   author: Trevor Corson   link: http://amzn.to/2DAvzct  - title: "The Island at the Center of the World: The Epic Story of Dutch Manhattan and the Forgotten Colony That Shaped America"   author: Russell Shorto   link: http://amzn.to/2yqLmaE   star: yes 

Awesome! That spit me out a list of everything I’ve written book notes for. Since it is sorted by date in reverse chronological order, it was quick for me to manually break it up by year:

 - year: "2019"     books:       - title: The Summer Book         author: Tove Jansson         link: https://amzn.to/2ZMtUuC         star: yes        - title: "The Last Pirate of New York"         author: Rich Cohen         link: https://amzn.to/34h0Oa3         star: yes        - title: "Fall; or, Dodge in Hell"         author: Neal Stephenson         link: https://www.amazon.com/Fall-Dodge-Hell-Neal-Stephenson/dp/006245871X         star: yes  - year: "2018"     books:       - title: "The World is a Narrow Bridge"         author: Aaron Thier         link: https://amzn.to/2PK3OZc        - title: "Fashion Climbing"         author: Bill Cunningham         link: https://amzn.to/2PJqkgz        - title: "Cape Cod"         author: Henry David Thoreau         link: https://amzn.to/2ZIISBV        - title: "The Outermost House"         author: Henry Beston         link: https://amzn.to/2MOf3hb         star: yes 

Excellent. Two more steps:

1. I want a “last updated” key so I only have to update one file. That means I need to nest the years under a parent key in order to access them.
2. I need to manually add the books that weren’t in my notes but I know I read. This took me a few hours to get the books, authors, and links.

Once I added the “last updated” key, the yaml structure looked like this:

lastupdate: September 3, 2019 list:   - year: "2019"     books:       - title: The Summer Book         author: Tove Jansson         link: https://amzn.to/2ZMtUuC         star: yes        - title: "The Last Pirate of New York"         author: Rich Cohen         link: https://amzn.to/34h0Oa3         star: yes        - title: "Fall; or, Dodge in Hell"         author: Neal Stephenson         link: https://www.amazon.com/Fall-Dodge-Hell-Neal-Stephenson/dp/006245871X         star: yes        - title: The Boatbuilder         author: Daniel Gumbiner         link: https://amzn.to/2Lgvh0l    - year: "2018"       books:         - title: "The World is a Narrow Bridge"           author: Aaron Thier           link: https://amzn.to/2PK3OZc          - title: "Fashion Climbing"           author: Bill Cunningham           link: https://amzn.to/2PJqkgz          - title: "Cape Cod"           author: Henry David Thoreau           link: https://amzn.to/2ZIISBV          - title: "The Outermost House"           author: Henry Beston           link: https://amzn.to/2MOf3hb           star: yes 

Here’s how I loop through that data to create my reading page:

{% for entry in site.data.reading.list %}    
     
       
{{entry.year}}
       
{{entry.books | size}} books
     
     
       
{{entry.year}}">         {% for book in entry.books %}           
             {{book.link}}" alt="_blank" rel="nofollow noopener">{{book.title}} by {{book.author}}{% if book.star %}★{% endif %}           
         {% endfor %}       
     
   
    {% endfor %}

Note that {{entry.books | size}} line: This is what outputs the number of books I’ve read in a particular year by spitting out the size of the books array. This is one of the big benefits of using a data file instead of hardcoded HTML or markdown. Just add a new book and everything else updates itself. Plus, I can use the data file for other things later if I so choose.

Here is the result:

You can check it out over at the reading list page, or you can see the code over at my Jekyll Tools Github repository.

If you liked my book notes, don’t worry. They aren’t going anywhere. I’m keeping the pages up for posterity, but I’m not updating them any more.