DEV Community: Amanda Suzzanne

Step-by-Step Guide to Importing Google Fonts into CSS

Amanda Suzzanne — Tue, 03 Sep 2024 10:23:28 +0000

Customizing the typography of your website can greatly enhance its visual appeal and readability. Google Fonts offers a wide selection of high-quality, web-safe fonts that you can easily integrate into your project.

This guide will walk you through the process of adding a Google Font to your CSS stylesheet, so you can effortlessly apply a unique font to your web pages.

Search for the Font: Go to the Google Fonts website and search for the font you want to use. Select the font from the search results.

Get the Font: Click the “Get font” button at the top right corner of the page.

Get Embed Code: Click on the “Get embed code” button, located at the top right of the page.

Import the Font: Click on the “Import” tab in the embed code options.

Copy the Font Link: Copy the highlighted line of code provided in the Import tab.

Paste in Your CSS File: Open your project in VS Code and locate your CSS file (e.g., index.css). Paste the copied code at the very top of this file.

Apply the Font: Set the font-family in your CSS to use the imported font. For example:

Following these simple steps will apply your selected font to your project, improving its typography.

"Pink Vibes: A Step-by-Step Guide to Transforming Your VS Code Theme"

Amanda Suzzanne — Tue, 30 Jan 2024 15:51:51 +0000

Introduction:

Welcome to a world of vibrant coding! In this guide, we'll walk you through the simple steps to give your Visual Studio Code a stunning pink makeover. Follow along as we dive into the process of finding and applying a pink theme that will not only make your coding environment visually appealing but also add a touch of personal style.

Step 1: Launch VS Code and Navigate to Extensions:

Begin by opening your Visual Studio Code app. Once inside, head to the Extensions view. You can find this by clicking on the Extensions icon on the sidebar or using the shortcut Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac).

Step 2: Search for the Perfect Pink Theme:

In the Extensions view, locate the search bar. Type in "pink theme" and hit enter. This will display a variety of pink-themed extensions available for download.

Step 3: Download Your Chosen Pink Theme Extension:

Scroll through the results and find a pink theme that catches your eye. Once you've made your selection, click on the "Install" button to download and install the theme. VS Code will take care of the installation process for you.

Step 4: Activate Your Pink Theme:

With the extension now installed, navigate to the "Color Theme" dropdown menu, usually located in the status bar at the bottom of the window. Find your newly installed pink theme in the list and select it. Voila! Your VS Code environment is now adorned with a delightful pink color scheme. This step is only necessary in the event that your VS Code doesn't automatically activate your pink theme after installation.

Step 5: Revel in Your Pink Coding Paradise:

Take a moment to appreciate the transformation. Your code editor is now not just a powerful tool but also a reflection of your unique style. Embrace the pink vibes and let the creativity flow!

Conclusion:

In just a few simple steps, you've successfully personalized your Visual Studio Code environment with a vibrant pink theme. Coding is not just about functionality; it's also about creating a space that inspires and motivates you. With your new pink theme, get ready to tackle your projects in a visually appealing and personalized coding paradise. Happy coding in style!

JavaScript Loops

Amanda Suzzanne — Thu, 06 Jul 2023 00:03:56 +0000

Introduction

In programming, loops are constructs that allow you to repeatedly execute a block of code based on a specified condition. They provide a way to automate repetitive tasks and iterate over collections of data. JavaScript has several types of loops:

For loop
While loop
Do...while loop
For...in loop
For...of loop

For Loop

This is the most commonly used loop in JavaScript. It has a compact syntax and consists of three parts: initialization, condition, and increment/decrement. The loop executes the code block as long as the condition is true.
Syntax:

for (statement 1 ; statement 2 ; statement 3){
    code here...
}

Statement 1: It is the initialization of the counter. It is executed once before the execution of the code block.
Statement 2: It is the testing statement that defines the condition for executing the code block. It must return a boolean value. It is also an entry-controlled loop as the condition is checked before the execution of the loop statements.
Statement 3: It is the increment or decrement of the counter & executed (every time) after the code block has been executed.
Example:

let x;

