@omeriadon

As well as migrating to Tanstack, I wanted even more speed, just for fun at this point honestly, so I decided to move to SolidJS from React.

Its decently faster while looking similar to react, and it has some syntax stuff that i much prefer over react.

this is basically just adding some margin for me to make bad code

The end product looks identical so theres not much to show..

apart from the migration, I’ve also been designing the new landing page, which will also use the 3d model thing. the big question is figuring out how to make the 3d markers for each classroom register correctly, because i need to show a pin for each user at the right place, from swiftui, and somehow embed it into a realitykit 3d model.

but im sure this use case has been done many times before so i can find something online!

Im making a 3d model of the school. this is so that i can show a whole literal map of the campus in the app, and then you can see where each user is, in 3d! i could even reexport it for the website, potentially

its going to be interactive and everything

ok so i think i have optimised it as much as i can lol

tanstack clearly was a good idea, it just needed some optimisations!

I did a few things in this devlog, got quite carried away frankly.

So I migrated the codebase from Next.js to Tanstack. The reason was that i was seeing a lot of speed concerns, especially on the landing page. it was just lagging so much. i tried it on all my devices on all the browsers and it was there half the time. after a lot of commenting things out i just couldnt find a bug, so now i moved to tanstack. hopefully taht will remove at least some problems.

in any case, i got bored of next.js and tanstack is a different framework to play with and make use of!!

also, i continued the landing page by adding cards for each item. i don’t really like it right now, but i have established that i need to add these cards, if not in a different UI.

The titles of each card are just image-masks, of Apple wallpapers! i went through some archive and picked out the ones i like, and applied a brightness 200% filter, and they look really nice now.

after i finish the landing page im gonna work on rehauling the rest of the ui to be more intuitive and actually usable

I really wanted the first screen for timetable to look really really interesting and unique and instantly recognisable as Timetable, so i made the text instead of a boring white, it now has 3 really nice effects applied:

• A grain overlay, or noise, which in this case doesn’t make it look paper but looks nice nonetheless
• Its not flat white, its white at the top and goes to brown at the bottom, more noticeable when you close up. subtle but also nice
• The “white” isn’t even white. Its a particular white image i had a lot of difficulty in obtaining. it is the third screenshot, the “white” png. Its an .avif, and it uses some HDR-capable color space format something, which on compatible browsers make the timetable text show considerably brighter than everywhere else on your screen, which makes it really pop! i plan on using this effect in other places as well across the landing page to make it just pop a bit more.

(the 4th image shows the white pixel showing as 1.25. anything above 1 is hdr.)

I added a title to the lading site, but as you can see its not just any title. it uses this package called fitty to make the text size up to the full width of the page, and it does indeed look massive. and it also goes under the rectangles of the logo, so its like an apple depth effect you get on iphone lockscreens

i found the website really laggy while scrolling somewhere while finishing of the main interactive icon, and i couldnt figure out why after removing everything that could have been gpu intensive (my gpu was spiking to 80% while just scrolling)

so after all that my most likely theory is that the lag is just my computer and not the website (or both 😭😭)

also when i made that main art, i made the border radii use px units, which made it look quite deformed on smaller screens, since the rectangle’s size is relative to screen width, whereas border radius is constant… so i went and fixed that too

After much trying to make glass, yet again, i failed.

So now im just using blur and these edge effects, and i think it looks nice!

theres even a hover eect, as shown in the second screenshot
(class details show and the rectangle rotates a bit randomly)

I started to make the landing page, and i decided, after very much research from other landing sites I’ve seen, that the main item should be an interactive timetable, a version of the app icon. but interactive and glassy. im trying to recreate everything in css but its not looking as smooth and polished as real liquid glass does so ye. im kinda getting close though!

I also added a navbar item that just is the link to actually open timetable, and when you hover it shows options to either open the app in testflight or open the web version which just redirects to /login. and its background switches to black when you start scrolling, which will make more sense later.

i haven’t really planned the rest of the landing page, and i might remove this entire component if i find a good liquid glass implementation i can use, especially with bouncy animations etc.

but yeah. (worst part is i might even just go change the entire app icon in a week so that kinda wastes all this time 😭😭😭)

I have started using the shared components around the website, and its actually looking pretty nice!

most importantly, these components can be changed once and work everywhere

and i removed the drawers i was using everywhere, and i also made said drawers wider

while i was rehauling the drawers i also kinda broke their animations and i don’t know how to fix it 😭

the whole website looks really basic now, since its obviously using now the shard unstyled components,

and i was thinking about the theme and decided maybe it should be unstyled, and only the user’s own events and content etc can have colours.

I think I have finished making all of the shared components

I put everything inside accordions to organise the test components

Overlays get the same translucency and outline every other component gets

I think im happy with how the lists look, finally

the option selectors are really really hot!!!

The first page I have remade is the About view, which shows this badge if you are on localhost lol

i also had to move the contributors up to the server instead of hardcoding them so that both website and app can see it

And a really nice little animated gradient thingy for the about view!!

I have pretty much finished the components, I’m going to now go and add the other shared components and improve them too. then im gonna go through the css files and clear anything that is unused or overcomplicated, and then i can start remaking the website!

So the previous UI was really ugly, to be honest, so i decided I am oing to scrap half of the design and completely unstyle the entire app while making everything as standardised as possible, by trying to only use reused components as much as possible. So I spent all today stripping out components I didn’t need, then take the surviving components and adjusting them to my use case and making then look as nice as I can.

• alert dialogs
• drawers
• buttons
• lists
• section cards
• switches

I have also decided to stop using tailwind because its quite simply messy and much more confusing than just moduled css, so ye

I’m still working on making the UI look much better, and I’m still figuring out some website stuff like how i should wire up the sidebar tabs as well as having like a nice homepage to advertise everything the app does, which will be a really fun sub-project.

Turns out making nice looking lists in react is much harder than it looks, as shown below 😭
one problem is that each symbol has a different aspect ratio so i dont even know how to fit them nicely

And unlike swiftui, its raelly raelly hard to stay consistent in your css and to keep using the ui tokens instead of making custom css everywhere.

it looks like the website is gonna be harder than the app to make after all 😔

this classes card though, for example, i think its pretty much almost done. i might need a few more borders to make it look glassy and stuff but it looks exactly like the ios version, which is the end goal!

And I added the animations to the classes card, again exactly like the iphone app.

i also got a vscode extension that shows you all of your unused css classes, i highly recommend getting one and purging your codebase!

So I’ve made the first version of the website, it’s really insanely buggy and broken, but the ui is there. so have the html good but no i need to really tweak the css to make it look nice, apple-style.

i also need to figure out how to make loading states look nice, since unlike the the swiftui app, i can’t cache anything to not show loading state. in the plus side i dont have to deal with offline state, though.

the sidebar and the toolbar are finished, and look really nice.

the sidebar has an effect (from ipados) that basically reflects the content in a subtle blurred way, to make it feel like glass while not actually rendering anything expensive.

The toolbar is just glass buttons + a black fade effect + progressives blur, also tuned to look like ipados.

the icon in the sidebar is pretty ugly honestly so i need to replace that with the non-bordered icon.

The other problem i am dealing with is that we are planning a complete redesign of the entire swiftui app, and obviously that has to propagate to the website, so any work i do now is kinda gonna be half wasted, depending on what the redesign actually looks like.

And now it scales up and down and stuff!!!

I still can’t believe this is just html and css and js 😭

Theres so many parameters to tweak to make it feel right, its so finicky

And depending on the size of the glass, you have to change the numbers, its kinda confusing honestly

Its nice and squishy now!

It uses gsap for this as well
gsap is a great framework ngl

Hehehehe I’ve got a working version of liquid glass

It uses gsap, which is nice

the second image is an earlier version 😭

The website is alive!

I got a screenshot of an iOS26 sidebar, and i am copying it, as you can see. looks nice i think