Yonatan Doron JonathanDn

💭

Building Reusable Vue Components

Frontend Craftsman

JonathanDn / clap-sonar.html

Created April 2, 2018 22:03

Clap Sonar - WIP - click counter, retriggering animations, chain animation effect - demo --> https://jsfiddle.net/urft14zr/220/

	<div class="canvas">
	<div id="clap" class="clap-container">
	<i class="clap-icon fa fa-hand-paper-o"></i>
	</div>

	<div id="clicker" class="click-counter">
	<span class="counter"></span>
	</div>

	<div id="sonar-clap" class="clap-container-sonar"></div>

JonathanDn / meter.html

Last active September 7, 2019 06:40

Rotating Meter with solid Base - SCSS HTML - Fiddle: https://jsfiddle.net/84nftuh6/1/

JonathanDn / medium_clap.html

Last active June 9, 2023 07:34

(moved to a repo https://github.com/JonathanDn/mediumclap ) Medium Clap Reproduction - My take on it by looking, researching and trial & error. Demo available --> https://jsfiddle.net/urft14zr/425/

	<div class="canvas">
	<div id="totalCounter" class="total-counter"></div>

	<div id="clap" class="clap-container">
	<i class="clap-icon fa fa-hand-paper-o"></i>
	</div>

	<div id="clicker" class="click-counter">
	<span class="counter"></span>
	</div>

JonathanDn / facebook-micro-1.scss

Last active March 3, 2019 09:12

How Facebook Designs Microinteractions for Feature Discovery article first gist - https://bit.ly/2EtfB6V

	// A simple 8 points(coordinates x y) Square 200px by 200px
	// with points equally spread along the corners and middle of each
	// Square side (right model)
	clip-path: polygon(
	0 0,
	100px 0,
	200px 0,
	200px 100px,
	200px 200px,
	100px 200px,

JonathanDn / facebook-micro-2.scss

Last active March 3, 2019 09:12

How Facebook Designs Microinteractions for Feature Discovery article second gist - https://bit.ly/2EtfB6V

	// A Four Cornered Star (8 points in total, 4 outter, 4 inner)
	clip-path: polygon(
	0 0,
	100px 50px,
	200px 0,
	150px 100px,
	200px 200px,
	100px 150px,
	0 200px,
	50px 100px

JonathanDn / facebook-micro-3.scss

Last active March 3, 2019 09:16

How Facebook Designs Microinteractions for Feature Discovery article third gist - https://bit.ly/2EtfB6V

	// Octagon - 8 equally spread corners
	clip-path: polygon(
	30% 0%,
	70% 0%,
	100% 30%,
	100% 70%,
	70% 100%,
	30% 100%,
	0% 70%,
	0% 30%

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); }
	}

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 / 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 / gravity.css

Created October 16, 2019 08:04

HTML Canvas Gravity