Os links aqui estão sem nenhum tipo de ordenação, então o que esta por ultimo não é necessariamente o mais ruim na minha opinião e o que esta primeiro não necessariamente é o melhor, sabendo disso, vamos a lista.
felquis
/ top-portfolio-front-end.md
Last active
April 19, 2024 18:45
Portifólios legais de desenvolvedores Front-end que encontrei por ai
felquis
/ url-schemes.md
Last active
April 15, 2024 06:38
iOS, Android browser apps URL Schemes to handle URL between browsers, and apps..
Assume the user is on a mobile device iOS Safari (Or other browser), but you want a link to open into any other specific mobile browser app like Chrome, Safari, Firefox, Opera, Arc... How do you do that?
To open on Chrome
<a href="googlechrome://example.com">try it on Chrome</a>check out Chrome iOS Docs for more information
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Copyright 2014 Google Inc. All Rights Reserved. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Example() { | |
| const defaultInputValues = { | |
| name: "", // should match input's name prop | |
| email: "", | |
| address_line_1: "", | |
| birthday: "", | |
| } | |
| const [controlledFields, setControlledFields] = useState({ | |
| ...defaultInputValues, |
felquis
/ load-global-javascript-async.js
Last active
June 8, 2020 21:40
Yet Another Snippet to Load JavaScript files async with promises.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Usage: loadJavaScriptFiles([{ | |
| href: | |
| 'https://path-to', | |
| }, | |
| { | |
| href: | |
| 'https://unpkg.com/cdn-path-to', | |
| integrity: | |
| 'sha384', |
felquis
/ load-global-stylesheet-async.js
Created
June 8, 2020 21:24
Yet Another Snippet to load global stylesheets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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', |
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.
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
/ example.js
Created
January 27, 2016 15:00
Service Worker: Ignore request endpoints with RegEx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This polyfill provides Cache.add(), Cache.addAll(), and CacheStorage.match(), | |
| // which are not implemented in Chrome 40. | |
| importScripts('js/cache-polyfill.js') // find it on the internet | |
| var version = 'v01234567' | |
| var ignoreRequests = new RegExp('(' + [ | |
| '\.com/', // customize to your use case, home page | |
| '/page1', | |
| '/perfil', | |
| '/perfil\/(.*)', // ignore also IDs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Mouse Parallax Effect</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div id="parallax"> | |
| <img class="parallax-item" src="http://bymarina.com.br/wp-content/uploads/2011/01/sol2.jpg" width="150"> |
NewerOlder