Skip to content

Instantly share code, notes, and snippets.

View ReactGirl's full-sized avatar
:octocat:
Reacting

ReactGirl

:octocat:
Reacting
View GitHub Profile
@ReactGirl
ReactGirl / removePhpStorm2018.1macOs
Last active March 31, 2018 13:08
Remove / Uninstall PhpStorm 2018.1 macOS High Sierra (10.13.3)
rm -rf ~/Library/Preferences/jetbrains.*
rm -rf ~/Library/Caches/PhpStorm*
rm -rf ~/Library/Application\ Support/PhpStorm*
rm -rf ~/Library/Logs/PhpStorm*
@ReactGirl
ReactGirl / gist:f7182a4a11e43360301617a4e34b296d
Created July 8, 2018 11:33
understand bindActionCreators
The bindActionCreators utility was specifically created for cases like binding methods for use in React components. In fact, straight from the bindActionCreators API reference:
The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.
Personally, though, I advise using the object shorthand argument for connect, instead of writing your own mapDispatch function. The object shorthand will automatically call bindActionCreators for you, and it's one less thing to worry about:
export default connect(mapState, {addTodo, toggleTodo})(TodoList);
So no, bindActionCreators isn't a "dangerous" pattern, and I highly recommend binding action creators so that your components aren't "aware" of Redux. When a component calls this.props.someFunction(), it shouldn't know or care whether that method is a callback from a parent component, a bound-up Redux action creator, or a mock function in
@ReactGirl
ReactGirl / responsive-semantic-ui.css
Created August 8, 2018 21:22 — forked from bl4ck5un/responsive-semantic-ui.css
Responsive helpers (mobile-only etc.) for semantic-ui
/* Semantic UI has these classes, however they're only applicable to*/
/* grids, containers, rows and columns.*/
/* plus, there isn't any `mobile hidden`, `X hidden` class.*/
/* this snippet is using the same class names and same approach*/
/* plus a bit more but to all elements.*/
/* see https://github.com/Semantic-Org/Semantic-UI/issues/1114*/
/* Mobile */
@media only screen and (max-width: 767px) {
[class*="mobile hidden"],
@ReactGirl
ReactGirl / installing_postgresql.md
Created September 2, 2018 19:49 — forked from 15Dkatz/installing_postgresql.md
PostgreSQL installation tutorial

Let's install PostgreSQL onto your operating system.

As an open source object-relational database management system, PostgreSQL available for MacOS, Linux, and Windows.

Goal for each Operating System

The goal will be to run the following command successfully from the command line (regardless of the OS):

psql -U postgres

This should open the psql interactive shell and print a prompt that looks like:

@ReactGirl
ReactGirl / gist:20d16157a667c144df0e483a7e6f1a6c
Created September 5, 2018 20:56
Pause javascript in Console to style hover elements
setTimeout(() => {debugger}, 3000)
const express = require('express')
const chalk = require('chalk')
const app = express()
app.all('*', (req, res) => {
res.send(`<h1> welcome to my homepage </h1>`)
})
app.listen(3000)
console.log(chalk.cyan('sever started'));
@ReactGirl
ReactGirl / App.js
Created December 13, 2018 22:40 — forked from koistya/App.js
How to add `onscroll` event in ReactJS component
import React from 'react';
let lastScrollY = 0;
let ticking = false;
class App extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
@ReactGirl
ReactGirl / solved.md
Created April 2, 2019 19:16
git inside another git

git rm --cached path_to_submodule