Skip to content

Instantly share code, notes, and snippets.

View jserrao's full-sized avatar
🦍
Swinging from the trees

John Serrao jserrao

🦍
Swinging from the trees
View GitHub Profile
@jserrao
jserrao / historic-ratings-graph.js
Created July 3, 2024 23:10
City Ratings Historic Line Graph Example (with some extra comments)
import { useContext, useState, useEffect } from "react";
import styled, { ThemeContext } from "styled-components";
import dynamic from "next/dynamic";
import historicCRResults from "../../data/processed/2024/city-ratings-all-historical-results-v24.2-short-mod-with-slugs-nivo-compatible.json";
import {
historicCanadianCityList,
historicSmallCityList,
historicMediumCityList,
historicLargeCityList,
/* Newsletter */
.spkactionform dd {
font-size: 14px;
padding-top: 0.3vh;
}
.spkactionform dd label {
font-size: 14px;
line-height: 1.5;
}
@jserrao
jserrao / react-search-filter.js
Created April 16, 2021 00:04
cool filtering - Search filter for multiple object in ReactJS
// 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 August 20, 2020 15:25
Multi-dimensional array regex hell
// 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
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 March 10, 2020 18:46
Some MongoDB Test Queries
// 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 February 26, 2020 21:17
Modified version of Netlify's form handler
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 November 25, 2018 03:17
gatsby-node.js with DOM Parsing
// 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 April 18, 2018 15:05
A JS <a> and <li> switcher for WordPress menus
/* 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 November 7, 2017 16:42
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs https://explorer.blockstack.org/address/19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs https://explorer.blockstack.org/address/19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs