argyleink

export default class CustomElement extends HTMLElement {
  
  constructor() {
    super()
    this.$shadow            = this.attachShadow()
    this.$shadow.innerHTML  = this.render()
  }

  connectedCallback() {}
  disconnectedCallback() {}

argyleink

1. Install Package Resource Viewer.
2. In package control window select ‘Package Resource Viewer: Open Resource’.
3. Scroll down until you find the option: ‘Color Scheme — Default’ (or your theme with color scheme .tmTheme) and select it.
4. Add the following to the end of the node to style selected (scope) syntax tokens cursive:

<dict>
	<key>name</key>
	<string>Mono Tweaks</string>
	scope

argyleink

const module = (deps) => {
  const actuallyPrivate = 'foo'

  return Object.freeze({
    interface
  })
  
  const interface = () =>
    console.log(deps, actuallyPrivate)
}

argyleink

const sugar = {
  on: function(names, fn) {
    names
      .split(' ')
      .forEach(name =>
        this.addEventListener(name, fn))
  },
  setAttributes: function(attrs) {
    Object.entries(attrs)
      .forEach(([key, val]) =>

argyleink

:root {
  --ease-in-quad:       cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic:      cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart:      cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint:      cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo:       cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ:       cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic:     cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart:     cubic-bezier(0.165, 0.84, 0.44, 1);

argyleink

history = [
  1999: 'VRML'
  2000: 'HTML'
  2000: 'CSS'
  2000: 'JavaScript'
  2000: 'XML'
  2005: 'ActionScript2'
  2007: 'Java'
  2007: 'PHP'
  2007: 'MySQL'

argyleink

// this really what it takes to increment a counter on an item in my observable
// likes is a subject, broadcasting the updated array eventually to the source observable being rendered
this.likes
  .map(
    (message: Message): IMessagesOperation =>
      (messages: Message[]) => {
        return messages.map((m: Message) => {
          // todo: check if user has already liked
          if (m.id == message.id) 
            ++m.likes

argyleink

const el = function(options) {
  let node = document.createElement(options.type || 'div')

  if (options.id)     node.id           = options.id
  if (options.class)  node.className    = options.class
  if (options.text)   node.textContent  = options.text
  if (options.html)   node.innerHTML    = options.html

  return node
}

argyleink

var els = document.querySelectorAll('.vh-fix')
if (!els.length) return

for (var i = 0; i < els.length; i++) {
  var el = els[i]
  if (el.nodeName === 'IMG') {
    el.onload = function() {
      this.style.height = this.clientHeight + 'px'
    }
  } else {

argyleink

app.notify = (function() {

  // Determine the correct object to use
  var notification = window.Notification || window.mozNotification || window.webkitNotification || false
    , permission = false
    , note;

  function init() {
    notification && notification.requestPermission(permissionSuccess);
  }