Skip to content

Instantly share code, notes, and snippets.

View kyleshevlin's full-sized avatar

Kyle Shevlin kyleshevlin

688 followers · 85 following
View GitHub Profile
@kyleshevlin
kyleshevlin / index.html
Created February 18, 2016 17:50
D3 Reusable Table Pattern
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Reusable Table Pattern</title>
<style>
table {
border-collapse: collapse;
}
th,
@kyleshevlin
kyleshevlin / add-color-box.component.js
Created March 11, 2016 07:54
Ember Component - Color Boxes (Work in Progress)
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['add_color_box'],
actions: {
addColorBox() {
console.log('Append component now');
}
}
});
@kyleshevlin
kyleshevlin / application.controller.js
Last active March 14, 2016 22:14
API Spark PI Challenge
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
@kyleshevlin
kyleshevlin / controllers.application.js
Last active June 11, 2016 16:11
For Wagner - hasMany/belongsTo in Ember w/ model going the other direction
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
@kyleshevlin
kyleshevlin / components.project-form.js
Last active June 24, 2016 04:16
How Do I Get A Component Action to Trigger a Route Action?
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
onSubmit() {
this.get('componentSubmit')();
}
}
});
@kyleshevlin
kyleshevlin / README.md
Last active June 29, 2016 20:29
Rails Components

With web components coming to browsers soon and most JavaScript MV*s already using them, it seemed the right time to figure out how to do this in Rails. We can do this by making extensive use of partials.

In Handlebars, components can be inline or block form by creating them with or without a {{yield}} respectively. Rails has the same configuration. The differences are how the partial is added to the view and how locals are passed to it.

In this gist, I have created a component generator. This will create the Slim and SCSS files for your component and update a SCSS file (a pattern I have used at work) with the correct @import. The command for doing this is:

Inline component: rails generate component <NAME>

Block component:

@kyleshevlin
kyleshevlin / components.baby-bar.js
Last active October 19, 2016 18:41
Grokking Contextual Components
import Ember from 'ember';
export default Ember.Component.extend({
});
@kyleshevlin
kyleshevlin / components.my-contact.js
Created October 19, 2016 18:53
Contextual Components for Fullpage component for 2s.com
import Ember from 'ember';
export default Ember.Component.extend({
});
@kyleshevlin
kyleshevlin / README.md
Last active October 25, 2016 18:21
Reusable ScrollListener React Component

Reusable ScrollListener React Component

Usage

Include the ScrollListener component anywhere you need to listen to the scroll event. Then pass a function into the scrollHandler prop. This is a required prop. Because you include this component in other components, the function you pass has access to any props or state of that component.

@kyleshevlin
kyleshevlin / README.md
Created October 25, 2016 18:24
Reusable ResizeListener React Component

Reusable ResizeListener React Component

Usage

Include the ResizeListener component anywhere you need to listen to the resize event. Then pass a function into the resizeHandler prop. This is a required prop. Because you include this component in other components, the function you pass has access to any props or state of that component.