DEV Community: dow2

Introduction to Django

dow2 — Wed, 31 Aug 2022 07:27:37 +0000

Today I would like to discuss with you one of Pythons most popular framework if not the most popular framework, Django. Django is described as a high level web framework with capabilities that enables the rapid development of secure, scaleable, and maintainable websites. Django follows a model template views architectural plan. Before getting too deep with the ins and outs of the Django framework I would like to give a little pretence and context to the programming language it is built on, Python.

Python is an interpreted general purpose programming language which is dynamically typed and garbage collected. Python was first released in 1991 as Python 0.9.0 and is currently on Python 3.0 which was released in 2008. More specifically we are on version 3.9.12 which was released in 2022. The language was created by Guido Van Rawson in the Netherlands, his original intention was for it to be a successor to the ABC programming language. Python is thought to be a beginner friendly programming language which has gone on to make it one of the most used programming languages today.

Now that you have a general understanding of the programming language that Django was built upon we can dive a little deeper into why the framework was created and the features that make it useful to adopt. Django was created by Simon Willison and Adrian Holovaty. Adrian and Simon were enamored by Python more specifically mod_python however they were not convinced that it would scale so they began developing what would become known as the framework Django with the intention of creating a thin abstraction layer between mod_python and the code that they were developing for their newsroom.

Today I would like to provide a general introduction to the features that have made Django the most popular framework on one of the most popular programming languages. Some key concepts I would like to discuss are Apps, Views, Url Routing, Template Language, Models, Django Orm, Admin Panel, Static Files, Authentication, Django Commands, and Signals.

Apps

At the heart of every Django project is the utilization of Apps, which are small pieces of our project which come together to make our website. Apps represent different parts of our website. Apps would be housed in a main project folder and registered in projects settings file.

Views

Python functions that takes http requests and returns http response.
Can be written as Class Based or Function Based.
Function based views are considered easier for beginners and in most cases the documentation is written using function based

URL Routing

To create URL Routing we make a list of url patterns and set different paths to those views.
This is how Django knows which view to display when a user visits a certain url Django runs through each URL pattern, in order, and stops at the first one that matches the requested URL
Once one of the URL patterns matches, Django imports and calls the given view
Use the path function, set a url route and assign an associated view

Template Language

Most web frameworks have a template system that allows the developer to separate the presentation layer from the application logic
Django mainly functions with a backend so, in order to provide a frontend and provide a layout to our website, we use templates.
a convenient way to generate HTML dynamically.

Models

Class based representations of our database tables
Considered to be the core of how we design our database
Class represents a table and each attribute represents a column in the table

Django ORM

Django has a built in ORM or Object Relational Mapper for communicating with and manipulating the Database
Uses methods like get(), all(), and filter() to interact with the database.

Admin Panel

A quick start interface designed to help us work with our data
Reads metadata from your models to provide a quick, model-centric interface where trusted users can manage content on your site.
Can view, create, and update any data in our database
High customizable to fit a particular users needs

Static Files

Websites generally need to serve additional files such as images, JavaScript, or CSS.
In Django, these files are referred to as “static files”.
Django provides django.contrib.staticfiles to help manage these files.
Django has practices set in place for serving these files

Authentication

Django comes with a built in user authentication system.
It handles user accounts, groups, permissions and cookie-based user sessions.
Handles both authentication and authorization.
Authentication verifies a user is who they claim to be, and authorization determines what an authenticated user is allowed to do.
Makes handling Login, LogOut, Change Password and User Registration easier undertakings

Django Commands

Powerful Commands built into the Django framework
I will list 5 useful commands every Django Programmer should know

startproject
startapp
makemigrations
migrate
createsuperuser

Django Signals

Powerful tool used for listening for events that may occur inside of our Django Application.
Uses ‘senders’ and ‘receivers’ to listen for events and fire off actions.
Signals allow certain senders to notify a set of receivers that some action has taken place.

Rest API vs GraphQL

dow2 — Tue, 30 Aug 2022 00:51:46 +0000

If you are deep enough into the study and practice of software development to have come across the concept of Application Programming Interface or API for short then I am more than sure you have come to grips with the fact that there is far more than one way to accomplish a specific goal. The topic we are going to discuss today is not exempt of this basic fundamental truth of development, so we will preface this discussion by admitting that the desired outcome in the implementation of API's could be executed in both restful and GraphQL API's however, the way you go about achieving the desired effect differs greatly. My main task today is to highlight these differences and provide context for when you might want to use one or the other.

First what is an API?

An application programming interface is a way for two or more computer programs to communicate with each other.
It is a type of software interface, offering a service to other pieces of software.
A standard used to describes how to build a connection or interface is called an API.
A contract between an information provider and an information use which establishes the content required from the consumer and the content required by the producer… the req and res

In the early 2000's a group of expert developers came to the conclusion that the state of web API's could benefit from a rework in how they were created and implemented into applications. This realization led to the creation of RESTful API's. Due to the fact that there was no industry standard, API's as a whole were comprised of hard to handle complex protocols usually in the form of SOAP. The original goal in the creation of RESTful API's was to to come with a standard that allowed two servers to communicate and exchange information anywhere in the world.

The first early mainstream adopters were Ebay and Amazon in the early 2000’s. These companies benefited greatly due to the fact users could see listings and other pertinent info about the company without explicitly being on the companies website as long as the user was on a website which utilized the rest api.

Characteristics of Rest

Has multiple endpoints

GET/users
Post/products

Exchanges JSON Data
Can work with all server-side and front-end frameworks or languages
Stateless
URL- Driven - Uses HTTP Verbs along with endpoints and possibly a body to interact with and send data from a server to a client

Just as in the early 2000’s when Restful API’s were invented to deal with the shortcomings of using raw soap protocols, in 2012 a team of Developers at facebook came up with GraphQL to deal with the shortcomings of the decade old REST practices. It had been widely discovered by this point that restful apis often over fetched and under fetched resources due to their use of multiple endpoints. During development of facebook's news feed feature the shape of the data assumed by the front-end was different than the one being sent by the back-end APIs, creating the need for a new way of passing data along from client to server… GRAPHql was created in response to this problem. GraphQL is a static strong-typed query language which allows clients declaratively specify their data requirements. Clients specify the shape of the data that they need and the server responds back with the exact same data as the response.

Characteristics of GraphQL

Has one endpoint

POST/graphql

Exchanges JSON Data
Can work with all server-side and front-end frameworks or languages
Stateless
Query Language driven
Uses HTTP Verbs along with a single fixed path and a body consisting of a query language

Example of GRAPHql Query and Response

Awesome Css Frameworks...

dow2 — Mon, 01 Aug 2022 10:33:00 +0000

Figuring out a complex code problem or achieving the functionality you intended on are possibly some of the rewarding and gratifying parts of software engineering. You could write some of the most elegant code ever written containing some of the most efficient functions one could possibly write but without adding styling to your code the user might not notice the impact of this beautiful code you have written due to fact it does not contain a proper visual element to compliment the 'magic' taking place behind the scenes. Fortunately there is a way connect these two essential pieces of the puzzle by using Cascading Style Sheets or CSS. CSS is one of the core technologies used in the construction of web based Applications.

Today I am going to go over what CSS is and what is its role of the overall creation of applications. Cascading Style Sheets is the technology used for describing the visual representation presented on your application. There are 3 distinct ways of writing and implementing CSS.

Inline CSS
Embedded CSS
External CSS

Inline CSS - When you write the css directly into body of the HTML element you with to apply the styling to.

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <h1 style="color: blue; text-align: center">This is a heading</h1>
    <p style="color: red">This is a paragraph.</p>
  </body>
</html>

Embedded CSS - When you write the css in a style element locate in the head of the html document.

<!DOCTYPE html>
<html>
  <head>
    <title>Embedded CSS</title>
    <style>
      body {
        background-color: linen;
      }

      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

External CSS - is when you create and independent style sheet css file that contains all written css in a single location that is referenced in your HTML file.

<!DOCTYPE html>
<html>
  <head>
    <title>External CSS</title>
    <link rel="stylesheet" href="mystyle.css" />
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

mystyle.css

body { 
    background-color: lightblue; 
} 

h1 { 
    color: navy; 
    margin-left: 20px; 
}

Dedicating time to learning the ins and out of raw css can be an extremely daunting yet rewarding and beneficial task. You can essentially make your application do whatever you can imagine through the the creative implementation of css rules. Getting familiar or even proficient with subtle nuances of CSS rules can be an extremely time consuming task. In an attempt to streamline this process and give users a more refined path for for styling web pages FrameWorks containing best practices and premade styling combinations and features were created.

There are multiple different css frameworks separated in different categories which are utilized in different situations.

Base / Reset / Normalize

sanitize.css
modern-normalize
minireset.css
modern-css-reset
inuitcss
ress
Natural Selection

Class-less

Water.css
MVP.css
sakura
Tacit
awsm.css

Very Lightweight

Pure
Milligram
Picnic CSS
Chota

General Purpose

Bootstrap
Bulma
Foundation
UIkit
Primer
Carbon Components
Fomantic-UI
Pico.css
Blaze UI
Base
Cirrus
turretcss
Vanilla Framework
PatternFly
HiQ

Material Design

Material Components Web
MUI

Utility-based

Tailwind CSS
Tachyons
Open Props

Specialized

NES.css
98.css
Tufte CSS
Gutenberg
Bojler
TuiCss

Diving into Dev Tools

dow2 — Thu, 04 Nov 2021 15:43:25 +0000

So if you have made it this far in your coding career to have stumbled upon the concepts of Dev Tools you have probably been debugging your code like a caveman using the primitive console.log() method... If that is the case then today I come to you bearing gifts, the gifts of Developer Tools!!!!

There are many different task you can perform with the wide array of DevTools Available to you for the purpose of todays post we will discuss them in relation to debugging your code.

The first section of the Dev Tools toolbox we want to get familiar with is going to be the sources panel. To get there we want to right click on the page in google chrome and click inspect page... alternatively you can press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). Once the Dev Tools panel appears you can click on the sources tab, and wal lah...

The sources panel is comprised of 3 parts. The first is called the File Navigator pane which list every file that the page request. The second being the Code Editor which displays the contents of the files we selected with our File Navigator. The third part being the JavaScript Debugging pan which is comprised of multiple tools used inspecting the pages javascipt.

As apposed to console.log()ing every time we want to see whats going on with our code through the help of Dev Tools we can now add breakpoints at specific parts of our code and accomplish the same task only far quicker.

With DevTools we can use EventListnerBreakpoints to pinpoint specific events in our code which can help us debug quicker and with more accuracy when utilized correctly. This is simply one of the many breakpoint types available in your ToolBox.

Another useful trick in our ToolBox is ablility to step through and even over certain blocks of code and function calls. This gives you the power to use a breakpoint and stop the code even closer to your actual error or bug.