tomcon

function decorate(tag, template) {
  customElements.define(tag, class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }
    
    connectedCallback() {
      let root = this.shadowRoot;
      if(!root.firstChild) {

tomcon

Magnolia JS 2019 - Web Components & Svelte workshop links

Web Components

• Google Developer Web Components guide
• Custom Elements Spec
• Web Component versions of reactjs.org sample apps

Svelte

tomcon

{
  "name": "project-name",
  "description": "Template for static sites",
  "version": "1.0.0",
  "homepage": "http://www.project-name.com",
  "author": {
    "name": "Adam Buczynski",
    "url": "http://adambuczynski.com"
  },
  "license": "UNLICENSED",

tomcon

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; // importing xmlhttprequest package because node doesn't support it out of the box
const superHeroes = ['Batman', 'Superman', 'WonderWoman', 'Flash', 'Cyborg', 'Aquaman', 'Green Lantern', 'Martian Manhunter']; // an array of request params
const completedFetchingData = () => { // function to be called when all ajax requests complete.
  console.log('Just completed fetching the data');
}
const failedFetchingData = () => { // function to be called when data fetching fails
  console.log('Failed to fetch the data');
}

const ajaxRequestWithPromise = (param) => {

tomcon

# Redis Cheatsheet
# All the commands you need to know


redis-server /path/redis.conf  # start redis with the related configuration file
redis-cli                      # opens a redis prompt


# Strings.

tomcon

declare module '*.svelte' {
    type Data = { [key]: any }
    type Changed = { [key]: boolean }
    type Listener = { cancel: () => void }

    export default class Component {
        root: Component
        options: Data

        constructor(init: { target: Element, data: Data })

tomcon

update

I've created a little repository that simply exposes the final utility as npm module.

It's called html-escaper

---

there is basically one rule only: do not ever replace one char after another if you are transforming a string into another.

tomcon

-- This is the result I want:
-- 
--  foo | bar | description
-- -----+-----+-------------
--    3 |   4 | two
--    1 |   2 | four
--    5 |   6 | five
-- 
-- Which I can get with this query, but can I do it
-- more simply?

tomcon

var hw = (function () {
	'use strict';

	function noop() {}

	function assign(tar, src) {
		for (var k in src) tar[k] = src[k];
		return tar;
	}

tomcon

export function observe(key, callback, opts) {
  const single = !Array.isArray(key);
  const keypaths = single ? [ key ] : key;
  const parts = keypaths.map(keypath => keypath.replace(/\[(\d+)\]/g, '.$1').split('.'));
  const keys = parts.map(parts => parts[0]);
  const fn = callback.bind(this);

  let last = parts.map(parts => getNestedValue(this.get(), parts));

  if (!opts || opts.init !== false) {