Skip to content

Instantly share code, notes, and snippets.

View felquis's full-sized avatar
🔎
aligning divs with style

Felquis G felquis

🔎
aligning divs with style
View GitHub Profile
@felquis
felquis / onControlledInputChange.tsx
Created February 18, 2023 15:18
Use this callback on all input's onChange prop, inputs must have proper type and name matching the state
function Example() {
const defaultInputValues = {
name: "", // should match input's name prop
email: "",
address_line_1: "",
birthday: "",
}
const [controlledFields, setControlledFields] = useState({
...defaultInputValues,
@felquis
felquis / load-global-stylesheet-async.js
Created June 8, 2020 21:24
Yet Another Snippet to load global stylesheets
/*
Usage: loadStyles([{
href:
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons',
},
{
href:
'https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css',
integrity:
'sha384',
@felquis
felquis / load-global-javascript-async.js
Last active June 8, 2020 21:40
Yet Another Snippet to Load JavaScript files async with promises.
/*
Usage: loadJavaScriptFiles([{
href:
'https://path-to',
},
{
href:
'https://unpkg.com/cdn-path-to',
integrity:
'sha384',
@felquis
felquis / readme.md
Created December 3, 2019 15:17
How to submit a form on ENTER without a submit button

If you have a form, and in the design specs there's no submit button inside the form, you can still make the form submit when the user presses enter. You just need to put a hidden input of type submit.

<form>
  <input type="text" name="anything" />
  <input type="submit" hidden />
</form>

That is it for today. Questions in the comment field bellow, thanks.

@felquis
felquis / readme.md
Last active November 19, 2019 17:57
How do I create forms with React with no other lib/package/module

In this gist I describe how I use arrays to create web forms with JavaScript React, the same pattern can be use with any JS lib or, vanilla js.

First, what kind of form are we talking about? §I applied this method in forms up to twelve inputs, including type text, email, select, select multiple, date rage, number range, checkbox.

In a gist, create an array and each array indice is an object that describes how a form input of any given type should render. I put this array in my state and on each input on change I map my fields array and update it's value, onChange I can also call async validation functions that will map and update the fields array with the current input validity.

@felquis
felquis / average.js
Created June 17, 2017 01:55
Take the average number of a x list of numbers in a sequence
export default function average (limit) {
let list = []
let current = 0
return (x) => {
list = [...list, x]
if (list.length < limit) return current
current = list.reduce((acc, x, index) => {
@felquis
felquis / estimate-reading-time.js
Last active March 18, 2017 06:15
How much time would I take to read a web page?
// output is in minutes
document.body.innerText.split(' ')
.filter((split) => split.length > 1)
.map((split) => split.replace(/[^a-zZ-a]+/g, ''))
.filter((split) => split.length > 1)
.reduce((acc, split) => {
const time = split.split('').length * 115
return [...acc, (time > 500) ? time : 500]
}, [])
.reduce((acc, time) => ([acc[0] + time]), [0])
fetch('https://api.pagar.me/1/zipcodes/86900000', { method: 'get' })
.then(response => response.json())
.then(console.log)
@felquis
felquis / index.js
Last active February 15, 2017 00:58
const cep = require(‘cep-promise’)
cep(‘86900000’).then(console.log)
@felquis
felquis / index.js
Last active January 21, 2017 11:01
Promise chain mutating Object with setTimeout, + fixing with R.merge
// Test 1, what will be displayed in the logs?
Promise.resolve()
.then(() => {
const car = {
color: 'Green'
}
setTimeout(() => {
car.color = 'Orange'
}, 0)