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
108 followers · 18 following
View GitHub Profile
@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>
@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 / 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 / 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 / interactive-circles.css
Created October 16, 2019 08:06
HTML Canvas Interactvie Circles
body {
margin: 0;
overflow: hidden;
}
@JonathanDn
JonathanDn / canvas.css
Created October 16, 2019 08:05
HTML Canvas Boilerplate
body {
margin: 0;
overflow: hidden;
}
@JonathanDn
JonathanDn / gravity.css
Created October 16, 2019 08:04
HTML Canvas Gravity
body {
margin: 0;
overflow: hidden;
}
@JonathanDn
JonathanDn / future-loader.css
Created September 7, 2019 04:52
Futuristic Loader HTML CSS - Fiddle: https://jsfiddle.net/5tL8wes9/1/
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes donut-spin-reverse {
0% {
@JonathanDn
JonathanDn / random.js
Last active May 1, 2019 13:00
Javascript - get random integers from range (float, integer, bool), random floats, random boolean(50% 50%)
/* Get a random floating point number between `min` and `max` */
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
/* Get a random integer between `min` and `max`
- Inclusive(both min and max) due to -> (max - min + 1)
*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
@JonathanDn
JonathanDn / facebook-micro-4.scss
Created March 3, 2019 07:40
How Facebook Designs Microinteractions for Feature Discovery article fourth gist - https://bit.ly/2EtfB6V
// Basic keyframes 4-star to octagon and back animation
$four-points-star: 42.5% 32.5%, 70% 0%, 67.5% 42.5%, 100% 70%, 57.5% 67.5%, 30% 100%, 32.5% 58.5%, 0% 30%;
$octagon: 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%;
@keyframes fourStarToOcatgonAndBack {
0% { clip-path: polygon($four-points-star); }
50% { clip-path: polygon($octagon); }
100% { clip-path: polygon($four-points-star); }
}