Posted on Leave a comment

Database Engineer — Income and Opportunity

5/5 – (5 votes)

Before we learn about the money, let’s get this question out of the way:

What is a Database Engineer?

A database engineer is responsible for providing the data infrastructure of a company or organization. This involves designing, creating, installing, configuring, debugging, optimizing, securing, and managing databases. Database engineers can either work as employees or as freelancers remotely or onsite.

What Does a Database Engineer Do?

As already indicated, a database engineer is responsible for providing the data infrastructure of a company or organization.

In particular, a database engineer has many responsibilities, such as the following 15 most popular activities performed by a database engineer today:

  1. Creating a new database system.
  2. Finding a database system tailored to the needs of an organization.
  3. Designing the data models.
  4. Accessing the data with scripting languages including SQL-like syntax.
  5. Installing an existing database software system onsite.
  6. Configuring a database system.
  7. Optimizing a database management system for performance, speed, or reliability.
  8. Consulting management regarding data management issues.
  9. Keeping databases secure and providing proper access control to users.
  10. Monitoring and managing an existing database system to keep it running smoothly.
  11. Debugging potential bugs, errors, and security issues detected at runtime.
  12. Testing and deploying a database system on a public cloud infrastructure such as AWS.
  13. Handling distribution issues in the case of a distributed database management system.
  14. Ensuring budget adherence when running on a public cloud and estimating costs for private database solutions.
  15. Communicating and negotiating with salespeople (e.g., from Oracle).

These are only some of the most common activities frequently handled by database engineers.

Database Engineer vs Data Engineer

A database engineer is responsible for providing the data infrastructure of a company or organization. This involves designing, creating, installing, configuring, debugging, optimizing, securing, and managing databases. Database engineers can either work as employees or as freelancers remotely or onsite.

A data engineer prepares data to be used in data analytics and operations, essentially providing automated or semi-automated ways for data collection and creating pipelines that connect various data sources to database management systems such as the ones managed by a database engineer.

A data engineer focuses on filling data into a database system whereas a database engineer is focused on providing the database system in the first place. There are intersection points between data engineers and database engineers at the interface between data sources and data management.

Database Engineer vs Database Administrator

Database administrators perform a similar role to database engineers in that they are responsible for setting up, installing, configuring, securing, and managing a database management system.

The focus is more on the technical maintenance of existing systems than the theoretical development of new solutions.

But the lines between those two job descriptions are blurry and often overlap significantly.

Annual Income of Database Engineer (US)

How much does a Database Engineer make per year?

💬 Question: How much does a Database Engineer in the US make per year?

Figure: Average Income of a Database Engineer in the US by Source. [1]

The average annual income of a Database Engineer in the United States is between $72,536 and $135,000, with an average of $103,652 and a statistical median of $106,589 per year.

This data is based on our meta-study of ten (10) salary aggregators sources such as Glassdoor, ZipRecruiter, and PayScale.

Source Average Income
Glassdoor.com $91,541
ZipRecruiter.com $107,844
BuiltIn.com $120,961
Talent.com $135,000
Indeed.com $106,037
PayScale.com $88,419
SalaryExpert.com $107,141
Comparably.com $110,987
Zippia.com $96,058
Salary.com $72,536
Table: Average Income of a Database Engineer in the US by Source.

💡 Note: This is the most comprehensive salary meta-study of database engineer income in the world, to the best of my knowledge!

Let’s have a look at the hourly rate of Database Engineers next!

Hourly Rate

Database Engineers are well-paid on freelancing platforms such as Upwork or Fiverr.

If you decide to go the route as a freelance Database Developer, you can expect to make between $30 and $130 per hour on Upwork (source). Assuming an annual workload of 2000 hours, you can expect to make between $60,000 and $260,000 per year.

⚡ Note: Do you want to create your own thriving coding business online? Feel free to check out our freelance developer course — the world’s #1 best-selling freelance developer course that specifically shows you how to succeed on Upwork and Fiverr!

Industry Demand

But is there enough demand? Let’s have a look at Google trends to find out how interest evolves over time (source):

The interest in database engineering has remained relatively stable over the last two decades.

If you compare the interest with “database administration”, you can see that “database engineering” actually wins in relative importance (source):

Learning Path, Skills, and Education Requirements

Do you want to become a Database Endineer? Here’s a step-by-step learning path I’d propose to get started with Database :

Here you can already start with the first step — do it now! 🙂

You can find many additional computer science courses on the Finxter Computer Science Academy (flatrate model).

But don’t wait too long to acquire practical experience!

Even if you have little skills, it’s best to get started as a freelance developer and learn as you work on real projects for clients — earning income as you learn and gaining motivation through real-world feedback.

🚀 Tip: An excellent start to turbo-charge your freelancing career (earning more in less time) is our Finxter Freelancer Course. The goal of the course is to pay for itself!

You can find more job descriptions for coders, programmers, and computer scientists in our detailed overview guide:

The following statistic shows the self-reported income from 9,649 US-based professional developers (source).

💡 The average annual income of professional developers in the US is between $70,000 and $177,500 for various programming languages.

Question: What is your current total compensation (salary, bonuses, and perks, before taxes and deductions)? Please enter a whole number in the box below, without any punctuation. If you are paid hourly, please estimate an equivalent weekly, monthly, or yearly salary. (source)

The following statistic compares the self-reported income from 46,693 professional programmers as conducted by StackOverflow.

💡 The average annual income of professional developers worldwide (US and non-US) is between $33,000 and $95,000 for various programming languages.

Here’s a screenshot of a more detailed overview of each programming language considered in the report:

Here’s what different database professionals earn:

Here’s an overview of different cloud solutions experts:

Here’s what professionals in web frameworks earn:

There are many other interesting frameworks—that pay well!

Look at those tools:

Okay, but what do you need to do to get there? What are the skill requirements and qualifications to make you become a professional developer in the area you desire?

Let’s find out next!

General Qualifications of Professionals

StackOverflow performs an annual survey asking professionals, coders, developers, researchers, and engineers various questions about their background and job satisfaction on their website.

Interestingly, when aggregating the data of the developers’ educational background, a good three quarters have an academic background.

Here’s the question asked by StackOverflow (source):

Which of the following best describes the highest level of formal education that you’ve completed?

However, if you don’t have a formal degree, don’t fear! Many of the respondents with degrees don’t have a degree in their field—so it may not be of much value for their coding careers anyways.

Also, about one out of four don’t have a formal degree and still succeeds in their field! You certainly don’t need a degree if you’re committed to your own success!

Freelancing vs Employment Status

The percentage of freelance developers increases steadily. The fraction of freelance developers has already reached 11.21%!

This indicates that more and more work will be done in a more flexible work environment—and fewer and fewer companies and clients want to hire inflexible talent.

Here are the stats from the StackOverflow developer survey (source):

Do you want to become a professional freelance developer and earn some money on the side or as your primary source of income?

Resource: Check out our freelance developer course—it’s the best freelance developer course in the world with the highest student success rate in the industry!

Other Programming Languages Used by Professional Developers

The StackOverflow developer survey collected 58000 responses about the following question (source):

Which programming, scripting, and markup languages have you done extensive development work in over the past year, and which do you want to work in over the next year?

These are the languages you want to focus on when starting out as a coder:

And don’t worry—if you feel stuck or struggle with a nasty bug. We all go through it. Here’s what SO survey respondents and professional developers do when they’re stuck:

What do you do when you get stuck on a problem? Select all that apply. (source)

To get started with some of the fundamentals and industry concepts, feel free to check out these articles:

Where to Go From Here?

Enough theory. Let’s get some practice!

Coders get paid six figures and more because they can solve problems more effectively using machine intelligence and automation.

To become more successful in coding, solve more real problems for real people. That’s how you polish the skills you really need in practice. After all, what’s the use of learning theory that nobody ever needs?

You build high-value coding skills by working on practical coding projects!

Do you want to stop learning with toy projects and focus on practical code projects that earn you money and solve real problems for people?

🚀 If your answer is YES!, consider becoming a Python freelance developer! It’s the best way of approaching the task of improving your Python skills—even if you are a complete beginner.

If you just want to learn about the freelancing opportunity, feel free to watch my free webinar “How to Build Your High-Income Skill Python” and learn how I grew my coding business online and how you can, too—from the comfort of your own home.

Join the free webinar now!

References

[1] The figure was generated using the following code snippet:

import matplotlib.pyplot as plt
import numpy as np
import math data = [91541, 107844, 120961, 135000, 106037, 88419, 107141, 110987, 96058, 72536] labels = ['Glassdoor.com', 'ZipRecruiter.com', 'BuiltIn.com', 'Talent.com', 'Indeed.com', 'PayScale.com', 'SalaryExpert.com', 'Comparably.com', 'Zippia.com', 'Salary.com'] median = np.median(data)
average = np.average(data)
print(median, average)
n = len(data) plt.plot(range(n), [median] * n, color='black', label='Median: $' + str(int(median)))
plt.plot(range(n), [average] * n, '--', color='red', label='Average: $' + str(int(average)))
plt.bar(range(len(data)), data)
plt.xticks(range(len(data)), labels, rotation='vertical', position = (0,0.45), color='white', weight='bold')
plt.ylabel('Average Income ($)')
plt.title('Database Engineer Annual Income - by Finxter')
plt.legend()
plt.show()
Posted on Leave a comment

How to Assign the Result of exec() to a Python Variable?

5/5 – (1 vote)

💬 Question: Say you have an expression you want to execute using the exec() function. How to store the result of the expression in a Python variable my_result?

Before I show you the solution, let’s quickly recap the exec() function:

Recap Python exec()

Python’s exec() function executes the Python code you pass as a string or executable object argument.

This is called dynamic execution because, in contrast to normal static Python code, you can generate code and execute it at runtime.

This way, you can run programmatically-created Python code.

Related Tutorial: Python’s exec() built-in function

Without further ado, let’s learn how you can store the result of the exec() function in a Python variable:

Method 1: Define Variable in String Representation of Code

You can define a variable inside the exec() function that will then be added to the global namespace. Thus, you can access the defined variable in your code after the termination of the exec() expression!

Here’s how that works in a minimal example:

exec('my_result = 40 + 2')
print(my_result)
# 42

Variable my_result is only defined in the string expression passed into exec(). You can use it in the code like it was part of the original source code.

Method 2: How to Replace Value of a Variable in exec()

To replace a variable defined outside the exec() function call, you can simply do so using an f-string and pass the new value as the right-hand side of the assignment operator within the string representation of the code to be executed.

Here’s a minimal example where we overwrite the old_variable with the new string 'hello finxter' by using the expression:

exec(f'old_variable = "{new_string}"')

old_variable = 'hello world'
new_string = 'hello finxter' # Replace old_old variable with new string 'hello finxter'
exec(f'old_variable = "{new_string}"') print(old_variable)
# hello finxter

Method 3: How to Replace Global Variable in exec()?

If you use the previous approach to replace a global variable defined outside the exec() expression that is called in a local context, the assignment operator will work on a local alias variable.

The global variable to be replaced will remain the same!

This can be seen in the following code example, where the global old_variable is not replaced with the new string 'hello finxter' because of the local scope of the function f that creates its own namespace with its own old_variable that overshadows the global old_variable.

old_variable = 'hello world'
new_string = 'hello finxter' def f(): # Replace old_old variable with new string 'hello finxter' exec(f'old_variable = "{new_string}"') f() print(old_variable)
# hello world

To overwrite a global variable within the exec() function, use the global keyword, followed by an empty space, the name of the global variable, a semicolon ; to close the statement, and the expression to overwrite the global variable like so: exec(f'global old_variable; old_variable = "{new_string}"')

Here’s the full example:

old_variable = 'hello world'
new_string = 'hello finxter' def f(): # Replace old_old variable with new string 'hello finxter' exec(f'global old_variable; old_variable = "{new_string}"') f() print(old_variable)
# hello finxter

Related tutorial:

Method 4: Redirect Standard Output

Okay, let’s do something crazy, shall we? 🤯

Let’s redirect the standard output and print directly to the variable!

This method assumes you have a print() statement within the expression passed into the exec() function such as shown in the following three examples:

  • exec('print(2+2)')
  • exec('print([1, 2, 3, 4] + [5, 6])')
  • exec('print(2+2*0)')

To get the output and store it in a variable my_result, you need to temporarily redirect the standard output to the variable.

The following code shows you how to accomplish exactly this:

# Step 1: Import libraries StringIO and sys
from io import StringIO
import sys # Step 2: Keep stdout in temporary variable
tmp = sys.stdout # Step 3: Capture standard output using a StringIO object
my_result = StringIO() # Step 4: Assign Standard Output Stream to StringIO object
sys.stdout = my_result # Step 5: Print to the standard output
expression = 'print(2+2)' # any exec() expression here
exec(expression) # Step 6: Clean up by redirecting stdout to Python shell
sys.stdout = tmp # Step 7: Get and print the string from stdout
print('VARIABLE:', my_result.getvalue())
# VARIABLE: 4

If you need some assistance understanding this whole idea of redirecting the standard output, have a look at our in-depth guide on the Finxter blog.

👀 Related Article: 7 Easy Steps to Redirect Your Standard Output to a Variable (Python)

Note that this approach even works if you don’t have a print() statement in the original exec() expression because you can always artificially add the print() statement around the original expression like so:

  • exec('2+2') becomes exec('print(2+2)')
  • exec('2+2*0') becomes exec('print(2+2*0)')
  • exec('[1, 2, 3] + [4, 5]') becomes exec('print([1, 2, 3] + [4, 5])')

Even if it’s a bit clunky, after applying this short trick, you can redirect the standard output and store the result of any exec() expression in a variable.

👀 Related Article: How to Assign the Result of eval() to a Python Variable?

Where to Go From Here?

Enough theory. Let’s get some practice!

Coders get paid six figures and more because they can solve problems more effectively using machine intelligence and automation.

To become more successful in coding, solve more real problems for real people. That’s how you polish the skills you really need in practice. After all, what’s the use of learning theory that nobody ever needs?

You build high-value coding skills by working on practical coding projects!

Do you want to stop learning with toy projects and focus on practical code projects that earn you money and solve real problems for people?

🚀 If your answer is YES!, consider becoming a Python freelance developer! It’s the best way of approaching the task of improving your Python skills—even if you are a complete beginner.

If you just want to learn about the freelancing opportunity, feel free to watch my free webinar “How to Build Your High-Income Skill Python” and learn how I grew my coding business online and how you can, too—from the comfort of your own home.

Join the free webinar now!

Posted on Leave a comment

Create JavaScript Shopping Cart with Add to Cart Code

by Vincy. Last modified on May 16th, 2022.

Do you want a shopping cart built entirely in JavaScript? With session / storage everything! With no PHP or server-side code, then read on and rock on.

Earlier I have written a lot of PHP shopping cart code using server-side sessions. Now let us see a similar concept on the client-side to build a JavaScript shopping cart.

The Window.sessionStorage is the right solution to create a session-based shopping cart. It is free from PHP or other server-side code, unlike previous eCommerce examples.

What is sessionStorage?

The sessionStorage is one of the standard JavaScript concepts of WebStorage API. It is a client-side session object that tends to set, get and clear data with respect to it. This object’s persistence is based on the browser’s session availability.

How to build a JavaScript shopping cart using sessionStorage?

The JavaScript shopping cart implementation is possible with sessionStorage like as below. The below table shows the mapping of sessionStorage capability with shopping cart features.

  • setItem() – Add to cart from the shopping gallery by referring to the purchased product id. It also is used to edit a cart item by replacing the value array.
  • getItem() – Read and display the cart items by iterating the sessionStorage object array.
  • removeItem() – Remove a single item from the cart by specifying the item index.
  • clear() – Empty the cart by unsetting the sessionStorage instance.

Shopping cart – checkout – payment

This section shows the execution flow of the JavaScript shopping cart code. It covers “add to cart” to check out and to the payment step.

  • Step 1: On “add to cart” action the sessionStorage object builds the purchased item array.
  • Step 2: Then, it gets the buyer’s payment details on a checkout form.
  • Step 3: Can renders payment options like PayPal with the request parameter array. This array contains purchased items and the buyer’s payment details.
  • Step 4: An alternate to step 3, that is, an email checkout. This suits the shopping cart not dealing with instant payment on the flow.

In this tutorial, we will see steps 1 and 2 of a JavaScript shopping cart. You can integrate with the payment options coded with different articles. Example: Integrate PayPal checkout into the eCommerce website.

JavaScript shopping cart example

This example provides bare minimal features of a Javascript shopping cart. It supports performing the “add to cart” and “clear cart” functionalities via JavaScript.

This code also builds and supplies product gallery HTML from JavaScript.

It is a jQuery-based client-side implementation with the use of JavaScript sessionStorage.

HTML code to display shopping cart UI

This HTML code has placeholders to load UI for the following from JavaScript.

When this document is ready, a JavaScript code prepares HTML for the product grid.

In the product grid, it contains inputs to select a quantity and post to perform the “add to cart” operation.

The cart.js handles the client-side code to perform the shopping cart operations. It will be included in this template.


<div class="container"> <!-- Shopping cart table wrapper --> <div id="shopping-cart"> <div class="txt-heading"> <h1>Shopping cart</h1> </div> <a onClick="emptyCart()" id="btnEmpty">Empty Cart</a> <table class="tbl-cart" cellpadding="10" cellspacing="1"> <thead> <tr> <th>Name</th> <th class='text-right' width="10%">Unit Price</th> <th class='text-right' width="5%">Quantity</th> <th class='text-right' width="10%">Sub Total</th> </tr> </thead> <!-- Cart table to load data on "add to cart" action --> <tbody id="cartTableBody"> </tbody> <tfoot> <tr> <td class="text-right">Total:</td> <td id="itemCount" class="text-right" colspan="2"></td> <td id="totalAmount" class="text-right"></td> </tr> </tfoot> </table> </div> <!-- Product gallery shell to load HTML from JavaScript code --> <div id="product-grid"> <div class="txt-heading"> <h1>Products</h1> </div> <div id="product-item-container"></div> </div> </div>