// for loop begins when x=2
// and runs till x <=4
for (x = 2; x <= 4; x++) {
    console.log("Value of x:" + x);
}

Output:

Value of x:2
Value of x:3
Value of x:4

While Loop

The while loop repeatedly executes a block of code as long as the specified condition evaluates to true. It checks the condition before each iteration. It is an entry controlled loop since the test condition is tested before entering the loop body.
Syntax:

while (condition) {
    // Statements
}

Example:

let val = 1;

while (val < 6) {
    console.log(val);

    val += 1;
}

Output:

Do...while loop

Similar to the while loop, the do-while loop executes a block of code at least once and then repeatedly executes it as long as the specified condition is true. The condition is checked at the end of each iteration.
Syntax:

do {
    // Statements
}
while(conditions)

Example:

let test = 1;
do {
    console.log(test);
    test++;
} while(test<=5)

Output:

The main difference between do…while and while loop is that it is guaranteed that do…while loop will run at least once. Whereas, the while loop will not run even once if the given condition is not satisfied.

Comparison between the while and the do-while loop: The do-while loop executes the content of the loop once before checking the condition of the while loop. While the while loop will check the condition first before executing the content.

While Loop

It is an entry condition looping structure.
The number of iterations depends on the condition mentioned in the while block.
The block control condition is available at the starting point of the loop.

Do-While Loop

It is an exit condition looping structure.
Irrespective of the condition mentioned in the do-while block, there will a minimum of 1 iteration.
The block control condition is available at the endpoint of the loop.

For...in loop

This loop is used to iterate over the properties of an object. It can be a great debugging tool if we want to show the contents of an object.
The for-in loop iterates only over those keys of an object which have their enumerable property set to “true”. The key values in an object have four attributes (value, writable, enumerable, and configurable).
Syntax:

for (let i in obj1) {
    // Prints all the keys in
    // obj1 on the console
    console.log(i);
}

Example:

//declaring a object employee
const courses = {
    firstCourse: 'JavaScript',
    secondCourse: 'React',
    thirdCourse: 'Angular'
};
let value = '';

//using for in loop
for (let item in courses) {
    value += courses[item] + " ";
}
console.log(value);

Output:

JavaScript React Angular

What happened in the example:

JavaScript for-in loop iterates on the object of the course.
The for every iteration, a key is returned (item)
The item can now be used to access the value of the object
The value of the key is given by courses[item]

Important Points:

Use the for-in loop to iterate over non-array objects. Even though we can use a for-in loop for an array, it is generally not recommended. Instead, use a for loop for looping over an array.
The properties iterated with the for-in loop also include the properties of the objects higher in the Prototype chain.
The order in which properties are iterated may not match the properties that are defined in the object.

For...of loop

Introduced in ES6, the for...of loop is used to iterate over iterable objects like arrays, strings, maps, and sets invoking a custom iteration hook with statements to be executed for the value of each distinct property. It provides a simpler syntax compared to the for loop when working with arrays.
Syntax:

for ( variable of iterableObjectName) {
   ...
}

Example:

// Array of numbers
let numArray = [1, 4, 16, 25, 49];

console.log("Elements of numArray are->");

// for...of Loop
for (let value of numArray) {
    console.log(value);
}

Output:

Elements of numArray are->
1
4
16
25
49

Technical Writing 101: Technical Ultimate Guide

Amanda Suzzanne — Tue, 20 Jun 2023 20:38:01 +0000

What is technical writing?

Technical writing is a kind of writing regarding a particular subject that calls for guidance, instruction, or elaboration. It is a writing discipline that focuses on conveying difficult information to those who require it to complete a particular task or reach a certain objective. As a result, technical writing is frequently referred to as "simplifying the complex".

It is a form of technical communication that is mostly employed in technical and operational fields and is therefore essential to a variety of enterprises and industries as a result. Without it, it would be difficult or impossible to comprehend or carry out certain operations and complex subjects.

Principles of technical writing

Audience: Know your audience and write for them. Consider their level of technical knowledge, their goals and needs, and their language proficiency.
Relevance: The writing should be relevant to the intended audience. It should address the specific needs of the readers and provide them with the information they need.
Clarity: Use clear and concise language, without any unnecessary words or phrases. Avoid jargon and technical terms that are unfamiliar to your audience. Use short sentences and paragraphs to make your writing easy to understand.
Organization: Organize your content in a logical manner, using headings, subheadings, and bullet points to make it easy to follow. Use tables and diagrams to present complex information.
Accuracy: Ensure that your writing is accurate and up-to-date. Verify your facts and use reliable sources. Use precise language and avoid ambiguity.
Correctness: Ensure the writing is accurate and free of errors. It should be factually correct and use proper grammar and punctuation.
Completeness: Ensure that the writing is complete and covers all necessary information. It should include all relevant details and be thorough in its coverage of a topic.
Formatting: Use consistent formatting throughout your document. Use a clear and readable font, and ensure that the font size is appropriate. Use headings, subheadings, and other formatting elements to create a hierarchy of information.
Style: Use an appropriate writing style for your audience and purpose. Use active voice, and avoid passive voice. Use plain language and avoid using overly complex words or phrases, to make it easier for the intended audience to understand.
Review and Revision: Review and revise your writing for accuracy, clarity, and organization. Have someone else review your work to provide feedback and catch errors that you may have missed.

Basic skills required for technical writing

Having a good command of the English language. Understanding tenses, acquiring proper punctuation, and mastering paragraph structure are all necessary for this. One way to tell an expert technical writer from an amateur is by the quality of their sentences.
Research. Writing current content and comprehending reader needs are made easier through research. It helps you compile subject-related data from a range of sources, including academic journals, blogs, competing literature, dissertations, whitepapers, and social networking sites. It is important to sort out useful material and focus your research on a few key areas.
Audience Survey. One of the ways to create content that is users centric and helpful to readers is by asking the following questions before you start writing: Who are my readers? What do they need? What is their knowledge level? Why will they be reading? How will they be reading? Your answer to these questions will help you write quality readers-centric content.
Content Planning. Anything can be executed successfully with the right planning. While creating a content outline, content planning enables you to keep the readers in mind. Knowing what to include and what not to include while creating the content outline is helpful.
Editing. The elegance of your work comes out in editing as a technical writer, which is why many businesses employ editors. Your writing comes to life in editing. The basics of editing must be learned even though you are just starting out as a technical writer without an editor. It is through editing that grammatical faults and other mistakes are found. Pay close attention to editing; this will set you apart from other technical writers.

Examples of Technical Writing

Product documents - Concepts and features.
Procedures - How to perform actions.
API documentation - APIs and parameters with code samples.
Installation and configuration guides - Steps to install and configure products.
User guides - Different types of user guides target specific users. For example, user guides for end users and advanced users.
Admin Guide - Guides meant for Administrators with advanced features and permissions.
Error Docs - Guides explaining the Error Codes and how to fix them.
FAQ - Frequently Asked Questions (FAQs) to help users quickly.
Knowledge Base - KB used by external users and internal Support teams.
Integration Guides - Steps to integrate third-party products

Introduction to Data Structures and Algorithms with Modern JavaScript

Amanda Suzzanne — Mon, 21 Feb 2022 16:58:15 +0000

Data structures are programmatic ways of organizing and storing data so that it can be used efficiently. They consider how the data is stores and their relationship to each other.
Algorithms are sequences of steps that describe how to do something, such as how data is to be accessed from the main memory or secondary storage devices.

Factors to consider when determining the data structures to use:

The efficiency of the program with respect to its run time. Does it perform the optimal number of operations to achieve its goal.
The efficiency of a program with respect to its utilization of main memory and secondary storage devices. Does it consume such resources in a fashion that makes its use impractical?
the development costs of a program or system. Could a different approach to the problem significantly reduce the total person-hours invested in it?

Examples of Data Structures:

Arrays

An array is a special variable, which can hold more than one value. It can hold many values under a single name, whereby these values can be accessed by referring to an index number.

The syntax for creating a JavaScript Array is:

const array_name = [item1, item2, ...];

Spaces and line breaks are not important and the declaration can span multiple lines.
Arrays can be created in the following ways:

const names = ["John", "Joe", "Doe"];

