Skip to content

Instantly share code, notes, and snippets.

View Rayraegah's full-sized avatar
☄️
Curiosity is about annihilating itself; it doesn't seek a response.

Severan Rayraegah

☄️
Curiosity is about annihilating itself; it doesn't seek a response.
View GitHub Profile
@Rayraegah
Rayraegah / basic.cc
Created March 25, 2018 23:32
CSS bootstrap
/** Predictable Layout */
.mostly-everything {
box-sizing: border-box;
}
.maybe-everything {
position: relative;
}
/** Smooth Animations */
.enter {
{"js":{"code":"const store = new Vuex.Store({\n state: {\n num: 0\n },\n \n mutations: {\n plus: (state) => {\n state.num += 1\n },\n \n minus: (state) => {\n state.num -= 1\n }\n }\n});\n\nconst app = new Vue({\n name: \"App\",\n \n template: `\n <div>\n <p>{{num}}</p>\n <button @click=\"plus\">+</button>\n <button @click=\"minus\">-</button>\n </div>\n `,\n \n computed: { ...store.mapState([\"num\"]) },\n methods: { ...store.mapMutations([\"plus\", \"minus\"]) }\n});\n\napp.$mount(\"#app\");\n","transformer":"js"},"css":{"code":"","transformer":"css"},"html":{"code":"<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <title>Vuex-lite - demo</title>\n <script src=\"https://unpkg.com/vue@2.5.13/dist/vue.js\"></script>\n <script src=\"https://unpkg.com/vuex-lite@0.1.2/dist/vuex-lite.min.js\"></script>\n</head>\n<body>\n <div id=\"app\"></div>\n</body>\n</html>","transformer":"html"},"show
{
"Arsene": {
"artwork": "i.imgur.com/f1tGm7j.jpg",
"size": 96708
},
"Obariyon": {
"artwork": "i.imgur.com/RTvSFdO.png",
"size": 981623
},
"High Pixie": {
@Rayraegah
Rayraegah / zeus.css
Last active May 26, 2017 08:53
Nightlife
variable {
/* @name "Variable"; */
color: #f8f8f2;
}
comment {
/* @name "Comment"; */
color: #444;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
</head>
@Rayraegah
Rayraegah / font-config.css
Created March 24, 2017 14:35
Universal font settings
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
text-rendering: optimizeLegibility;
}
@Rayraegah
Rayraegah / what-forces-layout.md
Created September 24, 2015 06:49 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@Rayraegah
Rayraegah / hierarchical-classification.js
Created August 21, 2015 13:53
hierarchical-classification
function graph(d3) {
//step 0, new graph() ,import "http://d3js.org/d3.v3.min.js" to get d3
//step 1, custom the config
this.config = {
bg_size: {
width: 800,
height: 600
},
edge_def_width: 5,
@Rayraegah
Rayraegah / a.html
Last active August 29, 2015 14:27 — forked from mbostock/.block
D3 PJAX
<!DOCTYPE html>
<html>
<body>
<div id="main">
<ul>
<li><b>Anteater</b></li>
<li><a href="b.html">Baobao</a></li>
<li><a href="c.html">Cuttlefish</a></li>
</ul>
Anteaters, also known as antbear, are the four mammal species of the suborder Vermilingua (meaning "worm tongue") commonly known for eating ants and termites. Together with the sloths, they compose the order Pilosa. The name "anteater" is also colloquially applied to the unrelated aardvark, numbat, echidna, and pangolin.

Keybase proof

I hereby claim:

  • I am rayraegah on github.
  • I am rayraegah (https://keybase.io/rayraegah) on keybase.
  • I have a public key whose fingerprint is 4023 469C 167F BE02 AAF0 7018 42F5 B157 BB45 09F9

To claim this, I am signing this object: