DailyJS

DailyJS

The JavaScript blog.


Tagplugins
Featured

meteor books plugins databases servers apps mysql sponsored-content jquery

Your First Meteor Application, OData Server, ItemSlide.js

Posted on .

Your First Meteor Application

Your First Meteor Application

David Turnbull's Your First Meteor Application is a highly focused, beginner-friendly introduction to Meteor. David updates the book regularly when Meteor changes, so it's worth checking back every so often to look for new content.

You can read the book online or download the PDF for free. If you prefer video, there are also screencasts for $39.

OData Server

The OData Server (GitHub: gizur/odataserver, License: MIT, npm: odataserver) by Jonas Colmsjö is an OData server that's backed by MySQL. It's easy to drop into an Express project, and it's designed to work as a quick "mobile backend as a service" type of app.

It has a simple HTTP API, and Jonas has included usage examples for curl that show you how to create users, databases, and insert data. It actually does things like MySQL database and schema creation, so it requires a MySQL administrator account to work correctly.

If you're interested in this and want to quickly try it out, the advanced usage guide has instructions for deploying it to Docker.

ItemSlide.js

ItemSlide.js (GitHub: itemslide/itemslide.github.io, License: MIT, npm: itemslide) by Nir Lichtman is a touch-friendly carousel.

With jQuery you can set it up like this:

var carousel = $('ul');  
carousel.itemslide({ swipe_out: true });  

And it has events for responding to user interaction:

carousel.on('pan', function(e) {});  
carousel.on('changeActiveIndex', function(e) {});  
carousel.on('changePos', function(e) {  
  console.log('new pos:', carousel.getCurrentPos());
});
carousel.on('swipeout', function(event) {  
  console.log('swiped out slide:', event.slide);
});

You don't have to use it with jQuery, but if you do you'll get things like mousewheel support.

Featured

graphics plugins text atom

Rantjs, Avatar, esformatter

Posted on .

Rantjs

Rantjs (GitHub: svenanders/Rantjs, License: ISC, npm: rantjs) by Sven Anders Robbestad is a library for procedurally generating text. It takes a formatted constructor and then generates suitable sentences:

var rantjs = require('rantjs');  
var rant = new rantjs.SimpleRant;  
var sentence = rant.rantConstructor('<firstname male> likes to <verb-transitive> <noun.plural> with <pron poss male> pet <noun-animal> on <timenoun dayofweek plural>.');

console.log(sentence); // 'Sean likes to chop parrots with his pet cat on Saturdays.'  

There are a lot of supported tags, with subgroups, so you can generate a activity video or adv emotion. You can also add your own tags.

The author suggests that this might be useful for generating random text in games, but I think it might also work well for generating random admin area sample text in a blog or CMS, and for creating text to use in testing.

Avatar

If you're looking for a way to generate default avatars, then take a look at Avatar (GitHub: MatthewCallis/avatar, License: MIT, npm: avatar-initials) by Matthew Callis. It can show the user's initials in a styled or unstyled avatar, or optionally fall back to a Gravatar instead.

To use it, just instantiate Avatar with the container element:

var avatar = new Avatar(document.getElementById('avatar'), {  
  useGravatar: false,
  initials: 'MC'
});

/* or */

$('#avatar').avatar({
  useGravatar: false,
  initials: 'MC'
});

esformatter

Sindre Sorhus sent in atom-esformatter (GitHub: indresorhus/atom-esformatter, License: MIT), an Atom editor package for formatting JavaScript with esformatter. Esformatter itself supports lots of options for formatting JavaScript, like the indentation characters, line breaks, and whitespace handling.

Sindre's Atom package lets you run esformatter from the Command Palette by typing esformatter, and you can run it on a selection or the whole file.

Esformatter supports plugins, so you can change its behaviour by loading other Node modules. There's a list of plugins and also a plugin wish list. Sindre notes that it can be used with Gulp and Grunt, which might be a good way of processing open source JavaScript according to your project's style guide before you release it.

Featured

jquery plugins module-loaders

jQuery 1.11.1, 2.1.1, PositionCalculator, YModules

Posted on .

jQuery 1.11.1 Beta 1 and 2.1.1 Beta 1 Released

New jQuery betas are out. These are maintenance releases with bug fixes, including a tweak that helps create builds with custom names, so you can use a different name in AMD loaders like RequireJS.

PositionCalculator

