Great coding software to help in daily development process can be irreplaceable tool – bad software can lower your work efficient stage so badly, you would even don’t want to hear my experiences. For example – Dreamweaver, try to write there any code in Design view, you will get so dirty code, that you will have to spend hours until you will understand and clean it to make your page load faster.
Good software however can give you a lot of tips, ways to help code faster,find your typing mistakes without a pain. Make sure to read one, as we are presenting you with a lot of CSS tools and performance profiling tools for your websites.
Table of Contents:
- What Is The Best Free Coding Software Editor in 2016?
- CSS Tools for Designers and Developers
- Top 10+ Tools For Profiling Websites Speed!
What Is The Best Free Coding Software Editor in 2016?
In the beginning of this article you will find more about the most popular and effective coding software. So what’s the best one? Read on..and you’ll find out now..
Editors Choice: Atom.io
Now over the years, there has been many text editors created, but only few have stayed and improved over the years. Atom.io right now is used by all my programmer friends and myself include.
If you want to use the best WYSIWYG HTML editor, that will save 10x time when coding or doing any editing use – Atom. Just try it, you’ll thank me later. Oh and watch their demo video, it’s super cool as well. Best of all.. Atom.io is free and it’s made by Github..:)
If you don’t love it – come back here and you can call me in the meanest words, but I know that will never happen!
Another honourable mention goes to Coda, super cool text editor for Mac users. It’s pixel-perfect and beautiful, but it does cost $99 to use it. I’ll stick with Atom for now!
Now the rest of the article..we will update this soon.. Thank you for understanding..
But hey – you got the best tool already! :)
1. Aptana Studio (Windows, Linux, Mac OS X) (FREE)
Features of Aptana Studio:
- Unified Editing for Web Apps
- Ruby on Rails, Python and PHP
- Desktop Ajax
- Free, Open Source and Cross Platform
2. SlickEdit (Windows, Linux, Mac OS X) (FREE Trial; 299$)
SlickEdit is the multi-platform, multi-language code editor that gives programmers the ability to create, navigate, modify, build, and debug code faster and more accurately.
Features of SlickEdit:
- Display symbol details with List Members, function/method argument help, and formatted Javadoc/XMLdoc/Doxygen comments
- Analyze symbols and hierarchy with a rich set of tools including Symbols, Class, References, and Find Symbol tool windows
- Check in and check out from version control
- Diff files and directories
- Preview the definition for the symbol under the cursor automatically without lifting a finger. The Preview tool window shows the definition and formatted Javadoc/XMLdoc/Doxygen comments.
- Edit files up to 2 GB
3. jEdit (Windows, Linux, Mac OS X) (FREE)
jEdit is a mature programmer’s text editor with hundreds (counting the time developing plugins) of person-years of development behind it.
Features of jEdit:
- Built-in macro language
- Plugins can be downloaded and installed from within jEdit using the “plugin manager” feature.
- Auto indent, and syntax highlighting for more than 130 languages.
- Supports a large number of character encodings including UTF8 and Unicode.
- Folding for selectively hiding regions of text.
- Word wrap.
- Highly configurable and customizable.
4. IntelliJ IDEA (Windows, Linux, Mac OS X) (FREE; €86 to €516)
IntelliJ IDEA is a code-centric IDE focused on developer productivity. IntelliJ IDEA deeply understands your code and gives you a set of powerful tools without imposing any particular workflow or project structure. IntelliJ IDEA is your dream pair-programmer who knows its way around the codebase, makes great suggestions right when you need them, and is always ready to help you shape your code.
Features of IntelliJ IDEA:
- Advanced Code Editing
- Supported Languages
- Technologies & Frameworks
- Teamwork Facilitation
- Code Quality Features
- Integrated Environment
- Customization & Extensibility
5. Notepad++ (Windows) (FREE)
Notepad++ is a free source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.
Features of Notepad++:
- Syntax Highlighting and Syntax Folding
- User Defined Syntax Highlighting
- Regular Expression Search/Replace supported
- Full Drag ‘N’ Drop supported
- Dynamic position of Views
- File Status Auto-detection
- Zoom in and zoom out
- Multi-Language environment supported
- Brace and Indent guideline Highlighting
- Macro recording and playback
6. SCREEM (Linux) (FREE)
SCREEM is a web development environment. It’s purpose is to increase productivity when constructing a site, by providing quick access to commonly used features. While it is written for use with the GNOME desktop environment in mind it does not specifically require you to be running it, just have the libraries installed.
Features of SCREEM:
- Broken Link Checking
- CTags Support
- Cut / Paste
- CVS Support
- Document Structure Display
- DTD/Doctype Parsing
- Helper Applications
- Inline Tagging
- Link Fixing
- Page Previewing
- Page Templates
- Recent documents / Projects
- Search / Replace
- Select Context
- Spell Checking
- Syntax Highlighting
- Tag Trees
- Task management
7. EmEditor (Windows) (FREE Trial; €32.15)
EmEditor is a lightweight, but extensible, commercial text editor for Microsoft Windows. Although designed for Windows XP, the program is also certified for use with Windows Vista. Available editions of the program include the 32-bit edition and the 64-bit edition, and the program also includes a portability option to set up a removable drive, such as a USB drive, through an Import and Export Wizard. Feature-wise, the program includes unicode and large file support, a tabbed window design, and is extensible via plugins and scripts (macros), many of which have been written by the users.
Features of EmEditor:
- New Snippets Plug-in
- Brackets/Quotation Mark Auto-Complete
- CSV, TSV and DSV
- Full Screen View
- Clipboard History
- Wildcard Support
- Workspace Including Undo Information
- New External Tools
- Pin to List
- Save in Protected Folder
- Supports Windows 7 Jump List
- New Buttons on Toolbar
8. Programmer’s Notepad (Windows) (FREE)
Programmer’s Notepad is an open-source text editor targeted at users who work with source code.
Features of Programmer’s Notepad:
- Bookmarks (both numbered and plain)
- Code Folding/Outlining
- Docking tool windows
- Excellent external tool support with user-configurable output matching
- Export to HTML (using CSS) and RTF
- File association manager
- In-file method/definition navigation (using Ctags)
- No limit on file size (although large files may take a while to load)
- Non fixed-width font support
- Projects and Project Groups with multi-level folders and file system mirroring
- Quick Search toolbar with links to Google and Google Groups
- Regular expression search and replace
- Support for unicode files
- Support for windows, unix and macintosh file formats
- Syntax highlighting for many languages through “schemes”.
- Tabbed MDI interface
- Text Clips
- Unlimited number of schemes supported, powerful syntax highlighting supporting both user-defined and built-in schemes
- User-defined schemes (XML)
9. PSPad (Windows) (FREE)
PSPad editor is a freeware text editor and source editor intended for use by programmers.
Features of PSPad:
The universal freeware editor, useful for people who:
- Work with plain text
- Create web pages
- Want to use a good IDE for their compiler
10. HTML-Kit (Windows) (FREE)
HTML-Kit is an HTML editor for Microsoft Windows. The application is a full-featured HTML editor designed to edit, format, validate, preview and publish web pages in HTML, XHTML and XML -languages.
Features of HTML-Kit:
- Navigate tags and scripts
- Code Folding
- Batch Search and Replace
- Upload Options
- Incremental Search and Go-To
- File Versioning and Auto Backup
- HTML-Kit Shorthand
- Not Lost in Translation
- Remote Editing with Local Copy
- Dockable Plugins
- Paste Plus
- Native Unicode Support
- Multi-Page Templates
- Re-order Document Tabs
11. EditPlus (Windows) (FREE Trial; $35)
EditPlus is a text editor, HTML editor, PHP editor and Java editor for Windows. While it can serve as a good Notepad replacement, it also offers many powerful features for Web page authors and programmers.
Features of EditPlus:
- Multiple document interface
- Overlappable windows
- Tabbed document interface
- Window splitting
- Spell checking
- Regex-based find & replace
- Encoding conversion
- Newline conversion
- Syntax highlighting
- Multiple undo/redo
- Rectangular block selection
- Bracket matching
- Auto indentation
- Auto completion
- Code folding (Text folding)
- Compiler integration
12. Crimson Editor (Windows) (FREE)
Crimson Editor is a professional source code editor for Windows. This program is not only fast in loading time, but also small in size (so small that it can be copied in one floppy disk).
Features of Crimson Editor:
- Edit multiple documents
- Syntax highlighting
- Multi-level undo / redo
- Project management
- Directory tree view window
- Find & Replace
- Column mode editing
- Natural word wrapping
- Spell checker
- User tools and macros
- Edit remote files directly using built-in FTP client
- Print & Print preview
13. Coda (Mac OS X) (99$)
Coda is a $99 commercial web development application for Mac OS X, developed by Panic.
Features of Coda:
- Open quickly
- Smart Spelling
- Find across files
14. BBEdit (Mac OS X) (FREE Trial; From $49 to $125)
Whenever you need to work with text, whether you want to create or maintain a Web site, write a program or shell script, search log files and extract data, or write a few paragraphs (or pages, or books), BBEdit offers what you need to make accomplishing your task quicker and easier. BBEdit 9 adds over one hundred new features and over one hundred improvements over the previous version.
Features of BBEdit:
- Text Handling
- Web Development
- File Handling
- UNIX & Admin
15. TextMate (Mac OS X) (FREE Trial; €48.75)
TextMate brings Apple’s approach to operating systems into the world of text editors. By bridging UNIX underpinnings and GUI, TextMate cherry-picks the best of both worlds to the benefit of expert scripters and novice users alike.
Features of TextMate:
- Ability to Search and Replace in a Project
- Auto-Indent for Common Actions Like Pasting Text
- Auto-Pairing of Brackets and Other Characters
- Clipboard History
- Column Selections and Column Typing
- Completion of Words from Current Document
- CSS-like Selectors to Pinpoint the Scope of Actions and Settings
- Declarative Language Grammars for Graceful Mixing and Hacking
- Dynamic Outline for Working With Multiple Files
- Expand Trigger Words to Code Blocks With Tab-able Placeholders
- File Tabs when Working With Projects
- Foldable Code Blocks
- Function Pop-up for Quick Overview and Navigation
- Plug-able Through Your Favorite Scripting Language
- Recordable Macros With No Programming Required
- Regular Expression Search and Replace (grep)
- Run Shell Commands from Within a Document
- Support for Darcs, Perforce, SVK, and Subversion
- Support for More Than 50 Languages
- Switch Between Files in Projects With a Minimum of Key Strokes
- Themable Syntax Highlight Colors
- Visual Bookmarks to Jump Between Places in a File
- Works As External Editor for (s)ftp Programs
- Works Together With Xcode and Can Build Xcode Projects
16. SubEthaEdit (Mac OS X) (FREE Trial; €29)
SubEthaEdit is a powerful and lean text editor. And it’s the only collaborative one that is a joy to use. By combining the ease of Bonjour with the world’s best text collaboration engine, it makes working together not only possible but even fun…
Features of SubEthaEdit:
SubEthaEdit includes various advanced features: A UNIX command line utility to enable complex and interactive pipe workflows with your terminal. Overhauled printing, including all bells and whistles, even with collaborative metadata. Exporting to HTML, again with metadata. Completely user customizable syntax highlighting through styles. Support for editing files as administrator. Improved AppleScript support to allow control of sharing features.
17. CSSEdit (Mac OS X) (FREE Trial; $39.95)
Design beautiful, innovative and fast-loading web sites… with a beautiful, innovative and fast app. CSSEdit’s intuitive approach to style sheets and powerful previewing features will make you deliver awesome standards-based sites in no time!
Features of CSSEdit:
With CSSEdit, you see changes to your style sheet applied in real-time. Without saving. Without uploading. Without hassle. For any Web App or HTML file. You can edit style sheets for absolutely any site, on- or offline. Thanks to our innovative Override technology, you can even apply your open style sheets to any site and see it change instantly! Styling a Web App used to be a cycle of type — upload — refresh. CSSEdit destroys this waste of time. Making your Web 2.0 App beautiful is now easy and productive.
18. Taco HTML Edit (Mac OS X) (FREE Trial; $24.95)
Taco HTML Edit is the premier HTML editor and PHP editor for the Mac. As an HTML editor, Taco HTML Edit empowers its users to rapidly create their own web sites. It is designed exclusively for Mac OS X and has many advanced features including spell checking, live browser previewing, PHP previewing, syntax checking, and much more.
Features of Taco HTML Edit:
- Component Library
- Code Coloring
- Code Completion
- Syntax Checking
- Live Preview
- Code Clips
19. skEdit (Mac OS X) (FREE Trial; $34.95)
skEdit is a text editor for Mac OS X, aimed at web designers and programmers.
Features of skEdit:
- Tabbed interface
- Project based site management
- Code hinting and completion
- Code folding
- Code snippets
- Syntax highlighting
- File uploading and remote editing (using FTP, SFTP or WebDAV)
- HTML Tidy integration
- Search and replace with support for regular expressions
Which software for coding is your favorite? If you haven’t got one, now you certainly have some promising programs to choose from!
CSS Tools for Designers and Developers
CSS tools are important for web designers and developers because they help them by simplifying the jobs they have to do. Considering time is money and such generators spare time, it is easy to understand why many web developers are excited about these tools. The only problem is that some of them are not well-known, therefore I made a showcase for you with CSS tools and generators which developers and designers can use to create functional and optimized websites faster. Because the tools will be categorized, you will find at the end of each category a list with other applications that do the same as the ones reviewed, therefore there is no need to review them too. We couldn’t resist to include these CSS tools here. Beside the coding software you’ll need some CSS tools.
Tools for layouts
If you don’t know HTML or CSS and want a website, Templatr can create a layout for you in a matter of seconds. There are lots of possible layouts you can choose from, upload images and other graphic elements and many, many other things. You can easily select every element on the page and customize it by choosing different options from a dropdown list, which makes modifying the page easier and quite fast. The layouts you make can be downloaded and installed using an application. Another good part is the support for several languages.
CSS Template Generator
CSS Template Generator is not as complex as templatr, but offers some nice features too. As you can see in the screenshot below, it generates a basic CSS stylesheet for an HTML page and gives you the CSS code for it, which you will need to copy/paste in your stylesheet. Obviously, you also get the code for the HTML page. A downside of this generator is the lack of a download option. The only way you can use the layouts created here is copying the code yourself.
What I like about YAML is the amount of options you have. Besides being able to select the basic information needed to create a layout, you can also go a bit more in-depth if you have enough knowledge of coding. The columns and the layout have properties, you have presets, you can play with the flexible grids, choose coding options and many others. This generator might actually be the best out of these three.
Tools for the grid system
Variable Grid System
Variable Grid System might be one of the best grid system tools you can find on the internet. It allows you to quickly generate a CSS stylesheet for your website and is based on the 960gs, which we will review a bit further down the road. You can customize the width of the main container, the width of the content, the column width, the number of columns and the gutter and you can preview the layout before downloading it – this actually happens automatically when you modify a value.
Gridinator allows the user to customize the layout more than the previous tool. You have the option of modifying colors, font size, choose pixels or em and even select popular layouts from a list on the right hand side. This tool allows you to preview the grid system before downloading the fully functional template.
Tools for colors
Now that we have a layout and a grid system, we can start thinking about colors and color schemes. Here are some great tools you should look at.
My personal favorite is Kuler, a tool developed and maintained by Adobe. You can find lots and lots of color schemes here you can use for your web pages and even inspiration if you need it. There are more than 11.000 color schemes available (all free of charge) and you even have the option to customize them. If you create an account there you can also start submitting your color schemes of choice and inspire others to use them on their websites. Another incredible tool by Adobe…
Color Scheme Designer
Although quite different than the first example, Color Scheme Designer is another great tool which allows you to create schemes on a total other level. You can choose a color, then one of the options above – mono, complement, triad, tetrad, analogic or accented analogic – and let the tool do its job. It is a tool you may find very useful for when you need colors for your design. And if that wasn’t already enough, you can also create color schemes for the color blind. Each scheme you create gets an ID which you can save. Later you can return to your scheme again and continue customizing it.
CSS Gradient Generator
If you don’t want to open Photoshop to create a gradient, CSS Gradient Generator will be great for you. It allows you to do the same thing Photoshop does, only it works with CSS and way faster. You can save your gradients using an unique link.
Tools for menus and buttons
CSS Menu Maker
CSS Menu Maker allows you to create your own customized CSS menus and generates them for you in a simple, HTML/CSS format, so you can download and use them right away. The tool has a fairly big gallery of menus – vertical, horizontal and dropdown – and allows you to customize them in detail. Moreover, you can also download plugins for Adobe Dreamweaver and create your own menus on your own computer. The menus are cross-compatible and will look the same in all the browsers (except maybe transitions for Internet Explorer).
Button Maker Online
Button Maker Online from Dynamic Drive allows you to create and customize your own buttons, then download and use them in your designs. You can pretty much customize everything from colors, borders, size and even has some transparency options. You can preview the buttons before using them.
This one is very similar to the first, only you: by choosing your style from several dropdown lists. It’s pretty much the same it only depends which one you are more comfortable working with.
Tools for fonts
Font Tester is an incredible tool which lets you preview different fonts, so that you won’t have to insert them into your CSS file and customize them there. Just customize the fonts on this web page and when you find the perfect one, get the code and use it! There are so many options I don’t even know where to begin. There’s line height, text decoration, text transform, font weight, word spacing, font stretch, white space, unicode bidi and many, many others. Just go an give it a try, you will fall in love with it.
Typester is pretty much for the same purpose as Font Tester, only it might be more popular and you can preview more fonts there – even the Google fonts. There are not so many options for customizing, but what you have should be enough to give you a preview of the typeface you wish to integrate in your design.
If you wish to generate a default CSS style fast, then CSS Generator is for you. It’s similar to the tools for grid systems, only this one doesn’t really keep a grid system (you will have to code it afterwards). You can, however, generate a stylesheet with link colors, font size, margins, hover color and so on – and spare some valuable time later on during the coding.
Quick CSS does the same thing, only you have even more customization possibilities, so take a look at this too. The generated CSS seems to always be validated by W3C and the process is quite fast as well, so you will be able to enjoy a half an hour of TV later instead of coding the defaults of the stylesheet.
If you design e-mail newsletters and need to generate tables in CSS, then this tool will do the job.
That was a list of CSS tools and generators I wanted to raise awareness about. Do you have some others you would like to recommend?
Top 10+ Tools For Profiling Websites Speed!
The goal of any great website is to provide quality content for its readers and clients, though no website can be truly successful if it cannot provide the content in a timely manner. How much time is acceptable isn’t always up to you though. It’s in the eyes of the beholder, hence the readers.
If you have a mostly text based website and it takes two minutes to load, there is 99.99% chance the person will not wait. These days, people want information and websites to be practically instantaneous.
Below you’ll find the best of the best tools on the internet to profile your website. One query at a time. And best of all, they are all free (as in beer)! Jump right in to read on… This first tool is one which you will probably want to check first.
For example, using just this tool alone I brought my main websites loading time down from a whopping 13-16 seconds to 3-6 seconds! What what wrong? I found out that my site was still loading a few old plugins and that two or three other plugins where creating this huge delay!
Though one tool is never good enough. Let’s look at some other available tools to get a nice average time and to make sure the load times are similar. Google Page Speed tool is another great one.
Check out how well you are following Google guidelines. Google can tell you so much, because they care about the user experience after they click on the search result and websites who show in their data as being user friendly, readable with lots of time spent staying on the landing page and then clicking on more afterwards. Don’t underestimate Google power and this is a great, great tool helping you to understand how to provide the best experience for visitors.
This won’t give you a line by line profile, but it will give you load times from many sources. You can use this to compare times with what you observe and with what you received from Pingdom Tools!
This great little website speed tool will tell you the time it takes on the current connection to load your page AND estimates on how long it will take to load on several other connection types including: dsl, cable and T1!
It also tells you how many images, java scripts and CSS files it found and how large each is (and the totals). That way you know exactly what is eating up the most bandwith.
WebsiteOptimization.com‘s Web Page Optimizer
This is probably the most detailed free analysis tool you will ever find. It gives you a breakdown for each and every file type and even gives some pretty good recommendations.
You’ll mostly learn how to make a well optimized website that is standards complaint! Double the awesome since this tool is free!
Here’s something even better though: the site can accept a URL to check for you but it can also take code. So you can take your (X)HTML, plug it right into their site and POOF! It will tell you if you need to improve anything.
WebSlug.info Single Page Test
This great very small tool loads your page in an iframe and tests how long it takes to load. Nothing special here except that it’s small and works very fast. Good for getting a quick performance measurement.
Don’t be put off that it’s a .info though! It’s one fast and accurate site!
This site is similar to Pingdom’s tool, but less flashy. Though it will give you practically the same results.
Quick site with very detailed results about when each connection starts and stops per http request.
This is a very simple tool. Enter in your address and it will load up and time your page in an iframe. But it’s not like all the others. It also has a very useful interval feature. So you can keep testing a site over and over to get more accurate results.
You can set the number of times it tests and at what interval. Very good for repeated testing so that you don’t have to keep reloading a testing website.
This is another simple tool. This is better suited to testing your servers than just your websites. So it’s a good tool to find out exactly what’s slowing your page down: your code or the server!
If you have multiple domains or sites to test, this is the tool for you. It’s quick, easy and gives results for multiple domains. Just enter them into the large textarea box and hit Test!
This is the hardest tool to get working. It’s free though. First you have to download Google Chrome. But not any ol’ Google Chrome. A special developers edition! But wait! That’s not it!
After you have the special version you have to open it up using special modifiers. After you do that you can download the extension and start using it properly.
Once you have it though, it will give you some very realistic statistics and graphs all about the current page you are browsing. And oh yes, it is very pretty … and useful too!
If you have any special tools that you use to profile your websites performance, let us know in the comments!