Skip to content

Instantly share code, notes, and snippets.

View julianwachholz's full-sized avatar
🤓

Julian Wachholz julianwachholz

🤓
View GitHub Profile
@julianwachholz
julianwachholz / DatePicker.tsx
Created January 3, 2020 12:22
Ant Design <DatePicker /> with native Date and date-fns
import generatePicker from "antd/lib/date-picker/generatePicker";
import {
addDays,
addMonths,
addYears,
format,
getWeek,
isAfter,
isValid,
parse,
@julianwachholz
julianwachholz / Dockerfile
Created February 14, 2020 12:00
Dockerfile multi stage build for React single page apps
FROM node:13 AS build
WORKDIR /app
COPY package.json package-lock.json /app/
RUN npm install
FROM build as dev
COPY . /app
CMD BROWSER=none npm start
FROM build as prod
@julianwachholz
julianwachholz / Dockerfile
Created July 3, 2020 13:07
CapRover Simple React SPA Example
FROM node:12-alpine AS build
WORKDIR /app
RUN apk --no-cache add git
ARG REACT_APP_SENTRY_DSN
COPY web/package.json web/package-lock.json /app/web/
RUN cd /app/web && npm install
@julianwachholz
julianwachholz / Element.jsx
Created October 20, 2021 16:12
Simple resizable element in React (with Tailwind classes)
import React, { useCallback, useRef, useState } from "react";
function clampHeight(height) {
const minHeight = 200;
const maxHeight = document.body.clientHeight - 300;
return Math.min(Math.max(height, minHeight), maxHeight);
}
export default function Element() {
const [height, setHeight] = useState(null);
@julianwachholz
julianwachholz / LatencyIcon.js
Created October 26, 2021 22:08
SVG latency icon using tailwind utilities
const LatencyIcon = ({ latency }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
className="inline-block h-5 w-5 text-gray-800"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
className={
@julianwachholz
julianwachholz / sw.js
Created January 12, 2022 15:37
Django ServiceWorker view
// service worker
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open("{{ cache_key }}").then((cache) =>
cache.addAll([
// {% for asset in assets %}
"{{ asset }}",
// {% endfor %}
])
)