- Install iTerm2 from https://www.iterm2.com/
- Install oh-my-zsh from https://ohmyz.sh/ or https://github.com/robbyrussell/oh-my-zsh
- Set iTerm2 theme tab theme to Dark -
Preferences | Appearance | Tabs | Theme > Dark - Install Fira Code fonts from https://github.com/tonsky/FiraCode (Clone and navigate to
dstr > ttf, install all font files by double clicking) - Install Powerline fonts from https://github.com/powerline/fonts
- Set fonts for iTerm2 -
Preferences | Profiles | Text- Change
Fontto14pt Fira code regularand CheckUse Ligaturescheckbox - Change
Non ASCII Fontto14pt Fira monoand CheckUse Ligaturescheckbox
- Change
- Install iTerm2 snazzy theme from https://github.com/sindresorhus/iterm2-snazzy
- Navigate to
Preferences | Profiles | Color Presets > Snazzy
- Navigate to
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const useStickyScroll = ( | |
| { | |
| elementRef, | |
| containerRef | |
| }: {elementRef: any; containerRef?: any; onScroll?: (y: number) => void}, | |
| dependencies: any[] = [] | |
| ) => { | |
| const [isSticky, setIsSticky] = useState(false); | |
| // Use useRef for the callback to avoid triggering re-renders | |
| const onCallbackRef = useRef<(y: number) => void>(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState, useLayoutEffect } from 'react'; | |
| import throttle from 'lodash.throttle'; | |
| function useResizeObserver(ref: React.MutableRefObject<any>) { | |
| const [dimensions, setDimensions] = useState({ | |
| width: 0, | |
| height: 0, | |
| dimensionsLoaded: false, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useRef, useEffect, useState } from 'react'; | |
| import Swiper from 'swiper'; | |
| import { SwiperOptions } from 'swiper/types'; | |
| import { Pagination, Navigation } from 'swiper/modules'; | |
| import { Box, BoxProps, MotionBox } from '@components'; | |
| import { Chevronleft, Chevronright } from '@/icons'; | |
| import { Variants } from 'framer-motion'; | |
| // now importing all thee manually with emotion | |
| // import 'swiper/css'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useEffect, useRef, useState, useCallback } from 'react'; | |
| import { throttle } from 'lodash'; | |
| /** | |
| * Returns a ref, and a stateful value bound to the ref as well as observe function | |
| * The observe runs automatically on window scroll but you can observe another elements scroll if you want | |
| */ | |
| export default function useSticky<T extends HTMLElement>(fn ?: (stickyActive?: boolean)=> void) { | |
| const stickyRef = useRef<T>(null); | |
| const [sticky, setSticky] = useState(false); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // must have a loading state that turns true when fetching data and false afterwards | |
| // callback is responsible for setting loading state as well as deciding if it should even run. (check if pages left etc...) | |
| // scrollingElement defaults to viewport if none used. If wanted put it as a ref on a scrollable element | |
| // sentry must be placed as a ref and is not optional | |
| import { useCallback, useEffect, useRef, useState } from 'react'; | |
| export default function useInfiniteScroller({ | |
| isLoading, | |
| callback, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-size: 62.5%; | |
| box-sizing: border-box; | |
| } | |
| * { | |
| box-sizing: inherit; | |
| } | |
| body { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .aspect-ratio { | |
| position: relative; | |
| // needs a set height, so override when using on a component | |
| &::before { | |
| content: ""; | |
| display: block; | |
| height: 0; | |
| width: 100%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if ( ! function_exists( 'set_tag_cloud_sizes' ) ) { | |
| /** | |
| * Removes the inline font sizing. | |
| * | |
| * @param string $tags holds markup of tags | |
| * | |
| * @return string | |
| */ | |
| function set_tag_cloud_sizes( string $tags ): string { | |
| return preg_replace( '/style="font-size: \d+pt;"/', '', $tags ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .entry-content, | |
| .article-footer, | |
| .after-article { | |
| padding-left: var(--spacing-20); | |
| padding-right: var(--spacing-20); | |
| &::after { | |
| clear: both; | |
| content: ""; | |
| } |
NewerOlder