shilman

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

luciomartinez

How to get a remote repository (from BitBucket, GitHub or anyone)

$ git clone https://github.com/<username>/<repository>.git

If you have added a SSH key, then you can also use this command:

$ git clone git@bitbucket.org:<username>/<repository>.git

How to create a new repository from the command line

nuxlli

Sublime Text 2 - Useful Shortcuts

Tested in Mac OS X: super == command

Open/Goto

---

• super+t: go to file
• super+ctrl+p: go to project
• super+r: go to methods

auser

angular.module('d3AngularApp', ['d3'])
.directive('d3Bars', ['$window', '$timeout', 'd3Service', 
  function($window, $timeout, d3Service) {
    return {
      restrict: 'A',
      scope: {
        data: '=',
        label: '@',
        onClick: '&'
      },

pnavarrc

Introduction to GraphQL

Install and Configure GraphiQL

Or alternatively, use the GitHub GraphQL Explorer

1. Install GraphiQL
2. Create a Personal Access Token: Give it access to repo, gist, notification and user (or less, if you want).
3. Set the endpoint to https://api.github.com/graphql, the method to POST and add the following header:

electricg

// Which HTML element is the target of the event
function mouseTarget(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
	return targ;
}

mfellner

import { ApolloServer, gql } from 'apollo-server-micro';

const typeDefs = gql`
  type Query {
    sayHello: String
  }
`;

const resolvers = {
  Query: {

yuvadm

from fabric.api import *

env.hosts = ['host.name.com']
env.user = 'user'
env.key_filename = '/path/to/keyfile.pem'

def local_uname():
    local('uname -a')

def remote_uname():

miketrionfo

Purpose

Angular directive code to help resize/redraw non-responsive elements (like D3 charts) in a bootstrap responsive design when the window moves across bootstrap boundaries.

(I edited my boostrap to create an extra size for some 7" tablets and landscape phones @ 600px)

What do you think? Good? Bad? Ugly? How could it be better? What other options exist?

Credit to tagtree for the Rickshaw directive help: http://tagtree.tv/d3-with-rickshaw-and-angular

pnavarrc

Bee Anatomy

This gist is to show how to integrate a raster image and a svg overlay to create images that show the parts of an object. In this case, I show the main parts of the bee anatomy.

The svg image was created with Inkscape. First, the raster image is inserted in the svg file to draw the shapes. Then, each path is given an id to allow its identification in the web version. For instance, the forewings, the lines and the corresponding text are given ids to allow its identification and assignment of a class in the page.

WIth D3, we use mouseover and mouseout to show and hide the elements of the same class that the selected element.

Thanks to Joost Witteveen for sharing the photo of the bee with cc Attribution license.