begedin

Ingredients

• 5kg of red horn pepper. green works to, but it's gonna look weird
• 3kg of egg plant, classic purple kind
  • you can vary this a bit, but usually the ration is 1:2 to 3:5
• 1 entire head of garlic
• 0.5 liter of vegetable, rapeseed or sunflower oil. basically any that doesn't have a strung flavor and has a high heat resistance
• chilli peppers to taste
• various spices to taste listed below
• sugar

begedin

Including the library

Sadly, elements is not a separate library.

It's just a part of the still in development Stripe.js v3, so the only way to include it is to include the whole script in the page somewhere. There is no bower library, no amd/require/commonjs package of any sort.

This is the only way to include it:

begedin

Note: Once you read through this, I recommend at some point watching a video on Vimeo which really helped me

• https://vimeo.com/148529508
• the git repository where the code from the video is kept is at https://github.com/poteto/component-best-practices

What are components all about.

The general idea behind it is the same one we have behind a web component in general. Right now, in HTML, we have elements. Each element has some sort of behavior and meaning behind it. <p> is a paragraph, <h1> is a header, and they are both meant to work as such. There isn't a lot of behavior tied to thise, but there is to some of the more advanced elements such as <input>, <audio> or <video>.

Components are intended to be something like a new custom HTML element, albeit we use it in our templates, not actual HTML. Still, ti's supposed to be something that encapsulates behavior and presentation of a single UI element, meant to be used for a specific purpose. In this analogy

• the data we bound to a componet woul

begedin

What we have right now

We have a simple, flat file structure with the scripts that need testing named component.js, library.js and helper.js depending on the type of micro-addon. A micro-component additionally has a style.css and a template.hbs, but those are not really tested directly, and would only be tested indirectly, via component.js.

What happens with those files right now is that, when the addon is being consumed in a parent app, there are hooks in the addon's index.js script which cause the files during build time, to get renamed and copied to their proper, ember addon defined locations within the app\ folder of the parent app.

What we would want

I think ideally, we would want a tests.js file within the existing flat file structure. Depending on the type of micro-addon, this file would contain a unit test module either for a component, or a general unit test in case of a library and/or helper.

begedin

How is the flat file structure working within an ember-app?

The addon's entry point, index.js is key here.

The addon exposes several hooks during addon/app build-time, several of which are treeForX where X is some part of the app/addon. In our case, depending on the addon type, we hook into one or more of theese hooks, at which point, we restructure and rename the files on the fly, so they're conventionally placed and named by the time the parent app tries to load them.

For components

• treeForApp moves component.js to app/components/addonName.js
• treeForTemplate moves template.hbs to app/templates/components/addonName.hbs

begedin

/// <summary>
/// A knockout computed observable that supports async data.
/// To use it, set a function that returns a deferred object, for instance, an AJAX call as the parameter. 
/// While using AJAX, if server data isn't in proper format, you can use $.ajax().pipe() to map it correctly.
/// http://api.jquery.com/deferred.pipe/
/// 
/// There are two helper observables added to the asyncComputed
///     .inProgress returns true if data is not yet loaded (is currently being loaded)
///     .loaded is the opposite and returns true if data has been loaded
/// </summary>

begedin

function Paging(itemSet) {
    /// <summary>Component used to apply paging on a provided collection. Requires knockout.</summary>
    /// <param name="itemSet" type="ko.observableArray or Array">Collection to apply the paging on.</param>

    var self = this;

    self.page = ko.observable(1);                   // currently active page, starts from 1 for increased "user friendliness"
    self.itemsPerPage = ko.observable(20);          // currently selected number of items per page

    self.itemsPerPageOptions = [10, 20, 50, 100];   // available options for number of items per page

begedin

// usage: data-bind="scrollTo: booleanObservable"
// will scroll to this item if observable is true
// made by eselk of stack excahnge: http://stackoverflow.com/users/1042232/eselk
// found in thread: http://stackoverflow.com/questions/10126812/knockout-js-get-dom-object-associated-with-data
ko.bindingHandlers.scrollTo = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        console.log(value);
        if (value) {
            var scrollParent = $(element).closest("div");

begedin

 Vector2 touchPos = new Vector2(Gdx.input.getX(), camera.viewportHeight - Gdx.input.getY());

begedin

camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());