Skip to content

Instantly share code, notes, and snippets.

👨‍💻
Trying Really Hard

Praveen Puglia praveenpuglia

👨‍💻
Trying Really Hard
View GitHub Profile
@praveenpuglia
praveenpuglia / same-effect-multiple-actions.ts
Created Apr 25, 2018
Same effect for multiple actions - ngrx effects
View same-effect-multiple-actions.ts
@Effect({dispatch: false})
entityCreationSuccess$: Observable<Action> = this.actions$.pipe(
ofType(UserActions.CREATE_USER_SUCCESS, PostActions.CREATE_POST_SUCCESS),
tap(action => {
this.router.navigate(['../'], {relativeTo: this.route})
})
);
@praveenpuglia
praveenpuglia / shadow-dom.md
Last active Jul 1, 2020
Everything you need to know about Shadow DOM
View shadow-dom.md

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

@praveenpuglia
praveenpuglia / multiple-actions.ts
Created Apr 25, 2018
Dispatch multiple actions from ngrx effect
View multiple-actions.ts
@Effect()
search$: Observable<Action> = this.actions$.pipe(
ofType(SearchActions.SEARCH),
switchMap(action => {
const query = action.payload;
return [new FetchPanel1Data(query), new FetchPanel2Data(query)];
})
);
@praveenpuglia
praveenpuglia / javascript-deep-flatten.js
Created Jul 27, 2018
Deep flatten a JavaScript array using Array.prototype.reduce
View javascript-deep-flatten.js
function flatten(array) {
return array.reduce( (acc, e) => {
if(Array.isArray(e)) {
// if the element is an array, fall flatten on it again and then take the returned value and concat it.
return acc.concat(flatten(e));
} else {
// otherwise just concat the value.
return acc.concat(e);
}
}, [] ) // initial value for the accumulator is []
View test_data.json
{
"name": "Issues",
"children": [
{
"name": "Word 1",
"children": [
{
"value": 8052,
"name": "Word 1"
},
@praveenpuglia
praveenpuglia / vue-apollo.ts
Created May 31, 2019
vue-apollo.ts configuration
View vue-apollo.ts
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import {
createApolloClient,
restartWebsockets
} from 'vue-cli-plugin-apollo/graphql-client';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import router from '@/router';
@praveenpuglia
praveenpuglia / playAudioAsBlobViaAjax.js
Created Apr 17, 2019
Download Audio from AJAX and Play as Blob
View playAudioAsBlobViaAjax.js
var a = fetch("http://path/to/audio.wav")
.then(res => {
var reader = res.body.getReader();
return reader.read().then(result => {
return result;
});
})
.then(data => {
console.log(data);
View Rich Text Editor.html
<!doctype html>
<html>
<head>
<title>Rich Text Editor - FROM MDN!</title>
<script type="text/javascript">
var oDoc, sDefTxt;
function initDoc() {
oDoc = document.getElementById("textBox");
sDefTxt = oDoc.innerHTML;
@praveenpuglia
praveenpuglia / javascript-qiucksort.js
Created Jul 26, 2018
Quick Sort implemented in JS
View javascript-qiucksort.js
function quickSort(array, left = 0, right = array.length - 1) {
console.log("CALLED");
let partitionIndex;
let pivotIndex;
if(left < right) {
pivotIndex = right;
partitionIndex = partition(array, left, right, pivotIndex);
quickSort(array, left, partitionIndex - 1);
quickSort(array, partitionIndex + 1, right);
}
View daterange.component.html
<!-- <div class="date-range">
<div class="date-range__presets">
<button #presetsTrigger
mat-raised-button
[matMenuTriggerFor]="presetMenu"
(click)="$event.stopPropagation()">{{selectedPreset.name}}
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #presetMenu="matMenu"
[overlapTrigger]="false">
You can’t perform that action at this time.