Captains log
Date
Done
Learned
Hr
03-10-2021
Scribble animations & home onload
Debugged scribble animations.
Isolating timelines makes debugging way faster.
2
Added home onload animation.
Trigger after assets load, not just DOMContentLoaded.
1
26-07-2021
Reader page
Connected Airtable API to new 'reader' page.
Airtable paginates results — need to handle the offset or you'll miss records.
3
Designed and styled the page.
Design with a fixed dataset first, hook up the API after.
2
24-07-2021
Maker page resize
Added onResize event to maker page so titles stay centered.
GSAP breaks CSS positioning.
1
05-07-2021
Date script
Wrote script to automatically display stardate and copyright date.
JS months are zero-indexed. Classic.
2
24-06-2021
Photo selection & title animations
Photo selection and editing.
Less photos, more impact.
2
Title animations.
Conflict between CSS positioning and GSAP is still tricky.
1
23-06-2021
Draggable photos
Made photos draggable.
Went easier than expected.
1
19-06-2021
ScrollTrigger & responsive styling
Implemented ScrollTrigger on maker page.
scrub ties animation progress to scroll position — good for parallax stuff.
3
Responsive fluid styling.
Fluid sizing + CSS custom properties = much less breakpoint juggling.
2
13-06-2021
Stylesheet structure
Refactored stylesheet structure using @import (postcss-import plugin).
Split files are so much easier to navigate than one giant CSS file.
1
Base styling for maker page.
Layout first, cosmetics later. Saves a lot of rework.
2
12-06-2021
CSS & layout refactor
Structured style.css by separating layout, typography and cosmetics.
Separation of concerns in CSS makes debugging way faster.
2
Updated layout content wrapper for more flexibility and added utility classes.
Keep utility classes single-purpose or they get unpredictable fast.
1
10-06-2021
PostCSS & Git
Configured PostCSS to compile all CSS files. Updated config in package.json and eleventy.js.
A glob (*.css) in the build command saves having to list every file manually.
2
Added mixin support to PostCSS via postcss-mixins.
Works like Sass mixins. No need to switch preprocessors.
1
Figured out how to stage files individually and make separate commits in Git.
Cleaner commits, less chaos in the history.
1
30-05-2021
GSAP tooling
Added GSAP code hinting and linting to VS Code.
Autocomplete for GSAP methods saves a surprising amount of time.
1
29-05-2021
Animation & positioning
Researched animation layout, positioning and performance. Did Codepen experiments.
Differences between animating left/top/right/bottom vs translateX/translateY, and how this translates to GSAP values.
3
22-05-2021
Changelog layout and animation
Animated changelog width and position based on vw.
Use the same positioning system in GSAP as in your stylesheet, otherwise unexpected effects. Don't set left: 100vw in CSS and then use x: 300 in GSAP.
1
Fixed scrolling changelog layover (codepen) using GSAP DrawSVG plugin.
Using only opacity for a layover is a bad idea — the element stays clickable when invisible. Always place an actual DOM element on top.
2
Designed homepage scribbles.
Colors are hard.
1
27-03-2021
SVG animations homepage
Attempted to implement SVG animations in Eleventy.
Failed. Eleventy appears to modify SVG markup during build. To be continued.
2
Animated 'scribbles' SVGs (codepen) using GSAP DrawSVG plugin.
DrawSVG cannot animate external SVGs. Inline SVGs cannot be used as CSS backgrounds or pseudo-elements.
2
Designed homepage scribbles.
Colors are hard.
1
22-03-2021
CSS Grid
Styled changelog table using CSS Grid.
CSS Grid positioning.
2
Designed changelog table.
What looks simple in design is sometimes hard in practice.
1
11-03-2021
Templating
Implemented Nunjucks templates and partials for footer, header, content and changelog.
Terminal error messages save a lot of time — if you actually read them. Both .md and .html files work as a base. What frontmatter is.
3
Researched templating languages.
How Nunjucks and Liquid work and how to set up a basic structure.
1
25-02-2021
Motion!
Animated menu, changelog and links.
GSAP x:0 is not absolute 0 — it's 0 from the element's starting position in the DOM. If CSS sets left: 100px, GSAP x:0 animates to 100px.
4
22-02-2021
Link animations & stagger
Animated Captain's log link.
How to remove an event listener using removeEventListener.
2
Added stagger animation to changelog.
GSAP stagger animates a list in sequence with barely any code.
1
18-02-2021
Setting up typographic foundation
Implemented fonts and styling for responsive typography.
Nothing new.
2
Set up a fluid typography system. Worked on homepage text and styling.
How to use clamp() to scale type fluidly between a min and max.
4
17-02-2021
Setting up personal site framework
Set up Eleventy as static site generator.
How to configure Eleventy using the terminal.
4
Gitlab setup.
What an SSH key is and why you need one. How to commit directly from VS Code.
2
Signed by supervisor
