Posts

Showing posts from November, 2019

JS function challenges

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

Brushing dust from Javascript basics

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

Practical applications of CSS animations

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

Continuing CSS course

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

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