Skip to content

Instantly share code, notes, and snippets.

@vjt
vjt / painless-newline.md
Created August 12, 2020 11:01
Painless scripting language literal newline character
@jorilallo
jorilallo / Flex.js
Created August 17, 2017 20:06
Flexbox component for React
// @flow
import React from 'react';
import styled from 'styled-components';
type GlobalCssValues = 'initial' | 'inherit' | 'unset';
type WrapValue = 'nowrap' | 'wrap' | 'wrap-reverse' | GlobalCssValues;
type JustifyValue =
| 'center'
@sts
sts / openidc_otp_validation.sh
Last active January 16, 2025 03:55
Keycloak OTP Validation API
BASE_URL=https://localhost:8081/auth
CLIENT_ID=curl-test
CLIENT_SECRET=
USERNAME=
PASSWORD=
REALM=validation-test
OTP_CODE=027253
# OpenID Access Token via "Resource Owner Password Credentials Grant"

This document has moved!

It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.

@GavinJoyce
GavinJoyce / gist:c3b5707747121ff067e7
Last active October 23, 2015 12:55
Ember component metrics
import Em from 'ember';
import Metrics from 'myapp/models/metrics';
var FrontendStatsService = Em.Service.extend({
stats: {},
timings: {},
start: function(key) {
if(window.performance) {
if(this.timings[key] === undefined) { //skip the first so we're not capturing data when loading the app
@chantastic
chantastic / on-jsx.markdown
Last active November 10, 2024 13:39
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

// declaration
function foo (n) { return n + 1; }
// expression
// note, fat arrow functions have very different meaning (usually what I want, though)
var foo = function (n) { return n + 1; };
var foo = (n) => { return n + 1; };
var foo = n => n + 1;
// object methods
@sebmarkbage
sebmarkbage / Enhance.js
Last active February 10, 2025 06:23
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
@samselikoff
samselikoff / future-proof.md
Last active August 15, 2024 15:17
Future-proofing your Ember 1.x code

This post is also on my blog, since Gist doesn't support @ notifications.


Components are taking center stage in Ember 2.0. Here are some things you can do today to make the transition as smooth as possible:

  • Use Ember CLI
  • In general, replace views + controllers with components
  • Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController
  • Fetch data in your route, and set it as normal properties on your top-level controller. Export an Ember.Controller, otherwise a proxy will be generated. You can use Ember.RSVP.hash to simulate setting normal props on your controller.
@cybrox
cybrox / EmberChartComponent.js
Created June 5, 2014 12:39
Use Chart.js as a simple Ember.js component
/**
* This is a very simple example of an ember component to integrate
* nnick/chart.js in an ember.js application. Basically, it is simply
* using the components hook to create a ChartJS canvas element.
* Additionally, it supports an update property that allows you to
* let the chart re-rendet if your data or options change. Chart.js
* doesn't support updating its data so this will just create a new
* chart on the given canvas.
*
* Example usage in a handlebars template: