Skip to content

Instantly share code, notes, and snippets.

View jaysoo's full-sized avatar

Jack Hsu jaysoo

View GitHub Profile
@jaysoo
jaysoo / webpack.config.js
Last active November 6, 2023 03:31
Minimum webpack config for development
// 1. npm init
// 2. npm install --save webpack webpack-dev-server babel-loader babel-preset-es2015
// 3. mkdir dist && touch index.html
// 4. Include `<script src="/bundle.js"></script>` inside index.html
// 5. mkdir src && touch src/index.js
// 6. Add some code to index.js (e.g. `console.log('Hello, World!'))
// 7. npm start
// 8. Browse to http://localhost:8080/dist/
const webpack = require('webpack')
@jaysoo
jaysoo / hiding-components-in-react-native.js
Last active June 8, 2023 14:54
How to hide a component in react-native
/*
* UPDATE: Looked at the blame, turns out the negative bottom is actually for ensuring layout doesn't change during transitions.
* Still don't know how that works completely, but it has nothing to do with hiding (top: window.height pushes view out of viewport).
*
* I was just looking at Navigator implementation and noticed this line:
* https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js#L110-L113
*
*/
import React, {
Component,
#!/bin/bash
# This script is used in Vercel to determine whether to continue the build or not for nx-dev.
# Exits with 0 if the build should be skipped, and exits with 1 to continue.
# Configure these values to match the GitHub repo.
OWNER=jaysoo
REPO=acme
# Only arg is the app name as configured in Nx's workspace.json file.
@jaysoo
jaysoo / react-with-routing.js
Last active May 26, 2021 19:07
React structure with routing
/*
* This file contains JS modules for a React app using react-router and redux.
* Each module should be in its own separate file, but for the purposes of
* this gist, I've inlined them all.
*/
/* app/index.js */
import React from 'react'
import { Router, browserHistory } from 'react-router'
@jaysoo
jaysoo / about.tsx
Last active December 30, 2020 03:44
import React from 'react';
import './about.css';
import Title from '../components/title';
/* eslint-disable-next-line */
export interface AboutProps {}
export const About = (props: AboutProps) => {
return (
@jaysoo
jaysoo / title.tsx
Last active December 30, 2020 03:44
import React from 'react';
import './title.css';
/* eslint-disable-next-line */
export interface TitleProps {}
export const Title = (props: TitleProps) => {
return (
<div>
import React from 'react';
import { SharedUi } from '@my-org/shared-ui';
export const Index = () => {
return (
<div className="app">
<header className="flex">
<Logo width="75" height="75" />
<h1>Welcome to myblog!</h1>
</header>
import React from 'react';
import './shared-ui.css';
/* eslint-disable-next-line */
export interface SharedUiProps {}
export const SharedUi = (props: SharedUiProps) => {
return (
<div>
import React from 'react';
import { MyLib } from '@my-app/my-lib';
export const Index = () => {
return (
<div className="app">
<header className="flex">
<Logo width="75" height="75" />
<h1>Welcome to myblog!</h1>
<MyLib/>
</header>
import React from 'react';
import './my-lib.css';
/* eslint-disable-next-line */
export interface MyLibProps {}
export const MyLib = (props: MyLibProps) => {
return (
<div>
<h1>Welcome to my-lib!</h1>
</div>
);