Client-side code to perform JavaScript shopping cart actions

This script performs the following.

  1. Load product gallery from JSON data.
  2. “Add to cart” action to move a product into the cart table.
  3. Load and change the shopping cart status on each cart action.
  4. Update total cart items and total price on each change.
  5. Empty the cart by clearing the session.

Load product gallery from JSON data

The productItem contains the product JSON data. It contains a row of product data with name, price and photo path.

The showProductGallery method iterates this productItem JSON and builds the product gallery HTML.

In this gallery, each product tile contains the option “add to cart”. It moves the selected product to the cart session by clicking the “Add to cart” button.

The JavaScript code uses for each loop to iterate theproductItem JSON.


$(document).ready(function() { var productItem = [{ productName: "FinePix Pro2 3D Camera", price: "1800.00", photo: "camera.jpg" }, { productName: "EXP Portable Hard Drive", price: "800.00", photo: "external-hard-drive.jpg" }, { productName: "Luxury Ultra thin Wrist Watch", price: "500.00", photo: "laptop.jpg" }, { productName: "XP 1155 Intel Core Laptop", price: "1000.00", photo: "watch.jpg" }]; showProductGallery(productItem);
}); function showProductGallery(product) { //Iterate javascript shopping cart array var productHTML = ""; product.forEach(function(item) { productHTML += '<div class="product-item">'+ '<img src="product-images/' + item.photo + '">'+ '<div class="productname">' + item.productName + '</div>'+ '<div class="price">$<span>' + item.price + '</span></div>'+ '<div class="cart-action">'+ '<input type="text" class="product-quantity" name="quantity" value="1" size="2" />'+ '<input type="submit" value="Add to Cart" class="add-to-cart" onClick="addToCart(this)" />'+ '</div>'+ '</div>'; "<tr>"; }); $('#product-item-container').html(productHTML);
} 

“Add to cart” action to move a product into the cart table

This “add to cart” JavaScript handler is a core functionality of the example. This code initiates the JavaScript sessionStorage object.

On clicking the “Add to cart” button on the product tile, this function is invoked.

It reads the product details from the product grid where the clicked “Add to cart” is placed. For example, it gets the product name, quantity and other details.

Using these details, this code prepares the JSON instance of the cart item row. Then, it appends the newly added items to the existing cart sessionStorage object.


function addToCart(element) { var productParent = $(element).closest('div.product-item'); var price = $(productParent).find('.price span').text(); var productName = $(productParent).find('.productname').text(); var quantity = $(productParent).find('.product-quantity').val(); var cartItem = { productName: productName, price: price, quantity: quantity }; var cartItemJSON = JSON.stringify(cartItem); var cartArray = new Array(); // If javascript shopping cart session is not empty if (sessionStorage.getItem('shopping-cart')) { cartArray = JSON.parse(sessionStorage.getItem('shopping-cart')); } cartArray.push(cartItemJSON); var cartJSON = JSON.stringify(cartArray); sessionStorage.setItem('shopping-cart', cartJSON); showCartTable();
}

Empty the cart by clearing the session

This JavaScript shopping cart code contains an option to empty the cart table.

It explicitly clears the sessionStorage instance created to have the cart items.

At the end of both “Add to cart” and the “clear cart” actions, the cart table UI is rebuilt with the latest session data.

The showCartTable function is called for updating the cart table UI and the total count.


function emptyCart() { if (sessionStorage.getItem('shopping-cart')) { // Clear JavaScript sessionStorage by index sessionStorage.removeItem('shopping-cart'); showCartTable(); }
}

Load cart row, item count, the total amount from sessionStorage object

This code displays the logic of showCartTable() to rebuild cart HTML and update UI.

It initiates variables to hold the following data. These are used in the JavaScript shopping cart code.

  • Cart table HTML.
  • A total number of items added to the cart.
  • A total amount of the purchased cart items.

It checks cart sessionStorage and iterates the array if exists. During the iteration, it builds the cart table HTML and computes the total count and price.

The cart sessionStorage data is pushed to the UI via this JavaScript function. It reflects the latest cart state to the end-users.


function showCartTable() { var cartRowHTML = ""; var itemCount = 0; var grandTotal = 0; var price = 0; var quantity = 0; var subTotal = 0; if (sessionStorage.getItem('shopping-cart')) { var shoppingCart = JSON.parse(sessionStorage.getItem('shopping-cart')); itemCount = shoppingCart.length; //Iterate javascript shopping cart array shoppingCart.forEach(function(item) { var cartItem = JSON.parse(item); price = parseFloat(cartItem.price); quantity = parseInt(cartItem.quantity); subTotal = price * quantity cartRowHTML += "<tr>" + "<td>" + cartItem.productName + "</td>" + "<td class='text-right'>$" + price.toFixed(2) + "</td>" + "<td class='text-right'>" + quantity + "</td>" + "<td class='text-right'>$" + subTotal.toFixed(2) + "</td>" + "</tr>"; grandTotal += subTotal; }); } $('#cartTableBody').html(cartRowHTML); $('#itemCount').text(itemCount); $('#totalAmount').text("$" + grandTotal.toFixed(2));
}

JavaScript shopping cart output screenshot

The output will be familiar to whom already have seen my older shopping cart code created in PHP.

It is designed as a single-page shopping cart solution. It shows both the gallery and cart on the same page.

javascript shopping cart output

Persistent JavaScript shopping cart with localStorage instance

The WebStorage API’s sessionStorage will be expired when the browser is closed. This API provides one more storage object which is localStorage.

The localStorage object is similar to sessionStorage. The only difference is that the localStorage keeps data until explicit action.

So, this concept helps to have a persistent cart. That is to retain the customers’ cart items even if they closed the browser.

The source code uses sessionStorage for this JavaScript shopping cart code. Include the following file instead of cart.js if you want to use the localStorage object.

cart-local-storage.js


$(document).ready(function() { var productItem = [{ productName: "FinePix Pro2 3D Camera", price: "1800.00", photo: "camera.jpg" }, { productName: "EXP Portable Hard Drive", price: "800.00", photo: "external-hard-drive.jpg" }, { productName: "Luxury Ultra thin Wrist Watch", price: "500.00", photo: "laptop.jpg" }, { productName: "XP 1155 Intel Core Laptop", price: "1000.00", photo: "watch.jpg" }]; showProductGallery(productItem); showCartTable();
}); function addToCart(element) { var productParent = $(element).closest('div.product-item'); var price = $(productParent).find('.price span').text(); var productName = $(productParent).find('.productname').text(); var quantity = $(productParent).find('.product-quantity').val(); var cartItem = { productName: productName, price: price, quantity: quantity }; var cartItemJSON = JSON.stringify(cartItem); var cartArray = new Array(); // If javascript shopping cart session is not empty if (localStorage.getItem('shopping-cart')) { cartArray = JSON.parse(localStorage.getItem('shopping-cart')); } cartArray.push(cartItemJSON); var cartJSON = JSON.stringify(cartArray); localStorage.setItem('shopping-cart', cartJSON); showCartTable();
} function emptyCart() { if (localStorage.getItem('shopping-cart')) { // Clear JavaScript localStorage by index localStorage.removeItem('shopping-cart'); showCartTable(); }
} function removeCartItem(index) { if (localStorage.getItem('shopping-cart')) { var shoppingCart = JSON.parse(localStorage.getItem('shopping-cart')); localStorage.removeItem(shoppingCart[index]); showCartTable(); }
} function showCartTable() { var cartRowHTML = ""; var itemCount = 0; var grandTotal = 0; var price = 0; var quantity = 0; var subTotal = 0; if (localStorage.getItem('shopping-cart')) { var shoppingCart = JSON.parse(localStorage.getItem('shopping-cart')); itemCount = shoppingCart.length; //Iterate javascript shopping cart array shoppingCart.forEach(function(item) { var cartItem = JSON.parse(item); price = parseFloat(cartItem.price); quantity = parseInt(cartItem.quantity); subTotal = price * quantity cartRowHTML += "<tr>" + "<td>" + cartItem.productName + "</td>" + "<td class='text-right'>$" + price.toFixed(2) + "</td>" + "<td class='text-right'>" + quantity + "</td>" + "<td class='text-right'>$" + subTotal.toFixed(2) + "</td>" + "</tr>"; grandTotal += subTotal; }); } $('#cartTableBody').html(cartRowHTML); $('#itemCount').text(itemCount); $('#totalAmount').text("$" + grandTotal.toFixed(2));
} function showProductGallery(product) { //Iterate javascript shopping cart array var productHTML = ""; product.forEach(function(item) { productHTML += '<div class="product-item">'+ '<img src="product-images/' + item.photo + '">'+ '<div class="productname">' + item.productName + '</div>'+ '<div class="price">$<span>' + item.price + '</span></div>'+ '<div class="cart-action">'+ '<input type="text" class="product-quantity" name="quantity" value="1" size="2" />'+ '<input type="submit" value="Add to Cart" class="add-to-cart" onClick="addToCart(this)" />'+ '</div>'+ '</div>'; "<tr>"; }); $('#product-item-container').html(productHTML);
} 

Security caution

Until the “add to cart” step, the client-side handling is fine. When proceeding with checkout, it is preferable to use server-side middleware.

It is for safety purposes to handle security loopholes. It will do the sanitization, validation of data authenticity and more verification process.

Conclusion

So, we have created a JavaScript shopping cart code using the sessionStorage object. And also, we saw one more option to add the cart item persistency with the localStorage object.

The client-side shopping cart implementation is not a complete solution. But, it has the advantages of minimalism. It will suit the thin static cart available online.

It is suitable for the shops having client-side integrations connected with hosted services.
Download

↑ Back to Top

Posted on Leave a comment

How to Assign the Result of eval() to a Python Variable?

5/5 – (1 vote)

💬 Question: Say you have an expression you want to execute using the eval() function. How to store the result of the expression in a Python variable my_result?

Before I show you the solution, let’s quickly recap the eval() function:

Recap Python eval()

Python eval(s) parses the string argument s into a Python expression, runs it, and returns the result of the expression.

Related Tutorial: Python’s eval() built-in function

Without further ado, let’s learn how you can store the result of the eval() function in a Python variable:

Method 1: Simple Assignment

The most straightforward way to store the result of an eval() expression in a Python variable is to assign the whole return value to the variable. For example, the expression my_result = eval('2+2') stores the result 4 in the variable my_result.

Here’s a minimal example:

my_result = eval('2+2')
print(my_result)
# 4

This simple approach may not always work, for example, if you have a print() statement in the expression.

Read on to learn how to fix this issue next and learn something new!

Method 2: Redirect Standard Output

This method assumes you have a print() statement within the expression passed into the eval() function such as shown in the following three examples:

  • eval('print(2+2)')
  • eval('print([1, 2, 3, 4] + [5, 6])')
  • eval('print(2+2*0)')

To get the output and store it in a variable my_result, you need to temporarily redirect the standard output to the variable.

The following code shows you how to accomplish exactly this:

# Step 1: Import libraries StringIO and sys
from io import StringIO
import sys # Step 2: Keep stdout in temporary variable
tmp = sys.stdout # Step 3: Capture standard output using a StringIO object
my_result = StringIO() # Step 4: Assign Standard Output Stream to StringIO object
sys.stdout = my_result # Step 5: Print to the standard output
expression = 'print(2+2)' # any eval() expression here
eval(expression) # Step 6: Clean up by redirecting stdout to Python shell
sys.stdout = tmp # Step 7: Get and print the string from stdout
print('VARIABLE:', my_result.getvalue())
# hello world

If you need some assistance understanding this whole idea of redirecting the standard output, have a look at our in-depth guide on the Finxter blog.

👀 Related Article: 7 Easy Steps to Redirect Your Standard Output to a Variable (Python)

Note that this approach even works if you don’t have a print() statement in the original eval() expression because you can always artificially add the print() statement around the original expression like so:

  • eval('2+2') becomes eval('print(2+2)')
  • eval('2+2*0') becomes eval('print(2+2*0)')
  • eval('[1, 2, 3] + [4, 5]') becomes eval('print([1, 2, 3] + [4, 5])')

Even if it’s a bit clunky, after applying this short trick, you can redirect the standard output and store the result of any eval() expression in a variable.

Method 3: Use exec()

Using only Python’s eval() function, you cannot define variables inside the expression to be evaluated. However, you can define a variable inside the exec() function that will then be added to the global namespace. Thus, you can access the defined variable in your code after termination of the exec() expression!

Here’s how that works in a minimal example:

exec('my_result = 40 + 2')
print(my_result)
# 42

Variable my_result is only defined in the string expression passed into exec(), but you can use it in the code like it was part of the original source code.

Recap exec() vs eval()

Python’s exec() function takes a Python program, as a string or executable object, and runs it. The eval() function evaluates an expression and returns the result of this expression. There are two main differences:

  • exec() can execute all Python source code, whereas eval() can only evaluate expressions.
  • exec() always returns None, whereas eval() returns the result of the evaluated expression.
  • exec() can import modules, whereas eval() cannot.

You can learn more about the exec() function here:

Where to Go From Here?

Enough theory. Let’s get some practice!

Coders get paid six figures and more because they can solve problems more effectively using machine intelligence and automation.

To become more successful in coding, solve more real problems for real people. That’s how you polish the skills you really need in practice. After all, what’s the use of learning theory that nobody ever needs?

You build high-value coding skills by working on practical coding projects!

Do you want to stop learning with toy projects and focus on practical code projects that earn you money and solve real problems for people?

🚀 If your answer is YES!, consider becoming a Python freelance developer! It’s the best way of approaching the task of improving your Python skills—even if you are a complete beginner.

If you just want to learn about the freelancing opportunity, feel free to watch my free webinar “How to Build Your High-Income Skill Python” and learn how I grew my coding business online and how you can, too—from the comfort of your own home.

Join the free webinar now!

Posted on Leave a comment

7 Easy Steps to Redirect Your Standard Output to a Variable (Python)

5/5 – (1 vote)

💬 Question: How to redirect the standard output in Python and store it as a string in a variable?

This article will guide you through seven easy steps to solve this problem. As an overview, here’s the code in eight lines that stores the standard output in a variable my_result:

  1. from io import StringIO
  2. import sys
  3. tmp = sys.stdout
  4. my_result = StringIO()
  5. sys.stdout = my_result
  6. print('hello world') # output stored in my_result
  7. sys.stdout = tmp
  8. print(result.getvalue())

Let’s go over those steps one by one—we’ll examine the full code for copy&paste at the end of this article, so read on! 👀

Step 1: Import libraries StringIO and sys

Import the two libraries StringIO and sys to access the standard output and store the string input-output stream.

from io import StringIO import sys

Both modules are part of the standard library, so there is no need to install them with pip!

Step 2: Keep stdout in temporary variable

We’ll overwrite the standard output to catch everything written to it. In order to reset your code to the normal state, we need to capture the original standard output stream by introducing a temporary variable.

tmp = sys.stdout

Step 3: Capture standard output using a StringIO object

Create a variable and assign a StringIO object to the variable to capture the standard output stream.

my_result = StringIO()

Now, this object can store everything printed to the standard output. But we have to connect it first to the stdout!

Step 4: Assign Standard Output Stream to StringIO object

Assign the StringIO object created in the previous step to the standard output that is captured with sys.stdout.

sys.stdout = my_result

Step 5: Print to the standard output

From this point onwards, anything that is printed using the print() statement by any function you call in your Python script is written in the StringIO object referred to by variable my_result.

The following exemplifies the print('hello world') statement but you can do anything here:

print('hello world')

💡 Note: No output appears on the screen anymore because the standard output is now redirected to the variable.

Step 6: Clean up by redirecting stdout to Python shell

Are you ready with capturing the output in the variable? Clean up by redirecting the standard output stream from the variable to the screen again.

sys.stdout = tmp

Step 7: Get and print the string from stdout

At this point, your string from the standard output is stored in the StringIO object in the my_result variable. You can access it using the StringIO.getvalue() method.

print(result.getvalue())

Full Code

Here’s the full code snippet for ease of copy&paste:

# Step 1
from io import StringIO
import sys # Step 2
tmp = sys.stdout # Step 3
my_result = StringIO() # Step 4
sys.stdout = my_result # Step 5
print('hello world') # Step 6
sys.stdout = tmp # Step 7
print('VARIABLE:', my_result.getvalue())
# hello world

You can also check this out on our interactive Jupyter notebook so you don’t have to try in your own shell:

🧩 Try it yourself: Click to run in Jupyter Notebook (Google Colab)

References:

Are you ready to up your Python skills? Join our free email academy — we’ve cheat sheets too! 🙂

Posted on Leave a comment

How to Get the Size of an Image with PIL in Python

Rate this post

Problem Formulation

Given an image, how to get the size of the image with PIL or any other Python library?

Getting the size of an image with Python PIL(Python Image Library) basically implies that you want to get its height and width in pixels.

Example: Consider the following image:

🔥Challenge: Get the size of the above image with PIL or any other Python library.

Method 1: Using img.size

Approach: To get the size of the image:
➢ open it up by calling the PIL function Image.open('image file path').
➢ Then use the PIL property image.size on the opened image. This returns a tuple containing the width and height of the image in pixels.
➢ Unpack the tuple in two different variables to store the width and height individually.

code:

from PIL import Image
img = Image.open("image.jpg")
width, height = img.size
print(f'width: {width}\nheight: {height}')

Output:

width: 640
height: 426

#Alternative Formulation

Instead of using the img.size property, you can use the img.width and img.height properties to store/display the height and width of the image separately.

Here’s the code that demonstrates how you can use the width and height properties of the PIL library.

from PIL import Image
img = Image.open("image.jpg")
width = img.width
height = img.height
print(f'width: {width}\nheight: {height}')

Output:

width: 640
height: 426

🗨TRIVIA: PIL(Python Imaging Library) is a Python library that is used for image processing. It supports numerous image formats which include “jpeg”, “png”, “ppm”, “tiff”, “bmp”, “gif”, etc. It is an extremely useful library that provides a plethora of image editing capabilities like getting the size of an image, cropping an image, etc. The Image module of the PIL library is used to represent the PIL images. 

  • To install the PIL, execute the following command in your terminal: pip install pillow

Method 2: Get Image Size Using Open-CV

Approach: To get the size of an image using OpenCV:
➢ Load the image from the specified path by calling OpenCV function imread('file_path').
➢ Use the .shape property on this image. This returns a tuple consisting of the height, width in pixels, and the number of channels of the image.
➢ Unpack these values individually in three different variables and display the output accordingly.

Code:

import cv2
image = cv2.imread('image.jpg')
height, width, channel = image.shape
print(f"width:{width}\nheight:{height}")

Output:

width: 640
height: 426

✏Note: Use the following command to install OpenCV: pip install opencv-python

Method 3: Get the Image Size Using Pygame

  • Approach:
    • Load the image from its path using the pygame function pygame.image.load('filepath').
    • Use the methods img.get_width() and img.get_height() to get the image width and height in pixels.

Code:

import pygame
img = pygame.image.load('image.jpg')
width = img.get_width()
height = img.get_height()
print("width: ", width)
print("height: ", height)

Output:

pygame 2.1.2 (SDL 2.0.18, Python 3.9.10)
Hello from the pygame community. https://www.pygame.org/contribute.html
width: 640
height: 426

🗨TRIVIA: pygame is a Python wrapper for the SDL library (Simple DirectMedia Layer). SDL allows cross-platform access to the system’s underlying multimedia hardware components, such as video, sound, keyboard, mouse, and joystick. Since both SDL and pygame facilitate us with a cross-platform nature, we can write game programs and create rich multimedia Python programs for almost every platform that is supported by them.

To install pygame, use the following pip command on your terminal: pip install pygame

▣ How to Get Image Size in Bytes?

Previously, we found out the size of the image, that is, the image dimensions (width and height). However, you may also need to find out the file size in bytes to decide how to use the image file. Hence, let us dive into the methods that will help us to find the image size in bytes.

Using os.stat

Approach: Call the os.stat() method on the image file and then use the st_size property upon this image to get its size in bytes.

Code:

import os
print(os.stat('image.jpg').st_size) # 48297

◩ Using os.path.getsize

Approach: os.path.getsize() is a method of the os module that is used to get the size of a specified path. Pass the image path to this function to get the size of the image file in bytes.

Code:

import os
print(os.path.getsize('image.jpg')) # 48297

◩ Using PIL

Approach: Call the PIL function Image.open() to open the image and then use the len() method to find its length after reading the image.

Code:

from PIL import Image
img = Image.open('image.jpg')
print("File Size In Bytes:- "+str(len(img.fp.read())))

🎁Bonus: Get the Size of an Image by Loading Image from an URL

The following code demonstrates how you can load an image from an URL and then get its size.

Code:

import requests
from PIL import Image
from io import BytesIO
header = {'User-Agent': 'Mozilla/5.0 (X11; CrOS x86_64 14588.98.0) AppleWebKit/537.36 (KHTML, like Gecko) ' 'Chrome/101.0.4951.59 Safari/537.36'}
res = requests.get("https://blog.finxter.com/wp-content/uploads/2022/05/sample_img.png", headers=header)
# create image from binary content
img = Image.open(BytesIO(res.content))
width, height = img.size
print(f'width:{width}, height:{height}')

Output:

width:867, height:489

Conclusion

We successfully unearthed the answer to numerous questions, including how to use different libraries to find the image size – dimensions as well as the size in bytes. I hope this tutorial helped you. Please subscribe and stay tuned for more interesting tutorials.

Happy learning!😊


  • One of the most sought-after skills on Fiverr and Upwork is web scraping. Make no mistake: extracting data programmatically from websites is a critical life skill in today’s world that’s shaped by the web and remote work.
  • So, do you want to master the art of web scraping using Python’s BeautifulSoup?
  • If the answer is yes – this course will take you from beginner to expert in Web Scraping.
Join the Web Scraping with BeautifulSoup Masterclass now, and master it by tomorrow!
Posted on Leave a comment

How to Print Underlined Text in Python?

4.5/5 – (2 votes)

You can change your text to bold, italic, and underlined in Python. Not only can you play around with the style of your code but also change its color with the help of specific packages and modules in Python.

Interesting! Isn’t it?

There are different ways of doing this. By the end of this tutorial, you will be equipped with all the instruments to play around with the style of your code.

Related Tutorials:

So, without further delay, let the games begin!

⚙ Problem Formulation: Given a string. How to print the string as underlined text in Python?

Method 1: Enclosing String in ANSI Escape Sequence \x1B[3m’ and \x1B[0m’

The most straightforward way to print underlined text in Python is to enclose a given string text in the special ANSI escape sequence like so: print("\x1B[4m" + text + "\x1B[0m").

Here’s a minimal example:

# Print Underlined Text
text = "abc"
underlined_text = "\x1B[4m" + text + "\x1B[0m"
print(underlined_text)
print(text)

You can try this yourself in our interactive Jupyter notebook:

🧩 Interactive: Try it yourself in Google Colab

Note that this escape sequence will not work in all editors and IDEs. For example, I made it work in Jupyter Notebooks but not in my IDLE shell.


Let’s dive into some further explanations to see why this works next.

Some terminals support the capacity to pass in unique escape sequences to modify the tone, color, and appearance of the content being printed.

These escape sequences are called ANSI escape sequences that got named after the ANSI standard that indicates their use. 

Thus, you can utilize the built-in ANSI escape sequence to make the content or a specific text bold, underlined, italic, and even colored. To print the underlined text in Python using the ANSI escape sequence, we use: '\x1B[4m' + text + '\x1B[0m'.

  • '\x1B[4m' makes it underlined
  • '\x1B[1m' makes it bold
  • '\x1B[1;4m' makes it bold and underlined
  • '\x1B[0m' is the closing tag

So, you can chain together multiple text formatting specifiers by separating them with a semicolon. This is shown in the following example where the text is made bold and underlined:

Method 2: Make Text Bold and Underlined with Escape Sequence

Example 1: Escape-Sequence to print bold and underlined text for Windows Users

You may have to call the os.system() module if you are using a Windows OS to make the ANSI escape sequence work properly.

import os
os.system("color")

To make text bold and underlined, you can enclose the text in the escape sequence '\033[1;4m' and '\033[0m'.

  • '\x1B[1m' makes it bold
  • '\x1B[4m' makes it underlined
  • '\x1B[1;4m' makes it bold and underlined
  • '\x1B[0m' is the closing tag
# Print Bold and Underlined Text
print('\033[1;4m' + 'This text is bold and underlined' + '\033[0m')

Output:

💡 NOTE: The code '\033[0m' is used to end the bold and underlined text format. If you forget to add the ANSI code sequence to enclose the specific line of code, the following statements will also be printed in underlined format because you didn’t close the formatted special text.

Method 3: Using The simple_color Package

This is one of the easiest methods to print underlined text in Python. The simple_colors package includes many colors like blue, black, green, magenta, red, yellow, and cyan.

You can also format your text in various styles like bold, dim, italic, bright, underlined, reverse and blink that are included in the package.

Since the simple_color package isn’t a part of Python’s standard library; you need to install it before utilizing it. To install the simple_color package, copy the following code on your terminal:

pip install simple-colors

or,

python -m pip install simple-colors

After you have successfully installed the module, you can follow the syntax given in the example below to customize/style your code.

Example: The following example demonstrates how you can add color, format, and make the text bold or even underline it using the simple_colors module.

from simple_colors import * # normal and colored text
print('Normal:', blue('Welcome Finxters!')) # print underlined and colored text
print('underlined: ', green('Welcome Finxter!', 'underlined')) # print italic and underlined and colored text
print('Italic and Underlined: ', red('Welcome Finxter!', ['italic', 'underlined']))

Output:

Amazing! 🤩

Method 4: Using termcolor Module

In Python, termcolor is a module utilized for the ANSII color formatting.

The module comes with various properties for various terminals and certain text formatting properties. It also includes various text colors like blue, red, and green and text highlights like on-magenta, on-cyan, and on-white.

Hence, we will use the bold property from the text attributes.

💡 Note: termcolor module isn’t a part of Python’s standard library. Thus, you need to install it before utilizing it. To install the termcolor module copy the following code on your terminal:

pip install termcolor

After installing the module, let’s visualize how you can use it to print the text in bold format.

Example:

from termcolor import colored # Underlined Text
text = colored('Hello and Welcome to FINXTER!', attrs=['underline']) print(text) # Underlined + Blue Text
text2 = colored('This text will be printed in underlined and blue color', 'blue', attrs=['underline'])
print(text2)

Output:

Method 5: Create an HTML Object 

Prompt_toolkit includes a print_formatted_text() function that is compatible (as much as possible) with the built-in print() function. It also supports colors and formatting.

HTML can be utilized to demonstrate that a string contains HTML based formatting. Thus, the HTML object recognizes the essential tags for bold, italic and underline: <b>, <i> and <u>.

from prompt_toolkit import print_formatted_text, HTML print_formatted_text(HTML('<b>This text is bold</b>'))
print_formatted_text(HTML('<i>This text is italic</i>'))
print_formatted_text(HTML('<u>This text is underlined</u>'))

Output:

Conclusion

We have finally conquered the art of printing bold texts in Python. Not only did we learn how to print bold texts, but we also learned how to style the code using colors and other formatting styles like underline and italics. I hope this article helped you.

Please stay tuned and subscribe for more interesting articles!

Thank you, Rashi Agarwal, for helping me with this article.

The Complete Guide to PyCharm
  • Do you want to master the most popular Python IDE fast?
  • This course will take you from beginner to expert in PyCharm in ~90 minutes.
  • For any software developer, it is crucial to master the IDE well, to write, test and debug high-quality code with little effort.

Join the PyCharm Masterclass now, and master PyCharm by tomorrow!

Posted on Leave a comment

Maximum Recursion Depth in Python  

Rate this post

What is Recursion?

Recursion in programming is a problem-solving concept.

In recursion, a function finds the solution by calling itself once or many times. This function call can be explicit or implicit.

💡Info: Recursion, according to (Tang 2013), is when a function or algorithm calls itself one or more times. These calls occur until the program meets a specified condition. When met, processing of repeated calls from the last one called to the first happens.

See below an example of a recursive factorial function.

def factorial(n): """ Calculate n! Args: n(int): factorial to be computed Returns: n! """ if n == 0: return 1 return n * factorial(n-1) print(factorial(3))
# 6

In the highlighted line in the above snippet the factorial function calls itself. This function calls itself again and again.

This continues until the condition on line 10 is fulfilled.

Then, the previous function calls are evaluated up to the initial call. The condition n == 0 is a base case.

💡 Info: A base case is very important in a recursive function since it defines the end of the recursive calls. If there exists a faulty base case or a non-existent one in a recursive function, the function calls would go on indefinitely, akin to an infinite while loop.

Recursion utilizes stacks in function calls. Hence, indefinite function calls lead to a C (programming language) stack overflow. This stack overflow, in turn, crashes Python. A size limit introduced to the python interpreter stack prevents potential stack overflow. 

See also: sys — System-Specific Parameters and Functions and below for the call stack in the global frame when the last line evaluates.

You can try it yourself in the memory visualizer:

Or you just have a look at the screenshots taken from my execution flow:

A stack frame from a recursive call is a data structure. It contains the variable of a function call parameters at the specific function call. It holds the state of the recursive function at an instance, with specific arguments.

As highlighted below, the return value of each successive call changes according to the argument passed into the recursive call.

When the argument is 0 the return value is 1. When the argument is 1 the return value is 1, and so on until the initial argument of 3, which has a return value of 6.

Types of Recursions

There are mainly two types of recursion. These types are direct and indirect recursion.

For direct recursion, the recursive call is explicitly declared (see code snippet below). 

def direct_recursion(n): if n == 0: return 0 return direct_recursion(n-1)
direct_recursion(4)

Yet, in indirect recursion, the recursive function calls another function which in turn calls it.

For example, we define a new function named indirect_recursion(n). indirect_recursion(n) calls a function called other_function(3). Inside other_function(n) we call indirect_recursion(n) again.

This is a case of indirect recursion.

def indirect_recursion(n): if n == 0: return 0 return n - other_function(n-1) def other_function(n): if n > 0: n -= 2 return indirect_recursion(n) indirect_recursion(3)

Besides the above, there are other types of recursion.

There is also tail recursion and head recursion.

  • Head recursion, refers to when the recursive call is at the beginning of a function.
  • Tail as the name suggests refers to the scenario where the recursive call is the last line of the function.

In the direct recursion snippet above, the last line in the function is a sole recursive call.

This is an example of a tail-recursive function. Hence, tail recursion is a particular example of a direct recursion type.

Note, in our recursive factorial function, the last line contains the recursive call. But, it does not qualify to be tail-recursive. This is because the very last operation in that function is multiplication. 

Tail call optimization

A tail call is not unique to recursive functions.

It refers to the last action that is finally performed by a function or a procedure.

As explained above, if the final action is recursive then the tail call can is a tail-recursion.

Some programming languages like scheme put in place tail call optimization. Tail call optimization ensures constant stack space usage. In (“Tail Call” 2022), tail call optimization, the call stack receives no more stack frames.

Since most of the current function state is no longer needed, hence replaced by the stack frame of the tail call.

As highlighted in the image illustration of a stack frame in the context of a recursive function. Instead of each call generating a new stack frame. This is achieved by modifying the current frame to align with the current argument. This is a powerful technique that allows for the conservation of memory.

Hence, preventing stack overflow in cases of tail recursion functions. As highlighted in this answer (Cronin 2008). The amount of space required for a recursive factorial function is constant for any value argument.

Tail Call Optimization in Python

By design, python, unlike languages like scheme, does not support tail call optimization.

This is true for all tail calls, including tail-recursive calls. The main reason for this is python’s emphasis on having complete debug information. This debug information relies on stack traces.

We lose debug info in discarded stacks by implementing tail call optimization. This renders stack trace useless.

Currently, Python, by default, allows for 1000 recursion calls.  After exceeding these calls, Python raises a RecursionError: maximum recursion depth exceeded.

How to Get the Current Recursion Limit in Your System in Python?

The code listing below shows how to find out the current recursion limit in your system.

import sys
print(sys.getrecursionlimit())

The default is usually 1000 but it depends on the set-up one is running.

In my current set-up using Anaconda, the recursion limit is 3000.

Recursion limit refers to the number of function calls python allows when recursing.

How to Set the Recursion Limit in Python?

It is possible to change the recursion limit. By adding the following code we get rid of RecursionError if the solution lies within the set limit.

sys.setrecursionlimit(3500)

It is important to note that increasing the recursion limit does not change the C-stack size.

Hence, even with increasing the limit stack overflow might still occur since the limit is a safety measure to prevent stack overflow.

The better option might be refactoring the solution. For example, using an iterative solution using loops, and other built-in Python sequences.

References

  • Cronin, Kyle. 2008. “Answer to ‘What Is Tail Call Optimization?’” Stack Overflow. https://stackoverflow.com/a/310980.
  • “Sys — System-Specific Parameters and Functions — Python 3.10.4 Documentation.” n.d. Accessed April 26, 2022. https://docs.python.org/3/library/sys.html#sys.setrecursionlimit.
  • “Tail Call.” 2022. In Wikipedia. https://en.wikipedia.org/w/index.php?title=Tail_call&oldid=1082917459.
  • Tang, Daisy. 2013. “CS240: Data Structures & Algorithms I.” March 2013. https://www.cpp.edu/~ftang/courses/CS240/lectures/recursion.htm.
Posted on Leave a comment

Generate PDF from HTML with JavaScript and Example

by Vincy. Last modified on May 12th, 2022.

Generate PDF from HTML in a browser is one of the most wanted utilities. There are many hosted solutions generating PDF online from the posted source.

When using online tools the required features are not available with one tool. The users have to compromise some of their needs when depending on the online tools.

But, developers like us need not compromise. We can create a custom utility to generate PDF from HTML on our own.

Quick solution

There is a quick solution to generate PDF from an HTML page. The browser’s print wizard has the “Save as PDF” option along with the preview panel.

This JavaScript triggers the browser’s print action. Then, it supplies a particular portion of the HTM to print.


<div class="outer-content"> <div id="pdf-content"> <h2>PDF Page Title</h2> <hr> <p> How to generate a pdf from the <i>UI content</i> is easy. </p> <p> This describes how to <strong>generate pdf from HTML</strong> using programming. </p> </div> <hr> <button id="btn-generate">Generate PDF</button>
</div>

<!DOCTYPE html>
<html lang="en">
<body> <?php require_once __DIR__ . '/template.html'; ?>
</body>
<script> var buttonElement = document.querySelector("#btn-generate"); buttonElement.addEventListener('click', function() { var pdfContent = document.getElementById("pdf-content").innerHTML; var windowObject = window.open(); windowObject.document.write(pdfContent); windowObject.print(); windowObject.close(); });
</script>
</html>

I am sure this is not enough to claim that the PDF generation is implemented 🙂

For creating a full-fledged solution to generate PDF from HTML we have to go for using libraries.

There are popular libraries available in the market to build a PDF generation tool for an application.

In this tutorial, we will see some of the top libraries that support PDF generation. For each library, we will see how-to steps for the integration and development.

Libraries available to Generate PDF from HTML

This section listed the libraries used to generate PDF from HTML in this article. It interlinks the appropriate example code below to land you in the right place.

  1. HTML to PDF
  2. jsPDF
  3. wkHTMLtoPDF
  4. pdfmake

The HTML to pdf and jspdf sections have more than one example. It is to know how to generate PDF from HTML containing complex nodes or containers. Example: HTML tables, image galleries and etc.

1. HTML to PDF

The HTML to pdf library method is a way to generate PDF from HTML. It is a two-step process to get a simple PDF output.

First, get the CDN URL of this library from an authentic source.  Then, follow these two steps to get an output PDF file.

  1. Instantiate html to pdf library class.
  2. Map HTML content to generate and save PDF.

The basic life cycle to generate PDF from HTML using this library is shown in the below flow chart.

generate pdf from html life cycle

Example 1: Generate PDF from HTML containing only text.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Generate PDF from HTML using html to pdf library</title>
<!-- CDN URL - html2pdf library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head> <body> <?php require_once __DIR__ . '/template.html'; ?> <script> var buttonElement = document.querySelector("#btn-generate"); buttonElement.addEventListener('click', function() { var pdfContent = document.querySelector("#pdf-content"); html2pdf().from(pdfContent).save(); }); </script>
</body>
</html>

Example 2: Supply library options to override defaults

Unlike the above example, it sends an array of options to generate PDF from HTML. It overrides the default file name, margin, orientation and more defaults as specified.


var pdfContent = document.querySelector("#pdf-content");
var optionArray = { margin: 10, filename: 'output.pdf', jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
}; // html to pdf generation with the reference of PDF worker object
html2pdf().set(optionArray).from(pdfContent).save(); 

In old monolithic method, the html2pdf() accepts the HTML reference and options. To generate PDF from HTML DOM object reference and JSON options are supplied like,


html2pdf(pdfContent, optionArray);

2. jsPDF

To generate PDF from HTML some libraries need document definition of the markup. The jsPDF is popularly known for its feature of getting the HTML input in any format.

For example, it is capable of accepting HTML in the following formats.

  1. HTML markup.
  2. HTML file input data.
  3. HTML element object with the reference of selectors.

Example 1: Equivalent alternative solution to generate PDF from HTML

This example creates a basic usage reference of jsPDF to generate PDF from HTML template.  It includes an external template source in the UI container.

The JavaScript maps an event handler to the “Generate PDF” button found in the HTML template.

On clicking the button, the script initiates jsPDF with the appropriate PDF specification. It uses .html() handling of the jsPDF library tp generate PDF from HTML object supplied as an argument.

This hander defines a callback function that executes the HTML to PDF conversion. It saves or opens the generated PDF document in the callback.


<!DOCTYPE html>
<html>
<head>
<title>jsPDF Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body> <?php require_once __DIR__ . '/template.html'; ?> <script> var buttonElement = document.querySelector("#btn-generate"); buttonElement.addEventListener('click', function() { const { jsPDF } = window.jspdf; var doc = new jsPDF("p", "pt", 'a4'); var pdfContent = document.querySelector("#pdf-content"); // Generate PDF from HTML using right id-selector doc.html(pdfContent, { callback: function(doc) { doc.save("download.pdf"); }, x: 10, y: 19 }); }); </script>
</body>
</html>

Example 2: Generate multipage PDF from HTML page

The jsPDF library is one of the best libraries used to generate PDF from HTML on the client-side. We have seen more examples in previous articles.

This example is for generating a multipage document from lengthy HTML to PDF format.

It uses the jsPDF’s page handlers like addPage, setPage, insertPage and more.

It calculates the PDF page content height and width and split the HTML source content. It creates chunks of page content from the HTML markup.

It calculates the total pages to paginate split chunks of HTML to PDF multi-page document. The addPage() generates a page instance to render the page content chunk into it.

It loops through the same process to generate PDF from HTML containing long content.


<!doctype html>
<HTML>
<HEAD>
<TITLE>Generate multi-page PDF from HTML - jsPDF</TITLE>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
.description { font-size: 2em; line-height: 4;
}
</style>
</HEAD>
<BODY> <div class="outer-content"> <div id="pdf-content"> <img src="cherry.jpeg" /> <p class="description">Donec id leo quis felis vehicula bibendum sit amet ut tellus. Sed sagittis aliquet rhoncus. Pellentesque vulputate nunc ultricies, egestas augue ac, ullamcorper dui. Etiam diam mauris, molestie in purus a, venenatis pretium leo. Sed id metus eleifend, scelerisque neque id, posuere arcu. Nunc cursus et dui quis fringilla. In in turpis feugiat diam porttitor tempus. In hendrerit diam dolor, id pellentesque ante volutpat a. Nam tortor sapien, semper ut justo et, accumsan imperdiet sem. Sed euismod nunc vitae dolor porttitor ullamcorper. Donec sed lacinia dui. Nunc sed suscipit erat. Phasellus euismod ultrices velit, hendrerit tempor diam elementum ut.</p> <hr> </div> <button id="btn-generate">Generate PDF</button> </div> </BODY>
<script>
$(document).ready(function(){ $("#btn-generate").click(function(){ var htmlWidth = $("#pdf-content").width(); var htmlHeight = $("#pdf-content").height(); var pdfWidth = htmlWidth + (15 * 2); var pdfHeight = (pdfWidth * 1.5) + (15 * 2); var doc = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]); var pageCount = Math.ceil(htmlHeight / pdfHeight) - 1; html2canvas($("#pdf-content")[0], { allowTaint: true }).then(function(canvas) { canvas.getContext('2d'); var image = canvas.toDataURL("image/png", 1.0); doc.addImage(image, 'PNG', 15, 15, htmlWidth, htmlHeight); for (var i = 1; i <= pageCount; i++) { doc.addPage(pdfWidth, pdfHeight); doc.addImage(image, 'PNG', 15, -(pdfHeight * i)+15, htmlWidth, htmlHeight); } doc.save("output.pdf"); }); });
});
</script>
</HTML>

generate pdf from html output

3. wkHTMLtoPDF

It is a command-line tool to generate PDFs from HTML. Find the latest suitable release. Then, install this library before running the command in the terminal.

It requires supplying a sanitized HTML source to create a PDF output.

After installation, add the library path to the system classpath. Then, run the following command.


wkhtmltopdf sanitised_html_source_path output.pdf

The best practice is to read the remote page content and sanitize the HTML. Then write the sanitized content into a local HTML to pass it to the PDF generation command. The PHP cURL post will be best to read the remote content compared to the file_get_contents().

It provides a C library to get used to it via programming.

If you want to execute the command via a program, the PHP exec() function may help.

There is a third-party interface to generate PDF from HTML using the wkHTMLtoPDF. Visit the Github page to install the PHP library used to content HTML to PDF.

This code shows the command to install this library into your vendor directory.


composer require mikehaertl/phpwkhtmltopdf

This simple usage example may initiate to start with this PHP library to generate PDF from HTML.


<?php
use mikehaertl\wkhtmlto\Pdf; $pdf = new Pdf('html-source-file.html'); if (!$pdf->saveAs('output.pdf')) { $error = $pdf->getError(); // return error to the request handler
}

4. pdfmake

The pdfmake library has both client-side and server-side integrations. Both methods generate PDF from HTML by accessing the element content from JavaScript.

Installation

This example uses pdfmake CDN URL to import dependencies. The documentation has alternate methods of installing and integrating the library.

For example, it gives npm commands to download node_modules with required dependencies.

Client-side integration

This example uses the pdfmake’s client-side method to generate PDF from HTML objects.

It accesses HTML element content from JavaScript and prepares the document definition object.

The document definition can supply the following types of content.

  1. Text,
  2. Multi-column text,
  3. Styles,
  4. Images

The HTML contains a heading, text, and image content. The docDefinition object is built with the content of these HTML elements.

Images will be supplied as encoded binary data. In this example, the JavaScript getDataUrl() converts the image into a binary data URL.

Then the pdfmake.createPDF() handler code generate PDF from HTML. The below code opens the HTML to PDF output in the browser screen. The pdfmake library also allows to print, and download the PDF document.


<!DOCTYPE html>
<html>
<head>
<title>PDFMake Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.min.js"></script>
</head>
<body> <div class="outer-content"> <h2 id="heading">PDF Page Title</h2> <div id="pdf-content">How to generate a pdf from the UI content description and example. </div> <img src="cherry.jpeg" id="image-preview" /> <hr> <button id="btn-generate">Generate PDF</button> </div> <script> var buttonElement = document.querySelector("#btn-generate"); buttonElement.addEventListener('click', function() { var pdfHeading = document.querySelector("#heading").innerText; var pdfContent = document.querySelector("#pdf-content").innerText; var pdfImage = getDataUrl(document.querySelector("#image-preview")); var docDefinition = { content: [ { text: pdfHeading, style: 'heading' }, { text: pdfContent, style: 'vspace' }, { image: pdfImage } ], styles: { vspace: { lineHeight: 3 }, heading: { fontSize: 18, lineHeight: 2 } } }; pdfMake.createPdf(docDefinition).open(); }); function getDataUrl(imgSource) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = imgSource.width; canvas.height = imgSource.height; context.drawImage(imgSource, 0, 0); return canvas.toDataURL('image/jpeg'); } </script>
</body>
</html> 

Conclusion

Thus, we have seen various methods to generate PDF from HTML source code or files. I hope the usage examples of the libraries may give choices to enable PDF generation.

Share your thoughts about the PDF generation concept we have seen. Also, share your comments on the example codes to generate PDF from HTML.

↑ Back to Top

Posted on Leave a comment

Security Engineer — Income and Opportunity

5/5 – (4 votes)

Before we learn about the money, let’s get this question out of the way:

What Does a Security Engineer Do?

A security engineer is a “white-hat hacker”, i.e., an IT professional who analyzes computer systems and computer networks to ensure they are running securely. This involves proactive analysis and understanding of possible security threats and attack vectors and designing the system to minimize the exposure to these threats.

Security Engineer Skills and Qualifications 

Security Engineers should have at least a bachelor’s degree in computer science or a related field.

You need to understand networking, computer security systems, databases, HTTP, and web protocols, as well as an intimate understanding of distributed systems.

In particular, here are some crucial qualifications that are relevant as a Security Engineer:

  1. Bachelor of Science in Computer Science or a related field
  2. 5+ years of work experience as a System Security Engineer or a related position
  3. 3+ years of work experience in development, operation, and maintenance of real-world security systems
  4. Knowledge of operating systems
  5. Knowledge of distributed systems
  6. Knowledge of databases and database security
  7. Knowledge of computer networks, networking technologies, network security
  8. Knowledge of network monitoring solutions
  9. Knowledge of anti-virus filters, content filtering, firewalls, authentication systems, and intrusion detection systems
  10. Knowledge of security protocols, cryptographic algorithms, and principles
  11. Critical thinking
  12. Ability to solve complex problems 

Annual Income Security Engineer (US)

💬 Question: How much does a Security Engineer in the US make per year?

Figure: Average Income of a Security Engineer in the US by Source. [1]

The average annual income of a Security Engineer in the United States is between $75,732 and $144,874, with an average of $108,851 and a statistical median of $105,928 per year.

This data is based on our meta-study of ten (10) salary aggregators sources such as Glassdoor, ZipRecruiter, and PayScale.

Source Average Income
Glassdoor.com $111,691
ZipRecruiter.com $120,708
Zippia.com $100,165
Talent.com $119,946
Salary.com $138,822
PayScale.com $95,953
Builtin.com $144,874
Indeed.com $75,732
Comparably.com $90,120
SalaryExplorer.com $90,500
Table: Average Income of a Security Engineer in the US by Source.

This is the most comprehensive salary meta-study of security engineer income in the world, to the best of my knowledge!

Let’s have a look at the hourly rate of Security Engineers next!

Hourly Rate

Security Engineers are well-paid on freelancing platforms such as Upwork or Fiverr.

If you decide to go the route as a freelance Security Engineer, you can expect to make between $30 and $150 per hour on Upwork (source). Assuming an annual workload of 2000 hours, you can expect to make between $60,000 and $300,000 per year.

⚡ Note: Do you want to create your own thriving coding business online? Feel free to check out our freelance developer course — the world’s #1 best-selling freelance developer course that specifically shows you how to succeed on Upwork and Fiverr!

Industry Demand

But is there enough demand? Let’s have a look at Google trends to find out how interest evolves over time (source):

Learning Path, Skills, and Education Requirements

Do you want to become a Security Engineer? Here’s a step-by-step learning path I’d propose to get started with Security :

You can find many additional computer science courses on the Finxter Computer Science Academy (flatrate model).

But don’t wait too long to acquire practical experience!

Even if you have little skills, it’s best to get started as a freelance developer and learn as you work on real projects for clients — earning income as you learn and gaining motivation through real-world feedback.

🚀 Tip: An excellent start to turbo-charge your freelancing career (earning more in less time) is our Finxter Freelancer Course. The goal of the course is to pay for itself!

You can find more job descriptions for coders, programmers, and computer scientists in our detailed overview guide:

The following statistic shows the self-reported income from 9,649 US-based professional developers (source).

💡 The average annual income of professional developers in the US is between $70,000 and $177,500 for various programming languages.

Question: What is your current total compensation (salary, bonuses, and perks, before taxes and deductions)? Please enter a whole number in the box below, without any punctuation. If you are paid hourly, please estimate an equivalent weekly, monthly, or yearly salary. (source)

The following statistic compares the self-reported income from 46,693 professional programmers as conducted by StackOverflow.

💡 The average annual income of professional developers worldwide (US and non-US) is between $33,000 and $95,000 for various programming languages.

Here’s a screenshot of a more detailed overview of each programming language considered in the report:

Here’s what different database professionals earn:

Here’s an overview of different cloud solutions experts:

Here’s what professionals in web frameworks earn:

There are many other interesting frameworks—that pay well!

Look at those tools:

Okay, but what do you need to do to get there? What are the skill requirements and qualifications to make you become a professional developer in the area you desire?

Let’s find out next!

General Qualifications of Professionals

StackOverflow performs an annual survey asking professionals, coders, developers, researchers, and engineers various questions about their background and job satisfaction on their website.

Interestingly, when aggregating the data of the developers’ educational background, a good three quarters have an academic background.

Here’s the question asked by StackOverflow (source):

Which of the following best describes the highest level of formal education that you’ve completed?

However, if you don’t have a formal degree, don’t fear! Many of the respondents with degrees don’t have a degree in their field—so it may not be of much value for their coding careers anyways.

Also, about one out of four don’t have a formal degree and still succeeds in their field! You certainly don’t need a degree if you’re committed to your own success!

Freelancing vs Employment Status

The percentage of freelance developers increases steadily. The fraction of freelance developers has already reached 11.21%!

This indicates that more and more work will be done in a more flexible work environment—and fewer and fewer companies and clients want to hire inflexible talent.

Here are the stats from the StackOverflow developer survey (source):

Do you want to become a professional freelance developer and earn some money on the side or as your primary source of income?

Resource: Check out our freelance developer course—it’s the best freelance developer course in the world with the highest student success rate in the industry!

Other Programming Languages Used by Professional Developers

The StackOverflow developer survey collected 58000 responses about the following question (source):

Which programming, scripting, and markup languages have you done extensive development work in over the past year, and which do you want to work in over the next year?

These are the languages you want to focus on when starting out as a coder:

And don’t worry—if you feel stuck or struggle with a nasty bug. We all go through it. Here’s what SO survey respondents and professional developers do when they’re stuck:

What do you do when you get stuck on a problem? Select all that apply. (source)

To get started with some of the fundamentals and industry concepts, feel free to check out these articles:

Where to Go From Here?

Enough theory. Let’s get some practice!

Coders get paid six figures and more because they can solve problems more effectively using machine intelligence and automation.

To become more successful in coding, solve more real problems for real people. That’s how you polish the skills you really need in practice. After all, what’s the use of learning theory that nobody ever needs?

You build high-value coding skills by working on practical coding projects!

Do you want to stop learning with toy projects and focus on practical code projects that earn you money and solve real problems for people?

🚀 If your answer is YES!, consider becoming a Python freelance developer! It’s the best way of approaching the task of improving your Python skills—even if you are a complete beginner.

If you just want to learn about the freelancing opportunity, feel free to watch my free webinar “How to Build Your High-Income Skill Python” and learn how I grew my coding business online and how you can, too—from the comfort of your own home.

Join the free webinar now!

References

[1] The figure was generated using the following code snippet:

import matplotlib.pyplot as plt
import numpy as np
import math data = [111691, 120708, 100165, 119946, 138822, 95953, 144874, 75732, 90120, 90500] labels = ['Glassdoor.com', 'ZipRecruiter.com', 'Zippia.com', 'Talent.com', 'Salary.com', 'PayScale.com', 'Builtin.com', 'Indeed.com', 'Comparably.com', 'SalaryExplorer.com'] median = np.median(data)
average = np.average(data)
print(median, average)
n = len(data) plt.plot(range(n), [median] * n, color='black', label='Median: $' + str(int(median)))
plt.plot(range(n), [average] * n, '--', color='red', label='Average: $' + str(int(average)))
plt.bar(range(len(data)), data)
plt.xticks(range(len(data)), labels, rotation='vertical', position = (0,0.45), color='white', weight='bold')
plt.ylabel('Average Income ($)')
plt.title('Security Engineer Annual Income - by Finxter')
plt.legend()
plt.show()