Skip to content

Instantly share code, notes, and snippets.

@mccabiles
mccabiles / nginx.conf
Created Sep 17, 2019
Using gzip with Nginx and Vue CLI project
View nginx.conf
...
gzip on;
gzip_static on;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
@mccabiles
mccabiles / image-preview.js
Created Sep 6, 2019
Get data from file for use with <image> src.
View image-preview.js
const readFileData = (file) => {
return new Promise(resolve => {
if (!file instanceof File)
return resolve(file);
const reader = new FileReader();
reader.addEventListener('load', function() {
resolve(this.result);
});
@mccabiles
mccabiles / router.js
Created Aug 23, 2019
Vue Router checking for authenticated
View router.js
import Store from '@/store'; // Vuex.store
// Check for auth routes:
const guardAuthRoutes = (to, from, next) => {
const matchedRoutes = to.matched;
const isLoggedIn = Store.state.Auth.isLoggedIn;
if (matchedRoutes.some(route => route.meta.auth === true) && !isLoggedIn) {
return next({ name: 'login' });
}
@mccabiles
mccabiles / ImageUpload.php
Last active Aug 15, 2019
Base64 Image uploading for Laravel 5.6+ using Storage Facade
View ImageUpload.php
use Illuminate\Support\Facades\Storage;
//...
$base64image = '...';
@list($type, $file_data) = explode(';', $base64image);
@list(, $file_data) = explode(',', $file_data);
$type = explode(";", explode("/", $base64image)[1])[0];
$path = 'images/' . time() . '.' . $type;
Storage::disk('local')->put($path, base64_decode($file_data));
@mccabiles
mccabiles / FancyHome.vue
Last active Jul 3, 2019
Vue Slots Explained: Examples
View FancyHome.vue
<!-- A really fancy home: -->
<template>
<home-component>
<template v-slot:living-room="livingRoomProps">
<flatscreen-tv @view="livingRoomProps.watchTV"></flatscreen-tv>
<universal-remote
@changeChannelSports="livingRoomProps.changeChannel('SportsHD')"
@changeChannelCartoons="livingRoomProps.changeChannel('CartoonsHD')"
></universal-remote>
</template>
@mccabiles
mccabiles / Resolver.ts
Last active Jun 11, 2019
Use a Resolver to asynchronous pre-fetch data before navigating to Angular component,
View Resolver.ts
import { Injectable } from "@angular/core";
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
class Backend {
getData() { return data; }
}
@Injectable()
export class Resolver implements Resolve<any> {
constructor (private backend: Backend) {}
@mccabiles
mccabiles / SomeServiceClass.js
Created Jun 10, 2019
Rxjs Behavior Subject for creating observable data.
View SomeServiceClass.js
import { BehaviorSubject } from 'rxjs';
export class SomeServiceClass {
constructor() {
this.dataObject = new BehaviorSubject('some initial value');
}
set setData(newData) {
// notify all subscribed listeners to update data:
this.dataObject.next(newData);
@mccabiles
mccabiles / ResourceController.php
Created May 28, 2019
Laravel Controller model filtering and pagination using request queries.
View ResourceController.php
class ResourceController
{
public function paginate($query, $current_page = 1, $items_per_page = 25)
{
$count = $query->count();
$data = $query->skip($items_per_page * ($current_page - 1))->take($items_per_page)->get();
$pages = ceil($count / $items_per_page);
return [
'count' => $count,
View ViewAvenger.vue
<script>
export default {
props: {
id: Number,
},
data() {
return {
avenger: {} // Our avenger object is initially empty
};