DEV Community: Carmine Scarpitta

'is' vs '==' to Check if Two Elements are Equal in Python

Carmine Scarpitta — Tue, 12 Apr 2022 22:50:52 +0000

Python objects can be compared using two operators: == and is.

Examples

Compare x to None using is:

if x is None:
    print('Object x is None')

Compare x to the empty string '' using ==:

if x == '':
    print('x is an empty string')

Apparently the two operators is and == can be used interchangeably, but this is not the case.

Difference between `==` and `is`

== is a equality operator. It is used to check if two objects are equal or not.

is is an identity operator. It is used to check if two objects are actually the same object or not. In other words, it checks if the two objects share the same memory location.

When should we use 'is' and when '=='?

In general, if you are comparing an object to a sigleton like None, True or False you should always use is. There are some exceptions, but most of the time this is the case.

For all the other object types (e.g. strings and numbers), using is can lead to unexpected behavior. To compare these object types, you must always use ==.

Conclusions

Data Type	Compare using
None	`is`
bool	`is`
str	`==`
int	`==`
float	`==`
list	`==`
tuple	`==`
dict	`==`
bytes	`==`
dict	`==`

2 reasons to use extend() instead of append() in Python

Carmine Scarpitta — Sun, 10 Apr 2022 16:19:08 +0000

Whether you are a Python noob or an expert, you have surely heard of list. list is one of Python's built-in data types.

Creating an empty list in Python is very simple:

my_list = []

Once you have created an empty list, you can add items to it.

Python offers two methods for adding items to a list: append() and extend().

Understanding how these methods work is important to choose which one to use.

append()

append() adds an item to the end of the list. The item can be any Python object such as a number or a string.

The following example shows how to add the string 'hello' to the end of the my_list list.

my_list.append('hello')

After the append() operation, my_list will contain a single element:

['hello']

extend()

extend() adds all the items of an iterable to the end of a list. An iterable is a Python object capable of returning its members one at a time. Examples of iterables are lists, tuples and strings.

The following example adds several items to the end of the my_list list:

items = ['hello', 'world']
my_list.extend()

After the extend() operation my_list will contain two elements:

['hello', 'world']

Difference between `append()` and `extend()`

The main difference between append() and extend() is the number of items that can be added to the list. append() adds only a single item to the list. Instead, extend() can add all the items of an iterable to the list.

To add many items to a list using append(), we can define a loop, as shown in the following example:

items = ['hello', 'world']
for item in items:
    my_list.append(item)

The above for loop iterates on the list of items and adds all the items to my_list one by one. Basically for each iteration it adds an item of items to my_list.

Are `append()` and `extend()` equivalent?

Not exactly. There are two differences:

extend() makes the code more readable;
extend() is more efficient than append() (i.e. it requires less time to add the items to the list).

Why `extend()` is more efficient?

When we want to add items to the list, the Python interpreter needs to expand the list. In order to expand the list, it allocates new memory and copies the new items to the newly allocated memory. This is common to both append() and extend() operations.

What happens when we add several items to a list using append() in a loop?

items = ['hello', 'world']
for item in items:
    my_list.append(item)

In the above example, the Python interpreter iterates on each element of the items list. In each iteration, it allocates new memory in my_list. The size of the allocated memory is such as to contain an element of items.

First iteration: it allocates memory to store the 'hello' string and copies the 'hello' string to the newly allocated memory.

Second iteration: it allocates memory to store the 'world' string and copies the 'world' string to the newly allocated memory.

In conclusion, append() performs two allocate operations and two copy operations.

Now let's see what happens when we use extend() to add all the items to my_list:

items = ['hello', 'world']
my_list.extend(items)

In this case, the Python interpreter allocates new memory to store both 'hello' and 'world' strings in my_list.

So, extend() performs only one allocate operation.

Conclusion

Adding many items to a list using append() in a loop can require many allocate operations. In order to mitigate this inefficiency, Python developers implemented a over-allocation, which reduces the number of allocate operations required to append elements to a list. Over-allocation is out of scope for this post.

Allocation operations can be very costly.

extend() performs only one allocate operation, which results in an improved efficiency. Consequently, less time is required to add the items to the list.

In conclusion, you should always use extend() to add a set of items to a list.

That's all for this post. If you liked this post, follow me on dev.to and Twitter (@cscarpitta94) to get notified when I publish new posts. 😊

