Atom Editor

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

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

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

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.

Open New Window

One of the basic things you can do with Javascript is to open up a small popup window. You can set the resulting window to any size you want. You can make the window scrollable, fixed and resizable. To create a popup window, we will use a simple link to trigger the event. Here are details of our page with some embedded Javascript code.

In this example, we are using a regular link to trigger an event. Instead of the standard URL on the link, we will use the “javascript:open_window()” function. The “open_window” function opens the contents of my home page, which is http://uly.me. We can point it to any file or page that we want. The new window is called “abc.”

The popup window is sized accordingly to a width of 700 and height of 500, and it contains a scrollbar, and it’s resizeable.

Check the demo below.

<a href='javascript:open_window()'>Link</a>
<script>
function open_window() {
 window.open('http://uly.me','abc','width=700,height=500,resizable=yes,scrollbars=yes');
}
</script>

Demo