Skip to content

Instantly share code, notes, and snippets.

View ramonvictor's full-sized avatar

Ramon Bezerra ramonvictor

View GitHub Profile
@ramonvictor
ramonvictor / svelte-example.md
Last active July 22, 2018 20:53
Universal Svelte and Vuejs

Universal Svelte

Files

App.html

  • components/Footer.html
  • components/Header.html
  • components/Search.html

Server - App.html

@ramonvictor
ramonvictor / button.html
Created May 3, 2018 20:06
Computed CSS class list in Svelte
<button class="{css}">
Next page
</button>
<script>
import getClassListFromObject from './utils.js';
export default {
computed: {
css: ({ wide }) => {
use constant {
PREFIX_DIVIDER => ':',
PREFIX_ALIASES => {
'foo' => 'foo/barz/location/',
}
};
sub find_and_replace_prefix {
my ($filename) = @_;
var target = document.querySelector('.modal-content');
// Cross-browser listeners: `mousewheel DOMMouseScroll`
window.addEventListener('mousewheel', function(event) {
var elHeight = target.clientHeight;
var scrollTop = target.scrollTop;
var scrollHeight = target.scrollHeight;
if ((event.deltaY < 0 && scrollTop == 0 ) ||
(event.deltaY > 0 && scrollTop + elHeight >= scrollHeight)) {
@ramonvictor
ramonvictor / freeze-body-scroll.css
Last active January 15, 2017 02:03
Module to freeze body scroll without horizontal alignment glitch due to browser default behaviour (hidding scroll bar).
.js-scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
@ramonvictor
ramonvictor / module.new.js
Last active January 3, 2017 17:51
Mimic `new` operator implementation, just for learning purposes.
/*
* `Cat` module sample.
*/
function Cat(bar) {
this.bar = bar;
}
Cat.prototype.foo = 'hello';
/*
@ramonvictor
ramonvictor / module.super.js
Last active December 10, 2016 18:38
`this.super()` concept using `arguments.callee.caller`
(function() {
// 'use strict';
// ^ would throw error because of `arguments.callee.caller`.
var ModuleCore = function() {};
ModuleCore.prototype.html = function() {
console.log(':: html');
};
ModuleCore.extend = function (settings, Parent) {
// `config.room` is a random ID generated on page load.
var socket = io();
TicTacToe.prototype.init = function(config) {
this.room = config.room;
};
TicTacToe.prototype.eventListeners = function() {
socket.on('connect', this.onSocketConnect.bind(this));
socket.on('dispatch', this.onSocketDispatch.bind(this));
var store = require('./store');
var gridView = require('./grid-view');
TicTacToe.prototype.eventListeners = function() {
store.subscribe(this.render.bind(this));
};
TicTacToe.prototype.render = function(prevState, state) {
// You can even check whether new state is different
// [require modules and do some express setup]
// ...and here is where the magic happens:
io.on('connection', function(socket) {
socket.on('room', function(room) {
socket.join(room);
});
socket.on('dispatch', function(data) {
socket.broadcast.to(data.room).emit('dispatch', data);
});