JS

Atom Editor

May 8, 2014

Github released yesterday a new editor called Atom. It’s built on HTML, CSS, Javascript and Node.js. It’s designed to be extensible via add-on packages so it can be used for a number of things, but it’s mainly used as a text editor. The Atom core, Package Manager and Shell are open-source available via the MIT license. Currently is available only on Mac OS, but will be available soon for Windows and Linux.

There are over 800 add-on packages already available from the project’s homepage. If you’re a PHP developer, be sure to add language-php, php-twig and php-beautifier. Based on the initial review, it seems to be well-received by a number of reviewers. Is there enough here to get developers to move from Text-Mate and Sublime Text Editor? We will see. I happen to like it a lot. I plan to use it for the next two weeks.

HTML Kickstart

January 6, 2014

HTML Kickstart is an ultra-lean website framework built on top of HTML5, CSS3, Javascript and JQuery. HTML Kickstart is a good alternative to the widely-popular Twitter’s Bootstrap. The download is quite small. It’s less than 1MB, but it’s quite powerful in terms of what you can do with it. All you have to do is add 3 lines into your existing HTML page to enable HTML Kickstart.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/kickstart.js"></script> <!-- KICKSTART -->
<link rel="stylesheet" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->

The framework is well documented and quite easy to follow and implement. Some of the framework features are the ability to render: buttons, lists, menus, tables, tooltips, menus, horizontal rules, icons, code, tabs, breadcrumbs, responsive and flexible grid/ columns, images, slideshow, forms, labels, and extra helpers.

If you’re looking for a great alternative to Bootstrap, give HTML Kickstart a try.

CodeAcademy

November 20, 2013

If you want to learn how to develop websites, visit CodeAcademy.com. In about several dozen exercises or so, you can quickly learn how to write code in different languages that empower the web. Courses in HTML/CSS, PHP, Javascript, Python, Ruby, and APIs are being offered. The program is geared towards people with no programming experience, but challenging enough for those with some programming experience.

The programs are designed to get you started, and to get your feet wet. It’s by no means a be all exhaustive programming experience. The CodeAcademy exercises are designed to get you introduced to the basics of each language. If you’re looking for a programming experience that is exhaustive, extensive and covers intermediate and advanced levels, CodeAcademy is not this program. There are other certification programs offered for a handsome fee.

CodeAcademy programs are free.

Bootstrap Your Website

December 19, 2012

Jumpstart your website by adding Bootstrap, a front-end CSS framework started by a couple of Twitter developers. If you are starting on a new web project, why not dress it with Bootstrap. You can quickly transform your website, by just adding a couple of markups. Bootstrap uses some HTML markup, LESS CSS, and Javascript plugins to create the framework.

To get started, Download Bootstrap first.

Then, use this HTML Bootstrap template

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
  <div class="container-fluid">
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </div>
  </body>
</html>

To learn more about Bootstrap, just play around with all the different aspects of the framework. Add some navigation buttons, forms, tables, alerts, and some Javascript features. Finally, you can learn a lot more by studying the rest of the documentation.

Numbers And Currency On Forms

November 21, 2012

This article will show you how to limit currency and numbers only in a form. There are essentially two different approaches when validating data. One way is to validate before submitting the form. The other is to validate after submitting the form. Obviously, validating before submit has its own merits. Incorrect data can be corrected before hitting the submit button. In this article, we will validate a field to allow numbers and currency only. We will allow up two decimal places to reflect currency values. The HTML markup is detailed below.

HTML Form

We have a simple form with one input and a submit button. There are two Javascript functions in the input field. The blockNonNumbers function allow numbers only to be typed on the input field. Non-number characters are ignored. The extractNumber function formats the input to two decimal places.

<form id="login" method="post" action=""> 
<input type="text" name="username" value="" 
 onblur="extractNumber(this,2,false);" 
 onkeyup="extractNumber(this,2,false);" 
 onkeypress="return blockNonNumbers(this, event, true, false);" />
</form>

Javascript

I’ve included the validate.js Javascript code, which you can download. The code contains two functions: blockNonNumbers and extractNumber. In the markup, we can link to the Javascript file in the head section of the page using the following markup.

<script language="javascript" src="validate.js"></script>

All Together Now

Here’s the entire markup.

<!doctype html>
<html>
<head>
<script language="javascript" src="validate.js"></script>
</head>
<body>
<form id="login" method="post" action=""> 
<input type="text" name="username" value="" 
 onblur="extractNumber(this,2,false);" 
 onkeyup="extractNumber(this,2,false);" 
 onkeypress="return blockNonNumbers(this, event, true, false);" />
</form>
</body>
</html>

Demo

Unsaved Changes On Forms

November 20, 2012

If you try to abandon a form, you’ll be reminded that you’ve made changes. In addition, a pop up message will come up, asking you whether to stay on the page or to abandon it. This feature is made possible using a Javascript function. This short article will show how to alert users if they made changes to a form, prior to canceling or going to another link.

The Form

In this example, I created a simple form with one input called “username.” I’ve added “onchange=’needToConfirm=True'” to monitor the input field. I also added a save and cancel button, as well as an internal link for testing the form later. The save button calls the “needToConfirm” function when the save button is clicked. The cancel button simply reloads the same page when the cancel button is clicked. Here’s the HTML markup.

<form id="login" method="post" action="">
<input type="text" name="username" size="40" value="" onchange="needToConfirm=true" /><br>
<input type="Submit" name="save" value="Save" onclick="needToConfirm=false;" />
<input type="button" value="Cancel" onclick="window.location='confirm.html'" />
<a href="confirm.html">Link</a>

Javascript

The unsaved changes feature is made possible using Javascript. The function starts out setting needToConfirm to false. A pop up window comes up notifying the user that they have unsaved changes on the form. The user is prompted whether to stay on the page or to leave the page. Add the following Javascript code at the end of the form. Go ahead, test the demo below.

<script>
needToConfirm = false;
window.onbeforeunload = askConfirm;
function askConfirm() 
{
 if (needToConfirm) 
 {
 return "You have unsaved changes.";
 }       
}
</script>

Demo

Bring Focus To Forms

November 19, 2012

When you visit Google.com, the cursor jumps to the searchbox, ready for users to submit a search. Bringing the cursor to the form is called form focus. This is made possible using a simple Javascript. You can set certain elements of the form to focus, when a page is loaded. This is particularly helpful for pages with minimal content, where the intent of the web developer, is to get users to enter data quickly. A login page is a perfect example of such a page. This article will show you how to bring focus on your forms using a simple Javascript.

HTML Form

Let’s create a simple form with two fields called username and password. The goal is to bring the cursor to the “username” field when the page is loaded. First, we assign an “id” and “name” to the form. Let’s call it “login” for lack of a better name. Next, we need to assign an “id” and “tabindex” to each input. We will use “id=’username'” and “tabindex=’1′” for the first input, and “id=’password'” and “tabindex=’2′” to the second input. See the example below.

<form id="login" name="login" method="post" action="">
<label for="username">Username: </label>
<input id="username" tabindex="1" type="text" name="username"/><br/>
<label for="password">Password: </label>
<input id="password" tabindex="2" type="password" name="password" /><br/>
<input type="submit" name="submit"/>
</form>

Javascript

We can then add a simple Javascript to the end of our form. This code will bring focus, or move the cursor, to a form called “login”, and to a field called “username.” That is it. Simple enough. This is how we bring focus to a form. Check out the demo below to see the result.

<script type=”text/javascript” language=”JavaScript”>
document.login.username.focus();
</script>

Demo