Python Values – Know the Type

Python values are basic things the language works with. Python values belong to different types. Use the Python interpreter to ask for the type of a given Python value.

Below are examples of input and output from asking Python for types of various Python values. The chevron prompt “>>>” is input for Python, and the line below is output from Python.

>>> type('Cookies')
<type 'str'>

>>> type(3)
<type 'int'>

>>> type(3.0)
<type 'float'>

<type 'str'>


The first type means string. After that it’s, integer, floating number, and string. Notice that if you put quotations around a number, it becomes a string.

While it might be habit, refrain from using commas with large numbers. It will cause a semantic error, because Python would interpret it as a comma separated sequence of numbers.

Write a Simple Python Program

Download Python for free, and write a simple Python program. The examples in this blog will use Python 2. It is okay to learn either 2 or 3. They are similar, but definitely have differences.

Your First, Simple Python Program

Open a text editor and write the classic “Hello World!” program. Simply type as follows:

print 'Hello World!'


Save the file with a .py extension. Name the file

Execute the script then you will see “Hello World!” as the output.

Yes, it is a trivial program with almost zero practical use, but by definition, it is a program.

A good resource for understainding Python is Dr. Charles Severance’s free Python for Informatics book.

If you are interested in learning Python, and need to start at the basics, take a look at the Python for Everybody Specialization offered through Coursera.

Cryptographic Hash Function – Explained

A cryptographic hash function is a technique that takes a set of text and reduces it down to a fixed length of data. This small fixed set of numbers is called the digest, or hash value. The hash function that reduces the message to a digest is wholly rooted in mathematics. In fact, there is an entire field of mathematics devoted to understanding how to make good hash functions.

A key thing to remember is that the message can be any length but the cryptographic hash function will always return a fixed length of data as the digest. for example, the message could be 11 characters or perhaps 121 characters in length, but the hash function would return, in both cases, a digest of 30 characters. The digest will be different for each message, but a good cryptographic hash function always returns the same length of characters.

Hash Function Digest Examples
The messages can be different lengths, but the hash function always returns a digest of the same length.

If two different messages return the same digest, then the cryptographic function is deemed to be bad.

A respectable system, such as your online credit card account, should never store your password in their database. Your credit card company may use a cryptographic hash function on your password, and store only the digest. This way, if their database is hacked, then the hacker will not see your password. Rather they will see the cryptographic hash.

Further, a respectable cryptosystem will never send you your password, because they don’t have it. They only have the hash, and you can not derive a cryptographic hash function. They only work one way. That is why good systems send you a reset link when you lose your password. (Hint: You may want to avoid websites that send you your actual password when you lose it, rather than a reset link).

Sha-1 is a well-known cryptographic hashing function. It’s not perfect, but suitable for basic hashing needs.

Digital Signatures Provide Message Integrity

You can use a cryptographic hash function on digital signatures to verify the integrity of the message. That is, you can verify the message actually came from the person you think it did.

While hashing passwords has integrity in verifying identification of the user, think of a digital signature as  having integrity in verifyying indentification of a message sender. For example, your doctor writing a prescription by email. It allows you to print the email to take to your pharmacy. The integrity of the digital signature should verify that it actually came from your doctor; and that the prescription was not modified in transit over the internet.

A Simple Example of Digital Signature Integrity

  1. The sender and receiver are the only two people who know a secret.
  2. The sender writes a message and adds on the secret. A cryptographic hash function is used to form a digest of the message+secret.
  3. The message+digest is sent. (Remember the digest is a hash of the message+secret).
  4. The receiver takes the message+digest, removes the digest, and adds the secret. Now the receiver has the message+secret, and keeps the digest for comparison.
  5. The receiver runs the same cryptographic hash function on message+secret, which returns a digest.
  6. The receiver now compares this digest with the original digest it removed from the message+digest transmission.
  7. If it’s a match then the integrity of the digital signature is verified. Of course, this only works if the secret it not compromised.

The integrity only works if the sender and receiver can keep a secret!

While the secret key technique is valid, it’s not practical for the internet because there is not a secure way to distribute keys. The internet is an insecure medium. This fact underscores the challenge of internet security.

