Create a better JS example instead of Alertifier

[vbulant]

Reasons

• We introduced no-alert eslint rule
• Alertifier is fabricated, let’s think of something closer to the "real world" :)

[kettanaito]

I would suggest to think from the end result - What should the example teach/demonstrate?

Possible points:

• Possibilities of include/export of ES6
• Quick/smart approach for a routine situation (any sort), at the same time showing Actum's approach in developing JS
• Load of best practices (syntactical and logical)
• Something you 99% need in each of your project

It can be a small helper function, or just a dummy function for demonstrative purposes.

[janpanschab]

With these 2 components/modules (module.js and alertifier.js) we want to demonstrate:

• Possibilities of include/export of ES6, best practice how to structure code
• Approach for writing components (Factory function pattern is preferred over classes)
• Usage of init and factory functions

As Vojta wrote,

let’s think of something closer to the "real world"

but defintely not necessary about

Something you 99% need in each of your project

[vbulant]

Also, we can try to resolve the schizophrenia with named vs. arrow functions here.

[zoltan-kovac]

for init: "using cookies" message based on version/time

• shown by default
• checks if cookie exists on load
• if cookie exists, compare the version/date
• creates new version/date of cookie when closing the notification

for factory: button triggering collapse (show/hide content)

• almost in every project
• bs solution is based on jquery

[vbulant]

Great idea!

[vbulant]

@zoltan-kovac any luck with the factory/collapse example? If not, I’ll try to do something simple.

[kettanaito]

Sorry for interrupting, I've just got an idea come into my mind: Each project I have participated in uses anchor scroll navigation (from regular "Go to top" to custom in-page navigation between anchor breakpoints). Sometimes even such a simple thing as this may cause a lot of extra code (hidden containers for anchors, unnecessary events and hooks in JavaScript). I think this might have been a good and useful JavaScript demo in a devstack.

Implementation (approximate)

/* anchorNavigator.js */
export default class AnchorNavigator {
    constructor(container) {
        this.container = container;
        this.container.onClick = this.handleClick;
    }

    handleClick() {
            const { scrollTo } = this.container.dataset; // "#" + scrollTo
            /**
             * Use one of the smooth scroll techniques here.
             * I would suggest the method from MDN (no jQuery).
             */
    }
}

Initialization

initializeMethod(AnchorNavigation, document.querySelectorAll('[data-scroll-to]'));

Usage

<header id="header"></header>
...
<button data-scroll-to="header">Go to top</button>

This would also be a nice example to demonstrate a proper semantics between a and button. It was quite an interesting thing to find out that doing in-page scroll navigations with a is wrong. Anchor element semantically should lead to the different page. In-page actions is a primarily usage for button.

[zoltan-kovac]

@vbulant I have this branch somewhere. Will put it together during the easter. My solution is animating height with css transitions, with hooks on transitionEnd event. This is the bootstrap approach. If we really want simpler solution, maybe go ahead.

[ronaldruzicka]

@kettanaito it's a nice example, but I wouldn't use [data-scroll-to] as selector, but rather a class="js-scrollTo" for the JS init and use [data-scroll-to] only as info where to scroll https://intuio.at/blog/dont-use-data-attributes-to-find-html-elements-with-js/

[kettanaito]

@ronaldruzicka a valid argument. Sure, it was just an example :)

P.S. However, now returning to benchmarks regarding getElementsByClassName vs querySelectorAll: the first method is faster in a larger scope. I think this is what should be taken into account. When running a selector over 10,000+ elements it sure has a significant superiority over querySelectorAll, but you will unlikely to notice a difference when used for smaller amount of DOMElements. I often hear to not rush into trusting JavaScript benchmarks, as they are all quite isolated, and may not affect the performance as it seems.

There are rarely more than 10 in-page scrolling anchors on the same page, so this optimization may be redundant (best optimization is not to over-optimize). Yet, I would leave it to an open discussion.

[vbulant]

In case anyone wants to continue with @zoltan-kovac’s collapse, it’s pushed here: https://github.com/actum/gulp-dev-stack/tree/82-collapse