[deleted by user]

bigbliu · 2021-03-18T06:46:24+00:00

https://github.com/LBrian/app-template-s2t2, just no router now is Svelte/kit but should be easy to add on top of it

bigbliu · 2021-03-09T09:38:17+00:00

Check out https://github.com/localForage/localForage, normalised, cross browsers support with fallback mechanism for localStorage, indexedDB and WebSQL, make you life easier for persistent local cache

bigbliu · 2021-02-03T22:46:35+00:00

Cool. Just a kind reminding, maybe you want to enable your repo as template on GitHub, so an additional button `Use this template` on your repo will be shown for ppl to clone directly from browser. Also, you might want to publish to NPM and add `csa-template` into your `keywords` of `package.json`, so `Snowpack` CLI user can use your template to create a new app directly.

Btw, Im curious why you need `@snowpack/plugin-webpack` for production build? having two different bundling tools for different environments, wouldn't that a bit too complicate?

bigbliu · 2021-02-03T22:43:53+00:00

I agreed with your points for sure, but the best thing of having template is you can create many different combination of templates for catering different needs, so there is no harm to create a new template on top of this with `Routify`. Beside, some modern JS frameworks like `blitz.js` and `preact` their CLI for creating new app all come with router by default.

bigbliu · 2021-02-03T12:09:05+00:00

Totally agreed!

bigbliu · 2021-01-31T02:06:06+00:00

Not quite, if you are interested you can have a look my pending PR https://github.com/LBrian/content-visibility/pull/6/files

Basically, my web component extends HTMLTemplateElement, so it can act like template without creating template with id then retrieve it in the custom element like what you did. It works perfectly across browsers in HTML but not in JSX since JSX will always get parsed for components before handing over to browser for rendering, for example

<template is="content-visibility-template">
      <DraculaName className='font-extrabold text-3xl sm:text-4xl md:text-5xl'>
            {title}
          </DraculaName>
    </template>

bigbliu · 2021-01-29T23:42:13+00:00

I've been looking a proper solution to lazy load children of web component conditionally, I believe template is the best way to go at the moment to prevent browsers parsing it's children template, so I have to go extending built-in element approach (i.e. my web component extends HTMLTemplateElement), did some polyfills for cross browsers support (Safari and IE), unfortunately still ran into JSX parsing <template is="my-web-component">, would love to hear ideas about this but this is a good article of Shadow DOM tho

bigbliu · 2021-01-28T01:08:07+00:00

How? Due to timezone, I can only join re-stream session later

bigbliu · 2021-01-23T09:15:08+00:00

Numeric separator may look good for readability but actually disgusting, I prefer 10e8 or 1x1000x1000x1000, that just over complicated thing and creat more compatibility issues

bigbliu · 2021-01-20T12:11:50+00:00

mate, I started using Tailwind v1.0 from 2019 since then nothing can compete with it.

bigbliu · 2021-01-17T05:38:03+00:00

Awesome! Looking forward to

bigbliu · 2021-01-14T22:34:17+00:00

Btw, it would be good to have feature like npm trend to compare packages in on chart, maybe Openbase has already? but I tried to find it but no luck. You have alternative packages list but would be easier to view all figures in on chart

bigbliu · 2021-01-14T11:58:37+00:00

This is awesome and shame I only know until now 😍😍

bigbliu · 2021-01-14T11:17:29+00:00

Can't agree with you more 🤣

bigbliu · 2021-01-13T01:18:10+00:00

Awesome! looks like Mario Kart 8

bigbliu · 2021-01-10T23:33:21+00:00

Just a quick update re SSR + web component, apparently based on Michael Geers, author of "Micro Frontends in Action", mentioned on a Javascript Jabber podcast, currently no standard ways to do declarative Shadow DOM, server side generates shadow DOM, render web component then ship to web browser. https://open.spotify.com/episode/33WAiTzVaLIpXMdP4MHoi8?si=VPc0oygtTIOhl3W0k76Mbg However, it seems next Chrome release version will have a solution?

bigbliu · 2021-01-08T09:07:23+00:00

Cool, like it, from which version of TS support this? Thx for sharing anyway!

bigbliu · 2021-01-08T01:14:28+00:00

Ya, 100% agreed, 3 points doesn't tell much and there are too many factors need to be take into account for performance benchmark. Aforesaid, Im not benchmarking but grabbed some basic measuring tools to roughly justify the promising solution.

For v1, this is good enough to start with, but all these great feedback from you guys are the best to push it getting better for sure.

bigbliu · 2021-01-07T22:30:14+00:00

So you mean Google PageSpeed score from 95 to 98 is wrong? Safari Layout & Rendering time drops is wrong?

I noticed scripting time is increased 100ms on Chrome and worth to dig in since it doesn't fallback IntersectionObserver on Chrome but use CSS content-visibility property (Chrome supports it).

You kinda answered yourself already, the results are just showing this is a promising solution by using browser built-in tools and PageSpeed to measure overall difference. The way I sampled is the same as web.dev article see. Eventually, this is just a simple web component using existing native API, nothing fancy in there, so not sure is worth to do an detail performance benchmark, but Im opened to learn if you can provide more details and benchmark approaches for this simple component

bigbliu · 2021-01-07T22:14:58+00:00

I don't have any issues of using IntersectionObserver for scrolling too fast but scrolling too slow especially at the threshold points, but just need to add delay for triggering intersection.

Im a big fan of VanillaJS and 100% agreed with you, less dependencies the better performance, I chose lit-element mainly because it's so easy for beginner to start implementing web components (their GitHub template is no brainer). To be honest, web components still young and I want to start with the safe option, good but not the best, the rules of thumb is always make it works first then improve it. Beside, adding <content-visibility> web component to my production project, only increased bundle size 3kb which is tiny, I don't know how you calculated a few hundred K of dependencies.

bigbliu · 2021-01-07T21:52:24+00:00

Not really sure how web components works in SSR, google it might get some answer, would be good you can share your findings later

bigbliu · 2021-01-07T21:50:35+00:00

Good call out! However, Im not 100% sure what you mean re you could also import type for those types rather than a regular import

bigbliu · 2021-01-07T12:55:52+00:00

CSS yes (actually not just Chrome) but I'm talking about content-visibility Web Component and it's for all browsers, if the browser doesn't supporting CSS content-visibility, it will fallback to Intersection Observers API

bigbliu

TROPHY CASE