Let’s compare the different ways Space Kit’s is implemented vs Chakra’s .
Starting with the base case:
Let’s compare the different ways Space Kit’s is implemented vs Chakra’s .
Starting with the base case:
import { useCallback, useRef, useState } from "react"; | |
export const cancelledSymbol = Symbol("Cancelled"); | |
export function usePromptState< | |
PromptResults, | |
PromptFunction extends Function = () => void | |
>({ stableOnPrompt }: { stableOnPrompt?: PromptFunction } = {}) { | |
const [isOpen, setIsOpen] = useState<boolean>(false); |
const _ = require("lodash"); | |
const got = require("got"); | |
const getHourlyForecast = async () => { | |
const { body } = await got("https://api.climacell.co/v3/weather/forecast/hourly", { | |
method: "GET", | |
searchParams: { | |
lat: process.env.LAT, | |
lon: process.env.LON, | |
unit_system: "si", |
const netlifyHost = 'my-app.netlify.app'; | |
const shouldAllowCORS = (origin) => { | |
if (/http\:\/\/localhost:/.test(origin)) { | |
return true; | |
} | |
if (origin === (`https://${netlifyHost}`) || (new RegExp(`--${netlifyHost.replace(/\./g, '\.')}`)).test(origin)) { | |
return true; | |
} | |
return false; |
import React from 'react'; | |
// Create the hook that contains state as you normally would, don't worry about context | |
// Note that this is _not_ exported | |
const useSomeState = () => { | |
const [someState, setSomeState] = React.useState(); | |
return { | |
someState, | |
setSomeState, | |
}; |
const SomeComponent = ({ className }) =>
<div className={classnames('bg-red', className)} />
<SomeComponent className="bg-blue"/>
What background color will the component have? The div will end up with class="bg-red bg-blue"
, so precedence depends on whether the specifiers for .bg-red
was generated before or after specifiers for .bg-blue
in the css file
This is for people who is bothered by unclean git histories, but find interactive rebasing bothersome
Play around with this for ~3 minutes
https://codepen.io/guyroutledge/full/hgpez/
Take note of the css values on the bottom left
Skim this for ~5 minutes
https://css-tricks.com/the-css-box-model/
Don’t have to worry about understanding everything. Keep a mental index of what things exist and refer back here when you need it
Ditto with this, skim for ~5 minutes
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
(function(module) { | |
try { | |
module = angular.module('templates'); | |
} catch (e) { | |
module = angular.module('templates', []); | |
} | |
module.run(['$templateCache', function($templateCache) { | |
$templateCache.put('404/templates/404.html', | |
'<div class="container-fluid text-center not-found"><h1 data-translate="">Page Not Found</h1><p data-translate="">You have searched for something that doesn\'t exist!</p><a href="/">Go back to the home page.</a></div>'); | |
}]); |