Skip to content

Instantly share code, notes, and snippets.

View AhsanAyaz's full-sized avatar

Muhammad Ahsan Ayaz AhsanAyaz

1k followers · 8 following
View GitHub Profile
@AhsanAyaz
AhsanAyaz / index.html
Created October 19, 2023 11:54
ReaveaJS Video Full Screen
<!-- Add this before your HTML's closing body tag -->
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
plugins: [
RevealMarkdown,
@AhsanAyaz
AhsanAyaz / user.service.spec-with-mock-users.ts
Created July 19, 2023 07:58
Snippet for ng-test-http-resp including mock users
it('should return expected user data (HttpClient called once)', () => {
const mockUsers: User[] = [
{
id: 1,
name: 'User A',
email: 'userA@example.com',
username: 'userA',
address: {
street: 'sample street 1',
suite: '123 ABC',
@AhsanAyaz
AhsanAyaz / counter.component.spec.ts
Last active June 26, 2023 01:58
Angular Cookbook ng-jest-services-stubs tests for CounterService
// replace the tests below
it('should call the CounterService.getFromStorage method on component init', () => {
jest.spyOn(CounterServiceMock, 'getFromStorage');
component.ngOnInit();
expect(component.counterService.getFromStorage).toHaveBeenCalled();
});
it('should retrieve the last saved value from CounterService on component init', () => {
jest.spyOn(CounterServiceMock, 'getFromStorage').mockReturnValue(12);
component.counterService.saveToStorage(12);
@AhsanAyaz
AhsanAyaz / ng-cdk-overlay__styles.scss
Last active June 25, 2023 12:05
Angular CDK Overlay (with menu) Default CSS for Angular Cookbook Recipes
.cdk-overlay-container {
display: block;
&.z-index-top {
z-index: 2050;
}
}
.duplicate-modal-overlay {
z-index: 999;
}
@AhsanAyaz
AhsanAyaz / ng-cdk-popover-template.html
Last active November 2, 2023 16:11
ng-template for the ng-cdk-popover recipe in Angular Cookbook 2nd Edition
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="popoverMenuOrigin!"
[cdkConnectedOverlayOpen]="menuShown" [cdkConnectedOverlayHasBackdrop]="true"
(backdropClick)="closeMenu()"
[cdkConnectedOverlayPositions]="menuPositions"
cdkConnectedOverlayPanelClass="menu-popover"
>
<div class="menu-popover__list">
<div class="menu-popover__list__item">
Duplicate
</div>
@AhsanAyaz
AhsanAyaz / popover-positional-class.directive.ts
Last active June 11, 2023 21:22
Popover Positional Class Angular Directive for Angular Cookbook 2nd Edition Recipe
import { AfterViewInit, ChangeDetectorRef, Directive, Input, OnChanges, Renderer2, SimpleChanges, inject } from '@angular/core';
@Directive({
selector: '[appPopoverPositionalClass]',
standalone: true,
})
export class PopoverPositionalClassDirective implements AfterViewInit, OnChanges {
@Input() originY: string | undefined = 'top';
@Input() targetSelector!: string;
@Input() inverseClass = '';
@AhsanAyaz
AhsanAyaz / api.test.ts
Last active February 21, 2023 09:50
TypeScript file with an API call and tests with jest
import {describe, expect, test} from '@jest/globals';
import * as API from './api';
import fetch from 'jest-mock-fetch';
describe('api module', () => {
test('addProp should add bootcamp', async () => {
/**
* spying on the fetchUser method to check if it is called
* by addProp
* we're also mocking a return value from the fetchUser
@AhsanAyaz
AhsanAyaz / javascript-questions.json
Last active December 3, 2022 16:15
JavaScript questions JSON
[
{
"question":"Which is the purpose of JavaScript?",
"answers":{
"1":"To style HTML Pages",
"2":"To add interactivity to HTML pages",
"3":"To perform server side scripting operations"
},
"correctAnswerId":"2",
"id":"1"
@AhsanAyaz
AhsanAyaz / solid-js-tutorial-snippets-part-2.json
Last active January 18, 2023 00:53
SolidJS Tutorial Snippets
[
{
"created": "2022-11-21T23:25:28.008Z",
"name": "sjs-request-page-index",
"tags": [
"sjs-request-page-index"
],
"content": "import { Component } from \"solid-js\";\n\nconst RequestIndex: Component = () => {\n return (\n <div class=\"flex flex-col md:flex-row gap-4 justify-center items-center bg-gray-200 p-4 border border-gray-300 min-h-full rounded-lg\">\n <div class=\"text-2xl flex gap-4 items-center\">\n <ion-icon class=\"text-4xl\" name=\"arrow-back-circle-outline\"></ion-icon>\n <span>Select a request from the left panel</span>\n </div>\n </div>\n );\n};\n\nexport default RequestIndex;",
"contentType": "typescriptreact"
},
@AhsanAyaz
AhsanAyaz / index.html
Last active August 14, 2022 21:22
"Node Redis Auth" tutorial files to begin with
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://cdn.tailwindcss.com"></script>
<style>
html, body {