Skip to content

Instantly share code, notes, and snippets.

View jkyoutsey's full-sized avatar
📐

Jared Youtsey jkyoutsey

📐
6 followers · 1 following
View GitHub Profile
@jkyoutsey
jkyoutsey / dynamic-script.component.html
Last active October 26, 2023 12:48
Angular Dynamic Script Execution Directive
<div appDynamicScript>
<!-- most tags work, but Angular strips script tags, so don't try it. -->
<div
src="http://some.script.com/thing.js"
my-custom-attr="some value"
>
Some Text
</div>
</div>
@jkyoutsey
jkyoutsey / ngStyleAnchorsOnDomChangeDirective.STEP1.ts
Created February 9, 2022 20:50
Angular Style Anchors on DOM Change Directive Step 1
import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[myStyleAnchors]'
})
export class StyleAnchorsDirective implements AfterViewInit {
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngAfterViewInit(): void {
@jkyoutsey
jkyoutsey / ngStyleAnchorsOnDomChangeDirective.html
Last active February 9, 2022 21:21
Angular Style Anchors on DOM Change Directive
<div
[myStyleAnchors]
[innerHtml]="{{ someSafeHtml }}">
</div>
@jkyoutsey
jkyoutsey / css-media-queries.html
Last active June 27, 2021 16:48
CSS Media Queries Demo
<html>
<!--
Phone Tablet Desktop
Variable em px Query Port Land Port Land
------------------------------------------------------------------------------------------------------------------
By default you should not write any media query at all. So, the first X X | X X | X
CSS definitions in your CSS file will apply to all devices unless you | |
have additional media queries defined afterward. | |
------------------------------------------------------------------------------------------------------------------
$sm-min-width 35.5em 568px min-width: 35.5em X | X X | X
@jkyoutsey
jkyoutsey / ts-bazel-lint-rule-func-must-return-value.ts
Created May 7, 2019 14:54
TypeScript Bazel Lint Rule Functions Must Return Value
// A list of well-known functions that the return value must be used. If unused
// then the function call is either a no-op (e.g. 'foo.trim()' foo is unchanged)
// or can be replaced by another (Array.map() should be replaced with a loop or
// Array.forEach() if the return value is unused).
const METHODS_TO_CHECK = new Set<string>([
['Array', 'concat'],
['Array', 'filter'],
['Array', 'map'],
['Array', 'slice'],
['Function', 'bind'],
@jkyoutsey
jkyoutsey / logger.ts.vscode.snippet.txt
Created March 8, 2019 19:00
VSCode Snippet For logger.ts
"Log All The Things": {
"prefix": "ll",
"body": [
"Logger.${LEVEL}('${CLASS}', '${METHOD}', `${message}`);"
]
}
@jkyoutsey
jkyoutsey / coverage-metrics-lie.component.html
Created February 11, 2019 15:17
Angular Coverage Metrics Lie Template
<div *ngIf="hasData(); else nodata">
<div *ngFor="let item of data"
class="item"
(click)="delete(item)">
{{ item }}
</div>
</div>
<ng-template #nodata>
No data
@jkyoutsey
jkyoutsey / coverage-metrics-lie.component.ts
Created February 11, 2019 14:52
Angular Coverage Metrics Lie Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'nea-coverage-metrics-lie',
templateUrl: './coverage-metrics-lie.component.html',
styleUrls: ['./coverage-metrics-lie.component.scss']
})
export class CoverageMetricsLieComponent implements OnInit {
data: number[];
@jkyoutsey
jkyoutsey / coverage-metrics-lie.component.spec.ts
Created February 11, 2019 14:46
Angular Coverage Metrics Lie Spec
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CoverageMetricsLieComponent } from './coverage-metrics-lie.component';
describe('CoverageMetricsLieComponent', () => {
let component: CoverageMetricsLieComponent;
let fixture: ComponentFixture<CoverageMetricsLieComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
@jkyoutsey
jkyoutsey / my-child.component.ts
Created January 7, 2019 21:57
Angular Unit Testing child component inputs
@Input() items: Array<T>;
@Output() click = new EventEmitter<T>();