Web development resources and links

This page compiles  various useful web development resources and links that I have used or come across and that I recommend. I add to it incrementally. Please suggest other useful resources in the comments below.

General web development resources

Web development involves spinning a web of valuable pages. Image from Open Clip Art

• Web browser market share
  • Wikipedia: monthly updates of statistics from various sources
  • StatCounter: based on raw page hits (allowing multiple hits per user)
  • NetMarketShare: based on unique user visits
  • ZDNet’s explanation of the differences between StatCounter’s and NetMarketShare’s methodologies.
• Can I use…: Probably the best site to verify which HTML, CSS or JavaScript features are supported by which browsers
• Extensive list of polyfills, JavaScript workarounds to make up for missing HTML, CSS or JavScript features in various browsers
• Online coding environments, that let you play with HTML, CSS and JavaScript in a live-update web page
• Link checker: checks any website iteratively for broken links. Sorry, Microsoft Windows only (and Linux via Wine).
• Regular expressions
  • You Don’t Know Anything About Regular Expressions: A Complete Guide
  • Regular Expressions for Dummies: Screencast Series
  • Best online resource and tutorials
  • Online playground
• Online diff tool: Compare the differences between two text files
• General tips for quickly setting up entire websites
  

  Web development brings your content from your web server to the world. Image from Open Clip Art

• Mobile website programming
  • Various emulators for mobile device website testing
  • Responsive design infographic: responsive design means one website design that responds automatically to different visitor devices and screen sizes. In short, instead of having a separate regular vs. mobile website, you have one website that resizes and adapts to different screen sizes.
    • This infographic covers most of the important issues, but misses one very important issue: touch screens (as in most mobile devices) do not have a mouse hover event. Thus, whereas a responsive design might have hover actions (e.g. menu drop-down on mouseover), it must provide equivalent alternate functionality that does not require the hover action (e.g. menu for small screens automatically shows all submenus, or clicking a top-level menu items expands the submenus rather than going straight to the top menu click item).
• Freenetlaw: legal document template for websites. These templates are licensed Creative Commons Attribution (CC-BY).

HTML resources

• HTML template: quickly generate a standard outline (a shell or boilerplate) for an HTML document
• Forms
  • Why not to use MAILTO as a form action. In short, don’t use it because results are unpredictable—not what you want with your visitor-submitted data.
  • New HTML5 form input types and attributes

CSS resources

• General CSS information
  • CSS Tricks
• The Cascade
  • CSS Cascade slides by Russ Weakley: the clearest and most entertaining explanation I’ve ever seen of every detail of the CSS cascade
    • The only thing I don’t like is the way he presents the specificity measures, e.g. (0,1,0,1). Yes, I know that this is the official method used by W3C, but it seems to me more suitable for web browsers that need to compute numeric values than for human web developers trying to figure it out. I find it easier just to remember:
      inline style > ID > class > element. Every other detail is a development of this general precedence rule.
  • When to use !important, the rule that overrides almost every other rule in the cascade
  • CSS Inheritance slides by Russ Weakley: the clear and most entertaining explanation
• Specific CSS elements
  • CSS line-height: detailed explanation of how this tricky element is formatted
• Colour and design
  • Simple explanation of using hue, saturation and value (HSV) to create pleasant colour schemes
  • Colour scheme design tool

JavaScript resources

• Mozilla JavaScript Reference, one of the best on the Web. I believe it originated from the Netscape days, when Netscape had the best online web references.
• Mozilla JavaScript Guide, a comprehensive online JavaScript book.

PHP resources

• Online coding environments for PHP: Most online coding environments don’t support PHP, mainly for security reasons. It’s usually more practical to use a local web server stack like XAMPP. However, these two do support PHP, with some limitations:
  • WriteCodeOnline.com only lets you execute code within a single <?php … ?> block, so is quite limited–you cannot test entire PHP/HTML scripts. At least it does let you see PHP output. However, it doesn’t give you a shareable URL, as most online coding environments do.
  • codepad outputs your PHP as the plain text that a web browser would see and it gives you a shareable URL. However, it doesn’t interpret the output as HTML. Thus, to view the HTML, you need to copy the PHP output to another environment.
• PHP case-sensitivity: PHP is mostly case-sensitive, but not always. The “not always” could trip you up sometimes.
• PHP type comparison tables: Which PHP types are equivalent, including true, false and null?
  • Tip: it is much easier to read this page if you do a browser page search for “TRUE” and use your browser’s search functionality to highlight all occurrences.

WordPress resources

• WPBeginner: enormous collection of articles for WordPress beginners, intermediate and advanced users
  • WPBeginner videos: the most professional set of introductory WordPress videos I’ve found. Requires free registration.
• StartBloggingOnline.com: List of various useful links for WordPress
  • 45+ Ways to Use WordPress: Extensive list of the types of websites you can build with WordPress, beyond just blogging, with links to example sites
  • Blog comparison chart: compares WordPress with other popular blogging platforms (not to be confused with content management systems)
• On Blast Blog: A useful site for getting started with blogging using WordPress
• Internationalization (i18n) and localization (l12n) in WordPress
  • Internationalization in WordPress Tutorial: A clear and detailed explanation of internationalization and how to implement it in WordPress
    • Even though the article says “localization”, it is actually about “internationalization”.Localization means translating computer software from one original user interface language or culture into a different user interface language or culture. Internationalization means writing computer software in such a way that it is easy to be localized.
  • Overview of some good WordPress localization plugins
    • Even though the article says “translation”, only some of the plugins support automatic machine translation. What all of them do is to manage localization, whether through machine or human translation.
    • As the author indicates, WPML is the king, but it may be overkill for simple multilingual sites. Moreover, it does not support machine translation.

Are there some useful web development resources that are not mentioned here? Please suggest them in the comments below; if I find them valuable, I’ll add them!