<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Oka/pen/LVjJBJ?depth=everything&order=popularity&page=11&q=native&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
padding: 20px;
background-color: #F1DA68;
font-family: 'Open Sans';
}
a {
text-decoration: none;
color: #AE0F0E;
}
a:hover {
color: #d41211;
}
p {
margin: 4px 0;
}
pre {
margin: 12px 0 24px;
padding: 8px;
background-color: #f0f0f0;
}
code {
font-size: 0.9em;
overflow: hidden !important;
}
code::before {
display: none !important;
}
.lf {
visibility: hidden;
}
.container {
margin: 20px auto;
padding: 25px 15px 40px;
position: relative;
top: 20px;
box-sizing: border-box;
width: 400px;
opacity: 0;
background-color: #fafafa;
border-radius: 4px;
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.15);
-webkit-animation: 1s phase;
-moz-animation: 1s phase;
animation: 1s phase;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.container::before, .container::after {
width: 10px;
height: 10px;
background-color: #F1DA68;
border-radius: 50%;
box-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
content: '';
}
.container::before {
position: absolute;
top: 5px;
left: 5px;
}
.container::after {
position: absolute;
top: 5px;
right: 5px;
}
.container:nth-child(1) {
padding-bottom: 10px;
}
.container:nth-child(2) {
-webkit-animation-delay: 200ms;
-moz-animation-delay: 200ms;
animation-delay: 200ms;
}
.container:nth-child(3) {
-webkit-animation-delay: 300ms;
-moz-animation-delay: 300ms;
animation-delay: 300ms;
}
.container:nth-child(4) {
-webkit-animation-delay: 400ms;
-moz-animation-delay: 400ms;
animation-delay: 400ms;
}
.container:nth-child(5) {
-webkit-animation-delay: 500ms;
-moz-animation-delay: 500ms;
animation-delay: 500ms;
}
.container:nth-child(6) {
-webkit-animation-delay: 600ms;
-moz-animation-delay: 600ms;
animation-delay: 600ms;
}
.container:nth-child(7) {
-webkit-animation-delay: 700ms;
-moz-animation-delay: 700ms;
animation-delay: 700ms;
}
.container:nth-child(8) {
-webkit-animation-delay: 800ms;
-moz-animation-delay: 800ms;
animation-delay: 800ms;
}
h1, h2, h3 {
margin: 0 0 4px 0;
}
.sub {
color: #AE0F0E;
}
.twitter,
.version {
font-size: 0.8em;
text-align: right;
}
.twitter a,
.version a {
opacity: 0.8;
}
.twitter a:hover,
.version a:hover {
opacity: 1;
}
.run {
padding: 4px;
position: absolute;
right: 8px;
bottom: 8px;
width: 40px;
height: 20px;
background-color: #AE0F0E;
border-radius: 4px;
line-height: 20px;
text-align: center;
color: #fff;
cursor: pointer;
}
.run:hover {
background-color: #c61110;
}
.run:active {
background-color: #960d0c;
box-shadow: inset 0 0 4px 5px rgba(0, 0, 0, 0.2);
}
.run::before {
content: "Run";
}
.final {
text-align: center;
}
@-webkit-keyframes phase {
33% {
-webkit-transform: rotate(4deg);
}
66% {
-webkit-transform: rotate(-4deg);
}
100% {
top: 0;
opacity: 1;
}
}
@-moz-keyframes phase {
33% {
-moz-transform: rotate(4deg);
}
66% {
-moz-transform: rotate(-4deg);
}
100% {
top: 0;
opacity: 1;
}
}
@keyframes phase {
33% {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
transform: rotate(4deg);
}
66% {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
}
100% {
top: 0;
opacity: 1;
}
}
</style></head><body>
<div class='container'>
<h1>
Rubyisms
</h1>
<span>
JavaScript is
<span class='sub'></span>
</span>
<pre><code>$ npm install rubyisms</code></pre>
<div class='version'>
<a href='https://www.npmjs.com/package/rubyisms' target='_blank'>v0.3.2 out now!</a>
</div>
<div class='twitter'>
<a href='https://twitter.com/Okahyphen' target='_blank'>@Okahyphen</a>
</div>
</div>
<div class='container'>
<p>Rubyisms are ES5 prototype extensions.</p>
<p>They're pretty neat. Here's a few examples.</p>
<p>
You can learn more on
<a href='https://github.com/Okahyphen/rubyisms' target='_blank'>Github</a>
and
<a href='https://www.npmjs.com/package/rubyisms' target='_blank'>npm</a>
</p>
</div>
<div class='container'>
<h2>String#reverse</h2>
<div class='run' id='reverse'></div>
<pre><code class='language-javascript'>var s = 'Hello world!;
alert(s.reverse);</code></pre>
</div>
<div class='container'>
<h2>Number#times</h2>
<div class='run' id='times'></div>
<pre><code class='language-javascript'>(2).times(function (n) {
alert('Yo x ' + n);
});</code></pre>
</div>
<div class='container'>
<h2>Number#upto, Number#odd</h2>
<div class='run' id='upto'></div>
<pre><code class='language-javascript'>(7).upto(10, function (n) {
alert(n + ' is odd? ' + n.odd);
});</code></pre>
</div>
<div class='container'>
<h2>Array#count, Object#numeric</h2>
<div class='run' id='count'></div>
<pre><code class='language-javascript'>var a = ['1', 1, 1, '1', 1],
nums = a.count(function (e) {
return e.numeric;
});
alert(nums);</code></pre>
</div>
<div class='container'>
<h2>Array#sample, String#chop</h2>
<div class='run' id='sample'></div>
<pre><code class='language-javascript'>var a = ['one', 'two', 'three'];
alert(a.sample.chop)</code></pre>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdn.rawgit.com/Oka-/rubyisms/1ad8fa6208321888919e0355fd761f021f7b3503/rubyisms.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js'></script>
<script >function sample(selector, callback) {
document.querySelector(selector).addEventListener('click', callback);
}
sample('#times', function () {
(2).times(function (n) {
alert('Yo x ' + n);
});
});
sample('#upto', function () {
(7).upto(10, function (n) {
alert(n + ' is odd? ' + n.odd);
});
});
sample('#count', function () {
var a = ['1', 1, 1, '1', 1],
nums = a.count(function (e) {
return e.numeric;
});
alert(nums);
});
sample('#sample', function () {
var a = ['one', 'two', 'three'];
alert(a.sample.chop);
});
sample('#reverse', function () {
var s = 'Hello world!';
alert(s.reverse);
});
var sub = document.querySelector('.sub'),
words = ['clean', 'awesome', 'nifty',
'fun', 'elegant', 'zen', 'smart',
'amusing', 'charming', 'delightful', 'lovely',
'thrilling', 'beautiful', 'zen', 'neat'];
(function loop (n) {
n = (n >= words.size ? 0 : n);
sub.innerHTML = words.fetch(n).capitalize
window.setTimeout(loop.bind(null, n.next), 1200);
}(0));
//# sourceURL=pen.js
</script>
</body></html>
