Silas

First, I added general improvements including fix for the color tiles appear when loading in dark mode, and fixed the layering issues where the route tooltips were sometimes obscured by icons including stops and busses. I also added an accessibility icon and API feature so that you can see if a stop supports wheelchair ramps.

First, I re-implemented the dynamic route width depending on zoom, I guess I just forgot that when moving to react. I also added a wind speed and direction tooltip when hovering the weather section! (pictured second is the thick lines!)

I added a dynamic weather display for live weather in Seattle. It shows the temperature in Fahrenheit and an icon for the weather (that I designed in affinity!). This was done using the open-meteo API, which is free. I also restructured some files and organized my folders.

Refactoring complete! All code is now in react, and the server hosts the react files on my raspberry pi! I also made huge improvements on the stop arrivals view, and it is now much more clear whether a stop truly has no arrivals or the API is just erroring. Next, I am adding a live weather view!

I finished the entire map refactor, all features now work as intended. As a bonus, the tooltip code is way more efficient and I fixed the stuttering, along with fixing Z-index issues on the stop icons.

Began React refactor! So far, I have just added map support, no CSS yet. Next I am planning to reimplement the UI system.

First, I refactored the variable system into something much easier to read, and while doing this I discovered a pretty bad bug. None of the localstorage saving was correct, and sometimes it would default to vehicles and stops being hidden, so I fixed this and cleaned up the storage code. I attempted to split my code into modules but gave up - eventually I’ll try again

I added real-time vehicle rendering for link! Now, my vehicles endpoint has support for multiple agencies and distinguishes between vehicle types (using GTFS). I also created a custom light rail icon in affinity! I also fixed some of my manual data cutting I did in my last devlog to only affect soundtransit stops.

I added support for the link light rail (finally!). This took quite some time, as I had to somewhat manually remove duplicates of stations (one stop was created for every entrance). Now, there are just two for each station, one for each direction. I also added a smooth slide in out for settings and data, and made the input in the search function more inclusive.

First, I completely reorganized the HTML using various div containers, and I redid almost all of the CSS using flexbox rather than absolute positioning. After this, mobile compatibility was easy to add, mainly just centering everything and making all icons bigger!

Added zoom in UI effect, updated splash screen text and layout mainly using CSS and transitions.

I created a simple splash screen with a nice blurred background that fades when the screen is clicked. This was done mainly using just CSS and a little JS. I also improved the route search system by making the enter key work and changing the enter button color dynamically, and taking in lowercase and uppercase as equal inputs.

First, I made some changes to the line width: now it is dynamic and looks good while zoomed out far. I also started using the route colors given by GTFS, but I mapped them to my own palette as the given one is very ugly. I also rearranged the UI for better usage and aesthetics

I created a route search and highlight feature. I loop through all of the routes to find the inputted one. When the map is clicked, the route gets deselected. Also, minor UI improvements including styled tooltips. The map flies to the selected route.

Quick UI fixes before second ship! I changed the attribution and options style, and made the settings and shown status of options persistent in local storage so that they stay when the page is reloaded or reopened. I also have not shown a screenshot of my affinity file where I design my icons (yup, I made them all lol), so I will upload that here as well.

First, I overhauled the arrivals display. Now, the scheduled vs live labels are accurate (before it just set top 3 to live), and I added the ending destination for each route. I also improved the UI for destinations by adding more space and making it scroll rather than hit other elements. Lastly, I added a settings button rather than the crude close button i had earlier, and the hidden or shown state is remembered on reload.

I created an options menu to enable or disable map layers, as well as UI improvements for dark mode, and custom slider switches for the menu. I also optimized the rendering of busses and bus clusters by only requesting the vehicles shown on screen.

I created a real-time bus layer on the map. First, I get all the trips and figure out where busses are (using OBA) for each GTFS trip in the database. Then, all of those vehicles are rendered on the map. I used the leaflet cluster addon to combine close busses into one until zoomed in. I definitely still need to work out the colors for dark mode, and next I plan to add map settings, like showing live busses.

General QOL fixes: UI bugs, including flashes of the wrong theme fixed. I also made the selected stop persistent so that it renders no matter how zoomed out you are. Lastly, your chosen theme is now saved to the browser and will stay if the page is closed or reloaded.

Dark mode feature added. When the button is clicked, I change the tilemap, UI colors, and map icons to dark mode versions. Also added a smooth transition between modes!

I finalized the UI and added a routes display in the data panel, using a glass effect with CSS and I updated some icons. I also wrote the readme.

Now, the tooltips are dynamically created and show all of the routes you hover. This was done by checking the mouse position’s distance to all of the polyline segments rendered on screen. I also fixed issues when stops do not have real time data, names, or directions, and made sure to avoid undefined stops completely. It is also significantly easier to hover and click on map objects.

First, I created bus icons in affinity to be used for the markers. I also updated the arrivals code to get the id of the clicked stop and use that to fetch real-time data. This is getting very close to being completely functional, and I can start worrying more about design. I also started storing data with the stop objects on screen.

I created a new stops-nearby endpoint for my server. It takes in the bounding box of the map and finds all of the stops that are on screen, and I render them as markers. Eventually, I’m goinf to change the icons and style of the map, but they are default markers for now. Stops only render if there are less than 400 on screen for performance. Otherwise, a warning will tell you to zoom in.

I stopped using OneBusAway completely for route maps and shapes. Now, I am using GTFS data directly from King County, along with the GTFS library for node. Now, I run through all of the routes in the system, and check for the longest shape (which should be the correct route), then import it onto the map. All of the routes are actually in the correct places!! This is much more reliable and way way quicker than using OBA. I genuinely have no idea how I will deploy this tho…

I used the getroutebyagency request now, so that I can get all sound transit and KCM data. There seems to be a pretty bad bug though, and some lines are rendering as other lines. I believe this is the APIs fault as there are many trips for each route, and there is no way for me to find which trip is the correct one. I may use GTFS data instead for fixed data like route shapes.

First, I used the routesForLocation query to get all of the bus and train routes within 2.5 kilometers of the user. Then, I request shapes for each of those routes, and render them as polylines. I also used tooltips to show the hovered or clicked route, and changed the color of the selected route.

I struggled with vercel deployment for almost an hour and ultimately made no progress. I think I will need to use a service that does not do serverless deployment, like digitalocean, but they all require a credit card input. I also tested out some other routes in my map system.

I used Leaflet to create a route map! Currently, I am fetching the route shape which is stored as an encoded polyline. I use that and the polyline addon for Leaflet to render the route on to the map. I also fixed a bug where the minutes would be in the thousands because I forgot to account for scheduled trips or trips with no time data. The leaflet library is surprisingly easy and intuitive, and just their docs got me nearly all the way to rendering the train lines.

First, I set up the node environment on my computer (and this time did not expose my api key to the world). I created a basic UI that shows the departure times for a (hardcoded rn) station or bus stop. I recieved my API key after a five day wait, and I am using the arrivals and stops endpoints for the OneBusAway API (shown in the docs). Right now, I input a station ID code and it will output the arrivals/departures from the past 5 and next 35 minutes.

I fixed the gamecheck system one more time, finally setting the placed property at the correct time. I cleaned up some code and did some minor UI improvements, and wrote a final README.

First, I fixed a critical bug that was returning game over when there were still possible spaces because I forgot to set the blocks placed value back to false. Next, I created an animated play screen!

I created a simple combo system that makes the score increase much faster when active, and I made animations for when blocks disappear, using opacity and size changes.

I created a game over detection system. It loops through all possible positions of each available block, and if it finds no solutions, the game over code is activated. I also created a simple game over UI that I will improve on later. All core game mechanics are complete now, and I can add my own flair tomorrow!

First, I fixed a bug that allowed the user to place one block multiple times. Then, I created a new UI overhaul with glow effects, pastel colors, and a dynamic sized container for the grid.

I created the system that allows multiple squares to be in one piece. First, I created an array containing all of the shapes, and then I updated the mouse detection script and the grid snapping system. I now detect the position of all squares in a shape for each function / test. Lastly, I changed the colors to make it look nicer.

I created a score detection system and display by looping through each row and column and detecting when one or more rows / columns are full. Right now, the score just adds one per completed row or column.

I created a snapping system so that dragged blocks snap to the grid. The blocks now change the color of the detected grid square and snap to grid. Next, I would like to figure out how I can make multiple blocks drag together and randomize block generation.

I created a draggable block system using mouse up and down event listeners. The black boxes can be dragged separately and have an offset so that they don’t lock to the center of the mouse. These will eventually be the blocks you place on the board. Next, I will have to create a detection system for placing the blocks on the board.

I created a canvas and slider in HTML and coded a basic grid system in JS. I used math to make the grid self centering regardless of height or width, and made a slider to demo this system. Lastly, I created a click handler using event listeners to cycle through and detect when any block is clicked and change the color (this is mainly just proof-of-concept.)

I created a custom cursor by hiding the real cursor and creating a div object that follows the mouse’s position in JS. The mouse reacts to links when hovered and changes color and size. This was done using the mouseenter and mouseleave properties on all button objects. I also finished polishing up the projects and links section with final text and hover effects. Lastly, I completed the README file with all of the necessary information!

I created an about me page with four images in yet another flexbox. I also made the navbar automatically switch to the section you are on as you scroll using the scrollY value in JS. Lastly, I added some links to my other socials at the bottom of the page.

I created a JS script that makes the active section change color when clicked, and causes all of the other buttons to turn back to grey. The navbar is now fully functional. I also created one of the project pages, and learned how to embed a video into a page!

I created a simple hompage and projects section. I created both of these using flexbox elements and the project pages each scroll on their own. I also added hover effects on the project pages.

I recreated my navbar in flexbox and centered it using the text-align property. I also added transition animations to the links when hovered and made them link to different sections. When clicked, some buttons smooth scroll to other sections and the photography button links to a different page, where the other button is now active.

I created a simple navbar design using the w3schools tutorial and adding my own effects in HTML. I used hover properties and transitions to animate the links when hovered. Currently, I only have one page but plan to add more. The current page is just a placeholder to make sure the navbar remains at the top when scrolled (caused by using fixed positioning in CSS). Next, I will create some more pages and try to center the navbar.

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.