Etienne Baudry WebMaestroFr

WebMaestroFr / CandlesticksChart.tsx

Last active May 2, 2022 14:47

Candlesticks Chart for Recharts v2

	import React, { ReactNode, useMemo } from "react";
	import { Bar, RectangleProps, ComposedChart } from "recharts";
	import { CategoricalChartProps } from "recharts/types/chart/generateCategoricalChart";

	export interface CandlestickData {
	open?: number;
	high?: number;
	low?: number;
	close?: number;
	}

WebMaestroFr / TimeAgo.js

Last active August 6, 2019 09:18

A React component to display timestamps as "time ago" strings.

	import React, {Component} from 'react';

	const SECOND = 1000,
	MINUTE = SECOND * 60,
	HOUR = MINUTE * 60,
	DAY = HOUR * 24,
	MONTH = DAY * 30,
	YEAR = DAY * 365;

	export const getTimeAgoString = (timestamp) => {

WebMaestroFr / url.js

Last active February 23, 2018 09:40

URL Parser and Media Promise

	export function encodeURLParams(params) {
	return Object
	.entries(params)
	.sort((a, b) => a[0] - b[0])
	.reduce((search, entry) => [
	...search,
	entry
	.map(encodeURIComponent)
	.join('=')
	], [])

WebMaestroFr / Group.css

Last active January 16, 2022 08:22

Slide Up and Down with React Transition Group

	.Group-item,
	.Group-item.ui,
	.Group-item.ui:first-child {
	display: block;
	margin-top: 1em;
	}

	.Group-item-enter.Group-item-enter-active {
	transition: opacity 300ms ease-in, margin 300ms ease-out;
	}

WebMaestroFr / Terminal.css

Last active September 10, 2021 15:38

Terminal Window React Component with Keystroke Sounds

	@import url('https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css');

	body {
	background-color: #212121;
	font-family: HelveticaNeue, 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	.App {

WebMaestroFr / api.js

Last active January 10, 2018 12:41

JavaScript Client for Public API

	export function paramsString(args) {
	return Object
	.keys(args)
	.map(k => `${encodeURIComponent(k)}=${encodeURIComponent(args[k])}`)
	.join('&');
	}

	// localStorage.clear();

	export class APIRequest {

WebMaestroFr / websocket-event-client.js

Last active March 10, 2017 00:12

Turn WebSocket messages into document Events.

	var app = {
	url: "ws://" + document.location.hostname
	};

	app.socket = new WebSocket(app.url + ":8082");
	app
	.socket
	.addEventListener('message', function(e) {
	var message = JSON.parse(e.data);
	var event = new CustomEvent(message.type);

WebMaestroFr / blur-background.css

Created December 10, 2014 18:05

Create a blurry effect.

	*[data-blur-background] {
	position: relative;
	overflow: hidden;
	z-index: 1;
	}
	[data-blur-background]::before, [data-blur-background]::after {
	position: absolute;
	display: block;
	z-index: -1;
	content: ' ';

WebMaestroFr / time-ago.js

Created September 24, 2014 15:18

Display date difference from timestamp, "that much time ago" like.

	function timeAgo(time) {
	'use strict';
	var second = 1000,
	minute = second * 60,
	hour = minute * 60,
	day = hour * 24,
	month = day * 30,
	year = day * 365,
	elapsed = Date.now() - time,
	getString = function (value, unit) {

WebMaestroFr / sticky-sidebar.js

Created June 18, 2014 10:09

Apply a "floating" effect on a sidebar

	jQuery(document).ready(function ($) {
	'use strict';
	var content = $('#content'),
	sidebar = $('#sidebar', content),
	position = 0;
	content.css({
	position: 'relative',
	minHeight: sidebar.height()
	});
	sidebar.css({