Avoid the Most Common Mistakes Web Developers

Since the term the World Wide Web was coined back in 1990, web application development has evolved from serving static HTML pages to completely dynamic, complex business applications.

Today we have thousands of digital and printed resources that provide step-by-step instructions about developing all kinds of different web applications. Development environments are “smart” enough to catch and fix many mistakes that early developers battled with regularly. There are even many different development platforms that easily turn simple static HTML pages into highly interactive applications.

All of these development patterns, practices, and platforms share common ground, and they are all prone to similar web development issues caused by the very nature of web applications.

The purpose of these web development tips is to shed light on some of the common mistakes made in different stages of the web development process and to help you become a better developer. I have touched on a few general topics that are common to virtually all web developers such as validation, security, scalability, and SEO. You should of course not be bound by the specific examples I’ve described in this guide, as they are listed only to give you an idea of the potential problems you might encounter.

Common mistake #1: Incomplete input validation

Validating user input on client and server side is simply a must do! We are all aware of the sage advice “do not trust user input” but, nevertheless, mistakes stemming from validation happen all too often.

One of the most common consequences of this mistake is SQL Injection which is in OWASP Top 10 year after year.

Remember that most front-end development frameworks provide out-of-the-box validation rules that are incredibly simple to use. Additionally, most major back-end development platforms use simple annotations to assure that submitted data are adhering to expected rules. Implementing validation might be time consuming, but it should be part of your standard coding practice and never set aside.

Common mistake #2: Authentication without proper Authorization

Before we proceed, let’s make sure we are aligned on these two terms. As stated in the 10 Most Common Web Security Vulnerabilities:

Authentication: Verifying that a person is (or at least appears to be) a specific user, since he/she has correctly provided their security credentials (password, answers to security questions, fingerprint scan, etc.).

Authorization: Confirming that a particular user has access to a specific resource or is granted permission to perform a particular action.

Stated another way, authentication is knowing who an entity is, while authorization is knowing what a given entity can do.

Common mistake #3: Not ready to scale

In today’s world of high speed development, startup accelerators, and instant global reach of great ideas, having your MVP (Minimum Viable Product) out in the market as soon as possible is a common goal for many companies.

However, this constant time pressure is causing even good web development teams to often overlook certain issues. Scaling is often one of those things teams take for granted. The MVP concept is great, but push it too far, and you’ll have serious problems. Unfortunately, selecting a scalable database and web server and separating all application layers on independent scalable servers is not enough. There are many details you need to think about if you wish to avoid rewriting significant parts of your application later – which becomes a major web development problem.

For example, say that you choose to store uploaded profile pictures of your users directly on a web server. This is a perfectly valid solution–files are quickly accessible to the application, file handling methods are available in every development platform, and you can even serve these images as static content, which means minimum load on your application.

But what happens when your application grows, and you need to use two or more web servers behind a load balancer? Even though you nicely scaled your database storage, session state servers, and web servers, your application scalability fails because of a simple thing like profile images. Thus, you need to implement some kind of file synchronization service (that will have a delay and will cause temporary 404 errors) or another workaround to assure that files are spread across your web servers.

What you needed to do to avoid the problem in the first place was just use shared file storage location, database, or any other remote storage solution. It would have probably cost few extra hours of work to have it all implemented, but it would have been worth the trouble.

Common mistake #4: Wrong or missing SEO

The root cause of incorrect or missing SEO best practices on web sites is misinformed “SEO specialists”. Many web developers believe that they know enough about SEO and that it is not especially complex, but that’s just not true. SEO mastery requires significant time spent researching best practices and the ever-changing rules about how Google, Bing, and Yahoo index the web. Unless you constantly experiment and have accurate tracking + analysis, you are not a SEO specialist, and you should not claim to be one.

Furthermore, SEO is too often postponed as some activity that is done at the end. This comes at a high price of web development issues. SEO is not just related to setting good content, tags, keywords, meta-data, image alt tags, site map, etc. It also includes eliminating duplicate content, having crawlable site architecture, efficient load times, intelligent back linking, etc.

Like with scalability, you should think about SEO from the moment you start building your web application, or you might find that completing your SEO implementation project means rewriting your whole system.

Common mistake #5: Time or processor consuming actions in request handlers

One of the best examples of this mistake is sending email based on a user action. Too often developers think that making a SMTP call and sending a message directly from user request handler is the solution.

