Skip to content

Instantly share code, notes, and snippets.

View zeakd's full-sized avatar

Deokseong Kim zeakd

29 followers · 3 following
  • Imweb
  • Seoul, South Korea
View GitHub Profile
@zeakd
zeakd / Pure CSS centered hover dropdown menu.markdown
Created July 30, 2015 08:22
Pure CSS centered hover dropdown menu
@zeakd
zeakd / React-universal-structure.md
Last active April 29, 2016 00:24
react universal structure with ignore pattern - render for client only components

react universal application - Ignore pattern

In React universal application, there is problem when render client-side only components like Devtools, fetching components and webpack style require (require css) Two solution for this.

dynamic module import isomorphic500

check js is running on browser

server side build

use webpack also on serverside, or if you are using requirejs, you can map client modules to null

But serverside build look like overkill to me, I choose dynamic module import. However in es6, import doesn't support dynamic import. So you should use commonjs require for it.

@zeakd
zeakd / react1.html
Last active September 25, 2016 09:20
very simple react page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React 1</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
</head>
<body>
<div id="root"></div>
@zeakd
zeakd / react1-like.html
Created September 25, 2016 09:17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>like react1</title>
</head>
<body>
<div id="root"></div>
<script>
function render(elem, root) {
@zeakd
zeakd / react2.html
Last active September 26, 2016 09:50
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React 2</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
</head>
<body>
<div id="root"></div>
@zeakd
zeakd / react2-jsx.html
Last active September 26, 2016 09:17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React 1</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js'></script>
</head>
<body>
@zeakd
zeakd / problem1.js
Created September 10, 2018 05:36
https://m.edwith.org/boostcourse-web/lecture/16746 문제의 functional한 답.
const widget = {
debug: "on",
window: {
title: "Sample Konfabulator Widget",
name: "main_window",
width: 500,
height: 500
},
image: {
src: "Images/Sun.png",
@zeakd
zeakd / function-and-arrow-function.js
Last active October 21, 2018 18:09
Examples to explain the shape of arrow function
// function
const kim = {
name: 'Kim',
hello: function() {
console.log(`hi, ${this.name}`)
}
}
// arrow function
const lee = {
@zeakd
zeakd / double-thin-arrow-function.js
Created October 21, 2018 18:10
Example to explain the shape of arrow funciton
--> what is this?
--> console.log('hi')
console.log('hello')
<!-- and, what is this?
<!-- console.log('hi')
@zeakd
zeakd / you-should-write-like-this.html
Last active October 21, 2018 18:24
long long ago.. script in html
<script src='javascript'>
<!--
console.log('Hello, script')
-->
</script>