Skip to content

Instantly share code, notes, and snippets.

Marcelo Ribeiro marcelo-ribeiro

View GitHub Profile
marcelo-ribeiro / array-create-unique.js
Last active Jun 17, 2020
Create Unique Array, Remove Array Duplicates
View array-create-unique.js
const products = [
{id: 1, title: "Trim Dress", category: "women", collection: ["new", "featured"]},
{id: 2, title: "Belted Dress", category: "women", collection: ["featured"]},
{id: 3, title: "Fitted Dress", category: "men", collection: ["new"]}
const categories = new Set( => product.category)
marcelo-ribeiro / countries.html
Created May 18, 2020
HTML select of countries
View countries.html
<option>American Samoa</option>
marcelo-ribeiro / how-to-detect-a-click-outside-of-an-element-with-vanilla-javascript.markdown
Last active Jan 2, 2020
How to detect a click outside of an element with vanilla JavaScript
View how-to-detect-a-click-outside-of-an-element-with-vanilla-javascript.markdown

How to detect a click outside of an element with vanilla JavaScript

A simple way to detect a click outside of an element with vanilla JavaScript

A Pen by Marcelo Ribeiro on CodePen.


marcelo-ribeiro / capitalize.js
Last active Aug 14, 2019
Javascript String Capitalize
View capitalize.js
export const capitalize = value => {
if (!value) return "";
const list = value.toString().trim().split(" ");
list.forEach((item, index) => {
list[index] = item[0].toUpperCase() + item.slice(1).toLowerCase();
return list.join(" ");
marcelo-ribeiro / init-mdc-button-ripple.js
Last active Jul 5, 2019
Attach mdc ripple in all mdc buttons
View init-mdc-button-ripple.js
.forEach(button => new mdc.ripple.MDCRipple(button));
marcelo-ribeiro /
Created Jun 26, 2019 — forked from cobyism/
Deploy to `gh-pages` from a `dist` folder on the master branch. Useful for use with [yeoman](

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

View vscode-format-settings.json
"workbench.list.openMode": "doubleClick",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Material Theme Palenight High Contrast",
"editor.fontFamily": "Dank Mono, Cascadia Code, Fira Code",
"editor.fontSize": 13,
"editor.lineHeight": 26,
"editor.fontLigatures": true,
"editor.tabSize": 2,
"editor.fontWeight": "400",
marcelo-ribeiro / example-extend-defaults.js
Last active Oct 18, 2018
Polyfill js to extend objects and child objects
View example-extend-defaults.js
var defaults = {
firstName = 'John',
lastName = 'Doe'
var options = {
firstName = 'Jane'
extendDefaults(defaults, options);
marcelo-ribeiro / trim-all.js
Last active Sep 3, 2018
Trim All White Spaces
View trim-all.js
(function () {
if (!String.prototype.trimAll) {
String.prototype.trimAll = function () {
return this.replace(/\s+/g, '');
// Example
console.log(' Hello World '.trimAll());
marcelo-ribeiro / _variables-ease.scss
Created Mar 15, 2018
Material Design Ease Timing Functions Variables
View _variables-ease.scss
$ease: cubic-bezier(0.4, 0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0.0, 1, 1);
$ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1);
You can’t perform that action at this time.