Skip to content

Instantly share code, notes, and snippets.

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

  • Accessible
  • Composable
  • Stylable
@jayphelps
jayphelps / a.js
Last active April 26, 2018 15:38
Making abstractions for redux and redux-observable
// WARNING: Completely untested code. it might not work and/or it might have
// things that don't work well. Just made for illustrational purposes
// redux-observable shines the most with complex async stuff, like WebSockets
// but many of us will still use it for more modest things like AJAX requests.
// In these cases, there can be a ton of repetitive boilerplate. So this is a
// simple example of applying some abstractions and conventions to make it easier.
// THAT SAID, since abstractions cause indirection it can make it harder for
// someone to come along later and know how something works. Weigh the costs
// and remember, this example isn't a suggestion of the actual code you should
<?php declare(strict_types=1);
// In reaction to @marcoshuttle's http://marcosh.github.io/post/2017/06/16/maybe-in-php.html
// Warning: none of this code has been tested or even run.
namespace Verraes\Maybe;
interface Just extends Maybe {
// We can only extract if we know it's a Just
@markerikson
markerikson / react-controlled-inputs.md
Last active June 15, 2021 12:50
React "controlled" vs "uncontrolled" inputs explanation

[12:03 AM] acemarke: "controlled" and "uncontrolled" inputs
[12:04 AM] acemarke: if I have a plain, normal HTML page, and I put <input id="myTextbox" type="text" /> in my page(edited)
[12:04 AM] acemarke: and I start typing into that textbox
[12:04 AM] acemarke: it remembers what I've typed. The browser stores the current value for that input
[12:05 AM] acemarke: and then sometime later, I can get the actual element, say, const input = document.getElementById("myTextbox"), and I can ask it for its value: const currentText = input.value;
[12:05 AM] acemarke: good so far?
[12:08 AM] acemarke: I'll keep going, and let me know if you have questions
[12:08 AM] lozio: ok, actually I'm reading
[12:09 AM] lozio: good
[12:09 AM] acemarke: so, a normal HTML input field effectively stores its own value at all times, and you can get the element and ask for its value

@gaearon
gaearon / connect.js
Last active June 24, 2024 09:43
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
@viktorsteinwand
viktorsteinwand / Easy access to composer docker image
Last active February 17, 2016 20:56
Easy access to composer/composer docker image
# This shell script can be used for easier accessing the composer/composer docker image (https://hub.docker.com/r/composer/composer/)
Create new composer file
```sh
sudo vim /usr/local/bin/composer
```
The contents of the file will look like this:
```sh
@CMCDragonkai
CMCDragonkai / angularjs_directive_attribute_explanation.md
Last active November 29, 2023 15:35
JS: AngularJS Directive Attribute Binding Explanation

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

  1. Raw Attribute Strings

    <div my-directive="some string" another-param="another string"></div>
@shawndumas
shawndumas / .gitconfig
Created August 5, 2013 19:08
Using WinMerge as the git Diff/Merge Tool on Windows 64bit
[mergetool]
prompt = false
keepBackup = false
keepTemporaries = false
[merge]
tool = winmerge
[mergetool "winmerge"]
name = WinMerge
@Mithrandir0x
Mithrandir0x / gist:3639232
Created September 5, 2012 16:15
Difference between Service, Factory and Provider in AngularJS
// Source: https://groups.google.com/forum/#!topic/angular/hVrkvaHGOfc
// jsFiddle: http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/
// author: Pawel Kozlowski
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!"
@ScottPhillips
ScottPhillips / .htaccess
Created February 2, 2012 04:30
Common .htaccess Redirects
#301 Redirects for .htaccess
#Redirect a single page:
Redirect 301 /pagename.php http://www.domain.com/pagename.html
#Redirect an entire site:
Redirect 301 / http://www.domain.com/
#Redirect an entire site to a sub folder
Redirect 301 / http://www.domain.com/subfolder/