余凡 nightire

## cancelable-fetch.js
import { Yieldable } from 'ember-concurrency';
import fetch from 'fetch'; // i.e. ember-fetch. could also use native fetch too.

class FetchYieldable extends Yieldable {
  constructor(url, opts = {}) {
    super(...arguments);
    this.url = url;
    this.opts = opts;
  }

## build.js

/* IMPORT */

const esbuild = require ( 'esbuild' );
const {nodeExternalsPlugin} = require ( 'esbuild-node-externals' );
const monex = require ( 'monex' );
const path = require ( 'path' );
const {color, parseArgv} = require ( 'specialist' );
const Watcher = require ( 'watcher' );

## idea.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              4 stars
            
          
                gossi
                / idea.md
            
            
              Last active
              March 19, 2021 13:33
            
              
                Ember: Universal a11y helpers
              
          
    Universal a11y Helpers

Given the WAI ARIA authoring practices tell you quite good how a particular widget shall behave. What - in case you are developing such a widget as a glimmer component - if you want to write tests for them? What if there is an already ready library of tests to use for them? If you as a developer did a good job and have all the markup done properly, the tests can entirely work on the accessibility tree on top of your markup. If not, the tests will fail anyway.
What about having an ember addon, that provides this a11y test library? In case you are developing a new component, you take that library and throw their tests at your code, without ever writing them yourself and be assured your component is a11y compliant. That library would do a service to the whole ember community.
Example

Here is an example, I've just finished writing. It is the first iteration, I found it quite well and useful and lead me to writing this. Basically, I was

  
## README.md

      
              3 files
            
          
              13 forks
            
          
              8 comments
            
          
              38 stars
            
          
                jose-mdz
                / README.md
            
            
              Last active
              April 18, 2024 05:26
            
              
                Orthogonal Diagram Connector
              
          
    Orthogonal Connectors

This algorithm returns the points that form an orthogonal path between two rectangles.
How to Use

// Define shapes
const shapeA = {left: 50,  top: 50, width: 100, height: 100};
const shapeB = {left: 200, top: 200, width: 50, height: 100};

  
## README.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              4 stars
            
          
                jose-mdz
                / README.md
            
            
              Last active
              December 9, 2023 03:37
            
              
                Draw round corners path in JavaScript
              
          
    Round Corner Path

[x] Tested
Usage

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const points = [
 {x: 100, y: 100},

  
## types.ts

// when T is any|unknown, Y is returned, otherwise N
type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;

// when T is never, Y is returned, otherwise N
type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

// when T is a tuple, Y is returned, otherwise N
// valid tuples = [string], [string, boolean],
// invalid tuples = [], string[], (string | number)[]

## LargestContentfulPaintBookmarklet.js
/**
 * A bookmarklet for viewing the largest contentful paint in a page.
 * Will show each LCP after the bookmarklet is clicked.
 *
 * To install:
 * 1. Copy the code starting from the line beginning `javascript:`
 * 2. Add a new bookmark in Chrome, and paste the code in as the URL.
 **/
javascript:(function(){
  try {

## example.hbs
{{#if (match-media "(max-width:800px)")}}
  MediaQuery matches
{{  else}}
  MediaQuery doesn't match
{{/if}}

## application.hbs
<AnimatedOrphans />{{outlet}}

## index.html
<!doctype html>
<html>
  <head>
    <title>Glimmer Demo</title>
  </head>
  <body>
    <script src="./app.bundle.js"></script>
    <example-app />
  </body>
</html>
	import { Yieldable } from 'ember-concurrency';
	import fetch from 'fetch'; // i.e. ember-fetch. could also use native fetch too.

	class FetchYieldable extends Yieldable {
	constructor(url, opts = {}) {
	super(...arguments);
	this.url = url;
	this.opts = opts;
	}

	/* IMPORT */

	const esbuild = require ( 'esbuild' );
	const {nodeExternalsPlugin} = require ( 'esbuild-node-externals' );
	const monex = require ( 'monex' );
	const path = require ( 'path' );
	const {color, parseArgv} = require ( 'specialist' );
	const Watcher = require ( 'watcher' );

	// when T is any\|unknown, Y is returned, otherwise N
	type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;

	// when T is never, Y is returned, otherwise N
	type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

	// when T is a tuple, Y is returned, otherwise N
	// valid tuples = [string], [string, boolean],
	// invalid tuples = [], string[], (string \| number)[]
	/**
	* A bookmarklet for viewing the largest contentful paint in a page.
	* Will show each LCP after the bookmarklet is clicked.
	*
	* To install:
	* 1. Copy the code starting from the line beginning `javascript:`
	* 2. Add a new bookmark in Chrome, and paste the code in as the URL.
	**/
	javascript:(function(){
	try {
	{{#if (match-media "(max-width:800px)")}}
	MediaQuery matches
	{{ else}}
	MediaQuery doesn't match
	{{/if}}
	<!doctype html>
	<html>
	<head>
	<title>Glimmer Demo</title>
	</head>
	<body>
	<script src="./app.bundle.js"></script>
	<example-app />
	</body>
	</html>