Recently, I have been struggling with staying motivated during my learning process of becoming a Web Developer I have joined the #100daysOfCode to help me stay accountable and have a log to go back to see my evolution of progress. And, wow just from these seven days I have seen so much progress. It is my goal to share and possibly teach you some of these things I have learned during the journey. Perhaps, I will write a blog post covering some of the topics more extensively. If you want to follow my journey follow my Twitter. Hopefully, soon I will start streaming some of my learning or work on my projects! Enough small talk let's begin!
Day 0: This was the day I joined the challenge and posted it on my Twitter. I did not do that much, I just practiced some problems on Edabit.
Day 1: The topic of this day during my Bootcamp was objects. From what I recall about objects are that they are a way of storing multiple properties in a variable in which you can call upon them to access those properties and do stuff with them. For example:
const harpCope = {
about: "a blog about the journey of a learning developer",
content: "mainly frontend development",
postsSinceToday: 2,
noobie: true,
excited: true
};
This is the premise of how you create an object. When you want to call a certain property you can just call it by dot notation (or bracket notation). such as:
console.log(harpCode.excited);
This should log true since that is what the property is set to. There are tons of methods and ways to change those properties but I will have to write about that in a later post.
Day 2-3: ES6 was the fun of these days, ES6 are new features added to JavaScript to enhance it and also to make it more fluent. The major takeaways I got from this day were: arrow functions and ternary operators. Arrow functions turn simple multiline functions into a one-liners
function add(num1, num2){
return num1 + num2;
//arrow function
const add = (num1, num2) => num1 + num2;
I'm still getting used to them but they are growing on me. Ternary operators are ways to shorten if, and else statements.
if (codingIsFun == true){
return party}
return awww
//Ternary
codingIsFun == true ? return party : return aww
The way I see how Ternay functions work is that anything before the ? is the condition, after the ? is the true return, and after the: is the false return. Seems to me just another way of making code shorter and faster to write. This is just a scratch of all the features ES6 offers. I still don't know that many!
Day 4: Project day! I have been trying to slow down and work on some projects so I can balance learning and building, so I decided to work on a parallax website project and incorporate a media query for mobile phones.
You can visit the project on my GitHub pages:
It was a fairly easy project and think the result came out nice! I will have to make a post on how I made it.
Day 5: Mainly a vacation day, but I worked on a landing page during the car ride to my Airbnb.
Day 6: The secret language of Regular Expressions AKA Regex! If you to look like a true hacker, learn regex! Regex is a way to find sequences of characters in text in order to prevent, find, or alter data on a site. It seems to me that is mainly used for passwords or form validation but I am sure there are tons of ways to use it.
The basic premise of Regex from what I have learned is that you can call upon an array of functions with a certain expression can find data such as:
let harpCode = /harpcode/gi
const passwordValdiation = /(?=\w{6}(?=\d*\d)/
That is just a few notes of the three pages I wrote about of different expressions you can use for Regex, but basically, I wrote an expression that looks for all of the patterns that look for harpcode ignoring cases and a password validator that requires 6 characters with at least two consecutive digits in them. Now, these won't do anything unless I attach them to functions that can use regex in them, but it is a small example of what they look like.
Day 7: During my boot camp we made a palindrome checker with Javascript. The premise of the function was to remove any non-alphanumeric characters through Regex, turn them to lower case, reverse the string, and check if it is equal to the original string. Some of the functions I wrote looked like this.
function alphaNumStr(str){
return str.replace(/[\W_]/, '')
}
function lowerStr(str){
return str.toLowerCase();
}
This regex looks for all characters that are not alphanumeric as well as the underscore (underscore is part of \w or \W so you have to include that as well) and replaces them with an empty string. The lowerCase function just returns the string to lower case. Lastly, I just recalled the functions inside the Palindrome function that was provided to me from freeCodeCamp.
function palindrome(str) {
//clean str
const cleanString = alphaNumStr(str);
// lowercase Str
const lowerCase = lowerStr(cleanString);
...
I left out some pieces so I don't spoil the rest for anyone who is working on this project, but that is the concept of what you have to do. If there are any ways of refactoring it let me know!
Thank you so much for reading my blog! I hope I didn't butcher too much of these concepts. Comment below if I missed anything or if any of my info is misleading.
If you want to follow my journey follow my Twitter