DailyJS

DailyJS

The JavaScript blog.


Tagbootstrap
Featured

events conferences bootstrap

Conference: mloc.js, Bootstrap 3.1

Posted on .

Conference: mloc.js

mloc.js

mloc.js is a conference in Budapest, taking place on February 13th. Tickets start at $260, but there are only 24 left!

With projects like asm.js and Emscripten, Mozilla is beginning to see JavaScript as a virtual machine and compiler target. Will it change how we think about and how we use JavaScript? How compiling C++ code to really fast JavaScript code will transform the web? At mloc.js we are bringing together representatives of major browser vendors, industrial users with large web projects, and authors of compile-to-JS projects with the goal of moving the web forward. Together we will discuss what will be possible with the web platform in the next 10 years.

There are some great speakers from PayPal, Google, Mozilla, Intel, and more.

Bootstrap 3.1

It looks like Bootstrap 3.1 is out. There's an inconsequential and pointless discussion about it on Hacker News, so it's probably best to ignore that and read the changelog for yourself.

One of the nice things about this release is it includes some new templates: Blog, Cover, and Dashboard. Even though I like to code these by hand, it's great for people who want to get started quickly. The blog template doesn't use the article element, but they do target IE 8 so that might be why.

Featured

libraries ui performance benchmarks mobile bootstrap

ChocolateChip-UI, Bootstrap Grid Builder, Bootstrap 3 Performance

Posted on .

ChocolateChip-UI

ChocolateChip-UI

ChocolateChip-UI (GitHub: sourcebitsllc / chocolatechip-ui, License: BSD) from Sourcebits is a new UI framework for mobile web applications that is designed to look like iOS 7, Jelly Bean, and Windows Phone 8.

ChocolateChipUI uses specific HTML5 tags for structural markup. The article element is the "basic building block of ChocolateChip-UI":

Every article should have a unique id so that it can be identified by the navigation system. These must be valid HTML ids. At load time, ChocolateChip-UI checks to see if you have manually set the navigation state of your articles. If not, it will set the first article as current and the others as next. This will mean that initially you app may momentarily load in a state of disarray before it is arranged properly. As such, we strongly recommend that you always put a state on each article so that it loads correctly.

It uses its own JavaScript framework instead of a more established library, and is based around event-based widgets. It has some low-level features like touchscreen gesture recognition, but also includes higher-level widgets like UISegmented, UIPopup, and so on.

The authors have written a guide on how to transition from jQuery:

ChocolateChipJS is very similar to jQuery. But it's also much smaller. Uncompressed it's just 60kb and compressed, 26kb. In contrast, jQuery is 2.0.3 uncompressed is 242kb and compressed, 84kb. ChocolateChip was designed for modern mobile browsers. It has no legacy code for browser not on current mobile devices.

Bootstrap Grid Builder

Jay Kanakiya's Bootstrap Grid Builder (GitHub: kanakiyajay / bootstrap-grid-builder, License: Apache 2.0) is a tool for exploring and generating column/row grids based on Bootstrap 3's new markup.

It allows you to switch between different devices so you can see what a given layout will look like on a phone, tablet, or desktop.

Bootstrap 3 Performance

Parashuram Narasimhan sent in Bootstrap Performance using telemetry and an article about it: Bootstrap - Evolution over two years:

The performance drop seems to stop at 2.3.2 release and looks like the latest 3.0.0 release was aimed at making things faster. A lot of components in 3.0.0 are way better than their 2.3.2 counterparts.

There are significant performance changes between the RC and the final versions of 3.0.0. This could be due to incorrect CSS files I generated, or was there something different in the final release?

The telemetry page allows you to view performance metrics for each Bootstrap component for each point release.

Featured

books node documentation bootstrap

Bootstrap 3, Node Web Development, Groc

Posted on .

Bootstrap 3

Bootstrap 3's homepage.

Bootstrap 3 RC1 is out, and you'll see Bootstrap 3 on the front page of getbootstrap.com:

With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, everything has changed. We've added features, removed features, and cleaned up a lot more. The v3 pull request on GitHub has all the details you'll need for a complete list of changes and some helpful migration tips.

Before you get too excited you should know that it'll take some work to migrate to Bootstrap 3. There's no magic migration button as far as I know. Grids still scale up to 12 columns, but now use the class prefix .col-. Forms have different classes and tweaked markup, but the newer markup seems better to me. I don't think we need <div class="controls"> anymore, for example.

Node Web Development - Second Edition

Node Web Development - Second Edition has been released, written by David Herron .

He's written a post about it on his blog:

The final version of the sample application includes user authentication support, the ability to work with multiple database engines, be deployed on cloud services, and it dynamically sends data back and forth between server and browser to dynamically update the screen when other people edit things, and to support sending little messages between users of the application.

Groc

In Rock Your Doc With Groc, Our Favorite Automated Frontend Documentation Tool, a fork of Groc is discussed which adds support for tags:

We just couldn’t find a tool that gave us everything we needed. In the end, we created our own automated documentation tool by forking Docco and adding (hacking) support for Tags.

Groc, by Ian MacLeod, is a fork of docco by Jeremy Ashkenas. The post on Gilt's blog does a good job of explaining why they need tags and how they use them.

Featured

libraries ui node modules bootstrap

Feaxures, RBush, Bootstrap Modal

Posted on .

Feaxures

Feaxures

Feaxures (GitHub: adrianmiu / feaxures, License: MIT) by Adrian Miu is a progressive enhancement library that combines ideas from the DRY principle, responsive design, A/B testing, and RequireJS:

RequireJS is used to handle the process of loading asyncronously the JS/CSS files. It also helps with managing the depencies. For example if the jquery.ui.tabs.js file is dependent on jquery.ui.widget.js file, RequireJS will load that file first, assuming you have configured it properly using the shim option.

Once you've configured your RequireJS loader script, data attributes prefixed with data-fxr- are used to tie specific features to blocks of markup. The attribute's value can be set to several things including URL query strings, JSON, and DOM IDs to pass options to the feature.

The Feaxures API also has lifecycle events so you can see when features are loaded and attached.

RBush

RBush (GitHub: mourner / rbush, License: MIT, npm: rbush) by Vladimir Agafonkin is a high-performance 2D spatial indexer for points in rectangles:

Spatial index is a special data structure for points and rectangles that allows you to perform queries like "all items within this bounding box" very efficiently (e.g. hundreds of times faster than looping over all items). It's most commonly used in maps and data visualizations.

Trees can be created and values subsequently inserted like this:

var tree = rbush(9, ['.minLng', '.minLat', '.maxLng', '.maxLat']);  
tree.insert({id: 'foo', minLng: 30, minLat: 50, maxLng: 40, maxLat: 60});  

Data can also be inserted in bulk by using arrays, and values can be searched, removed, and exported. It also works in browsers. The readme has some interesting papers related to r-trees, and Vladimir has included unit tests written with Mocha.

Bootstrap Modal

Bootstrap Modal (GitHub: cabaret / bootstrap-modal-strict-close, License: Apache 2.0) by Joris Ooms is a small extension to Bootstrap's modal dialog to prevent it from being accidentally closed when triggering actions like form submission.

Use it by adding the attribute data-strict-close="true" or passing strictClose: true to the .modal method's options.

Featured

jquery plugins backbone.js text bootstrap wysiwyg

jQuery Roundup: Backbone Associations, bootstrap-wysihtml5

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Backbone Associations

Backbone Associations (GitHub: dhruvaray / backbone-associations, License: MIT, bower: backbone-associations) by Dhruva Ray is a plugin for one-to-one and one-to-many associations between models and collections:

applications can listen to any kind of change (change, add, remove, reset, sort, destroy) in this hierarchy using standard Backbone events and respond to them. (views can re-render for example). The implementation strives to be tiny (2.2KB), easy-to-understand, light-weight and fast.

Once the plugin has been loaded, models can be defined using Backbone.AssociatedModel, and then relationships can be set up with Backbone.One and Backbone.Many.

var Product = Backbone.AssociatedModel.extend({  
});

var User = Backbone.AssociatedModel.extend({  
  relations: [{
    type: Backbone.Many,
    key: 'locations',
    relatedModel: Product
  }]
});

The reversed association is automatically inferred, so a product could be set for a user. Values can be traversed using fully qualified paths as well:

emp.get('works_for.controls[0].locations[0].zip');  

Fully qualified paths can also be used to assign event listeners:

emp.on('change:works_for.locations[*]', cb);  

The author has written up a full tutorial for Backbone Associations, and has included unit tests and full documentation.

bootstrap-wysihtml5

bootstrap-wysihtml5 (GitHub: jhollingworth / bootstrap-wysihtml5/, License: MIT, bower: bootstrap-wysihtml5) by James Hollingworth is an amazing text editor component. It's highlight consistent with Bootstrap's design, and has many features you may take for granted when editing text, like the usual keyboard shortcuts.

Trantor Liu sent in his fork, trantorLiu/bootstrap-editor, which pairs up the project with jQuery-File-Upload. This adds support for things like upload progress, drag and drop, and cross-domain uploads. Trantor notes that the demo won't currently work because there's no server-side support, but he's provided instructions on how to set it up locally.