Limitless - UI
Overview
Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading. Main features:
- Lazy loading and very efficient and performant handling of large data sets
- Keyboard navigation
- (Hierarchical) selection and checkboxes
- Table view (gridview)
- Drag and drop
- Persistence of expansion, selection and active state
- Inline editing
- Themable (comes with WinXP, Win7, Win8, OS X Lion, and Glyph samples)
- The tree behaves like a single form control, i.e. it is 'tabbable' (example)
- Rich object oriented API
- Extensible modular design
- and more ...
Usage
Include the following lines of code in the
section of your HTML:

Add element with attributes:

Expanded folder with children

Expanded sub-item

Active sub-item (active and focus on init)

Basic menu item with HTML support

Collapsed sub-item

Sub-item 2.2.1

Sub-item 2.2.2

Menu item with key and tooltip

Collapsed folder

Sub-item 1.1

Sub-item 1.2

This is a selected item

Document with some children (expanded on init)

Document sub-item

Another document sub-item

Sub-item 2.1.1

Sub-item 2.1.2

Call the plugin via JavaScript:
// Basic initialization
$(".tree-default").fancytree({
init: function(event, data) {
$('.has-tooltip .fancytree-title').tooltip();
}
});
Plugin options
| Option | Type | Description |
|---|---|---|
activeVisible |
true | Boolean. Make sure that the active node is always visible, i.e. its parents are expanded |
ajax |
- | Object. Default options for ajax requests |
aria |
false | Boolean. Add WAI-ARIA attributes to markup |
autoActivate |
true | Boolean. Activate a node when focused with the keyboard |
autoCollapse |
false | Boolean. Automatically collapse all siblings, when a node is expanded |
autoScroll |
false | Boolean. Scroll node into visible area, when focused by keyboard |
checkbox |
false | Boolean. Display checkboxes to allow selection |
clickFolderMode |
4 | Integer. Defines what happens, when the user click a folder node. 1: activate , 2: expand , 3: activate and expand , 4: activate/dblclick expands |
debugLevel |
null | Integer. 0..2 (null: use global setting $.ui.fancytree.debugInfo ) |
defaultKey |
null | Callback(node) is called for ner nodes without a key. Must return a new unique key. (default null : generates default keys like that: "_" + counter) |
enableAspx |
true | Boolean. Accept passing ajax data in a property named `d` |
extensions |
[] | String[]. List of active extensions |
focusOnSelect |
false | Boolean. Set focus when node is checked by a mouse click |
generateIds |
false | Boolean. Add id="..." to node markup |
icons |
true | Boolean. Display node icons |
idPrefix |
"ft_" | String. ID prefix |
imagePath |
null, using 'skin/' subdirectory | String. Path to a folder containing icons |
keyboard |
true | Boolean. Support keyboard navigation |
keyPathSeparator |
"/" | String |
minExpandLevel |
1 | Integer. 2: top-level nodes are not collapsible |
quicksearch |
false | Boolean. Navigate to next node by typing the first letters |
scrollOfs |
{top: 0, bottom: 0} | Object. Optional margins for node.scrollIntoView() |
scrollParent |
$container | Scrollable container for node.scrollIntoView() |
selectMode |
2 | Integer. 1: single, 2: multi, 3: multi-hier |
source |
any | Used to Initialize the tree |
strings |
- | Strings. Translation table |
tabbable |
- | Boolean. Add tabindex='0' to container, so tree can be reached using tab |
titlesTabbable |
- | Boolean. Add tabindex='0' to node title span, so it can receive keyboard focus |
toggleEffect |
{ effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 } | Object. Animation options, false : off |
Plugin events
Events are called like this: `CALLBACK_NAME(event, data)`
where `event`
is a jQuery Event object and `data`
is of type EventData The `this`
context is set to tree's the HTMLDivElement:
| Event | Description |
|---|---|
activate |
`data.node` was activated |
beforeActivate |
`data.node` is about to tbe (de)activated. Current status is data.node.isActive() . Return false to prevent default processing |
beforeExpand |
`data.node` is about to tbe collapsed/expanded. Current status is data.node.isExpanded() . Return false to prevent default processing |
beforeSelect |
`data.node` is about to tbe (de)selected. Current status is data.node.isSelected(). Return false to prevent default processing |
blur |
`data.node` lost keyboard focus |
blurTree |
`data.tree` lost keyboard focus |
click |
`data.node` was clicked. `data.targetType` contains the region ("title", "expander", ...). Return false to prevent default processing, i.e. activating, expanding, selecting, etc |
collapse |
`data.node` was collapsed |
create |
Widget was created (called only once, even if re-initialized) |
createNode |
Allow tweaking and binding, after node was created for the first time (NOTE: this event is only available as callback, but not for bind() ) |
dblclick |
`data.node` was double-clicked. `data.targetType` contains the region ("title", "expander", ...). Return false to prevent default processing, i.e. expanding, etc |
deactivate |
`data.node` was deactivated |
expand |
`data.node` was expanded |
focus |
`data.node` received keyboard focus |
focusTree |
`data.tree` received keyboard focus |
iconClass |
Allows to override the class names added to the `data.node` icon markup to define custom icons or glyphs |
init |
Widget was (re-)initialized |
keydown |
`data.node` received key. `event.which` contains the key. Return false to prevent default processing, i.e. navigation. Call `data.result = "preventNav";` to prevent navigation but still allow default handling inside embedded input controls |
keypress |
(currently unused) |
lazyLoad |
`data.node` is a lazy node that is expanded for the first time. The new child data must be returned in the `data.result` property (see source option for available formats) |
loadChildren |
Node data was loaded, i.e. `node.nodeLoadChildren()` finished |
loadError |
A load error occurred. Return false to prevent default processing |
postProcess |
Allows to modify the ajax response |
removeNode |
`data.node` was removed (NOTE: this event is only available as callback, but not for bind() ) |
renderColumns |
(used by table extension) |
renderNode |
Allow tweaking after node state was rendered (NOTE: this event is only available as callback, but not for bind() ) |
renderTitle |
Allow replacing the '` markup (NOTE: this event is only available as callback, but not for bind() ) |
restore |
Text-persist has expanded, selected, and activated the previous state |
select |
`data.node` was selected |
Plugin info
| Property | Description |
|---|---|
| File name | fancytree_all.min.js, fancytree_childcounter.js |
| Location | assets/js/plugins/trees/ |
| Updates | 0 |
| Links | Github project page |
Overview
FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. FullCalendar is great for displaying events, but it isn't a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event's name or other associated data. It is up to you to add this functionality through FullCalendar's event hooks.
Usage
Include the following lines of code in the
section of your HTML:

Add element with attributes:

Call the plugin via JavaScript:
// Basic initialization
$('.fullcalendar-basic').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2014-11-12',
editable: true,
events: [
{
title: 'All Day Event',
start: '2014-11-01'
},
{
title: 'Long Event',
start: '2014-11-07',
end: '2014-11-10'
},
...
]
});
Fullcalendar documentation
Complete Fullcalendar documentation can be found online on Official library website. It's quite big, with a lot of options, events and methods. Also check out Google Calendar integration. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Fullcalendar library.
Plugin info
| Property | Description |
|---|---|
| File name | fullcalendar.min.js |
| Location | assets/js/plugins/ui/fullcalendar/ |
| Updates | 0 |
| Links | Github project page |
Overview
Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up. Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.
Usage
Include the following lines of code in the
section of your HTML:

Add element with attributes:

...

...

Call the plugin via JavaScript:
// Basic initialization
$(".navbar-fixed-top").headroom({
classes: {
pinned: "headroom-top-pinned",
unpinned: "headroom-top-unpinned"
},
offset: $('.navbar').outerHeight(),
onUnpin : function() {
$('.navbar .dropdown-menu').parent().removeClass('open');
}
});
How does it work?
At it's most basic headroom.js
simply adds and removes CSS classes from an element in response to a scroll event. This means you must supply your own CSS styles separately. The classes that are used in headroom.js that are added and removed are:

Relying on CSS classes affords headroom.js
incredible flexibility. The choice of what to do when scrolling up or down is now entirely yours - anything you can do with CSS you can do in response to the user's scroll.
Plugin options
Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting Headroom.options. The structure of an options object is as follows:
// Basic initialization
{
// vertical offset in px before element is first unpinned
offset : 0,
// scroll tolerance in px before state changes
tolerance : 0,
// or you can specify tolerance individually for up/down scroll
tolerance : {
up : 5,
down : 0
},
// css classes to apply
classes : {
// when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned",
// when scrolling down
unpinned : "headroom--unpinned",
// when above offset
top : "headroom--top",
// when below offset
notTop : "headroom--not-top"
},
// element to listen to scroll events on, defaults to `window`
scroller : someElement,
// callback when pinned, `this` is headroom object
onPin : function() {},
// callback when unpinned, `this` is headroom object
onUnpin : function() {},
// callback when above offset, `this` is headroom object
onTop : function() {},
// callback when below offset, `this` is headroom object
onNotTop : function() {}
}
Plugin info
| Property | Description |
|---|---|
| File name | headroom.min.js, headroom_jquery.min.js |
| Location | assets/js/plugins/ui/headroom/ |
| Updates | 0 |
| Links | Github project page |
Overview
The jquery drill down menu plugin takes standard nested lists and turns them into iPod style drill down menus. Drill down menus offer an excellent way of managing and organising large, complicated menus in a small, vertical, compact and fixed-sized area. In term of useability they offer a great alternative to standard drop down menus, which can be cumbersome with multiple levels. This plugin uses the jquery cookie plugin by Klaus Hartl for saving the menu state between pages.
The plugin is included to the main drilldown.js
file.
Features of the drill down menu plugin include – saved state using cookies, add count of total number of child links to each menu option and offers 3 different ways to navigate:
- Using a breadcrumb style menu at the top of the drill down menu
- A back button to return to previous options
- Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken
Usage
Include the following lines of code in the
section of your HTML:

Add element with attributes:

Category

Range

Manufacturer 1

Product A

Product B

Product C

Product D

Manufacturer 2

Product E

Product F

Product G

Call the plugin via JavaScript:
// Basic initialization
$('#drilldown').dcDrilldown({
defaultText: 'Back to parent',
saveState: true
});
Plugin options
There are several options, which can be configured for the drill down menu plugin. The default options are:
// Default options
$.fn.dcDrilldown = function(options) {
var defaults = {
classWrapper: 'dd-wrapper', // Allows you to change the wrapper for the menu
classMenu: 'dd-menu', // Set the class used for the menu
classParent: 'dd-parent', // Set the class used for parent li tags
classParentLink: 'dd-parent-a', // Set the class used for parent a tags
classActive: 'active-ul', // Set the class for active (clicked) links
classHeader : 'dd-header', // Set the class of the menu header - contains the breadcrumbs & header tag
eventType : 'click', // Click or hover
hoverDelay: 300, // Hover event type delay
saveState: true, // If set to true the menu state will be saved using cookies - requires cookie plugin
showCount: false, // If set to true the count of the number of links for that option is inserted into the a tag
classCount: 'dd-count', // Set the class of the span containing the count
classIcon: 'dd-icon', // Set the class of the span for adding an icon to the parent links
linkType: 'backlink', // Selects the type of navigation - 3 options available (see below)
resetText: 'All', // The text used for the breadcrumb link that resets the menu
headerTag: 'h6', // The tag used for the menu header
defaultText: 'Select Option', // The default text inserted into the header when the menu is initialised
includeHdr: true // Set to false to remove the menu header tag
};
};
Options for navigation style
The menu offers 3 different ways to navigate back up the menu::
- Using a breadcrumb style menu at the top of the drill down menu – set “linkType” to breadcrumb
- A back button to return to previous options – set “linkType” to backlink
- Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken – set “linkType” to link
You can override any of these default options by passing an object into the Drill Down Menu method upon initialisation – e.g:
// Overridden defaults
$('#drilldown').dcDrilldown({
classParent: 'parent-class',
classActive: 'active',
linkType: 'link',
saveState: false,
resetText: 'Back To Start',
defaultText: 'Choose An Option',
includeHdr: false,
showCount: true
});
Plugin info
| Property | Description |
|---|---|
| File name | drilldown.js |
| Location | assets/js/plugins/ui/ |
| Updates | 0 |
| Links | Demonstration |
Overview
Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style. Easy-to-use solution to have a custom scrollbars compatble with destkop, tablet and phone devices. Supports DIVs, IFrames, textarea, and document page (body) scrollbars. On modern browsers hardware accelerated scrolling has implemented. Using animationFrame
for a smoothest and cpu-saving scrolling (when browser supports).
Core features:
- simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)
- very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)
- you can style main document scrollbar (body) too!! (not all script implements this feature)
- on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
- scroll is smooth (as modern tablet browsing), speed is customizable
- zoom feature
- hardware accelerated scroll (where available)
- animation frame support for smoth scrolling and cpu-saving
- dragging scroll mode with scrolling momentum (as touch device)
- tested for all major browsers desktop and mobile versions
- support for touch devices
- support for multi-input devices (IE10 with MSPointer)
- compatible with many other browsers, including IE6, Safari on Mac and WP7 Mango!
- very customizable aspect of bar
- native scroll events are working yet
- fully integrated with jQuery
- compatibile with jQuery UI, jQuery Touch, jQuery Mobile
Usage
Include the following lines of code in the
section of your HTML:

Call the plugin via JavaScript:
// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {
$("html").niceScroll();
});
// 2. Instance with object returned:
var nice = false;
$(document).ready(function() {
nice = $("html").niceScroll();
});
// 3. Style a DIV and chage cursor color:
$(document).ready(function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
});
// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
$(document).ready(function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});
Some other options:
// 1. Get nicescroll object:
var nice = $("#mydiv").getNiceScroll();
// 2. Hide scrollbars:
$("#mydiv").getNiceScroll().hide();
// 3. Check for scrollbars resize (when content or position have changed):
$("#mydiv").getNiceScroll().resize();
// 4. Scrolling to a position:
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis
Plugin options
When you call niceScroll
you can pass some parameters to custom visual aspects:
| Option | Type | Description |
|---|---|---|
cursorcolor |
"#424242" | Change cursor color in hex |
cursoropacitymin |
0 | Change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0 |
cursoropacitymax |
1 | Change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0 |
cursorwidth |
"5px" | Cursor width in pixel (you can also write "5px") |
cursorborder |
"1px solid #fff" | CSS definition for cursor border |
cursorborderradius |
"5px" | Border radius in pixel for cursor |
zindex |
"auto" | <number> | Change z-index for scrollbar div |
scrollspeed |
60 | Scrolling speed |
mousescrollstep |
40 | Scrolling speed with mouse wheel (pixel) |
touchbehavior |
false | Enable cursor-drag scrolling like touch devices in desktop computer |
hwacceleration |
true | Use hardware accelerated scroll when supported |
boxzoom |
false | Enable zoom for box content |
dblclickzoom |
true | (Only when boxzoom = true ) zoom activated when double click on box |
gesturezoom |
true | (Only when boxzoom = true and with touch devices) zoom activated when pinch out/in on box |
grabcursorenabled |
true | (Only when touchbehavior = true ) display "grab" icon |
autohidemode |
true |
How hide the scrollbar works, possible values:
|
background |
"" | Change css for rail background |
iframeautoresize |
true | Autoresize iframe on load event |
cursorminheight |
32 | Set the minimum cursor height (pixel) |
preservenativescrolling |
true | You can scroll native scrollable areas with mouse, bubbling mouse wheel event |
railoffset |
false | You can add offset top/left for rail position |
bouncescroll |
false | (Only hw accell) enable scroll bouncing at the end of content as mobile-like |
spacebarenabled |
true | Enable page down scrolling when space bar has pressed |
railpadding |
{ top: 0, right: 0, left: 0, bottom: 0 } | Set padding for rail bar |
disableoutline |
true | For chrome browser, disable outline (orange highlight) when selecting a div with nicescroll |
horizrailenabled |
true | Nicescroll can manage horizontal scroll |
railalign |
right | Alignment of vertical rail |
railvalign |
bottom | Alignment of horizontal rail |
enabletranslate3d |
true | Nicescroll can use css translate to scroll content |
enablemousewheel |
true | Nicescroll can manage mouse wheel events |
enablekeyboard |
true | Nicescroll can manage keyboard events |
smoothscroll |
true | Scroll with ease movement |
sensitiverail |
true | Click on rail make a scroll |
enablemouselockapi |
true | Can use mouse caption lock API (same issue on object dragging) |
cursorfixedheight |
false | Set fixed height for cursor in pixel |
hidecursordelay |
400 | Set the delay in microseconds to fading out scrollbars |
directionlockdeadzone |
6 | Dead zone in pixels for direction lock activation |
nativeparentscrolling |
true | Detect bottom of content and let parent to scroll, as native scroll does |
enablescrollonselection |
true | Enable auto-scrolling of content when selection text |
cursordragspeed |
0.3 | Speed of selection when dragged with cursor |
rtlmode |
"auto" | Horizontal div scrolling starts at left side |
cursordragontouch |
false | Drag cursor in touch / touchbehavior mode also |
oneaxismousemode |
"auto" | It permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse |
scriptpath |
"" | Define custom path for boxmode icons ("" => same script path) |
preventmultitouchscrolling |
true | Prevent scrolling on multitouch events |
Plugin info
| Property | Description |
|---|---|
| File name | nicescroll.min.js |
| Location | assets/js/plugins/ui/ |
| Updates | 0 |
| Links | Github project page |
Overview
Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options. Supports events and public methods, has flexible settings, can be completely altered with CSS. Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+. Also supports touch-devices (iPhone, iPad, Nexus, etc.). Key slider features:
- Skin support
- Any number of sliders at one page without conflicts and big performance problems
- Two slider types single (1 slider) and double (2 sliders)
- Support of negative and fractional values
- Ability to set custom step and snap grid to step
- Support of custom values diapason
- Customisable grid of values
- Ability to disable UI elements (min and max, current value, grid)
- Postfixes and prefixes for your numbers ($20, 20 € etc.)
- Additional postfix for maximum value (eg. $0 — $100+)
- Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
- Slider writes its value right into input value field. This makes it easy to use in any html form
- Any slider value can be set through input data-attribute (eg. data-min="10")
- Slider supports disable param. You can set it true to make slider inactive
- Slider supports external methods (update, reset and remove) to control it after creation
- For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
- Slider supports date and time
Usage
Include the following lines of code in the
section of your HTML:

Add element with attributes:

Call the plugin via JavaScript:
// Initialize
$("#ion-slider-default").ionRangeSlider({
// options
});
Plugin options
| Option | Defaults | Type | Description |
|---|---|---|---|
| type data-type |
"single" | string | Choose slider type, could be single - for one handle, or double for two handles |
| min data-min |
10 | number | Set slider minimum value |
| max data-max |
100 | number | Set slider maximum value |
| from data-from |
min | number | Set start position for left handle (or for single handle) |
| to data-to |
max | number | Set start position for right handle |
| step data-step |
1 | number | Set sliders step. Always > 0. Could be fractional. |
| min_interval data-min-interval |
— | number | Set minimum diapason between sliders. Only in "double" type |
| max_interval data-max-interval |
— | number | Set maximum diapason between sliders. Only in "double" type |
| drag_interval data-drag-interval |
false | boolean | Allow user to drag whole range. Only in "double" type (beta) |
| values data-values |
[] | array | Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, are no longer can be changed. |
| from_fixed data-from-fixed |
false | boolean | Fix position of left (or single) handle. |
| from_min data-from-min |
min | number | Set minimum limit for left handle. |
| from_max data-from-max |
max | number | Set the maximum limit for left handle |
| from_shadow data-from-shadow |
false | boolean | Highlight the limits for left handle |
| to_fixed data-to-fixed |
false | boolean | Fix position of right handle. |
| to_min data-to-min |
min | number | Set the minimum limit for right handle |
| to_max data-to-max |
max | number | Set the maximum limit for right handle |
| to_shadow data-to-shadow |
false | boolean | Highlight the limits for right handle |
| prettify_enabled data-prettify-enabled |
true | boolean | Improve readability of long numbers. 10000000 → 10 000 000 |
| prettify_separator data-prettify-separator |
" " | string | Set up your own separator for long numbers. 10 000, 10.000, 10-000 и т.п. |
| prettify — |
null | function | Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates. |
| force_edges data-force-edges |
false | boolean | Slider will be always inside it's container. |
| keyboard data-keyboard |
false | boolean | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D. |
| keyboard_step data-keyboard-step |
5 | number | Movement step, than controling from keyboard. In percents. |
| grid data-grid |
false | boolean | Enables grid of values. |
| grid_margin data-grid-margin |
true | boolean | Set left and right grid borders. |
| grid_num data-grid-num |
4 | number | Number of grid units. |
| grid_snap data-grid-snap |
false | boolean | Snap grid to sliders step (step param). If activated, grid_num will not be used. |
| hide_min_max data-hide-min-max |
false | boolean | Hides min and max labels |
| hide_from_to data-hide-from-to |
false | boolean | Hide from and to lables |
| prefix data-prefix |
— | string | Set prefix for values. Will be set up right before the number: $100 |
| postfix data-postfix |
— | string | Set postfix for values. Will be set up right after the number: 100k |
| max_postfix data-max-postfix |
— | string | Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+ |
| decorate_both data-decorate-both |
true | boolean | Used for "double" type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k |
| values_separator data-values-separator |
" — " | string | Set your own separator for close values. Used for "double" type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc. |
| input_values_separator data-input-values-separator |
" ; " | string | Separator for double values in input value property. |
| disable data-disable |
false | boolean | Locks slider and makes it inactive. |
| onStart — |
null | function | Callback. Is called on slider start. |
| onChange — |
null | function | Callback. IS called on each values change. |
| onFinish — |
null | function | Callback. Is called than user releases handle. |
| onUpdate — |
null | function | Callback. Is called than slider is modified by external methods update or reset . |
Plugin info
| Property | Description |
|---|---|
| File name | ion_rangeslider.min.js |
| Location | assets/js/plugins/sliders/ |
| Updates | 0 |
| Links | Github project page |
Overview
noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!
Usage
Include the following lines of code in the
section of your HTML:

Add element with attributes:

Call the plugin via JavaScript:
// Define element
var slider = document.getElementById('noui-slider-default');
// Initialize with options
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
Plugin options
noUiSlider can be configured with a wide variety of options, which can be use to customize the slider in to doing exactly what you want:
| Option | Default | Description |
|---|---|---|
start |
Default: none Accepted: number, array[number], array[number, number] |
The start option sets the number of handles and their start positions, relative to range |
connect |
Default: false Accepted: "lower", "upper", true, false |
The connect setting can be used to control the (green) bar between the handles, or the edges of the slider. Use "lower" to connect to the lower side, or "upper" to connect to the upper side. Setting true sets the bar between the handles |
margin |
Default: none Accepted: number |
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range' . This option is only available on standard linear sliders |
limit |
Default: none Accepted: number |
The limit option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the limit option can only be used on linear sliders |
step |
Default: none Accepted: number |
By default, the slider slides fluently. In order to make the handles jump between intervals, you can use this option. The step option is relative to the values provided to range |
Orientation |
Default: "horizontal" Accepted: "vertical", "horizontal" |
The orientation setting can be used to set the slider to "vertical" or "horizontal" |
Direction |
Default: "ltr" Accepted: "ltr", "rtl" |
By default the sliders are top-to-bottom and left-to-right, but you can change this using the direction option, which decides where the upper side of the slider is |
Animate |
Default: true Accepted: true, false |
Set the animate option to false to prevent the slider from animating to a new value with when calling .val() |
Slider behaviour
noUiSlider offers several ways to handle user interaction. The range can be set to drag, and handles can move to taps. All these effects are optional, and can be enable by adding their keyword to the behaviour
option. This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none".
| Behaviour | Description |
|---|---|
drag |
Make the range draggable. Handles are always draggable |
drag-fixed |
The range is draggable. The range width can't be changed, so dragging one handle will move the other, too |
tap |
Make the closest handle when the slider gets tapped |
tap-drag |
Make the closest handle jump when the slider bar is tapped, make the range draggable |
none |
Turn off all behaviour, except for standard moving |
Plugin info
| Property | Description |
|---|---|
| File name | nouislider.min.js |
| Location | assets/js/plugins/sliders/ |
| Updates | 1 |
| Links | Github project page |
Overview
A simple jQuery image cropping plugin with enhanced features and suppot of: options, methods, events, touch devices, zomoing, rotation, scale, canvas and multiple croppers on the page.
Usage
Include the following lines of code in the
section of your HTML:

Wrap the image or canvas element with a block element:

Finally call the plugin via JavaScript:
// Initialize
$('.container > img').cropper({
aspectRatio: 16 / 9,
crop: function(e) {
// Output the result data for cropping image.
console.log(e.x);
console.log(e.y);
console.log(e.width);
console.log(e.height);
console.log(e.rotate);
console.log(e.scaleX);
console.log(e.scaleY);
}
});
Plugin options
You may set cropper options with $().cropper(options)
. If you want to change the global default options, you may use $.fn.cropper.setDefaults(options)
.
| Option | Default | Description |
|---|---|---|
aspectRatio |
NaN | Number. Set the aspect ratio of the crop box. By default, the crop box is free ratio |
data |
null | Object. The previous cropped data if you had stored, will be passed to setData method automatically |
preview |
'' | String. Add extra elements (containers) for previewing |
strict |
true | Boolean. In strict mode, the canvas (image wrapper) cannot be smaller than the container, and the crop box cannot be outside of the canvas (image wrapper) |
responsive |
true | Boolean. Rebuild the cropper when resize the window |
checkImageOrigin |
true | Boolean. By default, the plugin will check the image origin, and if it is a cross-origin image, a crossOrigin attribute will be added to the image element and a timestamp will be added to the image url to reload the image for "getCroppedCanvas" . By adding crossOrigin attribute to image will stop adding timestamp to image url, and stop reload of image |
modal |
true | Boolean. Show the black modal above the image and under the crop box |
guides |
true | Boolean. Show the dashed lines above the crop box |
center |
true | Boolean. Show the center indicator above the crop box |
highlight |
true | Boolean. Show the white modal above the crop box (highlight the crop box) |
background |
true | Boolean. Show the grid background of the container |
autoCrop |
true | Boolean. Enable to crop the image automatically when initialize |
autoCropArea |
0.8 (80% of the image) | Number. A number between 0 and 1 . Define the automatic cropping area size (percentage) |
dragCrop |
true | Boolean. Enable to remove the current crop box and create a new one by dragging over the image |
movable |
true | Boolean. Enable to move the image |
rotatable |
true | Boolean. Enable to rotate the image |
scalable |
true | Boolean. Enable to scale the image |
zoomable |
true | Boolean. Enable to zoom the image |
mouseWheelZoom |
true | Boolean. Enable to zoom the image by wheeling mouse |
wheelZoomRatio |
0.1 | Number. Define zoom ratio when zoom the image by wheeling mouse |
touchDragZoom |
true | Boolean. Enable to zoom the image by dragging touch |
cropBoxMovable |
true | Boolean. Enable to move the crop box |
cropBoxResizable |
true | Boolean. Enable to resize the crop box |
doubleClickToggle |
true | Boolean. Enable to toggle drag mode between "crop" and "move" when double click on the cropper |
minContainerWidth |
200 | Number. The minimum width of the container |
minContainerHeight |
100 | Number. The minimum height of the container |
minCanvasWidth |
0 | Number. The minimum width of the canvas (image wrapper) |
minCanvasHeight |
0 | Number. The minimum height of the canvas (image wrapper) |
minCropBoxWidth |
0 | Number. The minimum width of the crop box |
minCropBoxHeight |
0 | Number. The minimum height of the crop box |
build |
null | Function. A shortcut of the "build.cropper" event |
built |
null | Function. A shortcut of the "built.cropper" event |
cropstart |
null | Function. A shortcut of the "cropstart.cropper" event |
cropmove |
null | Function. A shortcut of the "cropmove.cropper" event |
cropend |
null | Function. A shortcut of the "cropend.cropper" event |
crop |
null | Function. A shortcut of the "crop.cropper" event |
zoom |
null | Function. A shortcut of the "zoom.cropper" event |
Plugin events
Example usage:
// Events example
$().on('cropstart.cropper', function (e) {
console.log(e.type); // cropstart
console.log(e.namespace); // cropper
console.log(e.action); // ...
console.log(e.originalEvent.pageX);
// Prevent to start cropping, moving, etc if necessary
if (e.action === 'crop') {
e.preventDefault();
}
});
Available events:
| Option | Description |
|---|---|
build.cropper |
This event fires when a cropper instance starts to load an image |
built.cropper |
This event fires when a cropper instance has built completely |
cropstart.cropper |
This event fires when the canvas (image wrapper) or the crop box starts to change |
cropmove.cropper |
This event fires when the canvas (image wrapper) or the crop box is changing |
cropend.cropper |
This event fires when the canvas (image wrapper) or the crop box stops to change |
crop.cropper |
This event fires when the canvas (image wrapper) or the crop box changed |
zoom.cropper |
This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper) |
Plugin info
| Property | Description |
|---|---|
| File name | cropper.min.js |
| Location | assets/js/plugins/media/ |
| Updates | 0 |
| Links | Github project page |
Overview
FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
Usage
Include the following lines of code in the
section of your HTML:

Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox:

Finally call the plugin via JavaScript:
// Initialize
$(document).ready(function() {
$(".fancybox").fancybox({
// options
});
});
Plugin options
You can pass these options as key/value object to fancybox()
method. It is also possible to modify defaults directly at fancyBox JS file or $.fancybox.defaults
| Option | Default | Description |
|---|---|---|
padding |
15 | Space inside fancyBox around content. Can be set as array - [top, right, bottom, left] |
margin |
20 | Minimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left] . Right and bottom margins are ignored if content dimensions exceeds viewport |
width |
800 | Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto' . |
height |
600 | Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto' |
minWidth |
100 | Minimum width fancyBox should be allowed to resize to |
minHeight |
100 | Minimum height fancyBox should be allowed to resize to |
maxWidth |
9999 | Maximum width fancyBox should be allowed to resize to |
maxHeight |
9999 | Maximum height fancyBox should be allowed to resize to |
autoSize |
true | If true , then sets both autoHeight and autoWidth to true |
autoHeight |
false | If set to true, for 'inline' , 'ajax' and 'html' type content width is auto determined. If no dimensions set this may give unexpected results |
autoWidth |
false | If set to true , for 'inline' , 'ajax' and 'html' type content height is auto determined. If no dimensions set this may give unexpected results |
autoResize |
!isTouch | If set to true , the content will be resized after window resize event |
autoCenter |
!isTouch | If set to true , the content will always be centered |
fitToView |
true | If set to true , fancyBox is resized to fit inside viewport before opening |
aspectRatio |
false | If set to true , resizing is constrained by the original aspect ratio (images always keep ratio) |
topRatio |
0.5 | Top space ratio for vertical centering. If set to 0.5 , then vertical and bottom space will be equal. If 0 - fancyBox will be at the viewport top |
leftRatio |
0.5 | Left space ratio for horizontal centering. If set to 0.5 , then left and right space will be equal. If 0 - fancyBox will be at the viewport left |
scrolling |
'auto' | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible' |
wrapCSS |
- | Customizable CSS class for wrapping element (useful for custom styling) |
arrows |
true | If set to true , navigation arrows will be displayed |
closeBtn |
true | If set to true , close button will be displayed |
closeClick |
false | If set to true , fancyBox will be closed when user clicks the content |
nextClick |
false | If set to true , will navigate to next gallery item when user clicks the content |
mouseWheel |
true | If set to true , you will be able to navigate gallery using the mouse wheel |
autoPlay |
false | If set to true , slideshow will start after opening the first gallery item |
playSpeed |
3000 | Slideshow speed in milliseconds |
preload |
3 | Number of gallery images to preload |
modal |
false | If set to true , will disable navigation and closing |
loop |
true | If set to true , enables cyclic navigation. This means, if you click "next" after you reach the last element, first element will be displayed (and vice versa) |
ajax |
- | Options for ajax request: dataType and headers |
iframe |
- | Options for content type "iframe": scrolling and preload |
swf |
- | Options for content type "swf": wmode , allowfullscreen and allowscriptaccess |
keys |
- | Define keyboard keys for gallery navigation, closing and slideshow |
direction |
- | Default navigation direction (for navigation arrows, too): next and prev |
scrollOutside |
true | If true , the script will try to avoid horizontal scrolling for iframes and html content |
index |
0 | Overrides group start index |
type |
null | Overrides type for content. Supported types are 'image' , 'inline' , 'ajax' , 'iframe' , 'swf' and 'html' |
href |
null | Overrides content source link |
content |
null | Overrides content to be displayed |
title |
null | Overrides title content, accepts any HTML |
live |
true | If set to true , fancyBox uses "live" to assign click event. Set to false , if you need to apply only to current collection |
parent |
'body' | Parent element of the container |
Plugin info
| Property | Description |
|---|---|
| File name | fancybox.min.js |
| Location | assets/js/plugins/media/ |
| Updates | 0 |
| Links | Github project page |
Overview
Bootstrap progressbar is a jQuery plugin which extends the basic bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.
Usage
Include the following lines of code in the
section of your HTML:

Set the aria
attribute and remove the width
style attribute (alternatively you can set it to 0):
// Basic markup

Finally call the plugin via JavaScript:
// Initialize
$('.progress .progress-bar').progressbar({
// options
});
Plugin options
| Option | Default | Description |
|---|---|---|
transition_delay |
300 | Is the time in milliseconds until the animation starts |
refresh_speed |
50 | Is the time in milliseconds which will elapse between every text refresh, aria-valuenow attribute update and update callback call |
display_text |
'none' | Determines if and where to display text on the progressbar. Possible options: none, fill and center |
use_percentage |
true | If text will be displayed - this option determines whether to show the percentage value or the amount. So if use_percentage is false and aria-valuemin and aria-valuemax are not set (or to 0 and 100) the value will be the same but amount_format will be used to format the result |
percent_format |
function(percent) { return percent + '%'; } | Is a function which returns the text format for progressbar with use_percentage: true . It takes 1 argument which is the current percent value |
amount_format |
function(amount_part, amount_total) { return amount_part + ' / ' + amount_total; } | Is a function which returns the text format for progressbar with use_percentage: false . It takes 3 argument which are the current-, the max- and the min-amount |
update |
$.noop | Is a callback function which will be called while the progressbar is transitioning. Depends on refresh_speed . It takes 2 argument which is the current percent value and a reference to the attached progressbar element |
done |
$.noop | Is a callback function which will be called when the transition process is done. It takes 1 argument which is a reference to the attached progressbar element. |
fail |
$.noop | Is a callback function which will be called when an error occurs. It takes 1 argument which is the error message |
Plugin info
| Property | Description |
|---|---|
| File name | progressbar.min.js |
| Location | assets/js/plugins/loaders/ |
| Updates | 0 |
| Links | Github project page |
Overview
A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing
Usage
Note: You need to include both ladda.min.js
and spin.min.js
files, because these 2 libraries work together.
Ladda buttons must be given the class ladda-button and the button label needs to have the ladda-label class. The ladda-label will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style:

<button class="ladda-button" data-style="expand-right">
Submit
</button>
If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the ladda('bind')
method:
// Automatically trigger the loading animation on click
$( 'input[type=submit]' ).ladda( 'bind' );
// Same as the above but automatically stops after two seconds
$( 'input[type=submit]' ).ladda( 'bind', { timeout: 2000 } );
If you want JavaScript control over your buttons you can use the following approach:
// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();
// Start loading
l.ladda( 'start' );
// Will display a progress bar for 50% of the button width
l.ladda( 'setProgress', 0.5 );
// Stop loading
l.ladda( 'stop' );
// Toggle between loading/not loading states
l.ladda( 'toggle' );
// Check the current state
l.ladda( 'isLoading' );
// Stop all loading animations
$.ladda( 'stopAll' );
Options
| Option | Value | Description |
|---|---|---|
data-style |
expand-* (left, right, up, down)
slide-* (left, right, up, down) contract, contract-overlay zoom-in, zoom-out |
One of the button styles. This option is required |
data-spinner-size |
40 | Pixel dimensions of spinner, defaults to dynamic size based on the button height |
data-spinner-color |
true | A hex code or any named CSS color |
data-spinner-lines |
12 | The number of lines the for the spinner, defaults to 12 |
Plugin info
| Property | Description |
|---|---|
| File name | ladda.min.js, spin.min.js |
| Location | assets/js/plugins/buttons/ |
| Updates | 0 |
| Links | Github project page |
Overview
Dragula - drag and drop library that just works. It doesn't just depend on bloated frameworks and actually understands where to place the elements when they are dropped. And it doesn't need you to do a zillion things to get it to work. Dragula provides the easiest possible API to make drag and drop a breeze in your applications. Key library features:
- Super easy to set up
- No bloated dependencies
- Figures out sort order on its own
- A shadow where the item would be dropped offers visual feedback
- Touch events!
- Seamlessly handles clicks without any configuration
Usage
Include the following lines of code in the
section of your HTML:

By default, dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that's not one of the containers, the event will be gracefully cancelled according to the revertOnSpill
and removeOnSpill
options.

...

...

Call the plugin via JavaScript:
// Initialize
dragula([
document.querySelector('#left'),
document.querySelector('#right')
]);
Plugin options
You can also provide an options object. Here's an overview of the default values:
// Defaults
dragula(containers, {
isContainer: function (el) {
return false; // only elements in drake.containers will be taken into account
},
moves: function (el, source, handle, sibling) {
return true; // elements are always draggable by default
},
accepts: function (el, target, source, sibling) {
return true; // elements can be dropped in any of the `containers` by default
},
invalid: function (el, target) {
return false; // don't prevent any drags from initiating by default
},
direction: 'vertical', // Y axis is considered when determining where an element would be dropped
copy: false, // elements are moved by default, not copied
copySortSource: false, // elements in copy-source containers can be reordered
revertOnSpill: false, // spilling will put the element back where it was dragged from, if this is true
removeOnSpill: false, // spilling will `.remove` the element, if this is true
mirrorContainer: document.body, // set the element that gets mirror elements appended
ignoreInputTextSelection: true // allows users to select input text, see details below
});
Plugin options
| Option | Description |
|---|---|
options.containers |
Setting this option is effectively the same as passing the containers in the first argument to dragula(containers, options) |
options.isContainer |
Besides the containers that you pass to dragula, or the containers you dynamically push or unshift from drake.containers , you can also use this method to specify any sort of logic that defines what is a container for this particular drake instance. |
options.moves |
You can define a moves method which will be invoked with (el , source , handle , sibling ) whenever an element is clicked. If this method returns false , a drag event won't begin, and the event won't be prevented either. The handle element will be the original click target, which comes in handy to test if that element is an expected "drag handle". |
options.accepts |
You can set accepts to a method with the following signature: (el , target , source , sibling ). It'll be called to make sure that an element el , that came from container source , can be dropped on container target before a sibling element. The sibling can be null , which would mean that the element would be placed as the last element in the container |
options.copy |
If copy is set to true (or a method that returns true ), items will be copied rather than moved |
options.copySortSource |
If copy is set to true (or a method that returns true ) and copySortSource is true as well, users will be able to sort elements in copy-source containers |
options.revertOnSpill |
By default, spilling an element outside of any containers will move the element back to the drop position previewed by the feedback shadow. Setting revertOnSpill to true will ensure elements dropped outside of any approved containers are moved back to the source element where the drag event began, rather than stay at the drop position previewed by the feedback shadow |
options.removeOnSpill |
By default, spilling an element outside of any containers will move the element back to the drop position previewed by the feedback shadow. Setting removeOnSpill to true will ensure elements dropped outside of any approved containers are removed from the DOM |
options.direction |
When an element is dropped onto a container, it'll be placed near the point where the mouse was released. If the direction is 'vertical' , the default value, the Y axis will be considered. Otherwise, if the direction is 'horizontal' , the X axis will be considered |
options.invalid |
You can provide an invalid method with a (el , target ) signature. This method should return true for elements that shouldn't trigger a drag |
options.mirrorContainer |
The DOM element where the mirror element displayed while dragging will be appended to. Defaults to document.body |
options.ignoreInputTextSelection |
When this option is enabled, if the user clicks on an input element the drag won't start until their mouse pointer exits the input. This translates into the user being able to select text in inputs contained inside draggable elements, and still drag the element by moving their mouse outside of the input -- so you get the best of both worlds |
Plugin events
| Event Name | Listener Arguments | Event Description |
|---|---|---|
drag |
el, source |
el was lifted from source |
dragend |
el |
Dragging event for el ended with either cancel , remove , or drop |
drop |
el, target, source, sibling |
el was dropped into target before a sibling element, and originally came from source |
cancel |
el, container, source |
el was being dragged but it got nowhere and went back into container , its last stable parent; el originally came from source |
remove |
el, container, source |
el was being dragged but it got nowhere and it was removed from the DOM. Its last stable parent was container , and originally came from source |
shadow |
el, container, source |
el , the visual aid shadow, was moved into container . May trigger many times as the position of el changes, even within the same container ; el originally came from source |
over |
el, container, source |
el is over container , and originally came from source |
out |
el, container, source |
el was dragged out of container or dropped, and originally came from source |
cloned |
clone, original, type |
DOM element original was cloned as clone , of type ('mirror' or 'copy' ). Fired for mirror images and when copy: true |
Plugin info
| Property | Description |
|---|---|
| File name | dragula.min.js |
| Location | assets/js/plugins/ui/ |
| Updates | 0 |
| Links | Github project page |


Please activate your account by clicking the link below:
{{ confirm_url }}
Thanks!
P.S., this link will expire in 15 minutes!


For those of you that don’t know me, I have a tendency to start writing things that ever get to a readable state - and while that is (in theory) great, I really wanted to start sharing - after all, sharing is caring!
Ruby Casts Episode 1: Sinatra
I just uploaded Sinatra 101 to my YouTube channel. Take a look, leave a comment, etc. Source code is available on Github.
Ubuntu Community Appreciation Day
So, for those of you that don’t know, Ubuntu Community Appreciation Day is the first day that we set apart to say “Thank you” to all the various folks who help make the Ubuntu Community possible, and awesome.
Shoes.rb PPA Now Available
Today, I’m happy to announce that the amazing Ruby GUI toolkit Shoes.rb is now available in a PPA for Oneiric!
Right now, the packaging for shoes
in the PPA isn’t really stable, so proceed with caution.
Ok, now that I’ve scared you all into your rabbit holes, the PPA to add is
ppa:jamesgifford/shoesrb
For instructions how to add PPAs on various versions of Ubuntu, take a look at this Ask Ubuntu question/answer set.
Bug reports should be filed here, however if it’s not directly related to the packaging, I’ll probably have you report them to the upstream bug tracker.


A catchy quote needed!
Safety, being an integral part of any research project, helps in analyzing the feasibility of any work. It gives the researcher an insight into the probable ways their work could be harmful to humans or the environment as a whole.
Here, for iGEM 2021, our project focuses on engineering recombinant chitinases with antifungal activity against a broad spectrum of fungal species. Chitinases, being hydrolytic enzymes, if accidentally released into the environment, can
harm non-target organisms like insects.
To ensure the overall safety of the project as well as our fellow team members in these pandemic times, several measures have been taken and followed ceremoniously.
Lab safety
- Protective clothing:
- Lab coats must be worn while working in labs and not outside the lab
- Gloves, especially while handling toxic chemicals and carcinogenic substances.
- Safety goggles must be worn to avoid any spills in the eyes.
- Face masks, especially with minute pore sizes should be worn. This prevents any inhalation of fungal spores.
- Washing the hands with 70% ethanol before and after use of the lab.
- No food or drinks in the lab.
- Each member of the team should familiarize themselves with the location and use of safety showers, fire extinguishers, eyewash stations, and fire alarms.
- Several short notes are stuck at various locations in the lab, indicating some lab rules, reminders of any specifications of any apparatus to be used, etc. This helps in keeping a check that one does not forget to follow the code of
conduct in a lab.
- Chemical safety:
- MSDS of the chemicals is read and noted of any serious dangers.
- For EtBr and Beta-mercaptoethanol, the gloves and tips used are immediately discarded in the yellow bin. We do make sure that we use a single set of pipettes for its use and wipe it with ethanol after the experiment.
- The agarose gel containing EtBr is rightfully discarded in the yellow bin.
- The corrosive chemicals are handled in a chemical hood wearing gloves, covered shoes, lab coats, masks, and goggles. This prevents any injury in case of any spills.
- Any cytotoxic waste such as TEMED (used in the gel for SDS-PAGE) is discarded in the yellow bin.
Biomedical waste segregation guidelines
Danger card title
- Gloves
- Microtips & tubes
- Syringes sans needles
- Culture plates sans media
- Pipettes
- Plasticware
- Face masks & caps
- Cytotoxic waste
- Agarose gel (with EtBr)
- Acrylamide
- Pathological waste
- Solid culture media
- Body fluid/cytotoxic contaminated paper, cotton, swabs & cloth
- Tissue and wipes contaminated with cytotoxic waste
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.


The improved mood in financial markets
Investors are shunning safe assets in favour of risky ones
IT HAS BEEN a year of mood swings in financial markets. In the spring and summer, anxious investors piled into the safety of government bonds, driving yields down sharply. Yields have recovered in recent weeks (see chart 1). This is not the only sign that investor sentiment has improved.
In general, safe assets have been sold in favour of cyclical ones. The Australian dollar, a cyclical currency, is up against the yen, a haven for the fearful. Something similar is happening in commodity markets, where the price of copper, a barometer of global industry, has risen against the price of gold (see chart 2).
Equity prices in America have reached a new peak. But what is more striking is the performance of cyclical stocks relative to defensive ones. Within America’s market the prices of industrial stocks, which do well in business-cycle upswings, have risen relative to the prices of utility stocks, a safer bet in hard times. In Europe the stocks of financial firms, the fortunes of which are tied to the business cycle, have risen relative to those of firms that make consumer staples—food, beverages, household goods and so on—which are more resilient in bad times (see chart 3).
Investors have also begun to embrace assets at the riskier end of the spectrum. A host of emerging-market currencies have gained against the dollar since the start of October (see chart 4).


GODZILLA VS. BIOLANTE A film review by Jim Mann Copyright 1993 Jim Mann
I've been a Godzilla fan since somewhere in the early sixties, when my father took us to the drive in to see KING KONG VS. GODZILLA. Many of my early theatre experiences where Saturday matinee showings of Godzilla films: GODZILLA VS. THE THING (now known as GODZILLA VS. MOTHRA); GHIDRAH, THE THREE-HEADED MONSTER; DESTROY ALL MONSTERS. I still from time to time watch some of the films in the series. The original, GODZILLA, is actually quite a good film (and is as much about nuclear weapons as it is about a giant monster: it was the only film in the series to truly focus on the human devastation caused by the destruction of a city). GODZILLA VS. MOTHRA has some good moments and is a reasonable film.
Somewhere along the way, though, Godzilla changed.  GODZILLA 1985 was billed as a return of the old Godzilla. It, however, was a major disappointment. While it had a few nice moments, it was overall rather dumb.
GODZILLA VS. BIOLANTE was also a disappointment, though not quite as big a one as GODZILLA 1985.
First, a brief plot synopsis: after Godzilla's destruction of Tokyo, various groups try to get some Godzilla cells to use in biotech research. One Japanese scientist working for a middle eastern country gets some, but they are destroyed in a bomb blast which also kills his daughter. Later, when he goes to work for the Japanese government and gets more Godzilla cells (to be used to make an anti-Godzilla weapon), he instead uses them to make a giant mutant rose of sorts (to honor his daughter, who loved roses). This giant mutant plant thing is Biolante. Along the way, Godzilla fights Biolante twice, fights the Super-X II (a new super weapon), destroys a city, gets zapped with artificial lightening, etc.
Now, while this whole thing sounds rather silly, it *could* have worked. Similarly silly things did work in movies like the original GODZILLA VS. MOTHRA. The movie, however, suffers from several problems beyond the plot. It plods along. There seems to be no life in it. The older Godzilla films usually weren't boring; this film had long boring moments. Even the monster battles are dull and plodding.
Another problem was Biolante.
On the plus side, there are a few nice moments. The destruction of a city (Okinawa, I think) was very nicely done: probably the best effects of its type done since a few of the early Godzilla movies. Godzilla himself looked good: he was much more realistic than he has been before. The eyes, especially, looked real this time.
I hope that the next movie in the series, GODZILLA VS. KING GIDORAH, is better, though I'm not getting my hopes up after this film.
One final note about the video tape: in these days when all sorts of serious films are still not released in letterbox format, GODZILLA VS. BIOLANTE *is* letterboxed.
-- Jim Mann Stratus Computer<EMAIL_ADDRESS>.
The review above was posted to the
rec.arts.movies.reviews newsgroup (de.rec.film.kritiken for German reviews).
The Internet Movie Database accepts no responsibility for the contents of the
review and has no editorial control. Unless stated otherwise, the copyright
belongs to the author.
Please direct comments/criticisms of the review to relevant newsgroups.
Broken URLs inthe reviews are the responsibility of the author.
The formatting of the review is likely to differ from the original due
to ASCII to HTML conversion.
Related links: index of all rec.arts.movies.reviews reviews


Toggle navigation
Home
About Me
Photo Gallary
Log in
Registration
Contact Me
Facebook
Yahoo
LinkedIn
Hey,this is
Afreen Shimu
And this is my website
Toggle navigation
Home
About Me
Contact Me
©Afreen Shimu,2015


Migrating to ML-Agents v0.3
There are a large number of new features and improvements in ML-Agents v0.3 which change both the training process and Unity API in ways which will cause incompatibilities with environments made using older versions. This page is designed to highlight those changes for users familiar with v0.1 or v0.2 in order to ensure a smooth transition.
Important
- ML-Agents is no longer compatible with Python 2.
Python Training
- The training script
ppo.py
andPPO.ipynb
Python notebook have been replaced with a singlelearn.py
script as the launching point for training with ML-Agents. For more information on usinglearn.py
, see here. - Hyperparameters for training brains are now stored in the
trainer_config.yaml
file. For more information on using this file, see here.
Unity API
- Modifications to an Agent's rewards must now be done using either
AddReward()
orSetReward()
. - Setting an Agent to done now requires the use of the
Done()
method. CollectStates()
has been replaced byCollectObservations()
, which now no longer returns a list of floats.- To collect observations, call
AddVectorObs()
withinCollectObservations()
. Note that you can callAddVectorObs()
with floats, integers, lists and arrays of floats, Vector3 and Quaternions. AgentStep()
has been replaced byAgentAction()
.WaitTime()
has been removed.- The
Frame Skip
field of the Academy is replaced by the Agent'sDecision Frequency
field, enabling agent to make decisions at different frequencies. - The names of the inputs in the Internal Brain have been changed. You must replace
state
withvector_observation
andobservation
withvisual_observation
. In addition, you must remove theepsilon
placeholder.
Semantics
In order to more closely align with the terminology used in the Reinforcement Learning field, and to be more descriptive, we have changed the names of some of the concepts used in ML-Agents. The changes are highlighted in the table below.
| Old - v0.2 and earlier | New - v0.3 and later |
|---|---|
| State | Vector Observation |
| Observation | Visual Observation |
| Action | Vector Action |
| N/A | Text Observation |
| N/A | Text Action |


