Skip to content

Instantly share code, notes, and snippets.

View JonathanDn's full-sized avatar
💭
Building Reusable Vue Components

Yonatan Doron JonathanDn

💭
Building Reusable Vue Components
107 followers · 18 following
View GitHub Profile
@JonathanDn
JonathanDn / canvas.css
Created October 16, 2019 08:05
HTML Canvas Boilerplate
body {
margin: 0;
overflow: hidden;
}
@JonathanDn
JonathanDn / interactive-circles.css
Created October 16, 2019 08:06
HTML Canvas Interactvie Circles
body {
margin: 0;
overflow: hidden;
}
@JonathanDn
JonathanDn / util-elastic-collision.js
Created October 19, 2019 09:40 — forked from christopher4lis/util-elastic-collision.js
A set of utility functions used to reproduce the effect of elastic collision within HTML5 canvas. Used in the Chris Courses tutorial video on collision detection: https://www.youtube.com/watch?v=789weryntzM
/**
* Rotates coordinate system for velocities
*
* Takes velocities and alters them as if the coordinate system they're on was rotated
*
* @param Object | velocity | The velocity of an individual particle
* @param Float | angle | The angle of collision between two objects in radians
* @return Object | The altered x and y velocities after the coordinate system has been rotated
*/
@JonathanDn
JonathanDn / media-query.css
Created November 15, 2019 13:43 — forked from gokulkrishh/media-query.css
CSS Media Queries for Desktop, Tablet, Mobile.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
@JonathanDn
JonathanDn / loader.css
Created November 15, 2019 14:15
Simple loader - https://jsfiddle.net/hewbt3qy/11/
body {
background: cyan;
}
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
@JonathanDn
JonathanDn / component.vue
Last active June 20, 2023 15:54
Vue.js 2/3 - Vue.Observable - Simple Store Implementation, returning a reactive object.
// component importing and mutating state from store.js (all getters, mutations, actions)
// reference = https://austincooper.dev/2019/08/09/vue-observable-state-store/
<template>
<div>
<div>Radius: {{ radius }}</div>
<div>Color: {{ color }}</div>
<button @:click="setRadius(0)">Reset radius</button>
<button @:click="fetchColorFromApi">Fetch color</button>
</div>
</template>