DEV Community: Rio Cantre

Day 100/100 Reverse Function

Rio Cantre — Fri, 24 Dec 2021 10:39:35 +0000

Declaring Functions

Functions allow you to package up lines of code that you can use (and often reuse) in your programs.

function reversString(reverseMe) {
         var reversed = "";
         for (var i = reverseMe.length - 1; i >= 0; i--) {
              reversed += reverseMe[i];
         }
         return reversed;
}

The reverseString() function had one parameter: the string to be reversed. In both cases, the parameter is listed as a variable after the function name, inside the parentheses. And, if there were multiple parameters, you would just separate them with commas.

Return statements

function sayHello() {
    var message = "Hello!"
    console.log(message);
}

In the sayHello() function above, a value is printed to the console with console.log, but not explicitly returned with a return statement.

You can write a return statement by using the return keyword followed by the expression or value that you want to return.

function sayHello() {
    var message = "Hello!"
    return message; // returns value instead of printing it
}

Function Recap

Functions package up code so you can easily use (and reuse) a block of code.
Parameters are variables that are used to store the data that's passed into a function for the function to use.
Arguments are the actual data that's passed into a function when it is invoked:

function add(x, y) {
var sum = x + y;
return sum; // return statement
}

Code Snippets

for(var i=0; i<numbers.length; i++){
   for(var j=0; j<numbers[i].length; j++){
      if(numbers[i][j]%2===0)
         numbers[i][j]="even";
      else
         numbers[i][j]="odd";
      }
}
console.log(numbers);


var facebookProfile = {
    name: "Bear",
    friends: 123,
    messages: ["Bear loves fish", "Bear loves nap", "Bear love honey"],
    postMessage: function(message) {
        facebookProfile.messages.push(message);
    },
    deleteMessage: function(index) {
        facebookProfile.messages.splice(index, 1);
    },
    addFriend: function() {
        facebookProfile.friends = facebookProfile.friends + 1;
    },
    removeFriend: function() {
        if(facebookProfile.friends >0) 
           facebookProfile.friends = facebookProfile.friends - 1;
    }
};

console.log(facebookProfile);

Summary

Happy Hacking!!!

Day 99/100 Scope

Rio Cantre — Thu, 23 Dec 2021 10:40:17 +0000

The scope is defined as a specific portion of the code. There are three types of scope in Javascript:

Global scope - When a particular variable is visible (can be used) anywhere in the code. Such a variable is generally called as Global variable.
Function scope - When a particular variable is visible (can be used) within a particular function only. Such a variable is generally called as Local variable.
Block scope - When a particular variable is visible (can be used) within a pair of { . . . } only.

The JavaScript language is constantly improving. One of these updates introduces a new type of scope, called Block scope.

var a = 1;
function x() {
var b = 2;
function y() {
    var c = 3;
    function z() {
    var d = 4;
    }
    z();
}
y();
}

x();

The variable c is defined inside function y(), so it's accessible only inside function y(). This means it can be printed anywhere inside function y(), as well as inside any functions declared inside function y().The inner functions y() and z() have access to their own local variables, the variables defined inside the functions they were also defined in (x() and y() functions respectively), and any global variables.

Scope Recap

If an identifier is declared in global scope, it's available everywhere.
If an identifier is declared in function scope, it's available in the function it was declared in (even in functions declared inside the function).
When trying to access an identifier, the JavaScript Engine will first look in the current function. If it doesn't find anything, it will continue to the next outer function to see if it can find the identifier there. It will keep doing this until it reaches the global scope.
Global identifiers are a bad idea. They can lead to bad variable names, conflicting variable names, and messy code.

Code Snippets

var row = 0;  // initial value of the row
var seat = 0; // initial value of the seat within a row

for (row = 0; row <= 25; row++){
    for(seat = 0; seat <= 99; seat++){
        console.log(row+"-"+seat);
    }
}

Summary

Happy Hacking!

Day 98/100 Objects in Code

Rio Cantre — Wed, 22 Dec 2021 10:09:05 +0000

It’s worth noting that while we can represent real-world objects as JavaScript objects, the analogy does not always hold. This is a good starting place for thinking about the structure and purpose of objects, but as you continue your career as a developer, you’ll find that JavaScript objects can behave wildly different than real objects.

Object Literals

var sister = {
    name: "Sarah", 
    age: 23,
    parents: [ "alice", "andy" ],
    siblings: ["julia"],
    favoriteColor: "purple",
    pets: true
};

The syntax you see above is called object-literal notation. There are some important things you need to remember when you're structuring an object literal:

The "key" (representing a property or method name) and its "value" are separated from each other by a colon
The key: value pairs are separated from each other by commas
The entire object is wrapped inside curly braces { }.
And, kind of like how you can look up a word in the dictionary to find its definition, the key in a key:value pair allows you to look up a piece of information about an object.

Here's are a couple examples of how you can retrieve information about my sister's parents using the object you created.

sister["parents"] // returns [ "alice", "andy" ]
sister.parents // also returns ["alice", "andy"]

Using sister["parents"] is called bracket notation (because of the brackets!) and using sister.parents is called dot notation (because of the dot!).

Objects are one of the most important data strcutures in JavaScript.
They have properties (information about the object) and methods (functions or capabilities the object has).
Objects are an incredibly powerful data type and you will see them all over the place when working with JavaScript, or any other object-oriented programming language.

Code Snippets

var savingsAccount = {
    balance: 1000,
    interestRatePercent: 1,
    deposit: function addMoney(amount) {
           if (amount > 0) {
               savingsAccount.balance += amount;
           }
    },
    withdraw: function removeMoney(amount) {
           var verifyBalance = savingsAccount.balance - amount;
           if (amount > 0 && verifyBalance >= 0) {
               savingsAccount.balance -= amount;
           }
    },
    printAccountSummary: function() {
    return "Welcome!\nYour balance is currently $" + savingsAccount.balance + " and your interest rate is " + savingsAccount.interestRatePercent + "%.";
    }
};
console.log(savingsAccount.printAccountSummary());



var savingsAccount = {
    balance: 1000,
    interestRatePercent: 1,
    deposit: function addMoney(amount) {
           if (amount > 0) {
              savingsAccount.balance += amount;
           }
    },
    withdraw: function removeMoney(amount) {
           var verifyBalance = savingsAccount.balance - amount;
           if (amount > 0 && verifyBalance >= 0) {
               savingsAccount.balance -= amount;
           }
    }
};

Summary

Woke up today humming a tone... mumbling words then I search about the lyrics and it goes like this...

If you search for tenderness.It isn't hard to find
You can have the love you need to live. But if you look for truthfulness. You might just as well be blind. It always seems to be so hard to give.

Day 97/100 Donuts to Code

Rio Cantre — Tue, 21 Dec 2021 10:28:24 +0000

Intro to Arrays

An array is a data structure that you can use to store multiple values and arrays are also organized.

An array is useful because it stores multiple values into a single, organized data structure.

You can define a new array by listing values separated with commas between square brackets[].

var donuts = ["glazed", "jelly" , "powdered"];

But strings aren't the only type of data you can store in an array. You can also store numbers, booleans... and really anything!

var mixedData = ["abcd", 1, true, undefined, null, "all the things"];

You can even store an array in an array to create a nested array!

var arraysInArrays = [[1, 2, 3], ["Julia", "James"], [true, false, true, false]];

Nested arrays can be particularly hard to read, so it's common to write them on one line, using a newline after each comma:

var arraysInArrays = [
    [1, 2, 3], 
    ["Julia", "James"], 
    [true, false, true, false]
];

Indexing

Remember that elements in an array are indexed starting at the position 0. To access an element in an array, use the name of the array immediately followed by square brackets containing the index of the value you want to access.

var donuts = ["glazed", "powdered", "sprinkled"];

console.log(donuts[0]); // "glazed" is the first element in the `donuts` array

Pop

Alternatively, you can use the pop() method to remove elements from the end of an array.

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];

donuts.pop(); // pops "powdered" off the end of the `donuts` array
donuts.pop(); // pops "sprinkled" off the end of the `donuts` array
donuts.pop(); // pops "cinnamon sugar" off the end of the `donuts` array

With the pop() method you don’t need to pass a value; instead, pop() will always remove the last element from the end of the array.

Also, pop() returns the element that has been removed in case you need to use it.

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];

donuts.pop(); // the `pop()` method returns "powdered" because "powdered" was the last element on the end of `donuts` array

Code Snippets

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

donuts.forEach(function(donut) {
     donut += " hole";
     donut = donut.toUpperCase();
     console.log(donut);
}); 


for (var i = 0; i < donuts.length; i++) {
     donuts[i] += " hole";
     donuts[i] = donuts[i].toUpperCase();
     console.log(donuts[i]);
}

Summary

Received a meaningful comment and it is a great tool of motivation. I'm grateful for the people who are there supporting me.

Day 96/100 Data Types

Rio Cantre — Mon, 20 Dec 2021 09:05:09 +0000

Seven fundamental data types:

Number: Any number, including numbers with decimals: 4, 8, 1516, 23.42.
String: Any grouping of characters on your keyboard (letters, numbers, spaces, symbols, etc.) surrounded by single quotes: ' ... ' or double quotes " ... ". Though we prefer single quotes. Some people like to think of string as a fancy word for text.
Boolean: This data type only has two possible values— either true or false (without quotes). It’s helpful to think of booleans as on and off switches or as the answers to a “yes” or “no” question.
Null: This data type represents the intentional absence of a value, and is represented by the keyword null (without quotes).
Undefined: This data type is denoted by the keyword undefined (without quotes). It also represents the absence of a value though it has a different use than null.
Symbol: A newer feature to the language, symbols are unique identifiers, useful in more complex coding. No need to worry about these for now.
Object: Collections of related data.

Code Snippets

var prices = [1.23, 48.11, 90.11, 8.50, 9.99, 1.00, 1.10, 67.00];

prices[0] = 2.33;
prices[2] = 99.00;
prices[6] = 3.00;

for (var index = 0; index<prices.length; index++){
    if(index===0){
       prices[index]=11;
    }
    else if(index===2){
       prices[index]=33;
    }
    else if(index===6){
       prices[index]=77;
    }
}
console.log(prices);

Summary

Yesterday was the 2nd "Surprise" Drill in Technical line. Luckily, the electricity came back later the day and same time got extensions to pay the bills. I'm so coward that I could not afford to pay the bills on time, now I must submit my small useful blog on the same posting time.

Day 95/100 The Internet

Rio Cantre — Sun, 19 Dec 2021 10:48:15 +0000

The Internet, Explained

What is the difference between the internet and the world wide web?

What is the difference between the internet and the world wide web?
The web has become so popular that many people now regard it as synonymous with the internet itself; but this is a misconception.

Where is the internet?

The internet is compromised of data centers, long fiber optic cables, and cable companies that ensure distribution to paying customers via cables, towers and DSL service.

What is a web browser?

A computer program that allows users to download and view websites.
A computer program that allows users to download and view websites.

Cover Background

Someone commented that the background cover I used the entire challenge is funny. I hope that person visit museums and admire the painting for a minimum of 2 mins at least. I could accept that, but in every art piece there is a story. My story, I'm heartbroken, I quit my job and drop out at school. I have no friends and nobody wants to help me. Instead of whipping and making myself sad, I used the internet to do something. That's when I started coding, others view it as pretty boring and needs a lot of time solving problems. I thought it would be perfect for me, since I'm devastated and all. I got nothing to loss, it was a perfect excuse for me to cope with the pain. Then until, the man I meet 2 years ago, keep on hunting me. I'm not sure what's his purpose, but I'm entirely sad that he left me heartbroken and doesn't want me to forget him. Learning to code has become my way of letting go.

Summary

This probably my last day posting, I could not afford to pay the internet and electricity bills. I only have 40% left in my battery, I won't know when I can pay the bills. Today, I cowardly shared my feelings and sentiments through the Internet.

Day 94/100 Secondary Navigation

