Random - Code Theory

How to find the length of an object in Python

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)

Final thoughts

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.

How to install Django on Ubuntu 14.04 LTS for python geeks

About Django

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.

Some Tools We Need

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!

Create A Virtual Environment For Your Project

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.

Make the changes permanent

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

Install Django

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/s
Collecting 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.

Setup your first simple project in django

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.
django installation finished

Conclusion

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.

How to Create Social Media Share Buttons

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.

The HTML

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.

The CSS

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.

The Hover Effect

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:

Top 10 Free Sublime Text Themes

Sublime Text is a popular text editor that’s a favorite of many web developers when it comes to what tool they prefer to use to write their code. One of the many cool features of Sublime Text is that it allows you to totally customize its appearance by adding your own theme to it. This way, you’re really personalizing your coding experience. Another great thing about installing a theme to your text editor is that it can come with features and customizations that you wouldn’t normally get with an out of the box install of Sublime Text. Themes can optimize file trees, fonts, colors, positioning of features, and functionalities. What follows is a list of 10 of the coolest free themes to use to customize your Sublime Text editor.

Night

Night is a cool theme with a more subdued color scheme. Typically, Sublime Text default formatting colors are pretty bright, but Night’s are more dull.

2. Material Theme

Material Theme comes with lots of options for customization. It’s easy to install and activate, and it comes with almost a dozen of color scheme options to apply to your editor.

3. Tech49

Tech49 is a funky theme that adds a lighter color scheme to your Sublime Text text editor. Comes loaded with lots of ways to customize the way you right your code.

4. Agila

Agila is a colorful, popular text editor with a lot of cool features, one of which is the abundance of spacing between the folders in the file tree for optimum legibility and ease of use.

5. Sunrise

The sunrise theme has a blue color scheme that adds a unique palette to your text editor. It’s based on the Seti_UI theme and is easy to both install and activate.

6. Nil

Nil gives you the option to add a little lightness to your Sublime Text editor. If you choose to apply the light theme to your editor, the background will go from standard black to a lighter cream color. Additionally, the font is different from the standard Sublime Text font, so this theme can be used to really switch things up.

7. Freesia

Freesia is a beautiful pink and purple theme that was no doubt inspired by the colors of the beautiful and delicate flower for which it was named.

8. Soda

Soda is another theme that gives you the option to add a lighter aesthetic to your text editor. This one will turn the background of your editor from black to white, and change the default color of text from white to black.

9. Autumn

The Autumn theme offers a unique perspective on the file tree, adding stylized bullet points next to the file names instead of file icons, which is pretty unique among this list of themes.

10. itg.flat

itg.flat is a theme designed for retina displays and inspired by flat design aesthetics. It’s a cool, sleek, and modern looking theme to apply to your text editor, and comes with two different color schemes, dark and light.

How to Add Style to an Ordered List

Ordered lists aren’t exactly the most exciting HTML element you can add to any given project, but it can’t be denied that they have your uses. Because it can be so hard to select the default numbers that an ordered list creates, it’s hard to really add a lot of style to this type of element. So what do you do when you need to have an ordered list on your site, but you don’t want it to look boring or too formal? With the help of some bright colors and stylized fonts (and the <span> tag), we can easily spice up our boring old ordered list elements to make them look fun and modern. Check out the tutorial below to see how it’s done:

The HTML

So to start, you’ll need a standard ordered list. For this example, we’re using filler text from Bacon Ipsum, a fabulous filler text generator that will really add some meat to your mockups.

Here’s how your list might look:

<div class="styled-list">
  <ol>
    <li><span>1.</span><p>Bacon ipsum dolor amet pariatur veniam sirloin esse dolore. Ex sunt deserunt chicken shank corned beef ipsum fugiat pork chop spare ribs hamburger cow. Tri-tip picanha tail ut fatback dolor beef shank nulla beef ribs kevin magna. </p></li>
    <li><span>2.</span><p>Reprehenderit porchetta in magna voluptate beef ribs pork chop biltong. Tri-tip dolor shoulder irure picanha pastrami flank tempor magna. Enim ham hock ut, alcatra ipsum doner pig brisket aliqua porchetta tongue dolore fugiat. Sausage sint aliqua meatball pancetta nulla swine fatback.  </p></li>
    <li><span>3.</span><p>Nisi pork loin leberkas, bresaola beef ribs sint esse eu bacon pancetta fatback. Dolore nulla porchetta, t-bone et cupim nostrud occaecat chicken culpa ea. Et adipisicing ullamco, corned beef kevin pig jerky cillum ham hock ground round mollit.   </p></li>
  </ol>
</div>

So right now it looks pretty boring, like this:

We definitely need to add some CSS.

The CSS

Here’s the fun part. We’re going to get rid of the default ordered list numbering by using the list-style-type property with a value of none, then we’re going to add some major style to the numbers in the span tags, because we can select span tags much more easily than we can select the numbers in an ordered list. Take a look at the CSS below:

@import url(https://fonts.googleapis.com/css?family=Pacifico|Archivo+Narrow:400,700,400italic,700italic);

body{
    font-family: 'Archivo Narrow';
    background-color: #aaeedd;
}

div.styled-list{
    width: 400px;
    margin: 50px auto;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
}

div.styled-list ol{
    list-style-type: none;
}

div.styled-list ol li{
    position: relative;
    margin-bottom: 20px;
}

div.styled-list li p{
    padding-left: 50px;
    color: #444;
}

div.styled-list span{
    position: absolute;
    font-family: 'Pacifico';
    font-size: 30px;
    color: #222;
}

Now, your stylish ordered list should look a little something like this:

For the purposes of this example, we used the font-family “Pacifico” to add some much needed style to the numbers. We also played around with the placement of the numbers in relation to the list content for a more stylized look, and, of course, we changed the font from the style-less default serif look to a more sleek and modern sans-serif (Archivo Narrow).

As with any CSS snippet, this one is totally customizable. Play around with the colors, fonts, spacing, positioning, and overall styling so that it meets the needs of your particular projects. Add hover effects with transitions, add stylish links, add a cool background — the possibilities are endless.

10 Free and Fun Filler Text Generators

Even if you absolutely love your job as a web developer or designer, there are still times when we could benefit from adding a little more whimsy to our day. A great way to do this is with a free, fun, and harmless filler text generator. It’s a standard practice to use the old Latin Lorem Ipsum… text as a placeholder for actual test in a preliminary design or product, so why not spice it up a bit? What follows is a list of fun and free text generators that are sure to put a smile on the face of anyone who comes across them.

1. Bacon Ipsum

Bacon Ipsum is one of the more popular alternate text filler generators. Basically what it does is insert the names of meats, cuts of meat, and meat dishes into an otherwise standard Lorem Ipsum passage.

2. Samuel L. Ipsum

Instead of the standard Lorem Ipsum, this generator gives you text straight out of a Samuel L. Jackson movie. It’s definitely not suitable for work, but if you’re really determined to use it in a project, there’s a “lite” version of the plugin that generates text sans any profanities (there’s also a “classic” version that generates the quotes sprinkled in with some Lorem Ipsum, if you’re a traditionalist).

3. Cat Ipsum

If you’re not a cat person then you might not appreciate this one. Cat Ipsum generates text that reads like a stream of consciousness from a cat. It also gives you the option to start it off with a little Latin or to just dive straight into the mind of a feline.

4. Yorkshire Ipsum

This generator provides text meant to mimic the accent of a person from Yorkshire, England. The accent is famously hard to understand, so depending on where you’re from and you who are, Yorkshire Ipsum could be more difficult to decipher than classic Latin.

5. Hodor Ipsum

Unless you’re a Game of Thrones fan, this text generator probably won’t interest you. The only word that the generator provides for you is, naturally, Hodor. But at least the passages are punctuated. Choose from the dropdown list how many Hodors you want — each Hodor corresponds to another paragraph of, yeah, Hodor.

6. Hipster Ipsum

Hipster Ipsum generates paragraphs of text that only include hipster words — quinoa, listicle, venmo, bicycle, sriracha, williamsburg, etc.

7. Pirate Ipsum

Pirate Ipsum will generate a block of text that is all in “pirate speak” — think a lot of “ayes,” “scaleywags,” and “mateys.”

8. Office Ipsum

Office Ipsum generates a collection of text having to do with work and office environments. Basically, it’s a huge list of business buzzwords that you’ve probably heard a thousand times before in hundreds of meetings or conference calls.

9. Cheese Ipsum

Because you can never have too much cheese in your life, this text generator gives you a list of so many different types of cheeses that your mouth will be watering just reading it. This isn’t just a list of snotty, high-brow cheese either — queso is listed right next to camembert.

10. Hairy Ipsum

This generator is for those who want to add a little manly ruggedness to their projects. The generator will provide you with a list of words that are the pinnacle of masculinity — mustache, boxing champion, etc.

How to Create a Stylish Download Button with CSS

We’ve already covered how to create animated buttons, but if you’re looking to take your button animations and animation functionality to the next level, you’ll want to take a look at this tutorial that demonstrates how to make stylish download buttons that utilize smooth CSS animations.

The HTML

The download button has two parts — the button itself, and the tab that will appear under the button whenever the user hovers over it. Your HTML will need to account for both of these components. Here’s how it should look:

<a href="" class="download">Download</a>
<a href="" class="download bottom">File Size: 8MB</a>

Of course, the secondary tab (with the class “download bottom”) can say whatever you like. Keep in mind, however, that it does prove to be more aesthetically pleasing to have the secondary tab smaller than the button itself, so you might want to keep the content of the second tab short and to the point.

The CSS

Styling the button and the secondary tab is fairly easy and doesn’t require an excessive amount of CSS. Take a look at the code below to see for yourself.

body{
    font-family: 'Alegreya Sans';
    background: #708292;
}

a.download{
    text-decoration: none;
    color: #fff;
    background: #50a6f6;
    padding: 8px 10px;
    border-radius: 3px;
    display: block;
    width: 120px;
    margin: 100px auto 0 auto;
    text-align: center;
    z-index: 100;
    transition: opacity .8s ease;
}

a.download.bottom{
    width: 100px;
    background: #b7d4ee;
    opacity: 0;
    margin-top: 0px;
}

a.download.bottom{
    border-radius: 0 0 3px 3px;
}

As you can see, we make the secondary tab (a.download.bottom) invisible by giving it an opacity of 0. We also apply a transition effect to the primary button so that when the hover effect takes place, it happens with a nice smooth transition. This is what our button should look like at this point:

We’re only one like of CSS away from finishing the simple, sleek button. What’s missing is the instructions that will allow the secondary button to appear below the primary button when it’s hovered upon — basically, what’s missing is a hover effect.

The CSS code for the hover effect should look like this:

a.download:hover + .bottom{
    opacity: 1;
}

This code selects the secondary tab, but it only applies when the primary button is hovered upon. By changing the opacity from 0 to 1, it allows the secondary tab to appear smoothly (thanks to the transition effects we added before) whenever the primary “Download” button is hovered upon.

Here is what your button should look like at any point that you hover over it:

As always, color, size, font-family, and shape can be totally customized to suit any project or theme. Play around with this snippet to really make the button your own.