Skip to content

Instantly share code, notes, and snippets.

View blog-post-1-config.service.ts
/**
* @desc ConfigService will be used to deal with loading and saving config files that is needed to init the app
*/
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
@Injectable()
@mansour-ahmed
mansour-ahmed / tslint.json
Created Jan 7, 2018
up-to-date tslint configuration file for TS & angular development
View tslint.json
{
"rulesDirectory": ["node_modules/codelyzer"],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
"comment-format": [true, "check-space"],
"curly": true,
"eofline": true,
"forin": true,
View animate-scroll-class.ts
export class AnimateScroll {
constructor() {}
/**
* @desc scrollToItem Fn scrolls to an items by utilising the animated scroll fn (scrollTo)
* and calculating the height of the header to accurately find the item's position.
* @param elementID: element's ID that will be scrolled to.
* @param duration: duration in milliseconds, default is 750.
*/
scrollToElement(elementID: string, duration: number = 750) {
@mansour-ahmed
mansour-ahmed / breakpoint-mixin.scss
Created Oct 28, 2019
Mobile first scss mixin to handle responsive layouts using media queries
View breakpoint-mixin.scss
@mixin breakpoint($point) {
/*========== Mobile First Method ==========*/
@if $point==xs {
@media only screen and (min-width: 0px) {
@content;
}
} @else if $point==sm {
@media only screen and (min-width: 600px) {
@content;
}