Yesterday was a pretty typical day working on Statamic. I was wrapping up around 5:30pm for dinner and thought to myself: "self, summarizing this day would make a moderately interest blog post." So here we are. If you ever wondered what's it like working on a CMS, this is it — in all of its magnificent and glamorous splendor. ✨
Wake up. Take the puppy out for a walk. 💩
Head to the gym. Warm up. Pick up heavy things and put them back down. Move around rapidly in a specific, organized manner so as to elevate the heartbeat for 8 to 12 intense minutes. Mobilize.
Morning routine complete. Begin the work day by opening up Slack, 👋 good morning to Jason and Jesse, and log into Intercom to answer any urgent support requests. Today nothing was on fire, so I'll get back to the rest closer to lunch.
statamic-3-alpha-1 Github project for something I can complete in a few hours.
There are still a handful of fieldtypes that need porting from Vue1 to Vue2. Date looks like a good one that won't take the whole day, unlike Replicator or Grid. We've been avoiding those ones for a while, not because we're lazy, but because we want to have as many patterns and conventions locked down before we work on The Big Ones™ to eliminate the possibility of having to rewrite them multiple times. That was a long sentence, but a grammatically correct one.
resources/js/components/fieldtypes/DateFieldtype.vue and immediately wish I picked an easier task. Resist the urge to open Reddit to procrastinate for 5 minutes.
The Date fieldtype has a lot of logic baked in to automatically support date strings with optional timestamps (e.g.
2019-02-07 11:30), using string length comparisons. It's a lot to look at compared to a lot of the other fieldtypes.
Let's just start with a basic refactor first.
- Reformat the component to use ES6 syntax.
- Strip out extraneous computed methods that are now part of the
app/Fields/Fieldtypes/Date.phpand merge the
meta.yamlconfig settings into a
$configFieldsPHP class variable.
- Vent in Slack about how long this is going to take to properly rewire the data flow. Get encouragement from Jason as he points out I can just add a watcher that emits an update event and keep the logic mostly the same.
- Feel dumb for 5 minutes – classic developer move.
- Finish rewiring the Vue data flow to properly emit update events for Vuex. Vuex is awesome by the way.
Tweet something. Get more coffee.
datetime.scss and start adjusting the fieldtype UI and improving the UX. I want the Clear Date and Add Time buttons to be consistent and inline with the new patterns in the v3 control panel. I also want everything I touch to come out better for it on the other side.
This fieldtype implements the Baremetrics Calendar library and there are a ton of variables and SASS mixins inside the
datepicker.scss component that are bleeding over. This is spring cleaning time, so I begin stripping these out and replacing with TailwindCSS
@apply calls and cutting anything unnecessary.
Davide Bellini tweets that he just translated the v2 control panel into Italian. Rad! Merge the pull request, tweet & retweet, and thank him whole-heartedly.
Back to CSS.
Lunch. Left over salmon and mashed sweet potatoes. I share because I care.
Google "budget Magic: The Gathering undergrowth" deck builds. Yeah, I've fallen into the MTG world and I can't get out. I have to beat my buddy Jamie's mono-green stompy deck tonight. I can't lose every round again.
Tear myself away from mtggoldfish.com and get back to work. Smile when I think about the time Davide spent carefully rewriting our language file in Italian. I love Italy. I'd love to go back. 🇮🇹
At this point the fieldtype is looking pretty darn good if I say so myself. Have a look.
I remembered someone was chatting about how they couldn't set which day of the week is first in v2. It's a pretty common thing for different countries to start the week on Sunday, Monday, or even Saturday.
I jump into the Calendar repo and go through the docs and issues looking for examples on how to accomplish that. It seems that if you set the current locale in your moment.js instance, it should Just Work™.
moment.locale('fr') // this should do the trick!
Dang it. Nope. Time for more digging. Maybe the
fr locale doesn't actually start on Monday like Google says it does?
Despite my best efforts, all weeks still start on Sunday. Statamic is still stubbornly American. I've been working with Tyler van der Hoeven, the creator of the Calendar library to figure out what's up. Works On His Machine™. Typical.
He asks if I'm on
v.1.0.14. It turns out I'm not. Turns out we manually imported the module with
file:/ and an older version was getting stale in our git repo.
That seems pretty unusual so Jason and I dig through the commits to figure out why. Turns out Calendar has only been on NPM for a couple of months. That explains it. We did what we could to make things work.
I rewire the library import properly with npm and try again. Nope.
rm -rf node_modules && npm install? Nope.
I start wondering if it's our moment.js instance that's to blame. Some debugging shows that moment returns the right day of the week.
// returns `1` as expected for the `fr-ch` locale console.log(moment.localeData().firstDayOfWeek());
🤔 Maybe Calendar is using it's own instance of moment? I start down that train of thinking for a while, hacking around inside the library with
Shoot, the day is almost over and I need to answer some support questions. I guess this will have to wait. I create a new Github Issue so I can pick up where I left off tomorrow. Figure out how to get moment.js and baremetrics-calender to play nice with locales.
Fire up Intercom and Discord at the same time. Let's help some folks out.
It's time for dinner and my wife has had a tiring week so far with homeschooling and the puppy. We're going out for Mexican food. 🌮
Eating a fajita quesadilla. Life is good. Tomorrow I do this again, but with the select fieldtype. And hopefully find an answer to the date of the week problem.