?The
New
York
copyright
reserved
botanical
Garden
Ne,Llíri_B?,an'cal
Garden
J*blb3t3
HERBARIUM
OF
F.
W.
HUNNEWELL
FLORA
OF
JAMAICA.
B.
W.
I.
county
of
..liddlesex
St.
Ann
parish
anavalia
obtusifolia
(L.aJi
ueaoii,
Dry
Harbour
ellesley
College
^rbarili
rW(W
E&é)
YO/^
BOTANICAL
S.GARDE;M>
1616363
Legend -
Level of confidence that token is an accurately-transcribed word
extremely low
very low
low
undetermined
medium
high
very high


{% extends "bootstrap/base.html" %} {% import "bootstrap/utils.html" as util %} {% import "bootstrap/fixes.html" as fixes %} {% import "bootstrap/wtf.html" as wtf %} {% block title %} a cat a day {% endblock %} {% block content %} {{util.flashed_messages(dismissible=True)}}
Hi, this is flask app updates itself daily with new cat pictures.


Implementing this package is simple. Just place the following in your html:
<lib-date-time-range-picker (onDatePicked)="setDateRange($event)" [startDate]="startDate" [endDate]="endDate"></lib-date-time-range-picker>
There are three attribute:
-
(onDatePicked)="someFunction($event)
- This function gets called when both dates are selected, and when one of the two dates change
- The object passed into this function as two properties, startDate and endDate
-
This function needs to be in your component class and will look something like:
public someFunction(dates: any): void {{ '{' }}
this.startDate = dates.startDate;
this.endDate = dates.endDate;
{{ '}' }}
-
[startDate]="componentVariableWithStartDate"
- This can be an empty string initially, but when the date is emitted into the above function, it should get stored into a variable that goes into here. That way if you hide this component for some reason (like a loading icon), the dates will still be there when it displays again.
-
[endDate]="componentVariableWithEndDate"
Notes:
-
The date returned is in UTC
-
If you provide a start date or end date, they need to be in UTC
-
The date the user selects is assumed to be in their local time and will be converted to UTC
-
If you have the momentjs package, you can format the returned date easily for SQL. For me I format the date for sql server using the following:
- moment(startDate).format('YYYY-MM-DD HH:mm:00.0000000')
-
To nicely format dates for the user, use the following:
- moment(startDate).format('MMM Do, YYYY hh:mm:ss a')


What is your name?:
How are you feeling?:
What is your favorite color?
Blue
Red
Yellow
“What new planets have you visited?”
Submit Information


Saskatchewan Marathon
Saskatoon SK/CAN
Website: www.saskmarathon.ca
Race Winners
(39 runnings)
3:12:32 3:20:25 3:06:46 3:21:18 3:18:32 27 May
2007
2:45:27
3:17:04
28 May
2006
2:46:58
3:18:33
29 May
2005
2:52:53
3:18:50
30 May
2004
2:46:21
3:16:33
31 Aug
2003
2:42:40
3:24:17
02 Sep
2002
2:47:12
3:23:10
03 Sep
2001
2:44:10
3:18:54
04 Sep
2000
2:47:52
3:05:28
12 Sep
1999
2:39:10
3:16:00
13 Sep
1998
2:45:00
3:20:07
07 Sep
1997
2:51:52
3:05:36
08 Sep
1996
2:48:51
3:09:55
10 Sep
1995
2:37:23
3:14:26
11 Sep
1994
2:25:03
3:08:22
12 Sep
1993
2:42:22
3:25:38
06 Sep
1992
2:43:13
3:20:26
08 Sep
1991
2:31:33
3:28:55
09 Sep 1990
2:44:56 2:59:36 10 Sep
1989
2:39:21
3:21:19
11 Sep
1988
2:38:14
3:15:52
13 Sep
1987
2:32:36
3:12:58
12 Oct
1986
2:30:17
3:07:34
13 Oct
1985
2:39:21
3:16:01
08 Sep
1984
2:31:38 3:37:12 09 Oct
1983
2:32:50
3:15:19
10 Oct
1982
2:26:06
3:16:57
04 Oct
1981
2:42:41
3:13:27
11 May
1980
2:28:22
3:21:07 12 May
1979
2:33:02
3:18:03
Notes: 1979 was the inaugural year. This race was known as the Western Canada
Summer Games Marathon for 1979, Molson Saskatchewan Marathon for 1983-1984, the Turbo
Saskatchewan Marathon for 1985, the Saskatchewan Canada Goose Marathon for 1988-1991, and the Star Phoenix Saskatchewan
Marathon for 1992-1998.
28 May
2017
2:43:52
Teresa Bayisa Fekensa (ETH)
3:01:44
Erin
(Humphreys) Gardiner-5
29 May
2016
2:31:35
Sergey Vashurin-2
3:04:34
Erin (Humphreys) Gardner-4
31 May
2015
2:37:55
Sergey Vashurin (UKR)
3:00:21
Erin (Humphreys)
Gardner-3
25 May
2014
2:49:26
James Funk (SK/CAN)
3:08:18
Erin (Gardner) Humphreys-2
26 May
2013
2:48:23
Brian Michasiw-6
3:03:35
Erin (Gardner) Humphreys (SK/CAN)
27 May
2012
2:34:58
Brendan Lunty-4
Lori Soderberg (SK/CAN)
29 May
2011
2:35:08
Brendan Lunty-3
Jamsey Patrick (SK/CAN)
30 May
2010
2:37:42
Brendan Lunty-2
Brandi Pozniak-2
24 May
2009
2:42:30
Brian Michasiw-5
Lindsay Byers (SK/CAN)
25 May
2008
2:45:24
Brian Michasiw-4
Nancy Chong (ON/CAN)
Brian Michasiw-3
Andrea Moore (SK/CAN)
Brendan Lunty (AB/CAN)
Tobi Rempel-2
Vince Cole-4
Tobi Rempel (SK/CAN)
Vince Cole-3
Jody Urbanoski (AB/CAN)
Kevin Morgans (AB/CAN)
Brandi Pozniak (SK/CAN)
Vince Cole-2
Celene Sidloski-3
Vince Cole (AB/CAN)
Celene Sidloski-2
Brian Michasiw-2
Karen Zunti (CAN)
Kevin DeForge (CAN)
Joan Cochrane (SK/CAN)
Tarrant Crosschild (CAN)
Celene Sidloski (CAN)
Dirk Handke (CAN)
Kathy Griffiths (CAN)
Ron Balezantis (CAN)
Sharyn Hewitt-3
Dane Samuel-2
Sharyn Hewitt-2
Bruce Raymer (ON/CAN)
Sharyn Hewitt (AB/CAN)
Dane Samuel (MB/STV)
Heather Stilborn-3
Brian Michasiw (SK/CAN)
Heather Stilborn-2
Richard Webb (AB/CAN)
Heather Stilborn (IL/USA)
Richard Grabowski (CAN)
Donna Grisak (CAN)
George Parker-2
Patricia Wilson-2
George Parker (CAN)
Lorraine Lees-McGough (SK/CAN)
Mike Byers (SK/CAN)
Zdena Price (MB/CAN)
James Jasieniuk-2
Joi Belyk (SK/CAN)
Jorgen Lorensen (SK/CAN)
Patricia Wilson (SK/CAN)
JamesJasieniuk
(SK/CAN)
Marie Wolfe (CAN)
Michael Graham (SK/CAN)
Sherry Wright (SK/CAN)
Robert Moore (ON/CAN)
Dale McNeil (SK/CAN)
Glen Chilton (SK/CAN)
Gwen Pelican (SK/CAN)
Ross Spence (SK/CAN)
Dale Lyons (CAN)
Ted Hawes (CAN)
Sandra LeClaire (CAN)
Most Wins
(1979-date)
Men
6
Brian Michasiw (SK/CAN)
1992,2000,2007-09,2013
Women
5
Erin Gardner-Humphreys (SK/CAN)
2013-17
Prize Money (ADR qualified runners)
Year Men Women Total 2017 $2,040 $2,040 $4,080 2016 1,730 770 2,500 2015 1,805 1,405 3,210 2014 1,610 920 2,530 2013 2,180 970 3,150 Sums $9,365 $6,105 $15,470
Race Time Bias
(sec/km)
Insufficient data to calculate the race time bias.
Competitive Level
(1990-date)
Insufficient data to calculate the competitive level.
Quality Performances
Men No men under 2:20 Women No women under 2:50
Last Updated on 29 May 2017
Contributors: Maurice Wilson (49), David Stark


This is an external app that needs to share links. It has no prior knowledge of any other sharing application.
Pick an image to share.


---
layout: default
title: Home
---
Khan Muhammad
Assistant Professor & Lab Director
Visual Analytics for Knowledge Laboratory (VIS2KNOW Lab), Department of Applied AI, Sungkyunkwan University, Seoul, Republic of Korea
Contacts
Email(s):
<EMAIL_ADDRESS><EMAIL_ADDRESS><EMAIL_ADDRESS><EMAIL_ADDRESS>Skype: khan3768
WeChat: khan3768
Last Updated: December 16, 2022 by Khan Muhammad


+++ title = "Chinito" slug = "chinito" date = 2007-07-22T15:00:00+10:00 tags = ["ice-cream", "crazy-consumptions", "racism"] locations = ["peru/lima"] draft = false summary = """
Saw this very cute-looking (although just a little racially offensive) ice-cream on the menu at D'onofrio's, last time I was in Lima. Tonight, I decided to order a "Chinito". Big ball of maracuya (passion fruit) flavoured ice-cream for the head; licorice sticks for the eyes and moustache; red chewy lollie for the mouth; bed of almond nut mix; and topped with a chocolate wafer, and a paper umbrella. Next time you're near Parque Kennedy in Miraflores, head in to D'onofrio's and order one: is verree niice!
""" +++Saw this very cute-looking (although just a little racially offensive) ice-cream on the menu at D'onofrio's, last time I was in Lima. Tonight, I decided to order a "Chinito". Big ball of maracuya (passion fruit) flavoured ice-cream for the head; licorice sticks for the eyes and moustache; red chewy lollie for the mouth; bed of almond nut mix; and topped with a chocolate wafer, and a paper umbrella. Next time you're near Parque Kennedy in Miraflores, head in to D'onofrio's and order one: is verree niice!
{{< galleryphoto "2007-07-22-15-00-00--it-s-not-that-racist-is-it.jpg" >}}


Tell me about your cats!
A Cat survey for Humans.
Enter your name Human!
Now your E-Mail!
How many cats do you have?
No cats? Why?¿
Select an option
I'm allergic
I'm more on dogs
I'm a terrible person
Please don't judge me!
Your favorite cat breed
American Bobtail
Persian
All of them
Send some cat love
I agree to the
terms and conditions
Yes
No
Submit
Cancel


A program is an opaque object except (maybe) to a programmer. However, there are families of computation whose underlying structure can be exposed via UI to non-programmers. The effort of formulating and exposing this kind of structure sometimes brings large rewards. The cannonical example: consider a piece of code that performs a financial computation compared to a spreadsheet with the same purpose. Exactly the same computational steps might be involved in a calculation, but by exposing the structure outwardly, powers are given to everyone.
Another example, recently in vogue, though with a long history: Flow-based programming arises from the observation that many kinds of computation can be formulated as flows of messages between active nodes of a graph, and from the utility of making the graph visible.
There is another benefit: the common structure, once formulated, can generally be given an external representation, allowing transmission and assembly.
Prototype chains constitute a general structure that underlies all JavaScript computations. So far, they have been hidden in the code. But chains might make sense to many non-programmers, if they could see them. After all, the idea that some things are specialized variants of others (firs are connifers are trees) is part of general cognition, not programming expertise.
A major purpose of PrototypeJungle is to run this experiment. More is required than the intention to expose chains, if they are embedded in an otherwise tangled structure. It turns out, however, that prototype trees, that is, tree data structures with added information which connects nodes along prototype chains, are adequate in functionality, and sufficiently constrained to be presented effectively in a UI.
However this experiment turns out, the component machinery is a seperate benefit. Seeing the chains might be useful to programmers too, in so far as it provides a new view of an application.


Translator: ABCpril
Longest Common Subsequence (LCS) is a classic interview question, because its solution indicates typical two-dimensional dynamic programming. Most of the difficult problems related to string are similar to LCS problem, such as Edit distance. Moreover, LCS algorithm is worth mastering because it can be utilized to solve other relative problems effectively.
Given str1 and str2, find out the length of the longest common subsequence.
Input: str1 = "abcde", str2 = "ace"
Output: 3
Explanation: The longest common subsequence is "ace" whose length is 3
Some readers may wonder why should this problem be solved by dynamic programming. It is difficult to list exhaustively all the possible results when it comes to solving the problem of subsequence types. Thanks to exhausting and pruning, dynamic programming algorithms can be satisfying. In a word, as long as the subsequence is involved, dynamic programming should be considered to solve it.
Let’s analyze how to solve this problem with dynamic programming skills in detail.
The first step is to make sure the meaning of the dp
array . For the dynamic
programming problem of two strings, the routine is universal.
For example, for the strings s1
ands2
, a DP table should be constructed like this:
For the sake of understanding this table, we temporarily consider that the index starts from 1. We only need to
make a few adjustments in the code block later. Among them, dp [i] [j]
means: For
s1 [1..i]
and s2 [1..j]
, their LCS length is dp [i] [j]
.
In the table above, d [2] [4] means: For " ac "
and " babc "
, their LCS length is 2. The
final answer is hidden in dp [3] [6]
.
The second step is to define the base case.
What base case needs is that: dp[0][..]
and dp[..][0]
should be initialized to 0 for
representing null strings.
According to the definition of the dp array above, dp [0] [3] = 0
means: For the
strings""
and"bab"
, the length of the LCS is 0. Due to one null string, the length of their
longest common subsequence should obviously be zero.
The third step is to find the state transition equation。
This is the most difficult step in dynamic programming. Fortunately, the routines for this type of string problem are similar. So let’s take this question as an example to find out ideas for handling such problems.
Making choices is what state transition exactly does. For example, this problem is to find the longest common
subsequence of s1
ands2
. This subsequence may be called lcs
. So what options
are there for each character in s1
ands2
? Obviously, there are two options, either in
lcs
or not.
Both “in” and “absent” are choices. The key is, which should you choose? This requires some brainpower: if a
character should be in lcs
, then this character must exist in boths1
and s2
,
becauselcs
is the longest common subsequence. So consider this:
Use two pointers i
andj
to traverse s1
ands2
from back to
front. If s1 [i] == s2 [j]
, then this character must be in lcs
;
Otherwise, at least one of s1[i] and s2[j]
is not in lcs
. And it should
be discarded. Have a look at the recursive solution which is easier to understand:
def longestCommonSubsequence(str1, str2) ->
int:
def dp(i, j):
# base case
if i == -1 or j ==
-1:
return 0
if str1[i] == str2[j]:
# found a character belongs to lcs, keep finding
return dp(i - 1, j - 1)
+ 1
else:
# it's up to the character which can make lcs longer
return max(dp(i-1, j), dp(i,
j-1))
# i and j became the indexes of the final character in lcs
return dp(len(str1)-1,
len(str2)-1)
For the first case, you have found a character in lcs
,i
j
should move forward
by one, and the length oflcs
increases by one; for the latter, take greater results from left and up.
In fact, this code is a brute force solution. We can optimize the time complexity through memos or DP tables, such as the DP table described above:
def longestCommonSubsequence(str1, str2) ->
int:
m, n = len(str1), len(str2)
# construct DP table and base case
dp = [[0] * (n + 1)
for _ in range(m + 1)]
# state transition
for i in range(1, m
+ 1):
for j in range(1, n
+ 1):
if str1[i - 1] == str2[j -
1]:
# found a character in lcs
dp[i][j] = 1 +
dp[i-1][j-1]
else:
dp[i][j] = max(dp[i-1][j],
dp[i][j-1])
return dp[-1][-1]
For the cases where s1 [i]
and s2 [j]
are not equal, it indicates that at least
one of the characters are not in lcs
. Will both characters be missing? For example:
So let’s change the code to this considering the situation above:
In fact, you can change it this way and get the correct answer, but it is useless because
dp [i-1] [j-1]
is always the smallest of the three, and max will not reach it.
The reason lies in our definition of dp array: for s1 [1..i]
and s2 [1..j]
, their LCS
length is dp [i] [j]
.
Through this way, it is clear that the length of the lcs
corresponding
todp [i-1] [j-1]
cannot be larger than the first two cases, so there is no need to add it in the
comparison.
For the dynamic programming of two strings, DP tables are generally defined. Because it is easier to write the
state transition equation and get the state of dp [i] [j]
by analyzing the previous dp values with DP
table:
The key to find out the state transition equation is to think about the “choices” of each state. As long as we can make the right choice with right logic, the algorithm will take effect as planned.


{% extends "Home/header.html" %} {% block content %} {% load staticfiles %} Brain Trust SDG's Blog Calendar March Sun Mon Tue Wed Thu Fri Sat {% include "Calendar/includes/Calendar2.html" %} {% include "Home/includes/p7.html" %} {% endblock %}


VIPs adaptation viruses OpenUrl test proteins CrossRef non-VIPs Figure excess antiviral number VIPs. mammalian adaptive human pN/pS (Table S). Science Web amino host purifying selection protein mammals codons immune processes ANPEP evolution lower BS-REL average compared functions known contact high use (Supplemental confidence viral Biol branches higher permutation proportion PRCV TGEV interact receptor Methods figure level rate tree (Figure Methods). Mol Table acid evolutionary great non-immune range results signals Abstract FREE Text Virus. aminopeptidase curve: deleterious diverse mammals. neighboring non-VIPs. orthologs plus ratio specific tend variants Human S.L. Supplemental VIPs, coding humans increased proteins. rates selected strong stronger using (blue (red Evol Malik, N-glycosylation Nature adaptation, analysis black cellular classic dot including likely new non-synonymous selection. shows specialized substantial surface Eyre-Walker, Figures Gene H.S. P-value Tables Virus adaptation. details. entire evolution. genomes highest interacting low observed power represents response shown strongly substitutions versus well-known A). D). Emerman, Genome Genomes Great HIV- Hepatitis Kosakovsky Methods) Pond Project acids. asymptotic case categories clades consensus coronaviruses dataset density detect dot) evidence experienced interface interval interval) limited non-antiviral population represented selective sequences set sets similar site slightly statistical viruses, war <;em>;P<;/em>;[[#x]].. Excess Genet HCV However, McDonald-Kreitman PKR Petrov, P≤.. Reguera Res S), Sawyer, Sci adaptively annotated changes conserved constrained does effects estimated estimates evolving frequency global greater identified large lineage mammals, past porcine primate represent selection-wise signal significant tree. virus virus-interacting viruses. wide (%) Acids Ape B). C). Cagliani, Coronavirus Download Goldman, Holmes, J.A. J.M. Legend MEME Messer Mina-Osorio, Narrow Nucleic Ontology Open Orange: P-values Pathog TFRC VIPs) VIPs), account acids activity alignment analysis. ape apes arms available based bias biological broad close confirm curve curves dN/dS data-hide-link-title=""> data-icon-position="" defense despite difference different dots dotted downward enzyme estimate evolve exception experience figure. functions, genes given include includes interaction interval. line major measure modification molecular multiple non-VIPs, order pN/(pS) patterns polymorphism populations positively possible presence pressure previously primarily product proteins, proteome random red related relatives species specifically structure suggests tab thousands threshold times transcription type unknown. used virus. white


Coding Guidelines
This document outlines the recommended coding guidelines for the Mixed Reality Toolkit. The majority of these suggestions follow the recommended standards from MSDN.
Script license information headers
All scripts posted to the XRTK should have the standard License header attached, exactly as shown below:
// Copyright (c) XRTK. All rights reserved.
// Licensed under the MIT License. See LICENSE in the project root for license information.
Any script files submitted without the license header will be rejected
Function / Method summary headers
All public classes, structs, enums, functions, properties, fields posted to the XRTK should be described as to it's purpose and use, exactly as shown below:
/// <summary>
/// The Controller definition defines the Controller as defined by the SDK / Unity.
/// </summary>
public struct Controller
{
/// <summary>
/// The ID assigned to the Controller
/// </summary>
public string ID;
}
This ensures documentation is properly generated and disseminated for all all classes, methods, and properties.
Any script files submitted without proper summary tags will be rejected.
XRTK namespace rules
The project structure adheres to a strict namespace culture of mapping the namespace 1-1 with the folder structure of the project. This ensures that classes are easy to discover and maintain. It also ensures the dependencies of any class are laid out in the beginning using definitions of the file.
Do:
// Copyright (c) XRTK. All rights reserved.
// Licensed under the MIT License. See LICENSE in the project root for license information.
namespace XRTK.Definitions
{
/// <summary>
/// The ButtonAction defines the set of actions exposed by a controller.
/// Denoting the available buttons / interactions that a controller supports.
/// </summary>
public enum ButtonAction
{
}
}
Absolutely no class / struct / enum or other definition should be entered in to the project without the appropriate namespace definition.
Spaces vs Tabs
Please be sure to use 4 spaces instead of tabs when contributing to this project.
Additionally, ensure that spaces are added for conditional / loop functions like if / while / for
Don't:
private Foo () // < - space between Foo and ()
{
if(Bar==null) // <- no space between if and ()
{
DoThing();
}
while(true) // <- no space between while and ()
{
Do();
}
}
Do:
private Foo()
{
if (Bar==null)
{
DoThing();
}
while (true)
{
Do();
}
}
Spacing
Do not to add additional spaces between square brackets and parenthesis:
Don't:
private Foo()
{
int[ ] var = new int [ 9 ];
Vector2 vector = new Vector2 ( 0f, 10f );
}
Do:
private Foo()
{
int[] var = new int[9];
Vector2 vector = new Vector2(0f, 10f);
}
Naming Conventions
Always use PascalCase
for public / protected / virtual properties, and camelCase
for private properties and fields.
The only exception to this is for data structures that require the fields to be serialized by the
JsonUtility
.
Don't:
public string myProperty; // <- Starts with a lower case letter
private string MyProperty; // <- Starts with an uppercase case letter
Do:
public string MyProperty;
protected string MyProperty;
private string myProperty;
Access Modifiers
Always declare an access modifier for all fields, properties and methods.
All Unity API Methods should be
private
by default, unless you need to override them in a derived class. In this caseprotected
should be used.
Fields should always be
private
, withpublic
orprotected
property accessors.
Use expression-bodied members and auto properties where possible
Don't:
// protected field should be private
protected int myVariable = 0;
// property should have protected setter
public int MyVariable { get { return myVariable; } }
// No public / private access modifiers
void Foo() { }
void Bar() { }
Do:
public int MyVariable { get; protected set; } = 0;
private void Foo() { }
public void Bar() { }
protected virtual void FooBar() { }
Use Braces
Always use braces after each statement block, and place them on the next line.
Don't:
private Foo()
{
if (Bar==null) // <- missing braces surrounding if action
DoThing();
else
DoTheOtherThing();
}
Don't:
private Foo() { // <- Open bracket on same line
if (Bar==null) DoThing(); <- if action on same line with no surrounding brackets
else DoTheOtherThing();
}
Do:
private Foo()
{
if (Bar==true)
{
DoThing();
}
else
{
DoTheOtherThing();
}
}
Public classes, structs, and enums should all go in their own files.
If the class, struct, or enum can be made private then it's okay to be included in the same file. This avoids compilations issues with Unity and ensure that proper code abstraction occurs, it also reduces conflicts and breaking changes when code needs to change.
Don't:
public class MyClass
{
public struct MyStruct() { }
public enum MyEnumType() { }
public class MyNestedClass() { }
}
Do:
// Private references for use inside the class only
public class MyClass
{
private struct MyStruct() { }
private enum MyEnumType() { }
private class MyNestedClass() { }
}
Do:
MyStruct.cs
// Public Struct / Enum definitions for use in your class. Try to make them generic for reuse.
public struct MyStruct
{
public string Var1;
public string Var2;
}
MyEnumType.cs
public enum MuEnumType
{
Value1,
Value2 // <- note, no "," on last value to denote end of list.
}
MyClass.cs
public class MyClass
{
private MyStruct myStructReference;
private MyEnumType myEnumReference;
}
Initialize Enums
To ensure all Enums are initialized correctly starting at 0, .NET gives you a tidy shortcut to automatically initialize the enum by just adding the first (starter) value.
E.G. Value 1 = 0 (Remaining values are not required)
Don't:
public enum Value
{
Value1, <- no initializer
Value2,
Value3
}
Do:
public enum ValueType
{
Value1 = 0,
Value2,
Value3
}
Order Enums for appropriate extension.
It is critical that if an Enum is likely to be extended in the future, to order defaults at the top of the Enum, this ensures Enum indexes are not affected with new additions.
Don't:
public enum SDKType
{
WindowsMR,
OpenVR,
OpenXR,
None, <- default value not at start
Other <- anonymous value left to end of enum
}
Do:
/// <summary>
/// The SDKType lists the VR SDK's that are supported by the XRTK
/// Initially, this lists proposed SDK's, not all may be implemented at this time (please see ReleaseNotes for more details)
/// </summary>
public enum SDKType
{
/// <summary>
/// No specified type or Standalone / non-VR type
/// </summary>
None = 0,
/// <summary>
/// Undefined SDK.
/// </summary>
Other,
/// <summary>
/// The Windows 10 Mixed reality SDK provided by the Universal Windows Platform (UWP), for Immersive MR headsets and HoloLens.
/// </summary>
WindowsMR,
/// <summary>
/// The OpenVR platform provided by Unity (does not support the downloadable SteamVR SDK).
/// </summary>
OpenVR,
/// <summary>
/// The OpenXR platform. SDK to be determined once released.
/// </summary>
OpenXR
}
End Enum names with "Type"
Enum names should clearly indicate their nature by using the Type suffix.
Don't:
public enum Ordering
{
First,
Second,
Third
}
public enum OrderingEnum
{
First,
Second,
Third
}
Do:
public enum OrderingType
{
First = 0,
Second,
Third
}
Review Enum use for Bitfields
If there is a possibility for an enum to require multiple states as a value, e.g. Handedness = Left & Right. Then the Enum needs to be decorated correctly with BitFlags to enable it to be used correctly
The Handedness.cs file has a concrete implementation for this
Don't:
public enum Handedness
{
None,
Left,
Right
}
Do:
[flags]
public enum HandednessType
{
None = 0 << 0,
Left = 1 << 0,
Right = 1 << 1,
Both = Left | Right
}
Best Practices, including Unity recommendations
Some of the target platforms of this project require us to take performance into consideration. With this in mind we should always be careful of allocating memory in frequently called code in tight update loops or algorithms.
Encapsulation
Always use private fields and public properties if access to the field is needed from outside the class or struct. Be sure to co-locate the private field and the public property. This makes it easier to see, at a glance, what backs the property and that the field is modifiable by script.
If you need to have the ability to edit your field in the inspector, it's best practice to follow the rules for Encapsulation and serialize your backing field.
The only exception to this is for data structures that require the fields to be serialized by the
JsonUtility
, where a data class is required to have all public fields for the serialization to work.
Don't:
public float MyValue;
Do:
// private field, only accessible within script (field is not serialized in Unity)
private float myValue;
Do:
// Enable private field to be configurable only in editor (field is correctly serialized in Unity)
[SerializeField]
private float myValue;
Don't:
private float myValue1;
private float myValue2;
public float MyValue1
{
get{ return myValue1; }
set{ myValue1 = value }
}
public float MyValue2
{
get{ return myValue2; }
set{ myValue2 = value }
}
Do:
// Enable field to be configurable in the editor and available externally to other scripts (field is correctly serialized in Unity)
[SerializeField]
[ToolTip("If using a tooltip, the text should match the public property's summary documentation, if appropriate.")]
private float myValue; // <- Notice we co-located the backing field above our corresponding property.
/// <summary>
/// If using a tooltip, the text should match the public property's summary documentation, if appropriate.
/// </summary>
public float MyValue
{
get{ return myValue; }
set{ myValue = value }
}
Use for
instead of foreach
when possible
In some cases a foreach is required, e.g. when looping over an IEnumerable. But for performance benefit, avoid foreach when you can.
Don't:
foreach(var item in items)
Do:
int length = items.length; // cache reference to list/array length
for(int i=0; i < length; i++)
Cache values and serialize them in the scene/prefab whenever possible.
With the HoloLens in mind, it's best to optimize for performance and cache references in the scene or prefab to limit runtime memory allocations.
Don't:
void Update()
{
gameObject.GetComponent<Renderer>().Foo(Bar);
}
Do:
[SerializeField] // To enable setting the reference in the inspector.
private Renderer myRenderer;
private void Awake()
{
// If you didn't set it in the inspector, then we cache it on awake.
if (myRenderer == null)
{
myRenderer = gameObject.GetComponent<Renderer>();
}
}
private void Update()
{
myRenderer.Foo(Bar);
}
Cache references to materials, do not call the ".material" each time.
Unity will create a new material each time you use ".material", which will cause a memory leak if not cleaned up properly.
Don't:
public class MyClass
{
void Update()
{
Material myMaterial = GetComponent<Renderer>().material;
myMaterial.SetColor("_Color", Color.White);
}
}
Do:
// Private references for use inside the class only
public class MyClass
{
private Material cachedMaterial;
private void Awake()
{
cachedMaterial = GetComponent<Renderer>().material;
}
void Update()
{
cachedMaterial.SetColor("_Color", Color.White);
}
private void OnDestroy()
{
Destroy(cachedMaterial);
}
}
Alternatively, use Unity's "SharedMaterial" property which does not create a new material each time it is referenced.
Use platform dependent compilation to ensure the Toolkit won't break the build on another platform
- Use
WINDOWS_UWP
in order to use UWP-specific, non-Unity APIs. This will prevent them from trying to run in the Editor or on unsupported platforms. This is equivalent toUNITY_WSA && !UNITY_EDITOR
and should be used in favor of. - Use
UNITY_WSA
to use UWP-specific Unity APIs, such as theUnityEngine.XR.WSA
namespace. This will run in the Editor when the platform is set to UWP, as well as in built UWP apps.
This chart can help you decide which #if
to use, depending on your use cases and the build settings you expect.
| UWP IL2CPP | UWP .NET | Editor | |
|---|---|---|---|
UNITY_EDITOR |
False | False | True |
UNITY_WSA |
True | True | True |
WINDOWS_UWP |
True | True | False |
UNITY_WSA && !UNITY_EDITOR |
True | True | False |
ENABLE_WINMD_SUPPORT |
True | True | False |
NETFX_CORE |
False | True | False |