Image may be NSFW.
Clik here to view.
Web developing is not only about coding and designing a web site is not only about Photoshop. Creating a proper site nowadays is not as simple as it could be 10 years ago. Nowadays technology has evolve in many aspects and things are acquiring another dimension in terms of complexity.
Now users demand more, search engines become more intelligent and browsers multiply under different web engines.
Here a list of some resources I personally find useful when creating a site.
Forums
- http://stackoverflow.com/: I would say it is the biggest “forum” or “community” nowadays in the programming field. This includes, of course, any web technology or language. Categorized, rated, voted… a great place to solve any doubt or keep learning by asking, answering or simply by looking great answers, many times, of great well known developers.
- http://serverfault.com/: in case you have any doubt about how to configure a web server or anything else related with servers.
Share code
- http://jsfiddle.net: great place to test your scripts or share them with anyone. Create and see in real time the result of combining your CSS, HTML and Javascript. This is where I place my javascript or CSS code to share it in stackoverflow and where I develop fast prototypes or testings.
- http://jsbin.com/: similar to the previous one. I perosnally prefer jsfiddle.
- http://pastebin.com/: I use it to share server side code. Mainly on forums.
Compressors
- http://closure-compiler.appspot.com/home: Google’s javascript compressor, also known as uglyfier or minifier. This is the online version which might be useful sometimes if you don’t have any compressor installed in your machine.
- http://refresh-sf.com/yui/: another javascript minifier. This one by the hand of Yahoo. It also offers a minifier for CSS.
- Chrome page speed insights plugin: great to get compressed images. (which is not that simple as using Photoshop for it…)
Compatibility
- http://caniuse.com: great to know which HTML, CSS or SVG features are available for different versions of each browser.
- http://browserstack.com/: a great place to test any website in almost all kind of mobile devices (tablets and mobile phones) and in any version of almost any browser. It opens a virtual machine connection and make uses of the SDK software of each device to emulate its behavior as realistic as possible. Great as well for responsive design testing.
- https://code.google.com/p/css3-mediaqueries-js/: media queries used in responsive design don’t work in “old” browsers (hello IE 8…) and just adding this file will solve our problem with them.
- Testing IE compatibility mode: this is not a great tool but sometimes if we are in a rush or we don’t have other way to test other IE versions, we could make use of IE compatibility modes. I prefer to use http://browserstack.com/ anyways. These compatibility modes have their own bugs and are not always as the real version.
Others
- http://css3please.com: maybe not the best site ever but a shortcut to create some CSS3 effects in a faster way.
- PageSpeed Insights: useful to show the weak points of your sites in terms of loading speed.
- http://jsperf.com: great to test javascript performance over different browsers. I use it when I need to improve the performance of some portions of code or just to solve personal doubts about performance. It is also useful to see how different versions of libraries like jQuery has a different effect over the same code. It is easy to find links referring to this site when talking about JavaScript performance.
- http://cssbeautify.com/: one online CSS beautifier. I use it sometimes when I want to do some reverse engineer to some sites combined with some browser inspector.
- http://validator.w3.org/: we are suppose to try to minify the number of errors or warnings in our sites. We might have it a bit more difficult with some external scripts such as facebook share/like, twitter button, analytics… etc, but still being a good technique to check for errors or mistakes which might be causing some troubles.
- http://wave.webaim.org/: similar to the previous validator, it offers a more detailed and deep study of the site markup.
- http://github.com: the most popular repository for web developing open projects. If you are using a jQuery plugin, a PHP script, a framework plugin etc. this is probably the site where it will be and a great place to solve doubts, pull requests or report issues directly to the creator of the component. It is also a great tool to keep learning by exploring others code or even by trying to improve it pulling requests.
- Google Chrome inspector/ Firebug plugin for Firefox / Firefox inspector / IE developer tools: one of the main tools for any front end developer. I personally prefer Chrome inspector, but when testing in other browsers I also make use of their developing tools.