DEV Community: Supantha Paul

Generating QR Codes using Python

Supantha Paul — Sat, 13 Feb 2021 18:11:12 +0000

QR Codes are helpful in a lot of scenarios. For example, let's say you're making a social app where users interact with each other via visiting their profiles. Generating a QR Code for each profile will make it really easy for the users to share their profile. QR codes are also used in retail stores for redirecting to a payment gateway, or for simply sharing a link. In this article, I'll walk you through how you can simply create QR codes with couple of lines of code with the pyqrcode package.

Setting Up

As I've mentioned before, we'll be using the pyqrcode package to generate the QR code for us. You can install it with pip simply by running the following command,

pip install pyqrcode

We'll need another module for saving the QR code in the file system, let's install it too.

pip install pypng

Generating the QR code

Here's the code for generating the QR Code, it's pretty simple.

# Import pyqrcode
import pyqrcode
# URL or string which will represent the QR code
url = "https://dev.to/supanthapaul"
# Generate QR code
qr_code = pyqrcode.create(url)

Now we have the QR code generated which is of type QRCode from pyqrcode. One thing to note is, we can add additional parameters to the create function like error, version, mode. If you want to learn more, you can see the documentation page here.

Okay, we generated the QR code but there's no way for us to view it. Let's save the QR code to our file system as png!

# ...
qr_code.png("image.png", scale=8)

This will save our QR code as image.png in our current directory. pyqrcode uses the pypng package under the hood to save the QR code as a png. The scale parameter sets how large to draw a single module. By default one pixel is used to draw a single module which will make the code too small to be read efficiently. Increasing the scale will make the code larger.

you can add additional parameters like module_color and background, read more about rendering the QR codes here.

Wrapping up

As you can see, it's extremely easy to generate and save QR codes with pyqrcode. If you wanted to generate QR codes for your mobile app, you can create a Python API that returns a QR code image for a particular link. If you want to know how to create web APIs using Python, I've written an article about Getting started with FastAPI to quickly create APIs using Python. Do check that out!

If you'd like to chat with me about anything technology or just say hi, you can Connect with me on LinkedIn or Find me on Twiiter. My DMs are open!

Also, here's the generated QR code of my dev.to profile!

Create a Simple Navbar with 7 Lines of CSS

Supantha Paul — Sun, 31 Jan 2021 17:14:49 +0000

Navbars are an essential part of any kind of website. I often see beginners write tons and tons of CSS rules to position the navbar elements, and more CSS to make that responsive. So in this article, I'm going to show how you can create a simple navbar with just 7 CSS rules and build upon that.

HTML Setup

Here's all the HTML that we're going to need to create the navbar. Note that I'm not using any classes for simplicity purposes but I recommend you to do so if you're planning to use this base for a project.



<nav>
  <h2>Title</h2>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</nav>

At this point, without any CSS, Your navbar should look something like this.

Yeah, not nice. Let's change that!

CSS Setup

Before writing any CSS for the navbar, let's reset the padding and margin of our document and use a nicer font.



* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Tahoma, Serif;
  color: #263238;
}

Styling the Navbar

Let's get to a fun part! We're going to use Flexbox to align our elements. If you don't know what Flexbox is, it's a one-dimensional layout model that offers space distribution between items and powerful alignment capabilities. If you want to learn about flexbox, this is a great resource.
Here are the 7 magic rules that is going to give us a good base to work with,



nav {
  display: flex; /* 1 */
  justify-content: space-between; /* 2 */
  padding: 1rem 2rem; /* 3 */
  background: #cfd8dc; /* 4 */
}

nav ul {
  display: flex; /* 5 */
  list-style: none; /* 6 */
}

nav li {
  padding-left: 1rem; /* 7! */
}

Here's how the navbar should look now,

Does it look finished? No. Is it responsive? No. But is this a good base to work with? Absolutely. You can now follow your website's design language and make it look like what you want.

For a starter, you can make the navbar links look a lot better just by removing the text-decoration and picking a better color like so,



nav a {
  text-decoration: none;
  color: #0d47a1
}

Much better, right?

Making it responsive

Don't worry, I'm not going to leave you hanging with an unresponsive navbar. Let's make it responsive!
Normally for mobile devices, you'd want a hamburger menu that reveals the navbar links. But for simplicity purposes, let's stack the elements on mobile devices. We can do this with a simple media query like so,



/* 
  Extra small devices (phones, 600px and down) 
*/
@media only screen and (max-width: 600px) {
  nav {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    padding-top: 0.5rem;
  }
  nav li {
    padding: 0.5rem 0;
  }
}

This is how it should look on smaller devices now,

Final words

As you can see, creating a navbar and making it responsive isn't all that hard. You can now go crazy and make it look very pretty. Let me know if you make something with this base!

If you'd like to chat with me about anything technology or just say hi, you can Connect with me on LinkedIn or Find me on Twiiter. My DMs are open!

I'm leaving the full codepen project here if you want to see it in action, hope you liked it!

How to choose your first front-end framework without losing your mind

Supantha Paul — Fri, 29 Jan 2021 13:37:59 +0000

The javascript ecosystem is huge and when you see the sheer amount of tools, libraries, frameworks there are for front-end development, it can be overwhelming - especially for beginners. In this article, I'll try to help you choose your first front-end javascript framework by following a simple route.

Key factors to consider

I see a lot of articles comparing front-end frameworks by their popularity or GitHub stars, which is fine. You don't wanna be learning a framework that no one uses or where there's little to no learning resources. But for your first framework, you should be picking the one which you think you'll be the most comfortable with. Once you're comfortable with a framework of your choice, you'll find it really easy to transition to another framework that is trendy or better for jobs.
With that being said, some of the things you should consider when choosing your first framework are,

Availability of learning resources
Ease of use
Does it work for you?

I'm not going to be sharing any stats of each framework since there are already really great articles on this topic, what I'm going to do is list the top 5 frameworks that are all safe to learn and help you find for yourself which one you like the most.

The Top 5 frameworks

Here are my top 5 front-end frameworks in no particular order:

How to find the framework that works for me?

This part is actually surprisingly simple that I don't see many people doing. For example, when I got started I was attracted to learn React because of how popular it was and how the big companies are using it. But after trying out Svelte, I immediately fell in love with it. I have nothing against React, I love it and it's still my go-to framework for any web project. But I think if I started out with Svelte, I don't think I would switch to another framework unless I had to.
The point I'm trying to make here is, just because a lot of people like a particular framework doesn't mean you'll like it too.

What I want you to do

Each one of the frameworks that I've listed above has an excellent step-by-step getting started guide where it goes through some of the most important features and syntax of the framework.

Go through the getting started guide of each framework and continue with the one you like the most.

All the guides are very simple and short and can be completed in the span of an evening. Take it slow and steady and at the end, you'll have a basic idea of how each of them works. Then go deeper with the one which you liked the most and build cool projects!
I'm linking the getting started guides for each one for you here,

Final words

Make sure to complete each one and see what you like and don't like about each, and pick your favorite. Everyone is different and it's okay if you like a framework that doesn't have the most GitHub stars, what matters is that you enjoy the process! I'll try to post my view on each of these here in the future. Let me know which one you like the most!