Skip to content

Commit

Permalink
query_events code
Browse files Browse the repository at this point in the history
  • Loading branch information
alexanderkirtzel committed Sep 14, 2022
1 parent 2200ab5 commit 885b5c2
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 11 deletions.
26 changes: 15 additions & 11 deletions 220916-code_talks/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,29 +49,22 @@ XXX result of a measurement plan overview
## Implementation layer

### Data lifecycle

0. Using
1. Reporting
2. Analyzing
3. Storing
4. Distributing
5. Collecting
6. Implementing <-- We're here now
7. Planning
How about **data collection as code**

- central source of truth
- documentation
- living standard
- vendor-agnosticism
- destination mapping

XXX example measurement.json
See [measurementplan.ts](./measurementplan.ts) as a declarative example.

> Recommendation: Create an implementation layer as a part of your data collection. Make it easy to contribute.
## Event 'n' context

XXX Update to real Blog or Article example

```json5
{
event: "newsletter signup", // combination of entity and action
Expand Down Expand Up @@ -132,6 +125,17 @@ Descriptive markup language based on HTML-attributes.
Benefits of a descriptive approach
Selectors and action

```js
// Test the ENTITY ACTION event
[data-elb="ENTITY"][data-elbaction="visible:ACTION"]
document.querySelector('[data-elb="ENTITY"][data-elbaction="visible:ACTION"]').scrollIntoView();

document.querySelector('[data-elb="ENTITY"][data-elbaction="visible:ACTION"]').click();

```

See [query_events.js](./query_events.js) for a code example to list all events and properties.

> Recommendation: Constant monitoring. No legacy code.
## Discussion
Expand Down
30 changes: 30 additions & 0 deletions 220916-code_talks/query_events.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Example to demonstrate the advantages of a descritpve approach

// Loop all entities
queryScope(document.body, "[data-elb]", function (entity) {
console.log(`------`);
const entityName = entity.getAttribute("data-elb");

// Loop all acctions
queryScope(entity, "[data-elbaction]", function (action) {
const actionName = action.getAttribute("data-elbaction");
console.log("event", entityName, actionName);
});

// Get all properties
const properties = [];
const propertyAttr = `data-elb-${entityName}`;
queryScope(entity, `[${propertyAttr}]`, function (prop) {
properties.push(prop.getAttribute(propertyAttr));
});
console.log("properties", properties);
});

// Ugly helper functions, please just ignore it and look above
function queryScope(scope, selector, func) {
[scope, ...scope.querySelectorAll(selector)]
.filter((el) => el.matches(selector))
.map((elem) => {
func.call(scope, elem);
});
}

0 comments on commit 885b5c2

Please sign in to comment.