DEV Community: Avichay Eyal

slim.js gets a fifth version

Avichay Eyal — Thu, 08 Jul 2021 18:28:20 +0000

I have released this week version 5 of slim.js, faster, lighter and more flexible than previous releases.

Will appreciate if you try it and let me know how was your developer experience.

Undying objects in javascript

Avichay Eyal — Tue, 27 Oct 2020 08:02:06 +0000

I'd like to introduce a simple and effective tool I have just published that creates an observable state with an "auto-save to local-storage" feature.

Every change (or changeset) in the object's tree will flush the data as JSON object into the local storage, and be restored on the next page load.

import { undying } from 'undying';


const defaultValues = {
    favouriteColor: 'blue',
};

const undyingObject = undying('user-defaults', defaultValues);
/* If the data exists on the local storage,
   the default values will be ignored and actual data is restored.
   If the data does not exist,
   it will be created with default values
*/


undyingObject.favouriteColor = 'red';
undyingObject.shape = 'rectangle';
// async flush to local storage.

You can also be notified when something is changed:

const myState = undying({});
undying.observe(undyingObject, (value) => {
    // value is the whole tree data
});

Enjoy.

https://www.npmjs.com/package/undying

Adaptive Design Systems

Avichay Eyal — Fri, 26 Jun 2020 07:28:29 +0000

Article published by me: https://eavichay.svbtle.com/the-adaptive-design-system

Can anyone share his own experience of white-labeling web applications?

Multiple front-ends, different frameworks, one application

Avichay Eyal — Sat, 30 Nov 2019 22:05:02 +0000

Here's a quick demo.
AMA for explanations how this works.

https://build-theta-two.now.sh/#/side-by-side

Appreciate your votes

Avichay Eyal — Mon, 16 Sep 2019 07:13:57 +0000

I have sent CFPs for confoo Canada, appreciate if you vote in favour of the topics
Link here https://confoo.ca/en/yul2020/call-for-papers/speaker/avichay-eyal

Ottavino Simple Demo

Avichay Eyal — Mon, 24 Jun 2019 13:21:35 +0000

Simple responsive web-components library I authored not long ago. Comments, please!

Custom Directives in slim.js

Avichay Eyal — Mon, 06 May 2019 08:36:56 +0000

I will demonstrate how to apply a visual effect (typewriter as an example) using custom directives in slim.js.

For those aren't familiar with slim.js - It is a web-component authoring library with zero dependencies, fast, lightweight (3K) that enables developers to create custom elements with the declarative approach (similar to how Angular handles templates).

Demo of the effect here

First, lets define some component with a basic template:

Slim.tag('my-tag',
`<p effect:typewriter>This is a sample text</p>`
class extends Slim {
});

If you have noticed the effect:typewriter attribute, it is still not defined as a custom directive, and will have no effect on the page.
Attributes with namespaces a VALID html markup and they can be leveraged in order to avoid conflicts with native future attributes.

Now let's define the effect directive

Slim.customDirective(
    (attribute) => attribute.localName === 'effect:typewriter',
    (source, target, attribute, match) => {
        // capture initial text
        const text = target.innerText;
        // parse delay from attribute or default to 50ms
        let delay = parseInt(attribute.nodeValue || '50');
        let i = 0;
        const interval = setInterval(() => {
          target.innerText = text.slice(0, i++); // set inner text
          if (i > text.length) {
            clearInterval(interval);
          }
        }, delay);
    }
);

In the HTML Markup we can now add

<my-tag></my-tag>

And viola, typewriter effect anywhere we want.

For more information regarding slim.js you can see the online docs here

The Nudist Web Developer

Avichay Eyal — Thu, 02 May 2019 07:40:43 +0000

https://eavichay.svbtle.com/being-nudist-web-developer