Rio Cantre — Sat, 18 Dec 2021 12:29:39 +0000

What is primary vs secondary navigation?

The primary navigation system typically contains the most important links and buttons that need to be displayed on every single page of the site.
Secondary navigation, or breadcrumb navigation, usually consists of a clickable list of pages or attributes that led to the current page. It can help users understand the extent of the site and also where they are currently.

Why do we call them breadcrumbs?

Think about the story of Hansel and Gretel, where the kids drop breadcrumbs as they walked in the woods so that they would be able to find their way back.

Benefit of using breadcrumbs

Breadcrumb navigation provides a lot of benefits for users that come to random pages in a website through direct links or search results.
Breadcrumbs also provide a way for a user to quickly jump backward in their navigation of the site.
The decision to use breadcrumbs is a judgment call depending on the type, depth, and complexity of your site.

Code Snippets

function cat() {
    function purr()
         return "purrrr!";
} 
console.log(purr()) ;
var meow = function(max) {
var catMessage = "";

for(var i = 0; i < max; i++) {
    catMessage += "meow";
   }
    return catMessage;
   }

cat();

Summary

It's cold outside, making myself warm and contemplating. The view on my window is all white and foggy, brain is fuzzy, now I must have my warm yummy tea in a muggy.

Day 93/100 Web Design

Rio Cantre — Fri, 17 Dec 2021 12:07:46 +0000

Making time to think about the basics of web design would evaluate the significance of the structures and compositions, which are elements for the entire concept.

Clickability

For users on the web, the mouse click is perhaps the most fundamental human-computer interaction. The web became the web partially through the power of hypertext, or text in one document that links to other documents or resources. To this day, users navigate the web largely through mouse clicks (and finger taps on mobile and tablet devices).

Affordances

Objects afford the ability of users to interact with them in various ways. For instance, a bench affords a person the ability to sit on it, but if it is not affixed to the ground, it also affords the user the ability to turn it over, throw (if the user is physically able), or perform any number of other actions. Even though the designer was probably not designing the bench with throwing in mind as the primary user behavior, the object still affords this action. Potentials for interaction are collectively called the affordances of an object.

Signifiers

Signifiers are aspects of an object that a designer uses to indicate potential and intended affordances of an object. For example, a teacup with no handle affords the ability to lift it and drink out of it. But designers and potters often add handles to signify that users can and should lift up the object and take a sip. The handle is an example of a common user experience pattern.

Code Snippets

function makeLine(length) {
    var line = "";
    for (var j = 1; j <= length; j++) {
        line += "* ";
    }
        return line + "\n";
    }

function buildTriangle(length){
    var triangle = "";
    var lineRow = 1;
    for (lineRow = 1 ; lineRow <= length ; lineRow++){
         triangle = triangle + makeLine(lineRow);
    }
         return triangle;
    }

Summary

One more week and I'll be over. The request for comments seems daunting, I approach on several people but only a few responded, it seems everybody are always busy. It's good to be busy.

Day 92/100 Text Readability

Rio Cantre — Thu, 16 Dec 2021 14:37:50 +0000

Improving the readability of an article would make the user's interest to keep reading and encourage to spend longer time to value the contents and establish a sense of empowerment to deliver the emotions and facts about the motivations of creativity.

Adjust whitespace within the text:

Line Spacing

Line spacing, also known as Leading, refers to the distance between two lines of text. Adjusting this value has a huge impact on the legibility of your site.

Tracking

Similar to kerning, a way to make your text more readable is to adjust the tracking of the letters. Tracking is the space between the letters and the words. If you have too little tracking, the words will appear cramped, so by increasing tracking slightly, you make your text significantly more legible.

Kerning

Kerning is the space between two letters in the text. You typically will not need to worry about kerning because a well-designed typeface already has optimal kerning built in. It is most important when you want to adjust the kerning in a title or header to achieve the design you want.

Code Snippets

var num = 99;

while (num >=1) {
// Last iteration. Note occurances of bottle, bottle, bottleS
if (num === 1) {
   console.log(num + " bottle of juice on the wall! "
            + num + " bottle of juice! Take one down, pass it around... " + (num-1) + " bottles of juice on the wall!");
}
// Second-last iteration. Note occurances of bottleS, bottleS, bottle
else if (num === 2){
         console.log(num + " bottles of juice on the wall! "
         + num + " bottles of juice! Take one down, pass it around... " + (num-1) + " bottle of juice on the wall!");
}
// All other iterations. Note occurances of bottleS, bottleS, bottleS
else {
     console.log(num + " bottles of juice on the wall! "
     + num + " bottles of juice! Take one down, pass it around... " + (num-1) + " bottles of juice on the wall!");
}

num = num - 1;

Summary

I didn't realize having this challenge made me spontaneous in making plans. I started to realize that even if I'm submitting short useful blogs, somehow the most important thing is that I'm learning something.

Day 91/100 Color for UI

Rio Cantre — Wed, 15 Dec 2021 15:51:55 +0000

Selecting the appropriate colors for your designs must first know the common aspects and keys to convey.

Different types of color blindness

red-green, where users have a difficult time differentiating between the red and green colors.
blue-yellow, where the blues tend to appear greener
monochromatic, when users can’t see color at all.

The keys to designing for UI

Select a dominant brand color and supporting accent colors.
Use contrast to define sections and differentiate actions.
Use semantic colors for error and success messages.
Incorporate default colors for text and backgrounds where needed.
Neutral colors can provide good contrast.

Code Snippets

if (false) {
  console.log('The code in this block will not run.');
} else {
  console.log('But the code in this block will!');
}

// Prints: But the code in this block will!

Summary

I'm counting my days, and exploring my imagination. Extracting all the information I learned on this challenge. Now , I have to expand my motivation to become better in writing proper blogs.

Day 90/100 Color Theory

Rio Cantre — Tue, 14 Dec 2021 13:30:45 +0000

Every design must have a properly structured color system to be used on a project. Obtaining insight on a practical approach and putting more effort into bringing the ideal color system would eventually help select the suitable scheme.

Best Practices

Use neon colors sparingly.
While the use of neon colors can feel hip, they are often hard on a user’s eyes.
Avoid vibrating colors. Vibrating colors result from
pairing two colors with high saturation together that may be
complementary to one another. It creates a glowing or moving effect, which also can be hard on one’s eyes.
Use backdrops to separate vibrating colors.
In the example, the white backdrop behind the green card reduces the space where the contrasting colors (red and green) are directly next to each other, but the overall effect is still too intense for most websites.
Avoid color combinations with insufficient contrast, including:
- Bright colors on top of bright colors
- Light colors on top of light colors
- Dark colors on top of dark colors
Even if there’s enough contrast in these pairings for the different colors to be legible, they likely won’t create enough contrast to attract the user’s attention.

Summary

I'm almost done with the challenge, making this daily made me think of doing something opposite. For instance, I read an article about "I completely ignored the front end development scene for 6 months. It was fine". I think I'll do fine if I finished this one.

Day 89/100 Sticky

Rio Cantre — Mon, 13 Dec 2021 14:18:13 +0000

To make something relevant, one must have an idea to make it more functional and stick to that proposal to make it workable and effective. A strategy that makes sense when everything seems not working according to plan and puts out another method to get through the hurdles on the way. After achieving the designated position, one would benefit from the changes ahead because it possesses the role before claiming it to be the actual holder. Often, the highest rank is compost of a mountain of irrelevant ideas and make things work by gaining support on small strategies that are anonymous and unknown to the public.

Position

The default position of an element can be changed by setting its position property. The position property can take one of five values:

static - the default value (it does not need to be specified)
relative
absolute
fixed
sticky

Sticky

The sticky value is another position value that keeps an element in the document flow as the user scrolls, but sticks to a specified position as the page is scrolled further. This is done by using the sticky value along with the familiar offset properties, as well as one new one.

Code Snippets

let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
}

a11y myths

Blind people don't watch movies

They definitely do. With the help of audio descriptions they can watch and listen to any media content as all other people do.