wolfadex

window.customElements.define("elm-portal", class extends HTMLElement {
  // Base custom element stuff
  constructor() {
    super();
    this._targetNode = document.createElement('div');
  }

  connectedCallback() {
    document.querySelector(this.getAttribute("data-target-selector")).appendChild(this._targetNode);
  }

davelevine

How to Properly Cache Content Hosted on Backblaze B2

Summary

Because I use Cloudflare to manage my domains and Backblaze for backups, it only made sense to take advantage of their Bandwidth Alliance for creating my own CDN. This has been incredibly helpful for image hosting for this knowledge base, however, I recently noticed that caching wasn't working as it should.

The Problem

The overall problem started when I was adding a parking page for a domain I recently purchased. The background image was hosted on B2 and the image was supposed to be cached by Cloudflare. However, each time the page loaded, it would pull the image from the origin instead of the cache. I checked this on my knowledge base and found it was doing the same thing.

Yarith

Elm: Animate the removal of DOM elements with CustomElement and MutationObserver

Desired result

You can see the end result in this ellie. It displays a smooth removal of the clicked items. You can also remove some items from the beginning or the end.

Version 1

https://ellie-app.com/cvCV93KgD56a1

Version 2

An updated ellie with improved performance. This gist was not yet updated with all changes made in this version. Only the article text is somewhat updated.

derekbarber

func downloadAndSaveAudioFile(_ audioFile: String, completion: @escaping (String) -> Void) {
        
        //Create directory if not present
        let paths = NSSearchPathForDirectoriesInDomains(FileManager.SearchPathDirectory.libraryDirectory, FileManager.SearchPathDomainMask.userDomainMask, true)
        let documentDirectory = paths.first! as NSString
        let soundDirPathString = documentDirectory.appendingPathComponent("Sounds")
        
        do {
            try FileManager.default.createDirectory(atPath: soundDirPathString, withIntermediateDirectories: true, attributes:nil)
            print("directory created at \(soundDirPathString)")

nandorojo

I started using React Native in September 2018. I always forget some things when I build new apps, so I'll keep track of the gotchas on this post.

Some topics, such as navigation, will be fundamental to how I think about apps. Others, will be one-line helpers that make apps work more smoothly.

It's gotten to the point where I find my own answers from 6 months before on certain Github issues.

I'll keep adding over time as I think of more. If anyone thinks these topics would be useful, let me know and I'll elaborate.

I have made libraries to address a number of the topics here, from navigation to design.

Chadtech

Super Preliminary Elm - Web Assembly Research

Back in December 2017, I started working on something I called Elmish-Wasm, which was just an experimental repo to compile something Elm-like to Wasm. I made some progress, but the helpful people I talked and I came to the conclusion that most of what I had so far (Haskell and Regex to interpret .elm files into rudimentary wasm) was something the Elm compiler and the Elm AST already did. Writing that code was a lot of fun, but maybe not the most valuable way to explore Elm and WebAssembly. Before jumping back into this project I would like to record the important facts and questions related to compiling Elm to Wasm.

What is Wasm?

A lot of people talk about Web Assembly as if its C++ that runs in the browser. Thats not the case. This belief must come from that fact that C can currently compile to web assembly. Wasm is human-unreadable bytecode. There is a human-readable version of wasm, called wat. It looks like this..

;; A function that adds two numbe

amir-arad

// https://raw.githubusercontent.com/donnut/typescript-ramda/master/ramda.d.ts
// https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/lodash/lodash.d.ts

declare namespace fp {

    interface Dictionary<T> {
        [index: string]: T;
    }

    interface CurriedFunction1<T1, R> {

praveenpuglia

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

Daniel-Hug

// Check if rectangle a contains rectangle b
// Each object (a and b) should have 2 properties to represent the
// top-left corner (x1, y1) and 2 for the bottom-right corner (x2, y2).
function contains(a, b) {
	return !(
		b.x1 < a.x1 ||
		b.y1 < a.y1 ||
		b.x2 > a.x2 ||
		b.y2 > a.y2
	);

cassiocardoso

#!/bin/sh
echo Install all AppStore Apps at first!
# no solution to automate AppStore installs
read -p "Press any key to continue... " -n1 -s
echo  '\n'

echo Install and Set San Francisco as System Font
ruby -e "$(curl -fsSL https://raw.github.com/wellsriley/YosemiteSanFranciscoFont/master/install)"
echo Install Homebrew, Postgres, wget and cask
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"