{% extends "tutorial.html" %} {% load mixin from templatefilters %} {% block pagebreadcrumb %}{{ tut.title }}{% endblock %} {% block head %} {% endblock %} {% block iscompatible %} return 'import' in document.createElement('link'); {% endblock %} {% block html5badge %} {% endblock %} {% block share_image %} {% endblock %} {% block content %}
HTML Imports are deprecated and was removed from Chrome in February 2020.
Think about how you load different types of resources on the web. For JS, we have

...

<template>
...
</template>
Let this sit. It's exciting stuff.
The <link>
element fires a load
event when an import is loaded successfully
and onerror
when the attempt fails (e.g. if the resource 404s).
Imports try to load immediately. An easy way avoid headaches
is to use the onload
/onerror
attributes:

<link rel="import" href="file.html"
onload="handleLoad(event)" onerror="handleError(event)">
Notice the event handlers are defined before the import is loaded on the page. The browser tries to load the import as soon as it encounters the tag. If the functions don't exist yet, you'll get console errors for undefined function names.
Or, if you're creating the import dynamically:
var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html';
//link.setAttribute('async', ''); // make it async!
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);
Including an import on a page doesn't mean "plop the content of that file here". It means "parser, go off an fetch this document so I can use it". To actually use the content, you have to take action and write script.
A critical aha!
moment is realizing that an import is just a document. In fact, the content of an import is called an import document. You're able to manipulate the guts of an import using standard DOM APIs!
To access the content of an import, use the link element's .import
property:
var content = document.querySelector('link[rel="import"]').import;
link.import
is null
under the following conditions:
<link>
doesn't have rel="import"
.<link>
has not been added to the DOM.<link>
has been removed from the DOM.Full example
Let's say warnings.html
contains:

Warning!

This page is under construction

Heads up!

This content may be out of date

Importers can grab a specific portion of this document and clone it into their page:

<link rel="import" href="warnings.html">

...

Imports are not in the main document. They're satellite to it. However, your import can still act on the main page even though the main document reigns supreme. An import can access its own DOM and/or the DOM of the page that's importing it:
Example - import.html that adds one of its stylesheets to the main page
<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">

...

Notice what's going on here. The script inside the import references the imported document (document.currentScript.ownerDocument
), and appends part of that document to the importing page (mainDoc.head.appendChild(...)
). Pretty gnarly if you ask me.
A script in an import can either execute code directly, or define functions to be used by the importing page. This is similar to the way modules are defined in Python.
Rules of JavaScript in an import:
document
. So window.document
refers to the main page document. This has two useful corollaries:window
.
</template>
index.html

<link rel="import" href="import.html">

Custom Elements is another Web Component technology that plays absurdly well with HTML Imports. Imports can execute script, so why not define + register your custom elements so users don't have to? Call it..."auto-registration".
elements.html

<template id="t">

I'm a shadow-element using Shadow DOM!
<content></content>
</template>

This import defines (and registers) two elements, <say-hi>
and <shadow-element>
. The first shows a basic custom element that registers itself inside the import. The second example shows how to implement a custom element that creates Shadow DOM from a <template>
, then registers itself.
The best part about registering custom elements inside an HTML import is that the the importer simply declares your element on their page. No wiring needed.
index.html

<link rel="import" href="elements.html">

<say-hi name="Eric"></say-hi>
<shadow-element>

( I'm in the light dom )

</shadow-element>

In my opinion, this workflow alone makes HTML Imports an ideal way to share Web Components.
Yo dawg. I hear you like imports, so I included an import in your import.
It can be useful for one import to include another. For example, if you want to reuse or extend another component, use an import to load the other element(s).
Below is a real example from Polymer. It's a new tab component (<paper-tabs>
) that reuses a layout and selector component. The dependencies are managed using HTML Imports.
paper-tabs.html (simplified):
<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">
<dom-module id="paper-tabs">
<template>

<iron-selector class="layout horizonta center">
<content select="*"></content>
</iron-selector>
</template>

</dom-module>
App developers can import this new element using:
<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>
When a new, more awesome <iron-selector2>
comes along in the future, you can swap out <iron-selector>
and start using it straight away. You won't break your users thanks to imports and web components.
We all know that loading JQuery more than once per page causes errors. Isn't this going to be a huge problem for Web Components when multiple components use the same library? Not if we use HTML Imports! They can be used to manage dependencies.
By wrapping libraries in an HTML Import, you automatically de-dupe resources. The document is only parsed once. Scripts are only executed once. As an example, say you define an import, jquery.html, that loads a copy of JQuery.
jquery.html

This import can be reused in subsequent imports like so:
import2.html
<link rel="import" href="jquery.html">

Hello, I'm import 2

ajax-element.html
<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">

Even the main page itself can include jquery.html if it needs the library:

<link rel="import" href="jquery.html">
<link rel="import" href="ajax-element.html">

...

Despite jquery.html being included in many different import trees, it's document is only fetched and processed once by the browser. Examining the network panel proves this:
HTML Imports are totally awesome but as with any new web technology, you should use them wisely. Web development best practices still hold true. Below are some things to keep in mind.
Reducing network requests is always important. If you have many top-level import links, consider combining them into a single resource and importing that file!
Vulcanize is an npm build tool from the Polymer team that recursively flattens a set of HTML Imports into a single file. Think of it as a concatenation build step for Web Components.
Many people forget that the browser's networking stack has been finely tuned over the years. Imports (and sub-imports) take advantage of this logic too. The http://cdn.com/bootstrap.html
import might have sub-resources, but they'll be cached.
Think of content as inert until you call upon its services. Take a normal, dynamically created stylesheet:
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
The browser won't request styles.css until link
is added to the DOM:
document.head.appendChild(link); // browser requests styles.css
Another example is dynamically created markup:
var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';
The h2
is relatively meaningless until you add it to the DOM.
The same concept holds true for the import document. Unless you append it's content to the DOM, it's a no-op. In fact, the only thing that "executes" in the import document directly is

Depending on your app structure and use case, there are several ways to optimize async behavior. The techniques below mitigate blocking the main page rendering.
Scenario #1 (preferred): you don't have script in
or inlined in
My recommendation for placing

Everything is at the bottom.
Scenario 1.5: the import adds itself
Another option is to have the import add its own content. If the import author establishes a contract for the app developer to follow, the import can add itself to an area of the main page:
import.html:

...

index.html

<link rel="import" href="/path/to/import.html">

Scenario #2: you have script in
or inlined in
If you have an import that takes a long time to load, the first

...

Alternatively, add the import near the end of the
:

...

Note: This very last approach is least preferable. The parser doesn't start to work on the import content until late in the page.
An import's mimetype is text/html
.
Resources from other origins need to be CORS-enabled.
Imports from the same URL are retrieved and parsed once. That means script in an import is only executed the first time the import is seen.
Scripts in an import are processed in order, but do not block the main document parsing.
An import link doesn't mean "#include the content here". It means "parser, go off an fetch this document so I can use it later". While scripts execute at import time, stylesheets, markup, and other resources need to be added to the main page explicitly. Note,


Programming languages and tools that I use in my day-to-day.
Python, Spark, SQL, git, GitHub, Postgres, PostGIS, QGIS
Specific Python packages that I have proficiency with.
pandas, numpy, scipy, scikit-learn, matplotlib, seaborn, pytest, h2o, SimPEG
Cloud and DevOps-specific tools I have experience of.
AWS (EC2, EMR, S3), Dask, Docker, Kubeflow, Hadoop, Ansible, CircleCI, Jenkins
Domain expertise gained during my work experiences.
Geospatial analysis, Geophysical modeling, Financial services, Semiconductor Manufacturing


Serious
Definitions:
- thoughtful or subdued in appearance or manner.
- acting or speaking sincerely and in earnest, rather than in a joking or halfhearted manner.
- significant or worrying because of possible danger or risk; not slight or negligible.


Hi, I am interested in contributing. I certainly meet all your criteria and get the whole "its free" thing.
I'm just a Software Engineer who's gotten to a point in my job where I am not doing much coding, but still thoroughly enjoy doing it when I can.  If you'd care to check it out its at:
http://bf3battlereports.appspot.com
Its pretty buggy right now and doesn't quite look like they way I want but I think its not a bad start.
I'm pretty impressed w/ what you've done and would appreciate helping out.


PING PONG
Wan't To Play A Game
These are the Rules
Numbers divisible by 3 are replaced with "ping"
Numbers divisible by 5 are replaced with "pong"
Numbers divisible by 15 are replaced with "pingpong"
Enter your number here:
Ping Pong!


Points
Multiplier
Time
?
?
?
?
START CHALLENGE
GAME OVER!
ONCE AGAIN
Date
Score
Nationality
Your result:
Final result
Date
Score
Nationality


This topic shows how Java and JavaFX applications can be accessed from JavaScript code, and how JavaScript code can be accessed from Java and JavaFX applications.
An application can communicate with the web page in which it is embedded by using a JavaScript engine. The host web page can also communicate to embedded applications using JavaScript.
|
Note: To a large extent, this functionality is based on the Java-to-JavaScript communication bridge that is implemented in the Java Plug-in. Therefore, much of the available documentation and examples for Java applets are also applicable to JavaFX applications. For more information about the Java implementation, see the Java LiveConnect documentation. |
This topic contains the following sections.
To access a Java or JavaFX application from JavaScript, the first step is to get a reference to a JavaScript object that represents the application. The easiest way to get the reference is to use a standard JavaScript getElementById()
function, using the name attribute of the applet tag, as shown in Example 16-1. The <fx:deploy> ant task automatically generates the applet tag, and the name is taken from the id
attribute of the <fx:application>.
Example 16-1 Use JavaScript to Access an Application Object ID
var app = document.getElementById("myMapApp")
The result corresponds to the main class of the application.
By getting the reference to a JavaScript object, you can use JavaScript code to access any public methods and fields of a Java object by referencing the Java objects as fields of the corresponding JavaScript object. After you have the app
reference, you can do something similar to the following code statement:
var r = app.doSomething()
The implementation of the doSomething()
method in Java code returns a Java object. The variable r
becomes a reference to the Java object. You can then use code such as r.doSomethingElse()
or app.dosomethingWithR(r)
. For example, Example 16-2 contains Java code, and Example 16-3 contains JavaScript that interacts with that code. Look at both examples to see how they work together.
Example 16-2 Java Code Example
package testapp; public class MapApp extends Application { public int ZOOM_STREET = 10; public class City { public City(String name) {...} ... } public int currentZipCode; public void navigateTo(City location, int zoomLevel) {...} .... public City getCity(String cityName) {...} .... }
The JavaScript snippet in Example 16-3 passes several values to the Java code in Example 16-2. Before these values are used in the Java code, they are automatically converted to the closest Java type.
Example 16-3 JavaScript Code for Example 16-2
function navigateTo(cityName) { //Assumes that the applet tag uses "myMapApp" as the name for this application var mapApp = document.getElementById("myMapApp"); if (mapApp != null) { var city = mapApp.getCity(cityName); mapApp.navigateTo(city, mapApp.ZOOM_STREET); return mapApp.currentZipCode; } return "unknown"; } window.alert("Area zip: " + navigateTo("San Francisco"));
The JavaScript string, numeric, and Boolean objects can be converted into most of the Java primitive typesBoolean, byte, char, short, int, long, float, and doubleand java.lang.String
.
For JavaScript objects representing Java objects (in other words, objects that have previously been returned from Java), conversion results in extracting a reference to that Java object.
Conversion into one and multidimensional arrays is supported according to rules similar to rules for conversion of individual objects. If conversion cannot be performed successfully, then the JavaScript engine raises an exception.
All Java objects returned to the web browser are associated with a particular application instance. References held by the JavaScript engine to Java objects act as persistent references, which prevent that Java object from being garbage-collected in the hosting JVM. However, if a particular application is destroyed, for example by leaving the web page hosting the application or by detaching the application from the HTML DOM tree, then references are immediately invalidated and further attempts to use those object in JavaScript raise exceptions.
For more information about data type conversion and object lifetimes, see
http://jdk6.java.net/plugin2/liveconnect/#JS_JAVA_CONVERSIONS
|
Note: If a Java object has overloaded methods, which are multiple methods with the same name but different sets of argument types, then the method with the closest types is used. For information, see the Java LiveConnect documentation.The general recommendation is to avoid overloaded methods if you plan to use them from JavaScript code. |
See Invoking JavaScript Code From an Applet in the Java Tutorial for information on communication between the applet and host web page.
JavaFX applications can call the following JavaScript components:
Functions
The get
, set
, and remove
fields of JavaScript objects
The get
and set
elements of JavaScript arrays
JavaFX applications can also evaluate JavaScript code. Through the JavaScript DOM APIs, JavaFX applications can modify the web page dynamically by adding, removing and moving HTML elements.
To bootstrap JavaFX-to-JavaScript communication, the JavaFX application must get a reference to the JavaScript window object containing the application. This reference can be used for subsequent operations such as evaluation, function calls, and fetches of variables.
Both the main and preloader application can get this reference by accessing the HostServices
class in the JavaFX API and requesting getWebContext()
, as shown in Example 16-4.
Example 16-4 Access the HostServices Class from JavaFX Code
public class MyApp extends Application { private void communicateToHostPage() { JSObject jsWin = getHostServices().getWebContext(); //null for non-embedded applications if (jsWin != null) { //use js ... } } ... }
All instances of JavaScript objects, including references to the DOM window, appear within Java code as instances of netscape.javascript.JSObject.
Example 16-5 shows how to use JavaScript to implement a function to resize an embedded application with id='myMapApp'
at runtime.
Example 16-5 Use JavaScript to Resize an Application in the Browser
public void resizeMyself(int w, int h) { JSObject jsWin = getHostServices().getWebContext(); if (jsWin != null) { jsWin.eval("var m = document.getElementById('myMapApp');" + "m.width=" + w + "; m.height=" + h + ";"); } else { // running as non embedded => use Stage's setWidth()/setHeight() } }
JavaFX applications embedded in a web page can call JavaScript methods in a web page after the init()
method is called for the preloader or main application class.
JavaScript code can access Java applications at any time, but if the application is not ready yet, then the request might be blocked until the application is ready. Specifically for JavaFX applications, this happens if the init()
method of the main application class has not finished yet and the main application did not perform calls to the web page itself. A JavaScript call from the preloader does not fully unblock JavaScript-to-Java communication.
Most browsers use single-threaded JavaScript engines. When blocking occurs, the host web page and the browser appear to be frozen.
To access an application from the host web page early and avoid blocking, either notify the web page when the application is ready by calling a Java function from the application, or use an onJavascriptReady
callback in the Ant task.
Example 16-6 shows an HTML template for an Ant task that uses an onJavascriptReady
callback to call the doSomething()
method in the main application without blocking the browser.
Example 16-6 HTML Input Template for an Ant Task
   #DT.SCRIPT.CODE#  #DT.EMBED.CODE.ONLOAD#

Example 16-7 shows the relevant part of the Ant task used to generate an HTML page from the template in Example 16-6. For this example, it is assumed that the template has the path src/web/test_template.html
.
Example 16-7 Ant <fx:deploy> Task to Generate an HTML Page from a Template
<fx:deploy placeholderId="ZZZ" ...> .... <fx:template file="src/web/test_template.html" tofile="dist/test.html"/> <fx:callbacks> <fx:callback name="onJavascriptReady">earlyCallFunction</fx:callback> </fx:callbacks> </fx:deploy>
Java code called from JavaScript is executed on a special thread that is not the JavaFX application thread. Use the Platform.runLater()
method in the JavaFX code to ensure that something is executed on the JavaFX application thread.
In general, return as quickly as possible from functions that are called from JavaScript. In most modern browsers, JavaScript engines are single-threaded. If the call sticks, then the web page can appear frozen, and the browser is unresponsive. Specifically, avoid writing code that waits for work to be done on a JavaFX application thread. If JavaScript code depends on the result of this work, use a callback from Java to notify the JavaScript code of the result of the execution of the work.
Example 16-8 shows an example of code to avoid in JavaScript.
Example 16-8 Naive implementation Blocking JavaScript Thread
function process(r) { window.alert("Result: "+r); } var result = myApp.doSomethingLong(); process(result);
Example 16-9 shows a better pattern to follow in JavaScript code.
Example 16-9 A Better Implementation of Example 16-8
function process(r) { window.alert("Result: "+r); } myApp.doSomethingLong(function(r) {process(r);});
Example 16-10 shows a better example in Java code.
Example 16-10 Java Code Using a Callback
public void doSomethingLong(JSObject callback) { Object result; //do whatever is needed to get result //Invoke callback // callback is a function object, and every function object // has a "call" method Object f[] = new Object[2]; f[0] = null; //first element is object instance but this is global function //not applying it to any specific object f[1] = new String(result); //real argument callback.call("call", f); }
Java code can call JavaScript from any thread, including the JavaFX application thread. However, if the JavaScript engine in the browser is busy, then a call to JavaScript might stick for some time. If there is a call on the JavaFX application thread, then it might make your application appear frozen, because it is not able to update the screen and handle user events. To avoid this situation, offload execution of LiveConnect calls from the JavaFX application thread.
JavaScript code on the web page can always make calls to an application on the page. JavaScript code can also access all public methods and fields of Java classes loaded by the application. However, when a JavaScript-to-Java call is made, the call is treated as a call from the sandbox environment. Also, if the HTML document and the application originate from different sites, then JavaScript on the web page cannot cause any network connections to be made on its behalf.
Aside from this restriction, calling Java from JavaScript does not have any other consequences if the application is running in the sandbox. However, if the application has requested elevated permissions, then a call to a Java method from JavaScript is executed in the sandbox without elevated permissions, and a security warning is issued. If elevated permissions are needed, then AccessController.doPrivileged
in the Java API can be used to request them in the trusted code.
Be careful not to expose APIs in your applications that would accidentally confer additional privileges on untrusted JavaScript code. If you must grant elevated privileges to JavaScript code, serve your application over verifiable HTTPS connections, and perform checks to ensure that the document base of the web page hosting the application is the same as the expected origin of the application's code.
This section contains a sample that demonstrates how to use communication between JavaFX and JavaScript to integrate JavaFX web applications with the browser. Example 16-11 shows a JavaFX application that creates a tab pane on a web page, with 20 tabs.
Example 16-11 Create Tabs on the Embedding Web Page
public class TabbedApp extends Application { Group root = new Group(); TabPane tabPane = new TabPane(); public void init() { // Prepare tab pane with set of tabs BorderPane borderPane = new BorderPane(); tabPane.setPrefSize(400, 400); tabPane.setSide(Side.TOP); tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE); for(int i=1; i<=20; i++) { final Tab t = new Tab("T" + i); t.setId(""+i); Text text = new Text("Tab "+i); text.setFont(new Font(100)); BorderPane p = new BorderPane(); p.setCenter(text); t.setContent(p); tabPane.getTabs().add(t); } borderPane.setCenter(tabPane); root.getChildren().add(borderPane); } @Override public void start(Stage primaryStage) throws Exception { primaryStage.setScene(new Scene(root)); primaryStage.show(); } }
This application can be further improved to save the history of visited tabs into the browser history. This enables users to click the Back and Forward buttons in the browser to move between tabs.
The implementation is based on the onhashchange
event introduced in HTML 5 and described at
http://www.whatwg.org/specs/web-apps/current-work/#event-hashchange
The JavaScript technique used by AJAX applications to achieve a similar effect is to save a reference to the current selection in the hash part of the document URL. When the user clicks the Back button, the URL is updated, and a selection state can be extracted that must be restored.
To implement this solution, two new methods are added to the sample: onNavigate()
and navigateTo()
. The onNavigate()
method is called whenever a new tab is selected. This method delivers information about the new selection to the web page by calling the JavaScript method navigateTo()
and passing the tab ID to it. The JavaScript code saves the tab ID in the URL hash.
The navigateTo()
method is responsible for reverse synchronization. After the web page URL is changed, this method is called with the ID of the tab to be selected.
Example 16-12 shows the updated code of the application. The code that is different from Example 16-11 appears in bold.
Example 16-12 Improved Application that Saves Tab History
public class TabbedApp extends Application { Group root = new Group(); TabPane tabPane = new TabPane(); public void init() { // Prepare tab pane with set of tabs BorderPane borderPane = new BorderPane(); tabPane.setPrefSize(400, 400); tabPane.setSide(Side.TOP); tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE); for(int i=1; i<=20; i++) { final Tab t = new Tab("T" + i); t.setId(""+i); Text text = new Text("Tab "+i); text.setFont(new Font(100)); BorderPane p = new BorderPane(); p.setCenter(text); t.setContent(p); // When tab is selected, notify web page to save this in the // browser history t.selectedProperty().addListener(new ChangeListener<Boolean>() { public void changed(ObservableValue<? extends Boolean> ov, Boolean tOld, Boolean tNew) { if (Boolean.TRUE.equals((tNew))) { onNavigate(t.getId()); } } }); tabPane.getTabs().add(t); } borderPane.setCenter(tabPane); root.getChildren().add(borderPane); } @Override public void start(Stage primaryStage) throws Exception { primaryStage.setScene(new Scene(root)); primaryStage.show(); } public void navigateTo(String tab) { for (Tab t: tabPane.getTabs()) { if (tab.equals("#"+t.getId())) { tabPane.getSelectionModel().select(t); return; } } } private void onNavigate(String tab) { JSObject jsWin = getHostServices().getWebContext(); // Null for nonembedded applications if (jsWin != null) { //use js jsWin.eval("navigateTo('" + tab + "')"); } } }
Part of the implementation logic is in the HTML page. Example 16-13 shows a page that is used as an input template in an Ant script. When the Ant script is run, it inserts code to embed the JavaFX application next to the custom JavaScript code. For more information about input templates, see <fx:template>.
The implementation of JavaScript functions is straightforward. The onhashchange
attribute of the
tag is used to subscribe to notifications of updates of the hash part of the URL. After the event is obtained, the JavaFX application is embedded in the web page, and the navigateTo()
method is called.
If the application calls with an update on the selected tab, it is saved to the hash part of the URL.
Example 16-13 HTML Template Used as Input to the Ant Script
   #DT.SCRIPT.CODE#  #DT.EMBED.CODE.ONLOAD#
Test page

For completeness, Example 16-14 shows the Ant script used to deploy this sample. The application is created with the ID tabbedApp
. The JavaScript code uses this ID to find the application on the page. and the HTML template uses it to embed the application into the custom HTML page that is produced by the Ant task.
Example 16-14 Ant Script to Package the Application
<fx:application id="tabbedApp" name="Example of browser integration" mainClass="docsamples.TabbedApp"/> <fx:jar destfile="dist/docsamples/tabbedapp.jar"> <fx:application refid="tabbedApp"/> <fileset refid="appclasses"/> </fx:jar> <fx:deploy width="400" height="400" outdir="dist-web" outfile="BrowserIntegrationApp"> <fx:info title="Doc sample"/> <fx:application refid="tabbedApp"/> <fx:template file="src/template/TabbedApp_template.html" tofile="dist-web/TabbedApp.html"/> <fx:resources> <fx:fileset requiredFor="startup" dir="dist/docsamples"> <include name="tabbedapp.jar"/> </fx:fileset> </fx:resources> </fx:deploy>


The fields on this page automatically have accessible markup added to their labels to assist screen-reading tools. For more information, please see IDS Github Issues #421 and #2118


orca-c
A C-port of the ORCA live programming environment.
ORCA is an esoteric programming language for creating procedural sequencers.
More information: home page
- Start ORCA with an empty workspace:
orca-c
- Start ORCA and open a specific file:
orca-c path/to/file.orca
- Start ORCA and set a specific tempo (defaults to 120):
orca-c --bpm beats_per_minute
- Start ORCA and set the size of the grid:
orca-c --initial-size columnsxrows
- Start ORCA and set the maximum number of undo steps (defaults to 100):
orca-c --undo-limit limit
- Show the main menu inside of ORCA:
F1
- Show all shortcuts inside of ORCA:
?
- Show all ORCA operators inside of ORCA:
Ctrl + g


You will need Visual Studio 2017.
Begin by downloading the codebase for the webapp, go to the git repo https://github.com/Knowzy/KnowzyInternalApps and clone or download the content onto your local computer.
Most of the work has already been done to make sure that your site works well across different devices, but you will need to make a few adjustments to the code base to ensure that it flows properly for screens of all sizes. You should also make sure that the webapp works across platforms, since some of the Knowzy contractors carry Android tablets instead of Windows 10 devices.
You should have the code repo on your local device. Open the folder \src\Knowzy_Shipping_WebApp
and run your web site locally by double-clicking the "Microsoft.Knowzy" Visual Studio file to see the webapp project that you are starting with.
Open up your site.css file at the following path:
\wwwroot\css\site.css
and find the following declaration toward the top of the page:
.container-main {
width: 800px;
padding-right: 15px;
padding-left: 15px;
margin: 0 auto;
}
Add a declaration for the "container-main" class inside of a media query. Media queries resize the page properly for different screen sizes. You will want to create media queries with style declarations for the screen sizes of 320px, 768px, 992px, and 1200px like below:
@media all and (min-width:320px) {
.container-main {
width: 100%;
}
}
@media all and (min-width:768px) {
.container-main {
width: 750px;
}
}
@media all and (min-width:992px) {
.container-main {
width: 970px;
}
}
@media all and (min-width:1200px) {
.container-main {
width: 1170px;
}
}
Be sure to add these rules below the "container-main" rule, so the media queries will override the width of the main rule.
View your web app in a browser (you can do this by hitting F5 in visual studio or clicking on the start button), and adjust the width of your window to test responsiveness of the design. If you have a tablet device, you can change the orientation of your device to make sure that the page response properly.
Your app is now ready to be viewed on devices with different screen sizes and orientations.
Now that you have these powerful new features running locally, you can publish them to your website on Azure.
In Visual Studio select the "Microsoft.Knowzy.WebApp" in the solution explorer, then choose Build > Publish...
NOTE: Some configurations of Visual Studio may have the "publish" option as its own menu.
Choose "Microsoft Azure App Service" from the selection screen
Sign into your Azure account to create a new Azure App Service. If you do not have an Azure subscription, please ask one of the proctors for one!
NOTE: We recommend that you use the default Web App Name to avoid conflicts. You may also have to press "Create" more than once to confirm the creation of the App Service, the Resource Group, and the App Service Plan.
Hit "Create" and wait for your web app to finish deploying.
Keep track of the "Site URL" after creating your web app; you'll want to use this later.
When attempting to deploy, you may run into an issue where Azure complains that a certain .dll is locked. If this is the case, you'll have to perform the following steps:
Press restart on the top menu bar (see 3 in the figure below)
Once your web app has finished restarting, re-deploying your web app should be successful.


apps
brush
exposure
spellcheck
home
Welcome!
Today is:
DATE
Week Of
9/14/2020 - 9/18/2020
Monday
Save
Tuesday
Save
Wednesday
Save
Thursday
Save
Friday
Save


{% extends "unified-base.html" %} {% set page_type = "spec" %} {% block content %}
The {%include "blurb-top.html"%} based on the top {{n_parses}} {{spec}} M+ {%if dungeon!="all"%}{{ dungeon }}{%endif%} logs ({{n_uniques}} unique characters) from the past 4 weeks, ranging in difficulty from +{{key_min}} to +{{key_max}}.


tips: if you leave any input empty and submit the sign in form, the form will shake to prompt you to fill the form.


The integration settings tab allows you to configure integrations with other programs. You can have zEdit attempt to automatically detect integrations by clicking the Detect button or set them up manually.


Event listings are scattered on multiple platforms such as facebook, newspapers, blogs - making it difficult to find something to do in the moment.
hypothesis and solutionDevelop a location-based mobile app that allows users to find an event based on their mood or discover events happening in their neighborhood.
key responsibilitiesUser research, feature definition, usability testing, visual design, and UX.
Through early product discovery we decided based on the concept of our app, urban millenials would be the best target persona. I conducted research with millenials across Seattle to uncover what their biggest pain point surrounding event discovery was. The majority of the users I researched mentioned scroll fatigue - meaning that they were exhausted with having to scroll through listings on multiple platforms to find something relevant to them. For our MVP we decided on adding deep filtering, such as filtering by mood, neighborhood (for a hyber local experience) as well as time of day to reduce the listings and meet the user halfway. Following MVP we had intentions to integrate with their social networks such as Spotify and Facebook and use machine learning to provide a more curated list of events.


--- layout: post title: Weariness date: '2010-02-23T00:00:00-05:00' tags: - '2010' tumblr_url: http://poetry.liabogoev.com/post/49084466237/weariness ---
Weariness, greedy and alone,
Settles into the bones,
It seeps into joints,
Leeching into muscle
Until movement becomes an arduous ordeal.
It saps the strength, the determination,
The will to continue.
Consumes the courage
So carefully constructed.
It does not march,
Does not decimate,
Does not erase you into oblivion.
Perhaps it would be better.
Instead, it nibbles at the foundation,
Weakening from within,
Coerced into defeat,
You crumple to your knees.
Take me, take me.
But exhaustion does not kill your body.

Your spirit broken,
Its slumped shrunken form,
Fades on the road behind.


Faction Ranking Dialog
This dialog ranks all factions in the game by their current and historical possessions. The dialog is divided into two tab pages described separately.
- Tables Page
- Graphs Page
- Choose OK or press Enter to dismiss the dialog. Pressing Escape or closing the window using X (Close) or Alt+F4 has the same effect.
- Choose Help or press F1 to show this help page.
Remarks
This dialog appears automatically at the end of a game, opened on the Graphs Page.


Module: ActiveSupport::MessagePack::CacheSerializer
| Relationships & Source Files | |
| Super Chains via Extension / Inclusion / Inheritance | |
|
Instance Chain:
self,
Serializer
|
|
| Defined in: | activesupport/lib/active_support/message_pack/cache_serializer.rb |
Constant Summary
Serializer
- Included
Instance Attribute Summary
Instance Method Summary
Serializer
- Included
Instance Method Details
#install_unregistered_type_handler (private)
[ GitHub ]# File 'activesupport/lib/active_support/message_pack/cache_serializer.rb', line 18
def install_unregistered_type_handler Extensions.install_unregistered_type_fallback( ) end
#load(dumped)
[ GitHub ]# File 'activesupport/lib/active_support/message_pack/cache_serializer.rb', line 11
def load(dumped) super rescue ActiveSupport::MessagePack::MissingClassError # Treat missing class as cache miss => return nil end


Some say, the pipe (#tidyverse) makes analyses in R easier. I agree. This post demonstrates some examples.
Let’s take the mtcars
dataset as an example.
data(mtcars)
?mtcars
Say, we would like to compute the correlation between gasoline consumption (mpg
) and horsepower (hp
).
Base approach 1
cor(mtcars[, c("mpg", "hp")])
## mpg hp
## mpg 1.0000000 -0.7761684
## hp -0.7761684 1.0000000
We use the [
-operator (function) to select the columns; note that df[, c(col1, col2)]
sees dataframes as matrices, and spits out a dataframe, not a vector:
class(mtcars[, c("mpg", "hp")])
## [1] "data.frame"
That’s ok, because cor
expects a matrix or a dataframe as input. Alternatively, we can understand dataframes as lists as in the following example.
Base approach 2
cor.test(x = mtcars[["mpg"]], y = mtcars[["hp"]])
##
## Pearson's product-moment correlation
##
## data: mtcars[["mpg"]] and mtcars[["hp"]]
## t = -6.7424, df = 30, p-value = 1.788e-07
## alternative hypothesis: true correlation is not equal to 0
## 95 percent confidence interval:
## -0.8852686 -0.5860994
## sample estimates:
## cor
## -0.7761684
the [[
-operator extracts a column from a list (a dataframe is technically a list), and extracts it as a vector. This is useful as some functions, such as cor.test
don’t digest dataframes, but want vectors as input (here x, y).
Pipe approach 1
We will use dplyr
for demonstrating the pipe approach.
library(dplyr)
mtcars %>%
select(mpg, hp) %>%
cor
## mpg hp
## mpg 1.0000000 -0.7761684
## hp -0.7761684 1.0000000
If you are not acquainted with dplyr, the %>%
operator can be translated as then do
. More specifically, the result of the the lefthand side (lhs) is transferred as input to the righthand side (rhs).
Easy, right?
Pipe approach 2
We will need broom
here, a package that renders some R output into a nice (ie, tidy) dataframe. For example, cor.test
does not spit a nice dataframe when left in the wild. Applying tidy()
from broom
on the output, we will get a nice dataframe:
library(broom)
cor.test(x = mtcars[["mpg"]], y = mtcars[["hp"]]) %>% tidy
## estimate statistic p.value parameter conf.low conf.high
## 1 -0.7761684 -6.742389 1.787835e-07 30 -0.8852686 -0.5860994
## method alternative
## 1 Pearson's product-moment correlation two.sided
# same:
tidy(cor.test(x = mtcars[["mpg"]], y = mtcars[["hp"]]))
## estimate statistic p.value parameter conf.low conf.high
## 1 -0.7761684 -6.742389 1.787835e-07 30 -0.8852686 -0.5860994
## method alternative
## 1 Pearson's product-moment correlation two.sided
This code can be made simpler using dplyr:
mtcars %>%
do(tidy(cor.test(.$mpg, .$hp)))
## estimate statistic p.value parameter conf.low conf.high
## 1 -0.7761684 -6.742389 1.787835e-07 30 -0.8852686 -0.5860994
## method alternative
## 1 Pearson's product-moment correlation two.sided
The function do
from dplyr
runs any function, provided it spits a dataframe. That’s why we first apply tidy
from broom
, and run do
afterwards.
The .
dot refers to the dataframe as handed over from the last step. We need this piece because cor.test
does not know any variable by the name mpg
(unless you have attached mtcars
beforehands).
This code produces the same result:
mtcars %>%
do(cor.test(.$mpg, .$hp) %>% tidy) %>%
knitr::kable()
| estimate | statistic | p.value | parameter | conf.low | conf.high | method | alternative |
|---|---|---|---|---|---|---|---|
| -0.7761684 | -6.742388 | 2e-07 | 30 | -0.8852686 | -0.5860994 | Pearson’s product-moment correlation | two.sided |
Pipe appraoch 3
The package magrittr
provides some pipe variants, most importantly perhaps the “exposition pipe”, %$%
:
mtcars %$%
cor.test(mpg, hp) %>%
tidy
## estimate statistic p.value parameter conf.low conf.high
## 1 -0.7761684 -6.742389 1.787835e-07 30 -0.8852686 -0.5860994
## method alternative
## 1 Pearson's product-moment correlation two.sided
Why is it useful? Let’s spell out the code above in more detail.
- Line 1: “Hey R, pick up
mtcars
but do not simply pass over this dataframe, but pull out each column and pass those columns over” - Line 2: “Run the function
cor.test
withhp
andmpg
” and then … - Line 3: “Tidy the result up. Not necessary here but quite nice”.
Remember that cor.test
does not accept a dataframe as input. It expects two vectors. That’s why we need to transform the dataframe mtcars
to a bundle of vectors (ie., the columns).
Recap
In sum, I think the pipe makes life easier. Of course, one needs to get used to it. But after a while, it’s much simpler than working with deeply nested [
brackets.
Enjoy the pipe!


Recursion
A small repo exploring how recursion works.
Underbar
A rewrite of many of the functions of the underbar library.
Data-Structures
A library of some of the basic data-structures.
Blackjack
A basic blackjack application used to learn about BackboneJS.


--- layout: archive title: Zulip Chat Archive permalink: /stream/113488-general/topic/behaviour.20of.20simpa.20changed.html ---
A few of my proofs have broken since the recent changes to simpa
. For example this one.
lemma zero_pow {α : Type*} [semiring α] {n : ℕ} (hn : 0 < n) : (0 : α) ^ n = 0 := by cases n; simpa [_root_.pow_succ, lt_irrefl] using hn
It fails if it solves the goal without using hn
You should just use by cases n; simp [_root_.pow_succ, lt_irrefl, hn]
here. simpa
is not supposed to be a replacement for simp
Last updated: Apr 24 2020 at 19:02 UTC


How to beat Trilla Suduri in Star Wars Jedi: Fallen Order
Use The Force.
by Asher MadanTrilla Suduri may be the final boss in Star Wars Jedi: Fallen Order, but she's much easier than the annoying Taron Malicos. She can't block your Force attacks so you're good to go. The trick to defeating Trilla Suduri is to keep on freezing time.
The video tells you exactly what you need to do. For this strategy to work, be sure you've unlocked the All Lightsaber Attacks Do More Damage skill and the skill that allows you to restore Force whenever you're healed by BD-1. The video below tells you exactly what you need to do.
The Xbox One X version features a 1440p 30 frames per second (FPS) mode and a 1080p 60 FPS mode. In order to tighten up the controls, you should engage the Performance option. Hopefully, this guide helped you if you were struggling to take down this fearsome beast.
- Related: How to beat Oggdo Bogdo in Star Wars Jedi: Fallen Order
- Related: How to beat AT-ST in Star Wars Jedi: Fallen Order
Hopefully, this guide helped you get through this challenging battle. Keep in mind that this boss was defeated on Jedi Grandmaster difficulty. If you chose another setting, the fight is much easier because Trilla Suduri does less damage.
Find the Force
Star Wars Jedi: Fallen Order
Don't stand out
Star Wars Jedi: Fallen Order is EA's first story-driven Star Wars action game, following the events of Star Wars: Revenge of the Sith. From Respawn Entertainment of Titanfall and Apex Legends fame, Star Wars Jedi: Fallen Order will be an unmissable experience.
Get more Xbox
Xbox
- Xbox One S vs. Xbox One X: Which should you buy?
- Best Xbox One X and Xbox One S Accessories
- Best Xbox One Headsets 2019
- Best Xbox One Wireless Headsets 2019
- Best Xbox Controller Charging Stations in 2019
We may earn a commission for purchases using our links. Learn more.


The athletes from Sweden entering the stadium at the opening ceremonies of the 2010 Winter Olympics
The swedish Lion
Svenska Grammofonstudion, Gothenburg Sweden


{{- define "main" -}} {{- partial "nav-btn.html" . -}} {{- partial "navigation.html" . -}}
Sadly, this website needs a good internet connection to work normally.


|
AWS IoT Device SDK C++ v2 1.14.0
AWS IoT Device SDK C++ v2
|
#include <GreengrassCoreIpcModel.h>
Public Member Functions | |
| JsonMessage () noexcept | |
| JsonMessage (const JsonMessage &)=default | |
| void | SetMessage (const Aws::Crt::JsonObject &message) noexcept |
| Aws::Crt::Optional< Aws::Crt::JsonObject > | GetMessage () noexcept |
| void | SerializeToJsonObject (Aws::Crt::JsonObject &payloadObject) const noexcept override |
| bool | operator< (const JsonMessage &) const noexcept |
| Public Member Functions inherited from Aws::Eventstreamrpc::AbstractShapeBase | |
| AbstractShapeBase () noexcept | |
| virtual | ~AbstractShapeBase () noexcept |
Static Public Member Functions | |
| static void | s_loadFromJsonView (JsonMessage &, const Aws::Crt::JsonView &) noexcept |
| static Aws::Crt::ScopedResource< AbstractShapeBase > | s_allocateFromPayload (Aws::Crt::StringView, Aws::Crt::Allocator *) noexcept |
| static void | s_customDeleter (JsonMessage *) noexcept |
| Static Public Member Functions inherited from Aws::Eventstreamrpc::AbstractShapeBase | |
| static void | s_customDeleter (AbstractShapeBase *shape) noexcept |
Static Public Attributes | |
| static const char * | MODEL_NAME = "aws.greengrass#JsonMessage" |
Protected Member Functions | |
| Aws::Crt::String | GetModelName () const noexcept override |
Additional Inherited Members | |
| Protected Attributes inherited from Aws::Eventstreamrpc::AbstractShapeBase | |
| Crt::Allocator * | m_allocator |
|
inlinenoexcept |
|
default |
|
inlinenoexcept |
|
overrideprotectedvirtualnoexcept |
Implements Aws::Eventstreamrpc::AbstractShapeBase.
|
noexcept |
|
staticnoexcept |
|
staticnoexcept |
|
staticnoexcept |
|
overridevirtualnoexcept |
Implements Aws::Eventstreamrpc::AbstractShapeBase.
|
inlinenoexcept |
|
static |


Luna and McFly
Luna's favorite toys
- Nyla Bone
- Plush toy
- Rope pull
- Wacky Ball
- Treat Dispensing ball
McFly's favorite toys
- plush mouse
- cat nip
- feather toy
- scratching post
Luna's favorite foods
- Sweet Potato
- Chicken
- Egg
- What baby is eating
- Anything else offered
McFly's favorite foods
- Hot Cheetos
- Strawberries
- Broccoli
- Cream of mushroom soup
Luna's favorite activities
- Lazing in the sun
- Going for morning walks
- Nap time
- Fetch
- Tug 'o war
McFly's favorite activities
- sleeping
- running around at 3 am
- cuddling with her favorite people
McFly is a grey long-haired cat, she has green eyes and a fluffy tail. She loves to cuddle and have her belly rubbed.
Luna is a mix breed, originally a stray from Oklahoma who ended up a shelter and transported to Oregon. She was adopted from a shelter in Albany and soon became an important member of the family.