Forem: Nonsoo

Let's not over-engineer things

Nonsoo — Fri, 04 Nov 2022 22:55:50 +0000

Not too long ago, I created a game called clueless words -- a daily word game where users use a list of synonyms to a word to find the secret word for the day. I'm fully biased here but I would say it's quite fun to play every day.

One of the things that I had to think about when creating the game was how new words were going to be generated every day. More specifically, was there a way to pick a word from a list and then have this done daily? To be fair after taking a closer look into how to go about solving the problem, numerous solutions started to pop up. I was looking for the most optimal solution though; After all, just because there is a solution to a problem doesn't mean that it is the most optimal solution. Let's think about the problem -- we want a way to generate a random word every day when a user visits the website. How do we do this? We're going to be going over some solutions and then I'll walk you through the implementation of my solution.

Option 1

People have dedicated their time to making APIs that generate random words when that API receives a request. This is one part of the problems solved and we can use this in our game, however, it opens up another problem. How do we make this API request recurring? We need new words every day so we would need a way to tell the server to generate a new word on a new day. One option would be to set up what is known as a CRON job.

CRON is a job scheduler that is set up on a Unix-like machine where users set up and maintain software environments that run periodically at fixed times, dates, or intervals. Therefore, CRON is most suitable for scheduling repetitive tasks.

The CRON job would be responsible for calling a serverless function that makes an API request to the random word generator API and this would occur daily. This solves our problem of generating random words which we can then use in the game but it comes at an extra cost. We now have to determine how we are going to set up a CRON job in the cloud and more importantly, we have to now setup alongside our serverless function.

Another approach is that we gather a list of words and we store it in a database. We can then build an API that increments through our database of words daily. We can also implement our previous approach of working with a CRON job to help us get a new word from our database. This is also a good approach but we now have to worry about configuring a database, building that API and then serving everything.

While these solutions are viable options for solving our problem, these approaches add a lot of complexity that may not be needed. They may be more optimal solutions to our problem.

Option 2

After scouring the internet, listening to a few podcasts, and quite a few days spent trying to come up with a solution, I finally landed on the idea of "Why don't we just index an array of words every day?". We would essentially just store our list of words in JSON form and when a user makes a request to the website the array of words would be indexed to get the word for that day. This is a simpler solution but it also poses another problem -- how do we index an array every day?

What I realized was that the way the index was generated was important and crucial to what word was going to be shown on any given day. In that regard, it would mean that the index generated for the word list would have to become date specific. Essentially the index could represent the time in days that have elapsed from when the game was released -- we call the offset date. Naturally, as time progresses, this offset date would also increase in value day after day. We can then use this offset date to index our array of words and naturally have a new word every day as time progresses. There is no need for any databases, API requests, or CRON jobs as everything in terms of generating new words every day for the game is handled by this function. All we have to do is supply the array, the current date, and the date the game was released to get a new item generated every day.

Although this approach presents its downfalls as the wordlist has to be local, I think it's cool and simplistic in terms of its setup. We're going to be walking through an implementation of the functions in JavaScript, but they can be done in any programming language.

We first have to create our helper function called calculate offset date:

const getOffSetDate = (currentDate, baseLineDate) => {
  const offset = currentDate - baseLineDate;
  const toDaysConverter = 24 * 60 * 60 * 1000;
  const convertToDaysNumber = Math.abs(Math.floor(offSet / toDaysConverter));

  return convertToDaysNumber;
};

This function takes in a currentDate and baseLineDate as its arguments and calculates an offset number by subtracting the baseLineDate from the currentDate. Since the JavaScript data object returns values in terms of milliseconds, our current offset number is in milliseconds. For our next function, we need to get a representation of the time in days, therefore, we have to convert our offset number to days.
Things to note are that we're using Math.floor to ensure that we do not have a decimal value but more importantly to ensure that we are appropriately accounting for one full day. We are then taking the absolute value to ensure that we do not have any negative values.

We now have to create a function that is going to return a single word from a word list that is passed in as an argument.

const getTodaysWord = (WordLst) => {
  const todaysDate = new Date();
  const baseLineDate = new Date("October 02, 2022 00:00:00 UTC");

  const indexArray = getOffSetDate(todaysDate, baseLineDate);

  const todaysWord = WordLst[indexArray];

  return todaysWord;
};

export default getTodaysWord;

Inside our new getTodayWord function, we have to initialize two variables that are going to represent todaysDate and the baseLineDate. We then call our getOffSetDate function, pass in the two variables and then store the return value in a new variable called indexArray. Remember the return value of getOffSetDate is a number that represents that time in days that have elapsed from the baseLineDate. We now use this value as an index for our WordLst to get a single word for the respective day.

Conclusion

YAY!! We've built a way to generate a new word daily without the need for any databases, API requests, or CRON jobs as everything in terms of generating new words every day for the game is handled by the functions above. Although there are still downfalls with this approach, I believe it provides a simple and elegant way of generating a new word/puzzle every day.

Hope you found this useful, don't forget to smash the like button and I'll catch you in the next one... Peace!

Selecting parent elements has become easier

Nonsoo — Fri, 28 Oct 2022 17:06:27 +0000

CSS has a lot of ways to select elements in HTML and so many options can make it difficult to choose which method is most sufficient. This becomes very apparent when we have multiple elements on the pages that share styles but one of them, in particular, has a different style than the rest.

The traditional way to solve this problem is to place another CSS class on the component that is going to get this Special style. It may look something like this

<div class="card">...Some content goes here</div>
<div class="card special-card">
  ...Some content goes here
  <p class="card__subTitle">Some more content for the special class</p>
</div>
<div class="card">...Some content goes here</div>

The middle div element has two CSS classes: 1) one denoting that it will get all the styles in the card class and 2) denoting that it will get all the styles from the special-card class.

There hasn't really been a way to select an element with CSS if it has certain descendants -- at least not until recently.

The HAS Selector

The :has selector also comically known as the parent selector is a pseudo-class that was introduced in the CSS spec. :has allows for the selection of an element if the arguments passed into :has match at least one element when anchored against the parent element. Essentially it allows for the selection of an element based on the presence or absence of descendant elements.

Revisiting our example above, let's say our special card had a paragraph that implemend its own padding in the in-line direction. Since we want all the cards to have the same amount of padding we need some way of addressing this problem. We can reach for the solution above, or we can implement the :has selector. We can select the card if it has a paragraph as its child and then set the in-line padding on the card to 0. It looks something like this:

.card:has(.card__subTitle) {
  padding-inline: 0;
}

The above code block translates to if an element with the class of .card has a descendant with the class of .card__subTitle then set the in-line padding on the parent element (in this case the element with the class of .card) to 0.

<div class="card">...Some content goes here</div>
<div class="card special-card">
  ...Some content goes here
  <p class="Title">Some more content for the special class</p>
</div>
<div class="card">...Some content goes here</div>

Multiple selectors inside `:has`

The cool thing is that we aren't just limited to putting one item inside the :has pseudo-class. We can chain on selectors and get really specific as to when we want this parent element to be selected. Chaining on selectors looks something like this:

.card:has(.card__subTitle, .Title) {
  padding-inline: 0;
}

The above code block translates to if an element with the class of .card has a descendant with the class of .card__subTitle or .Title then set the in-line padding on the parent element (in this case the element with the class of .card) to 0.

You might have noticed the keyword OR above. This is important and a key differentiator between :has and other selectors. Usually with CSS if you are chaining selectors, if one of the selectors in your chain does not match, then the entire rule is skipped. This is not the case with the :has pseudo-class, and it is something that differentiates it from other selectors. As long as there is one matching selector inside the :has pseudo-class, then the parent element will be selected.

You might be wondering how we may go about saying AND with this selector. More specifically how do we go about saying the following: Select the element with the .card class if its descendants have elements with the .first and .secondclasses. Using the scenario above .card:has(.first .second) matches at least one. What happens if we require both to be present?

We can attach another :has pseudo-class. It would look something like this:

.card:has(.first):has(.second) {
  padding-inline: 0;
}

The above code block translates to if an element with the class of .card has a descendant with the class of .first and .second then set the in-line padding on the parent element (in this case the element with the class of .card) to 0.

The other cool thing about :has is that we can chain complex selectors when the parent element is to be selected. We can say something like this:

.card:has(> .first .title) {
  /* Some css rule */
}

Only select an element with a .card class if it has direct decedents with a class of .first which has a descendent with a class of .title.

More than just a parent Selector

The :has pseudo-class is more than just a parent selector because we can use it to select other elements that are in relation to the parent element. The following describes how we are using the :has pseudo-class to select a paragraph element.

.card:has(.subTitle) > p {
  /*Some Css Rule */
}

The above code block translates to: select any paragraph element that is a direct decedent of .card if the .card has a descendant element with the .subTitle class. Putting this into practice, below we can see that the manager's name is in bold while the staff's name is not. This is being done with a rule similar to the one we described above.

Specificity

Calculating specificity with the :has pseudo-class gets a bit complicated and so we are going to walk through an explanation and then some examples.

Let's say we have the following scenario:

.card:has(.first p) {
  /* Some css rule */
}

What is the specificity here? We first look at the selector outside the :has pseudo-class and then focus on the selectors inside the :has pseudo-class. Here we have 1 class selector outside :has and then 1 class selector & 1 element selector inside :has. Therefore, we say that the specificity of the entire selector is 2 class selectors & 1 element Selector.

The interesting thing is that calculating specificity changes when there are multiple selectors inside the :has pseudo-class that are separated by a comma. In this case :has will only use the specificity of the most specific selector. This is demonstrated below:

.card:has(.first, p) {
  /* Some css rule */
}

What is the specificity here? Remember, we first look at the selector outside the :has pseudo-class and then focus on the selectors inside the :has pseudo-class. Here we have 1 class selector outside :has & 1 class selector & 1 element selector inside :has. Since the class selector and the ** element selector** are separated by a comma, we look at the selector with the highest specificity. In this case, it would be the class selector. Therefore, we say that the overall specificity is 2 class selectors.

In the case where we have multiple :has pseudo-classes, we calculate the specificity for the individual :has and then combine them all to get an overall specificity. The following is an example of this:

.card:has(.first):has(.second p) {
  padding-inline: 0;
}

Here we have 1 class selector outside :has, 1 class selector inside the first :has, and 1 class selector & 1 element selector inside the second :has. These specificities are all combined to give us an overall specificity of 3 classes and 1 element.

Browser support

According to Can I use as of the time of writing this article the :has pseudo-class is at 76% support in terms of browsers. Moreover, it is supported in the latest version of Chromium & Safari, and it is under an experimental flag in firefox (thus I expect it to be fully supported in firefox fairly soon).

Conclusion

This :has selector is an incredible selector and it gives us another way to author the CSS for our applications. I can't wait for it to be fully supported across all major browsers!

Alight I'll catch you in the next one -> peace out!

From a list to one number

Nonsoo — Wed, 15 Jun 2022 17:38:34 +0000

The JavaScript Reduce Method

Introduction

The JavaScript reduce method is one of the higher order functions introduced in es6 which allows us to "reduce" the values inside of an array into a single value. Today, we will be taking a look at how to implement this in our code.

Getting Started

The .reduce() method is a higher order function that can be called on any array -- see below:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce();

Like all the other array methods .reduce() loops through your entire array. The difference here is that .reduce() is a function has two parameters, one being a function while the other is the initial value of what we call and accumulator -- this is the thing that will increment at every iteration of the loop.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce(() => {}, 0);

The function inside reduce, takes in two parameters itself, one being an accumulator while the other being the value of the current position in the array. See Below:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce((acc, curr) => {}, 0);

To update the accumulator at each iteration we must add a return it inside the function. We can assign this function to a variable which can then be used for anything.

Using Reduce: Example

Lets say we have an array from 1 - 10 and we need to add all the elements in the array to determine the total, we can use the reduce method to accomplish this -- We can call the reduce method on our array, setup the accumulator and current parameters and also pass in an initial value of 0.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reduce((acc, curr) => {
  return acc + cur;
}, 0);

Using reduce: Another Example

Going over out class object that we created (link to other post), lets say we wamted to calculate the average for the class. We can either write a while loop or for loop to accomplish this or we can use the reduce method.

Here is an array of objects where each object represents a student in the class.

const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

Using the reduce method:

const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

const TotalMarks = students.reduce((acc, curr) => acc + cur, 0);
const averageMark = TotalMakrs / students.length;
console.log(averageMark);

Now that this is complete, we have a way to reduce an array into a single value without writing our own loop!

Question for you

Now knowing this, here's a question for you -- how else can we implement the reduce method?

Check out the youtube channel to see how we are implementing the feature in the app we are building! theYoutubeChannel

The guide to why you should manage your state within react

Nonsoo — Wed, 15 Jun 2022 17:32:52 +0000

State Management React

What is it? Why should I care about it? and how do I properly manage state within my app?

Okay we'll get to all of that but lefts first talk about state.

What is state?

State is just data that changes over time.

In the case of front ends, we can make our application or UI react to these changes so that we can use something like conditional redenring to show or hide a certain feature.

For example, think of a modal; A modal has two options or two states. A modal can either be opened or closed. Knowing the state of that modal allos us to use conditional rendering to either show or hide the modal using css.

An even more complicated example is knowing when a user has logged into your application. There are a lot of different authethication workflows but ultimately it boils down to getting this user object from your backend api, finding a way to store the state so that you can persist it through the application for other components to have knowledge of whether a user is logged in. Knowing when a user is logged into our application is crucial because it allows us to only show features of our application to registerd and logged in users. It further allows us to know if a user has pay to see a specific kind of information.

Why should state be properly managed?

Okay okay, knowing what the definition of state and what it allows us to do is cool but why should I as a developer care how its managed? It's not like the end user may even notice a difference. Properly managing state within your application leads to:

A better developer experience
Makes it easier to access information when it is needed by a specific component

If you've been working with react for a while, you'll recall that one of the first concepts you learn is props. So you might be wondering, can't we just pass information through props to the components that need it? I mean yes you can absolutely do that and it is a very viable option but it leads to something known as prop drilling.

Prop drilling is when information is passed from a parent component to 4,5,6th grand-child component. Some of the components may not even need the information but serve as passage ways to get information to the grand-child component

Prop drilling can lead to a very poor developer experience, espicially when working on large projects so you might be wondering if there are any other ways to manage state within an application?

How do i properly manage state?

There are various state management libaries that allow you to properly manage state within your application. These libaries include:

Context API
Redux & Redux Toolkit
Recoil
A lot of other libaries exist as well

There are a lot of other libaries that exist as well but the cool thing is that these libaries allow you to decouple your data from the components. So instead of having the component responsible for storing the data/state, the data can be stored in a seperate store that is not attached to a specific component.

The above is the case with Redux -- the context API requries that you store state in a spefic component and then any child of that component will have access to the store.

Any component that needs assess to the data can go to the store, retrieve the information, and then display it in the UI. Any time the information changes, it will be updated in the store, which is then reflected in the UI.

The question then becomes when do I store state locally (state defined within the component) and when do i store state globally (state that is often stored within a seperate store)?

To answer this question, I personally answer another question: Do multiple components need access to this data?

If Yes, then we should store the data globally -> Set up a store that multiple components have access too
If No, then we can store the data locally -> Store the data within state inside the component

Going back to knowing when a user is logged in, this is a piece of state that multiple components will need assess too so it would make more sense to store this data globally to limit prop drilling. Where as with the modal example, it would make more sense to store that state within the component unless there is some other feature that requires knowledge of the state of the modal.

Conclusion

We've just looked at state management as a whole and why it is important to mange state within your application.

Hope you found this useful, don't forget to smash the like button and I'll catch you in the next one... Peace

Become a programmer in 2022

Nonsoo — Wed, 15 Jun 2022 15:41:25 +0000

Most often we use the new year as a time to learn new skills and break bad habits and with the rapid expansion of technology into our daily lives, it would be a great idea to add programming as a skill to learn for 2022. Most often, the people near me, be it friends/co-workers are interested in learning how to program but have no clue where to start. So, today, we'll be talking about why it would be good to learn programming in 2022 and how to even get started. We'll touch on what resources are available to get started, be it wanting to learn on your own or wanting to go to a boot camp.

Why even learn to Program?

Programming is a skill that has the potential to unlock even more important life skills such as problem-solving and persistence. Problem-solving, I find this skill very fascinating because it's a type of skill that is not directly taught but yet somehow acquired. I think it's a skill that's learned through examples and many hours of practice. Seeing how others work through a problem especially programming problems can be very helpful and it may give you new insights on how you can incorporate their ideas into a problem that you are trying to solve.

Programming also teaches you persistence -- you may find that when working on your next idea, solutions to some problems may be very apparat while solutions to other problems may take a bit more time to surface. The mere fact that you know you can use programming to bring your idea to life may be all that's needed to stay determined to pass the roadblock that is in front of you.

In the penultimate reason of why you would want to learn to program, the skill provides you with an avenue for a career change as year after year the demand for programming jobs grows rapidly. Companies are adapting to new technological changes and seeking programmers to aid in their ushering into a new era.

Finally, Programming combines creativity with technical skills. You gain the ability to create whatever you want! Be it an app, that lets you book your trip to your dream destination or a website that allows you to order take out -- you are only limited by what you can imagine!

What programming languages do I start with?

This is the question that plagues many people that are getting started with programming -- there are just so many languages to choose from! From personal experience, I find that most individuals gripe with programming and I guess a fair misconception is that you cannot directly see the impact of what you are coding. I say this is a fair misconception as I can understand that it may be lost in translation how solving coding problems/challenges leads you to developing an application or a website. So most often I say that people should start with languages where you can visually see what you're coding as I think that would be a better way and would keep you more motivated. Visually see in the sense that typing out "I want this button to be red" should allow you to see a button turn red.

In the programming world, this type of programming is known as the front-end, the creation and development of user interfaces. How is the application going to be structured? How big are the buttons going to be? How does typography play into the useability of the application I'm building? Everything that encompasses the style and function of an application falls under the umbrella that is the front-end.

Web Development

Web development is concerned with developing either applications for the web or website. The structure for the front-end of any website is made up of three main languages: HTML, CSS, and JavaScript.

HyperText Markup Language, better known as HTML is the backbone of any website as it's the language that is responsible for the content and what is displayed on the website.

Below is a block of HTML code that when run will show Hello There in your browser:

<html>
  <body>
    <p class="firstPara">Hello There</p>
    <p class="secP">This is the second Paragraph</p>
  </body>
</html>

Cascading Style Sheet, better known as CSS is responsible for all the styling of a website as it's used to answer questions like: How big do I make this button? What colour should it be? What about spacing, layout, typography? The very cool thing is that modern CSS can be used to answer even more complex questions -- would some users of my application prefer a dark theme or even reduced motion?

Below is a block of CSS code that selects the second paragraph and makes the text larger:

.secP {
  font-size: 50px;
}

JavaScript is responsible for the functionality of a website as it is concerned with a question like What happens when I click this button? Let's take an add to cart button on your favourite e-commerce website for example -- to the end-user pressing that button may seem like it is just navigating you to the shopping cart so that you can complete your purchase, however, they're more going on behind the scenes. The button is also responsible for making a request to an external set of computers, a server, to add the appropriate item to the cart for this specific user. Only once that is complete, will you be navigated to the shopping cart for you to check out.

Below is an example of JavaScript code that will print Hello there when run:

console.log("Hello There");

These may seem very daunting to get started with but the above three languages are very beginner-friendly and have a ton of online resources to help you get started.

Mobile Development

The other type of development that has a front-end aspect to it is mobile development as this is concerned with making applications for mobile devices, be it IOS or Android devices.

The languages used here is dependent on the platform you are trying to develop for:

IOS development moved to the Swift programming language a while back and is very beginner-friendly with a lot of resources available.

Android development moved to the Kotlin programming language a while back and has also been found to be very beginner-friendly with a lot of resources available.

For Learning concepts

Python will always be a staple language to learn as it is very easy to learn with its easy-to-read syntax which allows you to focus on learning the concepts. Below is a block of python code that when run will say Hello There.

print("Hello There")

What resources are available?

There are numerous resources available at your disposal when it comes to learning to code and it doesn't matter which language you start with, the resources are available. All the resources that I'm listing below are ABSOLUTELY FREE!

I always recommend Free Code Camp as the best place to start as they have instructional videos that break down fundamental concepts and coding challenges to help you practice your understanding of those concepts.

For Web development, The Odin Project and Frontend Mentor are very good resources. The Odin Project will teach you web development step by step while you also build out a website with their code along with instruction while Frontend Mentor gives you frontend challenges for you to solve. Most of the challenges include providing you with a layout of a website, most often as a JPG, for you to recreate using HTML, CSS, and sometimes JavaScript.

But by far, YouTube is one of the best resources available to learn programming with numerous YouTube channels providing excellent instruction and tips!

Dev Ed, Ania Kubow, Fireship, and Programming with Mosh are a few of my favourite channels to watch on YouTube.

And of course my channel, Linked Here.

Conclusion

Now that this is complete, I hope I've encouraged you to give programming a try! I can't wait to see what you create!

Check out the Youtube Channel for tips/tricks and tutorials on programming!

The Notation that web devs must know

Nonsoo — Wed, 15 Jun 2022 15:37:53 +0000

JSON - JavaScript Object Notation

Introduction

JSON, JavaScript Object Notation, a light weight format for storing and retrieving data from across the internet and is most often used in retrieving data from a API. Today, we will take a look at how we can create, and read JSON data we want to send or retrieve from an API.

Getting Started

How do we write JSON?

JSON can either be represented as an array or an object. The following is an example of a JSON object:

{
    "f_Name":"john",
    "l_Name":"Doe",
    "age":24,
    "school":"UofT"
}

This above JSON object defines an object that has four properties:

First name
Last Name
Age
Name of the school

One can make the argument that JSON object are the same a JavaScript objects, however, that would be incorrect. While they do share similarities, there are also differences.

We can say that a JSON object is very similar JavaScript object. The exception is that the keys for a JSON object must be a string that is enclosed with quotation marks.

Creating a JSON file

We create a JSON file by adding the .json file extension to the end of our file name.

At the core anything we put inside of this JSON file, be it a string, number, boolean, etc. is valid JSON, however, we wouldn't want to create an entire file to just store one piece of data. We would more likely want to store several data entries in our JSON file and We can do this in one of two ways:

Create an array that stores multiple entries
Create an object

Shape of the JSON

Occasionally you will hear terms like "I need to get the shape of the JSON". This refers to how the actual JSON file is structured/organized. We making an API call, you will almost always see a data object where the value for that key is dependent on how the API was designed.

Most often you will see JSON data in the form of an object that has one key value pair -- the key being Data and the value being an array of objects. Looks like this:

{
    "data":[
        {
            Name:"bob"
            Age:34,
        },
        {
            Name:"Smith"
            Age:32,
        },
        {
            Name:"Jane"
            Age:14,
        },
        {
            Name:"Julia"
            Age:24,
        },
    ]
}

The value of data is represented by an array of objects where each object is essentially a person that has a name and age property. Storing data like this allows us to store multiple instances of a single object.

You can think of having on your website, if you wanted to display all the user names for all the users on your website, most likely the API would return a structure like the one above, where each object in the array would be a specific user. This object may have properties like userName, email, Full Name, etc. This userObject returned from the API may look like this:

{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"bob@email.com",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"Jane@email.com",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"Stephanie@email.com",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"Julia@email.com",
            userName:"Julia__Apple"
        },
    ]
}

JSON Methods

Retrieving Data

A common use for JSON is to send/retrieve data from a web API and sometimes the JSON data is sent in the form of a string. Using the user example above, you may see this following after calling an API:

`
{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"bob@email.com",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"Jane@email.com",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"Stephanie@email.com",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"Julia@email.com",
            userName:"Julia__Apple"
        },
    ]
}`

Having the data represented as a string is still useable by JavaScript but to get any usefull information we would need to use string manipulation to retrieve the information. That takes way to long and we don't want to do that! Since we know that this is an object, we can call a parse method on the data to convert it into a JavaScript object.

It look something like this:


const res = `{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"bob@email.com",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"Jane@email.com",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"Stephanie@email.com",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"Julia@email.com",
            userName:"Julia__Apple"
        },
    ]
}`;

const resJSObj = JSON.parse(res);

Here we are storing the javascript object inside of the variable resJSObj which we can then use to do want ever we want.

Sending data to API

When we want to send data to an API, we must first convert it into a string. This can be done by calling the .stringify() method and then passing in our object. Look something like this:

const sendObj = JSON.stringify(resJSObj);

Now that it is in a string we can send it to an API.

Turning your JSON data into a string can also be used for storage purposes. You can save data retrieved from an API in local/session storage. Not advisable but say you wanted to store your users information in local/session storage to keep track of authentication state or user preferences -- you would get the data back from the API, convert it into a string and then store it in local/session storage.

Question for you

Now that this is complete we have a way to use the JSON format to send/retrieve information from an API.
Now knowing this, here's a question for you -- how else can you implement the JSON?

How can we create a real-time search filter?

Nonsoo — Wed, 15 Jun 2022 15:31:09 +0000

The JavaScript Filter Method

Introduction

The JavaScript filter method is one of the higher order functions that allows use to filter content based
on a condition that has been set. Today, we will take a look at how to implement it in our code as well as look
at some "Real-World examples" of how it could be used as means to search through an array of content.

Getting Started

The .filter() method is a higher order function that can be called on any array or object -- see below:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter();

It takes in a function as its argument and also has a return value which is an array that contains the elements that passes the condition implemented. The filter method essentially loops through every item in the array that it is called on and checks the current iteration on a parameter that is set. Like state previously, if the condition is met, then the added to the array that is returned by the function. The example below shows us using the filter method to remove the number 4 from the array called "arr".

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter((number) => number != 4);

The return value here will be [1,2,3,5,6,7,8,9,10]

Example 2

For another example,more interesting -- Given a array of objects, where each object represents a student that has taken a test, return the names of the students that scored at least an 80% on the test. We can use the array filter method to do this. The object contains two keys -- the students name and their grade {Name:"", Grade:0}.

const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

Since we are given a array of objects, we can use the filter method to loop through the entire array and check if the current student's grade is greater or equal to 80%. It looks something like this:

const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

students.filter((student) => {
  if (student.Grade >= 80) {
    return student.Name;
  }
});

A short hand for this would be and we can store the return value in a variable so that we can use it later. The following look something like this:

const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

const stuAbove80 = students.filter((student) => student.Grade >= 80);

The Fun Stuff -- Add a search field to your web application

A common feature in most applications that have large amounts of scrollable content is a search field -- users enjoy the experience of being able to quickly search for the content they want to find since it saves them time in the end. This feature can be accomplished in many ways but today we will be using the javascript filter method add a search feature to the students array we have been working with, this time we will be searching for a specific student by name. The advantage of using the filter method is that we can filter out the content as the user types -- this is best described when you are searching for something to watch on netflix.

You can do this with vanilla JavaScript, however, today we will be using a library such as react to create our UI.

Let's pretend that we made an api request and this is the data you got back:

const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

We are storing it in a variable called students so we can use it later on. Here is just some boiler code to get all the boring stuff out of the way. This just has an input field that is connected to a state variable and a component that is showing all the student name with their associated grades.

import react from "react";

const App = () => {
  import { useState } from "react";
  const students = [
    {
      Name: "John",
      Grade: 90,
    },
    {
      Name: "Sarah",
      Grade: 95,
    },
    {
      Name: "Jane",
      Grade: 80,
    },
    {
      Name: "Julie",
      Grade: 79,
    },
  ];

  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div>
      <input
        type="text"
        onChange={(e) => setSearchTerm(e.target.value)}
        defaultValue={searchTerm}
      />

      {students.map((student) => (
        <p>
          students Name:{student.Name} and their grade: {student.Grade}
        </p>
      ))}
    </div>
  );
  export default App;
};

To add the search feature, we can filter through the students array and return a list of students objects with names that match the search term.

students.filter((student)=>{
          if (searchTerm==""){
              return student
          }
          elif (student.Name.toLower().includes(searchTerm.toLower())){
              return student
          }
          return null;

      })

When the search bar is empty, we want to display every object in the data holder variable so we can just return every member without filtering.
Now it may seem counter-intuitive but to computers "A" is not the same as "a". To that same extent "John" is not the same a "john". So that we don't run into this issue we are going to convert search term and the Name to lower case and then check if the search term includes the Name.
If it does then the current student object is going to get added to the list.

We can then map through this array that is returned from filter to display the students name and grade using the component we created. The final code should look something like below:

import react from "react";

const App = () => {
  import { useState } from "react";
  const students = [
    {
      Name: "John",
      Grade: 90,
    },
    {
      Name: "Sarah",
      Grade: 95,
    },
    {
      Name: "Jane",
      Grade: 80,
    },
    {
      Name: "Julie",
      Grade: 79,
    },
  ];

  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div>
      <input
        type="text"
        onChange={(e) => setSearchTerm(e.target.value)}
        defaultValue={searchTerm}
      />

      {students.filter((student)=>{
          if (searchTerm==""){
              return student
          }
          elif (student.Name.toLower().includes(searchTerm.toLower())){
              return student
          }
          return null;

      }).map((student) => (
        <p>
          students Name:{student.Name} and their grade: {student.Grade}
        </p>
      ))}
    </div>
  );
  export default App;
};

Now that this is complete, we have a way to search for a student by looking up Name using a javascript function that we created!

Question for you

Now knowing this, here's a question for you -- how else can we implement the filter method?

Dark Mode: Not as simple as inverting the colours

Nonsoo — Wed, 15 Jun 2022 15:09:10 +0000

Introduction

Dark mode, a fan favourite amongst developers and user alike. Today we will be taking a look at how to implement dark mode in a web application. As always, there are a number of ways to accomplish this with some including the use of JavaScript but today, we are strictly sticking with css.

Getting Started

Before diving in, let's talk about what it means to implement dark mode in your application. I find that the natural/default interpretation of dark mode is just the inversion of colour -- making a light background dark while making the dark text light. However, I've come to realize that it is not that simple; I amy be wrong but that's just my interpretation.

Usually the way we create depth in a "light" setting is by using shadows to make our piece of content, say a card component, stand out from the background. In a "Dark" setting using this trick most often look very weird and adds distractions to the UI. In the same way using vibrant and very contrasty colours may work very well in a "light setting" but don't work as well in a dark setting. To create depth in dark mode, we may want to think about using lighter less saturated colours between our component and the background to create a degree of separation. So picking your colours for both modes becomes very important when thinking about adding a dark mode to your application.

Implementing Dark mode

At the end of the day dark mode is a preference, some of your users may not prefer a dark theme and so you would want a way to give users a choice. Luckily, css provides a way to for developers to know what type of theme a user prefers. This is done with using the:

@media (prefers-color-scheme);

This is a css media features that is widely supported across browsers and it is used to detect whether a user prefers a light or dark theme. More specifically, this is done by looking at the device colour scheme preferences that is set by the user.

@media (prefers-color-scheme) takes in one of three values: Initial, light, or dark. By default initial is selected if these parameters are not specified. Setting it to light indicates that the user prefers a light theme while setting it to dark indicates that the user prefers a dark theme. Example written below:

@media (prefers-color-scheme: initial) {
} ;

@media (prefers-color-scheme: light) {
} ;

@media (prefers-color-scheme: dark) {
} ;

Inside the curly braces we can then specify the class, id or element to target but doing this may be time consuming and there may be better more efficient ways to do this. Instead, it may become very useful to use css custom properties. The value of doing this is that we can set custom colour schemes and then change the colours that are assigned to the variables based on if the user wants a light or dark theme.

On the root element set your colours in css variables and then for dark mode simply just switch the colours. Example below:

:root {
  --background-Clr: #f9f8fa;
  --background-Clr-sec: #ffffff;
  --prmy-text-color: #171717;
  --sec-text-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-Clr: #282828;
    --background-Clr-sec: #141414;
    --prmy-text-color: #ffffff;
    --sec-text-color: #171717;
  }
}

You may also need to target additional classes or ids to fine tune the colour scheme.

Now that this is complete we have a way to set a light and dark colour scheme based on the users system preferences and without implementing any javascript

Check out the youtube channel to see how we are implementing the feature in the app we are building! letsCreate: Dark mode using CSS

The Guide to routing within React

Nonsoo — Wed, 15 Jun 2022 15:04:59 +0000

React Router V6

You may be familiar with websites having multiple pages which are interconnected and allows users to navigate to different areas of your website. Naturally, when we want to add a new page to our website, we can just create a new HTML file and link it to other pages using the anchor tag ( <a></a>). Additionally, other pages can then link page to this newly created page with the same anchor tag.

This doesn't quite work the same when we are using something like react as something like react results in a single page application (SPA) -- an application that only has one HTML file. So the question then becomes how do we simulate a multiple-page experience within a SPA?

We'll be exploring the answer to this question in today's blog and seeing how we can accomplish something like this using a routing library such as react-router.

How do we get react-router working?

To install react-router, we want to install the package react-router-dom using npm or yarn. Here we are going to be using npm:

npm install react-router-dom

Getting Setup: The Basics

Now that this is installed we need to configure our application so that it's ready to properly handle routing. In our index.js file we want to import BrowserRouter from react-router-dom. We want to import this as router and wrap it with this component. This is being done so that all the components that are a child of App will have the ability to trigger a route change. Your index.js file should look something like this:


import {BrowserRouter as Router} from "react-router-dom";
import ReactDom from "react-dom";
import App "./App";

ReactDom.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>
);

We next need to go to our App.js file or anywhere within our application we want to add route changes. Within this component, we specify that we are going to add specific routes by using Routes component that we import from react-router-dom. We additionally need to import the route component from react-router-dom. This looks something like this:

import {Routes, Route} from "react-router-dom"

The Routes component is responsible for holding the specific route while the Route component is responsible for declaring and rendering the specified component linked to the route. In other words, Routes is like a phone book that holds a bunch of names and numbers while the route is an individual name that is connected to a specific phone number.

We can better visualize this by creating a simple navigation bar.

import {Routes, Route} from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"


const App = () => {
    return (

        <div className="App">
            <Navbar />

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/About" element={<About />} />
                <Route path="/Contact" element={<Contact />} />
            </Routes>
        </div>
    );
}

export default App

As we can see Route is a child of Routes(a wrapper element that holds an individual route). Additionally, a route element can only ever be inside of the Routes wrapper component.

The route element has a few attributes:

path -> Responsible for specifying the route
element -> responsible for rendering the corresponding element

Therefore, saying <Route path="/About" element={<About />}/> means that when we navigate to /About we should render the about component. The same goes for /Contact, we should render the Contact component.

Navigating

We don't want to be typing are specific routes into the URL every time we want to navigate to a different page -- it's time-consuming and your end-user may not know what pages exist on your website. So we need a way to add functional links to our navigation bar. Normally in regular HTML, we can use the anchor tag (<a></a>) to add links to our page. While this is still possible to do within react, it is not really recommended as this triggers a page refresh -- negates the benefits of a single page application.

Luckily, react-router-dom comes with Link and NavLink components that we can import into our component where we want to add links. We do this by:

import {Link, NavLink} from "react-router-dom"

Now it's just a matter of using it in our component. It works just the same as the anchor tag, however, instead of an href property, we have a to property. It looks something like this:

<Link to="/About" ><p>About Page</p></Link>

So now every time the About Page text is clicked by the user, they will be navigated to the about page.

NavLink works just the same as link but it has an additional active property that can let us know if the current link is active. It adds an active class to the element which we can use to style in CSS.

Dynamic Routes

We use dynamic routes when we want to create a page for a component that we currently do not have the information for -- We know the layout of the page but the information needed to populate the page is not currently available. This may be due to us needing to get the information from a backend API. For example, let's look at a car company; This company may have different versions of their popular car model A. We as the developer for the website may not know how many versions of Model A exist, so instead of manually creating a page for the different versions of Model A, we can do it dynamically.

We can get a list of the different versions of modal A and then create a specific page for those versions. This allows us to always have the most up-to-date version of the website regarding the version of Model A.

We create a dynamic route in react using /: followed by the name of the variable for the route. It looks something like this

<Route path="/Model_A/:Version" />

Now any route that is after Model_A can be created and be a valid route.

In addition, we can get the route name from the URL using the params element. In our new page, we import the params element from react-router-dom and then we can destructure that variable to get the name of the page that is created. It looks something like this:

import {useParams} from "react-router-dom"

const Example = () =>{
    const {Version} = useParams();
}

We can then use this variable to do whatever we want really; If we need to make an API call that is dependent on this variable or we just need to display it, we can do that.

Miscellaneous things

Just wrapping up here, we have a few miscellaneous concepts to cover here.

We can also create navigation using the navigate hook by importing useNavigate from react-router-dom. We set up a variable and set it equal to the useNavigate hook.

const navigate = useNavigate()

Now navigate is a function we can call and pass the routes as the argument which navigates us to a specific route.

navigate("/About")

The above will take us to the About page.

We can also create a back button using this method. Instead of passing in a route, we can pass in -1 which takes us back 1 page. Now you might be wondering what happens if we pass in -3? This will take us back 3 pages. This can happen because as we navigate through our app a history stack is being built and so the navigate function is just looking at the history stack to determine what page to go back to. The back button function looks something like this:

navigate(-1)

Conclusion

Now looking at this, there's a lot more that you can do with react-router that we haven't touched on here. The documentation for react-router describes all the features in detail and I've linked it down below. Some of you may have already been using an older version of react-router, V5. There are breaking changes between version 5 and version 6 and the documentation describes how to properly upgrade so that those changes are fixed.

Alright, here is a challenge for you -> build out an application that has a functional navigation menu with the ability to have a back button within the app.

hope you found this useful, don't forget to smash the like button catch you in the next one

✌️

Let's Create a UUID generator

Nonsoo — Wed, 15 Jun 2022 14:54:12 +0000

How can we create a UUID generator?

Introduction

Let's suppose you are given the tedious task of making a unique identifier for each student in a class of 500 and for security purposes you are told these IDs have to be alphanumeric. Your thinking to yourself, how did I end up having the task assigned to me? Relentlessly shrugging your shoulders, you remember that you're a programmer and that you could just code your way out of this problem! Today we'll be walking through how to make a UUID generator whereby when you run the program you get a text file on your desktop that is populated with the number of UUIDs you asked for.

Getting Started

You might be thinking, now I have to figure out how to make a random alphanumeric character generator that I can use in the rest of my program. You could go down that route, writing a function that is responsible for generating this random alphanumeric character of n length and all that jazz. However, programmers are also lazy and there's no need to re-write this function that is publicly available for you to use which generates these IDs. We are going to be doing this using python but this can be done in other languages as well like JavaScript, PHP, Java, etc.

Create a unique ID

There's a UUID module in python that we can import and it gives us access to versions 1,3,4, and 5 of the UUID generator. We can then specify the version of the UUID generator we want to use and store it in a variable.

import uuid

myUUID = uuid.uuid4()

This returns an instance of pythons UUID class so we need to convert it to a string to view the generated UUID. Below if a code block converts the class instance to a string and prints out the result.

import uuid

myUUID = uuid.uuid4()

print("The generated uuid is: " + str(myUUID))

Creating our program

We want a function whereby we can pass in a number and generate a list of unique IDs where the length of the list is equal to the number that was passed in.

Below is a block of code that defines the function.

import uuid

def UUIDgen(num):
    """
        A function that takes in a number and returns a list of UUIDs
        where the length of the list is equal to the function that
        is passed in.
    """
    pass

if __name__=="__main__":
    pass

We first need to create the list that is going to hold the UUIDs and then we can set up a loop that adds the newly generated UUID to the list. This loop would continue until it gets to the number that was passed in. Below is the block of code that shows this:

import uuid

def UUIDgen(num):
    """
        A function that takes in a number and returns a list of UUIDs
        where the length of the list is equal to the function that
        is passed in.
    """
    lstUUID = []
    count = 0

    while count < num:
        lstUUID.append(str(uuid.uuid4()))
        count = count + 1
    return lstUUID

if __name__=="__main__":
    pass

Don't forget that the uuid4 returns a class instance and thus we need to convert it to a string before appending it to the list

For the program, we can ask the user how many UUIDs they want to be generated and store their response in a variable. We can do this by writing lenLst = input("How many UUIDs do you want to be generated?: ")

We can then use our function to generate that list of UUID.

Remember that input() stores responses in a string so before we use it we need to convert the lenLst variable to an int

import uuid

def UUIDgen(num):
    """
        A function that takes in a number and returns a list of UUIDs
        where the length of the list is equal to the function that
        is passed in.
    """
    lstUUID = []
    count = 0

    while count < num:
        lstUUID.append(str(uuid.uuid4()))
        count = count + 1
    return lstUUID

if __name__=="__main__":
    lenLst = input("How many UUIDs do you want generated?: ")

    genUUIDLst = UUIDgen(int(lenLst))

genUUIDLst now holds a list of UUIDs where the list is of length n. We now have to write the items of this list to a text file and we're done.

We can open a new file in write mode by using the open() function and then loop throughout genUUIDLst and write each item to the file. We do this doing the following:

if __name__=="__main__":
    lenLst = input("How many UUIDs do you want generated?: ")

    genUUIDLst = UUIDgen(int(lenLst))

    newFile = open("/Desktop/UUID_File.txt","w")
    for item in genUUIDLst:
        newFile.write("{} \n".format(item))
    newFile.close()

After writing all the information to the file, we need to close the file and then we can print a state to know when this has finished executing.

The final code block should look something like this:

import uuid

def UUIDgen(num):
    """
        A function that takes in a number and returns a list of UUIDs
        where the length of the list is equal to the function that
        is passed in.
    """
    lstUUID = []
    count = 0

    while count < num:
        lstUUID.append(str(uuid.uuid4()))
        count = count + 1
    return lstUUID

if __name__=="__main__":
    lenLst = input("How many UUIDs do you want generated?: ")

    genUUIDLst = UUIDgen(int(lenLst))

    newFile = open("/Desktop/UUID_File.txt","w")
    for item in genUUIDLst:
        newFile.write("{} \n".format(item))
    newFile.close()
    print("Done!")

We are DONE!

Conclusion

Now that this is complete, we have a way to generate a list of UUIDs and save them to a file on our desktop! Question for you, What else can you do with this UUID generator?

Check out the Youtube Channel for tips/tricks and tutorials on programming!

Forem: Nonsoo

Let's not over-engineer things

Option 1

Option 2

Conclusion

Selecting parent elements has become easier

The HAS Selector

Multiple selectors inside :has

More than just a parent Selector

Specificity

Browser support

Conclusion

From a list to one number

Introduction

Getting Started

Using Reduce: Example

Using reduce: Another Example

Question for you

The guide to why you should manage your state within react

What is state?

Why should state be properly managed?

How do i properly manage state?

Conclusion

Become a programmer in 2022

Why even learn to Program?

What programming languages do I start with?

Web Development

Mobile Development

For Learning concepts

What resources are available?

Conclusion

The Notation that web devs must know

Introduction

Getting Started

How do we write JSON?

Creating a JSON file

Shape of the JSON

JSON Methods

Retrieving Data

Sending data to API

Question for you

How can we create a real-time search filter?

Introduction

Getting Started

Example 2

The Fun Stuff -- Add a search field to your web application

Question for you

Dark Mode: Not as simple as inverting the colours

Introduction

Getting Started

Implementing Dark mode

The Guide to routing within React

How do we get react-router working?

Getting Setup: The Basics

Navigating

Dynamic Routes

Miscellaneous things

Conclusion

Let's Create a UUID generator

Introduction

Getting Started

Create a unique ID

Creating our program

Conclusion

Multiple selectors inside `:has`