Skip to content

Instantly share code, notes, and snippets.

👨‍💻
Trying Really Hard

Praveen Puglia praveenpuglia

👨‍💻
Trying Really Hard
Block or report user

Report or block praveenpuglia

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@praveenpuglia
praveenpuglia / shadow-dom.md
Last active Aug 23, 2019
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 / 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 / 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 / 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 []
@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);
@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)];
})
);
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">
@praveenpuglia
praveenpuglia / cancel-request.ts
Created Apr 25, 2018
Cancel in flight / ongoing network request - ngrx effects
View cancel-request.ts
@Effect()
getTabData$: Observable<Action> = this.actions$.pipe(
ofType<FetchTabData>(TabActions.FETCH_TAB_DATA),
switchMap(action => {
const tabType = action.payload;
return this.http
.get(`${environment.apiUrl}/api/tab/${tabType}`)
.pipe(
map((response: any) => {
return new FetchTabDataSuccess(response.data);
You can’t perform that action at this time.