Skip to content

Instantly share code, notes, and snippets.

View akramsaouri's full-sized avatar
🦄
Open for OSS contributions

Ak Ram akramsaouri

🦄
Open for OSS contributions
View GitHub Profile
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
@akramsaouri
akramsaouri / useStatus.js
Last active September 8, 2020 15:25
⚛️ No more isLoading or hasErrored
// @flow
import { useReducer } from 'react'
type AllowedStatus = 'idle' | 'processing' | 'error' | 'success'
const alllowedStatus = ['idle', 'processing', 'error', 'success']
type Status = {|
state: AllowedStatus,
@akramsaouri
akramsaouri / route-wrapper.jsx
Last active September 8, 2020 15:25
⚛️ Layout wrapping in react router
import React from 'react'
import { Route } from 'react-router-dom'
function RouteWrapper({ component: Component, layout: Layout, ...rest }) {
return (
<Route
{...rest}
render={(props) => (
<Layout {...props}>
<Component {...props} />
@akramsaouri
akramsaouri / react-lazy-img-io.ts
Last active January 31, 2023 23:24
⚛️ Lazy load images in React with IntersectionObserver.
import React, { useEffect, useRef, FunctionComponent, HTMLProps } from 'react';
import 'intersection-observer'; // if you want to include a polyfill
/**
* Returns an IntersectionObserver that loads the image
* when it is at least {threshold}*100 visible in the viewport.
*
* PS: Cached on the window for performance
*/
function getImageLoaderObserver(
@akramsaouri
akramsaouri / bundler.js
Created November 9, 2019 00:43
Smaller es6 bundler possible
const fs = require("fs");
const path = require("path");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const babel = require("@babel/core");
const resolve = require("resolve").sync;
let ID = -1;
function createModuleInfo(filePath) {
import React from 'react'
import { withAppContext } from '../../app/hocs/WithAppContext';
/**
* withCachedObj
* HOC for reading/writing in-memory Context to/from localStorage
* useful for handling refresh/navigation etc..
* @param {React.Node} Component
*/
export default function withCachedObj(Component) {
@akramsaouri
akramsaouri / Gockerfile
Last active December 30, 2018 15:07
Dockerfile for go projects
FROM golang:1.9 as builder
# Install dep tool
RUN curl -fsSL -o /usr/local/bin/dep https://github.com/golang/dep/releases/download/v0.4.1/dep-linux-amd64 && chmod +x /usr/local/bin/dep
WORKDIR /go/src/github.com/akramsaouri/gocker/
COPY Gopkg.toml Gopkg.lock ./
# Install dependencies without checking for go code
RUN dep ensure -vendor-only
COPY src ./src
# Build binary file
RUN CGO_ENABLED=0 GOOS=linux go build -installsuffix cgo -o app ./src
@akramsaouri
akramsaouri / lazy-evaluation.js
Last active October 15, 2018 14:01
Lazy evaluation in JavaScript
function Let(f) {
let called = false
let v = null
return function () {
if(called) return v
console.log('evaluating.')
v = f()
called = true
return v
}
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
// Choose either "stable" for receiving highly polished,
// or "canary" for less polished but more frequent updates
updateChannel: 'stable',
@akramsaouri
akramsaouri / file-server.go
Created January 13, 2018 13:15
Serve static files from your current directory.
package main
import (
"html/template"
"log"
"net/http"
"os"
"path/filepath"
)