Skip to content

Instantly share code, notes, and snippets.

Etienne Baudry WebMaestroFr

Block or report user

Report or block WebMaestroFr

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@WebMaestroFr
WebMaestroFr / TimeAgo.js
Last active Aug 6, 2019
A React component to display timestamps as "time ago" strings.
View TimeAgo.js
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
WebMaestroFr / url.js
Last active Feb 23, 2018
URL Parser and Media Promise
View url.js
export function encodeURLParams(params) {
return Object
.entries(params)
.sort((a, b) => a[0] - b[0])
.reduce((search, entry) => [
...search,
entry
.map(encodeURIComponent)
.join('=')
], [])
@WebMaestroFr
WebMaestroFr / Group.css
Last active Mar 5, 2019
Slide Up and Down with React Transition Group
View Group.css
.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;
}
View Terminal.css
@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
WebMaestroFr / api.js
Last active Jan 10, 2018
JavaScript Client for Public API
View api.js
export function paramsString(args) {
return Object
.keys(args)
.map(k => `${encodeURIComponent(k)}=${encodeURIComponent(args[k])}`)
.join('&');
}
// localStorage.clear();
export class APIRequest {
@WebMaestroFr
WebMaestroFr / websocket-event-client.js
Last active Mar 10, 2017
Turn WebSocket messages into document Events.
View websocket-event-client.js
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
WebMaestroFr / blur-background.css
Created Dec 10, 2014
Create a blurry effect.
View blur-background.css
*[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
WebMaestroFr / time-ago.js
Created Sep 24, 2014
Display date difference from timestamp, "that much time ago" like.
View time-ago.js
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
WebMaestroFr / sticky-sidebar.js
Created Jun 18, 2014
Apply a "floating" effect on a sidebar
View sticky-sidebar.js
jQuery(document).ready(function ($) {
'use strict';
var content = $('#content'),
sidebar = $('#sidebar', content),
position = 0;
content.css({
position: 'relative',
minHeight: sidebar.height()
});
sidebar.css({
@WebMaestroFr
WebMaestroFr / grid-to-tiles.js
Last active Aug 29, 2015
Arrange grid elements into tiles. Works great if most of your columns match in width, and if you keep your wider ones on top...
View grid-to-tiles.js
(function ($) {
'use strict';
$.fn.wmTiles = function () {
var container = $(this),
tiles = container.children(),
arrange = function () {
var places = [{
t: 0,
l: 0,
w: container.width()
You can’t perform that action at this time.