Skip to content

Instantly share code, notes, and snippets.

View ahmedelgabri's full-sized avatar
🤔
...

Ahmed El Gabri ahmedelgabri

🤔
...
View GitHub Profile
@jaredpalmer
jaredpalmer / MarkdownPage.tsx
Created February 17, 2021 13:52
Get headers from MDX in Next.js
import {MDXProvider} from '@mdx-js/react';
import {MDXComponents} from 'components/MDX/MDXComponents';
import {Toc} from 'components/Toc/Toc';
import * as React from 'react';
export interface MarkdownProps<Frontmatter> {
meta: Frontmatter;
children?: React.ReactNode;
}
@WebReflection
WebReflection / heydonworks.md
Last active December 1, 2020 14:14
A privileged answer to a well known issue.

This site throws in users and, most importantly, developers face, the fact publishing websites with hundreds of JS Kilobytes just to see some content, content that might also break due JS itself or browsers that haven't been tested or targeted, is very bad.

The same site is also great to remind everyone that a11y (accessibility) matters, and if you got upset by its disruptive technique, and you are a Web developer, now you know how it feels for people incapable of surfing the "modern Web" with its overly-bloated frameworks and practices that way too often don't take a11y into account.

However, JS is not to blame here, while developers abusing JS without following graceful enhancement practices, or without testing their sites offer some meaningful content even for users that might have disabled JS for whatever reason, are to blame so ... please "don't be that kind of developer".

That being said, as an exercise to see if I could surf it via JS, I've created this ti

@kristijanhusak
kristijanhusak / 1. Toggle-kitty-and-neovim-colors.md
Last active March 6, 2024 18:15
Toggle between light and dark colorschemes for both neovim and kitty

Requirements:

  • Neovim v0.4+
  • Python 3.4+ and pynvim
  • Kitty
  • Zsh, but would probably work with any shell if configured properly
  • Your favorite dark and light colorschemes

Installation

  1. Add below python script to ~/.config/kitty/ folder. Make sure to make it executable (chmod +x ~/.config/kitty/colors)
  2. Set up your dark/light colorscheme, and where to store kitty colors configuration (line 4 to 9)

Strict Environment

Problem Statement

Strict Environment is intended to address three distinct problems that are frequently encountered by TypeScript developers.

This is an alternative approach to solving the problems that placeholder types were intended to address.

Problem 1: Augmentation Pollution

@aleclarson
aleclarson / rollup-typescript.md
Last active May 6, 2024 19:37
The best Rollup config for TypeScript libraries

Features

🔥 Blazing fast builds
😇 CommonJS bundle
🌲 .mjs bundle
.d.ts bundle + type-checking
🧐 Source maps

Install

Essential Apps

  • Blink: Install Blink on your iPad
  • Tailscale: Install Tailscale on all your devices.
  • mosh: Install mosh on all your devices. It comes with Blink by default.

Nice to have apps

Amphetamine for Mac

@techtheriac
techtheriac / lambdajs.md
Last active December 28, 2020 20:19
A subtle introduction to Lambda Calculus for the JavaScript Developer

Lambda (λ) Calculus For Javascript Developers

This article aims at explaining lambda calculus in a more approachable less 'mathy' manner.

Terms That Are Good To Know

  • Memoization: Memoization is an optimization technique used primarily to speed up computer programs by caching the result of expensive function calls and returning the cached result when fed with the same input.

  • Pure Function: A pure function is a function whose computation does not depend on globally declared variables, it does no I/O or mutations. All it does is return a value after doing a bunch of computations on the arguments it recieves. For a given set of arguments, a pure function will always return the same value. Thus, a pure function is one that is memoizable.

@developit
developit / *tiny-array-flat-polyfill.md
Last active April 11, 2020 23:59
140b polyfill for Array.prototype.flat() and Array.prototype.flatMap(). https://npm.im/tiny-array-flat-polyfill

140b polyfill for [].flat() & [].flatMap()

Install: npm i tiny-array-flat-polyfill

Usage:

import 'tiny-array-flat-polyfill';

const ARR = [1, [2, [3]], [[[4]]], 5]
@busypeoples
busypeoples / RemoteData.tsx
Created March 6, 2020 13:43
RemoteData implementation using React, hooks and TypeScript
import React, { useState } from "react";
type NotAsked = {
_type: "NOT_ASKED";
};
type Loading = {
_type: "LOADING";
};