Skip to content

Instantly share code, notes, and snippets.


Brian Boyko brianboyko

View GitHub Profile
brianboyko /
Last active Sep 25, 2020
VueJS Best Practices Guide

Deverus Vue.js Style Guide

Guide for developing Vue.js applications.

v. 0.0.1

Vue.js is an amazing framework, which can be as powerful as Angular or React, the two big heavy hitters in the world of front-end frameworks.

However, most of Vue's ease-of-use is due to the use of Observables - a pattern that triggers re-renders and other function calls with the reassignment of a variable.

brianboyko / new-reducer.ts
Created Sep 21, 2020
You can save a heck of a lot of boilerplate by switching to Redux Toolkit
View new-reducer.ts
import Api from "../../ajax/api";
import {createSlice} from '@reduxjs/toolkit';
import get from 'lodash/get';
export interface IPhotosState {
query: string;
totalHits: number;
hits: any[];
total: number;
View pepper2020.txt
extended from /u/irepostoldmemes on imgur, and with apologies to the Butthole Surfers.
Mark infected Sharon.
Sharon got Sharice.
They were sharin' Sharon's covids
'Cause it's such a quick disease.
Mikey has Pneumonia scars,
Bobby got shot by the racists,
brianboyko / Match.spec.ts
Created Jul 11, 2020
A Simple Match Class.
View Match.spec.ts
import Match from "./Match";
const simpleMatch = new Match(
["reverse", (input: string) => input.split("").reverse().join("")],
["scream", (input: string) => input.toUpperCase()],
(input: string) => `default output: ${input}`
brianboyko / Movie.cpp
Last active Jun 20, 2020
Am I creating a memory leak here?
View Movie.cpp
#include "Movie.h"
#include <iostream>
#include <string>
Movie::Movie(string name, string rating, int init_watched) : name{name}, rating{rating}, watched{init_watched} {
std::cout << "Creating: " << name << " " << rating << "\n";
Movie::Movie() : Movie{"UNNAMED MOVIE", "UNNAMED RATING", 0} {};

The Supermarket Notes

Here are some notes Brian Boyko is using to swot up for the interview with a supermarket client, but I'm saving it to Github Gist so that maybe others can use it. This is mostly stuff I already knew, but it's been a while since I had to get back-to-basics and remember these as concepts, so I did a bit of swotting up, and took these notes.

The Event Loop

Javascript has a call stack; like any LIFO stack, it only pushes and pops; when a function is called, it pushes onto the stack, when the function is returned, it pops that function off of the stack. This is how the program "keeps track" of where it is; when you see an error message, you'll almost always see a printout of the current call stack.

Javascript was designed as a single-threaded language; it does one thing at a time. This makes it great for simplicity but when you have "slow" functions, like a database call or a network request (which may never resolve), then the entire execution will wait for your slow functions. The b

brianboyko / Components_Anchor.tsx
Created Nov 13, 2019
React Anchor References
View Components_Anchor.tsx
import React, { useRef, useContext, useEffect } from "react";
interface AnchorProps {
anchorId?: string;
const Anchor: React.FunctionComponent<AnchorProps> = ({ anchorId }) => {
const anchorRef = useRef(null);
const { makeAnchor } = useContext(StateManagerContext);
useEffect(() => {
if (anchorId && anchorRef) {
brianboyko /
Last active May 10, 2020
Vue Extended Styleguide for Vue-Function-API / Vue 3.0 Proposal

Important: This is in the RFC stage. Please comment if you notice typos, code flaws, or even disagree with the conclusions.

I'm still getting used to vue-function-api and haven't had a chance to try it out extensively. In other words, I might be completely wrong on everything. That's okay.

Brian Boyko's Vue.js Style Guide for use with the Vue-Function-API

Guide for developing Vue.js applications for the proposed Vue 3 function API (or the vue-function-api plugin).

brianboyko / eslintrc.yml
Created Mar 18, 2020
eslint isn't working
View eslintrc.yml
- 'prettier'
- 'prettier/react'
- 'plugin:react/recommended'
- 'plugin:import/errors'
- 'plugin:import/warnings'
- 'plugin:jsx-a11y/recommended'
- 'plugin:@typescript-eslint/recommended'
- 'prettier/@typescript-eslint'
overrides: [{ files: ['*.js', '*.jsx'], rules: { '@typescript-eslint/*': "off" } }]
brianboyko / example.ts
Created Feb 17, 2020
View example.ts
import makeReduxStrategy, {ReduxAction, ReduxReducer} from './makeReduxAction';
interface CounterAction extends ReduxAction {
payload: number;
const counterStrategy = makeReduxStrategy<number>({
ADD: (state: number, {payload}: CounterAction) => state + payload,
SUBTRACT: (state: number, {payload}: CounterAction) => state - payload,
You can’t perform that action at this time.