Skip to content

Instantly share code, notes, and snippets.

View codepunkt's full-sized avatar

Christoph Werner codepunkt

View GitHub Profile
@orta
orta / eleventy-twoslash.ts
Created August 23, 2020 10:39
Eleventy Twoslash Markdown It plugin
import MarkdownIt from "markdown-it";
import { createShikiHighlighter, renderCodeToHTML, runTwoSlash, canHighlightLang } from "shiki-twoslash";
import { HighlighterOptions, Highlighter } from "shiki/dist/highlighter";
export default function markdownItShikiTwoslash(markdownit: MarkdownIt, userOptions: HighlighterOptions): void {
let highlighter:Highlighter = null!
// @ts-ignore - fixed in next release to always be a promise
createShikiHighlighter(userOptions).then(h => highlighter = h)
const oldFence = markdownit.renderer.rules.fence;

Partial Hydration

If you do server side rendering (SSR) you don't necessarily need to hydrate your entire page if most of your content ist static and only some parts are interactive / dynamic. That is especially true for a newspaper website, which ich what we are working on.

What you want is partial hydration, sometimes called or related to progressive hydration or lazy hydration.

There are a few implementations out there to achive this, for instance second-dehydrator

@tkrotoff
tkrotoff / FrontendFrameworksPopularity.md
Last active April 24, 2024 16:27
Front-end frameworks popularity (React, Vue, Angular and Svelte)
@robertgonzales
robertgonzales / Frame.js
Created December 12, 2017 03:03
Use React portals to render inside shadow dom and iframes
class Frame extends Component {
componentDidMount() {
this.iframeHead = this.node.contentDocument.head
this.iframeRoot = this.node.contentDocument.body
this.forceUpdate()
}
render() {
const { children, head, ...rest } = this.props
return (
@Noviny
Noviny / babelTypeDescriptions.md
Last active August 12, 2022 09:46
A list of all babels types with an explanation, and a link to astexplorer with an example

The goal is to have a link to ASTexplorer to demonstrate what each type is. Types have been broken into sections if they are not core parts of javascript (JSX, type annotations, typescript types), however are otherwise in alphabetical order.

WIP - un-added types have a leading ^^^^ while I am working on them.

Important Base Parts

Knowing these will help everywhere

  • identifier A named property, such as a declared variable or object property.
  • blockStatement Anything to be run as part of resolving an expression. (Effectively anything that would go between {} brackets, whether that is in a for statement, or function expression. It will be found as the body property of the expression.
@StevenACoffman
StevenACoffman / Docker Best Practices.md
Last active February 9, 2024 12:54
Docker Best Practices

Mistakes to Avoid: Docker Antipatterns

Whichever route you take to implementing containers, you’ll want to steer clear of common pitfalls that can undermine the efficiency of your Docker stack.

Don’t run too many processes inside a single container

The beauty of containers—and an advantage of containers over virtual machines—is that it is easy to make multiple containers interact with one another in order to compose a complete application. There is no need to run a full application inside a single container. Instead, break your application down as much as possible into discrete services, and distribute services across multiple containers. This maximizes flexibility and reliability.

Don’t install operating systems inside Docker containers

It is possible to install a complete Linux operating system inside a container. In most cases, however, this is not necessary. If your goal is to host just a single application or part of an application in the container, you need to install only the essential

@chrisui
chrisui / 1. testComponent.js
Created March 31, 2017 18:45
Component test utility
export const testComponent = (
Component: RC,
defaultProps?
: () => Object
= () => ({}),
) => {
return (otherProps: Object, hoc?: (RC) => RC) => {
// our final props for the component merged from default
// and per-test
@sebastiandeutsch
sebastiandeutsch / Compositional.js
Created January 7, 2017 22:59
Compositional Components to fetch data
<SyncStore loader={TeamLoader} loadingComponent={Loading}>
<TeamReaderApp>
<Match exactly pattern="/" component={LinksIndex} />
<Match pattern='/links' component={LinksIndex} />
<Match pattern='/link/new' component={LinkNew} />
<Match pattern='/link/:id/edit' component={LinkEdit} />
<Match pattern='/categories' component={CategoriesIndex} />
<Match pattern='/category/new' component={CategoryNew} />
<Match pattern='/category/:id/edit' component={CategoryEdit} />
@icebob
icebob / merge.js
Created July 29, 2016 08:19
Merge GraphQL schemas & resolvers in modules
let moduleQueries = [];
let moduleTypeDefinitions = [];
let moduleMutations = [];
let moduleResolvers = [];
let files = config.getGlobbedFiles(path.join(__dirname, "**", "*schema.js"));
// Load schema files
files.forEach((file) => {
let moduleSchema = require(path.resolve(file));
@daleobrien
daleobrien / install_git.sh
Created June 14, 2016 23:14
install git 2.9 on OSX
cd ~/Downloads
wget https://www.openssl.org/source/openssl-1.0.2h.tar.gz
tar -xvf openssl-1.0.2h.tar.gz
cd openssl-1.0.2h
./Configure darwin64-x86_64-cc
make depend -j4
sudo make install
cd ~/Downloads