[content/fix] motion post, adding date fields to labs

_data/labs.json

@@ -4,6 +4,8 @@
     "url": "https://nathan-long.com/animation/",
     "source": "https://github.com",
     "description": "Playing around with different techniques and animation stacks.",
+    "dateCreated": "2022-06-01",
+    "dateModified": "ongoing",
     "image": "https://user-images.githubusercontent.com/623568/207959370-a7a9d3ba-98a9-4787-9376-a8f3d1fae38e.png",
     "imageAlt": "Curvy red path with two dots indicating motion",
     "feature": true
@@ -13,6 +15,7 @@
     "url": "https://nathan-long.com/hero-dice/",
     "source": "https://github.com",
     "description": "Dice roller app for self-made RPG system for kids: F.I.G. (Fantastical Imagination Game)",
+    "dateCreated": "2021-11-16",
     "image": "https://user-images.githubusercontent.com/623568/207949358-d9a41dd4-5355-474e-9433-6a258b4efeba.png",
     "imageAlt": "The word 'Hero' above a six-sided dice",
     "feature": false
@@ -22,6 +25,8 @@
     "url": "https://nathan-long.com/rules/",
     "source": "https://github.com/nathanlong/rules",
     "description": "A personal reference for games (with house-rules) I play with my family.",
+    "dateCreated": "2022-10-12",
+    "dateModified": "ongoing",
     "image": "https://user-images.githubusercontent.com/623568/211856834-436269ac-9130-4628-b088-b35f75b69810.png",
     "imageAlt": "Playing card suit icons over a field of X's. Icon by Irene Hoffman",
     "feature": false
@@ -31,6 +36,7 @@
     "url": "https://nathan-long.com/sandclock/",
     "source": "https://github.com/nathanlong/sandclock",
     "description": "A digital hourglass with simple timer functionality.",
+    "dateCreated": "TBD",
     "image": "https://user-images.githubusercontent.com/623568/233101852-cc17b991-9360-4794-add9-51e5ce8ae4b9.png",
     "imageAlt": "Construction crane with warning barricades. Icon by Eko Purnomo.",
     "feature": false

_includes/lablist.njk

@@ -11,7 +11,7 @@
 <hr class="my-2" />
 
 <ul class="lablist p-0 m-0 mb-2 space-y-1">
-  {%- for lab in lablist %}
+  {%- for lab in lablist | sort(false, true, 'dateCreated') | reverse %}
     {% if lab.feature === false %}
       {% include "labitem.njk" %}
     {% endif %}

_includes/layouts/base.njk

@@ -76,7 +76,7 @@
     </main>
 
     <footer class="footer full w-full flex flex-col-to-row justify-between items-center px-1rem py-1 items-center mt-content gap-1">
-      <p class="color-reduced no-shrink font-small m-0"><a class="color-reduced" href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC-SA 4.0</a> 2023 &copy; Nathan Long</p>
+      <p class="color-reduced no-shrink font-small m-0"><a class="color-reduced" href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC-SA 4.0</a> 2023 &copy; Nathan Long.</p>
 
       <nav class="nav-footer no-shrink">
         <menu class="nav m-0 p-0 flex flex-row list-none space-x-1">

content/blog/building-motion-for-the-web.md

@@ -0,0 +1,34 @@
+---
+title: Building Motion for the Web
+description: Finding ways to improve motion process in building web interfaces.
+date: 2023-07-14
+tags: motion
+---
+
+I've recently been noodling on motion and its use in web interfaces. I've been frustrated that most examples and material you find about motion fall into a few common categories:
+
+* Another rehash of Disney's motion principles
+* Explanations of easing and CSS transitions
+* Imaginary app interactions built entirely in prototyping tools
+* Wild and technically complex demos that can be inscrutable. (Have fun reading that 3D shader algorithm...)
+
+It all seems to be very low-level, limited-scope implementations, or so high level you might as well be reading a Wikipedia article. Very rarely do you find material on how a team considered motion as part of their design ideation, how the designer and developers collaborated on bringing it to life, and how they convinced the stakeholders that the time spent was worth the effort...
+
+So I thought we should try to bridge that gap.
+
+What I'm most interested in is:
+
+* Creating **shared language** around motion
+  * (Have you tried having a conversation on how something should move?)
+* Empowering designers to be creative **without** blowing the entire development budget.
+  * ("Yes, all the things can move, but like THIS rather than like THAT...")
+* Create frameworks for **talking to clients** about motion and setting **expectations** around timing and cost.
+  * (It never works if it's just tacked on at the end of a project or has no money allocated to it.)
+* Testing **collaboration methods and deliverables** around motion to widen our process toolkit
+  * (Spoiler: I don't think high-fidelity motion prototypes are helpful to anyone but the client.)
+
+I feel like THESE are the social, financial, and collaboration barriers that have to be overcome for any successful technology integration, but we seem to currently lack these tools for motion on the web.
+
+We've started a series over at Viget that I'm excited about as we work to explore these topics. The first post is here: [Building Motion for the Web: In the 'Zone'](https://www.viget.com/articles/building-motion-for-the-web-classifying/). We explore classifications of motion characteristics in interfaces to start categorizing types of motion.
+
+Check it out, it's only getting started...