Web Developer Confessions: How To Stop Doing The Most

Posted on January 22, 2017November 26, 2017 by Tommy Hare

WordPress is an Established Content Management System That Aims to Speed Up Your Web Development Time

Spend less time developing websites using WordPress and not writing every website from scratch. I have made the mistake of custom writing every application and writing a custom database for each site. Having a login portal allows yourself and your clients to edit basic content on each website. Along with, an admin panel saves you – the developer, hassle of doing edits yourself. Every WordPress installation includes an admin panel with a login portal. This admin panel can be used to edit widgets, install plugins and edit content. To summarize, WordPress allows creatives to push out their ideas and allows developers to get things done.

Creative Flow

Time you spend creating custom solutions will cut deeply into your creative time. After all, a great idea doesn’t come along every day. Use your creative juices to cut down development time even further. Furthermore, think of ways around a problem you are facing with your web project. Spend less time developing websites and use WordPress to install a plugin that provides the functionality that you need. Then customize it to fit your theme.

Chain Linking

WordPress is great when it comes to linking content together. For example, a custom post type could be used for creating event listings, e-commerce products, subscriptions and more. Most plugins will be able to use these custom post types in addition to normal posts.

Syndication

Spend less time developing websites using WordPress and make it simple for everyone to share your website’s content.

RSS is a severely underrated technology. RSS stands for “Really Simple Syndication” and it lives up to its name. For example, services such as Feedly.com or Digg Reader will allow visitors to view and share your website’s content on different social media platforms. WordPress automatically creates RSS feeds for your posts, custom post types, post categories and even comments.

Building Your First Website – An Introduction to web development

Posted on September 23, 2016September 3, 2018 by Tommy Hare

Building your first website can be a daunting experience. You aren’t sure where to start or what to learn. Start building websites by learning the basics of html and css to begin your web development journey.

What Are Websites Comprised Of?

In other words, what is required to display content on a web page? By and large, these are the tags that you will have to write for every html5 website, you might as well get to know them. The most basic website is comprised of one html file.

Ultimately, this file will contain three parts: The doctype declaration and an html wrapper which holds the head section and the body section of your website.

Creating The HTML File For Building Your First Website

Create a new folder and name it anything. Inside the root of that folder, make a new file with the extension “.html”, for example “index.html” or “home.html” – give it any name you’d like, but be sure to include the “.html” extension. Be aware that web hosts will search for a “default.html”, “home.html” or “index.html” by default.

A very basic html file will look like this.

code for the bare-minimum tags needed for building your first website

As shown above, notice how the code is structured. In brief, it would be fairly hard to read code that doesn’t contain separation. Rather, tabs or spaces are used to create separation between elements. This is not at all required for the browser to render the content, however it is good practice. In the long run, code separation and structure will help you if you ever have to come back and extend from your code. At the same time, clean code separation and structure will also help other developers scan through and read your code.

The Head Section

A basic head of any html5 website will contain a meta tag, a title tag and most times a style tag. Tags are written as <tag-name>

code for building your first website with no content

Website Titles

Notice the <title> tags? Any text that you place inside here, will be displayed in the tab of the browser. For reference, it looks something like this.

The meta “charset” is the key meta tag.

The meta charset tag will tell the browser which character encoding set must be used to render your website. In any event, it must be included in your website. Following, the most commonly used character set for the web is “UTF-8”.
All meta tags are written inside the head section as <meta charset="utf-8">.

Piecing Your Website Together

Generally speaking, building your first website becomes easy after you piece these main components together. Moreover, what about adding content? Notice the <p> tags inserted inside the body tags. In addition, this is called a paragraph tag – and as you probably guessed, it is used to render your website’s textual content.

complete code for building your first website

Adding Content To Your Website

Accordingly, the body of content that is displayed on your website will go in-between the <body> tags. In essence, this is where you place your body of text and media.

Furthermore, check out other resources to learn about all of the different html tags you can use to structure content on your website.

HTML element reference (Mozilla Developer Network)

Web Form Design With Bootstrap

Posted on August 7, 2016November 26, 2017 by Tommy Hare

I will start this article by stating that using a framework is not always the solution to designing web forms. However, the Bootstrap css framework makes the process of building intuitive web form design simple. High conversion rates are mandatory on the web nowadays. Keep your web forms 100% responsive, short and simple with the help of the Bootstrap css framework.

Real world examples of web form design

A login form in Bootstrap is just an inline form with a few input groups inside. To create an inline form, we add the ‘form-inline’ class to the <form> tag.

Inside this form, each separate field will need to be declared inside a form group

Form groups usually contain a label and input field. However, you can place single items such as buttons inside a form group as well.

Below is an example layout of a horizontal web form.

form
  form-group
    label (Email)
    input
  form-group
    label (Password)
    input
  form-group
    button (Login)

Please excuse the pseudo-code…

Great web form design with Bootstrap is a breeze with the help of its simple to use form classes.

In order for Bootstrap to recognize each input as a form input, we must include the ‘form-control‘ class in each text field and button.

Most forms will have a submit button. These should have the ‘btn’ class added to them in order for Bootstrap to recognize them as form buttons. Additionally, they should contain a ‘btn-default‘ or ‘btn-primary‘ class to style your forms’ buttons according to either the default Bootstrap theme or a custom bootswatch.

Additonally, adding the ‘sr-only‘ class to any element will cause it to only be rendered for screen readers.

Example:

  <form class="inline-form">
    <label class="sr-only">Email</label>
    <input class="form-control" placeholder="Email" type="email">
  </form>

Vertical web form design with Bootstrap

Let us create a common registration form using Bootstrap’s column classes.

Below is an example layout of a vertical web form.

form
  form-group
    label (Email)
    input
  form-group
    label (Name)
    input
  form-group
    label (Password)
    input
  form-group
    button (Register)

As you can tell, it is created with the same layout as horizontal forms. However, you do not add the ‘inline-form’ class to the form tag. Simply create a form with labels, inputs and a submit button. Each of these fields will also go inside a div with the ‘form-group row‘ class.

However, in order for vertical forms to be displayed correctly we must declare the column sizes for the field elements.

Example:

<form>
<div class="form-group row">
  <div class="col-xs-12 col-sm-4"><label class="for="name">Name *</label></div>
  <div class="col-xs-12 col-sm-8"><input class="form-control" id="name" placeholder="Your Name" type="text"></div>
</div>
<div class="form-group row">
  <div class="col-xs-12 col-sm-4"><label for="email">Email *</label></div>
  <div class="col-xs-12 col-sm-8"><input class="form-control" id="email" placeholder="[email protected]" type="email"></div>
</div>
<div class="form-group row">
  <div class="col-xs-12 col-sm-4"><label for="password">Password *</label></div>
  <div class="col-xs-12 col-sm-8"><input class="form-control" id="password" placeholder="Password" type="password"></div>
</div>
<div class="form-group row">
  <div class="col-xs-12 col-sm-offset-4"><input class="btn btn-success" type="submit" value="Register"></div>
</div>
</form>

Try using the Bootstrap css framework for your web forms. It has saved so many hours of my time in web form creation. Hopefully, I have inspired you to utilize it for your future web form designs.

Please leave a comment if you have any questions regarding Bootstrap web form creation. I will be happy to answer them when I get a chance!

Flask Web Development – An Introduction

Posted on July 3, 2016November 26, 2017 by Tommy Hare

Flask websites are built using the Flask microframework. Wikipedia defines Flask as one of many “minimalistic web application frameworks.” In this article I will be giving an introduction to Flask web development, along with resources to get started developing with the flask framework.

What makes Flask web development so magical?

The Flask microframework is backed by Python. Python is a very stable, powerful, aged and most importantly… Legible programming language. So legible in fact, I usually forego code comments.

For example, writing the comment:

For each user in the followers list, display the user’s name

above this ↓
for user in followers: print user.nameserves no purpose. In fact, it makes my code harder to scan through later on. Which brings me to my next key point…

Websites built in Flask are scalable

Scalability is defined by the effort it takes to come back to a site and build from it at a later point in time. The Flask web framework allows you to build sites kind of like lego blocks. You mix and match and install only the modules you need using pip.

Python code is easy to read and write

Due to the legibility of Python, Flask websites becomes much more easy to structure. You could start with a simple app and not have to worry about coming back to it months from now to extend it’s functionality. It’s amazing how easy it is to pick up where you left off in Python programming. Therefore, allowing websites written in Flask to achieve the same benefit.

Flask for Web Development and Web Apps

Flask utilizes simple routing, paired with a great templating engine and a built-in local server for rapid design and development.
App structure is as basic or complex as needed.

For example, a basic Flask web app or website is laid out as follows:

app
- /static
- /templates
- __init__.py

Flask website folder structure

The Static folder is for images, stylesheets, sass/ stylus files, and other static media required for your site.

The Templates folder holds pieces of the website such as the header, sidebar, content, menu, forms and footer. Template files aren’t necessary, however they do provide greater organization and more of a manageable site structure.

init.py can be named other things such as app.py or name.py. This file contains the code necessary to launch the website or app. There is no mandatory naming convention for this file. This file is initialized with python typing python __init__.py in a terminal window. Depending on how you structured your app, it should start a local server with the following message returned:
* Running on http://127.0.0.1:5000/

Category: Web Development