profile
viewpoint
Mike Reinstein mreinstein DreamingBits LLC Oakland, CA https://reinstein.me

issue commentatomiks/tippyjs

Official Preact, Vue, Angular, etc. Tippy.js Components

I'd be willing to pay someone to develop an open source wrapper for snabbdom https://github.com/snabbdom/snabbdom

molnarmark

comment created time in 2 days

issue openedsnabbdom/snabbdom

open to a PR that updates all README examples to es modules?

using commonjs is a pattern that the community is trying to move away from. Given snabbdom already supports es modules, would you be open to a PR that stops referencing require in the README.md in favor of esm? Would look something like this for the inline example:

import { h, init } from 'snabbdom';
import classModule from 'snabbdom/modules/class';
import propsModule from 'snabbdom/modules/props';
import styleModule from 'snabbdom/modules/style';
import eventModule from 'snabbdom/modules/eventlisteners';


// Init patch function with chosen modules
const patch = init([
	classModule,  // makes it easy to toggle classes
	propsModule,  // for setting properties on DOM elements
	styleModule,  // handles styling on elements with support for animations
	eventModule   // attaches event listeners
]);

Happy to send a PR if this is a welcome addition!

created time in 2 days

startedsnabbdom/snabbdom

started time in 2 days

PR opened davidkpiano/xstate

simplify the install instructions
  • -S is no longer needed; npm install adds to package.json by default now.
  • npm install is more readable/newbie friendly than npm i
  • README is shorter and more approachable with redundant install instructions removed
+1 -5

0 comment

1 changed file

pr created time in 9 days

push eventmreinstein/xstate

Mike Reinstein

commit sha c811098aa5fbcb938bb58305ffa96273580254c7

simplify the install instructions * `-S` is no longer needed; npm install adds to package.json by default now. * `npm install` is more readable/newbie friendly than `npm i` * README is shorter and more approachable with redundant install instructions removed

view details

push time in 9 days

fork mreinstein/xstate

State machines and statecharts for the modern web.

https://xstate.js.org/docs

fork in 9 days

issue openeddavidkpiano/xstate

xstate throws errors when used with rollup

Bug or feature request?

Bug

Description:

Using the most basic possible rollup configuration with xstate results in several errors during the bundling process

proof-of-concept:

rollup.config.js:

import resolve from 'rollup-plugin-node-resolve';

export default {
  plugins: [
    resolve()
  ]
};

index.js:

import { Machine, interpret } from 'xstate';


const storypointsMachine = Machine({
  id: 'storypoints',
  initial: 'inactive',
  states: {
    inactive: {
        on: {
            INIT: 'active'
        }
    },
    active: {
        on: {
            DESTROY: 'destroyed'
        }
    }
  }
});

build command:

rollup index.js -c rollup.config.js --format=iife

Output of build command:

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modules/xstate/es/utils.js
1: var __assign = this && this.__assign || function () {
                  ^
2:     __assign = Object.assign || function (t) {
3:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 7 other occurrences
node_modules/xstate/es/mapState.js
1: var __values = this && this.__values || function (o) {
                  ^
2:     var m = typeof Symbol === "function" && o[Symbol.iterator],
3:         i = 0;
...and 1 other occurrence
node_modules/xstate/es/StateNode.js
1: var __assign = this && this.__assign || function () {
                  ^
2:     __assign = Object.assign || function (t) {
3:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 9 other occurrences

...and 6 other files
created stdout in 321ms

created time in 9 days

startedReactiveX/rxjs

started time in 12 days

startedentropic-dev/entropic

started time in 12 days

issue commentwasdk/WebAssemblyStudio

Use kiwi.js instead of Cassowary?

All 3 of the aforementioned bullets have equivalents in kiwi.js see https://github.com/IjzerenHein/kiwi.js/issues/17 for details on these.

Also, shameless plug, if you're looking for something a little higher level where you can specify a set of equations as a string, I wrote/maintain constraint-solver npm module, which layers on top of the latest kiwi.js: https://github.com/mreinstein/constraint-solver

JobLeonard

comment created time in 13 days

startedcheckly/puppeteer-recorder

started time in 21 days

pull request commentatomiks/tippyjs

[WIP] V5

one thing that would be super nice (and if this is difficult it's not that big of a deal) but I'd love to be able to have another environment variable I could pass in at the build step, which changes the default bundled theme. e.g., if I wanted to bundle material with my tippy build:

NAMESPACE=acmecorp THEME=material npm run build

I know we talked about this in #484 and it was not trivial, but maybe now that you're already in there doing a major version bump this isn't that crazy of a change? :-)

atomiks

comment created time in 22 days

pull request commentatomiks/tippyjs

[WIP] V5

It would be nice if you could change the prefix at runtime instead of build-time. The CSS files are the main problem.

I actually think it's superior having it done at build time. I have no need to dynamically change this, and having less javascript and other crap around at run time is all the better.

Many of the websites that host these 3rd party widgets have piles upon piles of 3rd party junk running. Anything I can do to make it more static and cut down on the amount of unnecessary dynamism helps make the experience better.

atomiks

comment created time in 22 days

pull request commentatomiks/tippyjs

[WIP] V5

@mreinstein, what your thoughs on that?

Thanks for reaching out!

To be honest I'm not sure I understand what is being suggested in the above PR comment. I can tell you what my use case is: I'm embedding tippy as a 3rd party module that gets embedded on some very large retail websites, and they have particular demands about not polluting their web page globals with styles and/or javascript.

Here is what my build process looks like when I'm including tippy in distributed code:

git clone git@github.com:atomiks/tippyjs.git
cd tippyjs
npm install
NAMESPACE=acmecorp npm run build
cp umd/index.all.min.js ~/Sites/acmecorp/scripts/lib/tippy/index.all.min.js

Then I copy the contents of tippyjs/themes/light-border.css into a css variable in acmecorp/scripts/lib/tippy/tippy.js

This means that all tippy related css starts with acmecorp-, including the light-border plugin related css. Because this stuff is namespaced the big clients we have don't freak out when we embed our code/styles on their web pages, because they know acmecorp- is our styles and it won't conflict. Anyway sorry for the length of this post, just wanted to illuminate the use case behind #484 in more detail. I'm really hoping this doesn't break with v5 🙏

atomiks

comment created time in 22 days

issue commentatomiks/tippyjs

tippy doesn't position where I'd expect with large html content

thank you for the clarification!

popperOptions.placement: 'auto' reverts back to a basic placement after the first show

One thing that might be nice is to detect when placement is set in the popperOptions and "hoist" the placement option up. I'm having trouble envisioning a scenario when one would want only the first placement to be auto and then revert back to basic placement. Kind of an unexpected API behavior.

thanks a lot for digging in on this, super helpful!

mreinstein

comment created time in a month

issue openedatomiks/tippyjs

consider a more specific selector for pointer-events

Problem

This particular styling: https://github.com/atomiks/tippyjs/blob/master/src/scss/index.scss#L144-L146

What's happening for me is I have an tippy with html, interactive content. That content contains an SVG file. My svg file's <path> children are getting set to pointer-events: auto;.

Would it be easy to use a more specific selector so that this style won't be applied to my content?

created time in a month

push eventmreinstein/ecs

Mike Reinstein

commit sha 7b5888056fd50a99a8f015abd87bedfc8c793048

add tap coverage directory to gitignore

view details

push time in a month

push eventmreinstein/ecs

Mike Reinstein

commit sha d3743ddce015ca75fcd07dcb6a117769a764c076

tweak README and update deps

view details

push time in a month

issue commentatomiks/tippyjs

tippy doesn't position where I'd expect with large html content

sticky: true option solves the problem

oh, how does that solve the problem? I'm not familiar with the behavior of that option

mreinstein

comment created time in a month

issue commentatomiks/tippyjs

tippy doesn't position where I'd expect with large html content

placement: 'auto' (not nested in popperOptions) should also work btw

It seems that placement: auto and { popperOptions: { placement: 'auto' } } seems to have slightly different behavior, which I've also explored in the codepen

mreinstein

comment created time in a month

issue commentatomiks/tippyjs

tippy doesn't position where I'd expect with large html content

Here's the codepen that I have so far https://codepen.io/anon/pen/XwZLQy

only certain dimensions of the preview pane seem to exhibit the problem.

I'm wondering if this is caused by media within the html content not being fully loaded when show is called, and that in turn causes the popover to not have the right dimensions to position itself?

mreinstein

comment created time in a month

issue commentatomiks/tippyjs

tippy doesn't position where I'd expect with large html content

Yeah I'll put a codepen together tonight. It might be challenging because there's a lot of junk running on these pages, but I'll try to isolate the minimum example with the problem.

thanks for your help!

mreinstein

comment created time in a month

issue commentatomiks/tippyjs

tippy doesn't position where I'd expect with large html content

I just found the popperOptions field, and this works!

const config = {
    arrow: true,
    flipOnUpdate: true,
    interactive: true,
    boundary: 'viewport',
    popperOptions: {
       placement: 'auto'
    },
    theme: 'light-border',
    trigger: 'click',
    zIndex: 999999
};

Screen Shot 2019-05-22 at 3 24 23 PM

I'm suprised that this is not the default setting for the underlying popper as it seems to magically just make the position work.

I have a new problem, I'm trying to dynamically load the popper contents upon first open of it. Here's my current attempt:

const button = document.createElement('button');

const config = {
    arrow: true,
    flipOnUpdate: true,
    interactive: true,
    boundary: 'viewport',
    popperOptions: {
       placement: 'auto'
    },
    theme: 'light-border',
    trigger: 'click',
    zIndex: 999999
};

const tippyInstance = tippy(button, config);

let productDetail;

button.onclick = function (ev) {
   if (!productDetail) {
      productDetail = document.createElement('div');
      productDetail.innerHTML = `... html content in here ...`;
       tippyInstance.setContent(productDetail);
       tippyInstance.show();
   }
}

what I see on first click: Screen Shot 2019-05-22 at 3 28 34 PM

Any ideas?

mreinstein

comment created time in a month

issue openedatomiks/tippyjs

tippy doesn't position where I'd expect with large html content

Bug description

I have single tippy element on a page (the red image is the button that the tippy is attached to.) Screen Shot 2019-05-22 at 2 14 08 PM

actual result: Screen Shot 2019-05-22 at 2 14 16 PM

expected result: Screen Shot 2019-05-22 at 2 21 54 PM

My config:

const button = document.createElement('button');
const config = {
    arrow: true,
    flipOnUpdate: true,
    interactive: true,
    boundary: 'viewport',
    theme: 'light-border',
    trigger: 'click',
    zIndex: 999999
};

tippyInstance = tippy(button, config);

const productDetail = document.createElement('div');
// ... some code here to build out the contents of the tippy

tippyInstance.setContent(productDetail);
document.body.appendChild(button);

Is this a bug, or am I configuring this up wrong?

created time in a month

startedToxblh/MTMR

started time in a month

pull request commentimagemin/gifsicle-bin

update gifsicle source and linux x64 to v1.92 #104

in the same vein, https://github.com/imagemin/pngquant-bin/pull/102

mreinstein

comment created time in a month

pull request commentimagemin/gifsicle-bin

update gifsicle source and linux x64 to v1.92 #104

You are basically removing the linux binary.

I'm not sure I understand, can you clarify? As far as I can tell the linux binary is still present, it's just 11.7 kb smaller:

https://github.com/imagemin/gifsicle-bin/pull/106/commits/5dab1ad95833958ec50221be61edbc33165dc616

AWS Lambda is kind of a special case because unlike the other linux platforms, you can't run npm install gifsicle on it, so the postinstall hook won't run which takes care of building the binary.

Open for suggestions though, if we want to handle this a different way.

mreinstein

comment created time in a month

PR opened imagemin/pngquant-bin

update linux binary to statically linked version 2.12.2

The included x64 linux binary doesn't work on aws lambda with node 10. This statically rebuilt library seems to fix it.

+0 -0

0 comment

1 changed file

pr created time in a month

push eventmreinstein/pngquant-bin

Mike Reinstein

commit sha dd5bacf86645b811a29225d9750d0ab7a982272f

update linux binary to statically linked version 2.12.2

view details

push time in a month

fork mreinstein/pngquant-bin

pngquant bin-wrapper that makes it seamlessly available as a local dependency

http://pngquant.org

fork in a month

push eventmreinstein/gifsicle-bin

Mike Reinstein

commit sha 5dab1ad95833958ec50221be61edbc33165dc616

update gifsicle source and linux x64 to v1.92 #104

view details

push time in a month

fork mreinstein/gifsicle-bin

gifsicle bin-wrapper that makes it seamlessly available as a local dependency

http://www.lcdf.org/gifsicle/

fork in a month

issue commentimagemin/gifsicle-bin

update gifsicle binary to 1.92 (lossy compression support)

@XhmikosR I don't mean to be a pest, but any chance we could get an updated gifsicle build? Right now I have to manually build gifsicle to get lossy compression support, and I'd much rather just pull in gifsicle-bin as an npm dependency.

mreinstein

comment created time in a month

pull request commentyiisoft/yii2

Add .mjs mimetype

@samdark what would i put in MimeTypeController.php? I don't see mjs in Apache's mime.types file, so it's not really mapping from an existing type to another.

mreinstein

comment created time in 2 months

PR opened yiisoft/yii2

Add .mjs mimetype

Google and node.js represent .mjs as ecmascript modules, as per https://developers.google.com/web/fundamentals/primers/modules#mjs

Q A
Is bugfix? no
New feature? no
Breaks BC? no
Tests pass? yes
Fixed issues n/a
+1 -0

0 comment

1 changed file

pr created time in 2 months

push eventmreinstein/yii2

Mike Reinstein

commit sha 3d399aa7c810c0e3292d5a293041e6fe32324fc6

Add .mjs mimetype Google and node.js represent `.mjs` as ecmascript modules, as per https://developers.google.com/web/fundamentals/primers/modules#mjs

view details

push time in 2 months

fork mreinstein/yii2

Yii 2: The Fast, Secure and Professional PHP Framework

http://www.yiiframework.com

fork in 2 months

startedNorthwoodsSoftware/GoJS

started time in 2 months

pull request commentmcwhittemore/staged-git-files

add promise support #19

btw, you might want to add node 11 and 12 to the .travis.yml. I forgot 12 is the latest!

mreinstein

comment created time in 2 months

issue closedmcwhittemore/staged-git-files

would you accept a PR to add async/await support?

My goal:

async function main () {
   const stagedFiles = await sgf();
   // do stuff here with them files...
}

main();

Here's what I'd like to do to the API:

sgf(filter, callbackFn);  // callback usage
sgf(callbackFn);          // callback usage

sgf(filter);   // returns a promise
sgf();         // returns a promise

Would this be a welcome addition? Happy to submit a PR.

closed time in 2 months

mreinstein

issue commentmcwhittemore/staged-git-files

would you accept a PR to add async/await support?

resolved via #20

mreinstein

comment created time in 2 months

pull request commentmcwhittemore/staged-git-files

add promise support #19

@mcwhittemore if you log in to circle-ci and enable staged-git-files repo for testing, you'll see the build badge and everything setup already. Let me know if you have any questions on this

mreinstein

comment created time in 2 months

push eventmreinstein/staged-git-files

Mike Reinstein

commit sha a58f8d294d605afa8e041ad1fd5e7fa31f6cbca8

remove the browser tests and add a travis ci badge to the readme

view details

push time in 2 months

push eventmreinstein/staged-git-files

Mike Reinstein

commit sha da6b8c761b8b4618b37418b09d7d48493c3dbd2e

add missing done();

view details

push time in 2 months

pull request commentmcwhittemore/staged-git-files

add promise support #19

@mcwhittemore I think there might be a bug in the test:

https://github.com/mcwhittemore/staged-git-files/commit/8339635b04218c3772ae5b2f02fe8d6b929535ee#r33436520

I also added the travis ci configuration, so once you enable this for your repo it should just start working.

mreinstein

comment created time in 2 months

CommitCommentEvent

Pull request review commentmcwhittemore/staged-git-files

add promise support #19

 describe("As a module", function() {             });         }); +        it("if no callback is passed, I should return a promise and resolve the status of staged files", function(done) {+            addFile(function(err, data) {+                var sgf = newSGF();+                sgf().then(function(results) {+                    results[0].filename.should.equal(data.filename);+                    results[0].status.should.equal("Added");+                    results[0].content.should.equal(data.content);+                    done();+                }).catch(done);+            });+        });++        it("if no callback is passed but a filter is passed, I should return a promise and resolve the status of staged files", function(done) {+            addAndCommitFile(function(err, data) {+                if (err) {+                    done(err);+                } else {+                    var newFileName = randomFileName([8, 3]);++                    moveFile({+                        oldFileName: data.filename,+                        newFileName: newFileName+                    }, function(err) {+                        var sgf = newSGF();+                        sgf('A').then(function(results) {+                            results.length.should.equal(1);+                            results[0].filename.should.equal(newFileName);+                            results[0].status.should.equal("Added");

don't we need a done() call here?

mreinstein

comment created time in 2 months

push eventmreinstein/staged-git-files

Mike Reinstein

commit sha a5168f13a68b8c4ee5fcaac58288da66f8d36194

configure travis ci

view details

push time in 2 months

push eventmreinstein/staged-git-files

Mike Reinstein

commit sha 9bc4e0a2324b17647af26f782eedacd99f341465

fix the filter case for promises

view details

push time in 2 months

issue commentatomiks/tippyjs

issues with including tippy.js as a 3rd party library

I probably won't work on it

No worries, I can live without it. Thanks again for all of your hard work!

mreinstein

comment created time in 2 months

issue commentatomiks/tippyjs

issues with including tippy.js as a 3rd party library

If this is a lot of work, it's not a show-stopper for me. The fact that I can generate namespaced stylesheets means I can pull them in without fear of interfering with stuff already on the web page. This is definitely in the nice-to-have-but-not-crucial bucket. :)

mreinstein

comment created time in 2 months

issue commentatomiks/tippyjs

issues with including tippy.js as a 3rd party library

@atomiks now that we have an elegant mechanism for passing configuration options to the npm build command, do you think it's reasonably to add a config to set the embedded theme? I'm thinking something like this:

NAMESPACE=Acme-123 THEME=light-border npm run build
mreinstein

comment created time in 2 months

pull request commentatomiks/tippyjs

Use namespace prefix for custom builds

Code looks super clean! I'm glad we found a way to do it that has 0 run-time impact on tippy. :) Looking forward to replacing the janky popover code I'm using with this!

Should we also apply this prefix to #483 (data-tippy-stylesheet)?

Yeah I think that makes sense, I didn't catch this the first time.

atomiks

comment created time in 2 months

pull request commentmcwhittemore/staged-git-files

add promise support #19

I also struggled to get the mocha tests written in a way that made sense. Here's the test that I wrote to verify my changes didn't break things.

test.js:

var sgf = require('./index.js');


var filter = "ACDMRTUXB";
console.log(sgf());
console.log(sgf(filter));

var invocationCount = 0;
console.log(sgf(function () { console.log('a') }));
console.log(sgf(filter, function () { console.log('b') }));

Expected output:

Promise { <pending> }
Promise { <pending> }
undefined
undefined
a
b
mreinstein

comment created time in 2 months

pull request commentmcwhittemore/staged-git-files

add promise support #19

@mcwhittemore I avoided more drastic cleanup because I wasn't sure what minimum version of node you want to support.

mreinstein

comment created time in 2 months

PR opened mcwhittemore/staged-git-files

add promise support #19
+32 -3

0 comment

2 changed files

pr created time in 2 months

push eventmreinstein/staged-git-files

Mike Reinstein

commit sha 68a3cc3657319896655aadd7cc8ecde045b350dc

add promise support

view details

push time in 2 months

fork mreinstein/staged-git-files

Node module that returns a list of files waiting to be committed.

fork in 2 months

pull request commentKitt-AI/snowboy

Add support for Node > 8

can we please get this merged? Node 6 is on the verge of being deprecated https://nodejs.org/en/about/releases/

Dabolus

comment created time in 2 months

issue closedPicovoice/Porcupine

Missing file updates for wasm?

binding/js/porcupine.js last updated to 1.5 lib/wasm/*.js . last updated to 1.5 demo/js/*.js last updated to 1.6

Did some files get overlooked?

closed time in 2 months

mreinstein

issue commentPicovoice/Porcupine

NodeJS Wrapper and demo for Procupine

Well I've tried numerous things, and I cannot seem to get node/wasm porcupine to recognize anything. I've tried both 1.5 and 1.6 versions of the library with various settings. While it doesn't crash, I also don't see any keywords actually being recognized engine.process(data) just always returns -1.

I'm out of ideas at the moment. :-/

dmytrobr

comment created time in 2 months

issue openedPicovoice/Porcupine

Missing file updates for wasm?

binding/js/porcupine.js last updated to 1.5 lib/wasm/*.js . last updated to 1.5 demo/js/*.js last updated to 1.6

Did some files get overlooked?

created time in 2 months

pull request commentatomiks/tippyjs

Use namespace prefix for custom builds

@atomiks PR looks dope! I added some comments on it. All of these focus on the goal of making the namespacing have 0 impact on the built tippy files. (the namespace stuff would be baked in at build time and incur no function calls or additional string interpolation.)

much thanks!

atomiks

comment created time in 2 months

Pull request review commentatomiks/tippyjs

Use namespace prefix for custom builds

 export const PLACEMENT_ATTRIBUTE = 'x-placement' export const OUT_OF_BOUNDARIES_ATTRIBUTE = 'x-out-of-boundaries'  // Classes-export const IOS_CLASS = 'tippy-iOS'-export const ACTIVE_CLASS = 'tippy-active'+export const IOS_CLASS = `${NAMESPACE_PREFIX}-iOS`+export const ACTIVE_CLASS = `${NAMESPACE_PREFIX}-active`  // Selectors-export const POPPER_SELECTOR = '.tippy-popper'-export const TOOLTIP_SELECTOR = '.tippy-tooltip'-export const CONTENT_SELECTOR = '.tippy-content'-export const BACKDROP_SELECTOR = '.tippy-backdrop'-export const ARROW_SELECTOR = '.tippy-arrow'-export const ROUND_ARROW_SELECTOR = '.tippy-roundarrow'+export const POPPER_SELECTOR = `.${NAMESPACE_PREFIX}-popper`

how about:

export const POPPER_CLASS = '__NAMESPACE_PREFIX__-iOS'
export const POPPER_SELECTOR = `.${POPPER_CLASS}`
atomiks

comment created time in 2 months

Pull request review commentatomiks/tippyjs

Use namespace prefix for custom builds

 export function createArrowElement( ): HTMLDivElement {   const arrow = div()   if (arrowType === 'round') {-    arrow.className = 'tippy-roundarrow'+    arrow.className = selectorToClassName(ROUND_ARROW_SELECTOR)

instead of introducing a new function here, maybe we could create another constant for this? e.g., we could have ROUND_ARROW_CLASS and ROUND_ARROW_SELECTOR

atomiks

comment created time in 2 months

Pull request review commentatomiks/tippyjs

Use namespace prefix for custom builds

 const BANNER = `/**! * MIT License */` +const NAMESPACE_PREFIX = process.env.NAMESPACE || 'tippy'+ const extensions = ['.js', '.ts']  const plugins = {   babel: babel({     exclude: 'node_modules/**',     extensions,   }),+  replace: replace({+    "NAMESPACE_PREFIX = 'tippy'": `NAMESPACE_PREFIX = '${NAMESPACE_PREFIX}'`,

This could be easier to read with something like "__NAMESPACE_PREFIX__": NAMESPACE_PREFIX,

Then in the code it could be referenced like this:

export const IOS_CLASS = '__NAMESPACE_PREFIX__-iOS'

The big benefits here is

  • it looks very obvious when viewing the source that __NAMESPACE_PREFIX__ is a value that gets replaced at build time. As opposed toNAMESPACE_PREFIX` which just looks like a standard javascript variable.
  • there's less variables in the built code that ships to the browser. If someone were to look at the built version of tippy, they'd see export const IOS_CLASS = 'tippy-iOS'
atomiks

comment created time in 2 months

pull request commentatomiks/tippyjs

Use namespace prefix for custom builds

@atomiks I think you mean #484 ?

atomiks

comment created time in 2 months

issue openedmcwhittemore/staged-git-files

would you accept a PR to add async/await support?

My goal:

async function main () {
   const stagedFiles = await sgf();
   // do stuff here with them files...
}

main();

Here's what I'd like to do to the API:

sgf(filter, callbackFn);   // callback usage
sgf(callbackFn);            // callback usage

sgf(filter);   // returns a promise
sgf();         // returns a promise

Would this be a welcome addition? Happy to submit a PR.

created time in 2 months

issue openedatomiks/tippyjs

hardcoded tippy css class references in popper.ts

I noticed in https://github.com/atomiks/tippyjs/blob/master/src/popper.ts we hardcode a few strings for specific tippy classes (tippy-roundarrow, tippy-arrow, tippy-backdrop, etc.)

Does it make sense to move these strings to constants.ts ?

created time in 2 months

issue commentatomiks/tippyjs

issues with including tippy.js as a 3rd party library

Maybe maintaining your fork would be easier if we refactored it to use a prefix variable in the CSS and JS, so merging the upstream into your fork would have minimal or no conflicts each update?

Yeah, perhaps! I looked at all of the .ts source files in tippy, and actually there are only 2 files that have hardcoded references to the .tippy- classes: constants.ts and popper.ts. Like maybe a dozen references total!

I'm wondering if we could use https://www.npmjs.com/package/rollup-plugin-replace to have an optional NAMESPACE option. Something like:

in rollup.config.js:

const plugins = {
  replace: replace({
    __NAMESPACE__:  process.env.NAMESPACE || ''
  }),
  babel: babel({
    exclude: 'node_modules/**',
    extensions,
  }),
  minify: terser(),
  resolve: resolve({ extensions }),
  css: cssOnly({ output: false }),
  json: json(),
}

Then in the the code (constants.ts for example):

export const POPPER_SELECTOR = '.__NAMESPACE__tippy-popper'
export const TOOLTIP_SELECTOR = '.__NAMESPACE__tippy-tooltip'
export const CONTENT_SELECTOR = '.__NAMESPACE__tippy-content'
export const BACKDROP_SELECTOR = '.__NAMESPACE__tippy-backdrop'
export const ARROW_SELECTOR = '.__NAMESPACE__tippy-arrow'
export const ROUND_ARROW_SELECTOR = '.__NAMESPACE__tippy-roundarrow'

And then when building tippy, I could do this:

NAMESPACE=Acme-123 npm run build

I didn't prototype out or think through how the .scss would be handled, but I'm sure there must be a similar plugin/namespacing capability for that part too.

I think something like this would actually be enough that I wouldn't have to fork tippy, I could just build my own bundle with whatever namespace I want.

Thoughts? Is this crazy?

mreinstein

comment created time in 2 months

issue commentatomiks/tippyjs

issues with including tippy.js as a 3rd party library

I hate to be a pest, but I think maybe the use case isn't clear.

I'm embedding my component in someone else's website. That website has lots of other content on it that I don't control:

  • if the the website already has tippy components on it, and they are themed differently, I don't want to affect the look of those, because it's someone else's content.
  • these websites really don't like having their 3rd party integrations inject unprefixed styles directly into their documents. My organization has an assigned prefix (e.g., all my classes and ids must start withacme123-`)
  • a given website frequently has several or dozens of these 3rd party components. asset space is a premium. I know 1.6 kb minzipped is very light, but it adds up.

Anyway, I know this is an extremely uncommon use case, I don't expect most people will run into these problems. I'm not expecting a big engineering effort to support this use case. I was just hoping that given there's not much css that maybe I could build my own copy by passing some parameters to rollup to namespace stuff, or at least replace the embedded theme.

Thanks again!

mreinstein

comment created time in 2 months

issue commentalexmoon/pv-porcupine

questions on buffer handling

I'm also curious about line 105:

this.frameSize = porcupine.frameLength() * 2;

What is the 2 in this case? Is this because chunk is a byte array, and porcupine.frameLength() is the number of int16 values that are desired?

mreinstein

comment created time in 2 months

issue openedalexmoon/pv-porcupine

questions on buffer handling

Hey @alexmoon, thanks for writing this module! Been a great learning resource. :)

I'm curious about some of the logic in your _write() call. This line:

https://github.com/alexmoon/pv-porcupine/blob/master/index.ts#L133

we return, but there might still be leftover data in chunk. Is this intentional?

Similarly on line 144 we return, and there might be data in chunk that hasn't been copied to the buffer.

are we intentionally only processing the first full fame of data and then returning, or is this by accident?

created time in 2 months

issue commentatomiks/tippyjs

issues with including tippy.js as a 3rd party library

doesn't tippy already include the dark theme by default? It gets embedded into the tippy bundle, right? Is there a way for me to instead build tippy with another theme embedded and set to the default?

mreinstein

comment created time in 2 months

issue closedmreinstein/constraint-solver

investigate using peg.js

I think the code might be simplified considerably by introducing peg.js to generate the parser:

https://pegjs.org/documentation

closed time in 2 months

mreinstein

issue commentmreinstein/constraint-solver

investigate using peg.js

implemented in f9727ff979e0e565eba8e1ae3091fe1580825819 !

mreinstein

comment created time in 2 months

push eventmreinstein/constraint-solver

Mike Reinstein

commit sha de23a84b35fc3a6bfaff3d6a83762f710a9f96ee

3.0.1

view details

push time in 2 months

push eventmreinstein/constraint-solver

Mike Reinstein

commit sha ee6c5cf2f66e9b88ed196c0d74025c6806eefd45

fix bug in strength grammar

view details

push time in 2 months

issue openedatomiks/tippyjs

issues with including tippy.js as a 3rd party library

Tippy is amazing! I've used it on a few personal websites.

I'd like to be able to use it in a 3rd party library ( a widget that is embedded on someone else's website.) One of the requirements of doing this is being able to namespace css declarations to reduce the likelihood of polluting global scope. Some questions around this:

  • would it be possible to namespace all of the classes tippy declares? e.g., .CUSTOM_NAMESPACE-tippy-tooltip { ... }
  • Is it possible to embed another style into the tippy bundle (I don't want the dark theme baked in, I want one of the light themes.)

much thanks for a phenomenally good component!

created time in 2 months

issue commentPicovoice/Porcupine

NodeJS Wrapper and demo for Procupine

I believe I'm matching what porcupine needs (see https://github.com/mreinstein/node-porcupine/blob/master/index.js#L68-L72 )

other possibilities:

  • maybe this is a bit of logic to grab? https://github.com/alexmoon/pv-porcupine/blob/master/index.ts#L96 looks like it handles some of the node buffer handling stuff
  • is it possible my keywordIDs array has bad/wrong/outdated data?
dmytrobr

comment created time in 2 months

push eventmreinstein/node-porcupine

Mike Reinstein

commit sha 2ac053018d50123ae7a3ff7bd78f0c51eabe70ec

minor tweaks

view details

push time in 2 months

push eventmreinstein/node-porcupine

Mike Reinstein

commit sha 7e7f1bc205001574ee806e5b047d444566af26d9

minor tweaks

view details

push time in 2 months

push eventmreinstein/node-porcupine

Mike Reinstein

commit sha 1fd0e5bd95d5549b7247d60b06accc701e0e1930

initial commit

view details

push time in 2 months

create barnchmreinstein/node-porcupine

branch : master

created branch time in 2 months

created repositorymreinstein/node-porcupine

node bindings for PicoVoice's most excellent Porcupine wakeword module

created time in 2 months

issue commentPicovoice/Porcupine

NodeJS Wrapper and demo for Procupine

Here's what I've got so far: https://pastebin.com/sSsVZfq2

This runs without error, but I never actually see any keywords being identified. I'm using the mic module to pass 16 bit, signed int, little endian, 1 channel pcm directly to porcupine's process(data) call. I'm wondering if I need some of the logic from https://github.com/Picovoice/Porcupine/blob/master/demo/js/picovoiceAudioManager.js#L18-L44

(I say some because it looks like that logic does some format conversion to go from what the browser web audio api produces into int16, 16 bit values that porcupine understands, + some sample rate conversion logic, + some logic to send the right amount of data to porcupine using engine.frameLength.

Any ideas/suggestions/help would be greatly appreciated. I think this is close to working!

dmytrobr

comment created time in 2 months

issue commentPicovoice/Porcupine

NodeJS Wrapper and demo for Procupine

I've got a version on my local machine that almost works. I'm able to load the wasm module, and pipe the audio from a microphone stream to it. It's not detecting keywords yet, probably passing data in the wrong format.

Question, do you know what endianness is expected in the input data?

dmytrobr

comment created time in 2 months

issue commentPicovoice/Porcupine

NodeJS Wrapper and demo for Procupine

also, I'd like to publish this as an npm module, if that's ok with you

dmytrobr

comment created time in 2 months

issue commentPicovoice/Porcupine

NodeJS Wrapper and demo for Procupine

@kenarsa I'd like to work on this task if it's still welcome. Can you re-open the ticket please? that way I can reference it when I send a PR

dmytrobr

comment created time in 2 months

issue commentcamwiegert/in-view

IntersectionObserver support

the native Intersection Observer API is so straightforward that it probably makes sense just to use that rather than a library

Yes, I agree with that. However, in-view is an existing library, it's being used in various places already. Ideally it's internal implementation would be as efficient as possible, and adopting intersection observer under the hood means anyone using this library gets better performance automatically. We should be doing this.

shrpne

comment created time in 2 months

push eventDreamingBits/extract

Mike Reinstein

commit sha ee65a025dc08510bf5ea23ca6645aa6accf58d13

update deps

view details

push time in 2 months

issue commentGoogleChrome/dialog-polyfill

include minified js and css in npm package

I've got a PR that injects the css into the document head, open for improvement suggestions if this is something we'd find useful.

jab

comment created time in 2 months

issue openedimagemin/gifsicle-bin

update gifsicle binary to 1.92 (lossy compression support)

Released yesterday, and adds lossy compression support to gifsicle. https://github.com/kohler/gifsicle/pull/72

created time in 2 months

push eventmreinstein/ecs

Mike Reinstein

commit sha cb460cd2098863cc7a52b5ed901f133bc501aba4

fix example in README

view details

push time in 2 months

pull request commentkohler/gifsicle

Resolved conflict to merge giflossy

@kohler thanks for merging this! Are you planning to make another release (maybe 1.92) ?

saurabheights

comment created time in 2 months

push eventmreinstein/ecs

Mike Reinstein

commit sha aba3c23f5dfc8941a8bd07f17a7a2df34bb11b38

update package.json

view details

push time in 2 months

push eventmreinstein/ecs

Mike Reinstein

commit sha 0514e4593e4856493d9fcdde1db9dee30e54a991

update package.json

view details

push time in 2 months

push eventmreinstein/ecs

Mike Reinstein

commit sha b12863a2fb24e6724e7d6784ee4d421ddafb655f

add some keywords to package.json and fix syntax highlighting in example

view details

push time in 2 months

push eventmreinstein/ecs

Mike Reinstein

commit sha 5f86c28238ddc7eaa58ba9ae6a95b55af8abea56

add minimal usage example to README

view details

push time in 2 months

more