Devlog 5

Features

Options Panel!

The options panel I mentioned last devlog is finally completed. Now all quizzes under staff identification have been completed. You can select options from which clef, notes, or key signatures that you want. It did take a big refactor as I had to create a custom hook for the quiz logic.

Next Steps

Next steps will be to work on the next section of quizzes, which is staff construction. After that i’ll start having to work with instruments like keyboard and fretboard and then add ear training. I’m still not sure which one to do first, maybe it might be ear training since it’s mainly just playing a sound and clicking the answer.

Devlog 4

Features

More Quizzes!

More quizzes involving intervals, scales, key signaturesm and chords have been added. Working on keeping everything clean and making the options menu has been a nightmare, i’ll try to get all that fixed soon.

A lot of stuff is broken since i’m in the middle of refactoring all of this, but all the quizzes in the image have been completed and I just need to make options work.

I wanted more to show, but unfortunately I don’t think you can devlog after 10 hours and I didn’t expect everything to take this long so i’ll update again when everything is stable.

Changelog

• feat: add chords quiz
• feat: add scales quiz
• feat: add automatic question generation
• feat: add first key signature and interval questions

Devlog 3

Features

First Theory Quiz:

The first theory quiz has been added. The quiz generates a random note in either treble or bass clef, which the user must correctly identify.

Message

Despite it looking pretty simple most of my time was spent figuring out the different libraries like tonal and abcjs.

I do want to add a settings option for each quiz to customize the options, like being able to turn off a clef or specify the note ranges.
I also want to add in lessons on each page that can be read if you get stuck.

I am again sorry for the long devlog, but hopefully now since this quiz is done the next few identification quizzes will be much quicker to do. I’ll post another devlog when I get some more quizzes completed.

Changelog

• feat: add first theory quiz
• feat: add music theory option menu

Devlog 2

Today’s focus was mainly on looking into music theory and figuring out what to put in to the site. I’ve come up with a list of topics I plan on adding to the theory exercises which can be found in the clip below.
Some exercises will focus on just listening, like ear training, while others will provide a something like a staff or keyboard.
From what i’ve gathered online, reactronica seems to be the best library for my project, since its optimized for react.
The other thing I was looking at was the grand staff, which looks like it can be handled by abcjs, which is a pretty comprehensive library, and maybe could even be used as an editor to make music as well.
The focus tomorrow will most likely be to work on adding these theory exercises in, so i’ll post another update when I do that.

Devlog 1

Sorry for the really long first devlog, I was having some issues with vite which took quite a while to fix.

In terms of todays work, i’ve essentially completed the page skeleton. The header and navbar have been completed and I added a theme switching toggle.

I did spend quite a while on UI since it seems that a lot of feedback on my last projects was that the UI seems bland. I’ve decided to focus on creating a UI similar to material design since it is very simple and well liked.

Later, I plan on adding a simple music maker where you can make your own music, similar to something like chrome music lab. I also want to implement music theory exercises as well like interval ear training for example. Also, just for fun I might add a functions page where you can “hear” a graph similar to Desmos, though i’m not entirely sure how difficult that may be.

If anybody has any ideas or suggestions, please feel free to comment them.

Changelog

• feat: add navbar
• fix: reduce header into multiple components
• feat: add initial page structure + header functionality
• first commit

Devlog 15

Quick post-ship devlog. A couple voters pointed out some issues that were addressed here. I had forgotten to add a message in case there were no games today, which is funny since today is the one day where the NBA (the default) has no games which made it confusing for the users. Also, I did not account for playoff games where the status was not determined yet (e.g., teams were TBD or had multiple options).

Changelog

• Updates
• fix: show a no games today message
• Updates
• fix: fix playoff handling issues
• Updates
• fix: fix star display bug when switching leagues

Devlog 14

PWA support has now been added alongside getting the demo live. This is the last devlog before the first ship. I’ll outline some features here and go into more detail in the ship message.

Feature Overview
Save a team by clicking the star icon next to their name.
View games for an entire league or specific team for any day.
Live game overview featuring scores, win probabilities scoring plays, box scores, team statictics, and full play by play.
View league/team standings (Full, Conf., Div, WC).
System theme support.

Changelog

• Updates
• fix: button color fixes
• Updates
• feat: add pwa install button
• fix: pwa fixes
• Updates
• Updates
• Updates
• fix: fix pwa start url
• Updates
• feat: add pwa support
• Updates
• Add screenshots section to README
• Updates
• Add GNU Affero General Public License v3
• Revise README for OpenBoard project overview
• fix: add fallback for team logos
• feat: add a starring system to save teams to favorites

Devlog 13
After way too many hours the app is nearly complete. I got the favorite teams page to work and also added in play by play data today. Lastly i’ll probably just do some polishing and probably make a pwa and get the repository and demo in order tomorrow.

Changelog

• feat: add a starring system to save teams to favorites
• feat: add full play by play
• feat: add scoring plays
• fix: fix regular season sorting issues in standings
• feat: add full play by play
• feat: add scoring plays
• fix: fix regular season sorting issues in standings
• feat: add in feature to team schedule from clicking on the scorecard
• fix: fix auto scrolling going past live games
• fix: use local times instead of utc
• feat: introduce better sorting using playoff seeds

Devlog 12

Lots of progress made today. Some of the bigger features are that you can now view wild card standings for leagues that have them. Team schedules can now also be accessed from clicking their entry on the scoreboard. QOL changes have been implemented as always with animations, modern dropdown menus, better sorting for teams in playoff races, and labels for tournament games. For the most part schedules, game overviews, and standings are pretty much completed so now I need to add some personalization by making the home page.

Changelog

• feat: add in feature to team schedule from clicking on the scorecard
• fix: fix auto scrolling going past live games
• fix: use local times instead of utc
• feat: introduce better sorting using playoff seeds
• feat: add custom dropdowns and hover animations
• feat: add in wild card standings
• feat: add in labels for tournament style games
• fix: remove console errors due to missing keys
• feat: add pl and ucl

Devlog 11
Another day with lots of progress. Today I was able to add premier league, uefa champions league, and mls to the list of availible sports. The box scores chart also now shows individual player stats for select sports. The rest were again some small changes and fixes.

Changelog

• feat: add pl and ucl
• feat: add mls
• fix: fix table rendering errors due to inconsistencies
• fix: fixed box scores not showing substitutes or different categories like hitting/pitching
• feat: add player stats to game overview
• fix: handle regular delay status
• feat: add total scores to linescores

Devlog 10

For the most part it was small fixes and qol changes. I was able to add buttons to toggle between previous and next dates in the game schedule. I originally wanted to do infinite bidirectional scrolling, but this turned into a multiple hours long nightmare. When it was working, it was still kind of wonky and didn’t make for the best ux, so i just decided to add buttons instead since they are simpler and had a better overall ux.

Changelog

• feat: add ability to see prior and upcoming games
• fix: handle rain delay status
• fix: add error catching for api calls
• feat: add dynamic animations for live game status
• fix: fixed issues with postponed games
• fix: refactor x button logic
• feat: show selected team in standings
• fix: fix win percent returning incorrect values
• feat: add theme toggling

Devlog 9

Very small one today. In this devlog I added support for a theme toggle, and it is also persistent in localstorage. Also fixed a small bug with postponed games showing scores of 0-0 instead of hiding the scores. I’ll probably make custom dropdown menus due to the limited css styling support and browser inconsistencies.

Changelog

• feat: add theme toggling

Devlog 8

Hackatime was down yesterday so this is yesterdays work. It was some small changes but the headlining feature was that now you can view team schedules for all their games by clicking the team name in the standings.

Changelog

• fix: close button ternary now behaves correctly
• fix: hide scores when games have not yet started
• (fix) fix clincher logic
• (feat): add schedule for individual teams when clicking their standings entry
• hide win percentage if nan
• added division and conference toggling to the table, added win probabilities

Devlog 7

Lots of progress made since last commit. The standings now can be toggled through division, conference, and league, which was suprisingly tricky to do and required linear recursion. I also made some more progress on the game overview and added win probabilities.

Devlog 6

Took a break but now i’m back to working on this. I mostly worked on the scoreboard and did initial work on implementing box scores. Summaries of the latest play of the game for in progress games have also been added as well.

Devlog 5

Small changes here. The table has now been fixed to accomodate mobile devices with overflow scrolling. Multi-page support has also been added in this one.

Devlog 4

Standings have now been added. They work for every sport I added. but so far they are only league wide. Next, i’ll hopefully add a way to sort into conferences/divisions.

Devlog 3

Match times have now been replaces with statuses. Also the dropdown menu now works across the 4 major sport leagues (NHL, NBA, NFL, MLB).

Devlog 2

ESPN API is now up and running. Right now only nhl matches for today will show up, but next i’ll probably get the dropdown to work for other sports since most scoreboards follow pretty much the same format. I’ll also add in other missing details like the current period/quarter/inning/final and the latest play of the game.

Devlog 1

This is the first devlog for this project, so i’ll explain my vision for this project. Recently, I was thinking that there is not really a proper app to see sports matches and info properly. Most apps/websites like ESPN are quite cluttered and filled with ads. The cleanest we have is google sports, but even that is still not perfect. So i’m planning on making this a simple way to view data from popular sports leagues/teams without the clutter. I’m planning on using ESPN’s public api, since it has no authentication or subscription required, but it is undocumented and could be changed/removed any time.

Devlog 14

This update focused mostly on qol changes. Since thats done i’ve now attached a live demo at https://es1228.github.io/OpenSky/

Devlog 13

Location saving is now added. Thats all major features completed so now I just have to fine tune some things and then the project will be complete.

Devlog 12

Location search has now been added

Devlog 11

Lots of misc changes today.

• Basemap has been switched from google to esri because its against the google tos to use their basemap without the maps api

• Summaries are now dynamic and no longer hardcoded

• Automatic unit detection has been implemented

• Themes can now be manually toggled between

• Settings are now saved in localstorage

Devlog 10

Lots got added again today. Weather icons were finally put in (I found some animated ones too, pretty cool). The HRRR is also now available as a map source so you can now see radar data in the future instead of just archived. Weather alerts also got added in this commit which is pretty useful.

Devlog 09

A lot got added today, the currently, hourly, and daily pages have all been populated with actual data. The site now auto detects location, and you can press the button to get your current location. Units have also been added so now you can switch between metric and freedom units. The next big feature will be the location search then it will be pretty much functional except for some minor things which can be done quickly. Maybe I’ll add more map layers and i’ll probably also add weather alert fetching soon.

Devlog 08

Pretty big one today. The currently page is now functional and pulls data from the pirateweather api. Right now I have not yet added the ability to search for different locations yet and only the currently page pulls in data. I’ll add the current location functionality soon since js has a built in geocoding api to fetch lat and long. I also figured out how to make a serverless function in vercel so the api key is not exposed in the frontend. I also revamped the theme a little bit so the colors don’t look dull anymore.

Devlog 07

Environment Canada weather radar has now been implemented. You can now switch between time frames and see 3 hours of archived radar. Maybe later i’ll add the HRRR so you can see I believe 18 hours into the future. I also spent way too long trying to get the leaflet-timedimension plugin to work with react-leaflet but eventually just ended up fetching the times and making the controls manually.

Devlog 06

Today I added small improvements to the other pages but the biggest thing I did was get weather radar working. It was quite simple all I really needed to do was create a map using leaflet and add environment canada’s weather radar as a wms layer. Currently you cannot move between frames but i’ll probably add that feature soon.

Devlog 05

Did a bit of work on the rest of the frontend and got daily and saved locations mockups done. The navbar is also functional now so you can switch between pages. Most of the frontend is done now so I hope to finish the mockup soon so I can start actually working on the api implementation and app functionality.

Devlog 04

Took a bit of a break over the last couple days but today I implemented the structure of what hourly data should look like. The frontend still has quite a bit of work that needs to be done for the other pages and nothing is really functional yet. After thats done i’ll start work on implementing the api calls and putting that data on the site (shouldnt be too hard since react and jsx have pretty good html-js integration. It seems like a hassle to get each user to sign up for an api key so I should also work on learning how to hide my api key from production. After researching vercel seems like a pretty great choice since they have a good free tier and wont charge you if you go overboard.

Devlog 03

Did a slight refactor to move position logic outside of the component. Mostly worked on making a mackup of the current conditions and the highlights page. So far each component is responsive on both mobile and pc.

Devlog 02

I started work on the site layout. So far the structure for the navbar and location searching have been completed, and next I plan to work on creating cards to hold all the weather data.

Devlog 01

I’m planning on making a fully open source weather application written in react + typescript. The planned features include current, hourly, and daily conditions. I hope to be able to implement features like radar, advanced precipitation types (freezing rain, sleet, thunderstorm. etc.,) and some other features. For now, I have to look into some APIs to support the features. I heard that PirateWeather is pretty good and its open source.

Devlog 08

I made some misc fixes and added a completion status to the task list. I think I am going to ship this now and start working on some other projects.

Devlog 07

Added responsive design and saved everything to localstorage. I think i’m going to end this project soon as I want to work on something more fun than a todo app.

Devlog 06

Added priority levels and due dates to tasks, also worked on visual improvements.

Devlog 05

Today I decided to work on the design of the website, it turned out pretty well now as I added blur effect throughout the site. I also finished work on the edit button so now tasks in the list can be edited.

Devlog 04

I was wrong again, separate files for components are the best thing to do. I cannot believe I spent this long on this simple todo app but I had to refactor again. On the bright side, I discovered that you can make props and simply pass everything from the parent to the child via these props. My components are now very simple and properly organized and i’m starting to understand why people use react, jsx, typescript, and tailwind over plain html/css/js.

Devlog 03

So apparently making all of your react components in separate files and importing them was not the best idea. I spent so long wondering why everything was so complicated and I had to refactor pretty much everything into a single file. Nothing better than spending multiple hours just to end up removing hundreds of lines of code.

On the bright side the core features now are pretty much done and soon i’ll actually add other features to differentiate this from a generic todo list.

Devlog 02

Added in some other stuff into the layout, probably not gonna work on this that much this weekend but at least a layout with the bare minimum features is done.

Later on I plan on adding extra features like priority tags and due dates and all that stuff. I was researching and it seems like I should not need things like classes and plain js objects should suffice.

Devlog 01

Began work on a new app, this time its a web app. I’m trying to learn React, Tailwind, and TypeScript. I also want to get back into web development because I have not touched HTML/CSS in a while.

I’m kind of unsure whether or not to use OOP principles like classes so I can assign tasks by priority and have functions to add/remove tasks and stuff like that or if theres a better way of doing it.

Also learned how to make reusable components with JSX and it’s suprisingly simple.

Made some minor improvements to slightly increase the clarity of some instructions and labels.

Scaling has been vastly improved on different monitor types. It’s not perfect but now it should be at least playable on other monitors wirh fullscreen mode.

Seems like there is a scaling issue on other monitors, will update when fixed.

It now has a downloadable release!

https://github.com/es1228/MineSweeper/releases/tag/v1.0.0

Had to do a refactor of my code to improve optimization, readability, and functionality. Finally got the anti mines feature of the game working, which suprisingly adds a very fun twist to the game. All that is really left is to add a scoring system and then the project should be ready to ship.

The game can now manage menu states properly. The core features and game play are now fully functional. Now all thats left is to add an anti mines gamemode and store previous scores in a file for record viewing.

Was wondering why I was having a memory leak. Turned out I had to store images in a static class to avoid repeated reloads into memory. Now memory stopped skyrocketing to 100+ MB and went all the way down to 15 MB

Migrated the project towards a dark theme. Hoping to hopefully add more unique features, a better looking menu, and maybe add another gamemode (negative mines maybe?).

Game logic is now mostly implemented. Now time to focus on UI/UX and add additional features.

Started working on some images. Simple but turning out better than I thought.