Blog drafts and CSS fixes

Tufte sidenote fixes, blog draft previews, tag collections still broken
ericthebell · Sep 27, 2024 · 1dd75a5 · 1dd75a5
1 parent 0c0272e
commit 1dd75a5
Show file tree

Hide file tree

Showing 24 changed files with 363 additions and 92 deletions.
diff --git a/Gemfile b/Gemfile
@@ -29,6 +29,7 @@ group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
   gem 'jekyll-admin', group: :jekyll_plugins
   gem 'jekyll-env'
+  gem 'jekyll-tagging' #trying to fix tagging
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -24,7 +24,7 @@ GEM
     coffee-script-source (1.11.1)
     colorator (1.1.0)
     commonmarker (0.23.9)
-    concurrent-ruby (1.1.10)
+    concurrent-ruby (1.3.4)
     diff-lcs (1.5.0)
     dnsruby (1.70.0)
       simpleidn (~> 0.2.1)
@@ -164,6 +164,8 @@ GEM
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-swiss (1.0.0)
+    jekyll-tagging (1.1.0)
+      nuggets
     jekyll-theme-architect (0.2.0)
       jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
@@ -227,6 +229,7 @@ GEM
       ruby2_keywords (~> 0.0.1)
     nokogiri (1.13.10-arm64-darwin)
       racc (~> 1.4)
+    nuggets (1.6.1)
     octokit (4.25.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
@@ -302,6 +305,7 @@ DEPENDENCIES
   jekyll-admin
   jekyll-env
   jekyll-feed (~> 0.12)
+  jekyll-tagging
   minima!
   nokogiri
   rspec

diff --git a/_config.yml b/_config.yml
@@ -34,7 +34,7 @@ description: > # It will appear in your document head meta (for Google search re
   Holistic product and service design, making complexity feel simple. <a href="/assets/EricBell_Resume_2024.pdf">Resume (PDF)</a>
 # email: [email protected]
 
-url: "https://ericthebell.github.io" # (optional) https://example.com, defaults to http://localhost:4000 in development
+url: "https://ericthebell.com" # (optional) https://example.com, defaults to http://localhost:4000 in development
 permalink: "/:categories/:title" # how your URLs are built, see https://jekyllrb.com/docs/permalinks/#builtinpermalinkstyles
 logo: eric_viki.png
 
@@ -52,7 +52,7 @@ header_pages:
 # Also, I can specify the skin now!
 minima:
   skin: classic
-  date_format: "%Y-%m-%d %H:%M"
+  date_format: "%Y %b %d"
   social_links:
     - { platform: linkedin, user_url: "https://linkedin.com/in/ericthebell" }
     - { platform: instagram, user_url: "https://instagram.com/ericthebell" }
@@ -90,11 +90,16 @@ defaults:
       type: "talks"
     values:
       layout: "talk"
+  - scope:
+      type: "tags"
+    values:
+      layout: "tag"
   - scope:
       path: "_posts"
       type: "posts"
     values:
       layout: "post"
+      permalink: /blog/:title/
 
 collections: # blog is automatic collection of posts
   roles:
@@ -105,9 +110,11 @@ collections: # blog is automatic collection of posts
     output: true # collection per talk
   tags: 
     output: true # page for each post, talk, or project tag
-    permalink: tags/:path/
-    # try https://blog.lunarlogic.io/2019/managing-tags-in-jekyll-blog-easily/
-    # or https://jameshfisher.com/2019/05/05/how-can-i-add-tags-to-a-jekyll-blog/
+    permalink: /tags/:name/
+  # drafts:
+  #   output: true
+  # try https://blog.lunarlogic.io/2019/managing-tags-in-jekyll-blog-easily/
+  # or https://jameshfisher.com/2019/05/05/how-can-i-add-tags-to-a-jekyll-blog/
 
 jekyll_admin:
 #  hidden_links:
@@ -125,6 +132,7 @@ plugins:
   - jekyll-sitemap
   - jekyll-seo-tag
   - jekyll-remote-theme
+  - jekyll-tagging
 
 # Exclude from processing.
 # The following items will not be processed, by default.

diff --git a/_includes/tags.md b/_includes/tags.md
@@ -1,5 +1,5 @@
 <p class="tags">
   {% for tag in page.tags %}
-  <a class="post" href="/tag/{{tag}}">#{{tag}}</a>{% unless forloop.last %}, {% endunless %}
+  <a class="post" href="/tags/{{tag}}">#{{tag}}</a>{% unless forloop.last %}, {% endunless %}
   {% endfor %}
 </p>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -11,25 +11,53 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
         {{ page.date | date: date_format }}
       </time>
       {%- if page.modified_date -%}
-        ~ 
+        (updated
         {%- assign mdate = page.modified_date | date_to_xmlschema -%}
         <time class="dt-modified" datetime="{{ mdate }}" itemprop="dateModified">
           {{ mdate | date: date_format }}
-        </time>
+        </time>)
       {%- endif -%}
       {%- if page.author -%}
-        • {% for author in page.author %}
+        &nbsp;| by {% for author in page.author %}
           <span itemprop="author" itemscope itemtype="http://schema.org/Person">
             <span class="p-author h-card" itemprop="name">{{ author }}</span></span>
             {%- if forloop.last == false %}, {% endif -%}
         {% endfor %}
-      {%- endif -%}</p>
+      {%- endif -%}
+      <span> | 
+        {% for tag in page.tags %}
+        <a class="post" href="/tags/{{tag}}">#{{tag}}</a>{% unless forloop.last %}, {% endunless %}
+        {% endfor %}
+      </span></p>
+    {%- if page.orig_pub_url -%}
+      <p class="orig-pub"><em>Originally published on 
+        <a href="{{ page.orig_pub_url }}" target="_blank" rel="noopener noreferrer">
+          {{ page.orig_pub_label | default: "another site" }}</a>.</em>
+      </p>
+    {%- endif -%}
+
   </header>
 
   <div class="post-content e-content" itemprop="articleBody">
     {{ content }}
   </div>
 
+  <nav class="post-navigation">
+    <div class="nav-links">
+      {% if page.next.url %}
+        <a href="{{ page.next.url }}" class="nav-previous">&lt; newer</a>
+      {% else %}
+        <span class="nav-next inactive">newest post</span>
+      {% endif %}
+
+      {% if page.previous.url %}
+        <a href="{{ page.previous.url }}" class="nav-next">older &gt;</a>
+      {% else %}
+        <span class="nav-previous inactive">oldest post</span>
+      {% endif %}
+    </div>
+  </nav>
+
   {%- if site.disqus.shortname -%}
     {%- include disqus_comments.html -%}
   {%- endif -%}

diff --git a/_layouts/role.html b/_layouts/role.html
@@ -21,36 +21,30 @@ <h3>{{ page.position }}</h3>
 
 <hr>
 
-<h2>{{ page.company }} projects</h2>
-{% assign role_project = site.projects | where: 'company', page.company %}
-{% for project in role_project %}
-  <h3><a href="{{ project.url }}">{{ project.title }}</a></h3>
-  <label for="mn-1" class="margin-toggle">&#8853;</label>
-      <input type="checkbox" id="mn-1" class="margin-toggle"/>
-      <span class="marginnote">
-      <img src="{{ project.thumbnail | default: '/assets/images/eric_viki.png' }}" alt="{{ project.company }}">
-  </span>
-  <div class ="">
-    <div class="row-text">
-      <p><strong>Context:</strong> {{ project.context }}</p>
-      <p><strong>Impact:</strong> {{ project.impact }}</p>
-    </div>
-  </div>
-{% endfor %}
+{% assign role_items = site.projects | concat: site.talks | concat: site.posts | where: 'company', page.company | sort: 'date' | reverse %}
 
-<h2>Talks at {{ page.company }}</h2>
-{% assign role_talk = site.talks | where: 'company', page.company %}
-{% for talk in role_talk %}
-  <h3><a href="{{ talk.url }}">{{ talk.title }}</a></h3>
-  <label for="mn-1" class="margin-toggle">&#8853;</label>
-      <input type="checkbox" id="mn-1" class="margin-toggle"/>
+{% if role_items.size > 0 %}
+  <h2>{{ page.company }} posts</h2>
+{% endif %}
+
+{% for item in role_items %}
+  <h4><a href="{{ item.url }}">{{ item.title }}</a></h4>
+  <label for="mn-{{ forloop.index }}" class="margin-toggle">&#8853;</label>
+      <input type="checkbox" id="mn-{{ forloop.index }}" class="margin-toggle"/>
       <span class="marginnote">
-      <img src="{{ talk.thumbnail | default: '/assets/images/eric_viki.png' }}" alt="{{ talk.company }}">
+      <img src="{{ item.thumbnail | default: '/assets/images/eric_viki.png' }}" alt="{{ item.company }}">
   </span>
-  <div class ="">
+  <div class="post-meta">{{ item.collection | capitalize }} | {{ item.date | date: "%Y %b %d"}}</div>
+  <div class="excerpts">
     <div class="row-text">
-      <p>{{ talk.context }}</p>
+      {% if item.collection == 'projects' %}
+        <p><strong>Context:</strong> {{ item.context }}<br/>
+        <strong>Impact:</strong> {{ item.impact }}</p>
+      {% elsif item.collection == 'talks' %}
+        <p>{{ item.context }}</p>
+      {% elsif item.collection == 'posts' %}
+        <p>{{ item.excerpt }}</p>
+      {% endif %}
     </div>
   </div>
 {% endfor %}
-
diff --git a/_plugins/tags.rb b/_plugins/tags.rb
@@ -4,23 +4,27 @@ class TagPageGenerator < Generator
 
     def generate(site)
       tags = site.posts.docs.flat_map { |post| post.data['tags'] || [] }.to_set
+      puts "DEBUG: Found tags: #{tags.to_a}"  # Debug output
       tags.each do |tag|
         site.pages << TagPage.new(site, site.source, tag)
       end
+      puts "DEBUG: Generated #{tags.size} tag pages"  # Debug output
     end
   end
 
   class TagPage < Page
     def initialize(site, base, tag)
       @site = site
       @base = base
-      @dir  = File.join('tag', tag)
+      @dir  = File.join('tags', tag)
       @name = 'index.html'
 
       self.process(@name)
       self.read_yaml(File.join(base, '_layouts'), 'tag.html')
       self.data['tag'] = tag
       self.data['title'] = "Tag: #{tag}"
+      self.data['posts'] = site.posts.docs.select { |post| post.data['tags']&.include?(tag) }
+      puts "DEBUG: Created tag page for '#{tag}' with #{self.data['posts'].size} posts"  # Debug output
     end
   end
 end
diff --git a/_posts/2017-02-28-comics-translation-to-cancer-treatments.md b/_posts/2017-02-28-comics-translation-to-cancer-treatments.md
@@ -2,8 +2,14 @@
 layout: post
 title: Comics translation to cancer treatments, a year in review
 date: 2017-Feb-28 18:52:00 -000
+modified_date: 
+author: Eric Bell
+orig_pub_url: https://medium.com/@ericthebell/comics-translation-to-cancer-treatments-a-year-in-review-c2f23e3026b7
+orig_pub_label: Medium
 summary: For my work life, 2016 was a year of transitions and contrasts.
-tags: startup healthtech career
+thumbnail:
+tags: [startup, health-tech, career, Vineti, Viki]
+company: Vineti
 ---
 
 For my work life, 2016 was a year of transitions and contrasts.

diff --git a/_posts/2024-09-27-experiment-tracking-dashboard.md b/_posts/2024-09-27-experiment-tracking-dashboard.md
@@ -0,0 +1,124 @@
+---
+title: Experiment tracking dashboard
+layout: post
+drafting: true
+date: '2024-9-27'
+modified_date: null
+author: Eric Bell
+orig_pub_url: null
+orig_pub_label: null
+summary: A Figma Slides template for tracking your lean startup experiments.
+thumbnail: "/assets/images/experiments-template.jpg"
+tags:
+- startup
+- lean
+- experiments
+- template
+- HyeTech
+company: HyeTech
+---
+
+An accessibly editable template for tracking your lean startup experiments, using Figma Slides. Go ahead and [check it out](https://www.figma.com/slides/Hv3GJxpUCt0NU8qFs6dMMF/Experiment-tracking-dashboard-%5Btemplate%5D?node-id=1-26&t=Jv8o14Xs2BjpbGRw-1), or read on for the story.
+
+<figure class="fullwidth">
+		<label for="mn-concept" class="margin-toggle">⊕</label>
+		<input type="checkbox" id="mn-concept" class="margin-toggle">
+		<img src="/assets/images/experiments-concept.jpg" alt="experiments flow">
+</figure>
+
+## Context & challenge
+
+A couple years ago, four former coworkers and I embarked on an effort to turn [HyeTech](https://hyetech.io), a networking community with ad hoc volunteer events, into a sustainable business.<label for="sn-1" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-1" class="margin-toggle"/>
+<span class="sidenote">HyeTech's <a href="https://www.hyetech.io/vision-and-mission">vision</a> is for the Armenian tech network to become an indispensable global asset that creates positive impact on the world.</span>
+
+During that initial stage, our biggest constraint was bandwidth, and our biggest risk was trying to do too many things or jumping to start new things rather than finish current efforts.
+
+At the time, I was also still fully employed at our [erstwhile workplace](/roles/Vineti) (and later, focusing on the job search), and I only had a handful of hours a week to devote to any support activities. We had a granular backlog, but no high level view of our work, so it was easy for our attention to become fragmented.
+
+This template was born out of my attempts to encourage us to more aggressively scope our goals, and to focus only on intentionally prioritized projects. And at the end of the day, this is merely a reconfiguration of the Lean Startup model of identifying your biggest risks/assumptions and coming up with experiments to (in)validate them.
+
+## Experiments in a backlog
+
+I wanted to capture a couple concepts in a manageable single-view format: the Lean Startup approach of using experiments to validate your riskiest assumptions,<label for="sn-1" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-1"	class="margin-toggle"/>
+<span class="sidenote"><a href="https://leanstartup.co/resources/articles/lean-startup-method/">Lean Startup 101</a></span>
+and Marty Cagan's <a href="https://www.svpg.com/dual-track-agile/">Dual-Track Agile</a> idea of parallel validation and implementation backlogs.<label for="sn-1" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-1"	class="margin-toggle"/>
+<span class="sidenote">Alternately referred to as <a href="https://www.svpg.com/continuous-discovery/">continuous discovery</a>and delivery.</span>
+
+<figure class="">
+		<label for="mn-flow" class="margin-toggle">⊕</label>
+		<input type="checkbox" id="mn-flow" class="margin-toggle">
+		<span class="marginnote">note</span>
+		<img src="/assets/images/experiments-flow.jpg" alt="experiments flow">
+</figure>
+
+I drew on a few references for the experiment layout,<label for="sn-2" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-2"	class="margin-toggle"/>
+<span class="sidenote"><a href="https://www.designabetterbusiness.tools/tools/experiment-canvas">Ash Maurya's</a> Experiment Canvas and <a href="https://www.kromatic.com/innovation-resources/learn-smart">Tristan Kromer's version</a> were particularly useful, check them out in case they're more relevant to your needs.</span>
+as well as comments I remembered [Javid Jamae](https://www.linkedin.com/in/jamae/) making about maintaining a slide deck of current and planned experiments.<label for="sn-1" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-1"	class="margin-toggle"/>
+<span class="sidenote">Fun memories with from Lean Startup Circle's monthly unconference in San Francisco back in the day.</span>
+
+<figure class="">
+		<label for="mn-template" class="margin-toggle">⊕</label>
+		<input type="checkbox" id="mn-template" class="margin-toggle">
+		<span class="marginnote">Template card for an experiment</span>
+		<img src="/assets/images/experiments-template.jpg" alt="experiment template card">
+</figure>
+
+## First iteration & learnings
+
+My first iteration was a Miro board that captured a general template for an experiment card, along with a path for experiments to move from a prioritized backlog to.
+
+<figure>
+	<label for="mn-miro" class="margin-toggle">⊕</label>
+	<input type="checkbox" id="mn-miro" class="margin-toggle">
+	<span class="marginnote">Our experiments moved slowly, so this approach represented a reasonable amount of manual updating.</span>
+	<img src="/assets/images/experiments-miro.png" alt="experiments flow">
+</figure>
+
+Miro was useful for organizing everything in a readable zoomed out view, while flexibly updating individual cards without too much concern for actual slide deck constraints. For a tool to review and update as a team, this format worked great and helped our focus for a year or so.
+
+The downsides of Miro, for our team, were that despite Miro's accessible editing, I was still the only person who actually went in to make updates, and it was challenging to foster, in teammates who didn't otherwise have much of a reason to live in the tool, an asynchronous habit of checking Miro. And while Miro is much more accessible than Figma for non-designers, moving around between individual cards and between high level and granular views involved relatively manual navigation.
+
+## Figma remake & tradeoffs
+
+Recently, Figma released a slides tool<label for="sn-1" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-1"	class="margin-toggle"/>
+<span class="sidenote"><a href="">Figma Slides</a> blends Figma's design tools with a familiar slide layout.</span>
+that offers a bridge to users more familiar with presentation tools, for whom the designer's view of Figma is intimidatingly complex.<label for="sn-1" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-1" class="margin-toggle"/>
+<span class="sidenote">Similar to how their recently released <a href="https://www.figma.com/dev-mode/">Dev Mode</a> caters to the needs and conventions of developers who are implementing designs.</span>
+The combination of individual slide view with a flexible deck overview looked like it had potential for our needs, so I tried adapting my Miro approach to Figma.
+
+The clear advantage of Figma Slides for our experiment dashboard template is the familiar slide UI, with more accessible editing and navigation. The format lowers the bar for reference and editing by non-designer stakeholders.
+
+<figure>
+	<label for="mn-figma-slides" class="margin-toggle">⊕</label>
+	<input type="checkbox" id="mn-figma-slides" class="margin-toggle">
+	<span class="marginnote">A slicker PowerPoint.</span>
+	<img src="/assets/images/experiments-figma-slide.png" alt="experiments flow">
+</figure>
+
+The primary tradeoff of the slide view is the lack of flexibility in slide dimensions. Despite Figma's ability to use autolayout to dynamically adjust template content within constraints, they chose to keep a strict fixed dimension for individual slides. In our case, this means that if we have a particularly large amount of content for a particular experiment (detailed plans, large list of metrics, etc), then we either need to make harder choices about what needs capturing, or we need to split an experiment across a couple slides.
+
+<figure>
+	<label for="mn-figma-overview" class="margin-toggle">⊕</label>
+	<input type="checkbox" id="mn-figma-overview" class="margin-toggle">
+	<span class="marginnote">An automatic overview.</span>
+	<img src="/assets/images/experiments-figma-overview.png" alt="experiments flow">
+</figure>
+
+## Template notes
+
+See below for the embedded deck, which you are welcome to try out for yourself if this concept is helpful for your own team. Some notes:
+- Figma doesn't yet appear to support components in Slides, unfortunately, so for now there doesn't seem to be a way to edit the template across all slides. That said, besides the two-slide version and the Appendix examples, you should be able to tweak the primary template to your needs without too much hassle.  
+- At the moment, only Figma employees and hand-picked designers can publish their contributions to the Figma Community, so for now this is simply a public link to my template file.
+- Feedback welcome as comments directly in this file!<label for="sn-1" class="margin-toggle sidenote-number"></label>
+<input type="checkbox" id="sn-1"	class="margin-toggle"/>
+<span class="sidenote"><a href="https://www.swyx.io/learn-in-public/">Learning in public</a>, something I am practicing with my entire personal site.</span>
+You can try messaging me on other platforms, but commenting directly is the most contextually helpful.
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://embed.figma.com/slides/Hv3GJxpUCt0NU8qFs6dMMF/Experiment-tracking-dashboard-%5Btemplate%5D?node-id=1-26&embed-host=share " allowfullscreen></iframe>