10 Most Fascinating Text Editors For Web Developers

This is a guest post by Charu Garg.

Writing code for a blog or website is a daunting task. It requires a lot of concentration, as even a slightest error may make your web page go haywire. Therefore, it is necessary to use a powerful and feature rich text editor that you can rely on and also helps you recognize errors in your code.

Adobe Dreamweaver used to be the most preferred text editor, however, as the technology progressed, web developers started to try new text/code editors. Now, there are plenty of text editors available to choose from and this had really made the task of picking the best ones difficult.

In this post, we list up the 10 most fascinating text editors for web developers, that are intuitive, robust, powerful, and feature rich.

1. SlickEdit

   

   
   SlickEdit is one of its own kind text editor that lets you code faster. It has been designed by developers for developers, and possesses many fascinating features. In SlickEdit, you can have a multiple document group interface, where document tabs can be arranged as separate top-level windows, and you can also drag and drop the files between tab groups.

    

   For SlickEdit, a new version has also been launched recently which supports files greater than 2GB. Apart from that, it also supports many exciting web programming languages such as CoffeeScript, Google Go, Matlab, and Markdown. Moreover, Android applications can also be built with ease using SlickEdit.

2. Brackets

   The Brackets is undoubtedly one of the most exciting text editors of today’s time. It’s an open source code editor that anyone can use for free. It has been designed and developed by Adobe, the company that is known for its web development related software such as Adobe Photoshop, Fireworks, and Dreamweaver. The Brackets has been built using HTML, CSS and JavaScript, and comes with a clutter free workspace and some compelling features such as Live Preview and Quick Edit. Moreover, it also gets hooked up with the browser and lets you code seamlessly. Apart from this, people can also contribute with their coding skills to enhance its functionality and make it more powerful than ever.

3. Sublime Text

   Sublime Text is an innovative text editor that comes in three different versions; one for Windows, one for Mac and one for Linux. In the recent years, it has proved to be one of the most in-demand text editors. It is pretty light in weight, and only consumes a very little disk space. Though it is paid text editor and cost $70 per license, but one can easily use it for free as it’s available for download to give it a try and evaluate it without having any time limitation. The Sublime Text offers a slick user interface, with exciting and intuitive features and powerful performance.

4. PSPad

   PSPad is one of the most used freeware text editor that is built specifically for Microsoft Windows. It is available in 8 languages including English, French, Russian, and Spanish. The PSPad works with a variety of programming languages pretty well, and provide its users with highlighted syntax. In addition to this, it comes with an inbuilt FTP client, which let the users to edit files directly from the web. Apart from this, it is also capable of saving the desktop sessions which makes it easier to re-open and work on all session files.

5. Espresso

   Espresso is a new feature rich and compelling text code editor that comes with an integrated CSSEdit 3. No matter what programming language out of HTML5, CSS3, PHP, JavaScript, Ruby, Python, Apache and Markdown you use to develop your own or your client’s website, Espresso will let you code them fast. Thanks to its powerful smart snippets, contextual completions, and Zen actions. The updates or changes you implement in your code can also be viewed in real time with its live styling feature, along with that you can also visualize and inspect the layouts with its powerful X-ray feature. In addition to this, the implemented changes can also be transferred on to live server by using the Quick Publish or Sync.

6. TextMate

   Textmate is an exclusive and innovative text editor for Macintosh. Its license only cost €39 or $54 per user. However, multiple licenses can also be bought at reasonable prices. It offers plenty of features that generally developers miss-out in other code editors such as column selection and column typing. Apart from this, Textmate supports Preforce, SVK, Darcs, and Subversion, along with 50+ languages. It also works as an external editor for (s)ftp programs.

7. Codeita

   Developing websites and web applications with Codeita is fun and doesn’t cost anything, as it’s a cloud based free text editor that can be downloaded and installed on a server. Additionally, it allows developers to work and create, edit and deploy web projects collectively in a social environment. Codeita users can manage their codes, files and databases from a single and easy to use browser based dashboard, and along with that they can also share their work with other team members (if any).

8. iCecoder

   Do you love making websites with a modern approach? If yes, then iCecoder would prove to be your perfect choice. That’s because it allows developers to code right within the web browser, no matter if they are online or offline. It’s an open source browser code editor that makes web development a real easy task to complete. Moreover, it can also be tweaked and customized pretty easily. In terms of features, it has got a broken tag indicator, nest display & selection, and type boosters.

9. Notepad++

   Notepad++ is one of the most popular modern text editors in today’s time. It’s an open source code editor that strikes a resemblance with Notepad (a simple text editor that comes pre-installed in Microsoft Windows), but only in terms of name. Though it has been made specifically to work on Windows, but Mac, Linux, Unix, and BSD users can also use it with the help of WineHQ. The Notepad++ comes up with many eye-catching features such as drag and drop, synchronized scrolling, tabbed and split screen editing, spell checker, zooming, etc. Moreover, the users can also customize it according to their needs. The best thing about Notepad++ is that it can be downloaded anytime for free.

10. NoteTab

    NoteTab is a modern code or text editor that costs only $39.95 per license. However, it also has a light version named as NoteTab Light, that can be downloaded for free. It has a sleek and intuitive interface, and has many unique and powerful features such as; support for twitter bootstrap toolkit, text statistics for SEO, where it automatically ignores the HTML code, and lets you keep your text within the SEO limits. NoteTab’s premium version can also be tried for 30 days to get to know it better.

The text editors compared

Text Editor	Platform Support	Paid	Free
SlickEdit	Windows/Macintosh	Yes	No
Brackets	Windows/Macintosh/Linux	No	Yes
Sublime Text	Windows/Macintosh/Linux	Yes	Yes
PSPad	Windows	No	Yes
Espresso	Windows/Macintosh	Yes	No
Textmate	Macintosh	Yes	No
Codeita	Windows/Macintosh/Linux	No	Yes
iCecoder	Windows/Macintosh/Linux	No	Yes
Notepad++	Windows/Macintosh/Linux (with WineHQ)	No	Yes
NoteTab	Windows	Yes	Yes

 

Copied from original source : http://www.bloggersentral.com/2013/09/awesome-text-editors-for-web-developers.html

READ MORE - 10 Most Fascinating Text Editors For Web Developers

Useful Online CSS Colors Tools

CSS Colors Tools

Color Scheme Designer

This tool provides colors in the form of a color wheel that offers mono, complement, traid, tetrad, analogic and accented analogic color variations in the percentage ratio; and it also highlights the same with the suitable scheme chosen.

 

Ultimate CSS Gradient Generator

It is a CSS gradient editor and generator that lets you create CSS gradients having cross-browser support.

Colors Pallete Generator

This is a powerful tool that generates a color palette derived from the primary colors of the image that you upload. It is a useful tool for rapidly grabbing a particular color within an image for inspiration. With this, you can also generate Photoshop swatches and CSS styles.

 

CSS Colors

This color chart offers more than 16 million colors with both RGB and hexadecimal color modes.

Gradient Image Maker

This tool allows you to easily generate a gradient image of 3 types with on the spot previewing. With this tool you can create gradient images that you can use everywhere in your web page design.

 

READ MORE - Useful Online CSS Colors Tools

Contoh CSS : Example Box DIV

About the author 
henkhei is man in the mirror where you can find everywhere henkhei. he specializes in topics of interest to techno geeks and networking enthusiasts..

<div id="post-4869368386807611219" class="post-body" style="margin: 0px; padding: 0px; width: 560px; text-align: justify; color: #222222; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.390625px; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;">

<p class="guest" style="margin: 10px 0px 5px; padding: 5px 10px !important; background-color: #e3ffcc; border-left-width: 10px; border-left-style: solid; border-left-color: #ff690e; font-size: 14px; color: #111111;"><span style="margin: 0px; padding: 0px; font-size: small;"><strong style="margin: 0px; padding: 0px;">About the author</strong></span> <br style="margin: 0px; padding: 0px;" />henkhei is man in the mirror where you can find everywhere <a style="margin: 0px; padding: 0px; color: #555588; outline: none; text-decoration: none;" href="http://henkhei.blogspot.com" target="_blank">henkhei</a>. he specializes in topics of interest to techno geeks and networking enthusiasts..</p>

