Skip to content

Instantly share code, notes, and snippets.

View sujinleeme's full-sized avatar
🏃‍♀️
�CPH marathon

Sujin Lee sujinleeme

🏃‍♀️
�CPH marathon
View GitHub Profile

To embed the contents of an SVG file into your site using NextJS 12 with the new Rust-based compiler, perform the following steps:

  1. Install @svg/webpack:
$ npm install --save-dev @svgr/webpack
  1. Create a svgr.config.js config file with the following contents. This will remove the width and height from the SVG but keep the viewBox for correct scaling.
@mjackson
mjackson / redirects-in-react-router-v6.md
Last active November 12, 2023 07:32
Notes on handling redirects in React Router v6, including a detailed explanation of how this improves on what we used to do in v4/5

Redirects in React Router v6

An important part of "routing" is handling redirects. Redirects usually happen when you want to preserve an old link and send all the traffic bound for that destination to some new URL so you don't end up with broken links.

The way we recommend handling redirects has changed in React Router v6. This document explains why.

Background

In React Router v4/5 (they have the same API, you can read about why we had to bump the major version here) we had a <Redirect> component that you could use to tell the router when to automatically redirect to another URL. You might have used it like this:

Jest and the --changedSince flag in GitHub Actions

Recently, I've been working a lot more with GitHub Actions - both writing actions and creating CI pipelines for projects.

Last week I picked up a project I started a bit ago: the nodejs/examples repository.

Note: The examples repository is still in early stages. As such, there's still a bunch of WIP work we're doing - we've intentionally not talked a bunch publicly about it yet. That said, if you're interested in helping, feel free to reach out to me on Twitter or the OpenJS Slack ❤️

The goal of this repository is to be home to a bunch of distinct and well-tested examples of real-world Node.js that go beyond "hello, world!". This means there's hopefully going to be a boatload of distinct projects in there.

@maapteh
maapteh / use-viewport.tsx
Last active March 23, 2024 03:40
useViewport hook for React
// MODULE
import React, {
FC,
ReactNode,
useState,
useEffect,
createContext,
useContext,
useCallback,
} from 'react';
@kuhelbeher
kuhelbeher / readme.md
Last active December 6, 2022 16:20
Eslint airbnb config + prettier for create-react-app project

This is tutorial of onfiguring eslint, prettier for your project

Make your code great again

  1. Eslint

First of all we need to install eslint and configs as dev dependencies. You can use your own config, but I will use config from airbnb:

yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
import rootReducer from '../my-rootreducer-dir';

function renderWithRedux(ui, { initialState, store = createStore(rootReducer, initialState) } = {}, renderFn = render) {
  const obj = {
    ...renderFn(<Provider store={store}>{ui}</Provider>),
    store,
  };
  obj.rerenderWithRedux = (el, nextState) => {
@ndabAP
ndabAP / App.vue
Last active November 22, 2021 00:42
Vue.js pluralize filter
<template>
<div>
<p>I got {{ amount }} {{ 'cookie' | pluralize(amount) }}</p>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
export default {
data: () => ({
@jackawatts
jackawatts / ts-jest.md
Last active June 14, 2023 08:09
Getting started with Typescript, React and Jest

Getting Started

  1. Install:
  • jest: npm install --save-dev jest
  • ts-jest: npm install --save-dev ts-jest @types/jest
  1. Modify package.json
"jest": {
  "transform": {
 "^.+\\.tsx?$": "ts-jest"
@jswny
jswny / Flexible Dockerized Phoenix Deployments.md
Last active July 3, 2023 05:25
A guide to building and running zero-dependency Phoenix (Elixir) deployments with Docker. Works with Phoenix 1.2 and 1.3.

Prelude

I. Preface and Motivation

This guide was written because I don't particularly enjoy deploying Phoenix (or Elixir for that matter) applications. It's not easy. Primarily, I don't have a lot of money to spend on a nice, fancy VPS so compiling my Phoenix apps on my VPS often isn't an option. For that, we have Distillery releases. However, that requires me to either have a separate server for staging to use as a build server, or to keep a particular version of Erlang installed on my VPS, neither of which sound like great options to me and they all have the possibilities of version mismatches with ERTS. In addition to all this, theres a whole lot of configuration which needs to be done to setup a Phoenix app for deployment, and it's hard to remember.

For that reason, I wanted to use Docker so that all of my deployments would be automated and reproducable. In addition, Docker would allow me to have reproducable builds for my releases. I could build my releases on any machine that I wanted in a contai

@giuseppebonaccorso
giuseppebonaccorso / svd_recommender_tensorflow.py
Last active February 12, 2023 11:07
SVD Recommendations using Tensorflow
import numpy as np
import tensorflow as tf
# Set random seed for reproducibility
np.random.seed(1000)
nb_users = 5000
nb_products = 2000
nb_factors = 500
max_rating = 5