Skip to content

Instantly share code, notes, and snippets.

Avatar

Kyle Shevlin kyleshevlin

View GitHub Profile
@kyleshevlin
kyleshevlin / index.html
Created Feb 18, 2016
D3 Reusable Table Pattern
View index.html
<!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 Mar 11, 2016
Ember Component - Color Boxes (Work in Progress)
View add-color-box.component.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['add_color_box'],
actions: {
addColorBox() {
console.log('Append component now');
}
}
});
View application.controller.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
@kyleshevlin
kyleshevlin / controllers.application.js
Last active Jun 11, 2016
For Wagner - hasMany/belongsTo in Ember w/ model going the other direction
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
@kyleshevlin
kyleshevlin / components.project-form.js
Last active Jun 24, 2016
How Do I Get A Component Action to Trigger a Route Action?
View components.project-form.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
onSubmit() {
this.get('componentSubmit')();
}
}
});
@kyleshevlin
kyleshevlin / README.md
Last active Jun 29, 2016
Rails Components
View README.md

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 Oct 19, 2016
Grokking Contextual Components
View components.baby-bar.js
import Ember from 'ember';
export default Ember.Component.extend({
});
@kyleshevlin
kyleshevlin / components.my-contact.js
Created Oct 19, 2016
Contextual Components for Fullpage component for 2s.com
View components.my-contact.js
import Ember from 'ember';
export default Ember.Component.extend({
});
@kyleshevlin
kyleshevlin / README.md
Last active Oct 25, 2016
Reusable ScrollListener React Component
View README.md

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 Oct 25, 2016
Reusable ResizeListener React Component
View README.md

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.