PositionCalculator (GitHub: tlindig / position-calculator, License: MIT) by Tobias Lindig is a jQuery UI Position replacement:

This plugin will not manipulate any CSS settings or DOM-trees, it only calculate values. To be more exact, it calculates the difference of current position to target position and the overflow over boundary. Thus you are all paths open to implement the positioning according to your requirements. You can apply the new position by using top and left or using the css3 transform function or by setting margin. It is up to you.

YModules

Vladimir Varankin sent in YModules (GitHub: ymaps / modules) by Dmitry Filatov is an asynchronous modular loading system that works with Node and browsers.

The syntax looks like this:

modules.define(  
  'jquery',
  ['loader'],
  function(provide, loader) {

  loader('//yandex.st/jquery/2.1.0/jquery.min.js', function() {
    provide(jQuery.noConflict(true));
  });
});

modules.define(  
  'my-module',
  ['jquery'],
  function(provide, $) {
    function MyModule() { /* do something here */ }
    provide(MyModule);
  });

modules.require('my-module', function(MyModule) {  
  // `MyModule` will be available here after
  // Its dependencies will be resolved and its `provide` will fire.
});

It has a feature that allows existing modules to be redeclared, which can help with component-based libraries:

modules.define('button', function(provide) {  
    function Button() { /* our button's constructor */ });
    Button.prototype.doAction = function() {};

    provide(Button);
});

// on the end user's space we could redefine the same Button
modules.define('button', ['jquery'], function(provide, $, Button) {  
  // We're declaring the same module "button",
  // so we have an access to the module's previous definition
  // through the last define's argument (`Button` here), which
  // is appended automatically and known as "previousModuleDeclaration"
  Button.prototype.doAnOtherAction = function() {};
  provide(Button);
});

modules.require('button', function(Button) {  
  Button.doAction();
  Button.doAnOtherAction();
});

Featured

jquery ui plugins

jQuery UI 1.10.4, jqModal, floatThead

Posted on .

jQuery UI 1.10.4

jQuery UI 1.10.4 is out:

The fourth maintenance release for jQuery UI 1.10 is out. This update brings bug fixes for Widget Factory, Position, Droppable, Resizable, Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Slider, Spinner, Tabs, and the CSS Framework. For the full list of changes, see the changelog.

jQuery UI 1.10.3 was released last May, so it's been quite a while since the last release!

jqModal

jqModal (GitHub: briceburg / jqModal, License: MIT, GPL) by Brice Burgess is a plugin for showing modals, popups, and notices. To use it, you just need a suitable container element with dialog content and then to call $('#dialog').jqm();.

It can load content using Ajax, and allows dialogs to be nested. External content can also be loaded using iframes.

jquery.floatThead

jquery.floatThead (GitHub: mkoryak / floatThead, License: CC BY-SA 4.0) by Misha Koryak is a plugin for floating table headers. Headers can be floated inside elements with overflow scrolling, and also for the entire window.

Overflow scrolling requires that the "scroll container" is specified:

var $table = $('table.demo');  
$table.floatThead({
  scrollContainer: function($table){
  return $table.closest('.wrapper');
}});

Featured

jquery ui plugins async flow-control

Contra, jquery.onoff, jQuery 1.11.0 RC1 and 2.1.0 RC1

Posted on .

Contra

Contra

Contra (GitHub: bevacqua / contra, License: MIT, npm: contra, Bower: contra) by Nicolas Bevacqua is a flow control library, similar to async, but more suited to client-side development.

It has three sets of methods: flow control, functional, and uncategorized. The flow control methods are for executing groups of functions, like λ.waterfall(tasks, done). The functional methods are a subset of what you might expect to find in Underscore.js -- λ.each and λ.filter for example. I noticed that λ.each can handle both arrays and objects, so it's different to forEach.

Each method can be exported separately, so you could just pull in a single method if you wanted to. It has Mocha tests, and can be installed with Bower.

jquery.onoff

jquery.onoff (GitHub: timmywil / jquery.onoff, License: MIT) by Timmy Willison is a toggle switch that uses checkboxes. It supports IE 9 and above, and can be loaded with an AMD loader.

Although it's a relatively simple project, Timmy has included tests, and a Grunt build script.

jQuery 1.11.0 RC1 and 2.1.0 RC1

jQuery 1.11.0 RC1 and 2.1.0 RC1 have been released. These releases are maintenance releases, so there aren't any API changes.

The announcement notes that these releases should work properly with Browserify, and can be installed using npm.