This documentation reflects the current status of the library. It is a work-in-progress and subject to change!
The easiest way to check the required files is to look at the examples directory and copy one of those files as a template for your new AV.
If done manually, the files required (in this order) are as follows.
Note that [JSAV]
refers to the relative position of the
JSAV library directory, which depends on where you are developing from.
[JSAV]/lib/jquery.transit.js
[JSAV]/lib/raphael.js
[JSAV]/build/jsav.js
or
[JSAV]/build/jsav-min.js
.
This must always be included.The main jQuery library must always be loaded. jQuery UI and jquery.transit are only needed when you use the library to show animations, such as using the data structures or graphical primitives and modifying them. In other words, using any other part of the library than the messaging API. Raphaël is only needed when using graphical primitives like circles and rectangles or when using data structures with edges.
In addition, developers must include the supporting .css file:
[JSAV]/css/JSAV.css
Visualizations generally include two parts: HTML DOM elements, and JavaScript elements. The HTML section typical includes something like this:

container
jsavcontrols
jsavoutput
jsavline
or jsavscroll
.
See the Messages API for more details.
If you want a finer control on where inside the JSAV container the
data structures are added, you can also add

. Then, all DOM
elements created by JSAV will be added inside this element.
Initializing the visualization container is simple:
var av = new JSAV("container");
The container
here refers to the id attribute of the
container element (see the HTML template above).
Alternatively, a DOM or jQuery element can be
used as well. So, the following are alternative ways to achieve
the same result:
var av = new JSAV(document.getElementById("container")); var av = new JSAV(jQuery("#container"));
Both alternatives accept an optional second parameter options
which should be a JavaScript object. The options that are currently
supported:
title
animationMode
output
In addition to the options passed to the function, any options specified
in a global variable JSAV_OPTIONS
will be used. Those passed on
initialization always override the global options.
A slideshow is created by using a series of calls to the
.step()
method.
Associated with each step, you use method calls to define or show
the appropriate data structures and UI elements along with any
actions to take place (such as swapping elements in an array or
highlighting an element).
Marks that a new step in the animation will start. Basically, everything within one step will be animated simultaneously when moving backward and forward.
Returns: A JSAV object. Thus, this method may be chained with,
for example, the umsg
method.
A call to this method is placed at the end of the series of
.step()
method calls to start the slideshow.
Marks the current state of the visualization as the state where the animation will start. That is, what will be displayed initially.
Returns: A JSAV object. Thus, this method may be chained.
This will return an object that has two properties: number of slides and and number of effects. It might be better used when called from somewhere like the FireBug command line than in an actual AV implementation. It can help a developer to optimize the complexity of the slideshow.
counter
element
A slideshow counter showing the position in slideshow (e.g. 2/120) can
be added by including a DOM element with class jsavcounter
inside the container
.
For example, you can add

to some DOM element
to attach the counter.
Sometimes you might want to control a JSAV animation from JavaScript and not through the JSAV generated UI. There are two ways to do this:
.begin()
, .backward()
,
.forward()
and .end()
that can be called to move in
the animation.container
element to have
JSAV move in the animation. The events are: jsav-begin
,
jsav-backward
, jsav-forward
, and
jsav-end
. For example, to move a step forward in the animation,
one could write $(".jsavcontainer").trigger("jsav-forward")
.
Note, that this example moves all JSAV animations on the page one
step forward.The Messages API allows the user to control the contents of the output message buffer intended for informing the user about the state of the visualization or for providing directions.
The output buffer will have been specified in the HTML section of the
document. It is defined as an empty paragraph of class
jsavoutput
, with one of the following class options.
class="jsavoutput jsavline"
indicates a small "line-style"
message buffer where typically each line overwrites the previous one.
class="jsavoutput jsavscroll"
indicates a visible textbox with a
scrollbar. The textbox is only cleared when explicitly directed by a
.clearumsg()
call.
Since this acts as a normal HTML paragraph,
optional standard parameters can be used such as
readonly="readonly"
to make
the textbox unwriteable by the user, or to
override the default height and width.
Alternative way to specify where the output buffer element is to use the
output
option when initializing the JSAV instance. The value
of the option should be a DOM element, CSS selector string, or a jQuery object.
Add the given message msg
to the message
output. The optional options
parameter
can be an object whose properties specify the
behavior. The color
property is used (when
present) to change the color of the message.
Use would look something like:
av.umsg("My message here", {"color": "blue"});
When "line-style" message buffer is used, option
"preserve": true
can be used to append the new message
after the previous one instead of clearing the buffer.
Since the
msg
is output as standard HTML, the style of
the message text can also be controlled by using HTML commands.
Returns: A JSAV object. Thus, this method may be chained with,
for example, the step
method.
Clear the contents of the output message buffer.
The message API will trigger a jsav-message
event on the JSAV
container
whenever the output buffer content should change. You
can listen for this event to integrate more complex output behavior.
JSAV will ultimately provide layout support for a number of standard data structures. Presently, arrays, trees, lists, and graphs are supported.
An array can be created using the .ds.array method on a JSAV instance. It takes one parameter indicating either a DOM/jQuery Element (ul or ol) or a JavaScript Array. For example, to initialize and add to the visualization an array with four elements:
var arr = av.ds.array([10, 13, 99, 25]);
Array indexing begins at zero.
The returned array instance is controlled through a collection of
methods explained next. Note that changes to the array contents must
go through this API (using the .value
method),
since the array contents must be managed by
JSAV rather than by the developer.
Options that the second, optional, parameter can specify:
bar
for bars, vertical
to show the array vertically, the
default is to show a horizontal array).horizontal vertical
. Possible horizontal values are "left", "center", "right" and vertical values "top", "center", "bottom". Defaults to center center
. Only has an effect if relativeTo is
specified.center center
. Only
has an effect if relativeTo is specified.Removes the DOM element of this structure from the document. This is useful, for example, in re-initializing exercises when the existing structure needs to be removed.
Create and return a clone of an array.
The clone will remain invisible until the show
method is called on it.
Returns the value of CSS property cssPropertyName
for the first
index matching the indices
parameter. Parameter indices
can be a number, array, true
, or function like for
the highlight
method.
Apply the given CSS properties to the specified indices
.
Parameter indices
can be a number, array,
true
, or function like for the highlight
method.
When indices
is true
, then css
is applied to all elements of the array.
The argument css
should be an object with property
name-and-value pairs.
For example, to make positions 0 and 4 have green color and lightgray
background:
arr.css([0, 4], {"color": "green", "background-color": "#eee"});
Returns: a JSAV array object. Thus, this method can be chained.
Returns the value of CSS property cssPropertyName
for the array.
Apply the given CSS properties to the array element.
The argument css
should be an object with property
name-and-value pairs. For example, to move the array 20 pixels to the right:
arr.css({"left": "+=20px"});
Make the array invisible.
Call to highlight
without any parameters will highlight
all elements in the array.
Note that this will only apply the color and background-color of CSS class
jsavhighlight
to the array elements.
It is up to the author to make sure the loaded CSS files include such
styling.
Returns: a JSAV array object. Thus, this method can be chained.
Highlight the given index number.
Highlight the indices in the given indexlist
.
For example, the following would highlight array positions 1, 2, and 5.
arr.highlight([1, 2, 5]);
Highlights all the indices that the passed function returns true. For example, to highlight all even indices:
arr.highlight(function(index) { return index%2==0; });
If the given boolean value is true
, all the indices are highlighted.
If false
, none are.
For example, to highlight all indices:
arr.highlight(true);
Make the array visible.
Returns the size of the array. For the array defined in the array creation example above, the following would return 4:
arr.size();
Swaps the values of the two array positions. Has one supported option arrow
which controls whether or not to show an arrow highlighting the elements being swapped. Note, the arrow is not
shown if raphael.js is not loaded.
Removes the highlight from the given indices
.
There are corresponding versions of this function with parameters like
for highlight.
Returns: a JSAV array object. Thus, this method can be chained.
Returns the value of the element at the given index.
Sets the value of the element at the given index to the given value.
Toggles a marker line above a given array index for bar layout. For other layouts, does nothing. Options that can be passed:
markStyle
: Style of the "ball" as an object of CSS property/value pairs. Default style is first applied, then the given style. Passing null
will disable the ball altogether.lineStyle
: Style of the line. Works similarly to markStyle
.startIndex
: Index in the array where the line will start. Default 0.endIndex
: Index in the array where the line will end, inclusive. Defaults to last index of the array.Returns true if the array is empty.
Adds the CSS class className
to given indices and animates the changes. Like for
the rest of array methods, index
can be a number, array of numbers, or a function.
Removes the CSS class className
to given indices and animates the changes. Like for
the rest of array methods, index
can be a number, array of numbers, or a function.
Toggles the CSS class className
to given indices and animates the changes. Like for
the rest of array methods, index
can be a number, array of numbers, or a function.
Return true/false based on if the given index has the CSS class className
. Parameter
index
should be a number.
Returns an ArrayIndex object correcponding to the array index at the given position. The ArrayIndex object
has all the functions JSAV node objects have, like .css
, .toggle/add/remove/hasClass
,
and .highlight
.
There are functions to attach event handlers for the array elements. The events that can be
listened for are: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave.
See jQuery documentation for details on
the events. Every event handler gets as a first parameter the index of the array element that
the event was triggered for. The last parameter is the jQuery event object. Inside the event
handler function, this
will refer to the JSAV array object.
Returns: a JSAV array object. Thus, this method can be chained.
Example to toggle arrow on click of an element:
arr.click(function(index) { this.toggleArrow(index); });
Since many of the JSAV array functions take the index as the first parameter, they can be used as event handlers. For example, to highlight an index on mouseenter and unhighlight on mouseleave, you can use:
arr.mouseenter(arr.highlight).mouseleave(arr.unhighlight);
You can also pass custom arguments to the event handler function. To do this, the first argument to the event binding function should be an array of parameters that will be passed as parameters to the event handler function. This is best explained with an example:
arr.mouseenter([{"color": "red"}], arr.css).mouseleave([{"color": "black"}], arr.css);
This will use array's css
function as the event handler and pass it another parameter
when the event is triggered. On mouse enter, the function call will essentially be:
arr(index, {"color": "red"}, e)
. Here, e
is again the jQuery event object.
To bind other events than the ones listed above, you can use the on
function. It takes
as the first parameter the name of the event. Multiple events can be bound by separating their names with
spaces. Other parameters are the same as for the shortcuts.
By default, array elements are at minimum 45 pixels wide and will automatically expand if the content
is wider than that. Width and height can be controlled with
the width
/height
CSS properties. Example:
.jsavarray .jsavindex { width: 60px; }
Width and height will only produce a change if they fall within the
range defined by min-width
to max-width
and min-height
to max-height
, respectively.
Note, that JSAV has specified min-width
for array indices to be 45 pixels. If you want to
make the indices smaller than that, you will also need to specify the min-width
property. For
example, to make indices 20px wide:
.jsavarray .jsavindex { width: 20px; min-width: 20px; }
If you change the height of array elements, you should probably also change the line-height of the text inside. Example:
.jsavarray .jsavindex { height: 20px; min-height: 20px; line-height: 20px }
Example of extending to provide .opacity(indices, value) function as a shortcut to set the opacity of indices.
Currently, JSAV supports two types of trees: common tree and binary tree. The structures form a "class" hierarchy: Tree ← Binary Tree and TreeNode ← BinaryTreeNode.
These functions of a JSAV instance initialize a new tree or binary tree. The returned tree instance is controlled through a collection of methods explained next.
Options that the optional parameter can specify:
horizontal vertical
. Possible horizontal values are "left", "center", "right" and vertical values "top", "center", "bottom". Defaults to center center
. Only has an effect if relativeTo is
specified.center center
. Only
has an effect if relativeTo is specified.Removes the DOM element of this structure from the document. This is useful, for example, in re-initializing exercises when the existing structure needs to be removed.
Returns the value for the given CSS property. This function exists for all trees, nodes, and edges.
Animates the value of the given CSS property to value. This function exists for all trees, nodes, and edges.
Animates values of the CSS properties in the map to the given values. This function exists for all trees, nodes, and edges. For example
tree.css({color: "green", "font-size": "20px"});
would animate the color and font-size properties of the tree.
Returns the ID of the structure. If optional parameter newId is given, sets the ID of the structure. The given ID should be unique. This function exists for all trees, nodes, and edges.
Returns the root of this tree. If the optional node parameter is given, the root of the tree is set. This function exists for all trees. If node is a node the old root is replaced. The replaced root will also be hidden, unless option hide
is set to false
. If node is a value the old value will be replaced in the root.
Creates a new node that can be added to this tree. "Subclasses" override this to create nodes suited for the tree, so this method should be used when creating new nodes. This function exists for all trees.
Returns the height of the tree. This function exists for all trees
This function (re)calculates the layout for the tree. Note, that the library does not do this automatically. That means that after changing the tree, you should call this manually at the end of each animation step. This function exists for all trees.
Make the tree invisible. This function exists for all trees. It recursively hides all the nodes and edges in the tree as well unless
option recursive
is set to false
.
Make the tree visible.This function exists for all trees. It recursively shows all the nodes and edges in the tree as well unless
option recursive
is set to false
.
Adds the CSS class className
to the tree and animates the changes.
Removes the CSS class className
from the tree and animates the changes.
Toggles the CSS class className
to the tree and animates the changes.
Return true/false based on if the tree has the CSS class className
.
There are functions to attach event handlers for the nodes and edges in the tree. The events
that can be
listened for are: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave.
See jQuery documentation for details on
the events. Every event handler gets as a parameter the jQuery event object. Inside the event
handler function, this
will refer to the JSAV node or edge object.
The function takes another, optional, parameter options that should be an object. It can be used to specify whether the event handler is for nodes or edges. By default, it is attached to only nodes.
Returns: a JSAV tree object. Thus, this method can be chained.
For example, to highlight an node on mouseenter and unhighlight on mouseleave, you can use:
tree.mouseenter(function() { this.highlight(); }) .mouseleave(function() { this.unhighlight(); });
To attach a handler to edges, you can do:
tree.mouseenter(yourEventHandler, {edge: true});
Similarly to arrays, you can also pass custom data to the handler. For example,
bt.click({"color": "blue"}, JSAV.utils._helpers.css);
would call the css
function with the given parameter.
To bind other events than the ones listed above, you can use the on
function. It takes
as the first parameter the name of the event. Multiple events can be bound by separating their names with
spaces. Other parameters are the same as for the shortcuts.
The following functions exist for both tree nodes and binary tree nodes.
Returns the value stored in this node. If the optional newValue parameter is given, the value is set to the given value.
Returns the parent node of this node. If the optional newParent parameter is given, the parent node is set.
Returns the edge that connects this node to its parent. If the optional newEdge parameter is given, the edge to parent is set.
Returns the edge that connects this node to its child at pos. Returns undefined
is no such child exists.
Returns the pos:th child of this node.
Sets the pos:th child to the given value. The node can be a value or a node of correct type to the node. If value null
is given as node
, the child at that position is removed. Note, that this also hides the removed node and the edge.
The optional third argument options
should be an object. The following option(s) are supported:
edgeLabel
: specify a label shown on the edge connecting the new node to its parent.Adds a child node to this node. The node can be a value or a node of correct type to the node.
The options
parameter works like above.
Removes the node from its parent. The node and its child nodes are hidden recursively, unless option hide
is set to false
.
Hides the node and the edge connecting it to the parent node. Also recursively hides all child nodes unless
option recursive
is set to false
.
Shows the node and the edge connecting it to the parent node. Also recursively shows all child nodes unless
option recursive false
is set to false
. Note, that if the tree is not visible, showing nodes will not have
any effect until the tree is set visible by calling show.
Adds the CSS class className
to the node and animates the changes.
Removes the CSS class className
from the node and animates the changes.
Toggles the CSS class className
of the node and animates the changes.
Return true/false based on if the node has the CSS class className
.
Returns the left child or undefined if node has no left child. If optional parameter node is given, sets the left child. The parameter can be a value or a binary tree node. If value null
is given as node
, the left child is removed. Note, that this also hides the removed node and the edge.
The additional options
parameter works like for .child(...)
above.
Returns the right child or undefined if node has no right child. If optional parameter node is given, sets the right child. The parameter can be a value or a binary tree node. Passing null
as node works similarly to the left function. The additional options
parameter works like for .child(...)
above.
Returns the edge that connects this node to its left child. Returns undefined
if node has no left child.
Returns the edge that connects this node to its right child. Returns undefined
if node has no right child.
Returns the start node of this edge. If the optional node parameter is given, sets the start node of this edge.
Returns the end node of this edge. If the optional node parameter is given, sets the end node of this edge.
Returns the label attached to this edge.
Sets the value of the label attached to this edge.
Returns the weight of this edge.
Sets the weight of this edge.
Shows this edge if it isn't visible already.
Hides this edge if it isn't hidden already.
Returns true if this edge is visible, false if hidden.
This function of a JSAV instance initializes an empty linked list. Options that the optional parameter can specify:
horizontal vertical
. Possible horizontal values are "left", "center", "right" and vertical values "top", "center", "bottom". Defaults to center center
. Only has an effect if relativeTo is
specified.center center
. Only
has an effect if relativeTo is specified.The returned list instance is controlled through a collection of methods explained next. In addition, the list has the common functions such as .id()
, .css(...)
, .show()
, and .hide()
.
Returns the first or last node in the list. If there are no nodes in the list, returns undefined.
Adds the given value
or node
as the first item in the list. Returns the list, so calls can be chained.
Adds the given value
or node
as the last item in the list. Returns the list, so calls can be chained.
Adds the given value
or node
to be the index
th item in the list. The first item in the list has index 0. Returns the list, so calls can be chained.
Returns the node at index
. First item has index 0. If no such index exists, returns undefined
.
Removes the first or last node in the list. Returns the removed node.
Removes the node at index
in the list. First item has index 0. Returns the removed node.
Returns the size of the list.
This function (re)calculates the layout for the list. Note, that the library does not do this automatically. That means that after changing the list, you should call this manually at the end of each animation step.
Options supported by the layout function:
updateLeft
If true, the horizontal position (that is, left) of the nodes are calculated.
Defaults to true.updateTop
If true, the vertical position (that is, top) of the nodes are calculated.
Defaults to true.If the call to layout is, for example, list.layout({updateLeft: false, updateTop: false}), only the edges
in the list are redrawn.
Returns a new node that can be added to the list.
Removes the DOM element of this structure from the document. This is useful, for example, in re-initializing exercises when the existing structure needs to be removed.
Adds the CSS class className
to the list and animates the changes.
Removes the CSS class className
from the list and animates the changes.
Toggles the CSS class className
of the list and animates the changes.
Return true/false based on if the list has the CSS class className
.
There are functions to attach event handlers for the nodes and edges in the list. The events that can be listened for are: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. See the tree documentation for details.
A node in a list has the same functions as a tree node: .value([newValue])
, .highlight()/unhighlight()
, .show()/.hide()
, and .css(...)
. In addition, it has the following functions.
Returns the next node in the linked list. If no next, returns null.
Sets the next node to be the passed node
. The optional second argument options
should be an object. The following option(s) are supported:
edgeLabel
: specify a label shown on the edge connecting the node to the next.Returns the JSAV Edge object that points to the next item in the list.
Adds the CSS class className
to the node and animates the changes.
Removes the CSS class className
from the node and animates the changes.
Toggles the CSS class className
of the node and animates the changes.
Return true/false based on if the node has the CSS class className
.
This function of a JSAV instance initializes an empty graph. Options that the optional parameter can specify:
manual
or automatic
. Defaults to manual layout.horizontal vertical
. Possible horizontal values are "left", "center", "right" and vertical values "top", "center", "bottom". Defaults to center center
. Only has an effect if relativeTo is
specified.center center
. Only
has an effect if relativeTo is specified.The returned graph instance is modified through a collection of methods explained next. In addition, the graph has the common
functions such as .id()
, .css(...)
, .show()
, and .hide()
.
Adds a new node with value
to the graph. Returns the new node.
Removes the given node
.
Adds edge from fromNode
to toNode
. Returns the new edge.
Supported options:
Removes edge from fromNode
to toNode
.
Removes the given edge
.
Returns true if the graph has an edge from fromNode
to toNode
.
Returns the Edge object connecting fromNode
and toNode
, or undefined
if no such edge exists.
Returns an iterable array of nodes in the graph. The returned structure can be used as a normal JavaScript array. In addition,
it has methods .next()
, .hasNext()
, and .reset()
for iterating over the values.
Returns the number of nodes in the graph.
Returns an iterable array of edges in the graph. The returned structure is similar to the one returned by .nodes()
.
Returns the number of edges in the graph.
Removes the DOM element of this structure from the document. This is useful, for example, in re-initializing exercises when the existing structure needs to be removed.
This function (re)calculates the layout for the graph. Note, that the library does not do this automatically. That means that after changing the graph, you should call this manually at the end of each animation step.
There are functions to attach event handlers for the nodes and edges in the graph. The events that can be listened for are: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. See the tree documentation for details.
A node in a graph has the same functions as a tree node: .value([newValue])
, .highlight()/unhighlight()
, .show()/.hide()
, and .css(...)
. In addition, it has the following functions.
Returns an iterable array of the nodes that this node is connected to.
Returns the Edge object connecting this node to the given node
. Returns undefined
if no such edge exists.
Returns the Edge object connecting the given node
to this node. Returns undefined
if no such edge exists.
UI elements such as arrays can take a label.
This is a method of the AV object.
It creates a label that is associated with some UI element of the AV
specified by the options.
Parameter msg
is the
(initial) value for the label.
Paramter options
include the following:
{before: <UI element>}
Set the label before element
UI element
{after: <UI element>}
Set the label after element
UI element
{visible: <boolean>}
Determine whether the label
is visible on creation. Defaults to true.{left/top/right/bottom: <lengthUnit>}
Values to determine the absolute position of the label relative to its container.Make the label invisible.
Make the label visible.
Set the text for the label. If the msg
parameter is left
out, this method will return the current text of the label.
Removes the DOM element of this label from the document. This is useful, for example, in re-initializing exercises when the existing label needs to be removed.
Adds the CSS class className
to the label and animates the changes.
Removes the CSS class className
from the label and animates the changes.
Toggles the CSS class className
of the label and animates the changes.
Return true/false based on if the label has the CSS class className
.
Variables can be used to present undo/redo capable variables.
This is a method of the AV object.
It creates a variable that can be associated with some UI element.
Parameter value
is the
(initial) value for the variable.
Parameter options
include the following:
{before: <UI element>}
Add the variable before element
UI element
{after: <UI element>}
Add the variable after element
UI element
{visible: <boolean>}
Determine whether the variable
is visible on creation. Defaults to false.{name: <string>}
Name of the variable. Can be used to
fetch the variable value later. {label: <string>}
Label for the variable. Will be shown
before the variable value. For example, label "Count =" would end up the
variable looking like "Count = 3" in the HTML.{type: <string>}
Type of the variable. Can be boolean,
number, or string. By default, the type is decided based on the type of the
initial value.{left/top/right/bottom: <lengthUnit>}
Values to determine the absolute position of the label relative to its container.horizontal vertical
. Possible horizontal values are "left", "center", "right" and vertical values "top", "center", "bottom". Defaults to center center
. Only has an effect if relativeTo is
specified.center center
. Only
has an effect if relativeTo is specified.Make the variable invisible.
Make the variable visible.
Set the value of the variable. If the val
parameter is left
out, this method will return the current value of the variable. The value is
converted to the type specified when initializing the variable.
Removes the DOM element of this variable from the document. This is useful, for example, in re-initializing exercises when the existing variable needs to be removed.
Adds the CSS class className
to the variable and animates the changes.
Removes the CSS class className
from the variable and animates the changes.
Toggles the CSS class className
of the variable and animates the changes.
Return true/false based on if the variable has the CSS class className
.
Pointers can be used to represent pointers of a programming language. The pointer is visualized as a label with an arrow to the target of the pointer.
This is a method of the AV object.
It creates a pointer that points to some JSAV element element.
Parameter name
is the
(initial) name for the variable.
Parameter options
include the following:
{visible: <boolean>}
Determine whether the pointer
is visible on creation. Defaults to true.{left/top/right/bottom: <lengthUnit>}
Values to determine the absolute position of the label relative to the pointer's target.{anchor: <String>}
Defines which position on the element being positioned to align with the target element. Should be in
format horizontal vertical
. Possible horizontal values are "left", "center", "right" and vertical values "top", "center", "bottom". Defaults to center center
.{myAnchor: <String>}
Similar to anchor, but the position on this element. Defaults to center center
.{targetIndex: < Number>}
If target is a JSAV array, this option can be used to target
an index in that array.{fixed: <boolean>}
A boolean indicating whether the pointer should move when it's target changes.
Note, that if the pointer has a target when initialized, the pointer will still be positioned
relative to that target.A pointer instance has the functions of the Label object as well as the following functions.
If newTarget
is not specified, returns the JSAV object this pointer points to. If
newTarget
is a JSAV object, the pointer will be updated to point to that structure.
Valid options
are the same as for the pointer constructor. If setting a new target,
the change is recorded in the animationo and the function returns the pointer object.
Note: the position of the pointer is only updated once the jsav.step()
jsav.displayInit()
, or jsav.recorded()
function is called.
The pseudocode API in JSAV is intended for showing a static set of codelines that can be show/hidden and highlighted. There are two ways to initialize a pseudocode object in JSAV:
Both of these are functions of a JSAV object instance. The first version takes either an array or a string
to be used as the lines of code. If a string is passed, it will be split on newline characters (\n
)
to get the codelines.
The options that can be specified:
{url: <string>}
A URL where the code should be fetched. The fetched text will be split on
newline characters (\n
). Note, that if the codelines parameter is given, this option is ignored. Also, same-origin
policies in browsers might prevent this from working across domains.{lineNumbers: <boolean>}
Determine whether linenumbers should be shown. Defaults to true.{visible: <boolean>}
Determine whether the pseudocode is visible on creation. Defaults to true.{before: <UI element>}
Add the pseudocode before element UI element
{after: <UI element>}
Add the pseudocode after element UI element
{center: <boolean>}
Boolean to determine if array should be automatically centered
within its container. Defaults to true.{startAfter: <string>}
Only the content after the last occurrence of the specified text will be included. Only
applied if the url
parameter is also provided.{endBefore: <string>}
Only the content before the first occurrence of the specified text will be included. Only
applied if the url
parameter is also provided.horizontal vertical
. Possible horizontal values are "left", "center", "right" and vertical values "top", "center", "bottom". Defaults to center center
. Only has an effect if relativeTo is
specified.center center
. Only
has an effect if relativeTo is specified.Pseudocode objects have the following functions.
Highlight and unhighlight the codelines at given indices. Lines are numbered from 0, so first line could be highlighted with:
pseudo.highlight(0)
Similarly to the array (un)highlight, the indices parameter can be either a number, an array of numbers, or a function.
Show/hide the pseudocode object.
Show/hide the codelines at given indices. Again, indices can be a number, an array of numbers, or a function.
Apply the given CSS properties to the codelines at specified indices
.
Parameter indices
can be a number, array, or function like for
the highlight
method.
The argument css
should be an object with property name-and-value pairs. For example, to make
lines 0 and 4 have green color and lightgray background:
pseudo.css([0, 4], {"color": "green", "background-color": "#eee"});
Sets the line at given index as the current line. Also, if another line was previously set as current, it will be marked as previous. If a line was also earlier marked as previous, that mark will be removed. This will help in creating a visual debugger-like code stepping functionality in visualizations.
Removes the DOM element of this object from the document. This is useful, for example, in re-initializing exercises when the existing object needs to be removed.
Adds the CSS class className
to lines at given indices and animates the changes. Like for
the rest of pseudocode methods, indices
can be a number, array of numbers, or a function.
Removes the CSS class className
from lines at given indices and animates the changes. Like for
the rest of pseudocode methods, indices
can be a number, array of numbers, or a function.
Toggles the CSS class className
of lines at given indices and animates the changes. Like for
the rest of pseudocode methods, indices
can be a number, array of numbers, or a function.
Return true/false based on if the line at given index has the CSS class className
. Parameter
index
should be a number.
The Matrix data structures is essentially a 2-dimensional array.
A matrix can be initialized with the .ds.matrix()
function of a JSAV instance.
If the data
argument is provided, it should be an array of arrays, all of the
same length. If only options
argument is provided, it needs to specify options
rows
and columns
specifying the size of the matrix.
Options that can be specified:
plain
, matrix
, and
table
. Defaults to table.For example, this would create a 2x2 matrix: var m = jsav.ds.matrix([[0, 1], [2, 3]])
.
An empty 5x8 matrix using the matrix style could be created like this:
var m = jsav.ds.matrix({rows: 5, columns: 8, style: "matrix"});
Swaps two values of the matrix, namely (row1, col1) with (ro2, col2).
Recalculates the layout for the data structure.
Like for the array, there are similar functions in the matrix that take the row number as the
first argument and the rest of the arguments similarly than the corresponding array function.
These functions are highlight
, unhighlight
, isHighlight
,
css
, value
, addClass
, hasClass
,
removeClass
, and toggleClass
. So, for example, whereas the array
has function .addClass(col, className)
, the matrix has a function
.addClass(row, col, className)
.
JSAV supports the following graphical primitives: circle, rectangle, line, ellipse, polygon, polyline, and path. All these are in the JSAV.g namespace. A rectangle, for example, can be initialized like follows.
var rect = av.g.rect(70, 60, 50, 40);
This would initialize a rectangle with upper-left corner at point (70, 60) that is 50 pixels wide and 40 pixels tall.
All the graphical primitives have the following functions.
Make the shape visible. Essentially the same as calling .css({opacity: 1})
.
Make the shape invisible. Essentially the same as calling .css({opacity: 0})
.
Return true if the shape is visible, false if hidden.
Rotates the object by the given amount of degrees around the center of the shape.
Scales the object by given amount. The shortcuts for X/Y scaling only
are the same as calling .scale(sx, 0)
and .scale(0, sy)
. For example
rect.scale(2, 1.5)
would make the rectangle from the previous example to have width of 100 pixels and height of 60px. Note, that the position of the rectangle would also change, since the scaling is done relative to the center of the shape.
Translates the shape by the given amount. Again, X/Y versions are shortcuts to the main translation function.
Returns the value of the attribute with the name propname
.
Like the .css functions of the other JSAV objects, these can be used to animate attributes of the shape. Technically, what is changed is not CSS properties but attributes of the SVG element visualizing the shape. For a list of valid values, see Raphaël JS documentation.
Initializes a new circle with the given center and radius. Optional parameter properties
,if given,
should be an object with key-value pairs. See raphael.attr for valid keys and values.
Gets or sets the center of the circle. The center is returned as an object with
properties cx
and cy
.
Gets or sets the radius of the circle.
Initializes a new ellipse with the given center and x and y radius. Optional parameter
properties
,if given, should be an object with key-value pairs. See
raphael.attr for valid keys and values.
Same as center function of the circle.
Gets or sets the radius of the ellipse. The radius is returned as an object with
properties rx
and ry
.
Initializes a new rectangle with upper left corner at x, y
and given width and height.
Optional parameter r
can be used to specify the roundness of corners.
Optional parameter properties
,if given, should be an object with key-value pairs. See
raphael.attr for valid keys and values.
Gets or sets the width of the rectangle.
Gets or sets the height of the rectangle.
Initializes a line from point x1, y1
to x2, y2
. Optional parameter
properties
,if given, should be an object with key-value pairs. See
raphael.attr for valid keys and values.
Initializes a polyline or polygon. Parameter points
should be an array of arrays with
x and y coordinates. For example:
var polyline = av.g.polyline([[0, 0], [20, 20], [200, 200]], {"stroke-width": 7, "stroke":"#ddd"});
Optional parameter
properties
,if given, should be an object with key-value pairs. See
raphael.attr for valid keys and values.
Translates the given point
in the (poly)line by the given amount of pixels. The point is a zero-indexed list of points used to initialize the polyline. For line, start point is index 0 and endpoint index 1.
Moves the given points to the given pixel positions. Parameter points
should be an array of arrays with each item specifying point, px, and py.
Initializes a new path element with the given path
. The path should be defined according
to the SVG path string format.
Returns the current path
of the object.
Animates the objects path to the newPath
.
Sometimes there is a need to combine multiple graphical primitives to make up more complex shapes that can be changed simultaneously. Function av.g.set()
can be used to create a set of graphical primitives. It has all the functions common to all graphical primitive listed above. In addition, it has one function:
Adds the graphical primitive gp to the set.
Interactive questions can be initialized with the question
function of a JSAV instance.
This is a method of the AV object. It initializes an interactive question
of the given type (qtype
). The type can be:
TF
for a true-false type questionMC
for a multiple-choice question where only one answer can be selectedMS
for a multiple-select question where multiple answers can be selected and be correctThe questionText
parameter is the actual question shown to a student. For the question type TF, options
parameter can contain following options.
{trueLabel: <string>}
The label shown for true option. Only for type TF. Default value True.{falseLabel: <string>}
The label shown for false option. Only for type TF. Default value False.{correct: <boolean>}
The correct answer, true or false.An example of initializing a true-false question is below.
var q = av.question("TF", "JSAV supports questions now?", {correct: true, falseLabel: "No", trueLabel: "Yes"});
The function returns an instance of a question. Answer choices can be added to this instance using the following methods.
This adds an answer choice to question q
. Parameter label
is the label shown for this answer choice. The only option at the moment is correct
which indicates the correctness of this choice. Default value for it is false. Note, that this method does nothing for the true-false type question.
This function will show the question in the current step in the algorithm. This way, the initialization, addition of answers, and displaying the question can happen in different steps in the animation. It helps when the goal is to show students questions that require prediction of the algorithm's behavior.
A complete example of a multiple-select question:
var q = av.question("MS", "Life is good?"); q.addChoice("Of course", {correct: true}); q.addChoice("Certainly", {correct: true}); q.addChoice("No way!"); q.show();
There is a configurable settings dialog class in JSAV.utils.Settings.
The settings objects can be instantiated with new JSAV.utils.Settings(elem)
where the optional elem
parameter specifies an element on which a
click will open the dialog.
The settings used by an instance of JSAV can be specified with the settings
option for the constructor. For example, var av =
new JSAV(jQuery("#container"), {"settings": settings});
. If no custom settings
are given, JSAV will automatically create a default settings panel and attach it to
any element with class jsavsettings
inside the container.
No matter how the settings object is initialized,
it can be accessed through the av.settings
field.
A settings instance has the following functions.
Shows the settings dialog.
Closes the settings dialog.
Adds a component to the settings dialog. Parameter varname
is the unique
name of the variable for this setting which can be used later to get the value of the setting.
Parameter options
is an object used to specify the properties of the settings
variable. The following options can be set:
select
and
valid values for the text attribute of an HTML input element (such as text, email, range)."options": {"bar": "Bar layout", "array", "Array layout"}
would add
two choices: Bar layout and Array layout.In addition to these options, when using an HTML input element (text, email) to represent the setting,
any additional options will be set as attributes of the input
element. For example:
settings.add("speed", {"type": "range", "value": "7", "min": 1, "max": 10, "step": 1});
Would create <input type="range" value="7" min="1" max="10" step="1" />
.
The add
function returns a reference to the setting. The function val()
returns the value of the setting.
Adds a more customizable component to the settings dialog. The parameter should be a function that returns a DOM element or a jQuery object.
The exercise API is used to create interactive, automatically assessed exercises. An exercise is
initialized with a call to av.exercise(..)
. The parameters for the function are:
{modelSolution: <function>}
The function to generate the model solution. The function has to return the data structures and/or variables used in grading of the exercise. The return value can be a single data structure or an array of structures.{reset: <function>}
The initialization function that resets the exercise. The function has to return the data structures and/or variables used in grading of the exercise. The return value can be a single data structure or an array of structures.The function can also take several options, some of which are required. The full set of options are:
{compare: <Object or Array>}
Specifies which properties to compare for the structures. In the example below, we set the comparison to be CSS property background-color so grading would check if the structures have same background color (that is, if they are highlighted). Required.{feedback: <string>}
Will change the feedback mode, possible values continuous and atend (default). See Continuous feedback below.{fixmode: <string>}
Change the behavior in continuous mode, possible values are undo and fix. The default is undo.{feedbackSelectable: <boolean>}
The settings dialog will not, by default, allow student to change the feedback mode. Setting this option to true enables this choice.{fixmodeSelectable: <boolean>}
The settings dialog will not, by default, allow student to change the behavior in continuous feedback mode. Setting this option to true enables this choice.{fix: <function}
A function that will fix the student's solution to match the current step in model solution. Before this function is called, the previous incorrect step in student's solution is undone. The function gets the model structures as a parameter. For an example, see the examples/ShellsortProficiency.html.{showGrade}: <function>}
A function that can be used to customize the way the grade is shown. The function will be added to the exercise and can be called with exercise.showGrade
. The function can access the grade information from attribute this.score
. Example content of that attribute: {total: 15, correct: 3, undo: 0, fix: 0, student: 5}
. Total is the total number of steps in the model solution, student the number of steps in student solution, and correct the number of correct steps. Values undo and fix show how many steps were undone/fixed in the continuous feedback mode. Note, that to make sure the grading is up to date, this function should call the grade
function of the exercise before showing the grade.{modelDialog}: <object>}
An object that can specify options for the model answer dialog. For
the possible options, see the documentation for the JSAV.utils.dialog.{debug: <boolean>}
If true, print out some debug information for exercise developers.
Mainly, the continuous feedback mode will log possible errors in the fix function.{resetButtonTitle: <string>}
Change the text on the reset button. Defaults to "Reset".{undoButtonTitle: <string>}
Change the text on the undo button. Defaults to "Undo".{modelButtonTitle: <string>}
Change the text on the model answer button. Defaults to "Model Answer".{gradeButtonTitle: <string>}
Change the text on the grade button. Defaults to "Grade".For example, assuming modelSolution
and reset
are functions, the following would initialize an exercise:
var exercise = av.exercise(modelSolution, reset, { compare: {css: "background-color"}}); exercise.reset();
See also the tutorial on creating an exercise.
Shows the grade of the student's current solution. The behaviour can be customized using the showGrade
option when initializing the exercise.
Resets the exercise.
Shows the model answer of the exercise.
Marks the current step in the student's solution as a step used in grading.
If the exercise is in the continuous feedback mode, it is possible to have JSAV show the current score, current maximum score, and the total maximum score to student. This can be done by adding HTML elements inside the JSAV container elements. JSAV will search for elements with the following class attributes:
jsavcurrentscore
: Inside this element, JSAv will update the current
score achieved by the student.jsavcurrentmaxscore
: The contents of this element will be updated to
contain the maximum score thus far in the exercise.jsavmaxscore
: The maximum score available in this exercise.So you could use the following HTML:

 Your current score is  of . Maximum score in this exercise is .

As a shorter convenience notation, you can use

that will be replaced automatically by JSAV with the HTML above if the exercise is
in continuous feedback mode. Note, that in both cases, the elements can be anything, the
important thing is that they have the class
attributes.
The module JSAV.utils
includes some utility functions
for working with HTML pages and visualizations.
Returns an object containing all query parameters given for the HTML page. If no parameters exist, returns an empty object.
Returns the value of the query parameter name
. If no such
parameter exists, return undefined
Returns a random integer number between min
(inclusive) and
max
(exclusive).
Returns an array of num
random integer numbers between
min
(inclusive) and max
(exclusive). Optional
parameter opts
is an object that can specify options:
sorted
If set to true, the array will be sorted.sortfunc
If sorted is set to true, this option can
be used to specify a function for sorting.test
A function that takes the random array as a
parameter and returns true/false
indicating whether it
fullfills some requirements. If it returns false, a new random array is
generated. This is typically used with exercises to randomize and
test the initial data.tries
If test
function is provided, this
option specifies how many data sets are tested. If none of the first
tries data sets pass the tests, the last one is returned.Returns an array of num
elements randomly picked from the
given array arrayCollection
. The optional parameter
opts
can specify options test
and tries
like for the numKeys
function.
Shows a pop-up dialog with the given HTML as content. Returns an object
with function close()
that can be used to close the dialog.
Options can include:
jsavdialog
is always added.The module .effects
offers some useful animation effects for
AV developers.
Method .moveValue
animates moving of a value from one structure
to another. Structure can be an array or a tree/list node. The following parameter
combinations are valid:
.moveValue(fromArray, fromIndex, toArray, toIndex)
Moves
value at fromIndex
in fromArray
to toIndex
in toArray
. The value in fromIndex
will be an empty
string after this operation..moveValue(fromArray, fromIndex, toNode)
Moves
value at fromIndex
in fromArray
to toNode
.
The value in fromIndex
will be an empty
string after this operation..moveValue(fromNode, toArray, toIndex)
Moves
value in fromNode
to toIndex
in toArray
. The value in fromNode
will be an empty
string after this operation..moveValue(fromNode, toNode)
Moves value in fromNode
to toNode
. The value in fromNode
will be an empty
string after this operation.In addition, fromNode
and toNode
can be an instance of
jsav.variable
.
Note: both from and to structures can be the same structure.
Method that animates copying a value from one structure to another. The same
parameter combinations are valid as for the .moveValue
method. The only
difference is that the source value is not removed.
Method that animates swapping a value from one structure with another. The same
parameter combinations are valid as for the .moveValue
method.
JSAV supports AVs to log student actions into an event log. It also provides mechanisms for sites using the AVs to access a log of those events.
AVs can log events on student actions using this function. The eventData
can
be any data describing the event. If it is an object, properties tstamp
and
av
will be automatically added to it to mark the current time and the ID of
the AV.
For example:
jsav.logEvent({type: "jsav-heap-decrement", newSize: bh.heapsize()});
JSAV will trigger all events logged with the .logEvent()
function as
jsav-log-event
on the body
element of the current document. To
attach a listener for those events, one can use the following code.
$("body").on("jsav-log-event", function(event, eventData) { console.log(eventData); // here you would do something sensible with the eventData });
JSAV will automatically trigger many events for actions such as student moving forward, backward, etc in the animation.
Sometimes listening to the events on the body
element might not be preferred.
To customize the way the events are handler, a function to handle all JSAV events can be
passed as an option to JSAv when initializing it. Name of the option is logEvent
.
The event handler function will be passed the eventData
as the first argument.
For example:
var jsav = new JSAV("avcontainerid", { logEvent: function(eventData) { console.log(eventData); // here you would do something sensible with the eventData }});
When you create a visualization, you might want to make it easy for
other people to reuse via embedding within their own pages.
Some simple steps will make this easier for them
when using a simple iframe
tag.
The library is set up to make it natural for your visualization to
reside within the container
element.
There is no margin or padding around the container
, and
it has a one-pixel-wide black border.
So long as you stay within this, an iframe
can include
your whole visualization without any disruption to the user's page.
If you would like to support mobiles, you will probably want to restrict
the full size of your container
to at most 800 by 435 pixels.
A visualization can then be embedded with a call such as:


Czarface prep RSD Black Friday release, playing NYC in January
by Andrew SacherCzarface — the underground hip hop project of the Wu-Tang Clan’s Inspectah Deck and 7L & Esoteric — remain very prolific in the studio (among their 2019 releases are a collab LP with Ghostface Killah and an upcoming Record Store Day Black Friday release called The Odd Czar Against Us), but they don’t seem to play live very often. So it’s exciting to learn that they’ll play NYC’s Sony Hall on January 16. Tickets for that show go on sale Friday (11/22) at noon with an AmEx presale starting Wednesday (11/20) at noon.
It appears to be their only upcoming show at the moment, but stay tuned in case that changes.
Speaking of, Ghostface has upcoming shows too.


Wins:
Loss:
You'll be given a random number at the start of the game.
There are four crystals below. By clicking on a crystal you'll add a specific amount of points to your number.
You win by matching your total score to the game number. You lose if your number goes above the game number.
The crystal's point value remains hidden until you click upon it.
Each new game, each crystal's value change.


Bug summary:
App will crash if user tries to add new additive for a plant entry
Observed Behavior (a description of what happened with the app):
If the user tries to add a new additive for an existing plant entry, the app will crash
Expected Behavior (a description of what you expected to happen):
The app should allow users to add a new additive for an existing plant.
Steps to Reproduce (the steps to reproduce the problem):
1. Click the red plus button to create a new plant entry.
2. Input plant name, plant strain, and medium details.
3. Click the tick button to save the new plant entry.
4. Click on the entry to enter the entry detail screen.
5. Click on the "Feed" tab to enter the Feed information screen
6. Click on the "New additive" section to see the Additive alert view
7. Click on the OK button to save the new additive
8. App will crash
Additional information:
Attachments:


The DeepClaw Benchmark¶
The DeepClaw is a benchmarking model zoo that functions as a Reconfigurable Robotic Manipulation System for Robot Learning. The main homepage can be found at here. This is the GitHub repository of DeepClaw source code, including instructions for installing and using DeepClaw.
Resources¶
- Documentation: https://bionicdl-sustech.github.io/DeepClaw/
- Paper explaining DeepClaw: arXiv:2005.02588 [cs.RO]
- Papers using DeepClaw:
Code Organization¶
The DeepClaw code is organized as follows:
configs/ configuration for robotic station for manipulation tasks.
data/ Common dataset
deepclaw/drivers/ drivers for various robotic hardware, i.e. ur, franka, aubo.
deepclaw/models/ model zoo for segmentation, classification, pick planning, and motion planning.
deepclaw/utils/ server setup with dockers and client setup for laptops (x86) and jetson (arm).
projects/proj_TrashSorting a sample project to run deepclaw for sorting trash.
docs/ description of this document as a manual.
Bibliography¶
@misc{wan2020deepclaw,
title={DeepClaw: A Robotic Hardware Benchmarking Platform for Learning Object Manipulation},
author={Fang Wan and Haokun Wang and Xiaobo Liu and Linhan Yang and Chaoyang Song},
year={2020},
eprint={2005.02588},
archivePrefix={arXiv},
primaryClass={cs.RO}
}


--- layout: post title: Astroturf date: '2012-11-21T06:12:00+00:00' tags: - astronomy - art tumblr_url: http://cheapjackprojects.tumblr.com/post/36203926535/astroturf ---
Saturday 24th November 2012 4pm - 7.30pm FREE
Everton Park Off Heyworth Street
Please use top car park Off Heyworth Street at entrance near May Duncans Pub or park on Heyworth Street. Pedestrians enter on Heyworth Street near the Breck Road traffic lights, follow the glowing signs and people with High Viz vests!
Liverpool Astronomical Society
FREE Family Astronomy Event
Astroturf is a family friendly event to introduce the objects of the night sky and the many ways you can observe, from optical and radio telescopes to social media, mobile applications and simply looking up and recognising satellites, stars and constellations.
Part of Liverpool Biennials “Unexpected Guest” programme, artist Ross Dalziel has invited the ‘unexpected knowledge’ of Merseyside’s community of amazing amateur astronomy enthusiasts of Liverpool Astronomical Society Sidewalk Astronomy (LASSA). This 129 year old organisation will help show families and artists the amazing activity in the night sky and allow people to explore the local DIY expertise of their city at a site overlooking the Liverpool skyline.
Observing
Fingers crossed we will get a clear & dry window to use the amazing telescopes of the North West amateur astronomers of (LASSA)
Making
Make Planispheres and night vision torches
Talks & Presentations
Introduction Ross Dalziel Artist
The LAS Brendan Martin Liverpool Astronomical Society Observatory Director
The X-Ray Universe Martyn Bristow Liverpool John Moores University Astrophysics Research Institute
Pulsars and Machine Learning Rob Lyon Jodrell Bank Centre for Astrophysics/MerseySTEM network


Cryptomator adds end-to-end encryption to your Dropbox, Google Drive, or any other cloud storage service. This means that virtually any cloud storage can be used securely. If a file should ever fall into the hands of an unauthorized third party, it is still securely protected due to encryption. Since transparency and security go hand in hand, Cryptomator is open-source software. Cryptomator is available for Windows, macOS, Linux, iOS, and Android.
Cryptomator Hub adds zero-knowledge key management for teams and organizations to Cryptomator. It easily integrates into your existing identity management incl. OpenID Connect, SAML, and LDAP. As usual, your favorite cloud service remains your free choice.


UNEMPLOYED PEOPLE IN NEED OF JOBS
| # | Name | Occupation | Monthly Salary Request | Phone Number |
|---|---|---|---|---|
| 1 | Walt Cooper | Security Guard (12 Hrs) | 135 USD |<PHONE_NUMBER> |
| 2 | Ryan Berner | Gardener and Floor Cleaner | 70 USD |<PHONE_NUMBER> |
| 3 | Manpreet Singh | Driver | 125 USD |<PHONE_NUMBER> |
| 4 | Jeff Smith | Personal Trainer | 200 USD |<PHONE_NUMBER> |
| 5 | John Ryans | Tutor | 250 USD |<PHONE_NUMBER> |
HOUSEHOLDS OFFERING JOBS
| # | Work to be done | Monthly Salary Available | Address | Contact Number |
|---|---|---|---|---|
| 1 | Household Cleaning | 100 USD | House 19 G-Block |<PHONE_NUMBER> |
| 2 | Cooking - Various Cuisines | 210 USD | Corner House at F-Block |<PHONE_NUMBER> |
| 3 | Babysitting | 200 USD | House 2 H-Block |<PHONE_NUMBER> |
| 4 | Gardening | 150 USD | House 18 at F-Block |<PHONE_NUMBER> |
| 5 | Fitness Training | 250 USD | House 3 at G-Block |<PHONE_NUMBER> |


To play, simply press the key corresponding to the letter (or space) that you think will appear next in the randomly selected sentence from The Republican National Debate 2008. Ignore capitalization. Once you've guessed the whole sentence, we'll calculate an approximation of the entropy of the passage based on your success.


lambo new
A super-powered `laravel new` for Laravel and Valet.
More information: home page
- Create a new Laravel application:
lambo new app_name
- Install the application in a specific path:
lambo new --path=path/to/directory app_name
- Include authentication scaffolding:
lambo new --auth app_name
- Include a specific frontend:
lambo new --vue|bootstrap|react app_name
- Install npm dependencies after the project has been created:
lambo new --node app_name
- Create a Valet site after the project has been created:
lambo new --link app_name
- Create a new MySQL database with the same name as the project:
lambo new --create-db --dbuser=user --dbpassword=password app_name
- Open a specific editor after the project has been created:
lambo new --editor="editor" app_name


After learning the basics of responsive web design back in 2014, I did some web designs to practice what I learnt. I realized that I wanted to learn also graphic design to do my own designs from scratch, so I did some online courses:
Creative course
Graphic design basics
Learning GIMP & Inkscape
This year I discovered UX and I wanted to learn it too, but I decided that I should first improve in what I do for a living, that is, front-end development.
A couple of weeks ago I organized the learning project and last week I started my first course. But meanwhile I discovered another interest that I want to learn: illustration. In my imagination I put together all the future knowledge of web design, illustration, graphic design and UX, but I know that if you don’t start small and learn little by little, it is very difficult to learn something at the end.
Is my behaviour something related to multipotentialite? Do I want to learn very different things and I can’t focus in only one? Or is it maybe procrastination because I am afraid I won’t improve my skills after the learning project?
By the way, this is the first kind of “comic-illustration” to explain what had happened these two weeks. I have done a collage until I have more skills for this, but I think Illustrators don’t have to be afraid of a new rival ;) And don’t worry Sass, tomorrow we see each other again :)
Images from @taigaio, @frannerd, @WheresMyBubble, @YouTube and @Google.


Use locks with mutexes, instead of manual locking and unlocking.
Using std::lock_guard makes it simpler to prevent deadlocks, because it unlocks mutexes automaticaly when a function exits.
Perform the following actions to use locks with mutexes:
Identify unsafe code. Search for code that manually locks and unlocks mutexes by calling lock()
and unlock()
functions.
Add locks. Add locks to functions that manually lock()
and unlock()
mutexes by declaring them in a manner such as const std::lock_guard<std::mutex>(mutex);
Remove old code. Remove calls to lock()
and unlock()
from the functions where a lock is now being used.
In the following example, a lock is being used with the mutex. Notice that nothing else is necessary to assure concurrency when using a lock.
static std::mutex mutex;
void function(){
const std::lock_guard<std::mutex>(mutex);
//do stuff
}


--- layout: post title: today date: 2018-02-23 categories: - life tags: - life author: yefeiyu excerpt: 随手测试 ---


5 Mobile Web Development Best Practice Resources
byMy last batch of articles have discussed which mobile web development best practices I’ve adopted. I obviously can’t claim them as my own creation and should share my resources for these practices.
Some are more mobile-specific then others but all focus on optimizing sites for speed: the number one mobile web development best practice:
1) Steve Souders
The one that really showed developers the way in terms of creating fast-loading sites. Formerly at Yahoo! and now at Google, Steve Souders is the speed site guru mostly on the strength of his two books: High Performance Web Sites and Even Faster Websites. Paul Irish took the best tips from both of these books and applied them to the HTML5 Boilerplate build script.
2) PPK
Web developer Peter-Paul Koch, also known as PPK, is next on the speed guru list. He’s well-known for performing tons of mobile device/browser tests, displaying the results on the mobile section of his Quirksmode blog…spend some reading the Compatibility table on this page.
As he lives in Amsterdam, PPK can perform thorough tests on the Symbian browser, which not only gets heavy usage in Europe, but is also the world’s most popular mobile web browser. So…American-based web developers need to read his Symbiam results on his Quirksmode blog because they will have to code for it sooner than later.
3) Yahoo’s YUI and YDN blogs
Right now, Yahoo! is to site optimization what Google is to SEO: a well-respected authority in their area of expertise. Nowhere is this more clear than within the Performance category of their Yahoo! User Interface Blog (or just the YUIBlog). All of these posts offer great site speed tips, particularly the ones by Stoyan Stefanov.
Yahoo! also maintains the Yahoo! Developer Network blog (YDN), which doesn’t have the depth of site speed advice that YUI does, but is still good. Their “Best Practices for Speeding Up Your Web Site” article is pretty much required reading for any web developer right now, plus, YDN maintains the awesome Steve Souders-created YSlow browser plugin, used for testing a web page’s optimization.
*(A related side-note: Yahoo released a beta version of YSlow for Mobile the day before this article’s posting. I downloaded it and believe me when I say that you should too). *
4) YayQuery podcast with John Resig
YayQuery is an excellent jQuery podcast hosted by four jQuery experts: Paul Irish, Rebecca Murphey, Adam J. Sontag and Alex Sexton. jQuery creator John Resig appeared on the show in mid-2010, mostly discussing jQuery Mobile.
Prior to jQ Mobile’s release, Resig did a boatload of mobile device research, all of it interesting, quite a bit of it surprising. He shared his findings during this podcast…it’s a must-watch.
5) HTML5 Boilerplate Build Script
I’ve mentioned this before but let me be crystal clear right now: HTML5 Boilerplate’s build script does an incredible job of optimizing site files. With a simple command line prompt (or Windows batch file), you can run all your site files through YUI Compresser, optipng, jpegtran and many other applications to dramatically reduce their file size. The end-result is a faster-loading site.
Watch the Boilerplate how-to video..it’s well worth 28 minutes of your time:
Those are my biggies…feel free to share what you think are good mobile web development best practices because I can’t name them all!


50 Cent Claims He Turned Off His Own Instagram Account
by Tony M. Centeno50 Cent has cleared the air about why his Instagram account was deactivated.
On Sunday afternoon (Nov. 17), 50 jumped on his Twitter timeline to address the rumor that his Instagram account was shut down. According to 50, the rapper, who dropped his last studio album Animal Ambition: An Untamed Desire to Win back in 2014, shut down his Instagram page himself.
 #LeCheminDuRoi #bransoncognac," 50 said in a tweet that includes a screenshot of a news story suggesting that 50's IG account was deactivated because he made some jokes at the expense of Power actress Naturi Naughton.
50 Cent has become well known for his antics on Instagram. While his fans and followers seemed to enjoy his comical posts, other people like UFC fighter Conor McGregor don't find the jokes too funny. In an interview from last month, McGregor admitted that he would step into the octagon with 50 after the rapper's ongoing trolling spree on Instagram over the years.
"I’d have to probably say 50 Cent, I’d like to fight him," McGregor said. "Throughout the course of the [Floyd] Mayweather build-up I used him as a tool, a promotional tool on the free also, I knew he was linked to Floyd so I tied him in also and he responded big time and we capitalized on that audience so I was very thankful. But then after that, he began a little tirade against me on social media, particularly Instagram where he’d make these memes about me constantly."
Within the last month alone, the Power creator, who toured overseas earlier this year, has called out people like Cuba Gooding Jr., Comcast CEO Brian L. Roberts and, of course, Floyd Mayweather Jr. on his IG timeline. Now that his Instagram is down, for the time being, 50 says he'll be much more active on Twitter.
See 55 Hip-Hop Albums Turning 10 in 2019
The Notorious B.I.G., Notorious (Music from and Inspired By the Original Motion Picture)
Released: Jan. 13, 2009
Lisa "Left Eye" Lopes, Eye Legacy
Released: Jan. 27, 2009
The Lonely Island, Incredibad
Released: Feb. 10, 2009
Joe Budden, Padded Room
Released: Feb. 24, 2009
K'naan, Troubadour
Released: Feb. 24, 2009
Gorilla Zoe, Don't Feed Da Animals
Released: March 16, 2009
MF DOOM, Born Like This
Released: March 23, 2009
Slim Thug, Boss of All Bosses
Released: March 24, 2009
Flo Rida, R.O.O.T.S. (Routes of Overcoming the Struggle)
Released: March 31, 2009
UGK, UGK 4 Life
Released: March 31, 2009
Jadakiss, The Last Kiss
Released: April 7, 2009
Asher Roth, Asleep In the Bread Aisle
Released: April 20, 2009
Rick Ross, Deeper Than Rap
Released: April 21, 2009
Curren$y, This Ain't No Mixtape
Released: April 21, 2009
Capone-N-Noreaga, Channel 10
Released: May 12, 2009
Cam'ron, Crime Pays
Released: May 12, 2009
Eminem, Relapse
Released: May 19, 2009
Jim Jones, Pray IV Reign
Released: May 19, 2009
Busta Rhymes, Back On My B.S.
Released: May 19, 2009
DJ Drama, Gangsta Grillz: The Album, Vol. 2
Released: May 19, 2009
Mos Def, The Ecstatic
Released: June 1, 2009
J Dilla, Jay Stay Paid
Released: June 2, 2009
The Black Eyed Peas, The E.N.D. (The Energy Never Dies)
Released: June 3, 2009
DJ Quik & Kurupt, BlaQKout
Released: June 9, 2009
Ace Hood, Ruthless
Released: June 30, 2009
Wu-Tang Clan, Chamber Music
Released: June 30, 2009
Maino, If Tomorrow Comes
Released: June 30, 2009
Fabolous, Loso's Way
Released: July 28, 2009
Slaughterhouse, Slaughterhouse
Released: Aug. 11, 2009
Pitbull, Pitbull Starring In: Rebelution
Released: Aug. 31, 2009
Insane Clown Posse, Bang! Pow! Boom!
Released: Sept. 1, 2009
Raekwon, Only Built 4 Cuban Linx, Pt. 2
Released: Sept. 7, 2009
Jay-Z, The Blueprint 3
Released: Sept. 8, 2009
Q-Tip, Kamaal the Abstract
Released: Sept. 10, 2009
Kid Cudi, Man On the Moon: The End of Day
Released: Sept. 11, 2009
M.O.P., Foundation
Released: Sept 15, 2009
New Boyz, Skinny Jeanz and a Mic
Released: Sept. 15, 2009
Brother Ali, Us
Released: Sept. 22, 2009
Method Man & Redman, Blackout! 2
Released: Sept. 28, 1999
Skyzoo, The Salvation
Released: Sept. 29, 2009
Fat Joe, J.O.S.E. 2 (Jealous Ones Still Envy 2)
Released: Oct. 5, 2009
Crooked I, Mr. Pigface Weapon Waist
Released: Oct. 12, 2009
Royce da 5'9", Street Hop
Released: Oct. 20, 2009
Fashawn, Boy Meets World
Released: Oct. 20, 2009
Tech N9ne, K.O.D.
Released: Oct. 26, 2009
50 Cent, Before I Self Destruct
Released: Nov. 9, 2009
Wale, Attention Deficit
Released: Nov. 10, 2009
Rakim, The Seventh Seal
Released: Nov. 17, 2009
Birdman, Pricele$$
Released: Nov. 23, 2009
Snoop Dogg, Malice 'N Wonderland
Released: Dec. 4, 2009
Clipse, Til the Casket Drops
Released: Dec. 8, 2009
Gucci Mane, The State vs. Radric Davis
Released: Dec. 8, 2009
Timbaland, Shock Value II
Released: Dec. 8, 2009
Hurricane Chris, Unleashed
Released: Dec. 21, 2009
Lil B, 6 Kiss
Released: Dec. 22, 2009


Hello, Javascript!
JavaScript understands numbers:
JavaScript is a calculator:
Counting:
Functions:
Return values:
for-loop:


Thanks to the Internet. A person like me can now easily access information and knowledge at my finger tips without leaving the comfort of my home. As I have benefited tremendously from the generous sharing of knowhow by authors on Github, YouTube, Medium, and the like, it’s time for me to give back. I would like to be a self-ordained curator, sharing my views on what’s happening out there in the tech and startup world, built upon contributions already made by others. At the same time, I combine my blogs with my official and unofficial courses so as to have a single point of presence on the web for doing my job.
In our present age of rapid technological disruption and business transformation, a sustainable innovation requires engaging user experience, robust technological infrastructure, and viable business model, the three critical factors for success.
We’ll introduce a simple model which explains the relationship between content, community, and conversion for public engagement in social advocacy and service programmes.Stakeholder journey and data mapping will be introduced to establish the groundwork for preparing the attendees to master the digital tools.
COVID-19 has turned our world upside down. Our family, relationships, learning, voluntary works, jobs, religious activities, and social life are heavily disrupted. Is there anything we can do to help our community to address this pandemic challenge?
With the continuous development of the Internet to meet the growth of smart cities and the upcoming 4th industrial revolution, Internet of Things, Cloud Computing, Artificial Intelligence, Blockchain, and Big Data are increasingly being integrated into the fabric of our works and lives alongside mobile and social media.


Individuals can donate to the Haskell Foundation and help us drive broader adoption of the Haskell language. Click the button to donate through PayPal!
Many enterprises use Haskell and its compiler, the Glasgow Haskell Compiler (GHC), for free. In the spirit of open source, the Haskell Foundation provides an opportunity for those enterprises to give back to the community and toolchain from which they benefit. Maintaining and developing reliable toolchains takes a huge amount of nitty-gritty engineering work.
Contributions to the Haskell Foundation are tax-deductible where applicable, and are used to sponsor our open source initiatives that ensure that research and development continues at the same world-class pace for years to come.
If you or your organization might interested in sponsoring the Haskell Foundation please contact us at<EMAIL_ADDRESS>to start the conversation.
Receive ongoing acknowledgements on social media channels and have a small logo displayed on the HF website.
Have your logo and story featured in the Supporter Spotlight on the website and newsletter, a medium- sized logo displayed on the HF website, and receive ongoing recognition on our social media pages.
All of the benefits of Functor and Applicative memberships, with the addition of a full interview for the Haskell Foundation blog, as well as having your logo prominently displayed on the HF website.
Non-financial contributions to HF are also welcome. As a volunteer-based organization, the Haskell Foundation needs volunteers who can work on software, documentation, promotion, and other tasks to support the HF affiliated projects and the Haskell community. Individuals who contribute their own time or on behalf of their company are the backbone of our organization. Please reach out to us at<EMAIL_ADDRESS>to learn more about how you can volunteer or offer in-kind support.


Current Curricula
Introduction to Ember
Want to improve (or create) your Ember.js skills? We'll take you from beginner all the way through to creating a compete, well-architected web application. Lectures are followed by hands-on labs that will apply the learned concepts immediately. Select the date of your session for specific cirriculum details.
On Your Own Time (updated!)Corporate Training
We can take your developers from beginners all the way through to creating complete, well-architected web applications.
Any of our existing training cirricula can be presented as corporate trainings, in addition to custom classes. Our minimum class size is 10 students. We can coordinate combining multiple smaller groups to help you reach that number.
Get in touch to schedule your next training.


--- layout: page title: About header-img: "img/about-bg.png" ---
Code newbie exploring my way through this fascinating journey


IP Addresses, Packets and Routing
IP Addresses
So what are IP Addresses? The definition of a IP Address is: a unique string of numbers separated by periods that identifies each computer using the internet protocol to communicate over a network.
Example
The earlier example of a domain name was (www.icann.org), the IP address for this domain names web server is <IP_ADDRESS>
Packets
What are packets? The definition of a packet is: a small segment of a larger message of data sent over computer networks, which are then recombined by the device that is receiving them to get the full message of data.
Example
Routing
What is routing? The definition of routing is: the process of selecting a path across one or more networks. This is how packets are sent across networks.
Example


#include <Logger.h>
Public Types | |
| enum | Type { ERROR, INFO, COUNTDOWN, BOOTING, WARNING, GAME, MSG } |
| Type of a logged message. More... | |
Public Member Functions | |
| Logger (Logger &)=delete | |
| Copy constructor of the class. More... | |
| void | operator= (Logger const &)=delete |
| Assignment operator of the the class. More... | |
| void | log (int lineNumber, Type type, std::string msg) |
| Logs a message (prints it out and stores it into the log file) More... | |
| void | testAllTypes () |
| Prints out all different types of log messages. More... | |
Static Public Member Functions | |
| static Logger * | getInstance () |
| Returns the instance of the class. More... | |
Public Attributes | |
| const std::string | RESET = "\033[0m" |
| reset color used when printing out into the terminal More... | |
| const std::string | BLACK = "\033[30m" |
| black color used when printing out into the terminal More... | |
| const std::string | RED = "\033[31m" |
| red color used when printing out into the terminal More... | |
| const std::string | GREEN = "\033[32m" |
| green color used when printing out into the terminal More... | |
| const std::string | YELLOW = "\033[33m" |
| yellow color used when printing out into the terminal More... | |
| const std::string | BLUE = "\033[34m" |
| blue color used when printing out into the terminal More... | |
| const std::string | MAGENTA = "\033[35m" |
| magenta color used when printing out into the terminal More... | |
| const std::string | CYAN = "\033[36m" |
| cyan color used when printing out into the terminal More... | |
| const std::string | WHITE = "\033[37m" |
| white color used when printing out into the terminal More... | |
Private Member Functions | |
| Logger () | |
| Constructor of the class - creates an instance of it. More... | |
| void | log (int lineNumber, std::string type, std::string color, std::string msg) |
| Logs a message (prints it out in color and stores it into the log file) More... | |
| std::string | getCurrentDateTime () const |
| Returns current datetime. More... | |
| void | addToLogFile (std::string log) const |
| Appends the log message to the end of the log file. More... | |
Private Attributes | |
| const std::string | logDirectory = "log" |
| directory where all the log files are stored More... | |
| const std::string | logFileType = ".txt" |
| type of a log file More... | |
| std::string | logFileName |
| the name of the log file (current datetime) More... | |
Static Private Attributes | |
| static Logger * | instance = NULL |
| the instance of the class More... | |
The purpose of this class is to log every activity happening on the server so it could be used for analysis later on. Example of what is logged could be: when a client gets connected/disconnected, when they send a message, when they start playing game, when they not following the protocol, and so on. This class also stores everything the is printed out into a file named with the datetime when the server was run. This class is written as a singleton.
| enum Logger::Type |
Type of a logged message.
|
delete |
Copy constructor of the class.
It was deleted because there is no need to use it within this project.
|
private |
Constructor of the class - creates an instance of it.
|
private |
Appends the log message to the end of the log file.
| log | the log message |
|
private |
Returns current datetime.
This method is used when creating the log file as well as when a log method is called so the current date could be added to the log message.
|
static |
Returns the instance of the class.
|
private |
Logs a message (prints it out in color and stores it into the log file)
This method is directly called by method log in which the message gets the appropriate color depending on its type.
| lineNumber | number of the line from which this log method was called |
| type | of the log message (Type) |
| color | in which the message is going to be printed out |
| msg | the log message itself |
| void Logger::log | ( | int | lineNumber, |
| Type | type, | ||
| std::string | msg | ||
| ) |
Logs a message (prints it out and stores it into the log file)
This method also keeps track of the number of the line from which the method was called so it could be added to the log message - makes the debugging process easier.
| lineNumber | number of the line from which this log method was called |
| type | of the log message (Type) |
| msg | the log message itself |
|
delete |
Assignment operator of the the class.
It was deleted because there is no need to use it within this project.
| void Logger::testAllTypes | ( | ) |
Prints out all different types of log messages.
This method is not used within this project. Its purpose is to show the user what the message look like when they are printed out, so they could change the colors if they want to.
| const std::string Logger::BLACK = "\033[30m" |
black color used when printing out into the terminal
| const std::string Logger::BLUE = "\033[34m" |
blue color used when printing out into the terminal
| const std::string Logger::CYAN = "\033[36m" |
cyan color used when printing out into the terminal
| const std::string Logger::GREEN = "\033[32m" |
green color used when printing out into the terminal
|
staticprivate |
the instance of the class
|
private |
directory where all the log files are stored
|
private |
the name of the log file (current datetime)
|
private |
type of a log file
| const std::string Logger::MAGENTA = "\033[35m" |
magenta color used when printing out into the terminal
| const std::string Logger::RED = "\033[31m" |
red color used when printing out into the terminal
| const std::string Logger::RESET = "\033[0m" |
reset color used when printing out into the terminal
| const std::string Logger::WHITE = "\033[37m" |
white color used when printing out into the terminal
| const std::string Logger::YELLOW = "\033[33m" |
yellow color used when printing out into the terminal


Seek input from team members. If you want your team to be engaged in meetings, make sure the agenda includes items that reflect their needs.
Select topics that affect the entire team. They are also likely to be issues for which people have different information and needs.
List agenda topics as questions the team needs to answer. For example: “project technical approach” should be “what type of technical integration meets the need for the project and budget?”
Even better, bring proposals to the meeting rather than questions. A couple of people working on a proposal before a meeting may shorten the meeting overall. Use consent decision making to amend the proposal if needed.
Note whether the purpose of the topic is to share information, seek input for a decision, or make a decision.
Estimate a realistic amount of time for each topic.
Propose a process for addressing each agenda item.
Consent decision making
Consensus
Delegation poker
Lightning decision jam
A standard format
Get all the relevant information on the table. (10 mins)
Identify and agree on any assumptions we need to make. (10 mins)
Identify and agree on the interests/needs that should be met for any solution. (10 mins)
Craft a solution that ideally takes into account all the interests/needs, and is consistent with relevant information and assumptions. (15 mins)
Ask for any suggestions for improving the process
Specify how members should prepare for the meeting. Distribute the agenda with sufficient time before the meeting, so the team can read background materials and prepare their initial thoughts for each agenda item ahead of time.
Identify who is responsible for leading each topic.
Make the first topic “review and modify agenda as needed.”
During the meeting
Facilitator
Setting ground rules (add example ground rules link)
Keeping things on track
Dealing with interruptions
Keeping order when emotions drive the conversation
Scribe
List who attended
Record notes of discussion
Clearly mark actions and owners
Actions
Confirming owners
Deadlines
The DoD
Attendee
Turning up on time
Keeping to time for breaks
Your responsibilities to contribute
Self-awareness
Post-meeting
Sharing notes (ideally on the intranet)
Verifying note with attendees (if required)
Tips and links
Meetings are good for
Securing multiple perspectives on sticky issues
Surfacing and processing tensions around proposed changes
Personal and team development
Making sure people are heard
Process improvement as a group
Keeping it efficient
Book meetings for 20 or 40 minutes rather than 30 or 60.
Try holding virtual meetings rather than in-person if it’s short


|
||||||||
| PREV CLASS NEXT CLASS | FRAMES NO FRAMES | |||||||
| SUMMARY: INNER | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |
java.lang.Object | +--DataStructures.MyInteger
Wrapper class for use with generic data structures. Mimics Integer. In Java 1.2, you can use Integer if Comparable is needed.
| Constructor Summary | |
MyInteger()
Construct the MyInteger object with initial value 0. |
|
MyInteger(int x)
Construct the MyInteger object. |
| Method Summary | |
int |
compareTo(Comparable rhs)
Implements the compareTo method. |
boolean |
equals(java.lang.Object rhs)
Implements the equals method. |
int |
hash(int tableSize)
Implements the hash method. |
int |
intValue()
Gets the stored int value. |
java.lang.String |
toString()
Implements the toString method. |
| Methods inherited from class java.lang.Object |
clone, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait |
| Constructor Detail |
public MyInteger()
public MyInteger(int x)
x
- the initial value.
| Method Detail |
public int intValue()
public java.lang.String toString()
toString
in class java.lang.Object
public int compareTo(Comparable rhs)
compareTo
in interface Comparable
rhs
- the other MyInteger object.
ClassCastException
- if rhs is not
a MyInteger.
public boolean equals(java.lang.Object rhs)
equals
in class java.lang.Object
rhs
- the second MyInteger.
ClassCastException
- if rhs is not
a MyInteger.
public int hash(int tableSize)
hash
in interface Hashable
tableSize
- the hash table size.
|
||||||||
| PREV CLASS NEXT CLASS | FRAMES NO FRAMES | |||||||
| SUMMARY: INNER | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |


{% extends "base.html" %} {% load render_bundle wagtailcore_tags %} {% block body_class %}template-programpage{% endblock %} {% block title %}{{ page.title }} | {{ site_name }}{% endblock %} {% block description %} MicroMasters is a professional and academic credential for online learners from anywhere in the world. Learners who pass an integrated set of MITx graduate-level courses on MITx Online, and one or more proctored exams, will earn a MicroMasters credential from MITx, and can then apply for an accelerated, on campus, master’s degree program at MIT or other top universities. {% endblock %} {% block keywords %}micromasters, MIT, {{ page.program.title }}, online master's, online courses, MOOC{% endblock %} {% block social %} {% endblock social %} {% block content %} {% include "header.html" %}
{{ block.value.detail }}
Back to top {% endfor %}


Click here to read this month’s ECP Newsletter.
August Counselor Newsletter
Welcome back! Please take a moment to read our Counselor’s Newsletter for this month.
Parker Uniform June Sale
Shop early and save starting June 15th! Read the Parker Newsletter for more details.
The Honor Roll School Raises More Than $2,000 for the East Fort Bend Human Needs Ministry, Inc.
THRS featured in the Sugar Land Patch!
THRS Partners board expansion
THRS Partners Board of Directors would like to announce a board expansion scheduled to go into effect Summer 2017 and serving the 2017-2018 academic year. The Board is inviting potential candidates to submit a completed application and resume (if applicable). Successful candidates will: Understand and support THRS Partners’ mission Understand the importance of teamwork and individual leadership Understand the roles &…
Read More »
ECP April Newsletter
Stay in the know by reading our ECP April Newsletter! Exciting events are coming up for our early childhood students as we approach the end of the school year!
News


Hi, I’m Raphaëlle
Digital Marketing & Social Media Specialist
I’m a highly experienced and passionate communications manager currently working at one of the world’s best technology teams at Government Digital Service. I’m also a marketer, an entrepreneur, a blogger, a strategist and a bit of a geek, especially when it comes to digital.
I believe in building products and services that people love, not just on what they want. I’m passionate about brands and love to make things happen.
Experience
Want to work with me?
Here’s a bit of what I’ve been up to
I’ve gone from running my own business ArtSpotter, to supporting a fast growing ecommerce app Depop, to working in government at Government Digital Service.
I’ve got experience in:
- Digital Strategy
- Marketing and Social Media Campaigns
- Product and brand development
- Community engagement


A.S.G.M. or Artisanal Small-Scale Gold Mining is a common practice in the Amazon rainforest that has been shown to contribute to alarming levels of deforestation and loss of biodiversity. The ASGM lab at Wake Forest University is an interdisciplinary lab combining researchers from the Computer Science and Biology departments. The ASGM-WFU lab utilizes machine learning algorithms that are deployed to automated drones to monitor areas of known and/or rapidly developing deforestation. This site will be used by the ASGM researchers in order to automate the ML workflow. This front end, although simple in appearance, is connected to a very complex and robust AWS backend.
CI/CD is covered by linking this repo to AWS CodePipeline. There is a rule set so that when a pull request is approved and merged into main, the updated main is automatically deployed to the S3 bucket that is hosting the site. CloudWatch still needs to be manually invalidated (clearing the cache) using "/*" to refresh the entire site. Single pages can also be invalidated by using the specific file name. We may look to set up auto-invalidation on the React front end once there is a significant amount of code coverage/ testing.


Dear :sir I am Mr.JACOB UDERIKE, an accountant of the standard trust bank Plc,Lagos Branch.I have urgent and very confidential business proposal for you. I got your contact from the world trade center (W.T.C.)regional office in Lagos,Nigeria although the details of my intention was not made known to them. On June 6 1999, An American oil consultant/contractor with the Nigerian National Petroleum Corporation, Mr.Trevor made a numbered time (fixed) deposited for twelve calendar valued atUS$18,000,000.00(eighteen Million Dorllars) in my branch. Upon maturity, I sent a routine notification to his forwarding address but got no reply. After a month, I sent a reminder and finally I discovered from his contact employers Nigerian National Petroleum corporation that Mr.Trevor died from an automobile accident. On further investigation, I found out that he did not leave a WILL and all attempts to trace his next of kin were fruitless. I therefore made further investigation and discovered that Mr.Trevor did not declare any next of kin in all his official documents,including his Bank Deposit paperwork. This sum of US$18,000,000.00 is still sitting in the Bank and the interest is being rolled over with the principal sum at the end of each year.No one will come forward to claim it.According to the Nigerian Law, at the expiration of 6(six) years, the money will revert to the ownership of the Nigerian Government if nobody applies to claim the funds. Consequently, my proposal is that I will like you as a foreigner to stand in as the next of kin to Mr.Trevor so that the fruits of this old mans labor will not get into the hands of some corrupt government officials. This is simple; 1. I will like you to provide me immediately with your full names and address so that the attorney will prepare the necessary documents and affidavits, which will put you in place as the next of kin. 2,your privet telephone and fax number for rasy communication The money will be paid into your account for us to share in the ratio of 60% for me and 30% for you and 10% for the expencis that we are going to make both local and international during this process ofthis transacation. There is no risk at all the paperwork for this transaction will be done by the attorney and my position as the Branch accountant guarantees the successful execution of this transaction. If you are interested, please reply immediately via the private email address below<EMAIL_ADDRESS>Upon your response, I shall then provide you with more details and relevant documents that will help you understand. Please observe utmost confidentiality, and rest assured that this transaction would be most profitable for both of us because I shall require your assistance to invest my share in your country. Thanks and regards. Mr.JACOB UDERIKE


--- title: "HTTP Required" layout: base type: "error" ---
http:// specified on a URL that requires https://
Please edit the URL and try again.


understand your Zakat
558 people have calculated their true zakat using zakat.fyi
Let's get started on yours by calculating your zakat step by step
This includes all physical cash as well as money in bank accounts you can withdraw from without penalty, such as checking accounts.
We will use the value of gold at $1,703.55 per ounce.
We will use the value of silver at X per ounce.
Subtract fees and taxes.
Stocks, etc.


Gecode::Set::Select::IdxViewArray< View > Class Template Reference
#include <idxarray.hh>
Detailed Description
template<class View>
class Gecode::Set::Select::IdxViewArray< View >
An array of IndexView pairs.
Definition at line 46 of file idxarray.hh.
Public Member Functions | |
| IdxViewArray (void) | |
| Default constructor. | |
| IdxViewArray (const IdxViewArray< View > &) | |
| Copy constructor. | |
| IdxViewArray (Space *home, const SetVarArgs &x) | |
| Construct an IdxViewArray from x. | |
| int | size (void) const |
| Return the current size. | |
| void | size (int n) |
| Set the size to n. | |
| IdxView< View > & | operator[] (int n) |
| Access element n. | |
| const IdxView< View > & | operator[] (int) const |
| Access element n. | |
| void | subscribe (Space *home, Propagator *p, PropCond pc, bool process=true) |
| void | cancel (Space *home, Propagator *p, PropCond pc) |
| void | update (Space *home, bool share, IdxViewArray< View > &x) |
| Cloning. |
Constructor & Destructor Documentation
|
|
Default constructor.
Definition at line 34 of file idxarray.icc. |
|
|
Copy constructor.
Definition at line 37 of file idxarray.icc. |
|
|
Construct an IdxViewArray from x.
Definition at line 42 of file idxarray.icc. |
Member Function Documentation
|
|
Return the current size.
Definition at line 57 of file idxarray.icc. |
|
|
Set the size to n.
Definition at line 63 of file idxarray.icc. |
|
|
Access element n.
Definition at line 69 of file idxarray.icc. |
|
|
Access element n.
Definition at line 76 of file idxarray.icc. |
|
|
Subscribe propagator p with propagation condition pc to all elements of the array. Definition at line 83 of file idxarray.icc. |
|
|
Cancel subscription of propagator p with propagation condition pc for all elements of the array. Definition at line 91 of file idxarray.icc. |
|
|
Cloning.
Definition at line 98 of file idxarray.icc. |
The documentation for this class was generated from the following files:
- gecode/set/select/idxarray.hh (Revision: 3559)
- gecode/set/select/idxarray.icc (Revision: 3559)