If this post was interesting to you, then you may be interested to read how the pioneers of internet security were able to solve the security issue by developing the concept of public-key encryption.

Internet Security

Perfect internet security is unachievable.

Security requires a cost benefit analysis. Understand that more security is not always better. A security expert will want to sell you more security, but you have to know if the cost is worth the benefit.

Your online value is determined by the benefits you have online, less the cost of protecting those benefits. Therefore, a cost-benefit analysis is always a good idea before you invest resources into internet security, as well as knowing what you stand to lose in a worst case hacking scenario.


Confidentiality is how we prevent unauthorized viewing of private information.

Integrity is knowing the information comes from a source you know, and that the information was not modified in transit.

Confidentiality spawns the terms encryption and decryption. Plaintext is the information we want to transmit, but first it has to be encrypted. Ciphertext is the encrypted message that must be decrypted back to the plaintext message.

Always Assume Someone is Spying

By the nature of how the internet works, you have to assume that ciphertext will be seen by other people, besides its intended recipient. You have to hope the encryption is challenging enough so that the message is not intelligible to unintended viewers.

A cryptosystem is a way of encrypting and decrypting messages. A secret-key cryptosystem was most commonly used in ancient Rome up through World War II. A secret-key is symmetric because the same key is required for both encryption and decryption. The challenge is devising a method to securely distribute the secret-key.

The Caesar Cipher Cryptosystem

The Caesar cipher is one of the simplest and oldest encryption techniques. It is a type of shift pattern where a character in the plaintext is shifted a fixed number of positions in the alphabet. For example, with a shift of two positions, ‘a’ becomes ‘c’, ‘b’ becomes ‘d’, etc. Given that it’s completely hackable, it’s surprising that this cryptosystem was widely used for a very long period of time.

Rot13 lets you play with an example of the Caesar cipher. You can enter in text, and it gets shifted thirteen positions. Apparently, this shift pattern was commonly used when the first internet users wanted to share dirty jokes. The story goes, these early adopters got so used to seeing the ciphertext, that they could understand the jokes without decryption back to plaintext.

Responsive Bootstrap Layout Template

A responsive Bootstrap layout can be created using the idea that your web page is a grid of twelve evenly spaced square-grids. Assume you want your page to consist of two evenly spaced panels. Each panel would consist of six square-grids.

HTML5 <div> tags define areas of the page for styling. They are used often to create areas for styling.

Responsive Bootstrap Layout for Even Two-Panel Page

++++<link rel="stylesheet" type="text/css" href="bootstrap.css" />
++++<link rel="stylesheet" type="text/css" href="styles.css" />
++<div class="container">
++++<h1>This is a header</h1>
++++++<div class="row">
++++++++<div class="col-md-6 thin_border">
++++++++++Panel 1 Content
++++++++<div class="col-md-6 thin_border">
++++++++++Panel 2 Content


responsive bootstrapEffectively this creates two panels, consisting of six square-grids each. However, two columns will only appear on what Bootstrap defines as medium screen sizes are larger. The class “col-md-6” is saying make a column of six-square grids wide if the screen size is medium or larger.

Notice there are two linked style sheets. You can link as many as you like. They will cascade off of each other. Each style sheet you add can override the previous one if they have identical classes or selectors. Importantly, put your modifications in a new styles file. Do not change the Bootstrap file. Typically, web programmers will use just one more style sheet in addition to Bootstrap. But technically, more can be used.

In this example, styles.css has only:

.thin_border {
++border: 1px solid black;

This CSS3 code puts a border around out two columns.

You can copy this example in your own .html file. Be sure to put the bootstrap.css and style.css files in the same folder as your .html file. Open the file in different browsers or screen sizes and see how it responds. If the screen size is narrow, you should see the two six square-grids stack on top of the other.

These are the basics of responsive Bootstrap layouts. This layout can be combined with an MVC framework to make your web applications mobile friendly. Get started with Bootstrap, and get responsive!

Bootstrap Framework – Free Download

The Bootstrap framework is one of the most popular libraries for developing MOBILE-FIRST, responsive web pages. Using the Bootstrap framework is the quickest way to get away from the old-school default look of web pages, and into a modern look.

Bootstrap has many navigation and widget components that give a visually pleasing design. A big advantage of knowing how to use Bootstrap is that it greatly reduces much of the CSS3 customization needed to develop a responsive web page.

Free Download for CSS3 Bootstrap Framework

Download Bootstrap for free, and take a look. It’s a very big file – 6,800 lines. There are many html tags, and ways to format them. Bootstrap does much of the heavy lifting for you.



CSS3 Responsive Styling – Simple Examples

CSS3 responsive styling means the web page changes the way it looks depending on the size of the browser or screen size.

Let’s look at a simple example of how to make a site responsive.

Here is some HTML5 text for a simple web page:

++++<link rel="stylesheet" href="styles.css">
++++This is the body text.

Using CSS3 responsive styling we can make the background green:

body {

Now, this is not the most practical example, but what if you only want a green background on browsers at least 1000px wide?

@media (min-width: 1000px) {
++body {


This is one way to test an aspect of the browser. You can Google CSS3 media queries to find out many other browser tests you can do with CSS3.

For now, you can change the background color to red, or blue. You can change the minimum width to 500px, or whatever you like. Play with your browser width and see how it responds.

Get Fancy with CSS3 Responsive Styling

Suppose you want two columns on a wide window, but only one column to display on a narrow window.

Setup the HTML5 first:

++++<link rel="stylesheet" href="styles.css">
++++<div class="responsive">
++++++column 1
++++<div class=”responsive”>
++++++column 2


Now we need to connect CSS3 properties to the ‘responsive‘ class.

@media (min-width: 750px) {
++.responsive {
++++display: inline-block;
++++width: 200px;
++++border: 1px solid black;
@media (min-width: 1000px) {
++.responsive {
++++display: inline-block;
++++width: 500px;
++++border: 1px solid black;

Responsive design means content will adapt to the shape of the screen.

With the code above you set the column width at 200px if your browser is at least 750px wide, and you set the column width to 500px if your browser is at least 1000px wide. If the browser is not at least 750px, then the columns will be stacked on one another, so it’s effectively one column. See a CSS3 example of this responsive styling.

The responsive Bootstrap layout makes CSS3 responsive styling easy. Bootstrap is a library full of pre-defined CSS3 classes. This makes designing sites fast for developers, because they don’t have to write custom code. The drawback could be that because so many people are using Bootstrap, this creates a similarity in look among Bootstrap sites. Creating unique CSS3 responsive classes can help set your site apart.

CSS3 Format Examples to Change Layout

CSS3 format commands control the display of fonts, links, colors, etc. Use the “class” construct to format the layout of tags you label with a particular class.

Name a class anything you like, and there can be multiple classes. For example, an HTML5 <p> tag can have class named indent.

<p class="indent">This is a paragraph</p>


Then make a CSS3 format command that indents every tag of the class indent.

.indent  {

margin-left: 10px;



Span the CSS3 Format

Use the </span> tag to limit indentation to only the first line. Simply wrap the first word of a paragraph in the <span> tag.

<p><span class="indent">This </span>is a paragraph</p>


Add Margins to the CSS3 Format

.gap_below {

margin-bottom: 25px;



Then add the “gap_below” class to the desired HTML tag.

<p class="gap_below"><span class="indent">This </span>is a paragraph</p>


Special Constructors for CSS3 Format

Dynamic changes to the style when a user hovers over an element is a powerful, attention grabbing effect. Filter this effect by first selecting a “class”, and then select a “constructor”.  The hover constructor is often used.

.orange_link:hover {

color: orange;
background: gray




CSS3 Tricks to Exaggerate Your Links

Use CSS3 tricks to exaggerate your links. While HTML5 has basic defaults that make your links noticeable, CSS3 can be used to make them grab the user’s attention.

Remeber that your HTML5 links are shown in the <a> tags. Use the following CSS3 to change all the link color, and remove the underline:

a {
++++color:  red;
++++text-decoration:  none;


Tray an effect that will pop-out and grab the user’s attention. The CSS3 hover “selector” styles a link when a user hovers over it.

a:hover {
++++color: white;
++++background: red;


Visit this CSS3 link styling site for many more examples. Please share this page if it was useful. Thanks!