Skip to content

Instantly share code, notes, and snippets.

Avatar
🐐
🐐 🐙 :octocat:

Dominik Guzy Siemko

🐐
🐐 🐙 :octocat:
View GitHub Profile
@Siemko
Siemko / docker-compose.yml
Created Jul 7, 2020
Development docker compose environment
View docker-compose.yml
version: "3.8"
services:
webapp:
image: node:lts-alpine # always using the same image - no building, less space taken
working_dir: /usr/app/webapp
volumes:
- "./webapp/package.json:/usr/app/webapp/package.json"
- "./webapp/yarn.lock:/usr/app/webapp/yarn.lock"
- "./webapp/tsconfig.json:/usr/app/webapp/tsconfig.json"
View snip.code-snippets
{
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": ["console.log('$1');"],
"description": "Log output to console"
}
}
View useImmerState.js
import { useState, useCallback } from 'react'
import produce from 'immer'
const useImmerState = initialState => {
const [state, setState] = useState(initialState)
const setImmerState = useCallback(setter => setState(produce(setter)), [])
return [state, setImmerState]
}
View window-size-with-own-hook.js
import React from "react";
import useWindowSize from "./useWindowSize";
const WindowSize = () => {
const { width, height } = useWindowSize();
return (
<>
<h2>Window size: {width} x {height}</h2>
</>
);
View useWindowSize.js
import { useState, useEffect } from "react";
export default function useWindowSize() {
const [{width, height}, setSize] = useState({ window.innerWidth, window.innerHeight });
useEffect(() => {
const handleResize = () => setSize({ window.innerWidth, window.innerHeight });
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
View hooks.js
import React, { useState, useEffect } from "react";
const WindowSize = () => {
const [{width, height}, setSize] = useState({ window.innerWidth, window.innerHeight });
useEffect(() => {
const handleResize = () => setSize({ window.innerWidth, window.innerHeight });
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
View class-component.js
import React, { Component } from "react";
class WindowSize extends Component {
state = {
width: window.innerWidth,
height: window.innerHeight
};
handleResize = () => this.setState({
width: window.innerWidth,
@Siemko
Siemko / api.js
Last active Jun 23, 2019
[async fetch api request] #js #javascript #http
View api.js
export const request = async (url, method = 'GET', type = 'json', body = null) => {
const requestOptions = {
method: method,
headers: { 'Content-Type': 'application/json' },
};
if (body) {
requestOptions.body = JSON.stringify(body);
}
if (type === 'json') {
return await (await fetch(url, requestOptions)).json();
@Siemko
Siemko / Counter.vue
Created Feb 3, 2018
Counter component in Vue.js
View Counter.vue
<template>
<section class="section">
<div class="container">
<h2 class="title">{{title}}</h2>
<div class="level">
<div class="level-item">
<button class="button" @click="incrementCounter">
<span class="icon">
<i class="fa fa-plus"></i>
@Siemko
Siemko / FormSample.js
Created Jan 28, 2018
FormSample React.js component
View FormSample.js
import React, { Component } from "react";
export default class FormSample extends Component {
state = {
employer: "Gorrion"
};
handleEmployerChange = e => {
this.setState({ employer: e.target.value });
};