Cape Falcon F1 Kayak Builds

Over the winter of 2018/2019 and summer of 2019 I built two Cape Falcon F1 skin-on-frame style kayaks. I want to be better about documing my projects here, so I’m taking a few posts to document the backlog.

The primary benefit of a skin-on-frame style kayak is how light it is. They end up being ~30lbs, so they are easy to carry with one arm and for one person to toss it on top of a car, not something you can do with a heavy fiberglass boat.

These specific boats were designed by Brian Schulz of Cape Falcon Kayak and I used a combination of his excellent online courses to learn how to build them, plus the tutelage of Jack Gilman of YPRC Boatbuilders and Jon Richer of Hudson Boat Company.

The First Build

The first build was as a group with YPRC and took place from October 2018 to May 2019, with a two month break in the middle during the coldest part of the winter. Six of us built boats together twice a week and roughly kept pace, helping each other out as we went along.

I honed a lot of important techniques through this build:

  • chisel work
  • using transfers and offsets rather than pure measurement
  • building jigs to help build something else
  • shaping with a block plane
  • peg and lashing for connecting wood without nails or screws
  • applying polyurethane
  • steam bending
  • fixing mistakes (skin-on-frame is a forgiving medium!)

Routing the gunwales, laminating curved deck beams, chiseling straight deck beams, and assembling the frame:

Steam bending ribs, lashing the keel and stringers, shaping the stem, and finishing the frame:

Making coamings, cutting and sewing the skin, and applying polyurethane coating.

The finished boat!

The Second Build

After learning a lot on the first build, I teamed up with Jon Richer to build another alongside him at a faster pace so that Amanda could have her own kayak to go out in, too. We built two as a public demonstration at the Edward Hopper House Museum in Nyack, NY. We knocked it out in about 4 weekends with some travel in between. I was much more confident after having built the first one, which translated to a faster build time. It was a great feeling.

Things that we improved on the second build:

  1. We used red oak for the ribs, which bent a lot better than the ash we had in the first round.
  2. We cut all of the stock we needed in a single, albiet long, day, which saved us lots of setup time.
  3. We made the middle deck beams first, which means that if we mess up that one we can always use it for the small deck beam at the end, which is much shorter.
  4. We oiled the entire frame outside on a warm, sunny day, which allowed the oil to soak in better.
  5. We used a faster method for tightening and sewing the skin on, which made it a 4 hour endeavor instead of 2 day 8 hour endeavor.
  6. We were able to reuse some of the jigs we built in the first round, which sped things up.

Amanda and I absolutely love our kayaks and take them out regularly, both on the Hudson and inland lakes. I get a ton of joy every time we use them. Paddling in something that you built yourself and know every single part of just can’t be beat.

Maintenance on a Shopsmith Mark V

Two weeks ago while using the lathe on my Shopsmith Mark V, I heard what sounded like the belt slipping. I’d also been having some problems cutting heavy stock on the bandsaw attachment, so I figured it was time to change the old belts.

I had replacement belts on-hand from Jacob Anderson Shopsmith Repair, so I started watching his excellent videos to figure out how to tear down the headstock and replace the belts, I quickly realized what my actual problem was: The floating motor sheave was stuck open, so when I turned the Shopsmith up to higher speeds, the motor sheave didn’t close in relation to control sheave opening up, so the drive belt had too much slack and wasn’t getting any traction. After roughly 45 years, the sheave got gummed up with old oil, grease, dirt, and sawdust.

Here is the stuck open floating motor sheave, in need of a cleaning and repair.

The floating motor sheave is number 119 in the diagram:

A better version of this is available at Shopsmith.com

Since I had to tear down half of the headstock to get the motor out to work on the sheave, I decided to go the rest of the way and replace the upper Poly V belt as well. The whole thing needed some serious cleaning, oiling, and greasing anyway. My model was made in the mid 1970s and I don’t think it had ever been completely taken apart. The putty was still in the quill set screw at the top of the case. I don’t expect that is the kind of thing you replace after scraping it out.

Again, Jacob Anderson’s videos were incredibly helpful in figuring out how everything comes apart and goes back together. If you need Shopsmith parts, buy them from him!

The whole process took longer than I expected. It took me about 20 hours over the course of four days to take it completely apart, clean it, oil the moving parts, grease the bearings, and get it all back together again. I’m including the time I spent watching videos and making various jigs to help me work on it.

My empty headstock.

A few tricky points:

1. Removing the spring on the motor sheave.

The spring needs to be compressed in order to remove the retaining ring, and that spring has considerable pressure and a washer with it. Using Jacob Anderson’s advice, I drilled a hole through a piece of plywood and carved a groove for the washer to set in, pushed the spring down, and held it in place with some quick clamps. The washer still shot across the room, and it was pretty tricky to get back together again, but I don’t see any way it could have been done without something like this board.

2. Unsticking the floating motor sheave.

This thing wouldn’t budge by hand. I had to use a piece of plywood underneath and one on top, hammering them together to force it open. Once open, I did a good cleaning to remove the grime, then polished the shaft to help the sheave move. It still doesn’t move as easily as the top one for me, but it does move.

3. Putting the idler shaft (number 105 in the diagram) and eccentric bushing (103) back in after replacing the Poly V belt (55). The old belt was stretched out, but this one was much tighter. I also frustrated myself by stupidly putting the idler shaft and eccentric bushing back in once before putting the Poly V belt in and had to take it back apart. What a pain.

4. Calibrating the speed control

First, none of my three sets of Allen wrenches were long enough to get to the tiny screw inside the speed control face in order to take it off. I had to go out and buy some longer ones.

Second, you can’t adjust the speed control without moving the drives, either with the motor or by hand. This is not easy, especially since you probably set the control sheave open as wide as it could go (high speed) when putting the belt on. In order to calibrate it, you need to close down the control sheave to get it back in Slow mode. You shouldn’t start the machine at a high speed anyway, so you have to do this all by hand. Adding the disc sander attachment helps quite a bit by giving you something to turn like a steering wheel.

5. Putting the switch back in

I wasn’t paying close attention to the orientation of the switch and had just assumed it was still in the Off position, despite lots of jostling, so I had to be careful when plugging it back in for the first time. Thankfully I got it right, but I think I might mark it or tape it next time.

Thankfully everything worked as expected when I put it back on the stand and flipped the switch. The difference is night and day. No more slipping belts or the drive stopping when cutting heavy stock on the bandsaw or shaping something on the lathe at high speed.

With regular oiling, I shouldn’t have the issue with the floating motor sheave locking up again. Fingers crossed.

What I’m Currently Reading

Turing’s Cathedral by George Dyson – I’m struggling to get through this one, but I really want to finish it. I started reading the physical book but ended up turning to audio, which I think is a better format for this. The sheer number of names, dates, and technical details make it tough to read, but easy to tune out in audio and focus on the narrative arc of how the digital universe got created, which is what I want out of this book.

Analogia by George Dyson – Much more interesting to me than Turing’s Cathedral. Breaks down the major eras in technology and makes the case that we are on the cusp of a new technological era driven by machines that are outside the scope of programmable control. Reading the hardcover version of this one.

The History of the Hudson River Valley: From Wilderness to the Civil War by Vernon Benjamin – This was a “welcome to the neighborhood” gift from our neighbors after we discussed the subject around a campfire. Enjoying it so far. Started it recently while hiking the Shawangunks, which is a great place to read a book like this. Hardcover.

Breath: The New Science of a Lost Art by James Nestor – Recommended by my friend Cameron Sorsby. Tl;dr breathe out of your nose, not your mouth. Audiobook.

How to Take Smart Notes by Sönke Ahrens – Picked this up intending to join the Roam Book Club v2, but haven’t done much participating in the actual sessions. Starting to use the Zettelkasten method while going through some non-fiction like Powerful and Demand-Side Sales. Reading the softcover version of this book.

Powerful: Building a Culture of Freedom and Responsibility by Patty McCord – I recently stepped into a squad lead position at work and this book came highly recommended, so I’m slowly working my way through it when I have some downtime during the work day. Hardcover.

Apex by Ramez Naam – Third book in the Nexus trilogy. Running computers in our brains and what personal and social consequences that has is the kind of sci-fi I like. Reading this one on Kindle.

Encounters with the Archdruid by John McPhee – I picked this one up at our local used bookstore. I love McPhee and will buy pretty much any of his books when I see them. He weaves interesting history and geology into physical travel stories.

Looks like I’m actively reading eight books, all of which I intend to finish. I have no problem stopping books if I don’t like them, and I won’t put books like that in this list.

Eight seems like a lot. I usually don’t have more than five going at any one time. I’ll buckle down and finish a few of these before I pick up any more. I’m not having issues keeping them clearly separated in my head because they are pretty distinct subject matters.

Up next

Demand-Side Sales by Bob Moesta

The Code of the Woosters by P. G. Wodehouse

Paris in the Present Tense by Mark Helprin

Cryptonomicon by Neal Stephenson

The Inevitable: Understanding the 12 Technological Forces That Will Shape Our Future by Kevin Kelly

Want to see what I’ve finished recently? Check out my Reading page.

Switching from Jekyll back to WordPress

I set up this blog on WordPress in 2008. In 2015 I moved it to Jekyll and back filled those old posts in 2018. Now I’m back on WordPress with the entire archive. Why? I want to post more and WordPress is more conducive to that.

With Jekyll I had to create a new markdown file with all of the yaml front matter I wanted and my automated templates were never quite right, then I had to get the Jekyll site running to preview the post (running the inevitable Jekyll and gem upgrades and troubleshooting issues with some plugin that broke), then run the custom build process I made to commit the changes, push them to Github, build the site, then deploy the changes to S3 and Cloudfront with s3_website, which is no longer being maintained. It was “rickety as hell” as an old family saying goes.

With WordPress, Pressable keeps core up to date for me, so I just open the site, write the post, and click publish. No messing around with build tools, no finicky yaml templates, and no annoying Ruby and Java dependencies to fight with.

Also, with WordPress, basic things like Search and Category Archives are available by default instead of something you need to hack on. The Plugin ecosystem is much better, too.

The Jekyll site build and all the tools I built around it was a fun project, but I’m glad to be back on WordPress. I recently started working at Automattic, which of course played a role in my decision to switch back, but I had planned to make the switch long before I had applied.

The speed of the 100% static Jekyll site served via Cloudfront was slightly faster than this WordPress site, but the difference isn’t big enough to matter to me. The Pressable CDN and object caching is pretty dang fast, and as I said above, I care more about being able to update the site faster and easier than I could with Jekyll.

Getting started

I had big ambitions for this project: I wanted to build a new theme from scratch adhering to the WordPress-Extra ruleset for PHPCS and the starter theme my team uses. I kept putting it off, preferring to be offline when not working. I was itching to get my site migrated, so I decided to modify an existing theme with a child theme and focus my energy on the migration.

Migrations

I essentially combined three sites into one.

  • Old WordPress posts: I’m a digital hoarder, so I still have the database for my 2008 WordPress site. I loaded it up in a local instance, ran some upgrades so it would work with WordPress 5.5, and then used the typical WordPress WXR files to import them to the new site. I temporarily put my old /wp-content/uploads/ folder on the server hosting cagrimmett.com so that the import would also pull in the featured images.
  • Microblog posts: micro.cagrimmett.com was still live and I keep WordPress up to date there
  • Jekyll posts: I heavily customized my Jekyll RSS feed to include all kinds of extra metadata that it normally wouldn’t. I then used the excellent WP All Import Pro to parse the XML and map it to WordPress fields and download and import the media.
    • Attempting to do this and getting stuck? Shoot me an email and I’ll do what I can to help!

Reading list

I built out a cool reading list feature in Jekyll using yaml data files and a template that grouped the books I read by year and displayed the count. I was able to rebuild it pretty quickly with a custom post type, custom fields, and two queries: One to group the books by year and sort by date read, and the other to display the counts.

Check out the reading page, my favorite page on the site!

Redirects

I thought I’d have a big issue with redirects, but with some careful planning about 95% of old links just work.

By going back to the old databases from existing WordPress sites, I was able to use existing post IDs, which is great because my old links used the post ID permalink structure. Post ID permalinks redirect to the post by default, even if you have a different permalink structure.

For the Jekyll posts, I was able to match the permalink structure I had on the Jekyll site, category/year/month/day/slug, so those work, too. The only issue I ran into is that I had some uncategorized posts in Jekyll and Jekyll leaves uncategorized out of the permalink while WordPress doesn’t. So I installed the Redirection plugin to add some redirects for those and monitor 404s.

Ongoing issues

I do have a few issues left to clean up:

  1. Code blocks with the Rouge syntax highlighter I used in Jekyll are a bit garbled. They need some styling to make them pretty again.
  2. JavaScript embeds in posts don’t work. I had a bunch of d3.js tutorials with interactive examples that don’t work right now. As a stop-gap I’ve linked to the old Jekyll version that is still accessible on S3, but I need to go through and fix those.

I plan to eventually build out my own theme from scratch and I want to build some of my own custom blocks for a few ideas I have.

But first, back to regular blogging.

What are digital gardens?

At work a few months ago, I mentioned the concept of digital gardens on a call. Not everyone knew what digital gardens were, and the term means different things to different people using it, so I put together a P2 about what I think a “digital garden” is.

What is a digital garden?

  • A collection of thoughts, ideas, highlights, annotations, quotes, summaries, and notes that are richer than a tweet, but lack the timestamped nature of a blog post or published essay.
  • Digital gardens are tended to and evolve over time. Sometimes they grow, sometimes they get trimmed back. Though they change, they have the four-dimensional permanence of a river or Theseus’s Ship.
  • A digital garden embodies the nature of working in public and learning out loud: Sharing your current understanding and allowing others to learn from it.
  • Like entangled roots and interwoven vines, the individual plants of digital gardens form a latticework of bi-directionally linked content that supports and encourages bridging and pollination to further understanding.

to link, annotate, change, summarize, copy, and share — these are the verbs of gardening

Mike Caulfield in The Garden and the Stream: A Technopastoral

Where is this term from?

I first started noticing people I follow talking about it in April of this year: Maggie AppletonTom CritchlowAnne-Laure Le CunffVenkatesh RaoAndy MatuschakAnna Gát, and Joel Hooks.

Maggie Appleton found the earliest use of the term, which harkens back to the old school web: Mark Bernstein’s 1998 essay Hypertext Gardens.

It is similar to a commonplace book, another popular term on the IndieWeb. A Zettlekasten comes to mind, too.

Essays to check out

Commonly used tools


Some thoughts, digital garden-style

  • Web technology enables some cool things:
    • Version control allows users ability to see how digital artifacts change over time.
    • Bi-directional linking brings the Wikipedia-style wormhole exploration to other websites, increasing the scope of knowledge exploration.
      • WordPress’s trackbacks and pingbacks are a great start to bi-directional linking. Webmentions are another. Category-style taxonomy pages need to get added to the mix, too.
    • Live preview of links (transclusion) on hover or focus
    • Linked footnotes and sidenotes with references
    • Highlighting and sharing/reblogging/regardening of other content and notification with trackbacks, webmentions, and pingbacks.
    • Hierarchical post types for hierarchical content, tagging for non-hierarchical content
    • Links to relevant related content by search indexing
    • Real-time glossaries for slang and jargon
  • P2tenberg (the block-based comment editor built into P2) is awesome for front-end editing and is likely crucial to any digital garden built on WordPress.
  • Public wikis are digital gardens of sorts, but build to be highly collaborative, whereas digital gardening is more of a personal endeavor, or at least relatively small groups.
  • Imagine if we applied Edward Tufte’s principles in a web-first way, rather than just porting his style guide to CSS.

Logging completed tasks with Things and Alfred

I’ve tried a few different methods of logging my completed tasks (notebook, notes app, a different notes app), but the friction of opening the book/app, finding the note, and logging the task was too high and I always abandoned the effort after a week.

I’ve finally got something that stuck: Things URL schemes + Alfred Custom Web Search.

Here’s how it works:

  1. I use the Link Builder to create the basic URL I need to pass to Alfred: things:///add?title={query}&completed=true
  2. I create a Custom Web Search in Alfred to take my completed task query and open it in Things. Having it marked at Completed automatically adds it to the Logbook, bypassing the Inbox.

Things logbook

Of course, you need Alfred and Things installed for this to work. They are tools I use every day. I highly recommend them.

You can customize the link however you like, by adding tags, projects, etc. I keep it simple and just have a completed task.

Want to use this? Here is a URL to add this directly to Alfred. (It will only work if you have Alfred installed.)

Goodbye Crash, Howdy Automattic

Yesterday was my last day at Crash.

A little over three years ago Isaac emailed me one morning asking if I had a few minutes for a phone call. I took it, then a month later I started full time at Praxis. A year and a half later we split the company and I went with the Crash team.

I’m very proud of the things I worked on with both teams. Here are a few highlights:

  1. Set up a custom curriculum portal for the Praxis students
  2. Designed and wrote a completely new curriculum for Praxis students
  3. Set up a talent portal where hiring managers could view student profiles and decide who to interview
  4. Ran the marketing team at Praxis for a few months, where I learned a ton about marketing, instituted some targeted lead capture systems with ConvertFlow, and did a deep-dive on retargeting and conversion tracking. This led to capturing tens of thousands of leads while I was there, and even more after I left.
  5. Migrating a Hubspot CRM and email automation system to Salesforce and Mailchimp
  6. Rebuilt the Praxis website from the ground up with a custom WordPress theme
  7. Leading a focused week where the entire team worked together in groups to create a course, including writing content and shooting videos to accompany it
  8. Creating Discover, a personality-style quiz that tells you which role is the best place to start your career. It took a few months, and I figured out the traits, archetypes, and mappings from scratch. As of this writing, 12,500 people have taken it.
  9. Some of the people who went through a Praxis apprenticeship when I started (and who I helped coach!) are now hiring their own teams or starting their own companies. This is incredibly rewarding.
  10. I set a goal at the beginning of 2019 to learn Ember.js enough to commit meaningfully to the codebase. By the end of the year I was shipping fully functional features and fixing bugs. I had over 1000 commits to the codebase last year.
  11. All in all, I estimate that I directly helped at least 500 people over those three years change the course of their lives by helping them land an awesome job with high growth trajectory. This will have compound returns for them over the course of their careers.

In addition to the above, I learned a ton about:

  • Sales
  • Marketing
  • Engineering
  • Coaching
  • Conflict resolution
  • Pitching

Morgan von Gunten wrote a nice goodbye for me in last week’s Crash Report.

I’m thankful for the time I had with these teams and what we worked on together. It was exactly what I needed at the time.

So why am I leaving?

I’ve been on the edge of burnout for the past 6 months. My role changed many times in the last three years. I’ve adapted rapidly to the changing needs of the company, wore many hats, and figured out a lot of stuff. That was fun for a while, then it got pretty taxing. I decided at the beginning of February that it was time for a change. I want to settle down into one role.

It is hard. I’ve poured my heart into these teams for the past three years. It is not an easy decision to walk away, but I think it is the best decision for me, my health, and my family.

I used the Crash philosophy to go land a new role. I did my research, crafted a personalized pitch, and sent the pitch in along with the regular application. I got an immediate reply and threw myself into landing the role through the trial.

Automattic was the first place I applied. Yes, I applied to a few other places as backup, but Automattic was the place I really wanted to go.

I have a long history with WordPress. This very blog started on WordPress back in 2008, and I’ve developed at least 30 WordPress sites since and helped Praxians with ~200 more. CookLikeChuck.com runs on WordPress, the Praxis curriculum portal runs on WordPress, and Crash’s content is powered by a decoupled WordPress instance. I’m a steadfast remote worker, and Automattic is one of the largest fully distributed companies, with 1100 people across 75 countries. I resonate deeply with their Creed and Open Source mission.

Thankfully, it worked out. I’m joining the WordPress.com Special Projects Team, working to empower people who are doing cool things, one website at a time.

I start at Automattic on Monday.

Advent of Code, Day 12: Ember Simple Auth

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!

Advent of Code, Day 11: Rendering Charts from Ember Data

Day 11!

After some frustrating trial and error and searching through docs with lots of words I don’t quite understand, Dave Wasmer kindly helped me figure out how to get Ember Objects (the results of Ember data queries) in a format I’m used to working with: Something that looks like a regular array of objects, or “POJO” as Dave said.

The solution ended up being calling the map method on the array-but-not-really-array and toJSON on each item in that. Then I get something back that looks like [{name: ..., startDate:...}, {...}]

model.plants.map(c => c.toJSON()); 

This allowed me to render the charts with Ember Data stored in Firebase.

Tomorrow: Digging back in to D3’s update pattern and getting the chart automatically updating when adding a new plant. Dave’s helpful suggestion was to look into the “data down, action up” pattern.

Thanks, Dave!

Advent of Code, Day 10: Setting up Firebase

Day 10!

I had a conversation on Twitter with Sam Selikoff and Ilya Radchenko, then later on Slack with Ilya and Dave Wasmer about using Firebase + EmberFire + Ember Data vs GraphQL + Hasura (Sam’s suggestion) vs GraphQL + Fauna (Ilya’s suggestion) for my data needs. I appreciate their inputs and arguments, but I ultimately went with Firebase + EmberFire for two reasons:

  1. I don’t want to set up and maintain an API server for this project. That knocks out Hasura.
  2. Fauna looks cool, but I don’t know either Ember Data or GraphQL that well, so I’ll have to learn one. Firebase + EmberFire + Ember Data is a little more battle tested and there is more documentation and search results for it vs Fauna, so I’m going to stick with that. I don’t want to be stuck in the dark on this project or constantly bug Ilya or Dave about stuff I don’t know. I do that enough at work.

So that means I set up Firebase and EmberFire today. It was surprisingly easy! The quickstart guide was solid. I was saving Ember Data to Firebase and retrieving it in my routes in no time.

I modified my Add a Garden form to save to Firebase, then transitioned to the Edit route where I passed along the ID of the garden I just created an retrieved the garden record’s data in the route. Then I read the Ember Data relationships docs and was able to both save and retrieve a garden’s related plants.

Then I got stuck: I tried to pass the plant data to the calendar component to render the chart and I can’t get it to work. The data isn’t coming through as I expect. I assume it has something to do with relationships in Ember data as promises, but haven’t quite figured the solution out yet. So that will be tomorrow’s project.

I feel like I’m making progress, though! It was super satisfying to see my collections and documents appear in Firebase.

Advent of Code, Day 9: More Ember Data

Day 9!

  • My problems with yesterday’s ember data store not being recognized magically disappeared when deleting node_modules and running yarn to install them again. Node, man. So good, but so frustrating sometimes.
  • I got plants and gardens showing up in the ember data store after form submissions, which I verified with the Ember Inspector plugin.
  • I added a form for creating gardens.

garden data plant data

I thought I’d be able to get it all working locally before setting up EmberFire and Firebase, but after seeing that IDs for Ember Data are usually assigned on the server and having a talk with with Dave Wasmer and Ilya Radchenko, it sounds like I might be better off setting up Firebase now instead of trying to get Mirage to work. That is a little more than I have time for today, so that will be tomorrow’s goal.

Advent of Code, Day 8: Learning Ember Data

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

Advent of Code, Day 7: Figure out routes

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

Advent of Code, Day 6: Plant Addition Flow

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

Advent of Code, Day 5: Form Components

Day 5! I didn’t think I’d make this much progress today, but I’m happy I did.

Today’s progress

  • Built reusable form components (button, input, form, label) with the help of EmberMap
  • Updated the chart
  • Integrated a color picker addon ember-pickr
  • Discovered and fixed a bug with the way I was calculating the scale.
  • I didn’t realize how much stuff I thought was just regular Ember in our app is actually addons. A bunch of things I use at Crash every day didn’t work at first in plant-gantt until I tracked it back to an addon. For example: ember-truth-helpers and ember-decorators

The scale bug: the scale bug You see here that blueberries are going off the right side. This is because I was calculating the scale based on the last plant in the list, which isn’t always the one that will be harvested last, only the one that will be planted last.

Instead, I had to use d3.max and offset to create a custom function to look at all of the plants and see which one would be harvested last:

let lastToHarvest = maxIndex(sortedData, d =>   timeDay.offset(new Date(d.start), d.daysToMaturity) ); 

Today’s commits:

  1. upgrade ember, add form components, add some helpers
  2. updates to chart with form data
  3. get the color picker working
  4. fixed end data calculation bug

Here’s how it works so far!

plant gantt with forms

Tomorrow’s goal:

  • Improve the form UI
  • Use D3’s update() to update the chart instead of destroying and redrawing it
  • Show a different screen on the first time you land instead of showing the mocked out chart
  • Break the components apart

Advent of Code, Day 4: Responsive D3 Chart in an Ember Component

Day 4!

Today’s progress

  • Sorted vegetables by start date
  • Updated the data model to calculate the harvest date by the days to maturity
  • Changed the scale to start 15 days before the first planting and end 15 days after the last harvest to save space on screen. This also allows things to start before January and end after December.
  • Made the chart responsive

Making the chart responsive took me down a weird rabbit hole. I tried using a computed property and then a bunch of different addons, but none of that worked. So I went the old-school route and wrapped the chart drawing in a function and then added an event listener to remove the chart and redraw it. There is probably a more elegant way to handle it, but I don’t know what it is.

window.addEventListener('resize', function() {   selectAll('svg').remove();   drawChart(); }); 

Today’s commits:

  1. change tick format to months and sort data
  2. move to relative scales
  3. responsive chart

Tomorrow’s goal:

  • Add a form to add new elements and update the chart

Advent of Code, Day 3: D3 chart basics

Day 3!

Today’s progress

  • set up pods because that is what I’m used to working with at Crash
  • configured Tailwind in Ember
  • successfully rendered yesterday’s D3 mock inside a component
  • Talked to my first user (my wife!) and got feedback about the chart. She says vegetables should be sorted by when you plant them by default, not when you added them to the chart.

Resources that helped me:

Today’s commits:

  1. configure tailwind, move to pods
  2. add calendar component and add D3 mock to it

Tomorrow’s goal:

  • change the calendar component to be responsive
  • sort the vegetables
  • Change the data to be closer to user-input data (plant date and duration, not just plant and harvest dates
  • watch more embermap videos to learn how to update with changes to user input data

Advent of Code, Day 2: D3 chart basics

Day 2! I woke up excited to work on this and spent an hour on it before work.

Today’s progress

Figured out the basics of the D3 implementation for Plant Gantt:

  • Learned how to use Observable
  • The week-based X axis
  • Stacking each plant similar to a horizontal bar chart and starting the bar at the correct start date
  • Lining the labels up correctly

Here is the Observable notebook.

Tomorrow’s goal

Get back into Ember land and figure out how to incorporate a chart with mocked out data in an Ember component.