Skip to content

Instantly share code, notes, and snippets.

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
/** Predictable Layout */
.mostly-everything {
box-sizing: border-box;
.maybe-everything {
position: relative;
/** Smooth Animations */
.enter {
View codepan.json
{"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: {[\"num\"]) },\n methods: {[\"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=\"\"></script>\n <script src=\"\"></script>\n</head>\n<body>\n <div id=\"app\"></div>\n</body>\n</html>","transformer":"html"},"show
View all-persona5-artwork.json
"Arsene": {
"artwork": "",
"size": 96708
"Obariyon": {
"artwork": "",
"size": 981623
"High Pixie": {
View zeus.css
variable {
/* @name "Variable"; */
color: #f8f8f2;
comment {
/* @name "Comment"; */
color: #444;
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src=""></script>
Rayraegah / font-config.css
Created Mar 24, 2017
Universal font settings
View font-config.css
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
text-rendering: optimizeLegibility;
Rayraegah /
Created Sep 24, 2015 — forked from paulirish/
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.


Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View hierarchical-classification.js
function graph(d3) {
//step 0, new graph() ,import "" to get d3
//step 1, custom the config
this.config = {
bg_size: {
width: 800,
height: 600
edge_def_width: 5,
Rayraegah / a.html
Last active Aug 29, 2015 — forked from mbostock/.block
View a.html
<!DOCTYPE html>
<div id="main">
<li><a href="b.html">Baobao</a></li>
<li><a href="c.html">Cuttlefish</a></li>
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 ( 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: