‹div›RIOTS' Advent of Code 2021 - Recap
The Challenge
25 days - 25 features: it was a 2021 promise from the team in an effort to challenge ourself and to give back to the community, and well… we delivered!
What started as a fun challenge, fuelled by tons of features ideas and motivation, soon began to be a daily jump-scare as marketing would ask “No pressure, but are we good to go for today?” while someone is sweating, finishing a 14 hours no-break sprint to release the promised feature and crossing fingers than the release won’t break anything. It sometime broke, often not, but we delivered, days after days.
What did we learn
A great stress test for products and processes
Unveiling a gift a day meant that we had to release everyday, putting our reviewing and testing processes under heavy load.
The main benefit was that any issue would be amplified to a point that it became impossible to miss, we became aware of every bottleneck and could work on them one by one.
As we sometime had to cut corners to release on time, technical debt had to be taken into consideration: is the feature future proof? Are we creating dead-weight? We became more efficient at making quick decisions, the right way, hence improving our day to day efficiency.
Hidden team-building exercice
We gathered so much positive feedback from the community, and felt so accomplished, making it happen day after day until the very last one that we came out of these 25 days stronger than ever, as a company and as a team of remote individuals.
We started with a fun one, because it’s Christmas:
Day 1
🎁 Dec 1st#AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 1, 2021
🎅 Flying Santa #WebComponent!
Spice up your UI with a very Christmasy #WebComponents
- Santa shows up
- Santa Flies
- Santa throws gifts
- Speed, throw and gifts fully editable
👉 https://t.co/ldV9WrV6LX
Merry Advent of Code! 🎄 pic.twitter.com/sbxutStyye
Then we started using the big guns:
Day 2
🎁 Dec 2nd#AdventOfDivRIOTS
— Style-Dictionary-Play.dev (@sdplay_dev) December 2, 2021
🦎 style-dictionary-play Major update!
- Live component preview window
- built-in mobile/Desktop view
- Allow JS Tokens & Config for more flexibility
- Better Style Dictionary error handling
👉 https://t.co/diNF4taX4W
Merry Advent of Code🎄 pic.twitter.com/a9n2jCOe8f
Day 3
🎁 Dec 3rd#AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 3, 2021
▶️ play-user-event: a wrapper for @TestingLib user-event for visual feedbacks!
Ready to use in the new @storybookjs 6.4 interactive stories!
Try it now 👉 https://t.co/8hlnpWbpRx
Merry Advent of Code 🎄 pic.twitter.com/xAtuoznxWf
As the first weekend came up and the team started sharing about food recipe for the coming vacations, we put our hungry minds together and came up with the ultimate open source cake recipe, blueprint included!
Day 4
🎁 Dec 4th#AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 4, 2021
🍰 We are open sourcing our Awesome Cake: a div>RIOTS exclusivity
GitHub recipe 👉 https://t.co/J0fLeszMv5
1. Make one
2. Tweet the picture mentioning @divRIOTS
3. Get gifts 🎁
Merry Advent of Code 🎄 pic.twitter.com/tNkayBIcUw
Day 5
🎁 Dec 5th#AdventOfDivRIOTS
— WebComponents.dev (@webcomp_dev) December 6, 2021
📗 We added support for global stories config!
You want to apply the same decorator, same parameters or same args to all your stories ? Now you can! with a new file: `stories.preview.js`! (JSX and TS too 🤗)
Learn more ➡️ https://t.co/yBPuxqwcgc
Day 6
🎁 Dec 6th#AdventOfDivRIOTS
— Backlight.dev (@backlight_dev) December 6, 2021
🔶 @sketch support for https://t.co/YKMYIepU2k!
Embedded Sketch documentation right next to your #DesignSystems to allow perfect #Developers and & #Designers alignment!
Try it now 👉 https://t.co/sxoO2MGyQ5
Merry Advent of Code 🎄 pic.twitter.com/UmpDuFCTD1
One week into the challenge, we made it! The daily releases didn’t break anything major so far, better, it highlighted some weaknesses in our release process and forced us to re-think and upgrade said process for productivity gain, it’s a win-win! The try ‘n fail wasn’t probably seen as a pain-free success by 100% of the team members but a win is a win!
Day 7
🎁 Dec 7th#AdventOfDivRIOTS
— WebComponents.dev (@webcomp_dev) December 7, 2021
🐢 #turtle support and syntax highlighting for .turtle files!
Made with love for @tpluscode, as per his wish on our discord😉
Try it now 👉 https://t.co/ylqemqBw6Y
Also available for @ComponentsStdio!
Merry Advent of Code 🎄 pic.twitter.com/UX7SehkZ6G
Day 8
🎁 Dec 8th#AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 8, 2021
🔷 #VSCode Custom Data support for #HTML and #CSS!
Enriched autocomplete of HTML and CSS directly in the editor, like in @code!
Available for @webcomp_dev, @backlight_dev & @ComponentsStdio
Try it out 👉 https://t.co/HXW6Unid1d pic.twitter.com/bGu50p4YP3
Day 9
🎁 Dec 9th#AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 9, 2021
✋ Right-hand mode for our browser IDE! Made with ❤️ for right-sidepane-fans (@jlengstorf 😉)
This feature is now available on @backlight_dev, @webcomp_dev & @ComponentsStdio!
Learn more 👉 https://t.co/HBxxlwDHm3
Merry Advent of Code 🎄 pic.twitter.com/EojJDfaWEU
Day 10
Time to unveil our secret weapon, a full design System! Based on Material Design, BRICKS makes for the perfect gift, special mention to the Christmas spirited gif!
🎁 Dec 10th#AdventOfDivRIOTS
— Backlight.dev (@backlight_dev) December 10, 2021
New #DesignSystem Starter-kit based on @MaterialUI!
🧱 BRICKS
♻️ Open source
🔥 50+ components
🎨 Tokens-based theming system
🧱 MUI's compatible theme
📚 Embedded Interactive documentation
🌗 Dark mode
👉 https://t.co/Hc8meeikCY pic.twitter.com/ZA5eJlhiUB
Day 11
🎁 Dec 11th#AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 11, 2021
🔲@Shields_io integration!
Available for @backlight_dev, @webcomp_dev & @ComponentsStdio!
Merry Advent of Code 🎄https://t.co/NtzzHZrVaV
Day 12
🎁 Dec 12th#AdventOfDivRIOTS
— WebComponents.dev (@webcomp_dev) December 12, 2021
A little one for a Sunday afternoon!
The branch switch has been revamped to always show the default branch on top!
Easier to access 👍
🎄Merry Advent of Code pic.twitter.com/wh8k0EshsJ
Day 13
This one was in our sleeve for a long time, what better to give to a community than a place to hang out and share?
🎁 Dec 13th#AdventOfDivRIOTS
— WebComponents.dev (@webcomp_dev) December 13, 2021
🎟️ Early access to our new https://t.co/9qu4SU4JrB community 🤝!
A place to
- Share & discuss your ❤️
- Share experiences with #webcomponent
- Gather resources
- Explore & offer tutorials
👉 https://t.co/o10ljkJkOv
Merry Advent of Code 🎄 pic.twitter.com/5fCJHloMAZ
Day 14
🎁 Dec 14th#AdventOfDivRIOTS
— Style-Dictionary-Play.dev (@sdplay_dev) December 14, 2021
⬇️ Style-Dictionary-Play zip files!
You can now download your current Style Dictionary playground files as a ZIP!
👉 https://t.co/diNF4taX4W
Merry Advent of Code 🎄 pic.twitter.com/KPxJhhBs4c
Day 15
🎁 Dec 15th#AdventOfDivRIOTS
— WebComponents.dev (@webcomp_dev) December 15, 2021
⚙️ New Custom Element Manifest Generator!
Future proof – we now support schema version 1.0.0, custom-element-manifest.config.mjs & plugins!
Try it now 👉 https://t.co/zHKPHpdgGh
Merry Advent of Code 🎄 pic.twitter.com/2B8nAMIPhD
Day 16
🎁 Dec 16th#AdventOfDivRIOTS
— Components.studio (@ComponentsStdio) December 16, 2021
🚀 NEW! Build #Astro components in isolation and release them to npm in one click!@astrodotbuild components syntax now supported:
- Code syntax highlighting
- Stories
Try it out 👉 https://t.co/rR3AsooQV7
Merry Advent of Code 🎄 pic.twitter.com/L12nOyTLRV
Day 17
🎁 Dec 17th#AdventOfDivRIOTS
— WebComponents.dev (@webcomp_dev) December 17, 2021
🔡 https://t.co/9qu4SU4JrB has now its own CLI!
You can now use the CLI to work with your local IDE and see the changes live!
Learn more 👉 https://t.co/9lbCHKXfVJ
Merry Advent of Code 🎄 pic.twitter.com/rAyjqfmncc
Day 18
🎁 Dec 18th#AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 18, 2021
🟩 #Nunjucks support for your templates!
Support of @mozilla Nunjucks for our entire range of products: @webcomp_dev, @backlight_dev & @ComponentsStdio
Check it out 👉 https://t.co/TNCBYlTx0w pic.twitter.com/FH5hP80D8A
Day 19
🎁 Dec 19th#AdventOfDivRIOTS
— Style-Dictionary-Play.dev (@sdplay_dev) December 19, 2021
🦎 Style-Dictionary-Play files & folders renaming!
Style-Dictionary-Play now supports files and folders renaming with a button click or by pressing F2 on the keyboard!
try it now 👉 https://t.co/diNF4taX4W
Merry Advent of Code 🎄 pic.twitter.com/kMYVXnxiTB
Day 20
🎁 Dec 20th#AdventOfDivRIOTS
— Backlight.dev (@backlight_dev) December 20, 2021
🎨 Enhanced Design tab!
Now embed your @sketch @figmadesign or @AdobeXD file next to your #DesignSystem, simply by copy-pasting the link!
Try it out 👉 https://t.co/sxoO2MGyQ5
Merry Advent of Code 🎄 pic.twitter.com/4CvQvJxDbS
Day 21
🎁 Dec 21th#AdventOfDivRIOTS
— Backlight.dev (@backlight_dev) December 21, 2021
😜 @gitmoji support!
You can now use emojis on your commit messages!
Try it out 👉 https://t.co/nnpazYsfrJ
Merry Advent of Code 🎄 pic.twitter.com/yIDPOiv5CF
Day 22
🎁 Dec 22th#AdventOfDivRIOTS
— Backlight.dev (@backlight_dev) December 22, 2021
📝 In-app comments!
First version of the comment feature for asynchronous collaboration! Share a branch and collect feedback.
👥 Enhanced collaboration
⚡️ Faster workflow
Merry Advent of Code 🎄 pic.twitter.com/tW2OfsOF7k
Day 23
🎁 Dec 22th#AdventOfDivRIOTS
— Backlight.dev (@backlight_dev) December 22, 2021
📝 In-app comments!
First version of the comment feature for asynchronous collaboration! Share a branch and collect feedback.
👥 Enhanced collaboration
⚡️ Faster workflow
Merry Advent of Code 🎄 pic.twitter.com/tW2OfsOF7k
Day 24
🎁 Dec 24rd#AdventOfDivRIOTS
— Backlight.dev (@backlight_dev) December 24, 2021
🎨 #Figma library for #BRICKS!
BRICKS, our @MaterialUI #DesignSystem gets its own @figmadesign library!
See in backlight 👉 https://t.co/uxkSg1UOAT
Figma workspace 👉 https://t.co/15ZbV9B75b
Merry Advent of Code 🎄 pic.twitter.com/W6GpBSZ8P0
Day 25
And it's a wrap! #AdventOfDivRIOTS
— ‹div›RIOTS (@divriots) December 25, 2021
25 days - 25 gifts🎁! If you missed one, catch up 👇https://t.co/goDI4rZ2pe