Using Anki for active recall and remembering code will turn you into a coding machine!

Jordan — Sun, 22 May 2022 03:31:18 +0000

Hey there Jordan here. When learning something new forgetting is a part of the process. Of course it would be nice to remember everything( well maybe not everything)! What if I told you there was a way to at least slow down how much you are forgetting. Well look no farther ANKI is here to save the day!

Anki (which means to commit to memory in Japanese) is a Space Repetition Software(SRS). Its a flash card program that will help you remember!! How does is it work? Well let me show you! Below is an example of one of my own flash cards! See if you can guess the correct answer!

How did it? Did you get it right? Don't worry about it you will see it again! Anki will reminds when to study right before you forget that is the beauty of an SRS! Before you go off and shove everything in I would advise again it! Not everything belongs in Anki! of course you are free to do what you want but. here a few tips on when using anki that might help!

Anki tips

Keep it simple!.
Add pictures when you can
Do your reviews everyday

Keep it simple

The simpler the better! As long as the card makes sense to you I think that will be enough!

Here is an example of one of my early cards! It is pretty straight forward. Question on the front and answer on the back. As time has gone on I have learned to mix it up and add some flavor to my anki cards( like the one you saw above where I have to enter the correct code in-order to get the card correct). You dont have to go that over board! Anki and be a hard pill to swallow and but the community is great BTW if you want the styling have I have here it is!

.card {
  font-family: fira code;
  font-size: 20px;
  text-align: center;
  color: #ebdbb2 !important;
  background-color: #282828 !important;
}
#spacer, #answer {
background-image: linear-gradient(to right, #282828, #d65d0e, #282828);
}

#spacer, #answer {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 1px;
}

#spacer::after, #answer::after {
  content: '';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: #689d6a;
  background-color: #282828;
}

.typeGood {
  background-color: #427b58;
}
.typeBad {
  background-color: #9d0006;
}
.typeMissed {
  background-color: #928374;
}

a {
  color: #d65d0e !important;
}
strong {
  color: #d79921;
}

I original got the styles as well as how to add typing to my anki cards here Is from Byan Jenks YT channel.

Add pictures when you can

The daily grind of Anki can be hard but sometimes pictures make things easier!

Do your reviews everyday

Anki can and WILL snow ball if you allow the reviews pile up! To remedy this I would try and complete your review everyday! DO IT

The morning works best for me! Afterwards I feel like I can take on the world! BUT I will admit somedays I just don't have time. On those days I try and review JUST ONE card! AND that is okay! Life happens to all of us! Sometimes just one is all I can muster. But progress is progress!! Thank you for reading!

image.png

🔑Random Password Generator

Jordan — Sat, 12 Mar 2022 20:24:13 +0000

I created a Random Password Generator app using HTML, CSS, and JavaScript. I am taking the Front End Developer Career path on Scrimba. I had a lot of fun coding this project. I also used John from Coding Addict starter template files. I have watched John's videos before and I like his started files. It allows me to get started creating projects faster! I would recommend watching his video about why he uses starter files. In goes over in detail about the starter files as well as how to change the files to your liking! After building this app I have a better understanding of starter files and the power behind them!

Here is the final Product

The whole idea for this project is to click the button and 4 random passwords will be created and displayed on the UI.

First, I started with the HTML. The HTML was make up of a few headings, a paragraph, and 4 empty input 4 fields. In the original project there was supposed to be an Icon when the fields were blank but at that time I could not figure that part out! 😅 So I added something a little different instead!

Next, I worked on the CSS. A LOT of the CSS I used is this project was again from the default styling guide above. So what I did was change a the CSS variables.

body {
  background: var(--backgroundColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  max-width: 40em;
}

At the top of the file I have all of my CSS variables defined so I can use them later in code. This was my first time using CSS variables and know I final understand how useful they can be! One thing I want to mention before moving on to the JavaScript, if you are new to CSS I would not recommend using NOT starter files in the beginning. The will take away a lot of the muscle memory that is needed when you are first starting out. Once you have built a few projects on your own then I would look more into project starter files for your personal or freelance projects! Again, John goes into way more detail over on his channel about why and how. After watching his video I understand how to edit the files and make them to my liking. His video is little long but I promise it will be worth it! If you are trying to learn how to build projects fast! Now lets jump into some JavaScript!

let letter = "abcdefghijklmnopqrstuvqaxyz"
letter += letter.toUpperCase()
letter += "@#$&*(){}?|!^-+=/"
const lettersArray = Object.assign([], letter)
 let pw1 = document.getElementById("pw1")
 pw1.value = "Cake"

 let pw2 = document.getElementById("pw2")
 pw2.value = "is"

 let pw3 = document.getElementById("pw3")
 pw3.value = "a"

 let pw4 = document.getElementById("pw4")
 pw4.value = "Lie"

I created a string with all the possible value I wanted in the password. I used a built in JavaScript method to get all of the upper case characters and then add them to the same string. Then added some of the special characters. Then I found the method called Assign I can't really explain it but I the link will take you to the mdn docs! (😂) Finally we have he generate Password method!


 function generatePassword(){
     var message1 = ""
     var message2 = ""
     var message3 = ""
     var message4 = ""
     for(let i = 0; i < 13; i++){
        message1 += lettersArray[Math.floor(Math.random() * letter.length)]
        message2 += lettersArray[Math.floor(Math.random() * letter.length)]
        message3 += lettersArray[Math.floor(Math.random() * letter.length)]
        message4 += lettersArray[Math.floor(Math.random() * letter.length)]
     }
     pw1.value = message1
     pw2.value = message2
     pw3.value = message3
     pw4.value = message4
 }

This method is called every time the button is clicked. Here I hared coded it to 13 characters. Maybe in a future update I will allow the use to pick how long they want there password to be!
That pretty much wraps up this project! My favorite things I learned were!

How to get up and running with a starter CSS files
Object.Assign
To change the value of a input box you use .Value! d
How to write Mark Down

That is all I have today Thank you for reading! I will leave a link to my twitter where I post more about the project Im working on as well as my YouTube Channel where I have Dev Vlogs. See ya in the next one!