Let’s say you created an online book store, and you expect to start with a few hundred orders daily. As part of your order intake process, you send confirmation emails each time a user posts an order. This will work without problem at first, but what happens when you scale your system, and you suddenly get thousands of requests sending confirmation emails? You either get SMTP connection timeouts, quota exceeded, or your application response time degrades significantly as it is now handling emails instead of users.

Any time or processor consuming action should be handled by an external process while you release your HTTP requests as soon as possible. In this case, you should have an external mailing service that is picking up orders and sending notifications.

Common mistake #6: Not optimizing bandwidth usage

Most development and testing takes place in a local network environment. So when you are downloading 5 background images each being 3MB or more, you might not identify an issue with 1Gbit connection speed in your development environment. But when your users start loading a 15MB home page over 3G connections on their smartphones, you should prepare yourself for a list of complaintsand problems.

Optimizing your bandwidth usage could give you a great performance boost, and to gain this boost you probably only need a couple of tricks. There are few things that many good web deveopers do by default, including:

  • Minification of all JavaScript
  • Minification of all CSS
  • Server side HTTP compression
  • Optimization of image size and resolution

70 of the Best HTML Editors for Web Developers

We at Skilledup are a bunch of techies at heart, and as such we regularly research ways to improve our website’s design and workflow. Thus, we’ve taken a deep dive into the world of web development, coding HTML, and different apps that help developers. Our last two articles focused on the best web development extensions for Firefox and Chrome. This week we are broadening our focus to encompass any environment in which developers can write HTML code, and the applications and services that facilitate this process. In the past few years, web development like many other processes has started moving “into the cloud,” so we have literally searched high and low to bring you 70 of the Best HTML editors for Web Developers.

  1. Notepad++ is a notepad replacement with the ability to highlight and check code syntax. It also supports tabbed file editing. A great first choice for programmers. Windows, free.
  2. ConTEXT is a simple yet powerful notepad replacement. It has most of the same functionalities as Notepad++, and a few additional features like the ability to record macros. Windows, free.
  3. Coffeecup HTML Editor is a fully-fledged web code editor with some unique functionalities like the ability to take any website and edit its code in your own test environment.Windows/Mac, $69 w/free trial.
  4. Emacs is a Linux specific text editor with a high degree of extensibility and customizability. It is one of the best known Linux text editors. Linux, free.
  5. UltraEdit is another code-geared text editor. It supports extremely large files and even hex files. Windows/Mac/Linux, $59.95 w/ 30-day free trial.
  6. EditPlus is a text/code editor with built-in FTP functionality. Windows, $35 per single user license; group discounts available.
  7. Coda 2 is a Mac-based editor that allows code-folding, has auto-complete and an in-built SWL editor. Mac, $75 w/7-day free trial.
  8. Espresso is another Mac-based editor with real-time preview functionality and code-folding. Mac, $75 w/ 15-day free trial.
  9. Sublime Text is an advanced text editor that has a slick interface with advanced search functionality and advanced viewing modes. Windows/Mac/Linux, $70 per single user license w/free trial.
  10. Topstyle 5 is an HTML5 and CSS3 focused editor with syntax highlighting, auto completion, and a nifty feature that allows you to click on classes and find styles defined for the classes. Windows, Demo version has limited functionality, $79.95.
  11. TextWrangler is a general purpose text editor for Mac with enhanced functionality for different programming languages. Mac, free.
  12. BBEdit is a text editor with powerful code editing features like the ability to search and replace text from multiple files. Mac, $49.95.
  13. Chocolat is an editor that boasts split editing, code completion and a Vim mode that lets you edit text in a shell-style environment. Mac, $49.95.
  14. Textmate brings a unique approach to text editors by combining unix-style functionality into an editor. It allows you to write and edit code Emacs-style and even lets you run shell code within the editor. Mac, single user license, $54.
  1. Adobe Dreamweaver is one of the most well-known WYSIWYG editors around. It is a staple of many web development firms around the world and for some can be considered almost an industry-standard for WYSIWYGS. Windows/Mac, $19.99/month.
  2. Artisteer is a powerful and unique editor known for its ability to generate very aesthetically pleasing templates in only a few minutes. It does not require any formal coding knowledge to operate. Windows, starts at $49.95.
  3. Kompozer. Similar to Dreamweaver, Kompozer is designed to be extremely easy to use, making it ideal for people without technical computer skills who want to create an attractive professional-looking web site without needing to know HTML or web coding.Windows/Mac/Linux, free.
  4. Weebly is a WYSIWYG website builder that allows you to create simple sites using a drag-and-drop interface. Broswer-based, free.
  5. Microsoft Expression Web is Microsoft’s offering to the world of web design. While it is no longer actively supported, it is still known as a capable competitor to Dreamweaver.Windows, Free.
  6. Flux is a powerful editor available only for Mac computers, and it contains graphic editing capabilities. Mac, $89.99.
  7. SnapEditor is a unique browser-based editor that lets you edit in real-time inside of the web page you are editing. It was created with the aim of using clean code. All (Server-based), Site License $99, Developer’s License $299.
  8. Amaya is an open-source editor that aims to integrate as many W3C technologies as possible. Windows/Mac/Linux, Free.
  9. Wix Website Builder is a web application that delivers a full WYSIWYG web development environment that is completely code-newbie friendly. You don’t need to know how to code to create a WIX site. All Browsers, Free.
  10. Web Studio is a powerful MS Office-like environment for creating and editing web pages. It caters to both the professional coders and to those who have no experience in writing HTML/CSS. Windows, 30-day free trial, full version $159.99.
  11. BestAddress HTML Editor has multiple editing modes, from WYSIWYG to simple code to shared view. Also allows you to edit sites directly from your server. Windows, limited trial, full version $54.95
  12. BlueGriffon is a neat WYSIWYG editor that is both free and uses the same rendering engine that Firefox uses, meaning that your pages will come out looking exactly like it’s preview in Firefox. Windows/Mac/Linux, free.
  13. Aloha Editor is a very interesting visual editor that allows you to edit directly from the front end of your site; meaning no coding experience necessary. WordPress or Drupal (CMS based), Free.
  14. Net Objects Fusion is a powerful web-building software that uses an intuitive interface and has interesting capabilities like Google Analytics and shopping cart integration. Windows, $129.95.
  15. Trellian Webpage is an interesting editor that has a drag and drop interface and supports Photoshop plugins. Windows, free.

  1. Firebug is known as one of the world’s most popular web-development extensions. It has many powerful and useful features, one of the most noticeable is it’s real-time development environment. As soon as you edit code, Firebug reflects the changes in your browser. Firefox, free.
  2. Easy JsBin is a real-time editing and coding environment that you can access directly from a toolbar tab. Firefox, free.
  3. Phoenix is an editor with real-time syntax highlighting which allows edit, run and test CSS, HTML and JavaScript code. Firefox, free.
  4. Coding the Web lets you preview, edit, save your HTML, CSS and Javascript right in your browser, and has syntax highlighting and autocompletion features. Chrome, free.
  5. Sourcekit is a lightweight programmer’s text editor right inside of Chrome. It saves files directly to Dropbox, so you never have to worry about losing your code in the event of a crash. Chrome, free.
  6. Web Developer is an extension that adds a great of functionality to the bare-bones html editor inside of Firefox. This is a very popular addon for Firefox. Firefox, free.
  7. Firebug Lite is a Chrome version of the popular Firefox debugging tool. It has slightly less functionality than its Firefox counterpart but is still one of the best tools you can use for Chrome. Chrome, free.
  8. HTML Instant lets you edit your HTML in real-time and see the results in a side-pane view.Chrome, free.
  9. Slim Text is a light text editor that runs inside of your Chrome browser. Chrome, free.
  10. Vimperator adds powerful Vim editor-like functionality to Firefox. Firefox, free.
  1. CodeRun Studio is a free cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser. IE,Firefox,Chrome and Safari, free.
  2. TinyMCE is a very popular CMS based editor. It has a clean look and feel and is very easy to both use and implement. All CMS, free.
  3. CKEditor is another very popular CMS based WYSIWYG editor that is both customizable and open-source. It aims to bring word-processor functionality and ease to webpage development. All CMS, free.
  4. Collide is an open-source collaborative IDE that grants program teams real-time interactivity.
  5. Cloud IDE is a browser-based editor supporting syntax highlighting, code completion, refactoring and more. Supports multiple development frameworks and collaborative editing. All Browsers, $79/year.
  6. Kodingen is a free social coding environment utilizing GitHub where you can write code, collaborate and share it with people all over the world. All Browsers, free.
  7. ShiftEdit is an online IDE that syncs and backs up your code revisions. It supports syntax checking, autocompletion, and real-time validation. All Browsers, free for 1 project.
  8. Compilr another online IDE which supports a wide variety of programming languages. Has user-friendly coding tutorials as well as having useful features like auto-completion and syntax highlighting. All Browsers, starts at $10/month, w/ 14-day free trial.
  9. Neutron Drive auto-saves your code to Google Drive, supports revision control, allows real-time collaboration, and has a nifty tabbed interface. All Browsers, $8/year w/ 45-day free trial.
  10. Orion is another cloud IDE, which allows you to download a client that gives you the ability to host the Orion IDE on your own server instead of using their own servers. All, free.
  11. Cloud9 IDE lets you code and chat together with your fellow developers, share your workspaces or keep them private. Supports node.js. All, free for 1 private workspace, premium plan starts at $12/month.
  12. Codio is a web-based IDE that boasts pure speed and the ability to move your code to any numbers of production and test environments. All (Web-based), free; currently in public beta.
  1. Textastic is a fast and versatile text, code, and markup editor supporting syntax highlighting of over 80 programming and markup languages. Has FTP and DropBox syncing abilities. iOS, $8.99.
  2. Buffer Editor allows you to chain commands in Vim-like text editor environment, with DropBox integration and Bluetooth keyboard support. iOS, $3.99.
  3. Byword is a simple and efficient text editor with Dropbox and iCloud support. iOS, $4.99.
  4. Diet Coda is a code editor with syntax highlighting and SSH capabilities. iOS, $19.99.
  5. Editorial text editor with syntax highlighting and markdown features, syncs with DropBox.iOS, $4.99.
  6. Deuter IDE is an IDE for the mobile phone and tablets that aims at being fast and efficient.Android, $2.99.
  7. DroidEdit Pro is a source code editor with syntax highlighting and infinite undo/redo capabilities. Syncs with DropBox, and SSH and FTP capable. Android,$1.05.
  8. Code Anywhere This is the Android version of the Code Anywhere code editor. Lets you FTP and sync with your Code Anywhere account across all your devices and computers.Android, free.
  9. Syntax Highlighted Code Editor is a syntax highlighted HTML, CSS, JavaScript, PHP editor.Android, free.
  10. WebMaster’s HTML Editor is a code editor with code-completion, syntax highlighting and supports Japanese, Chinese, Cyrillic and other character sets. Android, $4.99.
  11. PHPEdit is an IDE geared for web development with multiple extensions and supports several frameworks. Windows, starts at $100+ w/ 30-day free trial.
  12. PHPStorm is a very popular IDE that supports all of the latest web technologies. It sports a dark interface and multi-user functionality. Windows/Mac/Linux, Starts at $99 w/ 30-day free trial.
  13. WebStorm IDE is from the same company as PHPstorm, but this IDE has an emphasis on Javascript integration and functionality. Starts at $49 w/ 30-day free trial..
  14. Komodo IDE is a popular IDE that supports most web programming languages and has a plethora of useful features including syntax checking, dozens of add-ons and a team-friendly environment. Windows/Mac/Linux, $295.
  15. HTML-Kit is a well-known and trusted web development IDE. It lets you preview results split-screen or in different devices in real-time. Windows, old version free, new version starts at $39.
  16. Aptana Studio is a very customizable IDE with a deployment wizard, built-in terminal, and GIT integration. Windows, Mac, Linux, free.
  17. NetBeans IDE is a free and open source IDE with a large community of users and developers. You can choose to download different programming bundles to save disk space or the whole package. Windows/Linux, feature limited OS independent version available, free.
  18. Mirabyte Web Architect supports most web programming languages and lets you work side-by-side with your website preview. Windows, Trial-version free; full version $69.95.
  19. PHPDesigner is a full-featured HTML5, CSS3 and JavaScript editor that also has support for object-oriented coding. Windows, licenses start at $39; w/ 21-day free trial.

What does a front-end web developer do

Front-end web developers, the “artists” formerly known as web designers are the bunch of people in the company that make sure that the data coming from the backend gets displayed on the browser. They also make sure it looks as closely as possible as the design, that , CED came up with, and that the user can navigate through it, accessing the data.

They don’t need to know about complex OO programming, tricky database structures or how a path is done in Illustrator. They get data from the backend people and an example how the result looks like from CED. All they need to do is to hack some HTML or XSLT together and link the different documents. Piece of cake.

Web developers don’t have it as easy as it sounds though. True enough, markup languages are easy to learn and scripting languages are not much harder, but there is an aspect of uncertainty, that has to be taken into consideration, when judging their skills.

As a web developer you work in an uncertain environment. What looks good and works on your computer can be a popup hell and dire to look at on the machine next to you or on the machine of a customer. The first is not much of a problem, just ask your colleague to upgrade his browser, the second, however, is a problem.

As a web developer, your work can be wrecked by users and customers in many ways:

They can

  • use a browser that is completely outdated
  • set his browser font to “very small” or “very large”
  • use a video card that displays 16 colours only
  • run a resolution of 640×480 pixels and still have the large font setting
  • run a resolution of 1024×768 but still keep his window as large as 200×200
  • use loads of toolbars to make the area of the screen available for your site pitifully small
  • turn off any scripting support for safety reasons
  • turn off images to load the pages faster
  • use a modem with the speed of two tins connected through a wire
  • use a PDA
  • use a text-only browser

and if the site does not work with that, they’ll blame you for it.

In other words, you never know what is going to be the mean of display at the other end.

What to do about that? Don’t fret, there are standards that the World Wide Web Consortium (W3C) defined a long time ago. Just follow these standards and you are safe.

The only problem is that the browser industry keeps telling their products follow these standards, but, in reality, they don’t.

So by doing the right thing, you do the wrong thing. By following the standards, you make sure that your site will perform fine in future browsers and display units. On nowadays and yesterdays browsers though, there might be loads of issues.

What you do need to do is to make sure your site is following the standards and still looks OK on older browsers. This is the perfect option. Another would be to define a certain browser and platform environment. This is possible when we are talking about Intranets and B2B sites, but B2C means you are in trouble.

You are really in trouble, when the design you got was done by a designer who is not firm in web design. The web is a media, not a sheet of paper. Designs that look really nice on paper (and impress customers) might not work on the web. Same as screen layouts do not work on television or game consoles.

Users are able to resize the text part of your page, or, in newer browsers even add own rules of display onto your site (through own stylesheets). This means that every layout, that relies on fixed font-sizes, and text, that can only use up a certain area, is doomed to fail.

You can go the other extreme and keep everything flexible, which may result in really ugly texts, with lines too long to be readable. This is a minor issue though, as, when the user has a problem with that, he can simply resize his browser window.

In any case a good web developer needs to know a lot about the media he works in.

He needs to know

  • what browser/platform configuration breaks your page when you use which technology
  • which technology or elements to use to create the navigation in
  • what to do to avoid wrong display on browsers
  • how to keep the size of the final document small
  • how to convert graphics so that they are small in file size and yet good looking
  • how to deal with data coming from the customer in various and sometimes rather exotic formats
  • how to keep his work from stalling when there is no data coming in that he can use.
  • How to communicate to colleagues or customers that the amount of final data in the product does not really fit the design (which is a case of bad planning to begin with, but it does happen)
  • How to keep up with the rapid web development market and techniques.

These are the most obvious bits. Another obstacle a web developer has to tackle all the time is the media and software market hype.

At every computer fair and in magazines software companies advertise products, that help you do a web site in 20 minutes without knowing anything about code. For good measure you can also add all the multimedia you want and connect it to the database, you don’t know anything about either.

When looking at these ads one starts to wonder why people care about hacking in their HTML. Front-end development is considered a task that can be fulfilled by any application or even the export filter of a graphics development program.

True, these applications do put out HTML and Javascript. True, the results look good. Wrong, they can replace a web developer. They can replace a “web designer”, someone who hand-codes “HTML designs”. When talking about HTML designs, I mean web sites without any other purpose but being eye candy. Standalone, plain HTML documents, a few links, some rollovers, but no back end connections or interactvity. Sites that are nothing but an ad can be safely done with them. As soon as you need the site to fulfil a specific task, be really optimised and fit the other components in your development framework, these WYSIWYG editors (like Dreamweaver, Frontpage, Adobe Pagemill and so forth) stop being that handy.

The worst nightmare for a front-end developer is to be confronted with markup code generated by these programs. A script or application can never optimise like a human being can, the code is bloated, unreadable and not logically structured in most of the cases. Keeping in mind that the outcome was meant to look great for 20 minutes work, why would it? The user never sees the source code. The developer does, and it’s his job to keep it as small, fast and readable as possible. Especially when you remember, that he might have to hand it over to another developer for changes.

The availability of web content is amazing and great, but also has a downside to it. Content and code can be published immediately and is available to everybody. This is very nice and actually one of the main reasons to make people start web developing. After all it’s easier to create your first web site than to try and get some time on TV or radio. The downside of it is that content gets published without any quality testing. Any enthusiastic developer, with more drive than skill. creates some new, cool design or effect, and publishes it on his web site. As it is cool and new, other developers see it, and implement it as well, to stand out from the crowd. Looking at this effect closely makes it obvious that it only makes sense in a very restricted browser environment and only for some content. Sometimes it might not even make sense at all. Nevertheless it becomes more and more spread and used, and sooner or later customers will see it and want it as well. Or colleagues see it, don’t realise the flaws it might have (as it works on their browser) and offer it to the customer.

Then the web developer gets asked to implement it, and gets blamed when it does fail in the quality test.

There is no such thing as free lunch. Also there is no such thing as a perfect web site that you assemble from free content from the web without knowing what you do. Script libraries and personal developer sites advertise their content much like software companies. They claim their products have perfect output. Truth is, you can find anything on the web, and that is great, but make sure you test it thoroughly before you even think about using it in a product someone pays you for.

To conclude, the web developer is the developer on the project that has it all: A very unstable display environment, a skill set that needs to range from code to design and usability, and the blame when the end product does not look the way it should.

It’s a hybrid position, you are someone that paints with code. Programmers don’t accept your work as real code, and designers don’t consider it design.

Now you might be at the point where you ask yourself: If that is such a horrid position in the development circle why bother taking it?

Well, the love for the media I suppose. The challenge to make things visible to users and not exclude a lot of them. The hybrid position in between programmers and designers and dealing with both. The satisfaction of seeing things you have done online and realising that people use it. The immediate satisfaction of hacking in some funny words with brackets around them and controlling the layout of a text by doing so.

It is a position that needs constant improvement, and interest in the media you work for. The days of front-end developers that attend a 2 day course and make a lot of money the week after are over. Now it is the job to clean up the mess those “web designers” left behind. To work with design and backend and project managers to make sure the customer gets something that is looking good and works fast and reliable.

15 Useful Free Android Apps for Web Developers

Firefox MobileThe apps that you will find below have not been designed to be an alternative mobile solution to typical development desktop software, but are, in there own right, really handy apps to have when you are out and about and on the move. You just never know when you will be struck with a dev idea or are suddenly struck with a code solution, and these apps have enough functionality to write and test and your inspired code ideas.

Firefox 4 Beta Mobile

Firefox 4 Beta is currently available for most Android 2.0+ devices (sadly not for my Hero!). The browser itself is fantastic and feature-rich, but accompanied by some of its currently available developer extensions (yes, it does support mobile specific addons) it truly is an essential requirement for any developer.

touchqode Code Editor

With touchqode you can view and edit source code that comes with syntax highlighting, autocomplete and other features found on a regular desktop IDE. It currently support Java, HTML, JavaScript, Python, C++, C# and Ruby.

HTMLeditor

HTMLeditor is a super-simple HTML,ASP,JS and CSS editor for quick coding when you are on the move.

Eval your Javascript Code

Eval your Javascript Code is a simple tool for test-running Javascript snippets directly on your Android.

Phoenix Mysql Client

Phoenix Mysql Client allows you to connect to a Mysql server, and perform SQL quires, insert, delete, select,… and list the tables,views and sprocs.

AndFTP

AndFTP is an FTP, SFTP, SCP, FTPS client that allows you to manage several servers. It comes with both a device file browser and an FTP file browser. It offers download and upload features with resume support. You can rename, delete, copy, set permissions and create folders.

Android Codepad

Android Codepad is a simple source code viewer that supports all C-like, Bash-like, and XML-like languages and automatically syntax highlights depending on the file.

View Web Source

With this app you can view the source of any website. You will also be able to select text, search for text, copy and paste the HTML and also share the snippet with your friends and colleagues.

PhoneGap Developer

This app is a useful resource for PhoneGap developers, it includes docs, guides, API reference and a handy tool for testing your application.

