Arnaud Tanielian Danetag

🕺

Entertaining

Add a bio

Danetag / no.class.js

Created April 8, 2019 15:04

Testing a pattern getting rid of `Class`, `new`, `this` and `null`

	const Component = () => {

	const states = {
	isInit: false,
	};

	const setState = (partialState = {}, callback) => {
	if (
	typeof partialState !== "object" &&
	typeof partialState !== "function" &&

Danetag / critical.js

Last active March 5, 2021 21:18

Using critical.js with cluster for maxi perf

	const cluster = require('cluster');
	const fs = require('fs');
	const path = require('path');
	const critical = require('critical');
	const minify = require('html-minifier').minify;

	/*** Step 01 - define pages */

	// Manifest is created with Webpack on build
	const manifest = JSON.parse(fs.readFileSync('./static/bundles/manifest.json', 'utf8'));

Danetag / Sound.js

Last active March 14, 2025 01:34

Sound Manager using Web Audio API

	// Constants
	import { SOUNDS } from './constants';

	// Utils
	import { loadSound } from 'utils/load';
	import { IS_SAFARI, IS_IE } from 'utils/misc';

	class Sound {

	constructor(options) {

Danetag / _app.js

Last active March 27, 2020 02:59

Emotion extractCritical() with NextJS

	import React from "react";
	import App from "next/app";
	import Head from "next/head";

	import createCache from '@emotion/cache'
	import { CacheProvider } from '@emotion/core'

	const cache = createCache()

	class MyApp extends App {

Danetag / stencil-in-react.js

Created May 20, 2020 00:14

	import React from 'react';
	import ReactDOM from 'react-dom';
	import App from './App';

	// my-component-library is the name of our made up Web Component library
	// that we have published on npm
	import { applyPolyfills, defineCustomElements } from 'my-component-library/loader';

	ReactDOM.render(<App />, document.getElementById('root'));

Danetag / web-components.html

Created May 20, 2020 00:19

	<!-- Template definition -->
	<template id="fancy-element-template">
	<style>
	...
	</style>
	<div class="container">
	<p>Some fancy markup goes here...</p>
	</div>
	</template>

Danetag / basic-stencil-component.js

Last active May 20, 2020 00:31

	import { Component, h, Prop, State, Watch } from '@stencil/core';

	const Constants = {
	baseClassname: 'my-button',
	}

	@Component({
	tag: 'my-button',
	styleUrl: 'button.scss'
	})

Danetag / web-components-render.html

Created May 20, 2020 02:06

	<!-- Writing this -->
	<my-button theme="secondary">A button</my-button>

	<!-- Actually renders this -->
	<my-button theme="secondary">
	<button class="my-button my-button--secondary">
	<span class="label">A button</span>
	</button>
	</my-button>

Danetag / web-component-reset.html

Created May 20, 2020 02:08

	<body>
	<my-global-component reset></my-global-component>

	<!-- rest of the page -->
	</body>

Danetag / web-components-constants.js

Created May 20, 2020 02:21

	import { ICONS } from "my-component-library/constants";

	// ...

	render() {
	return (
	<div>
	<my-icon name={ICONS.ACCOUNT}></my-icon>
	</div>
	)