Skip to content

Instantly share code, notes, and snippets.

View nuragic's full-sized avatar
🤘

Andrea Puddu nuragic

🤘
View GitHub Profile
@maximilianschmitt
maximilianschmitt / readme.md
Last active August 29, 2015 14:19
Compiling your ES6 command line apps to work with node.js
@ryansmith111
ryansmith111 / orders.js
Created May 2, 2012 13:08
Using pre-compiled templates with Backbone.Marionette, require.js and the tpl template plugin
define(function (require, exports, module) {
var ns = require('namespace'),
Backbone = require('use!backbone'),
Marionette = require('use!marionette'),
// the tpl require.js plugin extends the text plugin to compile the text into an underscore template
// The require.js optimizer will minify and concatenate them to your apps single JS
ordersViewTpl = require('tpl!templates/orders.html');
var Orders = ns.module();
@nuragic
nuragic / get-duration.js
Last active February 8, 2017 00:06
Get the difference between dates in a human readable format (like "2 years, 3 months").
// Both params accept the same format as the Date object (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).
// This is a basic version (supports just years and months, it assumes every month is 30 days, no pluralization, etc.) but it works.
const getDuration = (startDateString, endDateString = new Date()) => {
const totalMonths = Math.floor((new Date(endDateString) - new Date(startDateString)) / 1000 / 60 / 60 / 24 / 30);
const months = totalMonths < 12 ? totalMonths : totalMonths % 12;
const years = Math.floor(totalMonths / 12);
let duration = '¯\_(ツ)_/¯';
if (years === 0)
if (months > 0)
@machnicki
machnicki / handler-react-6.js
Last active June 15, 2017 16:35
Event handlers in React - 6
import React, { Component } from 'react'
import { MyInput } from 'myInputs'
class MyComponent extends Component {
handleKeyPress = (item) => (e) => {
e.preventDefault()
if (e.nativeEvent.keyCode === 13) {
console.log(`This is enter on item, which is called ${item}!`)
}
@madrobby
madrobby / gist:1362093
Created November 13, 2011 13:04
Force rendering a DOM element when Webkit is acting up
forceRerenderOnWebkit: ->
@el.parentNode.style.cssText += ';-webkit-transform:rotateZ(0deg)'
@el.parentNode.offsetHeight
@el.parentNode.style.cssText += ';-webkit-transform:none'
@andreaseger
andreaseger / miniuploader.html
Created July 20, 2011 14:42
a very compact drag and drop image uploader written in html5 an javascript
<!DOCTYPE html>
<!-- This is the shortest Image Uploader ever :)
And you can even make it shorter if you don't
want all the drag'n drop thing. -->
<!--
AUTHOR: @paulrouget <paul@mozilla.com>
LICENSE:
@gigamonkey
gigamonkey / criteria.txt
Last active January 5, 2020 06:21
Hiring criteria: looking for the ability to …
Write a program that does what it’s supposed to do
Write idiomatic code
Debug a program that you wrote
Debug a program someone else wrote
Debug the interaction between a system you wrote and one you didn’t
File a good bug report
Modify a program you didn’t write
Test a program you wrote
Test a program you didn’t write
Learn a new programming language
@jaydenseric
jaydenseric / zeit-now-g-suite-setup.md
Created March 20, 2017 04:46
Zeit Now G Suite setup

Run each of the following lines, replacing yourdomain.com and codehere with your details:

now dns add yourdomain.com @ TXT google-site-verification=codehere
now dns add yourdomain.com @ MX ASPMX.L.GOOGLE.COM 1
now dns add yourdomain.com @ MX ALT1.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT2.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT3.ASPMX.L.GOOGLE.COM 10
now dns add yourdomain.com @ MX ALT4.ASPMX.L.GOOGLE.COM 10
@developit
developit / unistore.js
Last active September 8, 2020 15:13
Update: the newer & better version of this is published: https://github.com/developit/unistore
import { h, Component } from 'preact';
/** Creates a new store, which is a tiny evented state container.
* @example
* let store = createStore();
* store.subscribe( state => console.log(state) );
* store.setState({ a: 'b' }); // logs { a: 'b' }
* store.setState({ c: 'd' }); // logs { c: 'd' }
*/

tracked npm

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation