Skip to content

Instantly share code, notes, and snippets.

✨ Kathryn Gonzalez ✨ ryngonzalez

  • DoorDash
  • San Francisco, CA
View GitHub Profile
View focus-trap-example.js
var createFocusTrap = require('../../');
var containerOne = document.getElementById('demo-one');
var focusTrapOne = createFocusTrap('#demo-one', {
onDeactivate: function () {
containerOne.className = 'trap';
},
});
document.getElementById('activate-one').addEventListener('click', function () {
@ryngonzalez
ryngonzalez / notes.md
Created Mar 23, 2017
Real-time Insights powered by Reactive Programming
View notes.md

Real-time Insights powered by Reactive Programming

Presenter: Jay Phelps (@_jayphelps)

  • Jay Phelps
    • Senior Software Engineer
  • InfoSec
    • Preventing unauthorized access
    • Stopping hackers
    • Can block exploits using their gateway proxy
      • They need to know if it's working
@ryngonzalez
ryngonzalez / InsertLayerFromFile.js
Last active Aug 29, 2015
Insert a Sketch layer from an absolute path'd file
View InsertLayerFromFile.js
// Name of layer to copy
var sourceLayerName = "Card",
url = NSURL.URLWithString("file:///Users/ryan/Downloads/Test.sketch")
if( true ) {
var sourceDoc = MSDocument.new()
if(sourceDoc.readFromURL_ofType_error(url, "com.bohemiancoding.sketch.drawing", nil)) {
var allChildren = sourceDoc.pages().valueForKeyPath("@distinctUnionOfArrays.children")
View StyleProtocols.jsx
// #########################################
// protocols/listlike.jsx
// #########################################
importRoot, Children, conforms, ProtocolStyle } from 'style-protocol'
import Listable from 'protocols/listable'
export default class Listlike extends HierarchyProtocol {
hierarchy() {
return (
<Root>
@ryngonzalez
ryngonzalez / _glitch.scss
Created Sep 14, 2014
A cool glitch effect created with the use of the `clip` CSS property, `text-shadows`, and randomized CSS keyframes. From @chriscoyier at CSS-Tricks: http://css-tricks.com/glitch-effect-text-images-svg/
View _glitch.scss
/*
(TEXT) PARAMS
=================
1. Namespace
2. Intensity
3. Text color
4. Background color (flat)
5. Highlight #1 color
6. Highlight #2 color
7. Width (px)
@ryngonzalez
ryngonzalez / spring.scss
Created Nov 19, 2013
spring.scss: an attempt at making spring animations using only SASS. Still a work in progress.
View spring.scss
@mixin spring($selector, $name, $duration, $delay, $location, $spring) {
// Set Defaults
$selector: ".spring" !default;
$location: 0,0,0 !default;
$name: "spring" !default;
$duration: 1s !default;
$delay: 0s !default;
$spring: 0.1 !default;
// Set selector to use animation
@ryngonzalez
ryngonzalez / divider.scss
Created Nov 19, 2013
CSS divider using :after and :before pseudo elements.
View divider.scss
%divider {
&:after, &:before {
display: block;
position: absolute;
}
&:after {
text-transform: none;
text-shadow: none;
@include rem(font-size, 12px);
text-align: center;
View showAfterEvent directive
angular.module('$app.directives')
.directive 'showAfterEvent', ['$timeout', ($timeout)->
return {
link: (scope, element, attrs) ->
eventName = attrs.showAfterEvent
element.css 'opacity', 0
element.bind eventName, (e) ->
@ryngonzalez
ryngonzalez / angular-textarea-autoresize.js
Created Jul 22, 2013
A small, performant way of automatically expanding a textarea in Angular.
View angular-textarea-autoresize.js
// Ryan Gonzalez 7/2013
// Adapted from the blog post
// http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html
angular.module('autoresize', []);
angular.module('autoresize')
.directive('autoresize', function($window){
'use strict';
return {
@ryngonzalez
ryngonzalez / toggleData.js
Created Jun 12, 2013
Toggle your data-attributes, yo.
View toggleData.js
(function(jQuery){
$.fn.toggleData = function(dataAttr, onState, offState) {
this.attr(dataAttr, this.attr(dataAttr) === onState ? offState : onState)
};
})($);
You can’t perform that action at this time.