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
89 followers · 18 following
View GitHub Profile
@JonathanDn
JonathanDn / app.component.ts
Last active June 12, 2017 07:43
Angular 2 - Javascript Vanilla - getDateNow() --> 'dd/mm/yyy hh:mm'
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app.html',
styleUrls: ['app.scss']
})
export class AppComponent implements OnInit {
private d;
private dateFormat;
@JonathanDn
JonathanDn / email-validation.service.ts
Last active July 16, 2017 08:42
Angular - email validation service, provide it and call with the email to check, return true /false according.
import {Injectable} from "@angular/core";
@Injectable()
export class EmailValidationService {
private regex: any = /^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+((?:\.){1}[a-zA-Z0-9-]+)$/;
private isEmailValid = false;
constructor() {}
getEmailValidity(email) {
if (email && email.match(this.regex)) {
return this.isEmailValid = true;
@JonathanDn
JonathanDn / email-validation.service.ts
Last active July 17, 2017 06:51
Angular - general validation service, provide it and call with the email to check, return true /false according. Raw
import {Injectable} from "@angular/core";
@Injectable()
export class GeneralValidationService {
constructor() {}
getEmailValidity(email) {
let regex: any = /^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+((?:\.){1}[a-zA-Z0-9-]+)$/;
let isEmailValid = false;
if (email && email.match(regex).length) {
return isEmailValid = true;
@JonathanDn
JonathanDn / layout.css
Last active January 5, 2018 11:00
Intersting CSS Layout with Flexbox - codepen here: https://codepen.io/anon/pen/QavZQR
.app-container {
display: flex;
justify-content:center;
}
.main-content {
display: flex;
flex-direction: column;
align-items:center;
background-color: gray;
@JonathanDn
JonathanDn / layout.css
Created January 5, 2018 11:00
Intersting CSS Layout with Flexbox
.app-container {
display: flex;
justify-content:center;
}
.main-content {
display: flex;
flex-direction: column;
align-items:center;
background-color: gray;
@JonathanDn
JonathanDn / app.consts.ts
Last active January 14, 2018 07:15
Redux Typescript - UI Reducers - TOGGLE / UPDATE for common UI States
export module UIConsts {
export const UI_UPDATE = 'UI_UPDATE';
export const TOGGLE_UI_STATE = 'TOGGLE_UI_STATE';
}
@JonathanDn
JonathanDn / responsive-table.html
Last active January 21, 2018 08:23
Responsive Table - vertical expand, built with pure css flexbox --> codepen: https://codepen.io/anon/pen/zpejXw
<div class="table-container">
<div class="table">
<div class="table-head">
<div class="table-row">
<div class="head-mobile">head 1</div>
<div class="head-mobile">head 2</div>
<div class="head-mobile">head 3</div>
<div class="head">head 4</div>
<div class="head">head 5</div>
<div class="head">head 6</div>
@JonathanDn
JonathanDn / three_dot_loader.css
Last active March 15, 2018 20:43
A three circles bounding, opacity shifting loader - JS, CSS --> demo https://jsfiddle.net/mt50h0ca/6/
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0)
}
to {
opacity: 0.1;
transform: translateY(-16px)
}
}
@JonathanDn
JonathanDn / donut.css
Created March 20, 2018 10:16
CSS Donut Spinner - indication of loading
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
@JonathanDn
JonathanDn / donut.css
Last active March 20, 2018 22:09
CSS - futuristic complex donut loader - demo --> https://jsfiddle.net/wk2w64v6/23/
@keyframes donut-spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes donut-spin-reverse {
0% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
@keyframes fade {
0% {opacity: 1;}