Skip to content

Instantly share code, notes, and snippets.

@Jonarod
Jonarod / blob_conversions_util.js
Created Dec 7, 2019
Javascript utility to convert Blob to Base64, ImageData or ObjectUrl back and forth. Tree shakeable and promise based.
View blob_conversions_util.js
const BlobToBase64 = function(blob){
let blobUrl = URL.createObjectURL(blob);
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = err => reject(err);
img.src = blobUrl;
}).then(img => {
URL.revokeObjectURL(blobUrl);
@Jonarod
Jonarod / deepCopy.js
Created Dec 6, 2019
Fast & concise deep copy / deep clone / shallow copy in Javascript
View deepCopy.js
var deepCopy = function (o) {
var t, x, key
t = Array.isArray(o) ? [] : {}
for (key in o) {
x = o[key]
t[key] = (typeof x === "object" && x !== null && !(x instanceof Date)) ? deepCopy(x) : x
}
return t
}
@Jonarod
Jonarod / ubuntu commands.md
Last active Apr 1, 2020
Useful ubuntu commands
View ubuntu commands.md

Automation

Execute a command at specific time

crontab -e

then, helped by crontab.guru, add a new line like:

@Jonarod
Jonarod / ToggleSwitch.vue
Created Nov 23, 2019
Simple custom Toggle Switch button for Vue.js, compatible with v-model.
View ToggleSwitch.vue
/**
* @usage:
*
* <ToggleSwitch :trueFalseLabels="['On','Off']" :trueFalseColors="['#1CD4A7','#ccc']" v-model="isOn" />
*
* data() {
* return {
* isOn: false
* }
* }
@Jonarod
Jonarod / RadioBox.vue
Created Nov 23, 2019
Simple custom Radio component for Vue.js, compatible with v-model.
View RadioBox.vue
/**
* @usage:
*
* <RadioBox label="Foo" value="foo" v-model="MySelectedValue" />
* <RadioBox label="Bar" value="bar" v-model="MySelectedValue" />
* <RadioBox label="Baz" value="baz" v-model="MySelectedValue" />
*
* data(){
* return {
* MySelectedValue: "",
@Jonarod
Jonarod / CheckBox.vue
Created Nov 23, 2019
Simple custom CheckBox component for Vue.js, compatible with v-model.
View CheckBox.vue
/**
* @usage:
*
* <CheckBox label="Foo" value="foo" v-model="MySelectedValues" />
* <CheckBox label="Bar" value="bar" v-model="MySelectedValues" />
* <CheckBox label="Baz" value="baz" v-model="MySelectedValues" />
*
* data(){
* return {
* MySelectedValues: [],
@Jonarod
Jonarod / Service_Workers_Messaging.md
Last active Apr 4, 2020
Describes how to send messages between a page's main thread and a service worker thread
View Service_Workers_Messaging.md

Page to ServiceWorker

// in page.html
navigator.serviceWorker.controller.postMessage({'hello':'world'});
// in sw.js
self.addEventListener('message', event => { 
@Jonarod
Jonarod / README.md
Last active Apr 3, 2020
Install Alpine Linux on Hetzner cloud
View README.md
  1. Create an hetzner server using Ubuntu
  2. Go to the Hetzner's Server dashboard > Images
  3. Click on "Mount" over the alpine-linux-extended.iso image
  4. Shutdown the server
  5. Start the server
  6. Click the "Console" icon from the dashboard to open an interactive terminal session
  7. Login is root
  8. Configure the interface using the command setup-interfaces
  9. Pick to setup default eth0
  10. Custom config: no
@Jonarod
Jonarod / nano-base.css
Last active Feb 10, 2019
Minimalist CSS framework for Xtreme minimal devs :)
View nano-base.css
/* GLOBAL RESET */
@import url("https://gistcdn.githack.com/Jonarod/ab4e61a97aadd79db994c8dea3492a69/raw/49bac14b46470fd7933007fcdbedf219f173d087/reset.css");
/* TYPOGRAPHY */
@import url("https://gistcdn.githack.com/Jonarod/eed956dc8bd45fd90407de3eb740ec80/raw/a721babaa516b56e67bfb83b8d33c28a8f53120d/typography.css");
/* HELPERS */
@import url("https://gistcdn.githack.com/Jonarod/27e396f8b90498763e640ba9a6e27659/raw/c9a2cd4cc2ebdf8e1a17eed60de278639ca15454/helpers.css");
/* GRID */
@Jonarod
Jonarod / grid--xl.css
Created Feb 7, 2019
CSS minimal grid Xtra large screens
View grid--xl.css
@media (min-width: 1200px) {
.contain-fluid__slim--xl { width: 70%; }
.contain-fluid__medium--xl { width: 80%; }
.contain-fluid__wide--xl { width: 90%; }
.contain { width: 1000px; }
.contain__slim, .contain__slim--xl { width: 800px; }
.contain__medium, .contain__medium--xl { width: 900px; }
.contain__wide, .contain__wide--xl { width: 1020px; }
.items__start--xl { align-items: flex-start; }
You can’t perform that action at this time.