Web Development

How to write and raise an a very simple custom exception in Python

Having gained some experience with the Python computer programming language, I truly know how important it is for the Python geek to learn and practice the exception handling so they can handle errors better in their applications and projects.

From my experience with research on the Internet about the Python computer programming language, coders face a lot of struggle when it comes to building their custom exceptions, especially the complete beginners. With the main purpose of introducing the Python beginner to the base builtin exception class and preparing them to write their own customs exceptions, I decided to share this short tutorial.

First of all, one important thing everyone of the readers should know about before going any further, is that all the different exceptions in the Python computer programming language are generated from the one shown below. Continue reading “How to write and raise an a very simple custom exception in Python”

Complete list of skills you need to become a Webmaster, first part

Being a computer nerd who has experimented with a lot of different things, I have had the opportunity to build websites for people, completely from scratch. Not only have I developed websites, but I have also managed them since they’re dynamic web applications which require updates. This job, which I am currently doing right now, is called Webmastering.

In other words, Webmastering is the process of maintaining one or many websites. Personally I do love such skill, as not only it is widely applied in the computer world, but it also helps one interact with different people, from different regions and cultural backgrounds.

Although a junior Webmaster, the passion I have for the craft gives me confidence to guide others, especially newbies who have no idea about the field. Having earned some experience in the Webmastering field, I am going to compile a list of skills one needs to master in order for them to start managing websites on internet, for their personal usage, or for profit.

Html skills

Web applications make use of the html technology, a computer language which is used to structure information on the web applications. Easy to read and write, html is being widely used by Webmasters worldwide during their daily activities while managing websites on the internet.

Based on my personal experience with the Webmastering, html is for sure a necessity, especially if one wants to develop their web applications completely from scratch. Most of the websites a Webmaster manages, are not static, they may break and stop working; that’s why it is always a good idea to get html skills on your toolset.

There are plenty of resources on the internet from which one can learn html, completely for free. Although html is not hard to learn, it may be a bit tricky to practice, since the beginner has no idea how to put it in use in real projects.

With the main purpose of helping beginners and intermediate geeks to effectively utilize the html technology in real projects, I am going to share many tutorials in codetheory.in. For now, just make sure you have written it on your notes, how important it is for one who wants to become a Webmaster, to learn and master the Hypertext Markup Language.

A server side language

Most of the web applications is based on three tiers, such as the rendering tier, the logic tier and the storage tier. Html is a good technology when it comes to rendering, since it is being executed in the browser. It does not make sense to use html as a scripting language which handles logic, for example trying to communicate with the database of a web application. It can not do such thing as it is not being built for that!

There are many computer programming technologies one can use to handle the logic of a web application. Nowadays computer nerds develop programming languages to solve specific problems, and there is many technologies one can pick up when it comes to implementing the logic tier of their web application.

Personally I prefer Python. Not only it is open source, free as in beer and truly effective when it comes to prototyping, but there is also so many web frameworks written in it which make the life of a Webmaster truly easy. Easy to read and write, Python is a very good tool a true Webmaster should learn.

Most of the Webmasters out there make use of PHP, which is great when it comes to scripting stuff and writing web applications too, but there is no way its syntax can beat Python. Personally I don’t know PHP, and right now I have no plans to learn it. For sure PHP is a very useful tool to the Webmaster since there is many web applications written in it on the Internet, but I do prefer Python.

There is many scripting languages you can choose from when it comes to accomplishing your tasks as a Webmaster, choose the one that fits your needs the best.

A database technology

Most of the web applications programmers write nowadays are database driven as they need to store information somewhere, such as name, address, phone number, credit card etc. There is so many technologies that can be used as a database for web applications. A Webmaster should know basics of the technology they’re using in their storage tier, so they can easily fix almost any problems that come out of it.

Database technologies such as MySQL, PostgreSQL and MongoDB are currently being used widely by almost any Webmaster who truly knows what he or she is doing.

Although I am not a master of SQL databases, I totally recommend to you MySQL as it has a long history in the computer programming industry.

Final thoughts

One does not master their craft over night. Webmastering can not be mastered in one day, nor in one month, nor in one year. A good Webmaster should learn about the main technologies being used to develop the basic structure of a web application before diving deep into the waters. The three skills that one should learn in order to start their journey as a Webmaster shared in here, is more than enough to begin with. In the next part, I am going to share other skills which a good Webmaster needs in their toolset.

Top 10 Code Snippets With CSS Animations

A great thing about CSS is that it allows you to animate your creations. CSS animations are typically smooth and add some sense of movement and dimension to your projects. Best of all, they’re fairly easy to understand and implement into any code (though some properties aren’t supported by all browsers, so be sure to use vendor prefixes with them).

Animations are super versatile and can be used to create so many unique effects, from something as simple as a spinner to something much more complicated, like a working, ticking clock face. Take a look at the list below to see our top 10 favorite code snippets that include CSS Animations

CSS Responsive Animated Accordion

This snippet not only creates an accordion functionality that has animations, but it’s also fully responsive. The accordion tabs smoothly slide down to reveal the content when the heading is clicked. This accordion feature would be a great addition to any website.

2. CSS Text Animation

This tutorial demonstrates how to use CSS to animate text. The second word rotates in between four different words, so you can use the animation to essentially make your text say four things at once.

3. CSS Animated Hamburger Icon

The hamburger icon in this snippet turns into an “x” when you click it, thanks to smooth CSS transitions and animations. When you click it again, it reverts back to the three-line hamburger style icon.

4. CSS Flame Animation

This pure CSS flame animation dances and flickers slightly, just like a real flame would. A really cool effect to add to a project that has a spooky or eerie vibe.

5. Pure CSS Animated Clouds

This pure CSS animation produces clouds of all different sizes that slowly float on by from one end of the viewport to the other.

7. CSS3 Working Clock

Did you know you can use CSS animations to create a realistic looking working clock? No JavaScript or jQuery necessary. The clock is pure CSS, using only CSS to create all movements and shapes.

8. CSS Animation on Hover

This simple snippet is a good demonstration of how you can use CSS animations to rotate an object, and also how you can activate CSS animations using :hover as a trigger event.

9. CSS Spinner Animation

Use this tutorial to understand how to make a pure CSS spinner. Spinners are perfect to present to the users while sites or images are preparing to load.

10. CSS Animated Sunset Background

This snippet uses animated gradients as the background of the page to create a moving sunset type effect. A great way to experiment with animated gradients and color.

CSS Snippets: How to Create a Print Button

One cool thing about CSS is that there are probably about one hundred different ways to use the styling language to make buttons, and this is probably because there are just so many different types of buttons to be created.

One of the most useful types of buttons you can make is the print button. When giving your user the option to print a page, you can use a boring old text link, OR you can spice things up by creating a beautiful, stylish, colorful button with hover effects. In this tutorial, you’ll learn how to make a cool looking print button that includes a Font Awesome icon for an extra pinch of style.

The HTML

Your HTML is going to be pretty straightforward. First, because we’re using a Font Awesome icon in this tutorial, you’re going to need to link to the Font Awesome library. You can do this either in your CSS using the @import rule, or you can insert the following tag into the <head> of your HTML — it doesn’t really matter which one you choose to do, as long as you don’t forget to do it. For this example, let’s just link to the library from our HTML file:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML code for your print button should look like this:

 <a href="" class="print"><i class="fa fa-print"></i>Print</a>

Without any styling added to it, this is what your code should look like so far:

As you can see, the font icon we’re using (in the HTML it’s the <i> tag and we use the class to specify which Font Awesome we’re looking for) is one of a printer, so your user will definitely have no question what this clicking this button is going to do.

Now it’s time to add some style.

The CSS

We want to add some color, some dimension, and some sleekness to this print button. The following code does a fair job at achieving all of that:

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body{
    font-family: 'Source Sans Pro';
    background-color: #e4ecbd;
}

.container{
    width: 400px;
    margin: 0 auto;
}

