Skip to content

Instantly share code, notes, and snippets.

Avatar
🧻
What is the alternative to scrollbars?

Felx G felquis

🧻
What is the alternative to scrollbars?
View GitHub Profile
@felquis
felquis / load-global-stylesheet-async.js
Created Jun 8, 2020
Yet Another Snippet to load global stylesheets
View load-global-stylesheet-async.js
/*
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 Jun 8, 2020
Yet Another Snippet to Load JavaScript files async with promises.
View load-global-javascript-async.js
/*
Usage: loadJavaScriptFiles([{
href:
'https://path-to',
},
{
href:
'https://unpkg.com/cdn-path-to',
integrity:
'sha384',
@felquis
felquis / readme.md
Created Dec 3, 2019
How to submit a form on ENTER without a submit button
View readme.md

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 Nov 19, 2019
How do I create forms with React with no other lib/package/module
View readme.md

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 Jun 17, 2017
Take the average number of a x list of numbers in a sequence
View average.js
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 Mar 18, 2017
How much time would I take to read a web page?
View estimate-reading-time.js
// 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])
View index.js
fetch('https://api.pagar.me/1/zipcodes/86900000', { method: 'get' })
.then(response => response.json())
.then(console.log)
View index.js
const cep = require(‘cep-promise’)
cep(‘86900000’).then(console.log)
@felquis
felquis / index.js
Last active Jan 21, 2017
Promise chain mutating Object with setTimeout, + fixing with R.merge
View index.js
// Test 1, what will be displayed in the logs?
Promise.resolve()
.then(() => {
const car = {
color: 'Green'
}
setTimeout(() => {
car.color = 'Orange'
}, 0)
@felquis
felquis / data.js
Last active Jul 12, 2016
How many times a word in bold is mentioned in the AngularJS CHANGELOG?
View data.js
(function () {
'use strict'
window.data = `<a name="1.5.7"></a># 1.5.7 hexagonal-circumvolution (2016-06-15)## Bug Fixes- **$compile:** - don't add merged attributes twice to $attrs ([ebbaa4ac](https://github.com/angular/angular.js/commit/ebbaa4ac5e3559df9267203438a0bb18c2d3b7d8), [#8159](https://github.com/angular/angular.js/issues/8159), [#14737](https://github.com/angular/angular.js/issues/14737)) - cope with $onChanges hooks throwing ([3749c858](https://github.com/angular/angular.js/commit/3749c85829406ca57cc5729e80696c7f34134068), [#14444](https://github.com/angular/angular.js/issues/14444), [#14463](https://github.com/angular/angular.js/issues/14463))- **$parse:** allow arguments to contain filter chains ([cc6dcb4b](https://github.com/angular/angular.js/commit/cc6dcb4bc28aadff4f62d76d6451b0f80b928e69), [#4175](https://github.com/angular/angular.js/issues/4175), [#4168](https://github.com/angular/angular.js/issues/4168), [#14720](https://github.com/angular/angular.js/issues/14720))- **$ro
You can’t perform that action at this time.