Skip to content

Instantly share code, notes, and snippets.

@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

@brentvatne
brentvatne / notes.md
Created June 20, 2020 00:51
Converting a bare React Native app to a managed Expo app

Hi there!

There's no automated way to do this, but it shouldn't be too hard to pull off! I'd say to just give it a shot using the following process:

  1. What custom native code are you using in your app? Can it be replaced by something from the Expo SDK? If not, you may not be able to use the managed workflow for now and your journey ends here.
  2. The same applies for libraries - here is an exhaustive list of libraries in the Expo SDK in an easy to read JSON format. Compare that with your package.json.
  3. Create a new project with expo init - choose blank or blank (TypeScript).
  4. Start copying your source over and getting it to a working state piece-by-piece.
  5. Configure things like the bundle identifier, icon, splash screen, and android package in app.json.
  6. Publish it in expo publish, do a simulator build with expo build:ios -t simulator and a build you can run in the Andro
@barneycarroll
barneycarroll / fileInput.css
Last active April 2, 2023 22:21
Total input[type=file] style control with pure CSS. File type inputs are notoriously hard to style, due to different semi-serious style restrictions in the name of security (the argument being that a file input presents access to the user's private file system, and should as such always look unambiguously like what it is — redundant if you ask m…
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
@fdidron
fdidron / App.js
Last active April 11, 2023 13:54
React Router v4 Auth
//Usage
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Route from './AuthRoute';
import Login from './Login';
import Private from './Private';
export default () =>
<Router>
@paulirish
paulirish / gist:4158604
Created November 28, 2012 02:08
Learn JavaScript concepts with recent DevTools features

Learn JavaScript concepts with the Chrome DevTools

Authored by Peter Rybin , Chrome DevTools team

In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.

Closures

Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:

@wtaysom
wtaysom / where_is.rb
Created September 23, 2011 08:57
A little Ruby module for finding the source location where class and methods are defined.
module Where
class <<self
attr_accessor :editor
def is_proc(proc)
source_location(proc)
end
def is_method(klass, method_name)
source_location(klass.method(method_name))
@pbojinov
pbojinov / README.md
Last active December 8, 2023 21:09
Two way iframe communication- Check out working example here: http://pbojinov.github.io/iframe-communication/

Two way iframe communication

The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.

Parent

Send messages to iframe using iframeEl.contentWindow.postMessage Recieve messages using window.addEventListener('message')

iframe

@martinsik
martinsik / chat-frontend.js
Last active December 19, 2023 10:23
Node.js chat frontend and server
$(function () {
"use strict";
// for better performance - to avoid searching in DOM
var content = $('#content');
var input = $('#input');
var status = $('#status');
// my color assigned by the server
var myColor = false;
@sebmarkbage
sebmarkbage / Enhance.js
Last active January 31, 2024 18:33
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
@max-mapper
max-mapper / 0.md
Last active February 25, 2024 12:24
JS hoisting by example

JavaScript function hoisting by example

Below are many examples of function hoisting behavior in JavaScript. Ones marked as works successfuly print 'hi!' without errors.

To play around with these examples (recommended) clone them with git and execute them with e.g. node a.js

Notes on hoisting

(I may be using incorrect terms below, please forgive me)