a.print{
    text-decoration: none;
    display: inline-block;
    width: 75px;
    margin: 20px auto;
    background: #dc143c;
    background: linear-gradient(#e3647e, #DC143C);
    text-align: center;
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #e3647e;
}

i.fa.fa-print{
    margin-right: 5px;
}

Using only about 30 lines of CSS, we’ve managed to add a whole lot of style to our little text link. Instead of text, it now looks like a real button:

We use a linear gradient combining two similar colors as the background of the button to give it that 3-Dimensional look so the design isn’t so flat. We also add some subtle border radius values to the button to add some softness to the harsh rectangular shape of the anchor tag. The bright color and the white font also help to really make the button pop and stand out on the light green background.

The only finishing touch we still need is a hover effect.

The Hover Effect

To add a hover effect to your button, add this line of code to the end of the CSS snippet above:

a.print:hover{
    background: linear-gradient(#DC143C, #e3647e)
}

This simple hover trick has a great effect. By swapping the linear gradient values of the background, the print button appears to be almost indented when its hovered upon in comparison to how it looks when the cursor is not over the tag. See the image below to check out the effect:

This snippet is simple and super easy to implement, but it will really add a smooth, professional feel to any project its added to. A great and quick way to really freshen up your print links or buttons.

How to Create a Striped Text Effect

With CSS3, it’s easier than ever to create cool text effects to add to your projects. CSS allows you to manipulate your text in complex ways so that your text can resemble something that might have been made in a sophisticated software program, like Photoshop or Illustrator.

One fun text effect that can be created somewhat easily is a striped text effect, which gives your text horizontal stripes so that you can make it super colorful. With this effect, you can give one word up to five different colors. If you want to see how to achieve this look for yourself, check out the tutorial below.

The HTML

The HTML in this tutorial is pretty important. You need to make sure you give your h1 tag and your span tag an attribute with a value that we can refer back to later in our CSS. For this example, the attribute we used was called stripes, and the value was “Striped Text.” The attribute can be called anything you like (just make sure that you give the h1 and the span tags the same attributes), but for this code snippet to work, the attribute value must match the text in between the span tags. See the code below for a better understanding of how it should look:

<h1 stripes="Striped Text"><span stripes="Striped Text">Striped Text</span></h1>

As you can see, the attribute for both the h1 tag and the span tag is called stripes, and the value assigned to it is “Striped Text,” which matches the text found within the span tags.

The CSS

The CSS is the fun part. Now is when we get to add some much needed style to our plain old text. We’re going to take advantage of the :before and :after pseudo-selectors of both span and h1 to add the stripe effect to our text, and we’ll use the content and z-index properties to make different layers of the text (that helps creates the stripe illusion) and to be sure that they overlap in the right ways.

html, body {
  background: #536283;
  width: 100%;
  height: 100%;
}

h1 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 100px;
  text-align: center;
  line-height: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  color: #ff6666;
}
h1:before, h1:after,
h1 span:before,
h1 span:after {
  content: attr(stripes);
  position: absolute;
  overflow: hidden;
  left: 0;
}
h1:before {
  color: #def1f9;
  height: 34%;
  z-index: 5;
}
h1:after {
  color: #f4dce6;
  height: 50%;
  z-index: 4;
}
h1 span:before {
  color: #cdf2c6;
  height: 66%;
  z-index: 3;
}
h1 span:after {
  color: #94e1e3;
  height: 80%;
  z-index: 2;
}

As you can probably tell, the code for achieving this effect isn’t too complicated. By giving h1 and span a :before and :after whose content is the text, we’re creating 5 different layers of the words “Striped Text” that happen to fall right on top of each other. By changing the heights of each of these selectors and pseudo selectors and playing around with the z-index, we make it look as though the text is striped, when actually the effect is created by many layers of the same words stacked on top of each other, each with a different height.

The finished product should look like this:

Pretty cool, right? As always, the colors can be completely changed and customized. Same goes for the font-size, font-family, and actual words you choose to apply this text effect to.

10 Websites to Visit for Free Font Downloads

Most web designers will tell you that they can never have enough free fonts. Having a surplus of fonts loaded onto your machine can really come in handy, whether you’re saving them up for a future project or if you just like to play around with them to see how many cool logos or typography effects you can come up with in your down time. If you need some inspiration on where to look to get some free, beautiful font faces, take a look at this list of 10 websites that host free fonts available for download and use in both personal and commercial contexts.

1. DaFont

DaFont is a really popular website for downloading fonts. With dozens of categories to choose from, you could literally spend hours browsing the different styles and themes for the perfect font that’s right for your project. With so many fonts available, you’re almost guaranteed to find the right one among their collection.

2. FontSpace

FontSpace is another great site for downloading fonts. A cool feature this site has is the “random” button, which will pull up a random assortment of 10 fonts for you — a perfect feature for if you’re seeking inspiration. Click the random button as many times as you like to keep generating lists of ten random fonts to help get the creative juices flowing.

3. 1001 Fonts

1001 fonts is a collection of over 1000 free fonts to choose from. For a fee, you can download their Ultimate Font pack, which contains over 10,000 fonts. You can never have too many, right?

4. Font Squirrel

What makes Font Squirrel unique is that 100% of the fonts available for download on the site are free and cleared for commercial use. Most sites that host font downloads have fonts that are for personal use only, as well as fonts that are free for commercial use, so you have to pay close attention to the fine print. When you use Font Squirrel, you can rest easy knowing that any font you find on the site is totally okay to use in commercial projects.

5. Font Fabric

Font Fabric is a site that offers an array of high quality and often exclusive fonts, most of which are available for free download. All free fonts on the site, with the exception of “Baron” and “Muller Narrow”, are available for both personal and commercial use.

6. Freebies Bug

Freebies Bug is a great resource site for developers and designers looking for freebies. They offer a beautiful collection of free fonts, but they’ve also got a decent selection of other free resources, including graphics, templates, and stock photos.

7. Free Typography

Free Typography hosts a small but beautiful collection of exclusive fonts that any designer would be proud to have featured in their mockups, projects, and designs.

8. Identifont

Identifont is a fun font site that has a lot of unique ways for you to search for the font you’re looking for. You can search by name, by designer, and by style of font (the site asks you many detailed questions about the design of the font you’re looking for to help filter the results so the output isn’t overwhelming).

9. Urban Fonts

Urban Fonts hosts an extensive collection of free and premium fonts available for download. A cool feature of the site that also exists on some other font sites is that you can input any desired text to preview the how a particular word, phrase, title, etc would appear using every font that you browse.

10. BeFonts

BeFonts hosts a beautiful collection of designer-submitted fonts that would be perfect for so many of your upcoming projects. Using a smaller site like BeFonts to download your fonts from is a great way to ensure that not everyone on the internet will be using the same fonts as you.

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.