Web and Mobile Development articles
Hello from Yet Another Blogger! My name is Rishabh, a freelance web developer from India. I’ll use this blog to post some tips and tricks that I learn while working on various projects (personal or for clients). Some articles might also get into the details of several interesting topics, but I’ll try to keep them precise so that you can read quick, learn and get to work.
Quite excited about this!
Located in San Francisco, United States, Cloudflare provides Content Delivery Network (CDN) services, internet security, distributed domain network services, internet security and Distributed Denial of Service (DDoS) mitigation services. One of the largest internet networks in the world, Cloudflare works closely with website owners, bloggers, non-profit organizations and others.
History
It was in 2009 that Matthew Price and Michelle Zatlyn founded this company. Initially, the focus of Cloudflare was to secure email owners from pernicious attacks. Over a period, the founders realized that slow speeds of websites had a direct correlation with internet security, and this is how the modern version of Cloudflare was born.
Today, this product helps accelerate internet applications, mobile experiences and ensures the availability of applications. Cloudflare works very closely with SaaS, E-commerce companies, publishers, and the public sector. It is well integrated with IBM Cloud, WordPress, WP Engine, Rackspace, Magento, Google Cloud, Acquia, Microsoft Azure, and Kubermetes.
As of now, this company is used by 8 million website owners to make their internet presence better, and more secure.
1. Content Delivery Network services- Cloudflare helps websites load up quickly. When a visitor types the name of a website inside the search bar and presses ENTER, Cloudflare compresses the delivery time between the servers to the visitor.
On the internet platform, information is stored in several geographically remote servers. A CDN like Cloudflare figures out the shortest path for the data from the servers to the end user. If you have an E-commerce website, having a CDN is crucial for conversions. Many web hosting providers have CDNs included in their plans. Nevertheless, you can also ask your hosting reseller for this functionality while configuring your website.
2. Internet Security – Cloudflare also makes your website, APIs, and stored data safe and secure against bots, denial of service attacks and data breaches.
A denial of service attack is triggered when a website is attacked by anonymous visitors from several locations to bring it down. These attackers cannot be identified at all and their sole purpose is to make the attacked website completely non-functional. Cloudflare has 180 data centers in 76 countries and has a cumulative capacity of 30 terabytes. This capacity is used by Cloudflare to dilute the DDos attacks.
Coming to security, Cloudflare has a quite a few products that safeguard your online presence. Some of them are:
a)Argo Tunnel- This lightweight product creates a virtual tunnel between your origin web server and Cloudflare’s nearest data center without exposing any inbound ports.
b) SSL/ TLS encryption- Cloudflare’s Transport Security Level encryption establishes HTTPS connections between the visitors and origin servers thereby preventing man-in-the middle attacks , packet sniffing etc. This product also displays trust warnings to visitors periodically.
Is Cloudflare really this good?
According to this internet security company, websites that use Cloudflare load twice as fast, and use 60% less bandwidth. Another thing that goes in favour of this product is that it merges internet security and content delivery effortlessly.
Pricing for this product starts free. As you begin discovering its benefits, you may like to subscribe to Cloudflare premium plans.
CherryPy is an open source, fast, and stable python web framework that allows the developers to build the web applications. The developers can build the web applications as the way they would build the other object-oriented python programs. Many developers still haven’t heard this simple, Continue reading “An introduction to CherryPy, a lightweight Python web framework”
Those who have made use of the cd command through a terminal application on their own operating system, have probably made use of a relative path, an absolute one or both of them. Based on my personal experience with the command line, the cd command is a Unix based one and it helps the user to navigate their filesystem through the terminal application. The cd command takes the path of the file as an argument.
For example, the following command helps the user to change their current working directory to the Desktop.
Python is a high level computer programming language which comes with many already builtin tools that help the coder to accomplish almost any task, they need to. Being an object oriented computer programming language, some of the Python objects have a length, which can be easily accessed with the help of the Python builtin utility called len().
Python objects that have a length are strings, tuples, lists and dictionaries. One can easily use the Python builtin function len() to find the length of an object which supports one.
According to the official Python documentation, the Python builtin function len(), stands for the length of an object in Python computer programming language. As I have mentioned in earlier tutorials related to Python, the Python computer programming language is easy to read, like a human language.
The following is the syntax which can be used to utilize the Python builtin function len(), with the main purpose of finding the length of an object.
len(Python object which supports length in here)
With the main purpose of illustrating the usage of the Python builtin len() utility in a practical example, I am creating the following string.
website = ‘codetheory.in’
To find the length of the above Python string, the Python builtin len() utility can be easily utilized like shown below.
len(website)
When the above piece of code is being run in the Python shell, in interactive mode, the following is being displayed on the console. It is the number of the characters found in the string ‘codetheory.in’.
13
As mentioned earlier in this article, Python objects such as tuples, lists, and dictionaries have a length too. To give other practical examples of the Python len() utility in action, I am building the following objects.
t = (1, 2, 3)
l = [1, 2, 3, 4, 5]
d = {‘profession’: ‘coder’}
In the above Python code, there are three objects being declared: a tuple, a list and a dictionary. One can easily find the length of each one of the above Python objects by using the builtin len() utility in Python computer programming language; like shown below.
length_of_tuple = len(t)
length_of_list = len(l)
length_of_dictionary = len(d)
To print the length of each of the Python objects declared about, make use of the Python print statement like shown below.
print(length_of_tuple)
print(length_of_list)
print(length_of_dictionary)
The Python computer programming language comes with many already builtin tools which can ease the work of the coder and speed up the process of development. One of them is the len() function, which can be used to find the length of a Python object which supports one.
Django is a great web application development framework for the perfectionist with deadlines built in python programming language. It provides a very good structure and common methods that help to do the heavy lifting when writing web applications.
If you have never used django before and are looking for an installation guide on your Ubuntu 14.04 LTS then you are in the right place. Through this article we will teach you how to setup a very simple django development environment step by step.
There are many different ways to install the django framework in Ubuntu. In order to stay updated with the latest python development industry standards we need to install a few tools before getting Django up and running on our machine.
The first tool is called pip which is a very practical python package management system widely used by python developers all over the world. I mainly use pip to install packages for my python projects, generate dependencies of a project and also uninstall different python packages from my machine when they are no longer required.
Before installing pip we highly recommend to our users to update the package index on their machine with the help of the command shown below.
sudo apt-get update
The following command can be used to install the pip python package manager inside Ubuntu 14.04 LTS.
sudo apt-get install python-pip
Now we can easily install python packages on our Ubuntu 14.04 LTS machine by following the syntax shown below.
pip install name-of-python-package-here
But we do not recommend installing packages yet! Python developers use another tool during the development of their python projects.
This tool is called virtualenv. It is really useful as it helps to manage dependency conflicts of different python projects on the same machine. In short words the tool virtualenv helps to create isolated virtual environments where you can develop without any worries about package conflicts.
To install virtualenv on Ubuntu 14.04 LTS the following command can be used.
sudo pip install vitualenv
What is the next step? Do we need to make use of the tool virtualenv? For sure!
virtualenv can be easily used to create isolated virtual environments for your python projects. For example to create a virtual environment under the name of venv1 the following command can be used.
virtualenv venv1
In order to work on an isolated environment it needs to be activated. The following command does it for you.
source venv1/bin/activate
But working with virtualenv is a bit annoying as there are many different commands you need to remember and type on your terminal emulator.
The best solution is to install and use virtualenvwrapper which makes working with python virtual environments very easy. Once you have finished installing and configuring virtualenvwrapper working on a virtual environment is as easy as typing the following command.
workon venv1
Now that pip and virtualenv tools are available on your machine it is time to install and configure virtualenvwrapper.
To install virtualenvwrapper use pip like shown below.
pip install virtualenvwrapper
There are a few steps you need to follow in order to do this properly. On your command prompt run the following command.
source /usr/local/bin/virtualenvwrapper.sh
All virtual environments you create will be available inside the directory ~/.virtualenvs.
If you want to keep your virtual environments inside another directory then use the following commands like shown in the official documentation of the virtualenvwrapper.
export WORKON_HOME=~/Name-Of-DIrectory-Here
mkdir -p $WORKON_HOME
source /usr/local/bin/virtualenvwrapper.sh
I like to keep my virtual environments inside ~/.virtualenvs. My projects are inside ~/projects.
To create a virtual environment just use the command mkvirtualenv like shown below.
mkvirtualenv linuxtuts
The following output is displayed on my terminal when executing the above command.
New python executable in linuxtuts/bin/python
Installing setuptools, pip...done.
To work on the virtual environment linuxtuts use the following command.
workon linuxtuts
Once the virtual environment has been activated your command propmpt will change. Mine looks like shown below.
(linuxtuts)oltjano@baby:~/Desktop$
As you can see from the output shown above linuxtuts is the name of the virtual environment we created.
In order for the commands offered by virtualenvwrapper to work anytime you open the terminal it is needed to make some changes in the .bashrc file.
The .bashrc file is used to setup environment variables, functions aliases and many other stuff you want to have when opening a new terminal window. Read more on .bashrc.
Open the .bashrc file with your text editor, copy paste the following in it and then save the file.
export WORKON_HOME=$HOME/.virtualenvs
source /usr/local/bin/virtualenvwrapper.sh
Inside the virtual environment use the command which python to see the python executable you are using.
which python
The above command produces the following output on my machine. Depending on the name of your directory for the virtual environments you will get a different output, but structured in a very similar way.
/home/oltjano/.virtualenvs/linuxtuts/bin/python
The above output is telling us that the python executeable being used is inside the virtual environment which in this case is linuxtuts.
Deactivate the virtual environment with the command deactivate.
deactivate
Remove the virtual environment linuxtuts with the help of the following command.
rmvirtualenv linuxtuts
The reason why we decided to remove linuxtuts is because we did not choose the version of python we want to use inside the virtual envrionment we created.
It can be done with the following command.
mkvirtualenv -p /usr/bin/python-version-here
In a project I am working on we use python3.2. To run the project I create a special environment for it.
mkvirtualenv -p /usr/bin/python3.2 linuxtuts
The above command produces the following output.
Running virtualenv with interpreter /usr/bin/python3.2
New python executable in linuxtuts/bin/python3.2
Installing setuptools, pip...done
Also creating executable in linuxtuts/bin/python
The command prompt will look similar to mine.
(linuxtuts)oltjano@baby:~/Desktop$
You can use any python version required by your project. The installation of django is very easy.
Just run the following command.
pip installl django
The above command produces the following output.
You are using pip version 6.0.7, however version 6.0.8 is available.
You should consider upgrading via the ‘pip install –upgrade pip’ command.
100% |################################| 7.4MB 40kB/sCollecting django
Downloading Django-1.7.6-py2.py3-none-any.whl (7.4MB)
Successfully installed django-1.7.6
Installing collected packages: django
To install a different version of django than the default one specify the version like shown below.
pip install Django==1.0.4
It is up to you which version of python and django you want to use for your projects. Our mission is to help how to install them.
After you have finished the installation of django in a virtual environment you probably want to start your first project.
Fortunately for us django offers management tools for your projects. The django-admin.py tool can be used to start the project.
Create a fresh virtual environment for your new project.
mkvirtualenv -p /usr/bin/python2.7 fresh_project
Note: Depending on the version of python you want to use you need to change the path listed above.
Install a new copy of django inside your virtual environment.
pip install django
Use the following comand to start a fresh django project.
django-admin.py startproject fresh_project
Then cd to your project directory and list the files inside your project. The directory structure will be similar to the one shown below.
fresh_project manage.py
The manage.py ,is another tool you have to use on your django projects. Each django project is composed of apps.
You can create a new app with the following command.
python manage.py startapp myapp
If you do an ls now the directory structure should look like the one shown below.
fresh_project manage.py myapp
It is always a good idea to generate the requirements.txt file for every project you write in django so when you show it to your friends or want to run the project in another machine you can easily install the needed packages to run the project.
Create a new file called requirements.txt on the top level directory of your project and append the packages in there using the following syntax.
django==1.9.5
As you can see from the above command you append the package name then you add its version which really important.
If you do an ls now inside your project you should get the following.
fresh_project manage.py myapp requirements.txt
And you install the requirements for the project on a new machine by using the following command.
pip install -r requirements.txt
Are you asking yourself how to run the django project? Just run it using the following command which starts the builtin django development server.
python manage.py runserver
And then visit http://127.0.0.1:8000/. You will get a message from django congratulating you running your first django project like shown in the following screenshot.
Knowledge on tools such as virtualenv and virtualenvwrapperis a must for a python developer. In this article I showed you how to install django on Ubuntu 14.04 LTS and also how to setup a very basic django development environment.
A good social media share button has to be aesthetically pleasing and really accessible — you have to make your users want to click the buttons and share your content (a good hover effect with a clean CSS transition never hurt, either). In this tutorial, we’ll show you how to make simple but beautiful social media share buttons using Font Awesome icons that come complete with a smooth hover effect. The best part about this tutorial is that it really requires relatively little code, so it’s a pretty quick and simple way to add a whole lot of style and professionalism to your projects.
To start, we’ll need some HTML for our buttons. They’re going to be standard anchor tags that contain icon tags so we can use the social media platform’s logo icon with each corresponding social media share button. Because we’re using Font Awesome, we need to make sure that we link to the icon library somewhere in our files, either by using CSS’s @import rule, or by adding the following code into the <head> of our HTML file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
To create the buttons, your HTML should resemble the following code:
<div class="container"> <a class="share facebook" href="#"> <i class="fa fa-facebook"></i> Share </a> <a class="share gplus" href="#"> <i class="fa fa-google-plus"></i> Share </a> <a class="share twitter" href="#"> <i class="fa fa-twitter"></i> Tweet </a> <a class="share stumbleupon" href="#"> <i class="fa fa-stumbleupon"></i> Stumble </a> <a class="share pinterest" href="#"> <i class="fa fa-pinterest"></i> Pin it </a> <a class="share linkedin" href="#"> <i class="fa fa-linkedin"></i> LinkedIn </a> </div>
Here, we’re creating share buttons for Facebook, GooglePlus, Twitter, Stumble Upon, Pinterest, and LinkedIn. However, if you want to customize this code for your own projects, feel free to add as many social media platforms as you like — Font Awesome has icons for just about every social media network that has ever been even a little bit popular, so you have a lot of options.
Now it’s time to add some major styling to our HTML and turn the plain links into something resembling buttons. Here’s the CSS you’ll need to achieve this:
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
body{
font-family: 'Ubuntu';
text-transform: lowercase;
background-color: #d1e0e0;
}
.container{
text-align: center;
width: auto;
margin: 75px auto;
width: 55%;
}
.share {
float: left;
padding: 10px 15px;
border: none;
background-color: #ececec;
text-decoration: none;
font-size: 14px;
color: #FFF;
z-index: 1;
transition: transform .1s ease-in;
}
.share i{
font-size: 18px;
padding-right: 5px;
}
.facebook {
background-color: #3b5998;
}
.gplus {
background-color: #dd4b39;
}
.twitter {
background-color: #55acee;
}
.stumbleupon {
background-color: #eb4924;
}
.pinterest {
background-color: #cc2127;
}
.linkedin {
background-color: #0077b5;
}As you’ll probably notice, the background of each button is a different color, and these colors reflect the logos and brands of the social media platforms that the buttons correspond to. You’re free to customize this code however you like, but if you want your buttons to stay on brand, then you may choose to keep the colors as is.
You also might notice that we added a transition property to the buttons. This will come into play when we add the hover effect, which is our next and final step. Right now, our buttons should look something like this:
It’s a beautiful sight.
We’re almost done, we just need to add one little finishing touch, because what’s a good button without a hover effect? Here, we’ll finalize our social media sharing buttons by giving them an effect that makes the buttons smoothly increase in size (thanks to our transition rule from earlier) when the user hovers over them. This effect sort of makes it look like the buttons are popping out at you, but in a smooth way that makes it quite fun to hover over them.
Here’s the CSS you’ll need:
.share:hover {
transform: scale(1.3);
z-index: 2;
}That’s it. All we need to do is transform the scale and make sure we give the buttons a higher than default z-index (otherwise they will grow in size but won’t show up over the other buttons) and our social media sharing buttons are ready to be included in our projects. Here’s how it looks when you hover over one of them:
