Skip to content

Instantly share code, notes, and snippets.

View keyserfaty's full-sized avatar
🏠
Working from home

karen keyserfaty

🏠
Working from home
117 followers · 54 following
View GitHub Profile
@keyserfaty
keyserfaty / conError.js
Last active March 13, 2016 13:25
class StreamingService {
constructor($q, iamatService, iamatConfig) {
this.$q = $q;
this.iamatService = iamatService;
this.iamatConfig = iamatConfig;
this.getMenu = function () {
return $q(function (resolve, reject) {
iamatService.client.getAtcode().load(iamatConfig.atcodeName)
@keyserfaty
keyserfaty / redux.js
Created March 17, 2016 20:57
Basic redux/react structure
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './components';
// REDUCER
function person(state = {}, action) {
switch (action.type) {
@keyserfaty
keyserfaty / webpack.bugs.md
Last active August 1, 2016 15:12
Webpack bugs

Module '...' not found

  1. I got this error after adding a repo from its folder directly. This other repo had its own pkg json and so webpack mistake this pkg json from the root one. I solved this by specifing webpack where to look for the node_modules directly with an 'include' property:
loaders: [
  {
 test: /\.js$|.jsx$/,
@keyserfaty
keyserfaty / node.bugs.md
Created August 1, 2016 15:30
Node not finding routes

http://localhost:8080/path/style.css not found

  1. I had a problem with the routes I was calling from my index.html and the static routes that were handled by node. This were the links to my style.css and my bundle.js:
<head>
    <meta charset="utf-8">
@keyserfaty
keyserfaty / TodosInReact.jsx
Last active April 3, 2017 12:14
Todos in React
import React from 'react'
class TodosContainer extends React.Component {
constructor(props) {
super(props)
this.state = {
todos: this.props.todos || [],
input: ''
}
@keyserfaty
keyserfaty / removeWithoutMutation.js
Created August 18, 2016 19:50
Remove element from array without mutation
const index = endpoints.indexOf(action.payload.endpointName);
return endpoint.name === action.payload.endpointName
? endpoints
.slice(0, index)
.concat([endpoints[index] + 1])
.concat(endpoints.slice(index + 1))
: [...endpoints, endpoint];
@keyserfaty
keyserfaty / TodosInReactReduxUI.js
Last active August 24, 2016 01:45
Todos is React and Redux UI
import React from 'react';
import ui from 'redux-ui';
// TodosMainContainer.js
const mapStateToProps = state => ({
todos: state.todos.todos
});
const mapDispatchToProps = state => ({
addTodo: (data) => dispatch(addTodo(data))
@keyserfaty
keyserfaty / extractDiffProps.js
Last active August 28, 2016 10:43
Extract different props from comparing two objects
const obj1 = {
url: ['1', '2', '3'],
fonts: {
first: [1, 2],
second: '2'
},
border: [1, 2, 3]
};
const obj2 = {
@keyserfaty
keyserfaty / handling-refs-es6-classes.md
Last active September 8, 2016 18:15
Handling refs in React with ES6 classes

What are React's refs?

Refs are a reference to the DOM node created by a React element after rendering. There are some scenarios when you need to operate on the node element (the actual DOM node that is rendered to the view) rather than the element used by React in the virtual DOM. My case scenario: I needed to let the user download an image that was generated with a canvas in the virtual DOM. The only way to do this was to wait for the page to be fully rendered and do some stuff on the canva's node element.

With ref you can access the node element that an element from the virtual DOM will generate after its done, like this:

render() {
 return (
@keyserfaty
keyserfaty / nightwatch-react.md
Last active July 27, 2022 20:32
How to write a simple `Nightwatch` test for a `React` app?

How to write a simple Nightwatch test for a React app?

Nightwatch is a testing tool made in Node and Selenium to test browser apps. Long story short you can set it to navigate (really, truly, navigate) your site to test it as if it was a real person.

After you setup your environment, add your tests and run them Nightwatch will open a browser and start interacting with your site in realtime (you can see the whole thing). It will starting clicking around based on what you told it it should click and test if it encounters what you told it it should encounter.

Ok, so lets get to it!

I'm not gonna focus much in the setting up process (I'm much more interested in the API and the use cases) but this is a summary of what you should do in Mac: (full instructions in the Nightwatch website)