DEV Community: Martin Kobimbo

Can Django handle 100K+ daily visits?

Martin Kobimbo — Tue, 23 Jan 2024 19:28:08 +0000

The high-level Python web framework Django is well known for its features that are developer-friendly, reliable, and easy to use. It gives developers the ability to swiftly and effectively design web apps.

But when your application becomes more popular and has a wider user base, you may find yourself wondering if Django can manage the volume that comes from 100,000 visits per day.

In this blog, we'll look at Django's performance and scalability features and talk about how to make sure your application can handle that kind of volume of daily users.

Prerequisites

Python Proficiency.
Django Proficiency.

In this blog...

Django Basics.
Scalability challenges.
Examples of high-traffic Django sites.

Django Basics

Django follows the Model-View-Controller (MVC) pattern, or the Model-View-Template (MVT) pattern. It is designed to encourage clean and maintainable code by separating the application into distinct layers:

Model: Represents the data and database schema.
View: Handles user interactions, processes requests, and returns responses.
Template: Defines how the data is shown to users.

Scalability Issues

When aiming to serve 100,000 daily visits, several scalability challenges need to be addressed:

Database Scalability: Django supports various databases, including PostgreSQL, MySQL, and SQLite. To handle a large number of visitors, you must optimize database queries, use database indexing, and consider database replication or sharding to distribute the load.
Caching: Implementing caching mechanisms can significantly improve performance. Django provides built-in support for caching using various backends like Memcached or Redis. Caching frequently accessed data reduces the load on your application server.
Web Server: While Django has a built-in development server, it’s not suitable for production use. Deploying Django behind a robust web server like Nginx or Apache can help handle a higher number of concurrent requests efficiently.
Load Balancing: As traffic grows, distributing incoming requests among multiple application instances using load balancing becomes necessary. Tools like Gunicorn, uWSGI, or ASGI can help you achieve this.
Horizontal Scaling: To handle a substantial number of daily visits, you might need to scale horizontally by adding more application servers. Container orchestration tools like Docker and Kubernetes can simplify this process.
Asynchronous Processing: Django’s synchronous request-response model can become a bottleneck under heavy load. Utilizing asynchronous programming with libraries like Django Channels or FastAPI can improve concurrency and response times.
Content Delivery: Offloading static assets (images, stylesheets, scripts) to Content Delivery Networks (CDNs) reduces the load on your server and accelerates content delivery to users worldwide.
Monitoring and Optimization: Implement robust monitoring and profiling tools to identify performance bottlenecks and optimize your application accordingly. Tools like New Relic, Datadog, or Prometheus can help with it.

High Traffic Django sites

Several high-traffic websites and applications use Django as their backend framework, these are sites like;

Instagram: One of the most popular social media platforms, Instagram, initially used Django as its web framework. While they’ve since migrated some parts to other technologies, Django played a crucial role in their early growth.
Pinterest: Pinterest, a content-sharing and discovery platform, was built using Django. As the platform scaled, Pinterest engineers have continued to optimize and adapt their Django-based infrastructure.

NASA, DropBox, Disqus, Spotify, Eventbrite, Mozilla, Bitbucket, The Washington Post etcetera.

Conclusion

Django is a powerful web framework that can handle a substantial number of daily visits, even as high as 100,000 or more. However, achieving this level of scalability requires careful planning, optimization, and the use of various performance-enhancing techniques.

How to resolve Django migration errors from triggers.

Martin Kobimbo — Tue, 23 Jan 2024 13:21:03 +0000

Prerequisites

Intermediate-level Python.
Command line interface knowledge.
Django Framework knowledge.
PostgreSQL and databases.

This error prevents you from executing schema changes on a table with enabled triggers. This post will explore why this error occurs and how to resolve it.

This is what the error looks like:
django.db.utils.OperationalError: cannot ALTER TABLE "mytable" because it has pending trigger events

Understanding Django migration errors
What's happening when we get this error?

In Django, makemigrations generates migration files that describe schema changes to your models—for example, adding a new field. migrate then applies these migrations by running ALTER TABLE statements.

However, PostgreSQL does not allow ALTER TABLE on tables that have enabled triggers. So if your table has triggers, the migrate step fails with the “pending trigger events” error.

Why do triggers block alters
Trigger’s fire in response to events like inserts, updates, or deletes. They allow you to perform actions like validating input or logging history.

Triggers also introduce some database locking issues. If PostgreSQL allowed an ALTER while triggers were enabled, it could lead to inconsistent data.

As a result, PostgreSQL completely blocks ALTER TABLE unless you disable or drop existing triggers first. Django migrations obey this constraint and error out.

Now that we understand the cause, what solutions exist for applying migrations?

Temporarily disabling triggers One option is to temporarily disable existing triggers on the table during the migration.

ALTER TABLE mytable DISABLE TRIGGER ALL; 

# Run migrations with python manage.py migrate

ALTER TABLE mytable ENABLE TRIGGER ALL;

This unblocks Django from running ALTER TABLE, allowing the schema changes to apply.

Directly manipulating triggers can be tedious and error-prone. You need to remember to re-enable the trigger’s after.

Manually drop and recreate triggers You can drop triggers before migrating.

DROP TRIGGER IF EXISTS my_insert_trigger on mytable;

# Run migrations  

CREATE TRIGGER ...

This also gets Django migrations working. But again, it requires manually rebuilding your trigger logic.

3.Use Djangos Schema editor
Django offers a higher-level API for managing triggers and migrations cleanly.

The django.db.backends.base.schema.BaseDatabaseSchemaEditor class allows overriding schema modifying commands. This includes hooks to drop and recreate triggers automatically around a migration.

For example:

from django.db import migrations

class Migration(migrations.Migration):

    operations = [
        migrations.AddField( ... ) 
        ...
    ]

    def drop_triggers(self, schema_editor, schema_migration):
        schema_editor.execute("DROP TRIGGER...") 

    def recreate_triggers(self, schema_editor, schema_migration):
        schema_editor.execute("CREATE TRIGGER...")

Now triggers will automatically drop and recreate around the migration operation.

A few other solutions

Create a replica PostgreSQL database for running migrations, without triggers enabled. Then sync the applied schema changes back to the primary database.
Disable triggers directly in PostgreSQL by setting session_replication_role to replica during migration.
ImproperlyConfigured the migration files to temporarily drop triggers by overriding SchemaEditor commands.

In most cases, the Django SchemaEditor hooks provide the best development experience for managing triggers. But in complex deployments, alternate solutions like migrations replicas may be necessary.

Conclusion

PostgreSQL triggers causing Django migration issues can be rather annoying. However, by comprehending the situation, you can identify a workaround that works.

The remainder of your trigger logic can still function when triggers are temporarily dropped, either manually or with SchemaEditor. Even with triggers enabled, you can continue to work productively on Django schema migrations if you have the correct approach.

Don't be shy, ask some questions in the comments.

Using Puppeteer and JavaScript to Automate Form Filling on Any Website

Martin Kobimbo — Sat, 20 Jan 2024 20:57:22 +0000

Prerequisites
Basic Methods
Launching Puppeteer
Conclusion

Puppeteer is a Node.js library that allows you to control a headless Chrome or Chromium browser. This means you can automate tasks typically requiring a human to interact with a web browser, such as filling out forms.

This tutorial will show you how to use Puppeteer and JavaScript to automate form filling on any website. By the end of this tutorial, you will be able to:

Launch Puppeteer and create a new browser instance.

Navigate to a website and find a form.

Fill out the form with the desired information.

Submit the form.

Close the browser.

This tutorial is for beginners who are new to Puppeteer and JavaScript. However, even with experience with these technologies, you may find this tutorial helpful.

Prerequisites

You will need to have the latest version of Node.js installed on your computer.
You will need to have the Puppeteer package installed. You can install it by running the following command in your terminal:

npm install puppeteer

Basic methods

title()
This command is used to obtain the title of the present page.
Syntax
The syntax is as follows;
await page.title()

URL()
This command is used to obtain the URL of the application currently launched in the browser.
Syntax
The syntax is as follows;
await page.url()

content()
This command is used to obtain the page source code.
Syntax
The syntax is as follows;
await page.content()

goto()
This command is used go to your site.
Syntax
The syntax is as follows;
await page.goto()

browser()
This command is used to create a page
Syntax
The syntax is as follows;
await browser.newPage()

type()
This command is used to type into search box
Syntax
The syntax is as follows;
await page.type()

To explore more about the various methods and capabilities of Puppeteer, you can refer to the official Puppeteer documentation.

Launching Puppeteer and Navigating to a Web Page

Create a new directory for your project and navigate to it in the terminal.
Create a new JavaScript file called index.js, in your project directory.
Open the file in any text editor you choose, but you will use Vscode for this tutorial. Then import Puppeteer by adding the following line at the beginning:
const puppeteer = require('puppeteer');
Create a new browser instance
const browser = await puppeteer.launch();
Navigate to a website.

 const page = await browser.newPage();
 await page.goto('https://example.com/');

Define an asynchronous function.

async () => {}

Inside the async function, launch Puppeteer, and create a new browser instance

  const browser = await puppeteer.launch({ headless: false });
   const page = await browser.newPage();

Navigate to your desired web page using page.goto method
await page.goto("Example.com/login");
Fill the input fields in the browser using page.type method

Example:

await page.type("#selector", "value");
await page.type("#selector", "Egeg545heehew222");

Use page.select method to fill dropdown menus

Example:
await page.select("#dropwdown selector", "dropdown value");

Use page.click method to click checkboxes and radio buttons

Example:
await page.evaluate(() => document.querySelector("#selector").click());

Use page.keyboard.press method to simulate clicking the submit button
await page.keyboard.press("Enter");
Use page.waitForNavigation() method to wait for a page to navigate to a new URL or to reload.
await page.waitForNavigation();

Complete Code

const puppeteer = require("puppeteer");

(async () => {

  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto("https://jobs.careeraddict.com/login");

  await page.type("#user_email", "wise4rmgod@yahoo.com");
  await page.type("#user_password", "Egeg545heehew222");

  await page.keyboard.press("Enter");

  await page.waitForNavigation();

  console.log("Successfully signed in!");

  await browser.close();
})();

Conclusion

This tutorial shows you how to use Puppeteer and JavaScript to automate form filling on any website. We have covered the basics of Puppeteer and JavaScript, and we have shown you how to write a script that can fill out a simple form.

Resolving requested access to the resource is denied on Dockerhub

Martin Kobimbo — Sat, 20 Jan 2024 19:20:16 +0000

Occasionally, you might encounter an error message stating that Requested access to the resource is denied when attempting to push images on Docker Hub.

In this article, I will provide steps to resolve it.

Solution

docker login -u mkobi

Tag your image build

docker tag quotes:latest mkobi/quotes:v2

View image locally via the Docker Desktop
Push the image to your private docker repository

docker push mkobi/quotes:v2

The output is similar to this:

The push refers to repository [docker.io/wise4rmgod/quotes]
73ba38394181: Pushed 
47f6f066faff: Pushed 
8e09802f4e96: Pushed 
88bb24ab4cf4: Pushed 
7355a3354412: Pushed 
23350eaaee74: Pushed 
df8e43203da9: Pushed 
92a6bff90f79: Pushed 
26cbea5cba74: Pushed 
v2: digest: sha256:78ad6fa8b3091a3d59a0a66bea3885d9c14075f369e48e57b92ef86ae5789385 size: 2204

Encountering the Requested access to the resource is denied error on Docker Hub can be frustrating, but by following the steps outlined in this article, you can identify and resolve the cause.

Creating a simple message board app in django

Martin Kobimbo — Fri, 29 Dec 2023 17:42:39 +0000

Prerequisites

Version Control(Git)
Python
Command line/Terminal
Web development concepts

Introduction

"Hey there, curious minds! Ever wanted to create your own interactive space online? Get ready to dive into the exciting world of Django as we build a simple message board together.

We will use a database to create a basic message board app where users can post or read short messages.

We will dive into Django's powerful admin interface which provides a visual way to make changes to our data.

Initial SetUp

To give you a picture here is what we are doing first:

create a new directory on our desktop called mb.
Install virtualenv if you haven't already
Install Django in a virtual environment
Create a project called mb_project
Create an app called posts
update settings.py

In your terminal/Command line interface type in the following:



$ cd Desktop

$ mkdir mb

$ cd mb

$ pip install virtualenv

$ pipenv install django

$ pipenv shell

(mb) $ django-admin startproject mb_project

(mb) $ python manage.py startapp posts

Now let Django know about our app "posts" by adding it to the bottom of the INSTALLED_APPS section inside our settings.py file.



INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'posts.apps.PostsConfig',

]

Now execute a migrate command to create a database.

(mb) python manage.py migrate

If you type in the ls command in your terminal or simply view the files section inside your VScode you will see a db.sqlite3 file. This represents our database.

We can now spin up our local server to see if everything works correctly.

(mb) $ python manage.py runserver

click on the HTTP link to navigate to see the Django page.

Creating a database model

Let's create a database model to store and display posts from our users.

Open the models.py file inside our posts app

You will see that Django is importing a module called models which will help us in building database models, which will "model" the characteristics of the data in our database. Now we need to create a model to store the text content of a message board post.

Here is how we do it:



from django.db import models

class Post(models.model):

    text = models.TextField()

What have we just done here? We just created a database model called Post which has a field of text. We have also specified the type of content it will hold by putting in TextField(). Django provides many model fields which in turn support different types of content like integers, characters emails etc.

Models Activation

We need to activate our model. Whenever we create or modify an existing model, we must update Django with two steps.

Initially, we create a migrations file with the makemigrations command. This file will help us track any changes.

lastly, we build the actual database with the migrate command which will execute instructions inside our file.

Stop the server by typing ctrl+c in your terminal. then run these two commands:



(mb) $ python manage.py makemigrations posts

(mb) $ python manage.py migrate

Working with the Django Admin

One of Django's impressive features is a built-in admin interface that provides a visual way to interact with data.

To use the Django admin, we first need to create a superuser who can log in. Inside your terminal/command-line console type in:

$ python manage.py createsuperuser

You will then get this:



Username:
Email:
Password:
Password(again):
Superuser created sucessfully.

note that your password will not appear in the terminal when typed in

Now restart the server with python manage.py runserver command. Click the HTTP link that appears in the terminal, and now you should be able to see the login screen for the admin.

We can immediately see that there is a problem. Our posts app doesn't feature here. For us to see our app inside the Django admin we need to update our admin.py file.

In your text editor open the admin.py file and type in the following code.



from django.contrib import admin

from .models import Post

admin.site.register(Post)

refresh your browser and you will see that the app now appears.

Since that's done let's create our first post. Click on the add button opposite Posts and type any message of choice (could be a quote, instruction, or gibberish) in the Text field.

Then click the Save button. You will be redirected to the main post page.

You will note that our new entry is called "Post object". Let's change that. Within the models.py file add a new function str like this:



from django.db import models

class Post(models.Model):
    text = models.TextField()

    def __str__(self):
        return self.text[:50]

This will display the first 50 characters of our text field.

Creating Views/Templates/URLs

For us to be able to display database content on our homepage, we have to put our views, templates, and URLs together.

Lets begin with the view. In the views.py file enter the code below:



from django.views.generic import ListView
from .models import Post


Class HomePageView(ListView):
    model = Post
    template_name = 'home.html'

In the code we first imported ListView then we imported the post model. In the view, we subclass ListView and specify the correct model and template.

We now need to configure our URLs and make our template. We begin with the template. Within your terminal create a new directory called templates and within the template a home.html file:



$ mkdir templates
$ touch templates/home.html

Now update the DIRS field in our settings.py file like this:



TEMPLATES = [
    {
       'DIRS': [os.path.join(BASE_DIR, 'templates')],

},

]

In our home.html we will create our own variable called post and then access the desired field to be displayed as post.text:



<h1>Message board homepage</h1>
<ul>
  {% for post in object_list %}
  <li>{{ post.text }}</li>
{% endfor %}
</ul>

The name object_list isn't that friendly. Instead, we can provide an explicit name via the context_object_name attribute.

In our views.py file, add the following:

context_object_name = 'all_posts_list'

Declaring the name like this helps other members of a team.

Let's also update our template in home.html so that it references all_posts_list rather than object_list.



<h1>Message board homepage</h1>
<ul>
  {% for post in all_posts_list %}
  <li>{{ post.text }}</li>
{% endfor %}
</ul>

Lastly, let us set up our URL configurations. Do this by adding the code below in our urls.py. We simply add posts and include on the second lines.



from django.urls import path, include

path('' include('posts.urls')),

Then create an app level urls.py file.

$ touch posts/urls.py

then update it like this:



from django.urls import path

from .views import HomePageView

urlpatterns = [
   path('', HomePageView.as_view(), name='home'),
]

Restart the server with python manage.py runserver and navigate to our homepage using the http link in the terminal.

WOW! we are all done here, congratulations on making it to the end. You can now add more posts through the Django admin and see how the posts appear. Happy Hacking Ya'll!.

WHAT IS HELMETjs?

Martin Kobimbo — Thu, 28 Dec 2023 13:41:51 +0000

Introduction

In our modern online world, where the creation and launching of websites are on the rise, having strong security measures is not optional, cyber-attacks are a big problem for businesses and the developers that build apps for these businesses, exploiting weaknesses in businesses.

With this environment in mind, helmetjs a javascript framework has emerged as one of the best frontline defenses—intent on safeguarding express apps from a myriad of attacks.

Prerequisites

Fundamentals of Express.js and middleware concept
Basic understanding of HTTP headers and their significance in web security
JavaScript and Node.js familiarity for implementation aspects

So what exactly is Helmet.js

Let's think of helmetjs as a guardian to our web app. Imagine that our app is a house with doors and windows, sometimes we forget to close a window or close a door and this leaves the house vulnerable to would-be thieves and robbers.

Helmetjs automatically closes these entry points on our web app. Helmetjs implements an array of security measures like ensuring that all windows and doors, and makes sure they are locked tight. This makes it much harder for hackers to have a field day inside our application.

Helmet.js is like a security guard that protects your application by setting up safety measures automatically, so you don't have to manually secure each part of your app. It makes sure your application is as safe and secure as it can be.

Helmet.js at its heart is made up of several smaller middleware functions, with each one focusing on a particular part of web security. These middleware functions work by modifying HTTP headers to improve protection against different kinds of attacks.

The core idea is that Helmet.js bundles together these smaller middleware functions, each targeting a specific web security issue, to provide an overall robust defense through manipulating HTTP headers.

helmetjs middlewares and their role in mitigating attacks

Content Security Policy (CSP):

You can think of the content security policy as a guest list for a bash party. On the guest list are the only people who can enter. If someone is not on the list they can not get in.

Conversely, the csp lists where resources can come from your app, keeping out uninvited “code guests” that may cause trouble.

This helps stop sneaky attacks like Cross-Site Scripting (XSS) where bad code is injected into your site. Helmet.js can easily set up these rules for your app, making sure only trusted sources can be used

X-Content-Type-Options:

At times browsers try to guess the kind of content on a page. This guessing can be exploited by hackers. Helmetjs protects against attacks that may come as a result of this by telling the browser not to guess the content type.

Strict-Transport-Security:

Attacks like protocol downgrades and cookie hijacking are mitigated by HTTP strict transport policy or hsts in short. This web security policy ensures browsers do not use insecure HTTP.

It's like always taking the secure roads and streets to your home and sticking to that path come rain or sunshine. Helmet js makes sure the most unsafe paths for data travel are never used.

X-Frame-Options:

It is so easy for an attacker to put your page HTML documents inside a , which results in clickjacking attacks. Clickjacking is a way of tricking users into with pages that are different from what the users think they are.

By iframing attackers can put different layers over your web pages and buttons that you can't see are used to run bad scripts. Imagine your website as a painting. Someone can hide your painting inside a bigger frame and display it without your permission.

Helmet.js sets a rule that says, "Don't let anyone put my website in a hidden frame," to prevent these tricks.

Referrer-Policy:

Protecting against data leakage. Clicking links on websites results in data about where you came from being sent out. Helmet.js sets rules to limit how much info about where you were before coming to a page is shared.

It's like when you recommend a book to a friend but don't want to give away the entire plot. You share just enough for them to get interested but not so much that it spoils the story.

Referrer-Policy controls how much information about where you've been before visiting a page is shared, protecting your browsing history like a well-kept secret.

Conclusion

Helmet.js is like a superhero for websites, making them safer from bad guys on the internet. It automatically locks doors and windows to stop hackers from sneaking in, protecting against tricks like putting your site in a hidden frame or adding harmful code.

By doing this, Helmet.js keeps your website safe and secure, so you can focus on making it awesome without worrying about cyber troublemakers.

How to create email templates in django

Martin Kobimbo — Wed, 27 Dec 2023 23:16:18 +0000

Introduction
Django is a popular and capable Python web development framework that simplifies building web apps. One of Django's many useful capabilities is its strong tools for sending emails.

With Django, you can set up email backends and make reusable HTML email templates for your app. In this blog article, we'll go through how to make HTML email templates in Django and send emails using those templates.

Emailing users is a frequent activity for many web applications. You may need to send emails for account verification, password resets, invoices, and more.

Creating unique HTML emails from scratch for every situation can be tiresome and time-intensive. This is where templates are useful! With templates, you can make your base email HTML once and reuse it for all emails.

Prerequisites
Terminal/ Command line
Python
Intermediate Django
HTML

Configuring email settings
To begin making templates, we first need to set up Django's email backend configurations. These settings tell Django how to send emails. The most popular method is to use SMTP and connect Django to an external email provider such as Mailgun, SendGrid, Amazon SES, or your own SMTP server.

The email backend settings can be specified in Django's settings.py file. For example, here is how to configure SMTP with Mailgun:

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.mailgun.org'  
EMAIL_HOST_USER = 'your-mailgun-username'
EMAIL_HOST_PASSWORD = 'your-mailgun-password'
EMAIL_PORT = 587 
EMAIL_USE_TLS = True

This connects Django to Mailgun for sending emails. Make sure to use your own Mailgun credentials. You can use a similar approach for other SMTP providers.

Creating templates

After configuring your email backend, you can start creating templates. Email templates in Django are just normal Django templates that live under a templates/registration/ directory in your app.

an example email_template.html under templates/registration/:

<!DOCTYPE html>
<html>
<head>
<title>My Email Template</title>
</head>
<body>

<p>Hi {{ name }},</p>

<p>This is a test email template from my Django app. Welcome!</p>

<p>Thanks,<br>  
The App Team
</p>

</body>
</html>

This is a simple HTML template that we can reuse for all emails. We can insert variables like {{ name }} that get replaced dynamically when sending emails.

Sending templated emails in django views

Once the template is set up, utilizing it in the views is easy. First, bring in render_to_string to render the template as a string:

from django.core.mail import EmailMultiAlternatives 
from django.template.loader import render_to_string

# Render template as a string
html_content = render_to_string('registration/email_template.html', {'name': 'John'})

Afterward, make an EmailMultiAlternatives instance, add the rendered template to it, and invoke the .send() method:

msg = EmailMultiAlternatives(
subject='Test Email',
body='This is a test',
from_email='from@example.com',
to=['to@example.com']
)
msg.attach_alternative(html_content, 'text/html')

msg.send()

All done!

Conclusion

The ability to rapidly generate and send email templates is essential for most web applications built with Django. Thanks to Django's robust email backends and template engine, sending customizable HTML emails is easy. To start, you need to set up your email settings. Next, build reusable templates.

Then, leverage Django's EmailMultiAlternatives class in your views to send template emails. On top of that, adhere to best practices such as using table layouts and testing across email clients for the most robust emails.

In summary, with some configuration and planning, sending great emails with Django is straightforward.

Python Generators: The Magic of On-Demand Delivery

Martin Kobimbo — Fri, 15 Dec 2023 09:40:32 +0000

Prerequisites

Before diving into Python generators, understanding Python fundamentals—variables, functions, and iteration—is recommended. Basic concepts like loops, data types, and function calls will aid in grasping how generators operate within Python

How generators work

Imagine entering a mystical bakery where the pastry chef prepares every delicious dessert fresh, just for you, instead of prebaking them all. This is similar to how Python generators operate in that each item is generated precisely when needed rather than creating everything at once.

It's like ordering a set meal in standard Python functions—everything is provided to you at once. Generators, meanwhile, are like being at a buffet where the chef is preparing food as you are pointing to it. A generator function does not execute all of the stages at once when you call it. Instead, it uses the 'yield' keyword to begin creating objects when you ask for them.

def infinite_sequence():
    num = 0
    while True:
        yield num
        num += 1

gen = infinite_sequence()

print(next(gen))  # Outputs: 0
print(next(gen))  # Outputs: 1
print(next(gen))  # Outputs: 2
# ...and so on

The code snippet demonstrates a generator function infinite_sequence() that generates an infinite sequence of numbers. Instead of creating a massive list of numbers upfront, it generates them one by one as needed. Each time next() is called on the generator object, it yields the next number in the sequence.

Generators are indispensable in several programming scenarios, serving as invaluable tools in data-intensive tasks. They find frequent application in:

Working with Large Datasets: Generators are excellent for processing large datasets that can't fit entirely into memory.
Stream Processing: Real-time data streams from sensors, network connections, or continuous log files can be efficiently handled using generators.
Efficient Iteration: Generators offer memory-efficient iteration when dealing with collections like lists, sets, or dictionaries.
Parallel Processing and Pipelining: They allow the creation of data processing pipelines, ideal for complex workflows.
Memory Optimization: Generators significantly reduce memory usage by generating values on-the-fly.

Generators let you work with enormous volumes of data or infinite sequences without taxing the memory of your system, much like magicians creating objects out of thin air. Programming becomes a bit more magical and a lot more efficient with Python's generators, which provide an amazing way to manage resources efficiently and complete complicated jobs with ease!

EVENTS AND EVENT LISTENERS EXPLAINED TO A DUCK quack quack!!

Martin Kobimbo — Wed, 15 Nov 2023 11:53:07 +0000

Prerequisites
Knowledge of HTML
Javascript functions

Introduction
Hello there! my duck friends, imagine floating in the middle of a pond or lake, taking in the cool breeze and enjoying the sunshine. Think of event listeners as your ability to notice things happening to you.

let's say you are floating close to the shores and someone throws in some tasty pieces of bread. When those pieces of bread hit the water you react by swimming towards them quickly. those pieces of bread hitting the water are events and your reaction toward them is similar to how event listeners work.

So we can say events are things that happen in your programming system e.g. a user selects, clicks, or hovers the cursor over an element. Either pausing, playing, or ending a video. An event listener is a block of code in JavaScript that waits for an event to occur and then responds to it.

Quack-tastic event listeners for ducky ducks.

Paying Attention
Just like you pay attention to the pieces of bread hitting the water, event listeners focus on specific things happening on a webpage, like a click or a key being pressed.
Reacting to Events
When someone throws pieces of bread, you immediately swim towards them, right? Similarly, when an event happens on a web page (like a click on a button), the event listener reacts by doing something—like making the page do a fun animation or changing the color of an element.
Different Types of Events
Just as there can be different things happening around the pond (like kids playing, birds chirping, etc.), event listeners can listen for various events: clicks, mouse movements, keyboard presses, and more.
Listening Skills
You're not only attentive to just one type of bread; you react to any kind of bread someone tosses your way. Event listeners are flexible—they can listen for different types of events on various elements of a webpage.
Ready, Set, React!
Imagine someone threw bread near your pond but not directly at you. You'd notice it and swim over, right? That's like event bubbling in JavaScript—events start from a specific element and can affect its parent elements, too.

Event listener example

in our code below,
The HTML file contains a button element with the ID "myButton".

In the JavaScript file, we select the button using document.getElementById.

We define a function changeText() that changes the text content of the button to 'Good ducky!'.

We attach an event listener to the button using addEventListener. This listener listens for a 'click' event on the button and triggers the changeText() function when the button is clicked.

When you open this in a web browser, clicking the button will change its text from "Say Quack!" to "Good ducky!".

<body>

  <button id="myButton">Say Quack!</button>

  <script src="script.js"></script>
</body>

const button = document.getElementById('myButton');

function changeText() {
  button.textContent = 'Good ducky!';
}

button.addEventListener('click', changeText);

and there you have it, have a quack-tastic day my duckie friend.

SETTING UP TAILWINDCSS LIKE A PRO

Martin Kobimbo — Mon, 13 Nov 2023 19:46:56 +0000

THE BEST WAY TO SET UP TAILWIND FOR VARIOUS JAVASCRIPT FRAMEWORKS USING VITE

PREREQUISITES

Basic knowledge of CSS
Knowledge of HTML
Basic command line interface skills

Setting up tailwind with a play CDN link tag

Let's first explore the basic way of installing tailwind.

First, let's open up VScode in a blank directory and create an “index.html” file. Inside the file, we can type in the exclamation mark “!” and then click “enter”.

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

</body>
</html>

Here we have a basic scaffolding or boilerplate. For us to observe the changes in our dev server/ live server, let's add an “h1” tag with the text “hello world” to the body.

<body>
<h1>Hello World</h1>
</body>

We can now grab this link "https://cdn.tailwindcss.com", which is also available at the tailwindcss.com website. let's paste it inside the head of our HTML in a script tag.

<script src="https://cdn.tailwindcss.com"></script>

To open up the live server in a browser window, at the bottom right of our vscode window there is a text that says "Go live", click it. In our dev server/ live server notice how our font size and font family on the “hello world” text have changed. This shows us that our tailwind is working. You can add a few tailwind utility classes to our h1 tag just as a demo.

Note that using tailwind via the CDN is not the best choice, since we cannot customize the tailwind default theme, use any directives like @apply, enable additional variants, install third-party plugins, and can't tree shake unused styles. This all means that we can't control the output of this tailwind file. The CDN is mostly used to try tailwindcss as a demo.

Setting up TailwindCss using react with vite

Vite is a super fast frontend build tool that will take our index.html file as an entry point, run tailwind through PostCSS, and also give us a dev server that will update every time we make any changes.

You can create your react project with Vite by typing these two commands in your terminal,

npm create vite@latest my-project -- --template react
cd my-project

type these two commands to install tailwind to your project,

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

this will also generate a tailwind.config.js file and a postcss.config.js file for you. The tailwind.config file allows you to customize your designs.

Next, let's configure our template paths. Simply put "Imagine you're building a colorful LEGO castle, and you want to find the perfect pieces in your LEGO box. Configuring template paths in Tailwind CSS is like telling your friend exactly where to look in the box to find the right LEGO pieces for your castle. It helps Tailwind know where to find the styles it needs, making your website look just the way you want it!" To do that let's add this block of code to our tailwind.config file,

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

Then we will have this,

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

let's locate an index.css file and these tailwind directives,

@tailwind base;
@tailwind components;
@tailwind utilities;

In your terminal, we can then type the command npm run dev to open up a dev server. Now you can add a few utility classes to your jsx.

And there you have it, we have successfully installed tailwindcss! You can now practice with any projects of your liking. Make sure to always use tailwindcss with a frontend build tool like Vite in order to get support for postcss. This will allow you to create your customized designs. Happy Coding!

DEV Community: Martin Kobimbo

Can Django handle 100K+ daily visits?

How to resolve Django migration errors from triggers.

Using Puppeteer and JavaScript to Automate Form Filling on Any Website

Table of Contents

Resolving requested access to the resource is denied on Dockerhub

Creating a simple message board app in django

WHAT IS HELMETjs?

How to create email templates in django

Python Generators: The Magic of On-Demand Delivery

EVENTS AND EVENT LISTENERS EXPLAINED TO A DUCK quack quack!!

Quack-tastic event listeners for ducky ducks.

SETTING UP TAILWINDCSS LIKE A PRO

THE BEST WAY TO SET UP TAILWIND FOR VARIOUS JAVASCRIPT FRAMEWORKS USING VITE