const cars = [];
names[0]= "John";
names[1]= "Joe";
names[2]= "Doe";

const names = new Array("John", "Joe", "Doe");

Elements in an array can be accessed by referring to the index number:

const names = ["John", "Joe", "Doe"];
let name = names[0];

The value of an array element can be changed:

const names = ["John", "Joe", "Doe"];
names[0] = "Jane";

Queue

A queue is a type of array which uses a FIFO (first in, first out) approach. An example is a line of people going into a store, where the first one in line gets to be served first and the last one is served last. The first element to be inserted in the queue will be the first element to be deleted or removed from the list.

A queue has the following main operations:

Insert a new element at the end of the queue, which is called enqueue.
Remove an element from the front of the queue, which is called dequeue.
Peek an element which gets the element at the front without modifying the queue.

The constructor of the queue is:

function Queue() {
   this.elements = [];
}

The enqueue() method adds an element at the end of the queue. We use the push() method of the array object to insert the new element at the end of the queue.

Queue.prototype.enqueue = function (e) {
   this.elements.push(e);
};

The dequeue() method removes an element from the front of the queue. In the dequeue() method, we use the shift() method of the array to remove an element at the front of the queue.

// remove an element from the front of the queue
Queue.prototype.dequeue = function () {
    return this.elements.shift();
};

The peek() method accesses the element at the front of the queue without modifying it.

// get the element at the front of the queue
Queue.prototype.peek = function () {
    return !this.isEmpty() ? this.elements[0] : undefined;
};

Stack

A stack is a type of array which uses a LIFO (last in, last out) approach. An example is a stack of physical files, with the last one placed on the stack being the first one out and the first one to have been placed on the stack being the last one out. The insertion and deletion of elements are done in the same end which is called the top of the stack.

Working with stacks involve the following operations:

Initialize the stack to be empty
Determine whether the stack is empty or not
Check whether the stack is full or not
If the stack is not full, add or insert a new node at the top of the stack. This operation is termed as Push Operation
If the stack is not empty, then retrieve the node at its top
If the stack is not empty, the delete the node at its top. This operation is called as Pop operation

The push() method allows you to add one or more elements to the end of the array. The push() method returns the value of the length property that specifies the number of elements in the array.

