I come across so many interesting info-apps and documents in my daily research, so I thought I’d provide a list of those here.

True, not everyone likes the “list post” or roundup, but hey, we can’t please everyone. And we don’t do these types of posts too often anyhow.

In this case, this is a great way to bookmark a few things maybe for some evening or weekend reading. I guarantee you’ll find at least a few links in here that you’ll want to come back to.

Enjoy!

1. CSS Vocabulary

A great point-and-click little app to get you up to speed with all the different parts of CSS syntax and what the proper name for them is.

CSS Vocabulary

2. Liquidapsive

A very simple informational layout that, by means of a select box, lets you choose between Responsive, Adaptive, Liquid, and Static, so you can see what is the difference between the four layout types.

Liquidapsive

I imagine this would be nice even to show to clients, so they can see how things adjust using the different styles.

3. Superhero.js

A collection of the best articles, videos, and presentations on helping to maintain a large JavaScript code base.

Superhero.js

Included are some general principle-type stuff, sources on testing, tools, performance, security, and more.

4. HowToCoffeeScript.com

A cheat sheet for learning and remembering CoffeScript syntax.

HowToCoffeeScript.com

5. The HTML Landscape

This is pretty interesting. It’s a W3C document that describes the “perceptible differences” between three HTML specifications: WHATWG, W3C’s HTML5.0, and W3C’s HTML5.1.

The HTML Landscape

Might be a little overly technical, but you might be able to find some interesting new stuff here.

6. The Elements of HTML

A nice comprehensive one-page chart of HTML and XHTML elements that indicates which specification the elements belong to.

The Elements of HTML

This looks really good for doing research to find out when and/if an element has been deprecated or made obsolete in HTML5.

7. JavaScript Equality Table

A nice little 3-tiered chart that helps you understand JavaScript’s double- and triple-equals operators.

JavaScript Equality Table

The conclusion? “Use three equals unless you fully understand the conversions that take place for two-equals.”

8. Web Accessibility Checklist

A useful but not overwhelming reference to help you check off various items on your projects for accessiblity.

Web Accessibility Checklist

A lot of this is pretty simple, but it doesn’t hurt to always take a final look, in addition to doing accessibility validating.

9. Static Web Apps — A Field Guide

According to the description: “This guide will introduce you to the world of static web applications and offer solutions to common challenges encountered while building them.”

Static Web Apps — A Field Guide

The idea here is to promote an architecture that eases common development problems.

10. Learn regular expressions in about 55 minutes

An extensive doc/tutorial introducing regular expressions.

Learn Regular Expressions in 55 Minutes

I’m guessing it would take much longer than the claimed “55 minutes” to really get something out of this, but certainly worth a look.

11. Open Web CSS Reference

This is a really comprehensive and little-known CSS property and feature reference.

Open Web CSS Reference

Alphabetical and includes links to the spec for everything listed.

12. CSS Values

This is one of my own side projects. It’s an easy way to look up a CSS property and quickly view the possible values. For example, if you forgot what values are acceptable for somethng obscure like font-variant.

CSS Values

In addition to values, the most recent update includes browser support charts for each property, powered by caniuse.com.

13. ES6features

From Microsoft developer Luke Hoban, an overview of new stuff in the ECMAScript 6 spec.

ES6features

As the repo points out, “implementation of these features in major JavaScript engines is underway now”, so it would be useful to start getting familiar with this stuff.

I often have trouble finding the right place in the spec for researcing something. This is a nice brief little summary from Mozilla of the links you’ll need to be aware of in relation to the spec.

Relevant Spec Links

15. OverAPI.com

Cheat sheet madness, folks.

OverAPI.com

This seems to have everything. The cheat sheets will link to the relevant authoritative resources (MDN, PHP.net, etc).

16. JavaScript: The Right Way

A JavaScript guide ‘intended to introduce new developers and help experienced ones to JavaScript’s best practices.’

JavaScript: The Right Way

17. The HTML5 JavaScript API Index

A really comprehensive one-stop place to search for HTML5 API info.

The HTML5 JavaScript API Index

Is “automatically generated from the HTML 5 specification documents” and very easy to navigate using the 3-paned view.

18. Zeal

This looks pretty neat. It’s a native app that is the Windows and Linux counterpart of Dash, an app that lets you search 130+ API docs offline.

Zeal

With a simple keyboard shortcut, you can display the API browser from anywhere in your workspace.

19. The Ultimate Flexbox Cheat Sheet

An extensive reference to help you find flexbox syntax and brush up on the less familiar stuff.

The Ultimate Flexbox Cheat Sheet

From the same guy who did the cool interactive Flexbox tutorials.

20. jsCode

An app to help you create your own custom JavaScript coding guidelines.

jsCode

You can also look up custom guides created by others and share yours with your team or other collaborators.

Any Others?

Most of the stuff I included here are the not-so-well-known ones. If you’ve created something or know of a doc tool or set of guidelines you’d like to share, let us know in the comments.

Louis is a dev blogger at Impressive Webs, author, and is currently SitePoint's HTML and CSS editor. He loves all things front-end, and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • bl4de

    http://devdocs.io/

    All-in-one (HTML5, JavaScript, CSS, JavaScript libraries) – great project

  • Aurelio De Rosa

    Hi Louis.

    Probably a lot of devs already know this one but I think it’s still worth to mention http://devdocs.io/. DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

    • LouisLazaris

      Yeah, that one has made the rounds and is very popular. I was more aiming for lesser-known stuff.

      But if anyone wants to delve into devdocs, Bruno wrote a great overview:

      http://www.sitepoint.com/look-devdocs-io/

    • http://thilak.in/ Thilak Rao

      Thanks for the link. I had stumbled across this link a while ago, but forgot to bookmark it. I’ve been searching for it ever since. Nice alternative for Dash App!

      • Aurelio De Rosa

        You’re welcome!

  • http://www.slatius.nl Arno Slatius

    Css values looks promising and is very fast!
    What I’m missing there is what the sites name sais; values. You allow the user to search for css properties but you don’t explain what the values can be. Like color for instance can have all sorts of variations in it’s values, if you’d add more there it would be really helpful.

    • LouisLazaris

      Oh, I’m aware of its limitations. Basically, I created the site as a quick-reference just to look up the possible values. It’s more to initiate research, rather than to actually help do research. Not deep research anyhow.

      But that’s why it has links to MDN and the spec, so if you need more, it’s all a click away.

      Of course, you could just google it anyhow, which most people will do, but I find it’s helpful just for myself, when I’m doing CSS research, I have CSS Values open in a tab and I refer to it whenever I need a quick lookup.

    • LouisLazaris

      Oh, and I can’t take credit for the speed. In fact, the initial page load is kind of slow, because all the data loads up. I mask that by hiding everything until it’s ready, which gives the illusion of faster loading.

      But as for the actual search, the functionality is based on the awesome and very easy to use list.js, which I love and I highly recommend. The only problem with that is, as I mentioned, all the content has to be loaded first. I’m not sure if there is a way to incorporate Ajax-based loading for that, but it would be worth looking into I suppose.

  • TEMITAYO AKEEM

    Of them all, zealdocs.org makes me feel like screaming, how come I don’t know bout it a long time ago…. that is what I can, download once and work anytime, thanks, really cool

  • http://www.about.me/azmyhanifa Azmy

    now this is why sitepoint is awesome for beginner like me :D (y) way to go @LouisLazaris:disqus

  • evolutionxbox

    I love using caniuse.com to see what technologies I can use for different browsers.

  • abhijeetkpawar
  • Nag

    Thank you very much, for the Sources

  • jhstephenson

    Great list. Only one issue… The Javascript the Right Way page does not seem to work. Is that sight down?

  • adam__roberts

    I just tried it myself – it worked for me, but it took a very long time to load!

    • jhstephenson

      Interesting. I still get a message saying that the webpage is not available. And I am trying it from my home now instead of my office.

  • anonim

    thanks

  • http://MichaelMusgrove.com/ Michael Musgrove

    If you’re looking for a list of front-end dev bookmarks, it begins and ends with Sindre Sorhus’ “Awesome” GitHub repo: https://github.com/dypsilon/frontend-dev-bookmarks.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.