Design Snack Mobile

Design Snack Mobile is a featured-rich, interactive and socially-powered inspirational web design gallery.

HTML Test

This free app puts your HTML skills to the test. This interactive testing approach is used in dynamic real-world environments to test and train professional Web Developers.

Magic Color Picker

Magic Color Picker is a color selection tool for designers, artists and programmers for selecting colors using different color models. It supports 7 different modes and RGB, HSV, HSL and YUV color models.

devcheats

This free app is a must for every developer by offering a concise collection of cheatsheets, including: PHP, Python, Ruby on Rails, jQuery, CSS, SEO, Apache, Regular Expressions, SVN, C++, Drupal, HTML5, Javascript, Mysql, WordPress and much more.

W3C Cheatsheet

The W3C Cheatsheet provides quick access to useful information from specifications (incl HTML5) published by W3C, the leading international Web standards community.
W3C Cheatsheet Downloads & Info →

CSS Reference

This CSS reference & cheatsheet includes syntax, examples and limitations for CSS1 and CSS2 properties.

21 Things Every Web Developer Should Be Doing

Keyword Research

If you have not performed keyword research before starting on the development of your site, then you are not building a website for your customers. You might as well just look in the mirror and say, “It’s all about me! It’s all about me!” Keyword research gives you a wealth of information on how your audience searches, what phrases have meaning to them and what, specifically, they are looking for. This feeds into the architecture and navigation of the site in huge ways.

Wire Frames

Wait. You are creating a design without putting together wire frames first? Big mistake. While skipping this step may get you a completed design quicker, without wire frames, your pages may end up missing critical elements or have functions in the wrong place. It may seem like a simple fix, but the design frequently distracts us from seeing the things we should be seeing.

That leaves you either approving a design you like, not realizing something is missing, or rejecting a design because something just seems wrong but you can’t quite put your finger on it. Build a wire frame for each unique section (or page) of your site so, without distraction of colors or other visual elements, you can ensure everything you need has its place on the page.

Grayscale Comp

Grayscale comps are common in the print design industry, but for whatever reason, not so much in the web design industry. In my opinion, they are just as important here as anywhere else. Color is a distraction. I’ve seen clients reject a site design because they didn’t like it. Turns out, they just didn’t like the colors! Grayscale comps allow designers to design the site using the appropriate contrasts without yet worrying about what colors the client does or doesn’t like, or how those colors are working together in particular areas of the site. Approve the design, then add color later.

Color Comp

The worst that can happen here is that the grayscale comp is accepted but the first color comp is rejected. Do you have to go back and reinvent the wheel? Nope, just change the colors until you get them right!

Coding & Implementation

Believe it or not, there are some web designers who don’t code websites. You have to find someone else to do that. Nothing wrong with that, just so long as you know this ahead of time. Sometimes you can have one person do both the design and code, and other times it might make sense to have two people with two different skill sets implementing your development in phases. Either way, for a site to work, the code has to be built to accommodate the design and the functionality you require.

HTML5 (Validated)

HTML5 can do some pretty sleek stuff, but many web developers are still coding in HTML4. Sure, old HTML still works, but it ensures your site is obsolete almost immediately. HTML5 is scalable for new media and gives advanced functionality with less code than other forms of HTML. That makes your site sleeker, cleaner and faster! While validation isn’t necessary for a site to work, a developer should be doing clean enough code that the HTML will validate properly. There are some exceptions to this (especially when using 3rd party tools) but validation should be considered a necessary component of good code development.

CSS3 (Validated)

HTML5 and CSS3 go hand in hand. CSS3 offers lots of cool tricks that used to have to be accomplished with excessive JavaScript code or even having to use images which slow site downloads. CSS3 plays a significant role in speeding up page downloads and giving your site a fresh, interactive feel. Again, your CSS should be validated too!

Search Engine-Friendly Architecture

I understand coding a site can be a daunting task, especially when you’re adding in unique functionality. But that’s no excuse not to code a site with search engines in mind!

Developers need to consider common architectural issues that hinder a site’s performance in the search results, including poor navigation implementation, excessive internal linking, readable URLs, unspiderable links and pages, slow-loading pages, and more. While most developers don’t have search engine optimization experts on staff (even if they claim to!), it’s important to have someone to look over the work being done to ensure the architecture of the site won’t cause problems for you later.

