Skip to content

Instantly share code, notes, and snippets.


Thomas Gossmann gossi

View GitHub Profile
gossi /
Last active Sep 19, 2018
Ember Components Element API

Ember Components Element API


I don't know what happens to be there first: Ember Components or Web Components. Actually doesn't matter because markup wise they are pretty identical. You can create a custom element to be used in your HTML markup, next to existing HTML elements. The components itself have to follow a specific naming scheme to distinguish them from regular HTML elements. They should either be written in <kebap-case> or <StudlyCase>. There is also a special syntax for attributes and arguments of ember and glimmer components (arguments are passed with the @ sigil). These are the visually distinction from components to regular HTML elements. From just watching at the markup it is possible to identify regular HTML elements and components, though it is not possible to say whether it is a webcomponent, an ember component or a glimmer component, e.g. <video-player id='abc'> could be either of that.

Over the past years, the DDAU pattern has been established as a data flow to pas

gossi /
Created Jun 23, 2018
Ember Font Awesome High-Order Components

Ember Font Awesome High-Order Components

The idea behind was to have decorators on top of an icon. The idea is taken from eclipse, where it has a "background" icon and then a decorator for each edge (top left, top right, bottom left, bottom right). To stack up icons, such as user in the background and a plus as bottom right decorator.

Luckily this is possible with FA5, see here:

Taken this and combine it with ember, I was able to create this API:

<FaIcon @icon='user' as |icon|>
View propel.yaml
## Sample Propel configuration file ##
# NOTE: Some proposed structure
## General settings ##
# The name of your project.
# This affects names of generated files, etc.
version: 2.0.0-dev
View dabblet.css
* css-variables
:root {
var-bg: red;
div {
margin: 20px;
gossi / gist:5928634
Last active Dec 19, 2015
Keeko Stub App
View gist:5928634
class Stub extends AbstractApp {
public function run(Request $req) {
$router = new ModuleActionRouter('stub', $this->appRouter->getPrefix());
$route = $router->match($this->appRouter->getDestination());
$main = '';
try {
$moduleManager = new ModuleManager($this->classLoader);
gossi /
Last active Jun 9, 2017
Shell script to pull git repositories in vendor/repo format
## Shell script to clone a list of github repositories and run `mvn clean install` on each one of them
## Authors: Robert Gründler, Thomas Gossmann
## Usage: put a file called `repos.txt` in the folder of the script containing the repository URLs, line by line:
gossi / dabblet.css
Created Apr 5, 2012
CSS Animations (auto values)
View dabblet.css
* CSS Animations (auto values)
#anim {
border: 1px solid;
padding: 3px;
background-color: green;
color: white;
width: auto;
transition: width 1s;
gossi / gist:1934685
Created Feb 28, 2012
Bresenham Algorithmus
View gist:1934685
function setPixel(x, y) {
console.log("Pixel auf %s/%s", x, y);
function bresenham(start, end) {
var dx = end.x - start.y,
dy = end.y - start.y,
x = start.x,
y = start.y,
err = dx / 2;
gossi / gist:1307151
Created Oct 23, 2011
Deadlock Problem in JS.Class
View gist:1307151
<!doctype html>
<title>JS.Class loader</title>
<script type="text/javascript">JSCLASS_PATH = 'lib/jsclass-3.0.4/min'</script>
<script type="text/javascript" src="lib/jsclass-3.0.4/min/loader-browser.js"></script>
<script type="text/javascript">
JS.require('JS.Class', function() {
gossi / gist:1044628
Created Jun 24, 2011
Storing php listeners in a database
View gist:1044628
This is about storing php listeners in a database.
Listeners are typically stored on objects waiting for an event using the Observer design pattern. Looks like this:
$myListener = new MyListener();
// or
$myRecord->addListener('event.created', $myListener);
From my point of view, the listener parameter of the addListener method could handle 4 different types of listeners: