Skip to content

Instantly share code, notes, and snippets.

Avatar

Sean O'Hara sohara

View GitHub Profile
@sohara
sohara / contentful-legal-docs.md
Created Nov 11, 2019
Legal Documents in Contentful
View contentful-legal-docs.md
@sohara
sohara / bye-bye-props.md
Last active May 30, 2019
Mitigating proliferation of props when using SoulCylce UI Kit
View bye-bye-props.md

Mitigating proliferation of props in the SoulCylce UI Kit Header (aka "I want less [sic] props")

The current implemention of the UI Kit header relies entirely on various props passed to the <Header /> component to determine all aspects of what will be rendered within it and when. This allows for a more or less deterministic rendering of the component between Podium SoulCycle Site (PSS) and the older Soul Cycle Site (SCS), assuming both apps pass the same props to the <Header />.

As a component like the header is built out it's child components grow in number and complexity, resulting in a growing number of dependencies. Since the header in its current implementation is effectively a black box, the only way to provide those dependencies to the child components is to pass them down the component hierarchy as props, starting with the <Header /> invocation itself.

Here is the current invocation of the header in PSS in the _app.js file:

import { Header } from 'soulcycle-ui-kit';
View components.x-list-item.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'li',
});
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
init () {
this._super(...arguments);
this.set('parent', this.get('store').createRecord('parent'));
},
actions: {
@sohara
sohara / EmberModelSerialized.json
Created Jun 26, 2018
Comparing Request Body output
View EmberModelSerialized.json
{
"id": "5b30fc28c0895718b377e124",
"publishHistory": {
"page": 1,
"totalCount": 3,
"meta": {
"collectionName": "articles",
"modelName": "article",
"publishable": true,
"image": false,
View components.category-browser.js
import Ember from 'ember';
export default Ember.Component.extend({
});
View ember-builds.txt
// Running cold ember build on master, now changes
// Build 1
Build successful (55229ms) – Serving on http://localhost:4200/
Slowest Nodes (totalTime => 5% ) | Total (avg)
----------------------------------------------+---------------------
SassCompiler (7) | 22869ms (3267 ms)
Concat (6) | 11174ms (1862 ms)
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
View B0002DNIAE.json
{
"ASIN": [
"B0002DNIAE"
],
"ParentASIN": [
"B0072CXURY"
],
"DetailPageURL": [
"http://www.amazon.com/Diorliner-Precision-Eyeliner-Christian-Dior/dp/B0002DNIAE%3Fpsc%3D1%26SubscriptionId%3DAKIAJ7IODE3ZIX6FGTPA%26tag%3Daws Tag%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB0002DNIAE"
],
You can’t perform that action at this time.