READ MORE - Contoh CSS : Example Box DIV

Javascript Host Script Tips for Blogger

Below are some of the options you have when adding Javascripts to your Blogger or blogspot blog.

1. Put it in a widget

If the script is small and used only for that particular widget then this is the preferred method. Just put the script in an HTML/Javascript gadget/widget together with the rest of the widget codes, like this:

<script type='text/javascript'>
put javascript code in here
</script>

Most of my hacks use this method. I like this method because it’s easier to install, uninstall and you don’t need to mess with your template code.

2. Put it in the template itself

Use this method if the script is accessed from outside of a widget or from more than one places in your template. Do it like this:Then place the whole thing before the </head> tag in your template.

<script type='text/javascript'>
//<![CDATA[
put javascript code here
//]]>
</script>

3. Host the javascript file externally (outside of Blogger server)

To be specific use Google Sites. Why Google Sites? Because it’s free first and foremost (that’s why you join Blogger in the first place right?) and it’s a  part of Google big family, so you don’t have to sign up or anything.

But Google Sites, like most free host doesn’t accept javascripts. Luckily there is a workaround -change the javascript file into a text file, by changing the file extension from .js to .txt.

Note: The external script must not contain the <script type='text/javascript'></script> tags.

After uploading the file to Google Sites, get the direct link to the file and use it in the code below (notice the .txt file extension).

<script src='filename.txt' type="text/javascript'/>

The direct link to the file will begin with https. To make it work, you need to change https to http when adding to the code, like in this example:

1	<script src='http://sites.google.com/site/bloggersentral/file-storage/shBrushXml.txt' type='text/javascript'/>

This code must be positioned exactly where you would want the script to be in your template.

Copy fron Original Source : http://www.bloggersentral.com/2010/03/where-to-host-javascript-for-blogspot.html

READ MORE - Javascript Host Script Tips for Blogger

Javascript Host Script Tips

Blogger does not provide file hosting, (except for photos and videos, in Picasaweb). This poses problem if you want to add a widget or a feature that uses Javascript. Where do you put the scripts then?

Below are some of the options you have when adding Javascripts to your Blogger or blogspot blog.

 

1. Put it in a widget

If the script is small and used only for that particular widget then this is the preferred method. Just put the script in an HTML/Javascript gadget/widget together with the rest of the widget codes, like this: 

view sourceprint?

1	<script type='text/javascript'>

2	put javascript code in here

3

</script>

Most of my hacks use this method. I like this method because it’s easier to install, uninstall and you don’t need to mess with your template code.

 

2. Put it in the template itself

Use this method if the script is accessed from outside of a widget or from more than one places in your template. Do it like this:

view sourceprint?

1	<script type='text/javascript'>

2	//<![CDATA[

3	put javascript code here

4

//]]>

5

</script>

Then place the whole thing before the </head> tag in your template.

 

3. Host the javascript file externally (outside of Blogger server)

To be specific use Google Sites. Why Google Sites? Because it’s free first and foremost (that’s why you join Blogger in the first place right?) and it’s a  part of Google big family, so you don’t have to sign up or anything.

But Google Sites, like most free host doesn’t accept javascripts. Luckily there is a workaround -change the javascript file into a text file, by changing the file extension from .js to .txt.

Note: The external script must not contain the <script type='text/javascript'></script> tags.

After uploading the file to Google Sites, get the direct link to the file and use it in the code below (notice the .txt file extension).

view sourceprint?

1	<script src='filename.txt' type="text/javascript'/>

The direct link to the file will begin with https. To make it work, you need to change https to http when adding to the code, like in this example:

1	<script src='http://sites.google.com/site/bloggersentral/file-storage/shBrushXml.txt' type='text/javascript'/>

This code must be positioned exactly where you would want the script to be in your template.

 

Copy fron Original Source : http://www.bloggersentral.com/2010/03/where-to-host-javascript-for-blogspot.html 

READ MORE - Javascript Host Script Tips