DEV Community: David Sudi

Struggling with Django's HTTPS development server issues? I have written a simple guide to expose your Django project securely using ngrok.

David Sudi — Fri, 03 Jan 2025 18:14:02 +0000

Exposing Your Django Project to the Internet Using Ngrok

David Sudi ・ Jan 3

Exposing Your Django Project to the Internet Using Ngrok

David Sudi — Fri, 03 Jan 2025 17:52:35 +0000

Have you ever encountered this error while developing in Django?

You're accessing the development server over HTTPS, but it only supports HTTP.

If you're used to accessing your development server via http://localhost:8000, this error can be frustrating - especially after updating firewall rules that enforce HTTPS connections. Instead of reverting security settings, there's a better solution: Ngrok.

What is Ngrok?

Ngrok is a powerful tool that exposes local applications to the internet without complex network configurations like port forwarding or DNS setup. Read more about ngrok in their official documentation.

Prerequisites

Before we begin, ensure you have:

A Django project setup
Python 3.x installed
A virtual environment configured
An ngrok account (free tier works fine)

Step-by-Step Setup

1. Install the pyngrok Package

Before we install anything, activate your virtual environment then install the Python wrapper for ngrok:

pip install pyngrok
pip freeze > requirements.txt

2. Configure Django Settings

Add ngrok's domain to your allowed hosts list in your project's settings.py:

# settings.py
ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.ngrok-free.app']

This allows Django to accept requests from ngrok's dynamic URLs (*.ngrok-free.app). Django will not generate any errors even though we can't predict the random string part of the URL.

3. Start Your Django Server

In your project's root directory:

python manage.py runserver

Note: Windows users can use py manage.py runserver

4. Authenticate and Start Ngrok

Sign up at ngrok.com
Copy your authentication token from your dashboard
In a new terminal window, authenticate ngrok:

ngrok config add-authtoken YOUR_TOKEN_HERE

Start the tunnel:

ngrok http 8000

Ensure that the ngrok and Django server ports are the same. The default port usually is 8000.

You should see output similar to:


Account                       Your Name (Plan: Free)
Version                       3.19.0
Region                       United States (us)
Latency                      Your Latency
Web Interface                An Unsecure HTTP address
Forwarding                   https://[random-id].ngrok-free.app -> http://localhost:8000

5. Testing Your Setup

Access your Django application using only the HTTPS URL provided by ngrok on your console window. It will look similar to the following:

https://[random-id].ngrok-free.app

Other Use Cases for ngrok

Ngrok isn't just for solving HTTPS issues. It's valuable for:

Quick Internet Exposure: Share your local development work instantly
Webhook Testing: Test integrations that require public URLs
Client Previews: Let clients preview work without deployment
Cross-Device Testing: Test your app on multiple devices easily

Troubleshooting Tips

Check if your ngrok authentication token is properly configured
Verify that your Django server is running before starting ngrok
Monitor the ngrok interface for request logs and errors

Related Resources

Want to learn more about web development? Check out my other articles:

Thanks for your time and happy coding! Share your projects in the comments section.

Respond to Me: The Art of Making Responsive Websites

David Sudi — Thu, 23 Mar 2023 13:20:52 +0000

To provide a satisfactory browsing experience to most global netizens, developers must ensure that their websites are user-friendly, easily accessible, and adaptable to various devices and screen dimensions. How can developers achieve this seemingly Herculean task? By adhering to Responsive Web Design (RWD) principles.

Prerequisites

Kindly have an understanding of the following:

Basic HTML and CSS

Goal

The article will guide you through the following:

What is RWD?
Factors to consider when creating a responsive website.
How to add responsiveness to a website.

Definition of terms

Below are some of the technical terms present in the article:

Viewport - This is the visible portion of the web page within the browser window. It is the area that a user can see without scrolling.
Render - Refers to displaying a web page or application on a user's device.
Breakpoint - The point at which a website's layout or design changes to better fit a different screen size or device type.
Polyfill - Code that provides modern functionality to older browsers without natively supporting it.

Understanding What Responsive Web Design Is

RWD is a web design methodology that aims to produce web pages that appear visually appealing on all screen sizes and devices. This article delves into highly recommended factors to consider when creating responsive websites.

A. Add Limits to Make The Viewport Responsive

Many browsers render web pages at a fixed width. This can cause horizontal scroll issues for users with smaller devices. To address this, we can add the <meta> tag to the HTML header, which sets the width and scaling of the viewport. The meta tag allows a webpage to adapt to different screen sizes and display properly on devices of varying widths.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

B. How About Giving Responsive Images a Shot?

Any website that you develop should display consistently on all major devices. It should arouse pleasure and satisfaction for your users as they navigate and read through your content. Your images should load in a snap and be clear. But if you fail on any of these tenets, it will be like serving your friend uncooked food.

We can use CSS max-width and object-fit properties to ensure images respond to different device widths and heights.

i. The `max-width` property

.example-img {
max-width: 100%;
height: auto;
}

The above rule restricts the browser from rendering an image that exceeds its container's width but preserves the image's aspect ratio by adjusting its height accordingly. The max-width Property is useful when there is a need to maintain the layout of a site and ensure that an image doesn't overlap with other elements.

ii. The `object-fit` Property

The rule directs the browser to either preserve the image's aspect ratio or resize and fill as much space as possible in its container. For instance, we add the value contain to the object-fit property to preserve the image's aspect ratio.

img{
height: 200px
width: 300px
/* preserves the image's aspect ratio but resizes it to fit the container */
object-fit: contain;
}

Sometimes, you need to have an image that always fills its container without leaving whitespaces. The cover value will do just that.

img{
height: 200px
width: 300px
/* respects the image's aspect ratio, fills the container but can crop some parts */
object-fit: cover ;
}

C. Responsive Units Are Better Than Fixed Units

Fixed units, such as pixels (px), remain constant regardless of screen size. These units are useful when developing logos and navigation bars that need to retain a certain size or position on the page.

Responsive units, such as percentages(%), are calculated relative to the screen size and adjusted accordingly. This makes the units preferable for designing flexible elements that resize proportionally according to their container size and maintain their alignment with other features.

Instead of using fixed widths like this:

.container {
  /* The container will always take up 960px no matter the type of device */
  width: 960px;
}

.column {
  /* The column will always take up 480px no matter the type of device */
  width: 480px;
}

Use fluid widths like this:

.container {
  /* The container will dynamically readjust its width to match the device's width */
  width: 100%;
}
.column {
  /* The column will dynamically readjust to occupy half of its container's width */
  width: 50%;
}

Other responsive units include:

Responsive Unit	Application
`rem`	They are based on the font size of the `<html>` element.
`em`	They are relative to the parent font size.
`vh`(Viewport height) `vw`(Viewport width)	They are based on the viewport's size and can be used to create responsive layouts that adjust to the screen or window size.

D. Unleash the Strength of Media Queries

Media queries are CSS rules that apply distinctive styles depending on various factors, including device screen size, resolution, orientation, and other conditions. We can effortlessly create breakpoints through media queries that dynamically modify the layout or appearance of a website based on the device or screen size.

It is imperative to adopt a mobile-first design approach during development. This means creating the site for mobile devices before scaling to larger screens.

The following table outlines the primary device categories and their corresponding breakpoints.

Note: I generally prefer bootstrap's breakpoint standards.

Device	Description	Breakpoints
Phones	Small device	576px
Tablets	Medium devices	768px
Laptops	Large devices	992px
Desktops	Extra large devices	1200px
Large Desktops	Extra-extra large devices	1400px

The above standards allow us to design a website that adapts to different devices and is supported by most browsers.

Explore the sample code below for a comprehensive demonstration of how to apply media queries.

/* Smartphones  */
@media (min-width: 576px) { 
  ... code goes here
 }

/* Tablets with a screen size of 768px and up */
@media (min-width: 768px) { 
  ...code goes here
 }

/* Desktops with a screen size of 992px and up */
@media (min-width: 992px){ 
  ...code goes here
 }

/* Large desktops with a screen size of 1200px and up */
@media (min-width: 1200px) { 
  ...code goes here
 }

/* Larger desktops with a screen size of 1400px and up */
@media (min-width: 1400px) { 
  ...code goes here
 }

E. Try Responsive Layouts Like Flexbox and Grid

Modern CSS layout methods such as Flexbox and Grid are powerful tools for creating responsive layouts that adapt to different screen sizes and devices.

i. Flexbox

Flexbox is a one-dimensional layout method that allows you to create flexible and responsive layouts. It provides a set of properties enabling us to specify how items should be positioned, aligned, and distributed within a container. With Flexbox, you can easily create layouts that adapt to different screen sizes without using media queries extensively.

//Example of using Flexbox
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  width: 200px;
  height: 150px;
  background-color: #f2f2f2;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

In this example, we have a container with the display: flex property set, which turns it into a flex container. The flex-wrap property wraps the items onto multiple lines as needed. Additionally, the justify-content property centers the items horizontally within the container. Each item has the display: flex property set as well, which makes it a flex item. The align-items and justify-content properties center the content of each item vertically and horizontally, respectively.

ii. Grid

Grid is a two-dimensional layout method that allows you to create complex and responsive layouts. It provides a grid system enabling us to define rows and columns, and you can place items anywhere in the Grid. With Grid, we can create more flexible and customizable layouts than those made with traditional layout methods like floats.

Example of using Grid:

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
  <div class="item item5">Item 5</div>
  <div class="item item6">Item 6</div>
</div>

.container {
  display: Grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / 4;
}

.item3 {
  grid-column: 1;
  grid-row: 3 / 5;
}

.item4 {
  grid-column: 2;
  grid-row: 3;
}

.item5 {
  grid-column: 3;
  grid-row: 4;
}

.item6 {
  grid-column: 2 / 4;
  grid-row: 5;
}

In this example, we turn the container class into a grid container using the display: grid property. The grid-template-columns property defines the columns of the Grid, and the grid-gap property sets the gap between the grid items. Each item has a unique class name and is positioned within the Grid using the grid-column and grid-row properties.

Current web browsers provide full support for Grid and Flexbox. However, to ensure backward compatibility with earlier browser versions, it may be necessary to implement fallback techniques or polyfills that bring seamless rendering of any design.

Benefits of RWD

Improved user experience
Cost-effective development
Increased reach across devices
Reduced maintenance efforts
Better search engine optimization (SEO)
Easier content management
Future-proofing

Join the RWD Revolution to Improve your Users' Experience

Creating a responsive website involves various elements that work together to achieve its ultimate objective. Each factor plays a significant role in ensuring the website is responsive and user-friendly. In today's web landscape, responsive web design demands meticulous planning and execution. That's why developers must recognize the importance of implementing responsive web design to achieve optimal results

Join the conversation!

I value your feedback and want to hear your thoughts. Leave a comment and let me know what you think about the article. Your insights could inspire new ideas and help shape future content.

Online illustrations by Storyset

Understanding Quality of Service (QoS)

David Sudi — Sat, 28 May 2022 12:14:46 +0000

Prerequisites

Before reading any further, I recommend that you should have some understanding on:

Network traffic
IP Packets
Layers of the OSI model (focus on layers 2 and 3)
UDP and TCP protocols
IP precedence and type of service fields

Definition of terms

Below are some of the terms you shall encounter through this article:

Buffers - these are physical storage areas that temporarily hold data as it’s transferred from one location to another.
Jitters - this refers to the delay inconsistency between packets that differs over time when a signal wanes.
Latency - latency is the time it takes for a packet to be sent from its source to its destination.
Bit rate - the number of bits sent over a network per second.
Packet rate - the number of packets being sent per second.
An ingress queue - it holds packets till a router’s CPU pushes the data to a suitable interface.
An egress queue - it holds packets that a router serializes onto an Ethernet cable.

Understanding Quality of Service (QoS)

Networks have become an important asset in today’s world. Networks allow their users to share files, data, and other types of information. Thus, you can optimize your network to ensure that it performs at its full potential. QoS is an essential set of technologies that allows a user to optimize their network so that it can run at its full potential.

The importance of having a peak-performing network is it ensures that intensive applications run efficiently due to the availability of adequate network resources. In this article, we will explore what is Quality of Service and its importance to a network.

What Is QoS

QoS is a group of technologies that allow a user to manage their network’s traffic, thus guaranteeing the optimum performance of essential applications in their workplace or home. Through QoS, you can be able to prioritize network traffic, control jitters, and lower latency.

Furthermore, QoS allows you to optimize the performance of specific applications on their network and gain visibility into their network’s bit rate and packet rate. Lastly, you can configure how packets are routed in your network to avoid transmission delays.

How Does QoS Work

QoS utilizes a set of various techniques to guarantee the optimal performance of critical applications such as VoIP, video conferencing, and online gaming. Some of these techniques are the resource reservation protocol (RSVP), queuing, and traffic marking.

Traffic Marking

QoS works by identifying the various applications or activities that would benefit from managing a network’s traffic. After identifying these applications, QoS marks the specific traffic that needs managing. Marking the network’s traffic allow routers to create separate virtual queues for each application.

There are various ways in which routers mark network traffic. These ways include Class of Service (CoS) and Differentiated Services Code Point (DSCP).

Class of Service (CoS)

Class of service is a 3-bit field found in an Ethernet frame header when one uses the 802.1q networking standard that supports virtual local area networks (VLAN) on an 802.3 Ethernet network.

CoS marks a network’s traffic at layer two by altering the class of service bits found in frame headers. Adjusting the class of service bits allows QoS to know what traffic to manipulate and how to manipulate the traffic.

Thus, bandwidth-intensive applications will fall first in the queue as routers will reserve the network’s bandwidth for these applications.

Differentiated Service Code Point (DSCP)

DSCP is a section in an IP packet that assigns varying levels of services to a network’s traffic. Giving varying levels of service is achieved through tagging a DSCP code to each packet on the network and matching it with the equivalent level of service. DSCP marks packets in the layer three packet header.

Queuing

Queuing is the process of making policies that provide special treatment to various data streams over others. The process is made possible by utilizing special high-performance memory buffers found in switches and routers called queues.

What is a Queue

A Queue is a high-performance buffer in a router or a switch that holds traffic until it can be processed or serialized. Routers and switches have two types of hardware queues, ingress (inbound) and egress (outbound) queues.

Hardware queues are characterized as standard or strict priority queues. The standard queues treat all traffic as equal. In these queues, no traffic receives special treatment.

On the contrary, the strict priority queues are dedicated to high priority traffic; thus, QoS-enabled interfaces utilize this type of queue to process high priority packets.

How High Priority Traffic is Processed

When routers receive traffic, any packets marked with a higher DSCP or IP value than others are directed into the strict priority queues.

Here, traffic marked as high priority is processed faster than other traffic, thus increasing your network’s performance and reducing the chances of routers dropping packets during congestion.

Resource Reservation Protocol (RSVP)

RSVP is a transport layer protocol that reserves network resources to get varying Quality of Service levels for an application’s data streams. The protocol accomplishes its task by sending out RSVP messages from a source to a receiver and vice versa.

RSVP messages are classified into two: path and reservation messages.

Path messages are sent from a source to a receiver by storing the path state at each node in the message’s path. The path states direct a receiver to reserve network resources on each node that it passes on the network.
Reservation messages are sent from a receiver to a sender along the route of the path message. These messages identify the resources required by a data stream.

Importance of QoS

It guarantees the optimal performance of applications that need high bandwidth for real-time traffic.

Applications such as video conferencing applications, VoIP, streaming applications, and online gaming are some of the particular applications that are bandwidth-intensive and highly sensitive to jitters and latency.
QoS helps prevent delays in sensitive applications operating on a network. These applications usually favor UDP protocol over TCP protocol. The UDP protocol is favored over TCP because packets get transmitted in an ordered stream.

Furthermore, the UDP protocol differs from the TCP protocol because the protocol does not retransmit data packets that get corrupted or lost during transmission.

The lack of retransmission in UDP applications creates the need for a QoS-supported network that has low instances of jitters and minimum latency, thus reducing delays that can result in choppy audios in an IP call or sketchy videos in a video stream.
QoS makes it possible to plan and manage network resources. Planning allows a person to prioritize traffic, applications, data flows, users, and network resources, thus ensuring optimal performance. Additionally, planning reduces costs and the need to invest in link expansion.
QoS enhances the user experience. Since QoS guarantees the optimal performance of critical applications, enterprises that utilize the technology report an increase in employee performance and satisfaction. This results in tasks being completed to the required standards and in due time.

Conclusion

In this article, we learned what Quality of Service (QoS) is, how QoS utilizes techniques such as traffic marking, queuing, and the resource reservation protocol to guarantee the optimal performance of critical applications on a network.

Additionally, we learned the importance of having QoS enabled on a network. I consider QoS as an essential technology that should be in-built into any router or switch that will be produced in the future. I found learning about these technologies to be fascinating. I hope you gained some insight on how you can speed up your network without the need to upgrade your network's bandwidth.

Until next time, happy reading!

DEV Community: David Sudi

Struggling with Django's HTTPS development server issues? I have written a simple guide to expose your Django project securely using ngrok.

Exposing Your Django Project to the Internet Using Ngrok

David Sudi ・ Jan 3

Exposing Your Django Project to the Internet Using Ngrok

What is Ngrok?

Prerequisites

Step-by-Step Setup

1. Install the pyngrok Package

2. Configure Django Settings

3. Start Your Django Server

4. Authenticate and Start Ngrok

5. Testing Your Setup

Other Use Cases for ngrok

Troubleshooting Tips

Related Resources

Respond to Me: The Art of Making Responsive Websites

Prerequisites

Goal

Definition of terms

Understanding What Responsive Web Design Is

A. Add Limits to Make The Viewport Responsive

B. How About Giving Responsive Images a Shot?

i. The max-width property

ii. The object-fit Property

C. Responsive Units Are Better Than Fixed Units

D. Unleash the Strength of Media Queries

E. Try Responsive Layouts Like Flexbox and Grid

i. Flexbox

ii. Grid

Benefits of RWD

Join the RWD Revolution to Improve your Users' Experience

Join the conversation!

Understanding Quality of Service (QoS)

Prerequisites

Definition of terms

Understanding Quality of Service (QoS)

What Is QoS

How Does QoS Work

Traffic Marking

Class of Service (CoS)

Differentiated Service Code Point (DSCP)

Queuing

What is a Queue

How High Priority Traffic is Processed

Resource Reservation Protocol (RSVP)

Importance of QoS

Conclusion

i. The `max-width` property

ii. The `object-fit` Property