Building an OS with React - Taskbar
19I'll be rebuilding my browser "OS" project over a series of many streams. For this project I will continue to use React & Next.js written in TypeScript. I plan to make it collaborative and involve the community. I will focus on a Windows 10 style this time instead of a hybrid.
In this stream I'm going to do more work on styling the taskbar. Also I have the usual litany of refactors. This stream will be more improvised as it's been a rough week and I didn't prepare as much as usual.
Chapters:
0:00 Stream Starts
1:00 Introduction
2:25 The Original Project
4:39 Episode Recap
14:40 NPM Updates
18:12 Fix Build Pipeline (WebGL Check)
26:26 Remove React Ref from Wallpaper
34:33 Fix Theme Type Checking
37:37 ESLint Prettier Plugin
43:38 Disable Stylelint False Positive Rule
50:25 Reorganize File/Folder Structure
56:24 Remove Title Component
58:11 Rename StyledClock Variable
58:35 Refactor withStyledComponents
1:01:40 Remove Startup Processes Function
1:07:10 Extract Default Theme
1:10:04 Set Wallpaper Theme as Optional
1:11:25 Extract Sizes to Theme
1:22:26 Remove Width from Taskbar Entries
1:25:30 Center Content in Taskbar Components
1:34:30 Adjust Positions for Stacking Context
1:42:25 Add Type to Button Element
1:44:47 Add Role to Main Element
1:47:29 Add DateTime to Time Element
1:51:57 Always Prefer Arrow Functions
1:54:17 Fix & Update Test to Best Practices
1:59:48 Moved MetaData into SessionProvider Context
2:02:21 Extract ProcessesReducer in ProcessLoader
2:08:58 Use a Darker Color in VantaJS Wallpaper
2:10:58 Use React.FC Sparingly
2:20:07 Compare Attributes in Windows 10 VM
2:34:45 Next Stream
Stream Notes:
https://github.com/DustinBrett/daedalOS/tree/main/public/Users/Public/Documents/Stream%20Notes/02-13-21.md
Code Repository:
https://github.com/DustinBrett/daedalOS
Demo:
https://dustinbrett.com
#coding #programming #reactjs