Event order when clicking on touch devices

Touch devices have their own set of events like touchstart or touchmove. Because mobile browsers should also work with with web applications that were build for mouse devices, touch devices also fire classic mouse events like mousedown or click.

When a user follows a link on a touch device, the following events will be fired in sequence:

  • touchstart
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

Canceling the event sequence
-------------------...

CSS-Style

Richard Powell presents a collection of CSS styling advice that's mainly taken from SMACSS. Although at makandra we're using BEM instead of SMACSS, here's my favorites.

Do not use ID's in CSS Selectors

It is never safe to assume there will only ever be one of something on a page so do not use ID's for CSS. Id's are much better used as javascript hooks so use them for this instead.

.list {…} instead of #list {…}

Animate an interface using classes not inline styles

Inline styles added by javascript are h...

Detect the current jQuery version

You can say this in Javascript:

$.fn.jquery
=> "1.11.1"

Daring Fireball: New iPhone Developer Agreement Bans the Use of Adobe's Flash-to-iPhone Compiler

Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).

PhoneGap Build

Write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more.

By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

Font Awesome 5 migration guide

Font Awesome version 5 changed some icon names, and introduces new prefixes fab, far, and fas.

There is a JavaScript shim that you can use as a "quick fix". It allows you to keep v4 icon names on v5.

The linked page includes details on using that, and a migration guide including a list of icon renames.

ClockPicker: Android-style time picker for Bootstrap

ClockPicker is a JavaScript and Bootstrap implementation of an Android-style time picker which looks and feels great.

Unfortunately, it is no longer maintained.

ClockPicker.png

SmartUnderline

SmartUnderline is an open-source JavaScript library which uses clever tricks to draw underlines in a more beautiful and readable way.

We've not yet put this into a project, but its effect is very pretty. Please update this card when you use it.

Copy & Paste & The Web | CSS-Tricks

Insanely detailled guide about controlling copy & paste behavior using web technology in 2015.

Note that you can now trigger a copy action through Javascript, no Flash required.

yaronn/blessed-contrib

Build dashboards using ascii/ansi art and javascript

Awesome!

Magnific Popup: Responsive jQuery Lightbox Plugin

Responsive Lightbox JavaScript that just works.

You can use it for single images or a gallery. Animations are optional.

Databound

Databound provides Javascript a simple API to the Ruby on Rails CRUD.

Tries to expose a full model CRUD as an API. Not sure if this is useful for more refined requirements.

Chartkick

Create beautiful Javascript charts with one line of Ruby.

Promising chart library for easily rendering charts with Google Charts.

This seems to not submit your data points to Google.

RulersGuides.js demo

RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page

Also available as a bookmarklet.

Pure CSS Timeline | CSSDeck

Clever hack to allow user interaction without Javascript (by using radio buttons and selecting on :checked).

Opal, A new hope (for Ruby programmers)

Opal is a source to source ruby to javascript compiler, corelib and a runtime implementation that currently passes 3000 rubyspecs w/a reachable goal of passing them all.

occ/TraceKit · GitHub

Tracekit is a JavaScript library that automatically normalizes and exposes stack traces for unhandled exceptions across the 5 major browsers: IE, Firefox, Chrome, Safari, and Opera.

CSS3 Animated Loading Bar

Shows how to implement an animated progress bar in pure CSS, without animated GIFs, Javascript or Flash.

jsTimezoneDetect

Makes a robust determination of a user's timezone through Javascript.

Evening on Backbone.js/Views w/ Q&A with David Heinemeier Hansson - YouTube

Interesting interview with DHH, where he talks about how they made the new Basecamp feel very fast without using a lot of Javascript (most of Basecamp still lives on the server). The two tricks they used are PJAX and Russian Doll Caching.

jQuery Tag Cloud

TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud.

fnando/i18n-js

A small library to provide the Rails I18n translations in Javascript clients.

CodeMirror

CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.

Desktop Notifications with WebKit

Chrome now supports desktop notifications using WebKit's webkitNotifications API. This means you can create popup bubbles from Javascript.