Anzu Dev Hub

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. T...

Alright, today I am halfway done going through the basics, and now the course has reached practical assignment bit. Time to write some code independently! Task 1: password validator: The below (Colt's solution) would have been sufficient: function isValidPassword ( password , username ) { if ( password . length < 8 ) { return false ; } if ( password . indexOf ( ' ' ) !== - 1 ) { return false ; } if ( password . indexOf ( username ) !== - 1 ) { return false ; } return true ; } But I wanted to take it a bit further with the messaging. After all, in real life projects, the user wants to know WHY her input was not accepted , right? Trickiest part was to figure out how to inform the user if multiple conditions about their passwords were incorrect. I began with making a standard loop with if+else if and then realised the code looks no further as the first condition is met. Ugh. So, this is what I came up with in the e...

Aaaand off I go with the Javascript course! I sure am missing my dual screen set up back home, so I improvised with my tablet which I now use to play the Udemy video. Feels nice to make some basic scripts and loops. With reinstalling Windows some of my VS set-up went missing, so today I rediscovered Live Server plugin which makes coding a dream. Every time you save a HTML/CSS/JS file it automatically refreshes your html to see the effects. I split my screen, allowing me to see the new script logs immediately. Since I went through JS in the original Bootcamp, I pretty much skim through the basics. I don't want to skip them entirely since it does not feel intuitive anymore to write basic JS and also because Colt uses really cool examples of illustrating the methods. First time I've used indexOf method to evaluate if a string includes a forbidden character for example (visible on the screenshot above). "How absolutely marvellous" , I say, while sipping coffee. ...

Going forward with the CSS course. Animations are not just "aesthetic bling", they also have practical uses, such as CSS loaders. We tend to take a "loading wheel" for granted, but more often than not it is actually custom tailored and adds value to the user experience. With a thematic animated loader, the user is more likely to sit back and wait while the site loads rather than being confused and unsure if something is happening (Did I click? Is it working? Did it freeze? Better click again! etc) It was demonstrated with this animated crystal here: See the Pen Crystal Loader | Pure CSS by Mike Mangialardi ( @mikemang ) on CodePen . After the video there was "homework" to create your own thematic 100% css loader. Naturally, I looked into cats. Here is my result, using 2 scaling animations. It kind of looks like it's nodding, right? See the Pen Kitty Loader | Pure CSS by Anzelika ( @anzuj ) on CodePen . Another cool thing thi...

Trying to wrap my mind around "half completed things" and decided to go ahead with the tiny CSS image course I purchased a while back. A bit of fun coding is sometimes needed to get back into the groove! It gave the basics quite quickly, so I managed to do my own penguin after following the koala tutorial: See the Pen Penguin by Anzelika ( @anzuj ) on CodePen . What was really interesting though: Pug preprocessor. Essentially it means being able to write code much faster, so that instead of this HTML: <div class= "box" > <div class= "head" > <div class= "eyes" > </div> </div> </div> we can have this: .box .head .eyes Quite neat, right. It does mean however that you have to be very precise, since nesting depends on two spaces or a tab. For smaller projects such as these CSS images I guess it...

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 ...

Been procrastinating too long, so let's do this! Plan with this blog is to keep it as an accountability tool, a diary and also a showcase of the exercises/skillsets I've practiced with. Today I've purchased a domain anzudev.com on godaddy , so any content here will be eventually moved there as an independent site. There's still a bit of a learning curve, so starting in Blogger is fine for now :) Main problems: Finding the most cost effective hosting provider (it's a low traffic site for my own purpose really, so I won't be needing any premium deals) Seeing if Heroku can solve that for me. It does seem to be mainly a developing interface, so I need to ask around and read some FAQs first before understanding how to make Godaddy and Heroku talk.  For now, I'll try to ease myself back in the game with something more visual and fun: a small CSS animation course:  How to Make Pure CSS Images to Progress With Design-Focused Frontend It's qu...