Skip to content

Instantly share code, notes, and snippets.

View JawsomeJason's full-sized avatar
💅
Bein' sassy

Jason Featheringham ⊙ω⊙ JawsomeJason

💅
Bein' sassy
View GitHub Profile
@kripod
kripod / Box.tsx
Last active November 4, 2024 07:41
Superseded by https://www.kripod.dev/blog/behind-the-as-prop-polymorphism-done-well/ – Polymorphic `as` prop for React components with TypeScript
import React from 'react';
// Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts
type PropsOf<
// eslint-disable-next-line @typescript-eslint/no-explicit-any
E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;
export interface BoxOwnProps<E extends React.ElementType = React.ElementType> {
as?: E;
@carpben
carpben / useFocus.ts
Created August 10, 2019 04:52
useFocus.ts
export const useFocus = () => {
const htmlElRef = useRef<HTMLElement>()
const setFocus = () => {
const currentEl = htmlElRef.current
currentEl && currentEl.focus()
}
return [setFocus, htmlElRef] as const
}
@JawsomeJason
JawsomeJason / _element.scss
Last active August 29, 2019 07:12
Sass Mixin to generate `@element` EQCSS Element Queries
/// Helper for EQCSS Element Queries `@element`
///
/// @author Jason Featheringham
/// @link https://gist.github.com/thejase/d2107285b6e10315dd6bc055115647fe Code source
/// @link http://elementqueries.com/ Plugin to parse EQCSS
/// @link https://gist.github.com/tomhodgins/6237039fa07c2e4b7acd1c8b0f9549a9 EQCSS syntax
///
/// @param {String} $scope (&) - Optional scope. Defaults to current context
/// @param {List} $conditions (()) - 1+ of Maps of EQCSS conditions
/// @content rules to enclose in element query
@davej
davej / fetch-timeout.js
Last active July 1, 2022 23:35
Add a pseudo timeout/deadline to a request using the ES6 fetch api
Promise.race([
fetch('/foo'),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), 7000)
)
]);
@Restuta
Restuta / HOC.js
Last active May 26, 2024 20:01
React HOC (Higher Order Component) Example
/* HOC fundamentally is just a function that accepts a Component and returns a Component:
(component) => {return componentOnSteroids; } or just component => componentOnSteroids;
Let's assume we want to wrap our components in another component that is used for debugging purposes,
it just wraps them in a DIV with "debug class on it".
Below ComponentToDebug is a React component.
*/
//HOC using Class
//it's a function that accepts ComponentToDebug and implicitly returns a Class
let DebugComponent = ComponentToDebug => class extends Component {
@razwan
razwan / _baseline.scss
Created April 14, 2014 16:20
Aligning type to baseline the right way with SASS
$base-font-size: 16px;
$base-line-height: 1.5;
// this value may vary for each font
// unitless value relative to 1em
$cap-height: 0.68;
@mixin baseline($font-size, $scale: 2) {
@matthewpizza
matthewpizza / install-composer.sh
Created February 13, 2014 03:55
Install Composer on Webfaction
cd $HOME
ln -s `which php54` ~/bin/php
export PATH=$HOME/bin:$PATH
curl -sS https://getcomposer.org/installer | php54
echo -e "\n# Composer\nalias composer=\"php54 \$HOME/composer.phar\"" >> $HOME/.bash_profile
source $HOME/.bash_profile
@stephanschubert
stephanschubert / cross-browser-background-rgba.scss
Created April 18, 2011 05:44
SCSS mixin for cross-browser background-color: rgba(...). You'll need the Ruby extension for convenient color conversion rgba->hex (IE uses ARGB)
@mixin background-rgba($r,$g,$b,$a) {
// To mimic this in Internet Explorer, you can use the proprietary filter
// property to create a gradient with the same start and end color, along
// with an alpha transparency value.
@if experimental-support-for-microsoft {
$color: ie_hex($r,$g,$b,$a);
$value: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=##{$color},endColorstr=##{$color})");
background-color: transparent\9;
@adamstac
adamstac / TODO
Created February 11, 2011 18:50
A Rubyist’s guide to setting up a Mac OS X development environment using Homebrew, RVM, Git and Bundler
* Review this article and add new steps as needed: http://blog.therubymug.com/blog/2010/05/20/the-install-osx.html