Skip to content

Instantly share code, notes, and snippets.

View julianwachholz's full-sized avatar
🤓

Julian Wachholz julianwachholz

🤓
View GitHub Profile
@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 %}
])
)
@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 / 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 / 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 / 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 / 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,
const MyForm: React.FC<any> = observer(({match, store}) => {
const obj = store.get(match.params.id);
if (obj === null) {
return <MyLoadingForm />;
}
// Invariant violation: Rendered more hooks than during the previous render.
const [data, setData] = useState(obj.data);
return <MyLoadedForm data={data} onSubmit={setData} />
});
@julianwachholz
julianwachholz / base.ts
Last active July 30, 2019 14:51
typescript constructor properties
export abstract class BaseStore<T> {
@observable
objects: T[] = [];
constructor(private dao: BaseDAO<T>) {}
}
@julianwachholz
julianwachholz / form.html.eex
Created July 13, 2018 06:37
Phoenix & Ecto Many-to-Many m2m Relation
<%= form_for @changeset, @action, [multipart: true], fn f -> %>
<!-- ... other fields ... -->
<!-- `selected` accepts only a list of IDs -->
<div class="form-group">
<%= label f, :categories, class: "control-label" %>
<%= multiple_select f, :categories, @categories, selected: Enum.map(@changeset.data.categories, &(&1.id)), class: "form-control" %>
</div>

Keybase proof

I hereby claim:

  • I am julianwachholz on github.
  • I am juio (https://keybase.io/juio) on keybase.
  • I have a public key ASAKlzM8becIo_ddeoySGXGSqjylxrL8hzSeC4emuFU_Vgo

To claim this, I am signing this object: