Skip to content

Instantly share code, notes, and snippets.

View MurhafSousli's full-sized avatar

Murhaf Sousli MurhafSousli

619 followers · 5 following
View GitHub Profile
@MurhafSousli
MurhafSousli / usage-2.html
Last active December 9, 2023 07:21
Proposal: Carousel usage
<carousel [data]="items">
<carousel-thumbs></carousel-thumbs>
<div *carouselItem="let item">
<img src="item.src">
</div>
<div *carouselThumb="let item">
<img src="item.thumb">
</div>
</carousel>
@MurhafSousli
MurhafSousli / app.component.html
Created November 22, 2019 12:51
Angular Comlink
<h1>{{ textStream | async }}</h1>
<div>
<input type="text" [(ngModel)]="textInput">
<button (click)="run()">Run</button>
</div>
@MurhafSousli
MurhafSousli / external-library-loader.ts
Last active November 18, 2019 05:25
Article code
import { Injectable, PLATFORM_ID } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
import { BehaviorSubject, Observable, from, EMPTY } from 'rxjs';
import { catchError, tap, map, filter, take } from 'rxjs/operators';
import { ExternalLibrary, ExternalLibraryOptions, EXTERNAL_LIBRARY_OPTIONS } from './models';
// @dynamic
@Injectable({
providedIn: 'root'
@MurhafSousli
MurhafSousli / Installation
Last active March 28, 2024 02:57
npm install ngx-highlightjs
@MurhafSousli
MurhafSousli / gist-file.ts
Last active March 28, 2024 02:52
ngx-highlightjs code examples
import { HighlightPlusModule } from 'ngx-highlightjs';
@Component({
selector: 'app-root',
template: `
<pre [gist]="gistId" (gistLoaded)="gist = $event">
<code [highlight]="gist | gistContent: 'main.js'"></code>
</pre>
`,
standalone: true,
@MurhafSousli
MurhafSousli / ng-scrollbar.html
Created October 31, 2019 14:56
Test ng-scrollbar auto-height with root DOM
Remove `ngStyle` from `.ng-scrollbar-wrapper` in the template
<div class="ng-scrollbar-wrapper" [ngAttr]="state" [ngStyle]="autoHeightStyles">
To
<div class="ng-scrollbar-wrapper" [ngAttr]="state">
@MurhafSousli
MurhafSousli / hide-native-scrollbars.scss
Created July 9, 2019 22:16
Hide native scrollbars on all desktop browsers
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* IE 11 */
&::-webkit-scrollbar { /** Webkit */
display: none;
}
}
@MurhafSousli
MurhafSousli / exercise.js
Last active April 16, 2019 11:47
/**
* - Add a button that fetches data from WordPress API when clicked, "Fetch posts"
* - Get WordPress posts using the fetch API
* - Display loading icon before calling fetch
* - Display the posts in a list (display title) once the response is loaded and remove the loading icon
*/
/**
* Hints:
*
@MurhafSousli
MurhafSousli / index.js
Created April 9, 2019 07:34
function add(a, b) {
return parseInt(a) + parseInt(b);
}
if (!process.argv[2] || !process.argv[3]) {
console.log('Insufficient number of arguments! Give two numbers please!');
}
else {
console.log('The sum of', process.argv[2], 'and', process.argv[3],
'is', add(process.argv[2], process.argv[3]));
}
@MurhafSousli
MurhafSousli / index.html
Created March 29, 2019 08:00
Practice on JS
<!DOCTYPE html>
<html>
<head>
<title>Javascript TODO list</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">