AJAX Tutorial for Beginners
byAJAX has grown a lot since Jesse James Garrett defined it in 2005. It described a way to create robust web applications and helped turn JavaScript into one of the world's most popular web programming languages.
New developers (and a few intermediate ones) struggle to learn AJAX and are also not aware of how it's advanced inside of jQuery. This AJAX tutorial was written with those developers in mind.
Table of Contents
- Assumptions
- How the code examples work
- What Is AJAX
- A brief history of AJAX
- Create AJAX with Regular JavaScript
- Have "readyStateChange" run a callback function
- Using "&&" generates an error
- Make an AJAX request with mouseclick
- Multiple buttons with AJAX functionality
- Create reusable code for multiple buttons
- Load JSON with AJAX
Assumptions
This AJAX tutorial assumes you understand HTML. It also assumes that you understand the basic building blocks of JavaScript: variables, functions, arrays, etc.
This tutorial also takes the position that the WHAT WG XMLHttpRequest specification is the best source for understanding how AJAX works. It refers to other sources like jQuery's AJAX documentation, Mozilla Developer Network(MDN) and Microsoft Developer Network(MSDN), but it ultimately views the WHAT WG spec as the best reference.
How the code examples work
The code for all the examples is on GitHub and looks similar to this:
<!DOCTYPE html>

<meta charset="UTF-8">
<title>A Sample</title>

All examples run from their own folder using an index.html
file, which references a scripts.js
file. Either index.html
or scripts.js
will change with each new example, and new files may be added or subtracted to each example.
Because examples use some form of the XMLHttpRequest
browser object, they need to run from a web server instead of as a local file in a web browser. Whether it's a browser tool or a desktop server application like MAMP, it needs to run from a web server.
What Is AJAX
First, understand that XMLHttpRequest
, or "XHR", is the heart of any AJAX code. Therefore, the current version of the XMLHttpRequest specification helps to provide the simplest AJAX definition:
"The XMLHttpRequest object is an API for fetching resources."
Simply put, XMLHttpRequest
fetches, or "requests", information from a server, then places it on a web page. It does this "asynchronously", meaning that XHR loads the information onto the page without needing to reload it.
(Note: at the time of this tutorial's publish date, XHR can make both synchronous and asynchronous requests. XHR synchronous requests will likely be removed from browsers in the future: read about disappearing XHR synchronous requests).
"AJAX" stands for Asynchronous JavaScript + XML but other technologies are used besides JavaScript and XML. The original definition described it as a group of technologies working together to manage XHR requests inside a web page.
The technologies were: XHR, JavaScript, XML/XSLT, XHTML, CSS and the Document Object Model (or, "the DOM"). XML was the recommended data type but other data types can be used...text files, HTML files, images and (more so than anything else), JSON.
XHTML can be used as the presentation layer along with CSS. But using HTML5 instead of XHTML is recommended at the time of this guide's initial publish date.
A brief history of AJAX
(NOTE: This section provides some historically perspective on AJAX but has nothing to do with the code in this guide. To start looking at code, you can skip this section and go to "Create AJAX with Regular JavaScript".)
The roots of AJAX goes back to roughly late 1988/early 1999: according to JavaScript creator, Brendan Eich, Microsoft was using Java to make asynchronous requests inside of its Outlook Web Access application (OWA) at that time. Due to a conflict between Microsoft and Sun (who owned Java), Microsoft removed Java from OWA.
OWA still needed to make asynchronous requests, or, "async" requests. Because of this, Microsoft developers created the XMLHTTP object to do just that, bundling it into Internet Explorer 5 when it was released in March 1999.
Other browsers added the object as well, but with a different implementation and called it XMLHttpRequest
. Microsoft would copy the other implementation and also name their object XMLHttpRequest
when they released Internet Explorer 7.
The object was used to create to web applications that loaded data asynchronously, without page refreshes. The most notable applications came from Google: specifically Google Maps and Google Suggest..
These web apps showed how useful XHR was but the developer community didn't really notice this on a wide scale. That changed in February 2005 when Jesse James Garrett wrote his influential AJAX article.
Garret's article defined AJAX and also listed its required technologies (see the previous section for more on this). The article inspired developers to create compelling web applications and continues to do so to this day.
Create AJAX with Regular JavaScript
XHR feature detection
(NOTE: Writing AJAX feature detection in pure JavaScript is discussed here for historically perspective only. It's primarily needed for Internet Explorer versions 6 and lower, but usage for those browsers has dropped significantly. Plus, jQuery version 1.x takes care of the feature detection for you if you use it. If you're not coding for those browsers and/or using jQuery version 1.x, skip this section and go to "Load content onto a page with AJAX".)
As mentioned, Microsoft's XHR implementation was different from other browsers until IE7. In the older IE versions, XMLHTTP
was not directly accessible in the browser...in other words, you couldn't access it by using window.XMLHTTP
somewhere in your JavaScript code.
Instead, it was bundled inside proprietary Microsoft technology called "ActiveXObject". Since AJAX became popular while the old Microsoft implementation was still in wide use, you had to use feature-detection code to make sure that your AJAX worked in all browsers.
The simplest version of this feature-detection code looked similar to this:
// Feature-detect XMLHttpRequest implementation
var xhr;
if (window.XMLHttpRequest) { // Browsers other than IE 6 and lower
xhr = new XMLHttpRequest();
} else {
if (window.ActiveXObject) { // For IE 6 and lower
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
The above-example created a variable called xhr
, then checked to see if XMLHttpRequest
was attached to the browser's window
object. If it was, then xhr
directly referenced a new instance of XMLHttpRequest
when it performed AJAX tasks.
The example also checked to see if ActiveXObject
was attached to the browser via the window
object. If it was, then xhr
would directly reference a new instance of ActiveXObject
when it performed AJAX tasks.
Developers later realized that window.ActiveXObject
was used differently across the older versions of IE. They also realized that some browsers heavily in use at the time didn't support XHR at all.
As a result, they updated the feature detection code:
// Feature-detect XMLHttpRequest implementation
// More robust detecting of ActiveX
function getXHR() {
var xhr;
if (window.XMLHttpRequest) { // Browsers other than IE 6 and lower
xhr = new XMLHttpRequest();
} else {
try { // Browsers with one type of ActiveXObject build
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { // Browsers with another type of ActiveXObject build
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Browsers that don't support either XMLHttpRequest or ActiveXObject
xhr = false;
}
}
}
return xhr;
}
The feature detection code was rewritten to be a reusable function called getXHR
. The function did the cross-browser checking for XMLHttpRequest
internally, meaning any new instance of getXHR
would use XHR without worrying about cross-browser issues.
getXHR
checked for XMLHttpRequest
, but also checked to see of the browser had one of two ActiveXObject builds. It also checked to see if either the XMLHttpRequest
or ActiveXObject
existed.
A JavaScript try...catch
statement looked for the different versions of ActiveXObject
. If try...catch
didn't find it and also didn't find XMLHttpRequest
, then the value of the xhr
variable was set to false
and didn't do any AJAX work.
getXHR
said return xhr
at the end of the code, which let us create new instances of getXHR
outside the function.
Go to MDN to learn more about feature-detection and learn more about "try...catch" on MDN.
Load content onto a page with AJAX
Loading content with XHR is a four-step process:
- Create a new instance of the XHR object.
- Wait for an XHR state of 4.
- Wait for a 200 response code from the server.
- Bring everything together using "onreadystatechange".
Create a new instance of the XHR object
There are use cases for including XHR feature detection in your code, but it's primarily required if your AJAX code needs to run in Internet Explorer versions 6 and lower. These browsers are in use less and less so it may make sense to keep this out of your code and just create a direct instance of the XHR:
var xhr = new XMLHttpRequest();
Wait for an XHR state of 4
An XHR request will be in one of fives states, each with a numerical value of 0 through 4. The last request state, number 4, is the most important one in AJAX code, but here's a simplified description of the states.
(NOTE: This section is here because it's an important part of the XHR spec, but because this guide focuses on the "4" state only, you can skip this section and go to "Wait for 200 response code from the server"".
There are two widely-accepted specifications for XHR states: the spec defined by WHATWG and the original spec defined by Microsoft.
The WHATWG spec defines five states, each with a numerical value:
0: meaning that things are in the UNSENT state...the code understands that instance of
xhr
has been created, but it's not doing anything.1: meaning that things are in the OPEN state...the
open()
method has been invoked somewhere in our code and if you want to send any data to the server, you can do that with thesend()
method. This guide focuses more on getting things withxhr
instead of sending things...read about setting headers over on MDN .2: meaning that things are in the HEADERS_RECEIVED state...if you're downloading headers, the state will be set to 2 after they're finished downloading.
3: meaning that things are in the LOADING state...the data is loading.
4: meaning that things are in the DONE state...either the data has downloaded in full or there was an error during the download process.
Microsoft's definition also attaches numbers to states, but the definition is shorter:
0 (uninitialized)
1 (loading)
2 (loaded)
3 (interactive)
4 (complete)
Wait for 200 response code from the server
A web server sends many server response codes, each in the form of a numerical number. With AJAX, the most important one is 200 OK
.
When your AJAX code sees a 200 OK
response, it knows that your XHR has made a successful server request.
Bring everything together using "onreadystatechange"
onreadystatechange
is an event handler that watches for when readystate
changes...again, readyState
will always have a numerical value of 0 through 4. There are use cases for knowing all the times that this value changes but with AJAX, knowing when it changes to 4 (the done
state) is the most important.
When onreadystatechange
sees that readyState
is equal to 4, it knows that all the data has fully downloaded and is ready to be used in our code. It also could mean that the data didn't download, but this guide assumes that your final code will be written in a way that keeps that from happening: (view the example):

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Sample 03</title>

We've added a div tag with an id of "textTarget" to index.html
. Our AJAX code will load data into this element.
// sample01/scripts.js
var getArticleInfo = new XMLHttpRequest();
getArticleInfo.onreadystatechange = loadText;
getArticleInfo.open("GET", "articleName.txt");
getArticleInfo.send();
function loadText() {
var text = document.getElementById("textTarget");
if (getArticleInfo.readyState === 4) {
if (getArticleInfo.status === 200) {
text.innerHTML = getArticleInfo.responseText;
} else {
console.log('There was a problem with the request.');
}
}
};
Reviewing the code...
var getArticleInfo = new XMLHttpRequest();
We created a new XHR instance called getArticleInfo
.
getArticleInfo.onreadystatechange = loadText;
getArticleInfo.open("GET", "articleName.txt");
getArticleInfo.send();
For now, getArticleInfo.onreadystatechange
will run a function called loadText
any time a state changes. But we'll write code that makes sure that loadText
only runs when the state equals 4
.
open
is an XHR method and one of the most important parts of an AJAX application. This is because the open
method is where you tell your code what data needs to be loaded onto the page.
getArticleInfo.open()
first described how to get the data. That was done with the first parameter, which was GET
...it told the server to "get" something from the server.
The second getArticleInfo.open()
parameter described what to get...that's the data we're requesting. In this case, that was a file called "articleName.txt" that contained the name of this article and the name of the author.
getArticleInfo.send()
is the part of the code that actually sent the data request to server. It has a default value of null
when using GET
, but you can pass a parameter to send()
if using POST
.
You would use POST
if you want to send data to the server while in the "1" state, which was discussed in the "Wait for an XHR state of 4" section. Discussing this is beyond the scope of this AJAX tutorial.
function loadText() {
...
};
Start building the loadText()
function that we defined above.
var text = document.getElementById("textTarget");
We stored a variable reference to the

in index.html
.
if (getArticleInfo.readyState === 4) {
if (getArticleInfo.status === 200) {
text.innerHTML = getArticleInfo.responseText;
} else {
console.log("There was a problem with the request.");
}
}
We first checked to see if getArticleInfo.readyState
definitely equaled 4
. If it did, then the data downloaded.
Next, we checked to see if getArticleInfo.status
equaled 200
. If it did, it meant the code successfully contacted the server.
Our code then found the

element on our page (which was referenced by the text
variable) and placed whatever content is inside of getArticleInfo.responseText
.
getArticleInfo.responseText
referred to the data we requested in getArticleInfo.open()
, which was the "articleName.txt" file. The copy in that file was placed in

.
If the code didn't connect to the server and getArticleInfo.status
didn't equal 200
, then the browser console would have displayed a message saying, "There was a problem with the request."
It's important to note that this console message would only have appeared if getArticleInfo.status
didn't equal 200
and that the value of getArticleInfo.readyState
would have no effect on whether or not the console message appeared.
As mentioned, AJAX can load in all different types of documents...we can tell the getArticleInfo.open()
to load in an HTML document instead of a text one (view the example):
// sample02/scripts.js
// Update the getArticleInfo.open() method only
// Replace articleName.txt with articleName.html in the directory
...
getArticleInfo.open("GET", "articleName.html");
...
Have "readyStateChange" run a callback function
We've had "readyStateChange" request data using a named function called loadText()
. Requesting data with a callback function is also an option (view the example):
// sample03/scripts.js
var getArticleInfo = new XMLHttpRequest();
getArticleInfo.open("GET", "articleName.html");
getArticleInfo.send();
getArticleInfo.onreadystatechange = function() {
var text = document.getElementById("textTarget");
if (getArticleInfo.readyState === 4) {
if (getArticleInfo.status === 200) {
text.innerHTML = getArticleInfo.responseText;
} else {
console.log('There was a problem with the request.');
}
}
};
getArticleInfo.onreadystatechange
immediately ran a callback function instead of going out and named function, making the code run slightly faster.
Using "&&" generates an error
(NOTE: This section describes how NOT to do readyState
and status
checks. Developers still do this but this AJAX tutorial does not. This section is a demonstration of what not to do; it has no bearing on the examples. Feel free to skip this section and go to "Make an AJAX request with mouseclick".)
Our code checked for the value of readyState
first, then checked for the server's status code. Some developers like to use the logical "AND" operator (&&) to simultaneously check for these values.
The code for this looks similar to this (view the example):
// sample04/scripts.js
// Update the getArticleInfo.onreadystatechange callback function only
...
getArticleInfo.onreadystatechange = function() {
var text = document.getElementById("textTarget");
if ((getArticleInfo.readyState === 4) && (getArticleInfo.status === 200)) {
text.innerHTML = getArticleInfo.responseText;
} else {
console.log("There was a problem with the request.");
}
};
In this example, XMLHttpRequest
probably requested and displayed data without error, but the console message displayed anyway. This is because it did only one very specific check.
The code using logical "AND" would only "AJAX in" the content if getArticleInfo.readyState
equaled 4
at the same time that getArticleInfo.status
equaled 200
. But that wasn't the only scenario that happened in the code.
There were times when getArticleInfo.readyState
equaled 0 through 3 and there were times when getArticleInfo.readyState
equaled 2
at the same time that getArticleInfo.status
equaled 200
. There may have even been a time when getArticleInfo.status
equaled something other than 200
.
We didn't define functionality for those other use cases so as a result, the console message returned for all those use cases. The fact that the data displayed correctly didn't matter: it returned the console error message anyway.
Using &&
like this doesn't perform a robust check of the application state in this case, so it's best to avoid it.
Read more about the logical "AND" operator on MDN.
Make an AJAX request with mouseclick
The previous examples used AJAX to load data automatically, but we can also make it load with events. Doing this with mouseclicks is common (view the example):

...
<button id="getHTMLFile">Load the HTML file</button>

We added a button tag with an id of "getHTMLFile" above

. Clicking on this button loaded the contents of an HTML file inside the div tag.
// sample05/scripts.js
function loadHTML() {
var getInfo = new XMLHttpRequest();
getInfo.open("GET", "articleName.html");
getInfo.send();
getInfo.onreadystatechange = function() {
var text = document.getElementById("textTarget");
if (getInfo.readyState === 4) {
if (getInfo.status === 200) {
text.innerHTML = getInfo.responseText;
} else {
console.log('There was a problem with the request.');
}
}
}
}
// Code that loads the data on a button click
document.getElementById("getHTMLFile").addEventListener("click", loadHTML);
All the AJAX code was placed in a loadHTML
function and we added new code at the bottom that ran this function when the button was clicked. At the bottom of the code, the button with the id of getHTMLFile
had the addEventListener
method attached to it.
The button was "listening for", or "watching for", whatever event we told it to watch for...which was click
. When the code saw that the button was been clicked, it ran the loadHTML
function and processed the AJAX code.
Multiple buttons with AJAX functionality
We can create multiple buttons that load different data with AJAX (view the example):

...
<button id="getHTMLFile">Load the HTML file</button>
<button id="getTextFile">Load the text file</button>

We added a new button tag with an id of "getTextFile" directly above

. Clicking on this button will load the contents of a text file inside the div tag.
// sample06/scripts.js
// Pass a parameter to loadFile and refer to it in getInfo.open()
function loadFile(file) {
var getInfo = new XMLHttpRequest();
getInfo.open("GET", file);
...
}
...
// Add a new button to the bottom of scripts.js
// Have each button run loadFile() to load in a different file
document.getElementById("getHTMLFile").onclick = function() {
loadFile("articleName.html");
};
document.getElementById("getTextFile").onclick = function() {
loadFile("articleName.txt");
};
loadFile
now requires a parameter that we're calling "file". The parameter will define what file get's loaded onto the page via getInfo.open
.
We also updated our button code: it still ran the loadFile
function, but that function needed a parameter in order to work. That parameter was the name of the file we want to load onto the page.
The new button loaded in a text file while the old button loaded in an HTML file.
Create reusable code for multiple buttons
The code in the last demo is fine if we only have a few buttons, but would get messy if we had to create onclick
functionality for a lot of buttons. So it's a best to create reusable code that the buttons can share (view the example):

...
<button class="btn" data-file="articleName.html">Load the HTML file</button>
<button class="btn" data-file="articleName.txt">Load the text file</button>

...
We updated the two buttons already on our HTML page. For each one, we removed the ids, added a class called btn
and added a data-attribute called data-file
.
The values of the data-attributes were unique for each button: each value was the name of the file that needed be loaded with AJAX.
// sample07/scripts.js
// Don't change the loadFile() function
// Remove the button code for the two buttons at the bottom
// Add this new code
...
var getButtons = document.querySelectorAll(".btn");
for (key in getButtons) {
var singleButton = getButtons[key];
singleButton.onclick = function() {
if(!this.dataset) {
loadFile(this.getAttribute("data-file"));
} else {
loadFile(this.dataset.file);
}
}
}
The button code for the two buttons was replaced with new code. That code first used document.querySelectorAll
to find all the buttons with the btn
class name and store them as a group in a variable called getButtons
.
Then a for...in
loop ran for whatever the total amount of buttons were inside of getButtons
...which was two. Every time the loop ran, it created a variable called singleButton
that stored a reference to one button at a time: that reference was the getButtons[key]
line of code.
Next, our code told each singleButton
what to do when it got clicked. What it did was, looked at the value of the button's data attribute (which is one of two files) and passed it as a parameter to the loadFile
function to load onto the page.
Data attributes aren't supported in IE 10 and lower so we had to feature-detect for them, then provide fallback code for those browsers. We looked for the dataset
property of the button being clicked by saying this.dataset
.
We first checked to see if dataset
did NOT exist in the browser by saying if(!this.dataset)
...if it didn't, we got the value of the data attribute with the getAttribute()
method.
But if dataset
DID exist, we used it to get the value of the data attribute using this.dataset
.
(Note: To learn more about data attributes, read my "Load data attributes with Mouse Clicks" tutorial or my "Filter Content With jQuery.filter() & jQuery Selectors" tutorial.
Load JSON with AJAX
AJAX can work with many data types but JSON is the most-used data type at the time of this guide's initial publish date. There are many ways to use JSON with AJAX...this is a basic example (view the example):

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Sample 08</title>

The buttons were removed from the HTML file.
// sample08/soccerplayers.json
{
"chelsea": {
"playerOne": "Didier Drogba",
"playerTwo": "Thibault Courtois",
"playerThree": "Cesc Fabregas"
},
"realMadrid": {
"playerOne": "Cristiano Ronaldo",
"playerTwo": "Sergio Ramos",
"playerThree": "Iker Casillas"
},
"psg": {
"playerOne": "Zlatan Ibrahimović",
"playerTwo": "Thiago Motta",
"playerThree": "Marquinhos"
}
}
Instead of using AJAX to load in data from either an HTML or text file, we loaded it in from a JSON file called soccerplayers.json
.
// sample08/scripts.js
(function(){
var getPlayerInfo = new XMLHttpRequest();
getPlayerInfo.open("GET", "soccerplayers.json");
getPlayerInfo.send();
getPlayerInfo.onreadystatechange = function() {
if (getPlayerInfo.readyState === 4) {
if (getPlayerInfo.status === 200) {
var players = JSON.parse(getPlayerInfo.responseText),
text = document.getElementById("textTarget");
for (i in players) {
var newDiv = document.createElement("div");
newDiv.innerHTML = players[i].playerOne;
text.appendChild(newDiv);
}
}
}
}
})();
Breaking down the code:
(function(){
...
})();
The main change is that the function now ran as soon as the page loaded instead of being invoked some place in our code. This was done with an "immediately-invoked function expression", or an "IIFE".
...
var getPlayerInfo = new XMLHttpRequest();
getPlayerInfo.open("GET", "soccerplayers.json");
getPlayerInfo.send();
...
The main variable used in the AJAX code was renamed getPlayerInfo
throughout the code. The open
method now fetched our JSON file.
...
getPlayerInfo.onreadystatechange = function() {
if (getPlayerInfo.readyState === 4) {
if (getPlayerInfo.status === 200) {
var players = JSON.parse(getPlayerInfo.responseText),
text = document.getElementById("textTarget");
for (i in players) {
var newDiv = document.createElement("div");
newDiv.innerHTML = players[i].playerOne;
text.appendChild(newDiv);
}
}
}
};
...
Once readyState
equaled 4
and our code successfully connected to the server, it created two variables: players
and text
. players
grabbed our data with responseText
like before and converted it to a more-readable JavaScript object format with JSON.parse
.
text
referred to the

element on the HTML page. As before, our data loaded into this element.
Then we did a for...in
loop that looped through JSON content stored inside the players
variable. Three steps were performed for every loop iteration:
- the loop created a div tag using
document.createElement
and stored in a variable callednewDiv
. - the loop looked at each item in the
players
variable and found itsplayerOne
property. Then placed it inside the div tag created with thenewDiv
variable by accessing the div'sinnerHTML
property. - the loop found the
text
variable that referenced the

element already on the page and loaded thenewDiv
content inside of it.
This was a basic example of how to use JSON with AJAX...the main takeaway from this is example is, AJAX can load all different types of content, including JSON.
AJAX & jQuery
jQuery has always had excellent AJAX support. It lets you write highly-configurable AJAX functionality with less code.
The release of jQuery 1.5 was significant because of certain AJAX-related changes:
- AJAX performed faster in jQuery.
- Deferreds and Promises were introduced, making AJAX's asynchronous functionality better.
- the already-existing jqXHR object added new functionality to AJAX in jQuery.
Add jQuery to the project
For the rest of the examples, the core jQuery library has been added to index.html
via the jQuery CDN. index.html
now looks like this:
<!DOCTYPE html>

<meta charset="UTF-8">
<title>A Sample with the jQuery code attached to it</title>

Note that jQuery comes before scripts.js
and that we're using a 1.x version of the library instead of a 2.x version. This means that jQuery is optimized to work in Internet Explorer versions 6 and higher...2.x versions only work in IE versions 9 and higher.
If you use jQuery 1.x, it will perform the ActiveX Object feature detection we reviewed earlier.
Understanding $.ajax
$.ajax
is a powerful, highly-configurable method in jQuery. It manages all AJAX calls made by jQuery.
There are many ways to configure $.ajax
and reviewing all of them is beyond the scope of this guide. But understanding its structure is important. View the example:

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Sample 09</title>

The same HTML code as before except we've added a div with an id of "isLoadedTarget" and the core jQuery library.
// sample09/scripts.js
$.ajax({
url: "articleName.html",
success: isLoaded,
statusCode: {
200: function() {
console.log("Everything is loaded!!!");
}
}
}).done(function(data) {
$("#textTarget").html(data);
});
function isLoaded() {
$("#isLoadedTarget").html("
The articleName.html file has loaded...check the console for a message returned by the statusCode property!!!
");
}
You can use $.ajax
either with or without passing parameters to it. If you do pass parameters, you can pass more than one using a configurable object.
We've created a configurable object be setting three options:
- url: defined which file is being loaded into the page via AJAX. This example loaded in the "articleName.html" file.
- success: defined what to do if the request for the file succeeds. This example would run a function called
isLoaded
. - statusCode: defined what to do when a certain server status code has been called. This example sent a message to the browser console when the server gets to a 200 status.
We chained .ajax
to the .done
method, so it will run next. .done
is discussed later when we look at jQuery Promises and Deferreds but for now, understand that .done
is a callback function that ran after .ajax
did everything it was supposed to do.
.done
had its own callback function and for it, we passed a parameter of "data" to it. "data" represents all the options configured in .ajax
, including the value of the "url" option.
The callback used the html
method to load "articleName.html" into

like it did before except this time, we passed the "data" parameter to .html
instead of the file name. .done
is smart enough to understand that it needs to look at the "url" value to find out what content needs to be loaded in.
jQuery AJAX Shorthand methods
$.ajax
is powerful, but not needed for every project. According to the current version of the $.ajax documentation:
"The
$.ajax()
function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like$.get()
and.load()
are available and are easier to use. If less common options are required, though,$.ajax()
can be used more flexibly."
In jQuery, these higher-level functions are commonly referred to as "shorthand methods." All of them use core .ajax
method internally.
jQuery currently offers five AJAX shorthand methods:
.load
jQuery.get
jQuery.getJSON
jQuery.getScript
jQuery.post
jQuery.post
deals with server interaction, which is beyond the scope of this guide, so it won't be discussed here.
.load: the easiest way to use AJAX with jQuery
If you want to use jQuery to load in file with AJAX like we've been doing, the .load
function is the easiest way to do this. This is the jQuery version of a JavaScript sample we looked at earlier.

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Sample 10</title>

An HTML page like we've used in previous examples...it contains

where we loaded in content on page-load.
// sample10/scripts.js
$("#textTarget").load("articleName.html");
jQuery looked for the

element on the page and ran it against the .load
function. That function used AJAX to "load" content inside of the div...that content was defined as "articleName.html" in the .load
parameter.
Use .load to make an AJAX request with mouseclick
We used a mouseclick to load content "AJAX in" content in a previous example...here's its jQuery version (view the example):

...
<button id="getHTMLFile">Load the HTML file</button>

We added a button tag with an id of "getHTMLFile" directly above

. Clicking on this button loaded the contents of an HTML file inside the div tag.
// sample11/scripts.js
$("#getHTMLFile").click(function(){
$("#textTarget").load("articleName.html");
});
We bound the jQuery .click
method to the button we just added and had it run a callback function when clicked. The function ran the .load
code in the previous example.
Create reusable code for multiple buttons with .load
We used plain JavaScript to create separate buttons to "AJAX in" different content. But using plain JavaScript to create a shared function to load in content was more efficient (view the example):

...
<button class="btn" data-file="articleName.html">Load the HTML file</button>
<button class="btn" data-file="articleName.txt">Load the text file</button>

...
We created two buttons with a class called btn
and a data-attribute called data-file
. data-file
stored the name of the file that had to be loaded with AJAX.
// sample12/scripts.js
$(".btn").click(function(){
var getData = $(this).data("file");
$("#textTarget").load(getData);
});
As before, we had all the buttons with the btn
class share the same .click
function for loading in content. As before, the buttons simultaneously performed two tasks: find the file stored in the data-file
attribute, and load that file into the

element.
To get the file stored in data-file
, we used $(this).data()
. We still used the JavaScript this
keyword to reference the button being clicked, but wrapped in the jQuery object so we could use it with other jQuery methods.
We passed the name of data attribute we want to find as a parameter to the .data
method. The name we wanted was data-file
so we just needed to call our parameter "file".
All that was stored in a variable called getData
. Because getData
refers to the value of the clicked-on button's data attribute (which is one of two files), we can pass that as a parameter to the .load
method that loads files inside of

.
Load in fragments with .load
The .load
method can load in a piece of data from an HTML document instead of the entire document (view the example):

...

...
Use a page with just

.

AJAX Tutorial for Beginners

Kai "kaidez" Gittens

Create a page called article.html
that contains two elements:

and

.
// sample13/scripts.js
$("#textTarget").load("article.html #author");
Use load to "AJAX in" the article.html
but instead of loading in the entire file, just load in the content in the

element.
Read more about jQuery's ".load()" method.
Use jQuery.get
The .get
method is different from .load
in a few important ways:
.get
is a global function while.load
is a method. This means that you would use.get
to start a jQuery code block but use.load
as a chainable method inside a code block.Because of the last difference, it makes sense to use
.load
to "AJAX in" HTML documents only..get
was created to "AJAX in" all types of documents..get
manages GET server requests only while.load
can manage both GET and POST requests.
Using the same HTML as in the previous example, using .get
to bring content via AJAX looks like this (view the example):
// sample14/scripts.js
$.get("articleName.html", function(data) {
$("#textTarget").html(data);
});
Where we used .load
as a chainable method inside a code block, .get
started the code block in this example. The first parameter told us what content gets loaded onto the page, which is "articleName.html".
The second parameter was a callback function that defined where the content got loaded. The function took a parameter called "data" which represented the content that got loaded onto the page.
The inside of the function loaded the content inside the "textTarget" page element with the help of jQuery's .html
method.
The "data" parameter (which represented the content) was passed to the .html
method so the method knew what to load. The function parameter can be anything you want, but naming it "data" is a common practice.
Use jQuery.getJSON
We can use jQuery's .getJSON
method to load in JSON content as we did before with plain JavaScript (view the example).
As a reminder, here's our JSON file
// sample15/soccerplayers.json
{
"chelsea": {
"playerOne": "Didier Drogba",
"playerTwo": "Thibault Courtois",
"playerThree": "Cesc Fabregas"
},
"realMadrid": {
"playerOne": "Cristiano Ronaldo",
"playerTwo": "Sergio Ramos",
"playerThree": "Iker Casillas"
},
"psg": {
"playerOne": "Zlatan Ibrahimović",
"playerTwo": "Thiago Motta",
"playerThree": "Marquinhos"
}
}
And our scripts.js
file looks like this
// sample15/scripts.js
$.getJSON("soccerplayers.json", function(players) {
$.each(players, function(i) {
var newDiv = $("

");
$(newDiv).append(players[i].playerOne);
$("#textTarget").append(newDiv);
})
});
The first parameter for .getJSON
was the JSON file with the content we wanted to load onto the page. The second parameter was a callback function that loaded the data onto the page.
That callback function took one parameter we've called player
, which references the JSON file. Next, we used jQuery's .each
method to do what the for...in
loop did before: look for properties in our JSON data.
.each
also took parameters: the first one was players
parameter, which, again, pointed to our JSON data. The second parameter was another callback function that loaded the data onto the page, and inside particular page elements we created.
In the function, we created a variable called newDiv
that used jQuery to create a new div tag. Then we used jQuery's .append
method to look for any playerOne
properties in the items of the JSON object, and place them inside of the newly created div tag.
The new div had content at that point: we then took it and used .append
again to load it into the "textTarget" element already on the page.
Read more about "jQuery.getJSON()".
Use jQuery.getScript
.getScript
loads a single JavaScript file via AJAX. A common practice is to use a callback function to execute code in the file after it loads.
index.html
looks the same as before, but we're adding a file called loadFile.js
while updating scripts.js
(view the example):

...

...
The same HTML structure we used in the last few examples.
// sample16/loadFile.js
function getHtmlFile() {
$("#textTarget").load("articleName.html");
};
function setText() {
$("#textTarget").css({
"color": "red",
"font-weight": "bold"
});
};
We created two functions in loadFile.js
: getHtmlFile
and setText
.
getHtmlFile()
loads the articleName.html
into the

as was done in other examples, setText
changes the copy in

by making it red and bolding it.
// sample16/scripts.js
$.getScript("loadFile.js", function() {
getHtmlFile();
$("#textTarget").click(function(){
setText();
});
});
Inside of scripts.js
, the getScript
method loaded loadFile.js
, then ran a callback function. The callback immediately ran getHtmlFile
and loaded in "articleName.html", and it also ran setText
when

was clicked.
If you view index.html
in a web browser with a good developer tool (Firebug, Chrome Developer Tools, etc.), open up its Network panel. You'll see that the filename for loadFile.js
as a time stamp appended to it:
// Will look different every time the page gets reloaded
loadFile.js?=1421161342213
This is because .getScript
always "cache-busts" the scripts it loads in. This forces the browser to download a new version of the file instead of looking for a cached one.
If you want to avoid this, you can use .ajaxSetup
to allow caching (view the example):
// sample17/scripts.js
$.ajaxSetup({
cache: true
});
$.getScript("loadFile.js", function() {
getHtmlFile();
$("#textTarget").click(function(){
setText();
});
});
If you look at the Network panel in the developer tools now, you'll notice that no time stamp as been append to the filename.
Read more about "jQuery.getScript()".
jqHXR & Promises
The $.ajax
method and some of the shorthand methods return the "jQuery XMLHttpRequest" object, commonly referred to as "jqHXR". The .load
shorthand method does not return jqXHR.
jqXHR is basically the traditional XMLHttpRequest
browser object wrapped in a specific jQuery API. The jQuery documentation refers to jqXHR as a "superset" of the browser's XHR.
An important part of this API are jQuery Promises which are part of jQuery's Deferred object. This guide focuses on using Promises with AJAX and not Deferreds, but Deferreds are useful so it's good to understand them...read the jQuery documentation to learn more about jQuery Deferreds.
What is a Promise?
Promises are not a new technology, but are relatively new to JavaScript and are gaining an important role in the language. Discussing them in full is also beyond the scope of this guide but it's good to understand their basic ideas.
According to the community-led Promises/A+ specification:
A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its
then
method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.
In other words...
- Promises wait for your code to COMPLETELY finish what it's doing.
- Promises let you run callbacks to do things AFTER the code COMPLETELY finishes what it's doing.
- Promises must contain a
then()
method returns a promise...then()
is used to neatly manage the callbacks. - Promises have special event handling for situations where any part of the code fails.
At the time of this guide's publish date, Promises haven't been implemented in all browsers. The current plan to achieve this is to make them part of a future version of JavaScript, specifically ECMAScript version 6, code-named "Harmony."
There is much more to Promises than what's being discussed here, especially when discussing what's the right way to implementing them. Domenic Denicola, a very active member of the Promises community, has written an excellent Promises post on GitHub that discusses this.
Also, Forbes Lindesay has written an excellent walk-through on Promises. Really good for beginners.
An important note about jQuery Promises
Since Promises aren't available in every browser, there are libraries you can add to make them work your project. The Promises spec has a list of libraries you can use to implement Promise functionality in your code.
jQuery isn't on the list. This is because the current jQuery build doesn't fully conform to the Promises spec in two ways:
The spec calls for Promises to be their own object when implemented: Promises are wrapped in the jQuery's Deferred object.
The spec calls for Promises to manage errors in a specific way: the current jQuery build doesn't do this.
Also, jQuery's .then
method is based on an older version of the Promises spec. This is discussed in the jQuery .then
section of this guide.
According to comments from jQuery core committer Rick Waldron, these things are happening because implementing Promises as per the spec would cause breaking changes in jQuery. It would break things to the point that things other than Promises wouldn't work.
Use Deferred methods with jqXHR
Because jqXHR is part of jQuery Deferreds, it has access to all of Deferreds methods. The four most commonly-used methods are:
done
fail
always
then
As mentioned, Promises allow for the neater callback implementations. Using these four methods for callback implementation is considered a best practice in jQuery.
The .done method
The .done
method sets a callback for what to do after the code has "resolved"...i.e., has fully run. (view the example):

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Sample 18</title>

The HTML required for this code sample.
// sample18/scripts.js
$.get("article.html").done(function(data) {
$("#textTarget").html(data);
console.log("The file has loaded!");
});
.get
requested "article.html" from the server and had a .done
method chained to it. If the request was successful, .done
ran a callback function.
The callback loaded the contents of "article.html" onto the page and returned a console message.
We were able to do this with .get
because it returned the jqXHR
object. As a reminder: .load
doesn't return jqXHR
and is unable to do this.
The HTML remains the same but the JavaScript gets updated (view the example):
// sample19/scripts.js
$("#textTarget").load("article.html")
.done(function(data) {
// Won't run because "load" doesn't understand "done"
// "done" will return as an undefined function
console.log("The file has loaded!");
});
The file loaded onto the page but the console message failed to appear. This is because .load
doesn't automatically return jqXHR
; therefore, .done
didn't work in our code.
Read more about the jQuery "deferred.done()".
The .fail method
The .fail
method sets a callback for what to do if the code fails, or if it's "rejected".
index.html
remains the same but we've deleted "article.html" from this sample's directory...view the example.
scripts.js
now looks like this:
// sample20/scripts.js
$.get("article.html")
.done(function(data) {
$("#textTarget").html(data);
})
.fail(function() {
$("#textTarget").html("The file didn't load!");
});
Since article.html
was removed from the directory, the code failed. The .fail
method was called as a result, so it loaded a message into the "textTarget" into the message saying so.
"Read more about the jQuery "deferred.fail()".
The .always method
The .always
method sets a callback for what to do if the code either resolves or is rejected view the example:

...

...
A div tag with an id of "textTarget02" was added below the div tag with an id of "textTarget."
// sample21/scripts.js
// Try & load "article.html" into "
"
$.get("article.html")
.done(function(data) {
$("#textTarget").html(data);
})
.fail(function() {
$("#textTarget").html("The file didn't load!");
})
.always(function(){
console.log("The 'article.html' file either did or didn't load!");
});
// Try & load "article02.html" into "
"
$.get("article02.html")
.done(function(data) {
$("#textTarget02").html(data);
})
.fail(function() {
$("#textTarget02").html("The 'article02.html' file didn't load!");
})
.always(function(){
console.log("The 'article02.html' file either did or didn't load!");
});
There were two functions in our code: one that loads in "article.html", which does exist, and one that loads in "article02.html", which does NOT exist. Each one is chaining the .done
, .fail
and .always
methods.
The first one loads in the existing "article.html" file, so its chained .done
method will run...as will its chained .always
method. The second one loads in the non-existing "article02.html" file, so its chained .fail
method will run...as will its chained .always
method.
Read more about the jQuery "deferred.always()".
The .then method
The .then
method sets a callback for what to do if the code either resolves, is rejected or is still in progress (view the example):

...

...
The

element was removed from index.html
.
$.getJSON("soccerplayers.json").then(
function(data) {
$.each(data, function(i) {
var newDiv = $("

");
$(newDiv).append(data[i].playerOne);
$("#textTarget").append(newDiv);
})
}, function(){
$("#textTarget").html("The data failed to load.");
},
function(){
$("#textTarget").html("The data is loading...");
}
);
We used .getJSON
to grab and parse JSON as we did in a previous example. But the .then
method is now helping us manage callback functions.
The callbacks are passed as function parameters...there are three of them:
- The first function described what to do if the jQuery Promise resolves.
- The first function described what to do if the jQuery Promise is rejected.
- The first function described what to do if the jQuery Promise is still progressing.
Because soccerplayers.json
exists, the Promise will resolve. But it could easily reject if it couldn't find the file.
If we removed soccerplayers.json
, then the function in the second parameter would appear on the page (view the example):
The data failed to load.
Demonstrating the progress function passed in the third parameter is tough with such a small amount of JSON data is tough. But it's important to understand that the function would show "The data is loading..." if the Promise either resolved of rejected.
As mentioned, jQuery's then
method is based on an older version of the Promises spec, which is the Promises A spec maintained by the Common JS community. That spec requires that then
allow for a progress parameter while newer Promises/A+ spec states that it should not.
Read more about the jQuery "deferred.then()".
Conclusion
AJAX is something that should be second nature to JavaScript developers so I hope this AJAX tutorial is good start in your understanding how it works. Understanding how it works internally and how jQuery makes it easier to implement are key things to understand.
Reading the official WHATWG XHR specification should be your next step in understanding AJAX in full. From there, reading jQuery's AJAX documentation should be your next step.
Also, having a good understanding of JavaScript's asynchronous nature is important. So reading Trevor Burnham's Async JavaScript at some point is a good idea.
Feel free to post questions/issues/whatever on this article's GitHub repository.


---
layout: default
title: Projects
permalink: /projects/
---
Some of my projects.
Apposphere.io is a platform for various business modules such as a lead generator, a CRM, project management and financial tools. I worked with Apposphere to improve user experience by making modules more cohere and responsive.
Patently.ai aims to make the process of filing patent easier by making patent discovery painless. It utilizes machine learning and natural language processing tools to parse through all available US patents and provides similarity scores for a patent idea. I designed and developed the front-end of patently.ai’s search engine.
I wanted to create a nice simple blog that is both responsive and fast. After much research, I decided to utilize Jekyll and Google AMP. Jekyll offered a quick solution to get a blog up and running, while Google AMP optimized contents for fast delivery. However, with speed come great constraints since AMP have strict limits on what you can include in your pages.
A fun app I created with a classmate at Galvanize. The idea for this project is to provide a venue where you can upload and share posters of events happening around town. We just thought that posters are a great way to disseminate information. I contributed mainly on the back-end and authentication of this project.
This is the very first app I’ve created. I wanted to create a conversational interface that can be incorporated into any web page. The bot could answer simple questions or harder questions depend on how smart you make it. One possible implementation of the bot is to make the about page of any website more fun and interactive.
While exploring the idea of web-development, I enrolled in a one-month rails class to see how much I like it. This project is the product of that class. Albeit there was a lot of hand holding, I found making a web application fun and challenging, and it helped in solidifying my desire to become a web developer.


| Sl. No | Name of the Institute | Head of the Institution | Mail Id | Name of the Coordinator | Mail Id of the Coordinator | Phone Number |
|---|---|---|---|---|---|---|
| 1 | Central Univeristy of Kerala, Kasaragod |<EMAIL_ADDRESS>| Dr Mohan A K |<EMAIL_ADDRESS>|<PHONE_NUMBER> | |
| 2 | Vimal Jyothi Engineering College | Dr Benny Joseph |<EMAIL_ADDRESS>| Dr V Sampath Kumar |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 3 | St. Joseph College Pilathara Kannur | Dr. K.C. Muraleedharan |<EMAIL_ADDRESS>| Johnson Simethy |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 4 | Govt. College Of Engineering, Kannur, Kerala |<EMAIL_ADDRESS>| Mr. Sukesh A |<EMAIL_ADDRESS>|<PHONE_NUMBER> | |
| 5 | N.A.M College,Kallikandy | Dr. Muhammed kutty KK |<EMAIL_ADDRESS>| Dr. Abdul Gafoor CV |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 6 | Govt. Engineering College, Wayanad | Dr. Anitha V S |<EMAIL_ADDRESS>| Dr Sreeram R |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 7 | Don Bosco College, Sulthan Bathery | Johnson |<EMAIL_ADDRESS>| Sibila Abhilash |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 8 | Mary Matha Arts & Science College, P.O. Vemom, Mananthavady, Wayanad | Dr Maria Martin Joseph |<EMAIL_ADDRESS>| Mr Binoy Joseph |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 9 | St. Mary`s College, Sulthans Bathery |<EMAIL_ADDRESS>| SABIN BABY |<EMAIL_ADDRESS>|<PHONE_NUMBER> | |
| 10 | WMO Arts & Science College, Muttil | Mr.MAHMOOD ASLAM K |<EMAIL_ADDRESS>|<PHONE_NUMBER> | ||
| 11 | ST. JOSEPH`S COLLEGE, DEVAGIRI | Dr. Sabu K Thomas |<EMAIL_ADDRESS>| Tibin Baby |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 12 | SREEPATHY INSTITUTE OF MANAGEMENT AND TECHNOLOGY | Dr George C T |<EMAIL_ADDRESS>| Sebin Sunny P |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 13 | NSS TRINING COLLEGE, OTTAPPALAM |<EMAIL_ADDRESS>| Dr. Mridula |<EMAIL_ADDRESS>|<PHONE_NUMBER> | |
| 14 | MES KALLADI COLLEGE, MANNARKKAD | Dr.C.Rajesh |<EMAIL_ADDRESS>| Dr.Divya M | ||
| 15 | Govt. Victoria College, Palakkad |<EMAIL_ADDRESS>| Hareesh kp |<EMAIL_ADDRESS>|<PHONE_NUMBER> | |
| 16 | Indian Institute Of Technology, Palakkad | Dr. P B Sunil Kumar | Dr Sahely Bhadra |<PHONE_NUMBER> | ||
| 17 | Jawaharlal College Of Engineering & Technology, Mangalam | DR V P SUKUMARAN NAIR |<EMAIL_ADDRESS>| RAGESH P R |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 18 | Malabar Polytechnic Campus |<EMAIL_ADDRESS>| AMMAR MALAYIL |<EMAIL_ADDRESS>|<PHONE_NUMBER> | |
| 19 | Ahalia School Of Engineering And Technology | Dr. P. R. Sreemahadevan Pillai |<EMAIL_ADDRESS>| Preeja V |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 20 | Indian Institute Of Management, Kozhikode | Prof. Debashis Chatterjee |<EMAIL_ADDRESS>| Prof. Anubha Shekhar Sinha |<EMAIL_ADDRESS>|<PHONE_NUMBER> |
| 21 | Providence Womens College, Kozhikkode | Dr. Sr. Jaseena Joseph |<EMAIL_ADDRESS>| Dr. Sini R |<EMAIL_ADDRESS>|<PHONE_NUMBER> |


Born in South Africa
Ik woon en werk nu al meer dan 2 jaar in Nederland
When coding: FP / DDD / TDD and other acronyms that try improve the way we build software
When not coding: Family / Meditation / Reading / Coffee
Feature: Eating too many cucumbers may not be good for you
Eating too much of anything may not be good for you.
Scenario: Eating a few is no problem
Given Alice is hungry
When she eats 3 cucumbers
Then she will be full
[]
let ``toPay returns half on 50% discounted Price`` () =
let price = (Price.create 10m (Discount.fromDecimal 50m))
|> Price.toPay
test <@ price = 5m @>
Unit_Scenario_ExpectedResult
BDD is a second-generation, outside-in, pull-based, multiple-stakeholder, multiple-scale, high-automation, agile methodology. It describes a cycle of interactions with well-defined outputs, resulting in the delivery of working, tested software that matters. - Dan North
Feature: Fixed Amount Sell-in Purchase Agreement
Background:
Given a fixed amount sell-in Purchase agreement
| Name | Value |
| Starting | 2017-01-05 |
| Ending | 2017-02-25 |
| Type | FixedAmountPerProductPurchased |
| Status | Approved |
| Factor | 10 |
| Product | P1 |
| Product | P2 |
| Product | P3 |
Scenario: Agreement start date is moved backwards
so more purchase delivery lines are allocated against
Given the following purchase delivery lines exist
| Purchase Delivery Line Id | Product | Quantity | Price | Verification date |
| PD1 | P1 | 3 | 100 | 01-01-2017 |
| PD2 | P2 | 6 | 110 | 05-01-2017 |
| PD3 | P3 | 10 | 210 | 05-01-2017 |
And existing allocations for the agreement
| Purchase Delivery Line Id | Product | AllocatedValue |
| PD2 | P2 | 60 |
| PD3 | P3 | 100 |
When the Purchase agreement start date changes to 2017-01-01
And allocations are calculated for the Purchase agreement
Then the following purchase delivery lines are allocated against
| Purchase Delivery Line Id | Product | AllocatedValue |
| PD1 | P1 | 30 |
And the total allocated value for the Purchase agreement is 190
Used when language's type system is very strong
Lots of types
Lots of modelling and experimenting


Here are some demos of js-viewpane. Checkout the source code of this page to see details about js-viewpane-options, required css styles and its dom structure.
Install js-viewpane via bower install viewpane
and link the source code by
<script src="./bower_components/viewpane/dist/viewpane.js"></script>


Any way to add a " back to top " button at the bottom of a forum page? or even better, add the link to go directly back to the Forum Start > English Forums - Battlefield 3 PC at the bottom. I always have to drag and scroll the slider thing on the right to get back up top ;)
Should be an easy fox for you. Thanks for all your work with this plugin man...it's great ;)
BrainFooLong
Administrator
In the next update you will get a breadrump copy from the top of the page on the bottom of the page.
So that you not must scroll to get back to overview.


twitter
linkedin
github
Projects
Mood-Ring uses twitter's api, sentiment analysis and websockets to capture the mood on any given topic trending on Twitter. The current topic is Donald Trump. It scales from blue (very bad), through purple, to red (glowing).
FoodBytes was a group project I worked on at EDA. It uses web speech apis to read recipes to the user and is prompted through voice to play audio files through programmed commands. (It may take a while to load)
A simple countdown app using Express.js to serve static files, and some css animation. When it reaches zero you might see dancing robots.
The second iteration of mood--ring, this app pushes successive tweets about Donald Trump into a coloured grid that fills the screen. When the screen is full, it starts at the beginning again.


We are trying to solve two distinct problems. One is a design problem—we'd like to keep
structural information about how a picture was created. The other is an implementation
problem—we want to store fewer copies of the same data. Both problems result from our
decision to store a picture as a vector<string>
, so we must revisit that decision.
We can solve the implementation problem by managing our data with the Ptr
class
that we developed in Chapter 14. That class will let us store the actual character data in a
single object, and then arrange for multiple pictures to share that same object. For example,
if we frame
a given picture, we will no longer have to copy the characters of the picture
that we're framing. Instead, class Ptr
will manage a reference count associated with
the data, which will indicate how many other pictures are using those data.
The design problem is harder to solve. Each picture that we create has a structure,
which we want to retain. We form a picture either from an initial collection of characters,
or through one of three operations: frame
, to produce a framed picture; and hcat
or
vcat
, to create pictures that are concatenated horizontally or vertically.
In other words, we have four similar kinds of pictures. Despite their similarity, we create them differently, and we would like to keep track of the differences.
Our problem is a perfect match for inheritance: We have various kinds of data structures that are similar to one another, but that differ in ways that we sometimes want to take into account. Each of our data structures is a kind of picture, which implies that inheritance is a sensible way to represent these data structures. We can define a common base class that models the common properties of every kind of picture, and then derive from that base class a separate class for each specific kind of picture that we want to support.
We'll call the derived classes String_Pic
, for pictures created from strings that our
user gives us; Frame_Pic
, for a picture created by framing another picture; and
HCat_Pic
and VCat_Pic
, for pictures that are the result of concatenating two other pictures
horizontally or vertically respectively. By relating these classes through inheritance,
we can use virtual
functions to write code that doesn't always need to know the precise
kind of picture on which it is operating. That way, our users can still use any of our operations
without knowing which kind of picture is being manipulated. We will derive each
of these classes from a common base class, which we shall call Pic_base
, resulting in
the following inheritance hierarchy:
The next question to resolve is whether to make the inheritance hierarchy visible to our users. There seems to be little reason to do so. None of our operations deals with specific kinds of pictures; instead, they all deal with the abstract notion of a picture. So, there is no need to expose the hierarchy. Moreover, because we intend to use a reference- counting strategy, our users will find it more convenient if we hide the inheritance and associated reference counting.
Instead of making our users deal directly with Pic_base
and its associated derived
classes, we'll define a picture-specific interface class. Our users will access that class, freeing
them from having to be aware of any of our implementation's details. In particular,
using an interface class will hide the inheritance hierarchy, along with the fact that our
class relies on Ptr
. Apparently, then we'll need to define six classes: the interface class,
the base class for our inheritance hierarchy, and the four derived classes. We'll call the
interface class Picture
. Internally, Picture
will use a Ptr
to manage its data.
What kind of Ptr
? That is, what type of objects will the Ptr
manage? It will manage
our implementation class, Pic_base
. Thus, class Picture
will have a single data member,
which will have type Ptr<Pic_base>
.
We said that we intend to conceal our use of Pic_base
and its related hierarchy, so
that users will manipulate these objects only indirectly through class Picture
, and will
not access any of these classes directly. It turns out that the most straightforward way to
hide these classes is to rely on the normal protection mechanisms. By giving these classes
an empty public
interface, we can let the compiler enforce our decision that all interactions
with our pictures will be through class Picture
.
To make these decisions concrete, let's write code that captures what we know so far:
// private classes for use in the implementation only class Pic_base { }; class String_Pic: public Pic_base { }; class Frame_Pic: public Pic_base { }; class VCat_Pic: public Pic_base { }; class HCat_Pic: public Pic_base { }; // public interface class and operations class Picture { public: Picture(const std::vector<std::string>& = std::vector<std::string>()); private: Ptr<Pic_base> p; };
Each Picture
object will hold a (private
) Ptr<Pic_base>
object. Class Pic_base
is
the common base class for the four classes that will represent our four kinds of pictures.
The Ptr
class will manage the reference counts to allow us to share the underlying
Pic_base
objects. We will implement each operation on a Picture
by forwarding that
operation through the Ptr
to the underlying derived-class object. We haven't thought yet
about what these operations will be, so for now we've left the bodies of Pic_base
and its derived classes empty.
So far, the Picture
class is pretty simple: The only operation is to create a Picture
from a vector
of string
s. We use a default argument (§7.3/127) to make that vector
optional. If a user constructs a Picture
with no argument, then the compiler will supply
vector<string>()
as an argument automatically, which yields a vector<string>
with no elements. Therefore, the effect of the default argument is to allow us to use a definition
such as
Picture p; // an empty Picture
to create a Picture
with no rows.
Next, we need to think about how to represent our other Picture
operations. We
know that we want to implement frame
, hcat
, and vcat
. What we must decide is how
to do so, and whether these operations should be members of class Picture
. The operations
do not change the state of the Picture
on which they operate, so there is no strong
reason to make them members. Moreover, there is a strong reason not to do so: As we
saw in §12.3.5/220, by making them nonmembers we can allow conversions.
For example, because the Picture
constructor that we have already written is not
explicit
, users will be able to write
vector<string> vs; Picture p = vs;
and the implementation will convert vs
into a Picture
for us. If we wish to allow this
behavior—and we do—then we should also allow users to write expressions such as
frame(vs)
. If frame
were a member, then users would not be able to write the seemingly
equivalent vs.frame()
. Remember that conversions are not applied to the left
operand of the .
operator, so this call would be interpreted as invoking the (nonexistent)
frame
member of vs
.
Moreover, we believe that our users will find it convenient to use an expression syntax to build up complicated pictures. We consider it clearer to write,
hcat(frame(p), p)
than to write
p.frame().hcat(p)
because the first example reflects the symmetry of hcat
's arguments and the second
example conceals it.
In addition to the functions that let us build Picture
s, we will want to define an output
operator that can write the contents of a Picture
. These decisions let us flesh out the
rest of our interface design:
Picture frame(const Picture&); Picture hcat(const Picture&, const Picture&); Picture vcat(const Picture&, const Picture&); std::ostream& operator<<(std::ostream&, const Picture&);
The next step in our design is to fill in the details of the Pic_base
hierarchy. If we look
back at our initial implementation, we'll see that we used the vector<string>::size
function to determine how many strings were in a given picture, and we wrote a separate
width
function (§5.8/91), which proved useful in padding the output. When we
think about how we will display a picture, we see that we are likely to need to be able to
perform these same operations on our classes that are derived from Pic_base
. These
operations will need to be virtual
, so that we can ask any kind of Pic_base
how many
rows it has and how wide its widest row is. Furthermore, because our users will use the
output operator to write the contents of a particular Pic_base
, we can infer that we'll
need another virtual
function to display a given Pic_base
on a given ostream
.
The only one of these operations that needs significant insight is display
. It is easy
to decide that one of the parameters to display
should be the stream on which to write
its output, but figuring out what other parameters display
might take requires that we
think carefully about how it will operate. When we write a Picture
, that Picture
will
comprise one or more component parts, each of which is an object of a class derived from
Pic_base
. If we think about writing a horizontally concatenated picture, it will be
apparent that each row of the output from a single Picture
might involve writing the
corresponding row for more than one subpicture. In particular, we cannot write the
entire contents of one subpicture, and then the entire contents of the other. Instead, we
have to write the contents of each subpicture a row at a time, interleaved with the corresponding
rows of the other subpictures. We can conclude, therefore, that the display
function needs a parameter that says which row to write.
Similarly, when we display
the left-hand part of a horizontally concatenated picture,
we'll need to tell the corresponding subpicture to pad each row to use the full width()
of
itself on each line. We'll also need to tell a picture that is contained within a Frame_Pic
to pad to its widest extent. On the other hand, if we're displaying a Picture
that contains
only a String_Pic
, or a vertically concatenated Picture
composed only of
String_Pic
s, then padding the output results only in writing a lot of unneeded trailing
blanks. So, as an optimization, we'll pass display
a third argument that indicates
whether to pad the output.
These observations lead us to decide that the display
function will take three arguments:
the stream on which to generate the output, the number of the row to write, and a
bool
that will indicate whether to pad the picture to its full width
. With these decisions,
we can fill in the details of the Pic_base
family of classes:
class Pic_base { // no public interface typedef std::vector<std::string>::size_type ht_sz; typedef std::string::size_type wd_sz; virtual wd_sz width() const = 0; virtual ht_sz height() const = 0; virtual void display(std::ostream&, ht_sz, bool) const = 0; };
We start by defining shorthand names for the size_type
s that we'll need in our implementation.
Thinking ahead, we can see that the underlying data will still be a
vector<string>
, so the size_type
member of vector<string>
will be the right
type to represent the height of a picture, and the one from string
will be the one we
need for the width. We'll abbreviate these types as ht_sz
and wd_sz
respectively.
The other task is to define our virtual
functions for the base class, which you'll
notice take a new form: In each case we say = 0
where the body would appear. This syntax
indicates our intention that there be no other definition of this virtual
function.
Why did we define these functions this way?
To answer this question, let's begin by thinking about what the definitions would look
like if we tried to write them. In our design, Pic_base
exists only to act as the common
base class for our concrete picture classes. We will create objects of these concrete types as
a result of executing one of the Picture
operations, or in response to a user's creating a
Picture
from a vector<string>
. None of these operations directly creates or manipulates
Pic_base
objects. If there are never any Pic_base
objects, then what would it
mean to take the height
or width
of a Pic_base
object (as opposed to doing so for an
object of a type derived from Pic_base
)? These operations are needed only for the
derived classes, in which there always will be a concrete picture. For a Pic_base
itself,
there is nothing of which to take the height
or width
.
Instead of forcing us to concoct an arbitrary definition for these operations, the C++
language lets us say that there will be no definition for a given virtual
function. As a
side effect of declining to implement the virtual
function, we also promise that there
will never be objects of the associated type. There may still be objects of types derived
from this type, but there are no objects of its exact type.
The way that we specify that we don't intend to implement a virtual
function is to
say = 0
, as we did on height
, width
, and display
. Doing so makes it a
pure virtual function. By giving a class even a single pure virtual
function, we are also implicitly
specifying that there will never be objects of that class. Such classes are called abstract base classes,
because they exist only to capture an abstract interface for an inheritance hierarchy.
They are purely abstract: There are no objects of the base class itself. Once we give
a class any pure virtual
s, the compiler will enforce our design by preventing us from
creating any objects of an abstract class.
As with virtual
itself, the fact that a function is a pure virtual
is inherited. If a
derived class defines all of its inherited pure virtual
functions, it becomes a concrete
class, and we can create objects of that class. However, if the derived class fails to define
even a single pure virtual
function that it inherits, then the abstract nature is also inherited.
In this case the derived class is itself abstract, and we will not be able to create
objects of the derived class. Because each of our derived classes is intended to model a
concrete class, we know that we have to redefine all of the virtuals in each of the
derived classes.
The only other things we have to think about right now are what data each of our
derived classes will contain, and the associated question of how we will construct objects
of each type. We designed these classes to model the structure of how a picture was
formed. The type of the picture object tells us how it was created: A String_Pic
is created
from character data that a user supplied to us; a Frame_Pic
results from running
frame
on another Picture
, and so on. In addition to knowing how an object was created,
we also need to store the object(s) from which it was created. For a String_Pic
,
we'll need to remember the characters that the user gave us, which we can do in a
vector<string>
. We create a Frame_Pic
by framing another Picture
, so we'll need
to store the Picture
that was frame
d. Similarly, we create HCat_Pic
s and VCat_Pic
s
by combining two other Picture
s. These classes will store the Picture
s used in creating
the resultant new object.
Before settling on a design that stores Pictures in the Pic_base
derived classes, we
should think through the implications of this design a bit more deeply. Class Picture
is
an interface class intended for use by our users. As such, it captures the interface to our
problem domain but not the implementation. Specifically, it does not have height
,
width
, or display
operations. If we think a bit about how these functions might be
implemented, we'll see that we'll need access to the corresponding operations on the
Picture
(s) stored in each of the derived types. For example, to calculate height
of a
VCat_Pic
, we need to add the heights of the two Pictures from which it was formed.
Similarly, we'll obtain the width
by finding the maximum of the width
s of the two component Pictures.
An implication of storing a Picture
in each of the derived classes is that we'll have to
give class Picture
functions that duplicate the Pic_base
operations. Doing so obscures
our initial design intent, which was that class Picture
should be concerned with interface
not implementation. We can maintain our design by realizing that what we need in
the derived classes is not an interface object but an implementation object. This realization
implies that instead of storing a Picture
, we should store a Ptr<Pic_base>
. This
design keeps a clean separation between interface and implementation, while still maintaining
our intention to reference count our implementation objects to avoid unnecessary
data duplication.
Although our design is clean, enough indirection is involved that a picture may help:
Here we assume that we are generating three Picture
s. The first Picture
represents a
String_Pic
object that holds the data that we got from the user. The second one represents
a Frame_Pic
object that we constructed by calling frame
on the initial Picture
.
Finally, we construct a Picture
that represents the output of vcat
run on the two previous
Picture
s. Each Picture
has a single data member, which is a Ptr<Pic_base>
.
That Ptr
points to an object of the appropriate Pic_base
derived type. Each such object,
in turn, contains either the vector
that holds a copy of the data we got from the user, or
one or two Ptr
s that point to the Pic_base
objects used to create the Picture
. Not
shown in this diagram are the reference counts associated with the Ptr
objects, because
we assume that the Ptr
class is doing its job, and we can ignore the details of that job.
What's different from what we did in Chapter 5 is that only String_Pic
contains any
characters. The others hold one or two Ptr
s. Therefore, we won't copy any characters
when we create f or v. Instead, the Ptr
will be yet another reference to the Ptr
s in the
Picture
s that are used in creating a new Picture
, and the Ptr
class will take care of
the reference counting for us. So, when we call frame(pic)
, the effect is to create a new
Frame_Pic
object, and to point its Ptr
at the same String_Pic
that is stored in pic
.
Similarly, the VCat_Pic
contains two Ptr
s pointing to the Frame_Pic
and the
String_Pic
respectively. We will not destroy any of these Pic_base
objects; doing so
is the responsibility of the Ptr
class. It will arrange to destroy each Pic_base
object
when the last Ptr
that refers to each object has gone away.
At this point, we should capture these design decisions in code. We know what data each object will contain, and we know what our operations will be:
class Pic_base { // no public interface typedef std::vector<std::string>::size_type ht_sz; typedef std::string::size_type wd_sz; // this class is an abstract base class virtual wd_sz width() const = 0; virtual ht_sz height() const = 0; virtual void display(std::ostream&, ht_sz, bool) const = 0; }; class Frame_Pic: public Pic_base { // no public interface Ptr<Pic_base> p; Frame_Pic(const Ptr<Pic_base>& pic): p(pic) { } wd_sz width() const; ht_sz height() const; void display(std::ostream&, ht_sz, bool) const; };
Here we say that Frame_Pic
inherits from Pic_base
, and declare our intention to
define class-specific versions of each of the three virtual
s from that base class. Thus,
Frame_Pic
will not be an abstract class, and we will be able to create Frame_Pic
objects.
It is worth noting that we have declared these virtual
s in the private
section of the
class. Doing so lets the compiler enforce our design decision that only class Picture
and
operations on Picture
s can access the Pic_base
hierarchy. Of course, because these
virtual
s are private
, we may need to revisit the class definition to include friend
declarations for class Picture
, or the associated operations, as needed.
The Frame_Pic
constructor needs only to copy the Ptr
from the object that is being
framed, which it does in the constructor initializer. The constructor body is empty,
because there is no other work to do.
Continuing with our other derived classes, the concatenation classes will operate similarly
to Frame_Pic
: Each class will need to remember its two constituent pictures. How
they were concatenated, vertically or horizontally, will be implicit in the type itself:
class VCat_Pic: public Pic_base { Ptr<Pic_base> top, bottom; VCat_Pic(const Ptr<Pic_base>& t, const Ptr<Pic_base>& b): top(t), bottom(b) { } wd_sz width() const; ht_sz height() const; void display(std::ostream&, ht_sz, bool) const; }; class HCat_Pic: public Pic_base { Ptr<Pic_base> left, right; HCat_Pic(const Ptr<Pic_base>& l, const Ptr<Pic_base>& r): left(l), right(r) { } wd_sz width() const; ht_sz height() const; void display(std::ostream&, ht_sz, bool) const; };
The String_Pic
class differs slightly from the others in that it stores a copy of the
vector<char>
that contains the picture's data:
class String_Pic: public Pic_base { std::vector<std::string> data; String_Pic(const std::vector<std::string>& v): data(v) { } wd_sz width() const; ht_sz height() const; void display(std::ostream&, ht_sz, bool) const; };
We still copy the underlying characters from our user's vector
parameter v into our own
member, which is called data
. This is the only place in our entire program that copies
characters. Everywhere else, we copy only Ptr<Pic_base>
objects, which copies pointers
and manipulates reference counts.
Perhaps the most interesting aspect of our design is what isn't here. There are no copy constructors, assignment operators, or destructors. Why?
The reason is that the synthesized defaults work. The vector
class takes care of managing
the space for the initial copy of the characters that our user gives us as part of creating
a new Picture
. If we copy or assign two Picture
s that refer to String_Pic
s, or
we destroy a Picture
, then the Ptr
operations will do the right thing to manage the
Picture
objects, and arrange to delete the underlying String_Pic
at the right time.
More generally, the Ptr
class takes care of copying, assigning, and destroying the Ptr
members in the other Pic_base
classes—and in class Picture
itself.


One of my great memories is driving with my grandfather, riding in his truck filled with a lot of timber, nails and other materials.
He took me to various places, like the top of buildings that were under construction, a huge tunnel, and a new house which was about to be finalized; even though the buyer had never entered it.
In those days, everything I saw, touched and heard had a grand scale.
-----
Nowadays, as a software engineer, I work in the IT field so that people can get the benefit of the another concept: digital.
Through my work, people are able to experience the grand scale of the digital age; the same kind of experience I had with my grandfather many years ago.
The current tide "Everything Goes Digital" is one of the great challenges for me (and for mankind).
While I was doing my job, I sometimes felt discouraged.
As a person who was born in the analog era, then grew up during the digital age, I was unsure how to deal with such dramatic change.
Because of the shift to digital, things were replaced more quickly that I expected, so I didn’t have enough time to prepare for it.
-----
That is why I started my own project "Ancients With Tech".
It is a project that observes and identifies how people adapt to such game changers (cutting edge technologies) in their particular situation.
I will observe several fields to understand the effect of the change to digital.
The first field I will observe is architecture.
There are many unique buildings, houses and landmarks throughout the world, and people adjust the style of them depending on the climate, available materials, lifestyle etc.
It means that every specific place has its own way, its own rule.
I am very interested in this, and want to learn more.
Furthermore, one of the things that I am really interested in is the possibility of humans "surviving" in nature, even if there are no useful tools, equipment or preparation; a lifestyle like our ancestors thousands of years ago. I believe that people who are able to create something from scratch are really strong, and our ancestors had many great achievements.
Nowadays, more and more things are produced, and more and more things are abandoned in our mass consumption society. I want to find out how mankind will react to the new waves of technology to come.
Tasks (with pics, videos)
+ introducing 3D printer - learning
+ planning - ongoing
+ making concept
+ held workshops


Gateway
BOT
16-Jun-19 07:04 PM
[telegram] <miguelborges99> Is it your komodo? Is it? Put the komodo where it belongs and do not release shit software (re @Acura360: It's amazing, the KMD team secured the users' deposits in an emergency situation before the hacker could do it, and then there are users who get upset that they didn't get back 0.8KMD from their secured deposits. What would have been better, the hacker has your KMD and you have nothing, or you get your KMD back and don't complain about the missing ridiculous 0.8KMD ( $1).  Is it?  I'm piss off with all of this
[telegram] <Sergio> Lol stop crying (re @miguelborges99: I do not give a damn, it is missing 0.82856 in my account, put it there: RAjLnzBg5XYzJgDFQmNWSGESc4CZ8463cL)
[telegram] <Acura360> Sended
Tx id
8a9829ba8b7213f5269d7a7b13e7d329efee31343b554c8e0e3f9a18d2b28548
And now stop crying here (re @miguelborges99: It is a question of principle)
[telegram] <miguelborges99> I do not have to be thankful, for what is mine
(edited)
[telegram] <Acura360> I ask you again: What's better - The hacker has your coins, or KMD Team has secured your coin? (re @miguelborges99: I do not to have to be thankful, for what is mine)
[telegram] <Sergio> You are rich now bro (re @miguelborges99: I do not to have to be thankful, for what is mine)
[telegram] <miguelborges99> What was best is not releasing official wallets with hacks
[telegram] <Acura360> Answer my QUESTION (re @miguelborges99: What was best is not releasing official wallets with hacks)
[telegram] <miguelborges99> Your question has a simple answer: If you did not release the wallet with the hack, I would not be here demanding what was mine in the first place, and feeling piss off. I believed in komodo, i payed for it
[telegram] <Rafalloc> Men I can believe this guy
[telegram] <Acura360> Answer my QUESTION (re @miguelborges99: Your question has a simple answer: If you did not release the wallet with the hack, I would not be here demanding what was mine in the first place, and feeling piss off.


Package and un-package modules of some sort (in tar/gz bundles). This is mostly useful for package managers. Note that it doesn't check for or touch package.json
so it can be used even if that's not the way you store your package info.
$ npm install tar-pack
Pack the folder at folder
into a gzipped tarball and return the tgz as a stream. Files ignored by .gitignore
will not be in the package.
You can optionally pass a fstream.DirReader
directly, instead of folder. For example, to create an npm package, do:
pack(require("fstream-npm")(folder), [options])
Options:
noProprietary
(defaults to false
) Set this to true
to prevent any proprietary attributes being added to the tarball. These attributes are allowed by the spec, but may trip up some poorly written tarball parsers.ignoreFiles
(defaults to ['.gitignore']
) These files can specify files to be excluded from the package using the syntax of .gitignore
. This option is ignored if you parse a fstream.DirReader
instead of a string for folder.filter
(defaults to entry => true
) A function that takes an entry and returns true
if it should be included in the package and false
if it should not. Entryies are of the form {path, basename, dirname, type}
where (type is "Directory" or "File"). This function is ignored if you parse a fstream.DirReader
instead of a string for folder.Example:
var write = require('fs').createWriteStream
var pack = require('tar-pack').pack
pack(process.cwd())
.pipe(write(__dirname + '/package.tar.gz'))
.on('error', function (err) {
console.error(err.stack)
})
.on('close', function () {
console.log('done')
})
Return a stream that unpacks a tarball into a folder at folder
. N.B. the output folder will be removed first if it already exists.
The callback is called with an optional error and, as its second argument, a string which is one of:
'directory'
, indicating that the extracted package was a directory (either .tar.gz
or .tar
)'file'
, incating that the extracted package was just a single file (extracted to defaultName
, see options)Basic Options:
defaultName
(defaults to index.js
) If the package is a single file, rather than a tarball, it will be "extracted" to this file name, set to false
to disable.Advanced Options (you probably don't need any of these):
gid
- (defaults to null
) the gid
to use when writing filesuid
- (defaults to null
) the uid
to use when writing filesdmode
- (defaults to 0777
) The mode to use when creating directoriesfmode
- (defaults to 0666
) The mode to use when creating filesunsafe
- (defaults to false
) (on non win32 OSes it overrides gid
and uid
with the current processes IDs)Example:
var read = require('fs').createReadStream
var unpack = require('tar-pack').unpack
read(process.cwd() + '/package.tar.gz')
.pipe(unpack(__dirname + '/package/', function (err) {
if (err) console.error(err.stack)
else console.log('done')
}))
BSD


class Docker::Container
- Docker::Container
- Reference
- Object
Defined in:
docker/container/list_response.crdocker/container/host_config.cr
docker/container/health_check.cr
docker/container/create_body.cr
docker/container.cr
Constant Summary
-
NAME_REGEX =
/\/?[a-zA-Z0-9_-]+/
Constructors
-
.get(id_or_name) : self
returns the first container matching the given ID or name, or raise a Docker::APIClient::NotFound it's not found.
- .new(image : String | Docker::Tag, id, names = [] of String, warnings = STDERR)
Class Method Summary
Instance Method Summary
- #create
-
#get?(id_or_name) : self
returns the first container matching the given ID or name, or nil if it's not found.
- #id : String
- #id=(id : String)
- #image : Docker::Tag
- #image=(image : Docker::Tag)
- #kill
- #logs(follow = true, stdout = true, stderr = true, since = 0, timestamps = false)
- #names : Array(String)
- #names=(names)
- #restart(wait = 5)
-
#start
Start this container.
- #stop(wait = 5)
Constructor Detail
returns the first container matching the given ID or name, or raise a Docker::APIClient::NotFound it's not found. In the case that multiple are found, a Docker::APIClient::Exception will be raised. To get multiple matching containers, use Docker::Containers[] or Docker::Containers.containers, which return instead a (possibly empty) list of all matching containers.
Class Method Detail
Instance Method Detail
returns the first container matching the given ID or name, or nil if it's not found. In the case that multiple are found, only the first will be returned. To get multiple matching containers, use Docker::Containers[] or Docker::Containers.containers, which return instead a (possibly empty) list of all matching containers.
Start this container.
If the container successfully starts, self
is returned (that is, the
method is chainable). If the container is already started, it will output
a warning on the


genpassgen
The Generator of Password Generators
Password Configuration
Length
36
Include characters
Include upper cases (ABC...)
Include lower cases (abc...)
Include numbers (123...)
Include symbols
Password Generator
Please copy and paste into your terminal
Copy to clipboard


Great Dane
| Great Dane Picture | |
| Breed Information | |
|---|---|
| Popularity | 2017: #142016: #142015: #15 |
| Name | Great Dane |
| Other names | Dane, Gentle Giant, Deutsche Dogge, German Mastiff |
| Origin | Germany |
| Breed Group | Working (AKC:1887)Guardian Dogs (UKC) |
| Size | Giant |
| Type | Purebred |
| Life span | 7-10 years |
| Temperament | FriendlyConfidentDevotedIntelligentGentleLovingReserved |
| Height | Male: 30-34 inches (76-86 cm)Female: 28-32 inches (71-81 cm) |
| Weight | Male: 120-200 pounds (54-90 kg)Female: 100-130 pounds (45-59 kg) |
| Colors | BlackBlack & WhiteBlueBrindleFawnHarlequinMantleMerleWhite |
| Litter Size | 10-15 puppies |
| Puppy Price | Average $800 - $1200 USD |
| Breed Characteristics | |
| Adaptability | 3 stars |
| Apartment Friendly | 5 starsThe Great Dane will do okay in an apartment if it is sufficiently exercised. It is relatively inactive indoors and does best with at least a large yard. |
| Barking Tendencies | 2 starsOccassional |
| Cat Friendly | 3 stars |
| Child Friendly | 4 starsGood with Kids: This is a suitable dog breed for kids. It is also shy toward other pets and very friendly toward strangers. |
| Dog Friendly | 3 stars |
| Exercise Needs | 2 starsLike most dogs, Great Danes require daily walks to maintain their health. However, it is important not to over exercise this breed, particularly when young. Great Dane puppies grow very large, very fast, which puts them at risk of joint and bone problems. Because of a puppy's natural energy, Dane owners often take steps to minimize activity while the dog is still growing. |
| Grooming | 1 starsLow Maintenance: The Great Dane has a short, thick, smooth coat. It sheds moderately -- in other words, more than you might think -- but requires little grooming. |
| Health Issues | 4 starsGreat Danes, like most giant dogs, have a fairly slow metabolism. This results in less energy and less food consumption per pound of dog than in small breeds. They have some health problems that are common to large breeds, including bloat (gastric dilatation volvulus). To avoid bloat, a rest period of 40 minutes to one hour after meals is recommended before exercise. Their average lifespan is 6 to 8 years; however, some Great Danes have been known to reach 10 years of age or more. Like many larger breeds, Great Danes are at particular risk for hip dysplasia.Hypoallergenic: No |
| Intelligence | 4 starsRanking: #48. (See All Rankings) |
| Playfulness | 2 stars |
| Shedding Level | 3 starsModerate Shedding: In spring and fall, he will have a heavy shed, known as “blowing out” the coat and will need to be brushed more frequently during that time to get rid of all the loose hair. |
| Stranger Friendly | 3 stars |
| Trainability | 3 starsModerately Easy Training: The Great Dane requires a dominant but not overly harsh trainer. It must be trained early not to pull on the leash, because it grows to a very large size. Obedience training when young is highly recommended for the Great Dane. |
| Watchdog Ability | 5 starsGreat Watchdog Ability: This dog will bark and alert its owners when an intruder is present. It is moderately protective of its owners and are generally considered to be good guardians. |
| Great Dane Puppy Picture | ||
| Puppy Names | ||
|---|---|---|
| Rank | Male | Female |
| 01 | Charlie | Daisy |
| 02 | Duke | Nala |
| 03 | Bear | Lexi |
| 04 | Jack | Lulu |
| 05 | Buddy | Zoey |
| 06 | Jax | Pepper |
| 07 | Oliver | Roxy |
| 08 | Milo | Gracie |
| 09 | Bandit | Sasha |
| 10 | Jackson | Ruby |
| See All Names › |
| Overview |
|---|
|
This regal breed combines great size and power with elegance. It is square-proportioned and well-balanced. Its gait is strong and powerful with long, easy strides. These attributes are necessary in a dog required to overtake and then over-power relatively swift but formidable quarry. Its coat is short, thick and glossy. The Great Dane is most noteworthy for its majestic carriage and appearance — the "Apollo of Dogs." The Great Dane is gentle, loving, easygoing and sensitive. It is generally good with children (although its friendly overtures may overwhelm a small child) and usually friendly toward other dogs and pets. It is powerful but sensitive and responsive to training. It makes a pleasant, well-mannered family companion. |
| History |
| The ancestors of the Great Dane include British mastiffs and possibly wolfhounds, brought to Europe, first by the Romans and later by German aristocrats seeking to improve their hunting dogs. Despite its name, the Great Dane is a German breed. During the 15th and 16th centuries, German forests were filled with game, and hunting wild boar with dogs was a favorite pastime of German nobility. Each lord kept large numbers of boarhounds, which they carefully bred to improve their size, power, and endurance. When game in the forests began to dwindle, the large breeding kennels disappeared but the Great Dane continued to be a favorite with German aristocrats. Great Danes were exhibited at the first German dog show in 1863, and the first Danes were imported into the United States not long thereafter. In this country, Great Danes are popular family companions for people who admire their regal appearance and affectionate personalities. |
Next » Shetland Sheepdog


Remember, I'm just a little mail robot. Don't reply this email directly. Contact us if you want to talk to a human. You are receiving this infrequent policy update email because you have an active account on Trustroots. You can manage your email settings or delete your account and permanently unsubscribe here. Trustroots Foundation, Carpenter Court 1 Maple Road, Bramhall, Stockport, Cheshire, United Kingdom, SK7 2DH


aapl ▲
| Price | 524.49 |
| →Open | 519.175 |
| ↓Low | 519.175 |
| ↑High | 524.99 |
| Volume | 397562 |
| Market |<PHONE_NUMBER>30 |
| Year | 532.1729 -1.44% |
Oct 23 13:39:19 UTC-06:00
Apple Inc.
| Price | 524.49 |
| →Open | 519.175 |
| ↓Low | 519.175 |
| ↑High | 524.99 |
| Volume | 397562 |
| Market |<PHONE_NUMBER>30 |
| Year | 532.1729 -1.44% |
Oct 23 13:39:19 UTC-06:00
| Price | 524.49 |
| →Open | 519.175 |
| ↓Low | 519.175 |
| ↑High | 524.99 |
| Volume | 397562 |
| Market |<PHONE_NUMBER>30 |
| Year | 532.1729 -1.44% |
Oct 23 13:39:19 UTC-06:00
| Price | 524.49 |
| →Open | 519.175 |
| ↓Low | 519.175 |
| ↑High | 524.99 |
| Volume | 397562 |
| Market |<PHONE_NUMBER>30 |
| Year | 532.1729 -1.44% |
Oct 23 13:39:19 UTC-06:00
{ "Name":"Apple Inc", "Symbol":"AAPL", "LastPrice":524.49, "Change":15.6, "ChangePercent":3.06549549018453, "Timestamp":"Wed Oct 23 13:39:19 UTC-06:00 2013", "MSDate": 41570.568969907, "MarketCap":476497591530, "Volume":397562, "ChangeYTD":532.1729, "ChangePercentYTD":-1.44368493773359, "High":52499, "Low":519.175, "Open":519.175 }This is below the top bar