Skip to content

Instantly share code, notes, and snippets.

View gildniy's full-sized avatar
🌏
Remote

Gildas Niyigena gildniy

🌏
Remote
View GitHub Profile
@gildniy
gildniy / mixins.css
Last active November 23, 2017 02:21
Vocabulary mixins (for BEM and namespacing) as refernce to this post using the same approach for .sass file (https://codepen.io/andersschmidt/post/expressive-bem-with-sass-a-different-approach)
/* MIXINS */
.media-object {
/**/ }
.media-object__image {
/**/ }
.media-object__image--reversed {
/**/ }
.media-object__body {
/**/ }
.person {
@gildniy
gildniy / mixins.scss
Created November 23, 2017 03:16
Expressive BEM mixins (for BEM and namespacing) as reference to this post using the same approach for .sass file (https://codepen.io/andersschmidt/post/expressive-bem-with-sass-part-ii-a-first-draft-of-mixins)
// ------------------------------------------------
// Expressive BEM mixins (for BEM and namespacing)
//-------------------------------------------------
//---------------------------------------------
// Creates a new, top-level Block
// --------------------------------------------
// If a type (e.g. component, module, utility)
// is given, it will auto-generate a namespaced
// class that adheres to Harry Roberts' post
@gildniy
gildniy / app.js
Created July 6, 2018 07:56
Express.JS 4 generator with Socket.io (Modified files to make this work)
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var sassMiddleware = require('node-sass-middleware');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
@gildniy
gildniy / tsconfig.app.json
Created December 12, 2017 03:03
How to register typings in Angular 4, after they have been installed by:'npm install @types/{package}'
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": [
"jquery",
"semantic-ui",
"underscore",
@gildniy
gildniy / validation.ts
Created December 12, 2017 03:00
Angular 4 validation service
import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';
// TODO: Check these: https://auth0.com/blog/angular2-series-forms-and-custom-validation/
@Injectable()
export class ValidationService {
static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
let config = {
'required': 'Required',
@gildniy
gildniy / route-segment.ts
Created December 12, 2017 02:59
Route segment Angular 4 service
import { Injectable } from '@angular/core';
import { PRIMARY_OUTLET, Router, UrlSegment, UrlSegmentGroup, UrlTree } from '@angular/router';
@Injectable()
export class RouteSegment {
constructor(private router: Router) {
}
path(position: number): string {
@gildniy
gildniy / debounce-click.directive.ts
Created December 12, 2017 02:57
Angular 4 debounce click directive
import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import { debounceTime } from 'rxjs/operators';
@Directive({
selector: '[kiraDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
@Input() debounceTime = 500;
@gildniy
gildniy / capitalize.pipe.ts
Created December 12, 2017 02:56
Capitalize pipe
import { Pipe, PipeTransform } from '@angular/core';
/*
* Capitalize the first letter of the string
* Takes a string as a value.
* Usage:
* value | capitalize
* Example:
* // value.name = daniel
* {{ value.name | capitalize }}
@gildniy
gildniy / spinner.component.ts
Created December 12, 2017 02:55
Spinner the Angular 4 way!
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { SpinnerService } from './spinner.service';
@Component({
selector: 'spinner',
template: `
<span *ngIf="show">
<img *ngIf="loadingImage" [src]="loadingImage"/>
<ng-content></ng-content>
</span>
@gildniy
gildniy / pager.component.html
Created December 12, 2017 02:53
Angular 4 pagination
<!-- pager -->
<div *ngIf="pager.pages && pager.pages.length" class="ui right floated pagination menu">
<a [ngClass]="{disabled:pager.currentPage === 1}" (click)="setPage(1)" class="icon item">
<i class="angle double left icon"></i>
</a>
<div *ngIf="pager.startPage > 1" class="disabled item">...</div>
<a [ngClass]="{disabled:pager.currentPage === 1}" (click)="setPage(pager.currentPage - 1)" class="icon item">
<i class="angle left icon"></i>
</a>
<a *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" (click)="setPage(page)"