100 Days of Code
Day 36 of 100
Day 35 of 100
Day 34 of 100
Day 33 of 100
Day 32 of 100
Day 31 of 100
Day 30 of 100
Day 29 of 100
Day 28 of 100
>>> Published
Projects
- react-router-isomorphic-link:
- Reiterated on the documentation.
- Published the package to npm. 🥳
- Tweeted about it!
Day 27 of 100
Day 26 of 100
Day 25 of 100
Day 24 of 100
Day 23 of 100
Day 22 of 100
Day 21 of 100
Day 20 of 100
>>> Covid-SSML
Projects
- react-ssml-dom
- Created the Dialogflow model for my Covid-SSML demo app and tested it out on Google Assistant!
- Started moving code from the demo app to react-ssml-dom. Will continue tomorrow!
Day 19 of 100
Day 18 of 100
Day 17 of 100
>>> React 18
Projects
- Vela Pilates:
- Finally released a new version of the velapilates including an update to the design (using TailwindCSS).
- react-datalist-input:
- Replaced custom useId hook with new React 18 useId hook. Really cool!
- Replaced custom useDebounce hook with new React 18 useDeferredValue hook. Really cool!
Learning
- Played around with React 18, specifically useId and useDeferredValue.
Day 16 of 100
Day 15 of 100
Day 14 of 100
Day 13 of 100
>>> Void
Projects
- Didn't do much today as I had to organize a few things however, I finished & presented a uni project today!
Day 12 of 100
>>> Void
Projects
- Didn't do much today as I had to organize a few things however, I finished a uni project, which turned out to be a good learning experience!
Day 11 of 100
>>> It's the Remix
Projects
- Fixed some things up in react-ssml-dom to make it work nicely together with Remix.
- Created a demo application remix-voice, which showcases how to use react-ssml-dom together with Remix.run and React to build voice UIs!
Learning
- Further investigated React Server Components, especially diving into the react-dom package to see how suspense is used when rendering static markup. It's very complicated and I had a hard time following the logic...
Day 10 of 100
>>> Coffee & Code
Projects
- Cleaned up react-ssml-dom and published the changes as 2.0.0-experimental.1!
- I removed the "conversation" logic but I haven't found a great alternative yet.
- Since I removed the "conversation" logic, the demo app is currently broken.
Learning
- Investigated React's upcoming Server Components. They seemed like a great replacement to the "conversation" logic in react-ssml-dom but they seem to be quite a bit more complicated. I will probably just use data fetching outside of React for now and then use Remix for the more complex demos.
Day 9 of 100
Day 8 of 100
>>> Voice UIs
Learning
- Played around with Remix for voice UIs. Spent a lot of time experimenting with the
entry.server.tsfile. Tried to make Remix work both for voice-only UIs (rendering SSML instead of HTML) and web pages with voice support. I will create a demo for both in the next weeks!
Projects
- I read through the code of an old research project of mine - react-ssml-dom - which I will use under the hood of my Remix-based voice UIs.
Day 7 of 100
Day 6 of 100
>>> Playing Games
Learning
- Implemented a small browser game from scratch (inspired by Mary Rose Cook's Space Invaders). Learned a lot about: canvas, audio, the web navigator object, and animation frames today!
Projects
- Worked on my portfolio site:
- Added a demo overview page
- Added a first demo: Jump n' Run
Day 5 of 100
Day 4 of 100
>>> Good Things Take While
Leetcode
- Quick Sort Implementation
Learning
- Watched this really cool conference talk by Mary Rose Cook about the basics of game dev on the web.
Day 3 of 100
Day 2 of 100
>>> Leetcode, Uni, and This Journal!
Learning
- CSS Animations & Transitions (Level Up Tutorials):
- Hands-On Squash & Stretch animations with css transform, transition, and cubic-bezier.
- React-3D (Level Up Tutorials):
- Getting started with the fundamentals of Three.js: Scenes, Light, Camera, and Meshes!
Leetcode
- Two Sum (using Map instead of Sort & Traverse)
- String.prototype.repeat Polyfill
Projects
- 100DaysOfCode Journal at andre-landgraf.cool (mostly copy-paste from past projects):
- Fetch files from GitHub
- Render md files with custom React components)
- Embed Tweets
- Cool gamified Font!
Day 1 of 100
>>> Hello World!
Community
- Answered one question on StackOverflow:
- "How to programmatically submit a form in Remix.run"
Learning
- CSS Animations & Transitions (Level Up Tutorials):
- Simple Squash & Stretch animations with css transform, transition, and cubic-bezier.
Leetcode
- Two Sum / Three Sum / Four Sum
Day 0 of 100
>>> My Goals for the next 100 Days!
There is just so much I want to do this year! I can probably not finish all of this but I will try to tick as many boxes as possible in the next 100 days of code!
- Learning
- CSS Animations & Transitions [ ]
- 3D for websites (WebGL, Three.js, and react-three-fiber) [ ]
- Data Viz for the web (D3.js) [ ]
- Leetcode
- Crush coding interviews [X]
- Community (StackOverflow, Remix.run Discord, Meetup, Twitter, ...)
- Speak at Remix.run Meetup Bay Area [ ]
- Open Source
- Publish ARIA-compliant version of react-datalist-input [X]
- Contribute code to Remix.run project [ ]
- React + Voice
- Experiment with Remix to create voice applications [X]
- Create a virtual talk (video) about the application of React/Remix for voice apps [ ]
- Experiment with web + voice apps using Remix [ ]
- Projects
- Particular.Cloud
- Fix lambda timeout (mongoose connection) on Vercel (deploy to fly.io) [ ]
- Release crowd-sourcing feature [ ]
- Open source npm packages & VS Code extension [ ]
- Add docs search and command panel using Algolia [ ]
- Vela Pilates
- Refactor from Gatsby & JavaScript to Remix.run & TypeScript [ ]
- Replace remaining styled-components code with Tailwind CSS [ ]
- Implement new referral logic [ ]
- Implement new reminder logic [ ]
- Expore/design live-stream course logic [ ]
- andre-landgraf.cool
- Apply learnings [ ]
- Showcase projects [ ]
- Showcase 100 days of code progress [X]
- Particular.Cloud