Skip to content

Instantly share code, notes, and snippets.

@begedin
begedin / ajvar.md
Created January 15, 2024 21:03
Ajvar

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

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:

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

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
begedin / testing-micro-addons.md
Created July 6, 2015 10:22
Testing micro-addons

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
begedin / ember-micro-addon-implementation.md
Last active August 29, 2015 14:23
Implementation techniques used in ember-micro-addon

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
/// <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
begedin / paging-code.js
Last active August 29, 2015 14:01
Simple implementation of paging on a collection in knockout.
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
begedin / ko.scrollTo.js
Created May 8, 2014 06:12
ScrollTo binding for knockout
// 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
begedin / TouchYCoordinate
Created November 21, 2013 21:06
Shift the y coordinate of the touch position to work from bottom instead of top.
Vector2 touchPos = new Vector2(Gdx.input.getX(), camera.viewportHeight - Gdx.input.getY());
@begedin
begedin / Camera
Last active December 29, 2015 00:59
How to set LibGDX Orthographic Camera to start at bottom left.
camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());