DEV Community: Hyemiie

How to use the CSS "inset" Property to create styling effects.

Hyemiie — Fri, 15 Sep 2023 18:44:09 +0000

Having control over the positioning and styling of elements is an important part of creating visually appealing and responsive web pages in CSS. Fortunately, the inset property helps us achieve this by giving developers precise control over positioning.

Inset offers a level of precision ranging from adjusting the spacing between elements, styling box shadows, or strategically positioning elements, and this helps to enhances user interfaces with visually appealing effect.

In this tutorial, you will learn how to use inset property to position elements and improve styling. We would also look at its syntax, various use cases, and best practices to use when styling web pages

Understanding the `inset` Property

Inset is a versatile property used in styling elementsin CSS. It is usually used with the 'position' property but can also be used alone to style and add effects to elements in css.

When used in combination with the “position” property it allows you to precisely control the position of an element within its containing parent. Inset can take up to four depending on the effect you’re looking to achieve. It can be declared using this syntax

inset: value;

How to use `inset` to position elements.

Inset can be used to set the top, left, tight, and bottom properties simultaneously. This means, instead of using separate properties like top, bottom, right, and left to specify the distances, inset allows you to declare all these values in a single line of code. For instance;



body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgb(95, 99, 100);
  height: 200px;
  width: 400px;
  position: relative;
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}

In this code we positioned the .inner box 90px away from the top, bottom, right, and left to achieve this. This effect can be achieved in just a line of code using inset



.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  inset: 90px;
  height: 30px;
  text-align: center;
}

Here, we replaced the top, right, left, and bottom properties with inset. This has the same effect which is to position the element 90px away from the box on all four sides.

When using inset in place of the traditional method, the position property must be set to either “absolute” or “relative”. Each of these positions has different effects;

Using `inset` with `position: absolute`

The position: absolute; positions the .inner element relative to the closest ancestor which is .box in this case. If the box has a relative positioning, it will act as a reference for positioning the .inner element just like in the previous example.

Using `inset` with `position: relative`

When an element is positioned as “relative,” it stays within the normal document flow, and its original space is preserved. The inset values define the distance the element should be moved from its original position within the document flow.
For example, if we are to change the position to relative, we would have;



.inner {
  background-color: rgb(150, 230, 230);
  position: relative;
  inset: 10px 2px; /* This moves the element 10px down and 2px to the right from its original position */
  text-align: center;
}

In this snippet, we moved the .inner element 10 pixels down and 2 pixels to the right from its original position within the document flow.

P.S. If the inset property is given one value, it applies to all four sides, however, it can accept more than one value;

When given two values the first value would represent the top and bottom, and the second value represents left and right. ```css

.inner {
inset: 10px 20px; /* This applies 10px top and bottom, 20px right and left */
}


- With three values, the first value sets the top, the second value sets the right and left distances, and the third value sets the bottom distance.
```css


.inner {
  inset: 10px 20px 30px; /* Applies 10px top, 20px right and left, 30px bottom */
}

When you provide four values, they are applied to the top, right, bottom, and left distances, respectively.



.inner {
  inset: 10px 20px 30px 40px; /* This applies 10px top, 20px right, 30px bottom, 40px to the left */
}

With this method, you can have more control over stylings while still achieving a cleaner code.

You can also use inset with other elements such as box shadow to add effects to your styles. This can be applied when styling buttons, Icons, card-based layouts, etc

How to use `inset` with `box-shadow` property.

The box-shadow property in CSS is used to add a shadow effect to an element. It can take multiple values, including the horizontal offset, vertical offset, blur radius, spread radius, color, and inset

horizontal offset: This value controls the horizontal distance that the shadow will be offset from the element
vertical offset: controls the vertical distance that the shadow will be offset from the element.
blur radius: The blur radius determines how blur the shadow should appear.
spread radius: Spread radius controls the size of the shadow.
color: The color of the shadow.

By default, the shadow is placed outside the element, creating an outer shadow effect. For example,



body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative; 
  box-shadow: 0px 2px 25px 15px rgba(195, 155, 211, 1);
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}

However, when you use the inset property, the shadow is applied inside the element, resulting in an inner shadow effect.



body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative;
  box-shadow: inset 0px 2px 25px 15px rgba(195, 155, 211, 1);
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}

We can also have multiple inner shadows using this syntax;



.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative;
  box-shadow: inset 0px 2px 25px 15px rgba(195, 155, 211, 1), inset 0px 2px 25px 15px rgba(231, 76, 60, 1);
}

You can experiment with different combinations of inset box shadows to achieve your desired design outcome.

Creating a Stylish Call to Action (CTA) Button using `inset`

A call to action button is arguably one of the most important buttons on a webpage, they therefore have to stand out and capture the reader's attention. With the inset property, we can make a CTA button visually appealing to audiences and encourage user engagement. For instance;

HTML code



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <button>Done</button>
  <div class="box">
    <h2>Hi there</h2>
    <div class="inner">
      <h3>Hi there!!!</h3>   
    </div>
  </div>

  <button>Sign up</button>
</body>
</html>

CSS code



button {
  background-color: rgb(19, 187, 238);
  position: absolute;
  inset: 90px;
  width: 95px;
  height: 50px;
  border-radius: 15px;
  box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
  border-color: antiquewhite;
  font-size: 20px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

In the code snippet, we used position: absolute; to position the button absolutely within its closest positioned ancestor. Since there’s no parent element with position: relative;the positioning will be relative to the entire document based on the inset values for positioning and inset for defining the position and an inner shadow effect.

We also used inset: 90px; to set the position of the button from all four sides (top, right, bottom, left) to 90 px, effectively creating a 90-pixel gap from each side of the document.

The box-shadow property also applies an inner shadow effect to the button using the inset property with the box-shadow property. This would make the button to be styled as;

Browser compatibility

nset was not initially fully supported by most browsers apart from Firefox, However, as of the time of writing it is now accepted in all major browsers as shown in this table;

Feature	Chrome	Firefox	Safari	Edge	Internet Explorer

`inset`	54	54	10.1	79	Not supported
`box-shadow` (`inset` value)	57+	50+	11.1+	16+	9+

This table is based on MDN's documentation on inset

Best Practices

1. Provide Fallback Styles to support multiple browsers:

Although inset is widely supported by most browsers, it’s good practice to provide fallback styling using traditional CSS properties. For example, use individual positioning properties like top, right, bottom, and left, or create similar effects using background gradients or SVG filters in place of inset

2. Cross-Browser and Device Testing:
Different browsers interpret CSS properties differently and this can lead to layout or styling issues. Therefore, it's important to test your program on multiple devices and browsers to identify any styling issues related to the inset property. You can do this using responsive design testing tools and browser developer tools

3. Vendor Prefixes for Experimental Support:
You can also use vendor prefixes like -webKit-, -moz-, and -ms- to ensure that your styling works as intended across different browsers. Go through the latest browser support documentation to know if these prefixes are still necessary for your styles.

Conclusion

As you have seen, inset is a versatile property in CSS and can be used to achieve various effects when styling. It can be used with the position property to position elements and can also be used with the box-shadow property, to create inner shadow effects.

With the knowledge gained from this guide, you can now leverage the use of inset to create visually appealing designs that improve the user experience of your web pages.

A Beginners guide to building Applications in Flask.

Hyemiie — Sat, 15 Jul 2023 20:56:14 +0000

Introduction
- What is Flask?
- Prerequisites
Installations
- Setting up Virtualenv
- Installing Flask
Building a Flask App
Routing
Dynamic Web Pages and HTTP Methods
- How to use Flask's Template System to Create Dynamic Web Pages
Conclusion

What Is Flask?
Flask is a lightweight framework used to build fully featured web applications in Python. There are many frameworks used to build web applications in Python; however, Flask provides a different system from traditional web frameworks and makes it easy to build apps with just a few lines of code.

To understand how Flask works, there are terms you have to know as they contribute to Python’s functionality. Some of these terms are ;

Web Server Gateway Interface (WSGI): WSGI is a specification for a universal interface between the web server and web applications. It is used to forward requests from a web server to a backend Python web application or framework.
Werkzeug: Werkzeug is a collection of libraries that can be used to create a WSGI (Web Server Gateway Interface)-compatible web application in Python.
Jinja2 is a Python library that allows us to build expressive and extensible templates. It is used to build templates and integrate Python with non-Python code.

Basically, Flask handles requests and responses using the Web Server Gateway Interface (WSGI) and modifies the application according to the Jinja2 template engine. When building complex applications, you can take advantage of Python libraries to add advanced features to your web application.

In this article, we are going to look at all the major concepts involved in building a complete Flask application. To demonstrate these concepts, we would build a basic application that receives a request and dynamically sends a response to the browser.

Prerequisites
To follow this tutorial, you would need the following

An understanding of Python syntax and concepts,
Basic knowledge of HTML and CSS,
A local Python 3 programming environment and a browser.

Installing Flask and setting up a virtual environment
Before we get started with our application, you'll need to have virtualenv and Flask packages installed. These packages provide the necessary tools and libraries to set up and work with Flask applications.

Virtualenv
Virtualenv is used to create an isolated environment for your Python project. It ensures that your project has its independent instances of libraries, preventing compatibility issues with different library versions.

These are the steps you need to follow to install virtualenv:

Create a folder where you want to store your project files.
Open your command prompt or terminal and run the following command:

pip install virtualenv

3.Once Virtualenv is installed, you would have to create your environment using this command:

virtualenv venv

This will create a folder named "venv"
Please know that you can choose any name for your virtual environment. We are using_ venv _for the sake of this article.

4.Next, you have to activate the environment you created;
If you are working with a Windows Operating System, you can use this prompt:

.\venv\Scripts\activate

For macOS or Linux users:

source venv/bin/activate

After activating the virtual environment, you should see the name of your environment in your terminal prompt, this shows that the environment is active.

Installing flask
To install the flask package, open your terminal or command prompt and follow these steps;

1.Navigate to the directory where you want to create your Flask project. For example, if you want to create a folder named "myfolder", you would navigate to that location using the cd command. Assuming "myfolder" is located on your desktop, the command would be:

cd Desktop/myfolder

2.Once you are in the right directory, you can run the following command to install Flask using pip:

pip install flask

3.After executing the command, pip will download and install the Flask package along with its dependencies.

Building the Flask Application
Now that you have installed the required packages, you can now build your app by following these steps;

Create a new Python file with a .py extension to store your Flask code. You can choose any name for your file. For example, let's call it app.py.
Open the app.py file in your preferred text editor or integrated development environment (IDE).

3.Start by importing the Flask class from the flask module. This class provides the necessary functionality for creating a Flask application.

from flask import Flask

4.Next, create an instance of the Flask class and assign it to a variable. This instance represents your Flask application. You can choose any name for the variable. In this example, we'll use app.

from flask import Flask
app = Flask(__name__)

The Flask class is the core of a Flask application, and it provides the functionality necessary to handle HTTP requests and responses.

Define a route for your application. A route is a URL path that corresponds to a specific function. In this case, we'll define the root route ("/") using the @app.route() decorator.

A route decorator is used to define a route. It is usually followed directly by a function as it binds the route to the function. This means that when a user visits the root URL of your app, Flask will call the decorated function,” index()”

from flask import Flask
app =Flask(__name__)

@app.route('/')
def index():
    return ' Hello World'

Usually, when a Python script runs, Python assigns the name "main" to the script. However, we can use an if statement to run the app once the condition ensures that the script is being executed directly by the Python interpreter and not imported as a module from another script. If we import another script, the if statement will prevent other scripts from running.

if __name__ == "__main__":
    app.run(debug =True)

Note:
Setting your debug mode to true would allow all the changes made in your code to be applied to the app in the browser without having to run it over again
Here's a compilation of all the code steps;

from flask import Flask
app =Flask(__name__)

@app.route('/')
def index():
    return ' Hello World'

if __name__ == "__main__":
    app.run(debug =True)

Save and run the file. To run your Flask app, open your terminal or command prompt, navigate to the directory where the app.py file is located, and run the path of your file using the Python command.

Flask will start a local development server, and you'll see an output indicating that the app is running. You can now visit the root URL (usually http://localhost:5000/) in your browser to see the "Hello, World!" message displayed.

While there are many useful pieces of information in this output, the most important for now is the fourth line, which shows that the application is running on your local host at the URL http://127.0.0.1:5000/. (Localhost refers to your local computer)

Open a browser and paste the URL, and you should see:

Congratulations… you have successfully built your flask app , which displays information on your browser,

However, in real-life applications, there are many pages and different functions that handle different events. This may seem overwhelming, but web frameworks have a system for dealing with this process, and the system is called routing.

Routing
Routing is used to map a specific URL to an associated function. For instance, in the previous code, the URL ( ‘/‘) was mapped to the index function using a route decorator,

@app.route('/')
def index():
    return ' Hello World'

Routing allows you to declare different URLs or routes for different functions you may need. For example:

from flask import Flask
app =Flask(__name__)

@app.route('/')
def index():
    return ' Hello World'

@app.route('/product')
def Product():
      return 'This is our products page'

if __name__ == "__main__":
    app.run(debug =True)

In the preceding code, we created a new function called product," which is mapped to the URL "/products". This function will be called when a user visits the /product URL and returns the string ' This is our products page'.

The first route is '/', which is the root URL. The index() function is associated with this route and will be called when a user visits the root URL. It returns the output of the home function 'Hello World'.

Accordingly, the URL 127.0.0.1:5000/product displays the output of the product function.

Dynamic web pages and HTTP methods

The route decorator @app.route() typically accepts the URL as the first parameter. However, it can also accept a list of HTTP methods as a second parameter.

HTTP methods are instructions clients (such as web browsers) use to communicate with servers to perform specific operations. Each method defines an action to be performed on a resource. Some common HTTP methods are;

GET: is used to retrieve data from a server.
POST: This method sends data to the server from a webpage. It’s like submitting a form or sending information to be processed or stored.
HEAD: Retrieves data from the server just like the GET method but doesn’t receive the actual content. It is like asking for metadata about a resource.
PUT: Replaces an existing resource on the server with the updated version.
DELETE: Deletes the target resource from the server

By default, the Flask route responds to GET requests. unless the route decorator explicitly mentions which HTTP methods it should honor. To demonstrate how the POST method works with URL routing, Now, let us first create an HTML form and use the POST and GET methods to retrieve and send form data to a URL.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:5000/login">
    <p> Enter name:</p>
        <p><input type="text" name="name"></p>
        <p><input type="submit" value="submit"></p>
    </form>
</body>
</html>

Using this code, we created an HTML form that asks for a name and submits the inputted value to the URL "http://localhost:5000/login" which would be defined in the Python file.

Python code

from flask import Flask, request, redirect, url_for, render_template


app = Flask(__name__)


@app.route('/')
def home():
    return render_template('index.html')


@app.route('/success/<name>')
def success(name):
    return 'Welcome %s' % name


@app.route('/login', methods=['POST', 'GET'])
def login():
    if request.method == 'POST':
        user = request.form['name']
        return redirect(url_for('success', name=user))
    else:
        user = request.args.get('name')
        return redirect(url_for('success', name=user) if user else url_for('home'))


if __name__ == "__main__":
    app.run(debug=True)

Here’s a breakdown of the Flask code;
Lines 1 and 2: Imports the Flask class and create an instance of the class for our app.

Line 3-5: The code creates a route decorator (@app.route()) that binds the URL path /success/ to the success function.

PS, The variable used is called a URL parameter. , URL parameters, are used to pass dynamic data within the URL of a Flask application. They capture specific values from the URL and make them accessible for use within Flask routes and functions.
The success function returns a string that displays the inputted name in place of a namespace (%s).

Line 4- 8: The route decorator binds the URL path (/login) to the login function. The function also handles both GET and POST requests.

The POST request retrieves the value submitted through the name form field using the request. form['name']. (which is the name we gave to our input in the form). The user value is then passed to the success route using the redirect function and the url_for function, which generates the URL for the success route.

The GET request retrieves the value of the name query parameter from the URL using request.args.get('name'). Again, the user value is passed to the success route using redirect and url_for.

How to use Flask's template system to create dynamic web pages

There may be instances where you would want to modify the output on your webpage without necessarily changing the output message from your function. You may also want to create a more complex output that can’t be satisfied with a simple return statement.

Flask has a function called render_template that handles such occurrences on your app. render_templates allows you to create and use HTML pages in the form of templates for your web app. This replaces the string output, which is limited, and allows you to create more interactive web pages in Flask.

To make use of the render_template function, we have to create a folder in your work environment where the render_template function can fetch the.html file(s) you want to make use of. This folder should always be named "templates," as this function looks for a template (HTML file) in the templates folder.

In a case where you can’t name the file as directed, you would have to direct the function to your preferred folder by initializing the template variable in the instance of the flask class.

app = Flask(__name__, template_folder="templates")

Home Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>This is our home page</h2>
</body>
</html>

About page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>This is out about page</h2>
</body>
</html>

Flask code

from flask import Flask, request, redirect, url_for, render_template


app = Flask(__name__)


@app.route("/")
def home():
    return render_template("home.html")

@app.route("/about")
def about ():
 return render_template("about.html")
if __name__ == "__main__":
    app.run(debug=True)

In our Flask application, we have imported the render_template() method from the Flask module. Most of the code remains the same however, on line 7, we have modified the return statement. Instead of returning a plain string or response, we now use render_template("home.html"). This instructs Flask to look for the "home.html" template file in the "templates" folder and render it as the response.

This also applies to the about function.

By utilizing render_template(), we can easily incorporate HTML templates into our Flask application, separating the presentation logic from the rest of the code. This allows us to create dynamic and interactive web pages by combining HTML with Flask's powerful features. You can also style these pages with CSS language to improve the visual appeal of your site.

Conclusion
Throughout this guide, we covered the basics of Flask, including how to set up a Flask project, define routes, handle HTTP methods, and use Flask's template system. With this knowledge, you can start building your own Flask applications, adding more functionality as you progress.

Understanding Arrow Functions: Syntax, Features, and Use Cases

Hyemiie — Sun, 09 Jul 2023 17:00:15 +0000

Introduction
Features of an arrow function
Syntax Variations for Declaring Arrow Functions
- Arrow functions with parameters.
- Arrow functions without parameters.
- Arrow functions with default parameters
- Arrow functions as Expressions.
Arrow function and "this" keyword??
Other features of arrow functions

Introduction
Functions are a fundamental part of JavaScript as they enable developers to break down complex tasks into smaller, manageable units. There are two major syntaxes used to define functions in JavaScript. These are the regular function syntax and the arrow function syntax.

The regular function has been a part of JavaScript since its inception. However, the arrow function was introduced in ECMAScript 2015 (ES6) and provides a more concise way to define functions compared to regular function expressions. It also has some features that makes it different from regular functions.

In this article, we will talk about how arrow functions work, including their advantages and use cases. We would also discuss the syntax variations in arrow functions and how they work with bindings in JavaScript.

Features of an arrow function
When declaring a function with the regular function syntax, you would have;

function addition(num1, num2){
    sum = num1+num2;
    return sum
   }

Using the arrow syntax, the function can be written as;

const addition = (num1 , num2) => {
    sum = num1 +  num2
     return sum
    }

From this example, we can point out some key features of arrow functions.

const declaration: Instead of using the function keyword, we used the const keyword to declare the arrow function. This ensures that the function reference cannot be reassigned.
You can also use the var or let keyword depending on your specific use case.
Parameters: Just like in regular functions, the parameters in arrow functions are declared within parentheses (). In this example, num1 and num2 are the parameters specified within parentheses (num1, num2).
Arrow (=>) notation: The arrow notation separates the parameter list from the function body. It uses the equal sign (=) followed by a greater than sign (>), which forms an arrow. The arrow notation shows that the parameters are used to define the function.
Function Body: The function body contains the code that is executed when the function is called. It is enclosed in curly braces {}. For example, in the code, the function body calculates the sum of num1 and num2 and returns the result using the return statement.

const addition = (num1 , num2) => {
    sum = num1 +  num2
     return sum
    }

If the function body only has a return statement, you can even have a shorter function expression.

const addition = (num1 , num2 ) => {num1 +  num2}

This is known as Implicit Return. It means that the value of the expression is automatically returned without using the return keyword

Syntax Variations for Declaring Arrow Functions

Arrow functions can be defined using different syntax. This depends on the type of function and the context in which it is being used. Here are some examples.

Arrow functions with parameters:
Just like in the previous code snippet, you can declare an arrow function with parameters

const addition = (num1 , num2 ) => {
    const sum = num1 +  num2
     return sum
   }

If the function has only one parameter, you can omit the parentheses. For example,

const displayNum = num1  => {
    const Num= num1
     return Num
   }

Arrow functions with default parameters:
Default parameters allow you to assign default values to function parameters in case no argument is passed when invoking the function.
Arrow functions support default parameters in the same way as regular functions. For example;


const multiply = (a, b= 1) => {
    return a * b;
  };

  console.log(multiply(5));
  console.log(multiply(5, 2))

In the preceding code, we created a function “multiply” which takes two parameters, a and b, with b having a default value of 1.
This means that if the value of b is not provided, then the function executes as 5*1. However, if a value is provided for b, for instance, 2, it uses the provided value. This would execute as 5*2.

Declaring arrow functions without parameters:
If a function doesn't take any parameter, then you can use empty parentheses.

const greeting = () => {
     console.log('Hello World');  
}
greeting();

Arrow Function as Expressions
You can also create an arrow function and use it as an expression. For example,

let score = 83;

let remark= (score < 50) ?
  () => console.log('pass') :
  () => console.log('Fail');

remark();

This may be a bit confusing so let’s break down the code;

In Line 1 we declare a variable named score and assign it a value of 83. This variable represents the score that we are passing to the function
In Lines 2-5 we use a ternary operator to assign a value to the remark variable.
The ternary operator checks if the score is less than 50. If the condition is met, it assigns an arrow function () => console.log("Pass") to the remark variable. Otherwise, it assigns an arrow function () => console.log("Fail") to remark.

Finally, we call the remark function, which will execute based on the value of the score. In this case, since the score is 83 (which is greater than 50), it will log 'pass' to the console.

Arrow Function and "this" Keyword.

In regular functions, the value of a "this" variable is determined by how the function is called or the object it is called upon. This is because regular functions have their own "this" binding and can change depending on the context in which it is invoked. For example

Regular function

const student = {
  name: 'Grace',
  age: 12,
  year: 2,
  studentProfile: function() {
    return 'Hi, my name is ' + this.name + ' and I am in year ' + this.year + '.';
  }
};

student.studentProfile();

In the code snippet, we defined an object named ‘student’ with properties name, age, and year. It also has an inner function called studentProfile.
The _studentProfile _is defined using the regular function syntax. Hence, it uses the “this” keyword to refer to the object it is called upon which is the student object in this case. The output would therefore be

Hi, my name is Grace and I am in year 2

However, in arrow functions, the ‘this’ keyword inherits its value from the surrounding (lexical) scope in which they are defined rather than how it is called. This means that the value of ‘this’ can change depending on the context in which the function is executed. For instance

Arrow function

const student = {
    name: 'Grace',
    age: 12,
    year: 2,
    studentProfile: () => {
      return `Hi, my name is ${this.name} and I am in year ${this.year}.`;
    }
  };

    student.studentProfile();

As we mentioned, arrow functions do not have their own ‘this’ context. Instead, they inherit the "this" value from the surrounding scope, which is the global scope in this case. Therefore, this.name and this.year within the arrow function does not refer to the properties of the student object. Instead, they reference properties of the global object (for example, a window in a browser environment).
As a result, when executing this code snippet, the output would be;

Hi, my name is undefined and I am in year undefined.

To correctly use the "this" keyword in this scenario, we would use a regular function instead of an arrow function.

const student = {
  name: 'Grace',
  age: 12,
  year: 2,
  studentProfile: function() {
    setTimeout(() => {
      console.log(Hi, my name is ${this.name} and I am in year ${this.year}.);
    }, 1000);
  }
};

student.studentProfile();

In this example, the studentProfile function is defined as a regular function and we used a global object, setTimeout() with an arrow function as the callback. Therefore, the arrow function would inherit the "this" value from the surrounding studentProfile function. This would now correctly log :

Hi, my name is Grace and I am in year 2
Other features of Arrow functions.

Although arrow functions provide many benefits, they also have some features which could be considered limitations. These features could affect the way your function executes, so it's important to be aware of them before making use of arrow functions.

Calling arrow functions with the new keyword throws a TypeError. They also don't have access to the new.target keyword. Therefore they cannot be used as constructors.
Arrow functions do not have bindings to this, arguments, or super keywords. Hence, they do not work with object methods that require access to the object's properties through these keywords.
Arrow cannot be used to call parent class methods as they do not have access to the _super _keyword which is used for this purpose.
Arrow functions don't support the use of yield keyword within their body therefore they cannot be directly created as generator functions.

Conclusion
Arrow functions are especially useful for creating concise function expressions. However, it's best to use regular functions or other constructs when working with features that are not compatible with arrow functions. By understanding and applying the strengths and limitations of arrow functions, you can make choices that would help improve your code's functionality.

How to use Spread and Rest operators in JavaScript

Hyemiie — Thu, 06 Jul 2023 15:55:48 +0000

Table of Contents

Introduction
Prerequisites
Understanding Spread Operators
- How to make use of Spread Operators
  - Passing Array Elements as Function Parameters
  - Joining/Appending Iterables
  - Creating Duplicate Objects
Rest Operators
- How to use Rest operators in Array destructuring
How to identify rest and spread operators

Introduction

Spread and Rest operators are features of ES6 JavaScript that make it easier to access and manipulate elements in an array. Although they both have a similar syntax represented by the three dots (...), they have different functionalities and use cases.

In this article, we would look at the core usages of these operators and explore practical examples that highlight their applications in real-world scenarios. By the end, you will have a comprehensive understanding of how to use these operators effectively in your JavaScript code.

Prerequisites
To follow up with this article, you need to be familiar with some basic JavaScript concepts including

Variables and data types
Arrays and array manipulation
Objects and object properties
Functions and function parameters.

Spread Operators
A Spread operator is a feature that is used to access elements of iterable, such as arrays and objects, as individual elements.
Let's consider an example where we have a student named John who submitted his exam scores.

var JohnScores = [75, 88, 69, 57, 92];

To create a profile for John based on these scores, we would need to access each score and save it in his profile. Now, this is where spread operators come in handy…

var JohnScores = [75, 88, 69, 57, 92];


var John = {
  Name: 'John',
  Class: 'Grade1',
  Age: 19,
  Scores: [...JohnScores],
};


console.log(John)

By using the spread operator [...JohnScores], we include the elements of the array JohnScores as separate elements within the Scores property of the John object as shown in the console.

Object
Age: 19
Class: "Grade1"
Name: "John"
Scores: (5) [75, 88, 69, 57, 92]
[[Prototype]]: Object.

How to use Spread operators

1. Passing elements of an array as parameters

For example, let’s create a function that calculates the average of John’s scores.

var JohnScores = [75, 88, 69, 57, 92];

function average(Score1 , Score2 , Score3 , Score4 ,Score5){
 sum = Score1 + Score2 + Score3 + Score4 + Score5;
 avg = sum/5;
console.log(avg)
}

average(...JohnScores)


// OUTPUT WOULD BE 76.4

In the code snippet, we created a function that accepts five parameters and calculates the average of the parameters.
To calculate the average of John's scores, we invoke the average function and pass the individual scores using the Spread operator ...JohnScores. This will expand the array of elements and pass them as separate arguments to the average function.

In cases where the values in the array are more than the parameters mentioned in the function, the spread operator is only going to take the number required in the function and ignore the remaining elements.

2. Joining/Appending iterables .

Using the spread operator, we can easily merge iterables, and save their properties into a new object.
For example;

var JohnScores = [75, 88, 69, 58, 92];
var SubScores =[92, 78, 36];

var UpdatedScore =[...SubScores, ...JohnScores];
console.log(UpdatedScore)

In this example, we created another array called SubScores which stores the recent scores of the exams John wrote. We also merged the two arrays into a different array “Updated score” which would invoke

(8) [92, 78, 36, 75, 88, 69, 58, 92]

We can also add an array inside another array


var JohnScores = [75, 88, 69, 58, 92];
var SubScores = [92, 78, 36, ...JohnScores];


console.log(SubScores);

This would be the output on the console

(8) [92, 78, 36, 75, 88, 69, 58, 92]

PS: The result of the joins depends on the order in which you include the array. For instance
If we log the JohnScores before the Subscores it would change the order and vice versa.


 var JohnScores = [75, 88, 69, 57, 92];


  var SubScores = [...JohnScores, 92, 78, 36];
  console.log(SubScores);

  var SubScores2 = [92, 78, 36, ...JohnScores];
  console.log(SubScores2);

SubScores
(8) [75, 88, 69, 57, 92, 92, 78, 36] 
SubScores2
(8)[92, 78, 36, 75, 88, 69, 57, 92]

3. Creating duplicate Objects

var John = {
    Name: 'John',
    Class: 'Grade1',
    Age: 19,
    Scores: [...JohnScores],
  };

  var John2 = {...John}
  console.log(John)
  console.log(John2)

In the code snippet, we copied the object “John” using the spread operator into a new object “John2. Both John and John2 will have the same properties and values.

JOHN
{Name: 'John', Class: 'Grade1', Age: 19, Scores: Array(5)}
Age: 19
Class: "Grade1"
Name: "John"
Scores: (5) [75, 88, 69, 57, 92]
[[Prototype]]: Object

JOHN2
{Name: 'John', Class: 'Grade1', Age: 19, Scores: Array(5)}
Age: 19
Class: "Grade1"
Name: "John"
Scores: (5) [75, 88, 69, 57, 92]
[[Prototype]]: Object

This allows us to clone objects easily without manually copying each property.

Rest Operators
Unlike the spread operators, rest operators allow us to combine individual elements as arrays. In cases where you want to create a function with an unknown number of arguments, you can use the rest operator to collect the extra inputs as an array.

For example, let’s create a function that accepts the price of groceries and computes the sum. Now we don’t know the exact number of groceries the user intends to buy so we would need to use a rest operator.

function sum(...prices) {
    let total = 0;
    for (let price of prices) {
      total += price;
    }
    return total;
  }


  console.log(sum(200, 400, 300, 550));

// OUTPUT ON THE CONSOLE WOULD BE 1450

In the preceding code, we created a function that accepts an unlimited number of prices using the rest operator(...prices) and loops through each price to get the total.
The rest operator collects all the possible prices and stores them in an array. The function then uses the for statement to loop through each price and computes the sum.

Rest Operators in Array destructuring.

Array destructuring means collecting values from arrays, or properties from objects and storing them into distinct variables.
Rest operators can also be useful when you want to extract some elements from an array and store the remaining elements in a single variable. For example, we have an array that stores the names of a Student.

 let Names = [Daniel, George, Bassey];

From the preceding array, we see that the Student has three names, however, we can use the rest operator to take his first name and store the remaining names in another array.

let Names = ['Daniel', 'George', 'Bassey'];
const [firstName, ...otherNames] = Names;

console.log(otherNames);

When this is invoked on the console, it would only show the names stored in the sub-array

(2) ['George', 'Bassey']
0: "George"
1: "Bassey"
length: 2
[[Prototype]]: Array(0)

How to identify Spread and Rest operators.

From what we’ve learned, the spread and rest operators have the same (…) syntax so it might be quite confusing to differentiate them on a program. To resolve this you have to put this in mind.

Spread operators are typically used when you want to spread elements into a new array, function arguments, or object properties.
Rest operators are used to collect elements and condense them into one variable
Rest operators are typically used in the receiving location to capture multiple elements. For example, in function parameters or array destructuring.
The spread operator is typically used in the target location where elements are expected. For example, when creating a new array or object, or when passing arguments to a function.

DEV Community: Hyemiie

How to use the CSS "inset" Property to create styling effects.

Understanding the inset Property

How to use inset to position elements.

Using inset with position: absolute

Using inset with position: relative

How to use inset with box-shadow property.

Creating a Stylish Call to Action (CTA) Button using inset