Let stack = [];
Stack.push(“Banana”, "Orange", "Apple", "Mango”); 
//[Banana, Orange, Apple, Mango]

The pop() method removes the element at the end of the array and returns the element to the caller. If the array is empty, the pop() method returns undefined.

console.log(stack.pop()); //  Banana
console.log(stack); // [Orange, Apple, Mango];

Linked Lists

A linked list is a data structure similar to an array with the main difference being that elements are not stored in a particular memory location or index. In stead, each element is a separate object that contains a pointer or a link to the next object in that list.

Each element/node contains the data stored and a link to the next node. The entry point is called the head and it is a reference to the first node whereas the last node points to null. If a list is empty, then the head is a null reference.

The size() method returns the number of nodes present in the linked list.

size() {
    let count = 0; 
    let node = this.head;
    while (node) {
        count++;
        node = node.next
    }
    return count;
}

The clear() method empties out the list

clear() {
    this.head = null;
}

The getLast() method returns the last node of the linked list

getLast() {
    let lastNode = this.head;
    if (lastNode) {
        while (lastNode.next) {
            lastNode = lastNode.next
        }
    }
    return lastNode
}

The getFirst() method retuens the first node of the linked list

getFirst() {
    return this.head;
}

JavaScript 101: Ultimate JavaScript Guide

Amanda Suzzanne — Mon, 14 Feb 2022 14:16:28 +0000

Introduction to JavaScript

JavaScript is an object-oriented programming and scripting language that is used to provide dynamic and interactive content on webpage. It can work in all modern browsers including Internet explorer, Google Chrome, Firefox and Opera.

JavaScript statements are separated using semicolons.

Comments are used to prevent the execution of statements and are ignored by the compiler during execution. the follow the following syntax:

// For single line comment

/* For block of lines comment
...
...
*/

JavaScript data types

Data types specify the kind of data that can be stored and manipulated within a program. there are 6 basic data types in JavaScript:

String - It is used to represent textual data and is created using single or double quotes surrounding one or more characters as shown:

var a = 'Hi there!';  
var b = "Hi there!";
var c = "Let's have a cup of coffee."; 
var d = 'He said "Hello" and left.';  
var e = 'We\'ll never give up.';

Number - It is used to represent positive or negative numbers with or without decimal place, or numbers written using exponential notation:

var a = 25;         
var b = 80.5;       
var c = 4.25e+6;    
var d = 4.25e-6;

Boolean - It can hold only two values: true or false. It is typically used to store values like yes (true) or no (false), on (true) or off (false), etc. The Boolean values also come as a result of comparisons in a program.

var isReading = true;   
var isSleeping = false;

var a = 2, b = 5, c = 10;
alert(b > a) // Output: true
alert(b > c) // Output: false

Undefined - It can only have the special value undefined. If a variable has been declared, but has not been assigned a value, it has the value of undefined.

var a;
var b = "Hello World!"

alert(a) // Output: undefined
alert(b) // Output: Hello World!

Null - It can only have the special value null. A null value means that there is no value. It is not equivalent to an empty string ("") or 0, it is simply nothing. A variable can be explicitly emptied of its current contents by assigning it the null value.

var a = null;
alert(a); // Output: null

var b = "Hello World!"
alert(b); // Output: Hello World!

b = null;
alert(b) // Output: null

JavaScript variables

A variable is used to store information in a computer's memory. Its value can change all throughout a script.
Variables are declared using one of three keywords: let, const, var.
let is used for declaration of block-level variables. The declared variable is available from the block it is enclosed in.

let a;
let name = 'Mandy';

const is used for declaration variables whose values are never intended to change. The variable is available from the block it is declared in.

const Pi = 3.14;

var is the most commonly used and it does not have the restrictions that the other two keywords have since it was traditionally the only way to declare a variable in JavaScript. A variable declared with the var keyword is available from the function it is declared in.

var a;
var name = 'Mandy';

Some rules to be followed when naming variables are:

Ensuring that the variable name is descriptive to make it easy to understand what the variable refers to.
Ensuring the variable name is of appropriate length for it to be descriptive enough.
Do not use spaces in variable names.
Do not use special symbols in variable names, the only exception being the underscore (_).
Ensuring that the first letter of the variable name is either a letter or an underscore.

Variables are printed by including the variable name in a document.write() command. When printing the value of a variable, the variable name is NOT enclosed in double quotes. For example:

var myNumber = 12;
document.write(myNumber);

The output will be:

Variables can also be printed together with regular texts:

var myNumber = 12;
document.write("My favorite number is " + myNumber);

The output will be:

My favorite number is 12

Operators

The numerical operators which can be used are +, -, *, / and % which is the remainder operator(modulo). Values are assigned using =, and there are also compound assignment statements such as += and -=.

x += 5;
x = x + 5;

The + operator also does string concatenation:

'Hello' + ' Mandy'; // "Hello Mandy"

When a string is added to a number (or other value) everything is converted into a string first, which might be confusing:

'3' + 4 + 5;  // "345"
 3 + 4 + '5'; // "75"

Comparisons can be made using <, >, <= and >= and they work for both strings and numbers. The double equals operator performs type coercion given different types. To avoid type coercion, the tripe-equals operator is used:

123 == '123'; // true
1 == true; // true

123 === '123'; // false
1 === true;    // false

Control Structures

For...loop - It repeats the block of code specified number of times and has the following syntax:

for(start point; condition; step) {
//code to execute
}

While...loop - It repeats the block of code until condition is true and has the following syntax:

while(condition) {
//code to execute
step
}

Do...while loop - It repeats the block of code until a condition is true, but first executes the code and then checks the condition. It has the following syntax:

do {
//code to execute
step:
} while (condition);

For..in loop - It iterates through the properties of an object. the code is executed as many ties as many properties are in the object. It has the following syntax:

for (let property in object) {
//code to execute
}

For...of loop - It iterates through the values of the iterable object and has the following syntax:

for (let value of iterable) {
//code to execute
}