Czocha website project

-
Summing up several days here. Absolutely beautiful when inspiration strikes! Decided to finish the website/app idea I had for my upcoming larp. It was a bit of a pain to find out your timetable from plethora of options below:

For example when my character is a Sophomore Curse Breaker (CB), I had to fingertrace the table cells that would include Sophomores and CB both. So, the idea is to have an easier way to have your personalised timetable at your fingertips. Here it is!

Boy, making that was a creative and logical adventure. For mobile responsiveness decided to go with Bootstrap 4 and a simple interface, even though I found a beautiful picture of the castle as a backdrop. Things I learned putting the site together:
  • How to center align items
  • Practicing in line icons/pictures for added eyecandy
  • How to utilise Bootstrap grid to resize/adjust items in different viewport widths
  • Testing different navbar designs, settling on pills
  • Purchasing a domain and hosting it via Github. This included adjusting domain settings to connect with Github and lots of troubleshooting after switching to https. It appeared that using repository links for media/links is via http query, not https, therefore the site broke as if an unsafe request was made. Took me a long while and asking help in dev communities to figure out! For example for the wallpaper pattern I had CSS reference https://anzuj.github.io/czocha/pattern.png, while instead I should have used the website direct link https://czochahelper.site/pattern.png
  • How to make two toggle button groups where both could be chosen
  • Script logic to display timetable according to choices and make it run once one option of both toggle group options is chosen
I started with a classical set-up where the "core html" of each page is the same, you change the content under the nav bar and each nav section opens up a new HTML file. I however got a bit annoyed about having to reload the background pattern and body each time. I researched a bit and found pill tab navbars.
Problem it solved:
* Content could be displayed one at a time, without having to reload background elements
Problem it created:
* No URL generation allowing the user to share a link to a specific submenu

Deeplinking tab menus has been brought up on Stack Overflow plenty times, but the scripts felt awfully obscure for my level. I was stubborn enough to managed adjusting this tutorial to my site. Funny though, the URL was generated per tab (for example while browsing songs, the URL shows https://czochahelper.site/#songs, but if you copy that URL and open it on another web tab in the browser, it still brings you to the mainpage. At least this was the behaviour with Live Preview plugin. I am not sure why it is not working, so it was definitely a bit disheartening.

An hour of googling later, a working piece of code came from a tiny Github forum comment here! Now the URLs are interpreted the right way, so that https://czochahelper.site/#songs would actually go directly to the #songs tab. One tiny irk though: for a millisecond, you can see the mainpage still loading. To polish the functionality to the max I could see if I can somehow hide that step from the user UI, but for now I am very happy!

Spent some time with mediaqueries increasing/decreasing fonts and buttons in mobile widths, I can't wait to show this off to my larper friends!

Comments

Post a Comment

Popular posts from this blog

Defeating the fear of the terminal with React!

-
Image
Today is the day I did it! I opened the ever-feared terminal in my VS code. The final push was looking at React/Angular videos and seeing that following the project all required terminal commands. Since package management is elementary knowledge in this field, I decided I could no longer avoid getting comfortable with it. Aaand of course nothing went smoothly from the beginning. As soon as I tried to create a new file with touch index.html, this happened: Luckily my awesome Facebook coding community quickly came to rescue and pointed out that Window's native terminal "does not speak that lingo". So I had to switch to Git Bash terminal instead, which knows how to touch things. He. He. He. I dove into a React video next, but as if doomed, another problem showed within the first minutes. I was able to install react by: npx create-react-app, but when doing npm start, another error popped up *sigh* A bit discouraging to say the least, just wanting to learn a new ...
Read more

Github and Godaddy domain

-
Image
Today is the day I finally decided to learn the inevitable - Github! A brand new world to be honest. It was intimidating to dive into Godaddy domain settings and Github terminology: "commit", "repository", "pull request" etc. For a newbie, it goes to the dark lands of backend. But combining some resources I actually managed my Godaddy domain anzudev.com  to be hosted by Github on the background, via this repository:  https://github.com/anzuj/anzuj.github.io . So, for the first time in my life, my own HTML+CSS is live with a custom domain. For this day at least, I am the queen. (I'm rejoicing in small things, okay?) Here are the 2 resources that helped me get there: This Youtube video explaining how to set up Github pages This article explaining how to tweak Godaddy settings (in the above video there are namecheap.com settings) I did not use the Git terminal for this, but Windows Powershell. For anyone following (I also commented this ...
Read more

Job offer and Vue

-
Image
Really exciting news - I got an offer of a position to work with an awesome startup! After getting a few rejections due to my lack of professional workplace experience and some frameworks, I was feeling a bit hopeless in regards to what learning curve I still have ahead to be employable, but then I got an unexpected callback by 3 lovely gentlemen who deemed me a good match for my illustration skills, willingness to learn and potentially my startup culture background helped too. We agreed on a 80% mini "internship" for 2 months during which I'll try to wrack up my Vue skills and help make the webapp interactive and visually appealing. It's scary. It's new! But I'll give my very damn best at my first job opportunity in the frontend field! Words can not accurately describe how grateful I am to them for taking this leap of faith in me :) My tasks revolve around using Vue and Vuetify.js with their webapp. They've been in my bucketlist for ages, so what be...
Read more