Skip to content

Instantly share code, notes, and snippets.

View olpeh's full-sized avatar
🌳
Branch Manager at Iltametsuri

Olavi Haapala olpeh

🌳
Branch Manager at Iltametsuri
View GitHub Profile
@olpeh
olpeh / _app.tsx
Last active May 10, 2021 06:51
Loading indicator between pages during navigation in Next.js – one option
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import type { AppProps } from "next/app";
const App = ({ Component, pageProps }: AppProps) => {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const handleRouteChangeStart = () => {
@olpeh
olpeh / RemoteData.ts
Created June 10, 2019 06:12
RemoteData in TypeScript
import { Status } from './Status';
export const NotAsked: NotAsked = {
status: Status.NotAsked
};
export interface NotAsked {
status: Status.NotAsked;
}
@olpeh
olpeh / experience.md
Created March 14, 2019 19:17
My experience as a presenter

My experience as a presenter

I have never presented at a conference before. However, I have quite a lot of experience in presenting at local meetups in Helsinki as well as at Tech Weeklies (https://techweeklies.futurice.com). This is why I think I’m ready to step up and present at a conference.

My presentations at Meetups:

  • Koodiklinikka meetup (2018-10-30) – Why you should be creating shitty useless side projects
  • HelsinkiJS (2019-02-21) – Lessons learned while creating onkometrorikki.fi

My presentations at Tech Weeklies:

  • Cycle.js basics – My experiences trying to learn it (2017-10-13)
  • Building LEGOs with React + MobX (a real client project :)) (2018-01-12)
@olpeh
olpeh / package.json
Created November 5, 2018 12:12
React lazy + Suspense
{
"name": "<NAME>",
"version": "1.0.0",
"private": true,
"description": "<DESCRIPTION>",
"main": "index.tsx",
"scripts": {
"start": "webpack-dev-server --mode development --hot --progress --colors --port 3000",
"build": "webpack -p --progress --colors",
"lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
@olpeh
olpeh / service-worker-registration.js
Created October 24, 2018 06:59
Service Worker Sample Code (NOT A FULLY WORKING EXAMPLE, USE AT YOUR OWN RISK)
(function() {
'use strict';
// Make this a kill switch by reading this from config
window.ServiceWorkerEnabled = true;
if ('serviceWorker' in navigator) {
if (window.ServiceWorkerEnabled) {
// Delay registration until after the page has loaded, to ensure that our
// precaching requests don't degrade the first visit experience.
@olpeh
olpeh / email.elm
Created November 3, 2017 17:19
names -> emails (Elm)
module Main exposing (..)
import Regex
import String.Extra exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
main =
@olpeh
olpeh / main.js
Created October 10, 2017 19:06
Cycle.js state management example
import xs from "xstream";
import { run } from "@cycle/run";
import {
makeDOMDriver,
h1,
h4,
div,
select,
option,
span,
@olpeh
olpeh / SCSS.md
Created September 4, 2017 12:09 — forked from jareware/SCSS.md
Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

@olpeh
olpeh / tools.md
Last active February 7, 2018 12:49
Useful tools and packages

Keybase proof

I hereby claim:

  • I am olpeh on github.
  • I am olpe (https://keybase.io/olpe) on keybase.
  • I have a public key whose fingerprint is 4F55 6A9B A1A0 8DE0 0088 77C6 6B6E DDAD 14ED 2226

To claim this, I am signing this object: