Skip to content

Instantly share code, notes, and snippets.

Avatar
🦍
Swinging from the trees

John Serrao jserrao

🦍
Swinging from the trees
View GitHub Profile
@jserrao
jserrao / react-search-filter.js
Created Apr 16, 2021
cool filtering - Search filter for multiple object in ReactJS
View react-search-filter.js
// https://www.cluemediator.com/search-filter-for-multiple-object-in-reactjs
import React, { useState } from 'react';
function App() {
const dataList = [
{
"id": 1,
"name": "cerulean",
"year": 2000,
@jserrao
jserrao / the-bottom.js
Created Aug 20, 2020
Multi-dimensional array regex hell
View the-bottom.js
// 3- Take listItemsArray and loop through it w/ regex
for (var i = 0; i < listItemsArray.length; i++) {
// 4- Use regex to break each list item into five pieces
listItemsTemp[i] = listItemsArray[i].match(/(<li\b(?:>\s+(?:id="([^"]*)"|class="([^"]*)")|[^\s>]+|\s+)*>)|((<\w+\b>)|(<a\shref=".*">)|(.+?(?=<))|(<\/\w+\b)>)/g);
// 5- Setup listItemsRearranged[i] with an array of listItemsTemp.length
listItemsRearranged[i] = new Array(listItemsTemp.length);
// 6- Take listItemsTemp and reassign positions
View component-with-accordion.js
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
// Styles, w/ styled-component syntax
const NavContainer = styled.nav`
background-color: ${props => props.theme.lightGray};
font-size: 14px;
max-width: ${props => props.theme.xs};
overflow: auto;
@jserrao
jserrao / mongodb-queries.txt
Created Mar 10, 2020
Some MongoDB Test Queries
View mongodb-queries.txt
// Mongo DB commands
db.restaurants.insert({
"name": "Haikan",
"address" : {
"street" : "805 V Street NW",
"zipcode" : 20001
},
"cuisine": "Ramen"
})
@jserrao
jserrao / react-form-handling.js
Created Feb 26, 2020
Modified version of Netlify's form handler
View react-form-handling.js
import React from 'react'
/* Handling a Form */
class Form extends React.Component {
// Set up a state object that's just empty
// You'll see why it's empty in handleChange
constructor(props) {
super(props);
this.state = {};
@jserrao
jserrao / gatsby-node.js
Last active Nov 25, 2018
gatsby-node.js with DOM Parsing
View gatsby-node.js
// Give Node access to path
const path = require('path')
const fs = require('fs')
// Setup parser for taking apart the HTML Description hack stuff from Shopify
const DomParser = require('dom-parser')
const shopifyDescParser = new DomParser()
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
@jserrao
jserrao / wp-menu-switch.js
Created Apr 18, 2018
A JS <a> and <li> switcher for WordPress menus
View wp-menu-switch.js
/* MAIN MENU ITEM SWITCH
*
* Description:
* For whatever reason, it's near impossible to get the WP markup in the menu to switch around
* So we're begrudgingly doing it in JS
* This is accomplished by using a regex that breaks the capture after each list item end tag
*
* Usage:
* Really simple - just pass in the class / ID for the sidebar menu container
* This function is not really reusable due to the regex but encapsulation is a good idea in a big JS file
@jserrao
jserrao / gist:2fe9b3770786b9774b537b8b475f53ee
Last active Nov 7, 2017
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs https://explorer.blockstack.org/address/19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs
View gist:2fe9b3770786b9774b537b8b475f53ee
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs https://explorer.blockstack.org/address/19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs
@jserrao
jserrao / pseudo-reader.js
Created Feb 24, 2017
Read a pseudo class in JS
View pseudo-reader.js
// How to read a pseudo class in JS
window.getComputedStyle(
document.querySelector('.element'), ':before'
);
@jserrao
jserrao / scroll-checker.js
Last active May 25, 2021
Click anywhere to close an active off-canvas menu
View scroll-checker.js
/* SCROLL CHECKER
*
* Description:
* This function scans all incoming clicks.
* This allows users to easily click outside an active offcanvas menu.
*
*
* Usage:
* This function analyzes the kinds of clicks that could come a page and an offcanvas menu.
* It's checking for a hamburger menu, a menu closing mechanism, links in a menu and links on a page