Duplicate Content Prevention

Along with the SE friendly architecture, developers must make sure that your site solves any potential duplicate content problems before the search engines spider a single page. There are many duplicate content workarounds and band-aids, which can be applied after the fact, but a good developer will consider this when building the website from the beginning.

Off-Page Styling

This is also a component of a search friendly architecture, but it bears its own commentary. One thing developers must understand is the less code there is on each page, the better the site tends to perform for visitors. That’s not because visitors care about the code, but because the code can impede their on-site experience. Styles and JavaScript code should, as much as possible, be moved off the page into external sheets that can be downloaded by the browser separately. This makes pages run faster and eliminates the need to downloaded all that code with each page they visit.

Size Optimized Media

Using any media on your site? If so, is it optimized properly? Often they aren’t, and that’s a problem. Everything from images to video should be optimized for speed and search friendliness. Most media can be compressed to be smaller in size (file size and display size) so they download faster.

There is usually a keyword optimization component in alt tags or captions which can be implemented as well when the media is being created. Most video can be optimized for YouTube and images can be optimized for image search. These considerations are an important part of the development process.

ALT Text For All Images

Speaking of images, if ALT tags are not used on images in the development stage, then when? Oh, right, they have to be done after the site is developed. Again, why go back and re-do what should have been done to begin with?

CSS Image Sprites

Another way to speed up page load times is to use image sprites to consolidate several small images into one. Each image download places a certain amount of strain on the server. One larger image causes less strain and quicker downloading. This is especially true for images used on multiple pages. Use CSS to display the relevant portion of the image

Mobile Reactive

Not concerned about what your site looks like on a mobile device? You should be! Even if your customers don’t complete transactions on your site from their mobile devices, mobile is often the start of their research process. This is usually the first place branding occurs.

If your site doesn’t work or isn’t visually appealing in a mobile environment, you blew your first chance to make a good impression! Yet, with the growth of mobile devices, you can be sure if your audience isn’t using mobile widely today, they will be tomorrow. If you’re not there, you’re not for them.

Scalable at Various Resolutions

Your site must scale well across multiple resolutions and screen sizes. It’s not just mobile that have multiple screen sizes and resolutions (iPad, iPad mini, smart phone, over-sized smart phone, etc.) but desktop screens rang from 19″ to 24+”. Your site needs to work well across the board by being responsive.

Site Optimized For Speed

I’ve talked a lot about site speed in different points above, but site speed warrants its own commentary. After you’ve optimized everything else for speed, look again to see what is slowing the site down. Is it a plugin that should be hard-coded? Is it an unnecessary bit of functionality that just looks cool? Speed is an important factor of a visitor’s experience and the developer needs to look for additional ways to speed the site up.

Install Analytics

All this web design stuff is great, but if you don’t have analytics code installed then you have no way of knowing how your new site is performing. Adding analytics code is easy and shouldn’t be an after-thought. It should come standard on all new websites.

Broken Link Checks

If I had a dollar for every broken link that I’ve found on a brand new site or re-designed site, I’d have a whole lot more money than I do now! Ensuring the site rolls out without any broken links is the developer’s job. Period. That’s part of ensuring the site works correctly on all fronts and preventing user frustration.

Extensive Testing

Under no circumstances should a developer give you a completed site without extensive live testing. There is just no excuse for a new site to be buggy and broken after the developer turns it over to you. Time for testing should be worked into the timing for site development. Under no circumstances should the site be rushed out before the bugs are worked out and tested– it’s worth it to wait!

Custom 404 & Favicon Branding

Yet another relatively small task that developers don’t think about. While they are usually not huge issues, it’s a nice added touch of “completion.” Ever see the little image that appears in the URL bar when you’re on a site, or in the tab title of a site you have open? That’s the favicon. A small visual piece but one that can make a huge impact.

So can a custom 404 page that is accessed when a visitor lands on your site via a bad link. A custom designed page keeps the visitor engaged on your site rather than a generic “page not found” message that often sends them back where they came from.

Printer Friendly

Finally, all sites should be printer friendly. It is quite common for visitors to print pages for later review or reading. When pages are not printer friendly the text is often difficult to read, multiple blank pages are printed, or other ghastly annoyances turn up on the page. Using CSS, each page of your site can be printed with minimal junk, while making sure the content they want is readable to boot!