Skip to content

Instantly share code, notes, and snippets.

View coreybruyere's full-sized avatar

Corey Bruyere coreybruyere

16 followers · 39 following
View GitHub Profile
@JohnAlbin
JohnAlbin / _README.md
Last active March 18, 2024 09:25 — forked from clarkdave/createPages.ts
TypeScript + Gatsby config and node API

README

  1. When Gatsby starts up, it will read gatsby-config.js first.
  2. As you can see below, we use that file to require('ts-node').register() which registers a TypeScript evaluator that will be used when Gatsby reads all other API Javascript files. In other words, we only need to do this once in our entire codebase and not in other Gatsby files like gatsby-node.js.
  3. Our gatsby-config.js re-exports all the exported variables available in gatsby-config.ts.
@chiplay
chiplay / system.tsx
Last active October 25, 2021 06:39
Styled-system + Typescript
import React, { HTMLAttributes } from 'react'; // version 16.4.2
import styled from 'styled-components'; // version 4.0.3
import * as SS from 'styled-system'; // version 3.2.0
import * as CSS from 'csstype';
export interface BaseProps extends HTMLAttributes<HTMLDivElement> {}
export interface BoxProps extends BaseProps,
SS.BgColorProps,
SS.SpaceProps,
@threepointone
threepointone / for-snook.md
Last active August 26, 2023 15:43
For Snook

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

@onefriendaday
onefriendaday / export.js
Created July 6, 2018 07:31
Storyblok Iconselector
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div>
<div class="uk-margin-bottom uk-text-center" v-if="model.icon">
Current icon: <i :class="model.type + ' ' + model.icon"></i>
<small style="cursor:pointer;" @click="removeIcon">(remove)</small>
</div>
<input class="uk-width-1-1 uk-margin-bottom" v-model="search" placeholder="Search icons" />
<span class="icon-link" @click="setIcon(icon)" :key="icon.icon" v-for="icon in filteredIcons" style="margin: 5px; display: inline-block;">
<i style="cursor:pointer;" :class="icon.type + ' ' + icon.icon"></i>
@kitze
kitze / conditionalwrap.js
Created October 25, 2017 16:54
one-line React component for conditionally wrapping children
import React from 'react';
const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;
const Header = ({shouldLinkToHome}) => (
<div>
<ConditionalWrap
condition={shouldLinkToHome}
wrap={children => <a href="/">{children}</a>}
>
@markreid
markreid / gitflowrebasing.md
Created January 17, 2017 04:30
git flow with rebasing
@mhairston
mhairston / event-delegate.js
Created October 27, 2016 17:59
Event Delegation with Plain JavaScript
// Event Delegation with Plain Javascript
// from Adam Beres-Deak
// http://bdadam.com/blog/plain-javascript-event-delegation.html
function on(elSelector, eventName, selector, fn) {
var element = document.querySelector(elSelector);
element.addEventListener(eventName, function(event) {
var possibleTargets = element.querySelectorAll(selector);
var target = event.target;
@coreybruyere
coreybruyere / ajax-inline-svg-with-fallback.html
Last active June 3, 2016 19:41
A copy of Chris Coyier's example https://github.com/chriscoyier/inline-svg-with-grunticon-fallback/blob/master/index.html but with a DOMContentLoaded listener so SVG's don't append before document.body is created.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline SVG with Grunticon Fallback</title>
<meta name="viewport" content="width=device-width">
@paulirish
paulirish / what-forces-layout.md
Last active July 24, 2024 14:23
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@drawcard
drawcard / woocommerce-sage-template-part-overrides.md
Last active August 16, 2021 08:39
Woocommerce - Using template part overrides in Sage

So, you know how to override a template file in Woocommerce using Sage, but you're having trouble changing something within the deeper level of that template file. For example, you want to change the output HTML structure of a given part of the product page loop, or incorporate a Bootstrap class into a button element without using Jquery to inject it. Here's how you can override deeper level parts, the default WC theme elements.

Prerequisites

Now you're familiar with how to do Sage + Woocommerce templates, it's time to make it happen.

The template page override