AMT Blog

Adobe's Brackets is an open source code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript. 

(download)

Click here to download:

brackets-adobe-s-open-source-ide-for-html-css-javascript-in-the-works-JfffdBwdDruGGJaDDdIh.zip (86 KB)

Abobe assures that Brackets would provide a better experience for developers and designers than other IDE’s with the following key parameters…

• Tools shouldn't get in your way. Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit UI in Brackets puts context-specific code and tools inline.
• Brackets is in sync with your browser. With Live Development, Brackets works directly with your browser to push code edits instantly, set breakpoints, and jump back and forth between your real source code and the browser view.
• Do it yourself. Because Brackets is open source, and built with HTML, CSS and JavaScript, you can help build the best code editor for the web.

As the IDE is in the very early stages of its development, it's not yet ready for general use. It might be missing many basic editor features, and probably has bugs. Adobe invites the open source community to contribute and built the best code editor of the web.

Although Brackets is built in HTML/CSS/JS, it currently runs as a desktop application in a thin native shell, so that it can access your local files. (If you just try to open the index.html file in a browser, it won’t work yet.) The native shell for Brackets lives in a separate repo, adobe/brackets-app, which includes this repo as a submodule. 

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

Fbootstrapp is an excellent (HTML, CSS, and JavaScript) toolkit providing templates for quick development of Facebook iframe apps.

It is build on Twitters’ Bootstrap, has styles for typography, forms, buttons, tables, grids, navigation and much more which are all styled to fit Facebook's standard UI.

There are two 12-column grids included, one for 520px (fan-page), the other one for 760px (standalone app). 

Read more…

Bootstrap is a HTML toolkit from Twitter, includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. Open sourced (Apache v2 license).

Bootstrap, a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource. Check out Bootstrap on Github

At its core, Bootstrap is just CSS, but it's built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions. Additionally, since Bootstrap is purely CSS when compiled via Less, we gain two important benefits:

First, Bootstrap remains very easy to implement; just drop it in your code and go. Compiling Less can be accomplished via Javascript, an unofficial Mac application, or via Node.js (read more about this at http://lesscss.org).

Don't like to miss out any of our posts? Do Subscribe to our Feed

Are you interested in HTML? Answer these 10 Simple questions to test your knowledge in HTML.

Take Our Quiz!

This is an interesting open discussion (originally appeared on Programmers StackExchange) on best practices while working with HTML, JavaScript and PHP in general.

I realized I have to write down a convention specification about HTML, JavaScript and PHP coding for me and my team.

In web development, just like in C++, I'm definitely a fan of indentation and comments.

Nonetheless, often in my work I encounter HTML+JavaScript+PHP code which suddenly brings up the headache.

I'm trying to make my code readable, but what seems to be better to me (to indent & comment) seems not to fascinate my teammates, so I was wondering if there is a best or at least shared good practice when writing "hybrid" documents just like today's web pages, which day by day become more and more complex.

I'm aware of the fact that probably it is in the nature of today's web pages' code to be a little bit intricated, but I wonder if a good convention concerning these aspects already exists.

Some general rules I follow:

General

• Indents are 4 spaces.
• Indent new levels
• Comments are < ~80 chars from the indent level. If I'm in two levels (8 spaces) that means the cursor stop will be around 88 characters.
• Use multi-line comments. I prefer the look, however this is a subjective point.
• Comment now rather then later when you have no idea what's going on.
• Allman style braces. It's cleaner and is more readable. Subjective.

JavaScript

• Use a library. jQuery in particular is very good. It eliminates all cross browser headaches.
• Understand that ID's are for particular elements, classes are for styles. ID's shouldn't be used more then once per page and they will have particular hooks attached to them. Use classes for things like navigation.
• Out source into methods. It's tempting to put all the code into the bind call, however putting it in it's own function will increase the flexibility of your code.
• Use functions instead of evals. That means setTimeout(function(){ /* Do something */ }, 1000); instead of setTimeout('doSomething', 1000);
• Use local variables with var.

HTML

• Semantic markup. Use appropriate tags. Don't put <br />'s in there to add space, adjust margins and CSS rules.
• All tags are lowercase.
• All tags should end with a closing tag or be self closing.
• Make use of classes for layout that is similar. Have a couple of predefined classes like hide, clear, error, etc.
• Everything (scripts included) should go in <head>. Worry about optimizing (moving stuff around) when it presents a problem.
• External stylesheets and JavaScript source is a must unless it is page specific.

PHP

• Frameworks are good, I recommend CodeIgniter.
• If you don't want to use a framework, try to use the latest version of PHP possible. (That means 5.3).
• Use includes to your advantage.
• Clear injections or use prepared statements.

• Perform if checks on preconceived fail-secure values.

  $logged_in = false;if(check_user($user)){     $logged_in = true;     $user = load_user($_SESSION);}

• Know the difference between single and double quotes. Use single quotes when possible.
• Don't echo HTML.

Do let us know about the best practices you follow in the comments section below.