DEV Community: SpeedySense Editorial

Install Django on Ubuntu 18.04

SpeedySense Editorial — Thu, 31 Oct 2019 05:30:35 +0000

Django is a free and open-source high-level Python web framework that encourages developers to develop fully-featured Python Web Applications. Using Django you can build secure, scalable and maintainable web applications.

Django framework wrote a well structured that helps to do quickly create Python web applications. It provides higher security for the application and avoids developers for making many common security mistakes.

There are different methods to install the Django framework on Ubuntu:

Install Django with pip in a virtual environment
Django install from packages
Install Django from GitHub Repo

In this tutorial, we are going to install Django on Ubuntu 18.04 using Python Virtual Environment. The best thing to use Python virtual environments is to create an isolated environment for different Python projects.

Here is a step by step instructions for how to install Django in a Python virtual environment on Ubuntu 18.04. Before we start to install Django on Ubuntu 18.04 you must have the non-root user with sudo privileges.

Prerequisites
First, Install tree package to better understand on our further tutorial.

sudo apt install tree

Install Python 3
Python 3.6 by default installed in Ubuntu 18.04. You can verify the Python 3 is installed in your system using the following command.

python3 -v
The output should look like below. Please note that the version number may vary.

Python 3.6.8

Install pip3 Package
Next, Install pip package from the Ubuntu repositories.

sudo apt install python3-pip

Install virtualenv modules

sudo pip3 install virtualenv

Create and Activate Virtual Environment

mkdir django_app && cd django_app
python3 -m virtualenv env_name
source env_name/bin/activate

Install Django
pip install Django

Create First Django Project
django-admin startproject firstapp

That all you need to know how to create a Python virtual environment. Furthermore, we are going through step by step Django installation in Ubuntu 18.04. Even more, we see how to migrate the database, and create a superuser for Django.

Bootstrap Vertical, Horizontal, and Inline Form

SpeedySense Editorial — Wed, 18 Sep 2019 06:48:35 +0000

Bootstrap form layout vertical form, horizontal form, and inline form will be discussed in this article. Forms are an essential part of almost every website to collect user input data. In this article, we will learn how to create a form using the Bootstrap CSS framework. We are cover both Bootstrap 3 and bootstrap 4 forms layout.

Bootstrap 4 Form Layouts
Bootstrap provides two types of form layouts. Moreover, you can create a horizontal layout using Bootstrap 4 helper class:

Stacked form (full-width form) - Use form-group class in wrapper element and each form elements add .form-control class to create stacked structure.
Inline form - To create inline form add form-inline class to the element. Moreover, all form elements are left-aligned with screen view-ports at least 576px wide. Below 576px screen, it will be stacked automatically.
Horizontal Custom Form - All labels and form controls use col-md-* to make a two-column horizontal layout. And it will wrap between between form-group and row class <div> container. All labels and input fields are left-aligned in single row.

Bootstrap 3 Form Layouts
Bootstrap provides three types of form layouts:

Vertical form (this is the default) - This is the default Bootstrap form layout in which all input fields and labels are vertically aligned. There is no need any extra Bootstrap class applied on form and their child elements. Let’s create a simple Vertical form layout.
Horizontal form - To create a horizontal form, all labels and input fields are left-aligned in a single row. Only you need to add a form-horizontal class in <form> element. And all labels and form controls use col-md-* to make a two-column horizontal layout. Quickly check the horizontal form layout.
Inline form - All form elements are left-aligned with screen view-ports at least 768px wide to applies. You need to add additional class form-inline to the <form> element. Let’s see the Bootstrap 3 inline form layout.

Notes:

Bootstrap control-label and form-control classes are used to style the labels and form elements respectively.
To control the textbox sizes you can use input-lg and input-sm classes.

How to Change Author URL Slug in WordPress Without Any Plugin

SpeedySense Editorial — Mon, 02 Sep 2019 09:06:05 +0000

WordPress default Author URL slug same as Author username. Thus, anyone can know the username of the Author. For security reasons, you want to hide your real username from Author URL slug. In this article, we are discussing How to change Author Slug is the last part of the Author URL without any plugin.

Change Author URL Slug in WordPress
For example, Our Author URL of this site is
https://speedysense.com/author/sseditorial

And our Author slug is “sseditorial”. We have to change Author slug “speedysense” to make our new Author URL of this site is
http://speedysense.com/author/speedysense

WordPress already have a username and nicename fields. username is used to validate login. However, nicename is used to create Author Permalink and Post Permalink. When creating a new user, WordPress automatically generates the nicename (same as given username). Once the user created, you can not change username later in the admin area. Thus, we display nicename in the User profile screen.

Let’s see how to change nicename to anything unique that you would like without using any plugin. Here you can read full artilce as well shotcode.

Difference between Bootstrap 3 and Bootstrap 4

SpeedySense Editorial — Mon, 19 Aug 2019 09:36:13 +0000

In this article, we’ll discuss What the Difference between Bootstrap 3 and Bootstrap 4. Currently, Bootstrap 4 is the latest version of Bootstrap. Bootstrap new version has come up with some significant changes, adding new components, eliminate others.

Probably Bootstrap is the first choice of front-end developers. As we know Bootstrap is a trusted open-source framework to develop a modern website and applications quickly. A most popular HTML, CSS, and JS framework for developing responsive websites.

Bootstrap provides the basic structure of HTML and CSS with predefined classes, which help you to build functionality quickly and easily with device responsiveness. Thus, It saves plenty of times. For example, no need to start developing from scratch.

Main Differences between Bootstrap 3 vs Bootstrap 4

1. Global Changes

Switched from LESS to SASS for source CSS files. Because SASS is more potent than LESS. For example, SASS has functionality like logical operators, loops, nested media queries, mixin, class extend, and many others. Thus, SASS gives better comfort. SASS help you to keep large stylesheets well-organized and makes it easy to share design within the project. You can also read about the SASS official tutorial.

2. Grid Systems

3. Navigation

4. Images and Media Objects

5. Tables

...
...
...

15. Other Components

Read full article on here

Var vs Let vs Const in Javascript

SpeedySense Editorial — Mon, 24 Jun 2019 05:55:17 +0000

In this article, we explain the var vs let vs const in JavaScript. Also, we will look difference between var, let, and const Keywords in JavaScript. All these three keywords used to create variables in JavaScript. First of all, you must understand the var keyword to grasp the benefits of let and const keywords. So let’s start one by one.

Var vs Let
First, The main difference between var and let keyword, var is follow function scoped while let is follow block scoped. var can be available either in the global scope or function scope. let can be accessible only in enclosing block {} like in a for loop or if condition.

Let vs Const
const keyword is almost the same as let keyword except only one difference. You can’t reassign value to const variable. If you try to reassign value it will throw syntax Error (value has already been declared).

Here is great article you must have to read. Link to article: var vs let vs const in JavaScript