lamplightdev

I learnt to juggle with the help of this book: https://www.goodreads.com/en/book/show/777103.The_Complete_J..., all sorts of tips and tricks in there

Wafer is a simple and lightweight base library for building Web Components that can be used on the browser, server or both.

It small (<2kb minified and compressed) and opts for a CSS selector based API for updating component templates.

Component declarations can be used unchanged on both the client and server (node) to SSR components (using Shadow or Light DOM) and optionally hydrate on the client.

Read a quick overview at https://waferlib.netlify.app/docs/010-overview/030-quick/, or edit a live example at https://waferlib.netlify.app/docs/010-overview/040-example/.

All feedback welcome, thanks!

Hi all - thought I'd share a side project I've been working on recently. Think of it as a Slack-lite for groups of people who are temporarily networking with each other - think events, conferences and meetings. Would love to get some feedback on any aspects of it (the idea, the design, the execution). I'm currently in pre-launch so if anyone does fancy trying it out for a real event please go ahead - user limits are currently disabled so there's no cost. Thanks!

Technically it's written using Web Components (LitElement based) which I've really enjoyed using.

RemindMe is an experimental app to showcase background notifications in the browser.

It makes use of Notification Triggers, an experimental API to schedule local notifications that don't require a network connection. Currently Chrome is the only browser that has an implementation of Notification Triggers.

Nice idea, although I think the difficult thing is how to make that obvious to the user as it's not a standard way to select something.

Thanks for the feedback. I agree the meaning of the icons is unclear - one is cancel, the other is clear. I would prefer to have text on these buttons, but then localising the language becomes an issue. I will think over these issues!

Thanks for these pointers, very useful indeed - I'll look to address them in the next update.

Thanks! That was a key requirement for my use case, so I appreciate the feedback.

Thanks! The Storybook doesn't work too well on smaller viewports, but the picker does work well on small screens in regular pages, e.g. https://lamplightdev.github.io/aeon/

I needed a progressively enhanced, lightweight date and time picker that functioned and looked consistent across all browsers, and that worked with or without a framework. The difference in support (no native picker on desktop Safari) style and behaviour of native pickers rule them out, so web components seemed an obvious choice. The existing web component solutions tended to be too heavyweight, so Aeon was born:

- No dependencies - a standalone vanilla JS web component

- Lightweight - 5kb gzipped

- Use anywhere - use standalone or directly in your framework of choice with no wrappers

- Progressive enhancement - if the code fails to load, fallbacks to a native picker or a simple text box

- Accessible - works with mouse/touch/keyboard/screen readers and behaves as a native form element

- Locale aware - uses the browser locale language and date format by default

- Themeable - pass in custom colour schemes

- Browser support - works in all modern browsers on all devices (and IE11 - with polyfills)

You can't without client side JavaScript if you're using the Shadow DOM. If you're not using Shadow DOM, just Light DOM, then you can do so: https://lamplightdev.com/blog/2019/07/20/how-to-server-side-...

Any UI library based on web components is your best bet for a 'framework-less' solution. Some more popular ones are:

- Material Design Web Components, https://github.com/material-components/material-components-w...

- Vaadin, https://vaadin.com/components

- UI5, https://sap.github.io/ui5-webcomponents/

There's a video from the latest Chrome Dev Summit on this very topic https://www.youtube.com/watch?v=ZFvPLrKZywA&feature=youtu.be

Yeah, sorry - https://scrapp.it - not sure how I managed to forget that!

This has been a labour of love to create a web based bookmark manager that I can use across all devices without having to install anything. I've learnt a lot about building this PWA with web components as a well as more than I care to mention about the intricacies and inconsistencies of site meta data! I hope other people find it useful.

This has been a labour of love to create a web based bookmark manager that I can use across all devices without having to install anything. I've learnt a lot about building this PWA with web components as a well as more than I care to mention about the intricacies and inconsistencies of site meta data! I hope other people find it useful.

Habit Loop is a free app to help you form good habits. It helps to remind you when you need to achieve your goals, and lets you track your progress over time.

Built as an offline first, cross browser PWA using LitElement and Firebase in a web worker. 100% Lighthouse score and reliable even on slow/flakey connections.

A set of small, efficient, no dependency mixins to provide simple shadow root templating, property observers and event binding for vanilla web components. An example HN reader implementation is at https://compost-35844.firebaseapp.com (code: https://github.com/lamplightdev/compost-hn)

That is incredible, will look to use that library in the future.

Thanks for the feedback all. Unfortunately each browser seems to have its quirks in the implementation of the spec - I thought I'd caught most of them but obviously still a bit of work to do!

With regard to the dial rotating rather than the needle, it's an interesting point (no pun intended :) I think each has its own merit for certain applications - probably worth adding an option to choose.