JoviDeCroock

Modern applications

Most JavaScript developers love making modern applications, with our new language features and latest libraries making our life easier, but has any one ever actually wondered if this ever impacts our users.

We are dealing with abstractions, abstractions are trying to cover a general use case which could not be conforming to yours. Some are over-engineered in ways one can't possibly comprehend, use cases that will never be reached by middle sized applications. Some of these over

jviide

A proof-of-concept Python code rewriter, transforming JavaScript-like tagged template strings (tag"foo{1+2}bar") to plain function calls (tag(["foo", "bar"], [1+2])).

Note that the code requires tagged version 0.0.2 or higher.

You can use ./encoder.py file to transform STDIN input to STDOUT:

$ python3 encoder.py < example_input.py

developit

Combines all bare imports (npm module imports) into a single packd-es import.

Input:

import { h, render } from 'preact@next';
import { useState } from 'preact@next/hooks';
import { html } from 'htm/preact';
render(h(() => html`<a />`), document.body);

developit

lazy-loader

import lazyLoad from 'lazy-loader';

let mapPromise;
function getMap() {
  return mapPromise || (
 mapPromise = lazyLoad('/chunks/map.js', () => {

developit

inline-loader for webpack

Point this loader at an empty file, and it'll let you supply fake contents for that file.

import one from 'inline-loader?filenam=one.js&code=export default 1!./empty.js';

console.log(one)  // 1

jviide

from htm import htm
from hyperpython import h
from inspect import signature, Parameter


@htm
def html(tag, props, children):
  if callable(tag):
    return relaxed_call(tag, children=children, **props)
  return h(tag, props, children)

prateekbh

import { h, Component } from 'preact';
import { Router } from 'preact-router';
import { Provider } from '@preact/prerender-data-provider';
import Home from './routes/home';
import Route66 from './routes/route66';
import Custom from './routes/custom';
import './style.css';

 export default class App extends Component {
	handleRoute = e => {

developit

Preact + Material-UI example

Preact is a fast 3kB alternative to React with the same modern API.

This example uses shows how to use Material UI 4 with Preact X and Preact CLI 3.

How to use

git clone blah preact-mui

tannerlinsley

function removeFirstConnection () {
  $('[type=ellipsis-horizontal-icon]').first().click()
  setTimeout(() => {
    $('.js-mn-connection-card__dropdown-delete-btn > button').click()
    setTimeout(() => {
      $('[data-control-name="confirm_removed"]').click()
    }, 250)
  }, 250)
}

domenic

// This is a minimal UA sniffer, that only cares about the rendering/JS engine
// name and version, which should be enough to do feature discrimination and
// differential code loading.
//
// This is distinct from things like https://www.npmjs.com/package/ua-parser-js
// which distinguish between different branded browsers that use the same rendering
// engine. That sort of distinction is maybe useful for analytics purposes, but
// for differential code loading it is overcomplicated.
//
// This is meant to demonstrate that UA sniffing is not really that hard if you're