Jessica Agorye's Blog

Life and Career

CSS: Features you should know.

CSS is very crucial to web development, it's what gives any website its good looks. The markup language is responsible for the fact that websites have a good-looking layout, and that every element stays where it should. There are so many features of CSS that are released timely. CSS is capable of a wide range of functionality that javascript was initially needed for. This article assumes you're familiar with CSS and would like to be informed about its features.

What are these features?

CSS custom properties: These are entities defined by CSS authors which contain specific values to be used over again throughout a document. They are set using custom property notation (e.g. —main-color: green;) and are accessed or retrieved using the var() function (e.g., color: var(—main-color);).

When working with a larger document, complex websites have large amounts of CSS, and the values are repeated often. For example, you may want to use the same color for a font in a couple of different places. To make things easier, in order not to cause any form of confusion we use CSS custom properties.

Example: To declare a custom property, you must use a custom property name that begins with a double hyphen (—), and a property value that can be any valid CSS value. This is written inside a ruleset; Note: The best practice is to define custom properties on the :root pseudo-class. The root allows us to set properties at the root level of our project so that it is available globally. root:{ —primary-color: blue; —secondary-color:orange; —main-bg-color: green; —font-stack:“robot”, Helvetica; }

For instance, in our markup, we have the body tag and we would like to give it a color and font family. Normally we would write it like so;

body{ color:red; font-family: “robot”, helvetica; }

but using custom property, we would write it like so; body{ color: var(—primary-color); font-family: var(—font-stack); }

Note: you can reassign the value because it follows the rule of cascading style; body{ —primary-color: red; // by doing this the primary color becomes red. color: var(—primary-color); font-family: var(—font-stack); }

You can set a fallback value by writing a defensive style. If the primary color wasn't defined, for instance, we can always right a fallback style which is separated by a comma(,). body{ color: var(—primary-color, green); // green is the fallback style. }

CSS @Supports Feature Detection Some CSS features may not be supported by all the browsers because of how often they come up. We can use the @Support for testing CSS feature availability inside of a browser within CSS. If the browser supports custom properties, the CSS will be executed if not, it will not be executed. Example: We can test for support of custom CSS properties or CSS variables by; @support(—foo:blue){ body{ color:var(—varName); } }

We do feature detection using @support to see if browsers support custom properties.

We can also test for regular CSS properties

@support(test-align-last: justify){ p { text-align-last: justify; }

}

The CSS property is not supported in every browser, if the browser supports it, it will use it. it will only be applied to browsers that support the property.

If the browser doesn't support it we use;

@support not(text-align-last:justify){ p { text-align:justify; } }

This is a fallback to say if it is not supported by the browser, use the regular text-align: justify; @support will take a look at your browser and test its CSS features. You can apply rules and fallbacks to things that are not supported.

Content-Visibility Content visibility is a CSS feature that improves page rendering performance. It is similar to lazy loading, it's not for images or videos only, but any HTML element. In other words, You can use it to keep any part of your site from loading until it becomes visible. To use content visibility you must consider which content you want to load, and which content you want to delay or put off to load later. The property also has an auto option that lets the browser decide if it can skip the rendering of an element. There are three keyword values, these are visible, hidden, and auto which is written like so; content-visibility: auto; //elements outside of the visible area will be skipped and then rendered once they appear on screen.

content-visibility: hidden; //element is not rendered.

content-visibility: visible; //element loads as usual.

When elements are set to content-visibility: hidden; they become zero in size, contain-intrinsic-size lets you apply a height and width to hidden elements so that the browser can take them into consideration from the beginning instead of at the point when the element is rendered. This way, your layout will not change suddenly when scrolling. section { content-visibility: auto; contain-intrinsic-size: 0 500px; } Note: This feature is supported by a few browsers, for more information you can check out https://developer.mozilla.org/enUS/docs/Web/CSS/content-visibility

:is and :where Pseudo Classes

The :where() CSS pseudo-class function takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list, :is() takes on the specificity of the most specific selector in its arguments. :is() and :where() are both pseudo-class functions used to shorten and stop repetition in creating your selectors. They are a more organized way of writing group-based selectors.

Example of how to use :where and :is : Instead of this; .btn span > a:hover, .header span > a:hover, #footer span > a:hover { color:red; } Do this; :where(.btn, .header, #footer) span > a:hover { color:red; }

:is(.btn, .header, #footer) span > a:hover { color:red; }

They both look identical, but their difference is, they have different specificities. :where() is simple and always has a specificity of 0 while :is() has the specificity of the strongest and specific selector.

Note: Because of specificity hierarchy in CSS, Whichever selector has the highest number will have their styles applied to that element. An example is an id(#) and class(.) If you're familiar with CSS, you should already know that an id(#) is higher than a class(.) whatever you apply on a class, if you do the same using an id, the id(#) will override the class(.)

There are so many features and updates and believe me it's not ending anytime soon. These features are just to educate and inform you that there are so many things you can do in CSS and it's somewhat limitless. You can always check out the docs for more information.

JAVASCRIPT ARRAY

What is Array? An array is a collection of elements or items. Array's store data as elements and retrieve them when needed. Think of an array as a collection of variables of the same type or an ordered collection of data. You can store different elements like strings, numbers, booleans in an array. An example of an ordered collection of things you may not know is an array; songs in your music playlist, the comment section of a social media page. We'll go over some examples that'll enlighten beginners on arrays in JavaScript.

How do we create an array in JavaScript? To create an array in JavaScript, we use square brackets[]. All elements in the array are separated by a comma(,).

Example: const ballsColor = [“blue”, “green”, “red”, “pink”];

The position an element takes in an array is called INDEX. We use the index to refer to a specific element. In JavaScript, the array index starts with 0, and it increases by one with each element. In the above array, blue is at the index of 0, green is 1, red is 2 e.t.c

How do we check the length of an array?

You can check the length of an array using .length. Note, the array's length starts from 1 as opposed to the index of an array that starts from 0.

const ballsColor = [“blue”, “green”, “red”, “pink”]; ballsColor.length // the result is 4

We can use the index to access a value out : ballsColor[2] // the result is “red”

We can also use the index to change and update elements in the array: You can change from a string to boolean or number e.t.c

const ballsColor = [“blue”, “green”, “red”, “pink”]; ballsColor[0] = true The above array becomes: [true, “green”, “red”, “pink”]

We can use the index to modify elements in array: const ballsColor = [“blue”, “green”, “red”, “pink”]; In this array, we have four colors, we can add more colors to this array. ballsColor[4] = “purple” The array then becomes: const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; A better way to add elements in the array without having to figure out the the last index before adding an element is to use array built-in methods.

ARRAY METHODS: Push/Pop, Shift/Unshift

Push and Pop: Allow us to add and remove elements from the end of an array. If we want to maintain the order of an array, we add or remove it from the end.

Push: const ballsColor = [“blue”, “green”, “red”, “pink”]; We have an array with 4 colors, if we want to add a new color to the array, we use .push ballsColor.push(“purple”) const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; // Purple has been added/updated to the array Also Note, that you can push more than one element at a time.

Pop: Pop allows us to remove an element or item from the end of an array. You const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; ballsColor.pop The result becomes [“blue”, “green”, “red”, “pink”] Pop does not require any argument, unlike push, where we have to pass a value in it.

Shift and Unshift: These pair operate at the beginning of an array, they add and remove elements from the beginning of an array.

Shift: Shift removes from the beginning of an array. const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; ballsColor.shift() const ballsColor = [“green”, “red”, “pink”, “purple”]; // “blue” has been removed from the begining of the array.

Unshift: Unshift adds elements to the beginning of an array. const ballsColor = [ “green”, “red”, “pink”, “purple”]; ballsColor.unshift(“blue”) const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; // “blue” has been added to the begining of the array.

Concat Array This method merges two or more arrays, it does not change the existing arrays but instead returns a new array.

Example: let male = [“James”, “Brain”]; let female = [“Sandra”, “Christine”]; male.concat(female); [“James”, “Brain”,“Sandra”, “Christine” ]; // This is the new array You can save it in a variable. let jointPersons = male.concat(female); The male and female array arent modified, they remain the same.

Slice and Splice

Slice: is a way of getting a portion or a copy of an array. const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; You can provide a start and stop point. newArray=ballsColor.slice(2) [ “red”, “pink”, “purple”]; // This will start from the index of 2 to the end of the array.

newArray=ballsColor.slice(1,3) [“green”, “red”]; // This will start from the index of 1 and stop at the index of 3.

Splice: Splice changes the content of an array. It removes or replaces existing elements or adds new elements in its place. Note: splice doesn't duplicate the content of the array, changes made are modified on the original array. The basic syntax for a splice is: splice(start) splice(start, deleteCount) splice(start, deleteCount, item1)

const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 console.log(months); // expected output: Array [“Jan”, “Feb”, “March”, “April”, “June”]

months.splice(4, 1, 'May'); // replaces 1 element at index 4 console.log(months); // expected output: Array [“Jan”, “Feb”, “March”, “April”, “May”]

These are just a few core things we can do in an array. For more information on other methods in a JavaScript array, you can check out the docs. There are lots of information with examples that'll be helpful to your learning process, visit the link below for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Making Decisions with Javascript II: Conditionals

In JavaScript, we use conditionals to perform actions based on different conditions. When we make decisions in code, to print out a result, we use conditionals.

The following are conditional statements in javaScript:

1.If: This statement only runs code if it's true. If you have some condition and it evaluates to true, the code will execute. If it evaluates to false, the code will not execute.

Example: let age=18;

if(age===18){ console.log (“You are allowed”); }

For instance, Let's assume you need to be a certain age to log on to a site, and the age required to register is “18”. What this syntax means is, ​if the age is strict “18”, the result should be “You are allowed”. This code will be executed because the condition evaluates to true. If the age is less or more than “18” the code will not be executed.

2.Else If: This statement only runs if the “if” statement is false. let score=5;

if (score===4) { console.log(“you did okay”); } else if (score===5) { console.log(“perfect score”); }

In this case, if the first condition is tried and it's false, try this next condition. You can have multiple else if conditions but it will come after if or other else if conditions.

Else: This is the last part of a condition and it is used if nothing else is true. In other words, if every possible option is false, use else. But, if other options are true else will not be executed.

Example: If a score is less than 10, create a “poor” result, if not, but score is less than 20, create a “Good ” result, otherwise an “excellent” result:

if (score < 10) { result= “poor”; } else if (score < 20) { result = “Good “; } else { result = “excellent”; }

These are just a few examples of conditional statements. It can be a great deal when working with more complex lines of code. This article covers the basics in order to acquaint you with how to use them, and which statement precedes the other.

Decision Making In JavaScript Using Comparison Operators.

Comparison operators in JavaScript are commonly used to compare or check the relationship between two variables.

Examples are; > Greater than , < Less than, >= Greater than or equals to, <= Less than or equals to , == Equality, != Not equal, === Strict equal, !== Strict not-equal.

All comparison operators return a boolean, they give us one of two values, true or false. Example: 1. alert(5 > 2); //true (correct) 2. alert(5<2); //false (wrong) 3. alert(5 != 2) // true(correct)

Let's take a look at the operator's one after the other with examples.

  1. Greater than operator: Greater than operator evaluates to true if the left operand is greater than the right operand. let a = 3; // greater than operator console.log(a > 1); // true

  2. Greater than or equals to: Greater than or equals to evaluates to true if the left operand is greater than or equal to the right operand. let a = 5; // greater than or equal operator console.log(a >= 5); //true

  3. Less than operator: Less than operator evaluates to true if the left operand is less than the right operand. let a = 3, b = 2;

    // less than operator console.log(a < 2); // false console.log(b < 3); // true

  4. Less than or equal to operator: Less than or equals to operator evaluates to true if the left operand is less than or equal to the right operand. const a = 4;

    // less than or equal operator console.log(a <= 4) // true console.log(a <= 3); // true

  5. Equal operator: Equality operator converts values to numbers, it evaluates to true if the operands are equal.

    1. alert('3' == 3) // true, string '3' becomes a number
    2. alert(true == 1) // true

    Note: Equality check cannot differentiate between 0 and false alert(0 == false) // true;

    1. Not equal operator: Evaluates to true if the operands are not equal. let a = 3, b = 'hi';

    // not equal operator console.log(a != 3); // true console.log(b != 'Hi'); // true

  6. Strict equality operator: Strict equality checks equality === without type conversion. It evaluates to true if the operands are equal and of the same type. In the example below, '3' and 3 are the same numbers, but the data type is different. Strict equality === checks for the data type while comparing. Example:

    1. alert('3' === 3) // false, string isn't converted to a number.
  7. Strict not-equal operator: Strict not-equal operator evaluates to true if the operands are strictly not equal. It's the opposite of strict equal ===. let a = 3, b = 'hello'; // strict not equal operator console.log(a !== 3); // false console.log(a !== '3'); // true console.log(b !== 'Hi'); // true

Decision-making in JavaScript using comparison operators is used to decide whether a statement or block of statements will be executed or not. These examples briefly explain how to use comparison operators in JavaScript.

JAVASCRIPT: THE DO'S JavaScript is a language for developers, and it is a must-learn. This Language allows you to implement complex features on web pages. It entails many features that you must practice and learn constantly. When learning Javascript, there are rules you must apply:

  1. JavaScript is case sensitive: Case sensitivity is a crucial factor in javascript that applies to keywords, variables, function names, and other identifiers written with a consistent capitalization of letters. Such as, if you have a variable named cat, and while printing the value of this variable, you write “Cat” instead of “cat” the result will be an error. Be aware of the fact that javascript is case-sensitive for your code to work correctly.

  2. Statements should end in a semicolon (;) Example: let a, b, c; // Statement 1 a = 4; //Statement 2 b = 5; // Statement 3 c = a + b; // Statement 4

  3. Variables: Variables give the name to a value, and we use variables in javascript so that we can always recall and reuse a value. You must define a variable before use.

Declaring a variable using let and const: We use the “let” and “const” keywords to declare a variable.

Let is a keyword used to declare a block-scoped variable. Example; let year= 1995; In other words, you're storing the number 1995 in the variable called year. Think of this as a container and, the name of the container is called
“year”. What you're storing in it is 1995. Anytime you need the number “1995” you can always recall the variable “year” also, you can always change the value of “year”.

Example: let year=1995; year =1996; // Value changed from 1995 to 1996. alert(year); When the value is changed, the old data is removed from the variable.

const – which is an abbreviated version of constant, works just like let keyword although you cannot change the value. Example: const numBalls=5; numBalls= 20; //error

const numBalls= 5; numBalls = numBalls + 1; //error

This is not allowed using the const keyword.

  1. Strings: Strings have to be enclosed in quotation marks, either single or double. E.g let name = “Jessica Jones”; // string in double quotation marks. let name ='Jessica Jones'; // string in single quotation marks.

  2. Operator Precedence If an expression has more than one operator, there is an order to how it will be executed. It is defined by the precedence, in other words, the default priority order of operators. For Instance, multiplication has higher precedence than addition. The expression (1+2)3 =7 not (1+2)3 =6. You can always check out the precedence table for more information.

  3. Increment (++) and Decrement (—) Operators The increment and decrement operator is used to increase or decrease the value by one(1). Example:

    let numCats = 9; numCats=-1; or numCats—; // decreases the number of cats by 1 numCats= 8;

    let numCats= 8; numCats=+1; or numCats++; // increases the number of cats by 1 numCats =9;

  4. To make or enter comments in the script, use “//” to start a single-line comment or combining {/* and */} to enclose a multi-line comment. Example:

One-line comment // alert (“hello”); // This comment occupies a line of it's own

Multi-line comment /* i am a comment */ . This comment starts with a forward slash and asterisk and ends with an asterisk and a forward slash

There are so many other rules we need to apply to the basic syntax of JavaScript. You can always do a little more research if you still have a lot of unanswered questions. Always remember that there are so many resources that will be of help.

Web-Development Career: Why Planning Is Important.

A lot of things have happened since I started learning to become a web developer. I have been excited, disappointed, distracted, frustrated, honestly, it has been a roller coaster of emotions but, I'm not giving up until I achieve my goal. In all of these happenings, I realized that I didn't have a plan for a while, I was stuck in a learning loop; in other words, I was trying to do more studying than practicing and I ended up going over the same thing multiple times with very little improvement. I'll get to a point, forget all that I have learned to go back to relearn, believe me, it was a mess! I was struggling to get past certain stages in my course which in turn caused me to become so frustrated I wanted to hit my head on a wall ( don't try to imagine that). During this process, I spoke to a friend who told me to focus more on practicing, and that advice was very much needed. At the same time, I realized that I was working without a proper plan and we all know the saying that goes if you fail to plan you plan to fail.

What did I do? I drew up a plan. How? walk with me a second I've got jokes. On a serious note, I opened a google sheet to track my progress, opened several sheets, and wrote down what exactly I want to focus on learning, in other words, the learning path I wanted to take. As a newbie, you can be overwhelmed by the amounts of things you need to learn, the language, the Tools | Framework, etc. So having a well-structured learning path, and the tools you'll be learning from the beginning will be very helpful. You'll learn other things along the way, but from the beginning do not be carried away by too many things unless you'll end up being confused and overwhelmingly frustrated. Are there other words to describe overwhelmingly frustrated? kindly throw that in too. To sum it all up, having a timeline is good, it'll give you the push you didn't think you needed. Also, take a few minutes to look at your plans every day so you don't slack. It's something I'm also practicing at the moment there's just something it does to your mind “Very Important!”. At the end of the day having a plan will help you believe me. Remember we're in this together, don't lose focus!

Web-Development Career: Why Planning is a Necessity.

A lot of things have happened since I started learning to become a web developer, I have been excited, disappointed, distracted, frustrated, honestly, it has been a roller coaster of emotions but one thing is that I'm not giving up until I achieve my goal. In all of these happenings, I realized that I didn't have a plan for a while also, I was stuck in a learning loop; in other words, I was trying to do more studying than practicing and I ended up going over the same thing over and over again cause it felt like I'll get to a point forget all that I have learned to go back to relearn forget what I also learned recently believe me it was a mess! I was struggling to get past certain stages in my course which in turn caused me to become so frustrated I wanted to hit my head on a wall ( don't try to imagine that). Anyways, I spoke to a friend of mine who told me to focus more on practicing and that advice was very much needed. At the same time, I realized that I was working without a proper plan and we all know the saying that goes if you fail to plan you plan to fail.

What did I do? I drew up a plan. How? walk with me a second I've got jokes. On a serious note, I opened a google sheet to track my progress, opened several sheets, and wrote down what exactly I want to focus on learning in other words, the learning path I wanted to take. As a newbie, you can be overwhelmed by the amounts of things you need to learn, the language, the tools | Framework, etc. So knowing from the very beginning the path the tools you'll be learning can be very helpful to have a structure you'll learn other things along the way but from the beginning do not be carried away by too many things you'll end up being confused and overwhelmingly frustrated. Are there other words? you know what I mean. Also, having a timeline is good it'll give you sort of a drive and make sure you look at your plans every day so you don't slack. It's something I'm also practicing at the moment there's just something it does to your mind “Very Important!”. At the end of the day having a plan will help you believe me. Remember we're in this together, don't lose focus!

Distractions Distractions Distractions! boy, do they come up often!

I like to be as honest as possible when sharing my experiences regarding life and learning. I believe nobody is perfect, I also know that there are a lot of people that share similar experiences and can also relate to this particular issue that I'm about to talk about.

The issue of distraction popped up in my thoughts recently and has been a major concern. I realized certain things occur unexpectedly that distract us from our learning schedule. I'll give examples since I'm self -learning at the moment, I have a schedule which is wake up, do a little exercise (Which is walking, that's all the exercise I do ), have a bath, write, read, etc.

Sometimes, it's never the same. I may get a call from my sister to help deliver products or realize we're missing certain things in the house that I need to pick up or get a call from a friend who wants to stop by for a chat whew! the list goes on. I realized that I was spending a lot of time doing things that would eat up my study time.

To help solve this problem, I decided to seek the advice of certain wise ones, in other words, look up what others thought about the situation and how they managed it to help me understand how to deal with distractions to study effectively.

In conclusion, I realized that there will always be distractions big or little. Keeping distractions to a minimum is one way to go, If you have put your phone on “do not disturb” do so if necessary. Find the right environment to study, and most importantly, create a routine to stay organized.

We're in this together *winks*

I have been asked questions like how can I become a web developer, where do I begin? Truly I myself I'm a beginner, but I can still give you a few tips to the best of my knowledge with a little research as regards how to become a web-developer.

Web development is an interesting course. When looking at a website, I'm sure what comes to mind is how in the heavens name did all this come together. Believe me, it's not as complicated as it looks. Although I won't sugarcoat it, it takes a lot of commitment and effort. Especially since they're so many levels to it. It requires that you keep on learning. So if you're game, come with me let me give you a walk-through.

Firstly what is web-development? to begin a career in web development, you need to understand what it's about:

Web-Development is the process of building websites and applications on the internet. It's all about coding and programming that powers the functionality of a website. Web development skills are definitely in high demand, and it's broken down into two parts which are; Front-End and Back-End

Don't get confused, I'll be explaining what front-end and back-end mean, and also what it means to combine both.

Let us begin with Front-End:

A Front-End developer specializes in the layout, design, and interactivity of a website using HTML (hypertext markup language), CSS(Cascading Style sheet), and Javascript. It's all about The visual aspect of the web, in other words, what you can see is brought together by a Front-End developer.

Back-End :

where the data is stored is referred to as Back-End, there would be no front-end without a back-end. The back-end of the website consists of the server that hosts the website, and also an application for running it, and a database to contain the data.

Full-Stack:

Combining both the front end and back end as a developer is call full-stack: a full-stack developer takes care of both the back end and the front end of a website.

To become a web developer, you must decide what your interest is: do you want to become a front-end developer, a back-end developer, or both. Once you decide, you can check out reliable websites for learning. A few examples are www.freecodecamp.org, coursera.org, www.udemy.com. These are sites that have been helpful since I started coding, I know they'll be of great help to you too. So please check it out and do not hesitate, and also remember coding is fun!

I would also like to add that there are so many contents on the internet that can be helpful, don't forget to explore *winks*

I wrote about my journey to becoming a web-developer some weeks ago, I talked about solutions that I think can be helpful especially as a beginner in the Tech industry. I also joined the 100 days of code challenge and truly and I have been following through although I feel like I could be doing more but let me just say that I'm still trying to create the right balance. I won't beat myself too much about it because I believe it's a step by step process and it'll fall in place as long as I keep thinking of ways to be better and act on my thoughts.

Sometime this week the funniest thing happened to me it wasn't so funny then but when I think about it now I laugh, I was studying and I got to the part where I had to take a quick exercise, just to be clear the course I'm taking online gives exercise/ assessment after different topics so you can test your knowledge. I got to a particular exercise, I attempted it, when I submitted I got it wrong, I read through the solution and the question once again, realized an error, I fixed it, with a conviction that the answer was correct I submitted once again, the same result “your solution is incorrect” at that moment I cannot completely explain it but I broke down I mean actual tears streaming down from my face “imagine taking candy from a child that kind of tears” I started talking to myself saying how can you not know this, this is easy, you've not even gone far and you can't get this simple exercise I was cursing myself out, saying to myself maybe I shouldn't be doing this, maybe I do not have the capacity to retain things, I thought about so many negative things, I was destabilized that word best describes my feeling at that moment.

After a while, I realized what I was doing and I was like yo Jess you can't be saying these things to yourself, I try to develop the habit of speaking good things into my life as a step to personal growth “which can be difficult sometimes” so I started speaking to my self with words of affirmation saying things like “you're not dumb” “you can do this” “you can't quit” etc basically just speaking sweet words to myself, I attempted the exercise again same result but this time I didn't stop with the encouraging words. I stopped for a moment, took a deep breathe read the question went through the solution I was certain there couldn't be any other answer. I submitted and the result was correct ladies and gentlemen, it turned out to be a connection problem after all. During the time the network was bad (and I didn't realize) it kept showing me the result of the first solution that had an error. The point of what I'm saying is sometimes the littlest problems/things make us want to give up, but do not let it discourage you. You'll make mistakes, you'll feel like you're not doing good enough but don't let that stop you don't speak negative words to yourself speak positive words. Imbibe the habit of complimenting/encouraging yourself trust me it really helps.

If you read through the first paragraph I mentioned “Thinking of ways to be better and Acting on my thoughts”. I know we've heard of the saying “Action speaks louder than words ” in this case, actions speak louder than words or thoughts because it is not enough to think of something or say it, doing it is what matters the most. If you have a thought that you know can help you be productive, write it down, don't let it slip away without bringing it to reality. Honestly, it took me about two weeks to write, I would always think of a topic write a few words, pause, delete, think of something new, post-pone and the circle continues. It took a little more effort to encourage myself to write this if not I would've kept it on hold for heaven knows how long.

Speak to yourself, encourage yourself, push your-self it's not easy but it's a step in the right direction. It takes a lot of commitment, hard work, and dedication but like I always say, it'll be worth it at the end of the day.