List vs Tuple - When To Use Each?

Carmine Scarpitta — Thu, 07 Apr 2022 18:16:47 +0000

In Python, lists and tuples are two built-in data types. Conceptually they are very similar, but there is some difference.

First, the lists are mutable. This means that once you have defined a list, you can modify it.

For example,

>>> l = ['a', 'b', 'c']
>>> l[1] = 'x'
>>> print(l)
['a', 'x', 'c']

You can modify the list without any problems.

On the contrary, tuples are immutable. After creating a tuple, you cannot modify it. If you try to modify a tuple you will get an error, as shown in the following example:

l = ('a', 'b', 'c')
l[1] = 'x'
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: 'tuple' object does not support item assignment

Tuples have an advantage over lists. They are more memory efficient and time efficient than the lists. This means that using a tuple to store a set of items will require less memory than using a list to store the same set of items. Also, creating a tuple requires less time than creating a list.

The following table summarizes the differences:

Lists	Tuples
Defined using square brackets	Defined using rounded brackets
✔️ Lists are mutable	❌ Tuples are immutable
❌ Use more memory	✔️ Use less memory
❌ Slower	✔️ Faster

Conclusions

Tuples are more memory and time efficient but cannot be modified.

Therefore, if you have data that don't need to be changed, you should use tuples. Instead, if you need to change data you are forced to use lists.

6 Ways To Create An Object In JavaScript

Carmine Scarpitta — Tue, 05 Apr 2022 21:36:24 +0000

What is an Object?

Objects are one of JavaScript's data types. An object can be seen as a collection of properties. A property is a name-value pair.

In other words, a JavaScript object is something very similar to a real-life object or entity.

Think a person. A person has different properties like the name or the age. Well... a person can be modeled as a JavaScript object.

There are many ways to create an object in JavaScript.

1. Object() Constructor

Use the Object() constructor to create an empty object.
Set the object's properties.

Example:

// Use the `Object()` constructor to create an empty object
var person = Object();

// Set the object's properties
person.name = "John Doe";
person.age = 42;

2. Create Method

Object.create() can be used to create an object from the prototype of another object.

Example:

var person = Object.create(Person)

3. Object Initializer

Write the curly brackets {}.
Put all properties (name: value pairs) inside the curly brackets.
Add commas to separate name: value pairs.

This is called Object literal (or Object initializer) and can be used to create an object.

Example:

var person = {
    name: "John Doe",
    age: 42
}

4. Constructor Function

Create a Constructor Function.
Use the 'new' keyword to create an object from the constructor function.

Example:

// Create a Constructor Function
function Person() {
    this.name = "John Doe";
    this.age = 42;
}

// Use the 'new' keyword to create an object from the constructor function
var person = new Person();

5. ES6 Class (only for JavaScript ES6)

Create a ES6 class containing a constructor method.
The constructor takes the property values of the object as arguments.

Example:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

var person = Person("John Doe", 42);

6. Singleton Object

A Singleton is an object that can be created only one time. An attempt to create a second object will return a reference to the first object.

Example:

var person = new function(){
    this.name = "John Doe";
    this.age = 42;
}

Conclusion

In this blog post we have shown 6 different ways to create an object in JavaScript. Every developer should be aware of these ways and choose the most appropriate way from time to time.

That's all for this post. If you liked this post, follow me on dev.to and Twitter (@cscarpitta94) to get notified when I publish new posts. 😊

Creating a Simple Weather App with Python and Flask

Carmine Scarpitta — Mon, 04 Apr 2022 00:21:15 +0000

Are you learning Python? Practicing Flask? And tired of the usual Hello World?

Well! Then this post is for you.

In this post we will build a weather app in Python using Flask.

Project Overview ☁️

Flask is a framework for building web applications with Python. We will develop a web application that provides the weather forecast for 5 days.

Flask makes the task of creating a web application relatively simple. Our weather app will require no more than 22 lines of Python code and 48 lines of HTML.

An example ☀️

We need a web server to host our application.

An example of how our app will work:

The user will open a browser and navigate to http://localhost:5000/forecast?city=London (like "Tell me the weather forecast for London").
The web server will receive the request and call our web app to retrieve the weather forecast.
Finally, the web server will send an HTML page containing the weather forecast back to the user.

The user will receive the HTML page and display the forecast for London in the browser.

There are many different web servers like NGINX or Apache HTTP Server. We will use the Flask's built-in server.

Accessing weather forecast ❄️

You may be wondering: where will our weather app get the forecast data from?

Well, there are many different weather services available. We will use OpenWeatherMap service. It supports different subscription plans. We will use the free plan that supports up to 60 calls/minute and 1,000,000 calls/month which are sufficient for the purpose of this tutorial.

Building the weather app ⚡

Prerequisites

Before starting to code, we need to install Flask. To install Flask, we open a terminal and execute the following command:

pip install flask

The installation requires few seconds.

Project Structure

We structure the project as follows:

.
├── static
│   └── icons
|       ├── 01d.png
|       ├── 01n.png
|       ├── 02d.png
|       └── ...
├── templates
│   └── index.html
├── weather.py
└── README.md

In weather.py we will put the Flask application.

The folder static/icons will contain all the icons used to represent the weather conditions. For example, we will have an icon for Clouds, another icon for Sunny, and so on.

templates is a folder containing a single file index.html. This HTML file only contains an empty table where we will put the weather data.

Sign up to OpenWeatherMap

Before moving on, we need to sign up to OpenWeatherMap.

Visit https://openweathermap.org/api and click on the Subscribe button under the 5 Day / 3 Hour Forecast section:

Click on Get API key and complete the registration:

Then, log into OpenWeatherMap website with your credentials and click on My API keys. Follow the instrutions to generate a new API key.

Implementing the Weather App

In weather.py we put the logic that receives user requests and provides weather forecast.

We need to create a function that retrieves the weather data from OpenWeatherMap API. This function is invoked when the user sends an HTTP GET request to our web app (for example http://localhost:5000/forecast?city=London) and returns an HTML page containing the weather forecast.

From flask package, we need to import the Flask class and other functions that we will use later:

from flask import Flask, render_template, request, abort, Response

Then we initialize the Flask application:

app = Flask(__name__)

We create a function called get_weather() that will be executed when the user sends an HTTP GET request to the weather app.

This function will extract the city name from the request of the user.
It will retrieve the weather for the requested city from OpenWeatherMap.
Finally, an HTML page containing the weather is returned to the user.

The browser of the user will show the HTML page received from the web server. This HTML page contains a table showing the weather conditions for the requested city.

Let's create the get_weather() function step by step.

We define a function get_weather() that takes no arguments:

@app.route('/forecast', methods=['GET'])
def get_weather():

@app.route('/forecast', methods=['GET']) is a decorator. It is a directive that routes the HTTP GET requests made to the http://localhost/forecast URL to the get_weather() function. In this way, when an user navigates to http://localhost/forecast our Flask web server will execute the get_weather() function.

We want that the user specifies the city as an argument of the HTTP GET request. Therefore, we expect that the HTTP request contains an argument named city. We can extract the city from the HTTP request as follows:

    city = request.args.get('city')

It is important to validate the parameters extracted from the HTTP request. In our case, city is a mandatory argument. We need to ensure that the user provided a city. If the request does not contain a city (i.e. city is None), we return a status code "400" (BAD REQUEST) and we provide a description that tells the user that the city argument is missing:

    if city is None:
        abort(400, 'Missing argument city')

If a city has been provided in the HTTP request, we prepare a request for OpenWeatherMap to get the weather forecast. The request will contain three parameters: q, appid and units.

q is the name of the city for which we want the forecasts. appid is your OpenWeatherMap API key.

    data = {}
    data['q'] = request.args.get('city')
    data['appid'] = 'XXXXXXXXX'
    data['units'] = 'metric'

We use urllib python library to perform the retrieve the forecast from OpenWeatherMap:

    url_values = urllib.parse.urlencode(data)
    url = 'http://api.openweathermap.org/data/2.5/forecast'
    full_url = url + '?' + url_values
    data = urllib.request.urlopen(full_url)

Finally, we use render_template to generate the HTML page containing the results. Basically render_template takes the template HTML file, fills it with the weather data received from OpenWeatherMap and return the generated HTML page to the user. Finally, the user will display the weather results in the browser:

    resp = Response(data)
    resp.status_code = 200
    return render_template('index.html', title='Weather App', data=json.loads(data.read().decode('utf8')))

HTML Template file

The HTML template file is reported below:

<html>
    <head>
        <title>{{ title }}</title>
        <style>
            table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            }

            td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
            }

            tr:nth-child(even) {
            background-color: #dddddd;
            }

            #weather {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Time</th>
                <th>Temperature</th>
                <th>Humidity</th>
                <th>Weather</th>
                <th>Wind</th>
            </tr>
            {% for item in data["list"] %}
                <tr>
                    <td>{{ item["dt_txt"] }}</td>
                    <td>{{ item["main"]["temp"] }}°C</td>
                    <td>{{ item["main"]["humidity"] }}%</td>
                    <td><div id="weather"><img src="/static/icons/{{ item["weather"][0]["icon"] }}.png"></img> {{ item["weather"][0]["main"] }}</div></td>
                    <td>{{ '%.2f' % (item["wind"]["speed"]*3.6) }} km/h ({{ item["wind"]["deg"] }} deg)</td>
                </tr>
            {% endfor %}
        </table>
    </body>
</html>

Here is the final result:

Conclusion

In this blog post we developed a simple weather app using Python and Flask. This is a great exercise for Python and Flask beginners.

If you like this post, consider following me on Twitter (https://twitter.com/cscarpitta94).

Credits for the images:
Weather icons created by iconixar - Flaticon

6 CSS Shorthand properties to improve your web application

Carmine Scarpitta — Sun, 22 Aug 2021 10:55:25 +0000

Why should I care shorthand properties? 🎈

CSS is a language used to describe how a web page should look like. With CSS we can set position, colors, fonts, layout of each element in an HTML page. 🌈

In this blog post, I will share some tips to improve your CSS code and the performance of your web app. ⚠️

🔥 🌞 🌴 🍄 🔥

There are several ways in which a CSS file can be optimized. One of the things you should care when writing your CSS code is to minimize the number of lines. 💥

There are several reasons to care about the number of code lines 😲:
👉 improve the code readability
👉 improve the loading speed of your web page
👉 improve the ranking in search engines (e.g. Google Search, Bing, ...), because ranking depends on the loading speed and optimization level of your application

🔥 🔥 🔥 🔥 🔥

An interesting tip to reduce the number of lines of code is the following:

Use CSS shorthand properties whenever possible

In this blog post I'll show you what shorthand properties are and how they can be used to optimize your CSS code.

Interested? Read on!!! 😊💻

What are shorthand properties?

Shorthand properties let you set the values of multiple other CSS properties simultaneously.

CSS supports a number of shorthand properties. In this blog post we will see the most used ones. ✈️

CSS Background Shorthand

Background property lets you set different background properties of an HTML element (e.g. a div) in a single line of CSS.

Background is a shorthand for:

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

So instead of having background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment defined for an HTML element, we can use a single property. 😍

Hmmm confused??? 😱 😕

A picture is worth a thousand words:

That's the trick. Thanks to background shorthand property, we have compressed 8 CSS lines into one line.

Now let's image a complex web application, with dozens of CSS files and thousands of lines per file. 😱

Definitely, this results in much smaller files, cleaner code and faster loading times for your web application. 😄

CSS Border Shorthand

The second shorthand property that I want to show you is called Border. Border shorthand is used to set the border of an HTML element.

It is a shorthand for:

border-width
border-style
border-color

Here is an example:

Three properties at one go. Not so bad!!! 😏 🔥

CSS Font Shorthand

Font shorthand is used to set the following font properties:

font-style
font-variant
font-weight
font-size/line-height
font-family

CSS Inset Shorthand

The Inset property has to do with the positioning of an HTML element. It is a shorthand for:

top
right
bottom
left

Simple and efficient! ☺️ 🌺

CSS Padding Shorthand

Padding is a way to add space around an element. More precisely it allows you to add space between the element and its border.

To completely set the padding of an HTML element, we need to set four values:

padding-top
padding-right
padding-bottom
padding-left

The meaning of these values is quite intuitive:

padding-top is the space between the element and the its border
padding-right is the space between the element and its right border
padding-bottom is the space between the element and its bottom border
padding-left is the space between the element and its left border

All these properties can be specified in a single declaration, using the padding shorthand. 🌻

The syntax is straightforward:

padding: <padding-top> <padding-right> <padding-bottom> <padding-left>

Here is an example:

CSS Margin Shorthand

Margin property is similar to padding. Margin is the space around the element, outside its borders.

To specify a margin you need to provide four different values:

margin-top is the space between the top border of the element and the other elements
margin-right is the space between the right border of the element and the other elements
margin-bottom is the space between the bottom border of the element and the other elements
margin-left is the space between the left border of the element and the other elements

The syntax is straightforward 🌹:

margin: <margin-top> <margin-right> <margin-bottom> <margin-left>

Here is an example:

Conclusion

We have come to an end. 🌼 I want to remark the following tip:

Use CSS shorthand properties whenever possible

because they help to reduce the lines of CSS code and improve readability.

Reducing the CSS file size will also improve the loading speed of our web pages, because the CSS file is smaller. This will also improve our ranking in search engine, because the search engine algorithms tend to reward the optimized web pages. 🌈 🚀

🔥 🔥 🔥 🔥 🔥

I hope I convinced you to care about lines of CSS code. 😜

If you liked this post, consider following me on Twitter @cscarpitta94 and on dev cscarpitta 😍

👋 🔥

Build a simple Pie Chart with HTML and CSS

Carmine Scarpitta — Sat, 14 Aug 2021 18:32:45 +0000

You can create a Pie Chart in HTML using a simple CSS function called conic-gradient.

First, we add a <div> element to our HTML page, which acts as a placeholder for our pie chart.

<div id="my-pie-chart"></div>

We need to provide a width and a height to the <div> element, which determine the size of our pie chart:

#my-pie-chart {
    height: 100px;
    width: 100px;
}

Then, we need to make our pie chart circle-shaped by setting the border-radius value to 50%:

#my-pie-chart {
  border-radius: 50%;
}

And finally we are ready to populate the pie chart with our data.

As an example, let's consider the world population data reported at the following link:
https://www.worldometers.info/geography/7-continents/
We want to show the population distribution per continent using our pie chart.

For each continent, we associate an arbitrary color and the population percentage taken from the above link. The data is summarized in the following table:

Continent	Color	Population
Asia	red	59.54%
Africa	orange	17.20%
Europe	yellow	9.59%
North America	green	7.60%
South America	blue	5.53%
Australia	black	0.55%
Antarctica	brown	0.00%

To apply these values to our pie chart, we need to partition it into 7 sectors, a sector for each continent. To create the sectors, we can use the conic-gradient CSS function. Each sector has a color, a start position and a stop position.

For example, Antarctica is represented by the brown color and has 0.00% of the world population. Therefore, we want a brown sector from 0.00% to 0.00%.
Then, we want to plot a black sector representing the Australia, which has 0.55% of the world population. This results in a black sector going from 0.00% to 0.55%.
Similarly, to represent the South America we want a blue sector going from 0.55% to 6.08% (= 0.55% + 5.53%).
And so on.

At the end we will have the following CSS background property:

#my-pie-chart {
  background: conic-gradient(brown 0.00%, black 0.00% 0.55%, blue 0.55% 6.08%, green 6.08% 13.68%, yellow 13.68% 23.27%, orange 23.27% 40.47%, red 40.47%);
}

🐛 That's all. Now we are able to create a pie chart in CSS.

DEV Community: Carmine Scarpitta

'is' vs '==' to Check if Two Elements are Equal in Python

Examples

Difference between == and is

When should we use 'is' and when '=='?

Conclusions

2 reasons to use extend() instead of append() in Python

append()

extend()

Difference between append() and extend()

Are append() and extend() equivalent?

Why extend() is more efficient?

Conclusion

List vs Tuple - When To Use Each?

Conclusions

6 Ways To Create An Object In JavaScript

What is an Object?

1. Object() Constructor

2. Create Method

3. Object Initializer

4. Constructor Function

5. ES6 Class (only for JavaScript ES6)

6. Singleton Object

Conclusion

Creating a Simple Weather App with Python and Flask

Project Overview ☁️

An example ☀️

Accessing weather forecast ❄️

Building the weather app ⚡

Prerequisites

Project Structure

Sign up to OpenWeatherMap

Implementing the Weather App

HTML Template file

Conclusion

6 CSS Shorthand properties to improve your web application

Why should I care shorthand properties? 🎈

What are shorthand properties?

CSS Background Shorthand

CSS Border Shorthand

CSS Font Shorthand

CSS Inset Shorthand

CSS Padding Shorthand

CSS Margin Shorthand

Conclusion

Build a simple Pie Chart with HTML and CSS

Difference between `==` and `is`

Difference between `append()` and `extend()`

Are `append()` and `extend()` equivalent?

Why `extend()` is more efficient?