Skip to content

Instantly share code, notes, and snippets.

@mccabiles
mccabiles / nginx.conf
Created September 17, 2019 11:24
Using gzip with Nginx and Vue CLI project
...
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 September 6, 2019 13:28
Get data from file for use with <image> src.
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 August 23, 2019 12:34
Vue Router checking for authenticated
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 August 15, 2019 17:56
Base64 Image uploading for Laravel 5.6+ using Storage Facade
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 October 18, 2024 23:29
Vue Slots Explained: Examples
<!-- 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 June 11, 2019 07:49
Use a Resolver to asynchronous pre-fetch data before navigating to Angular component,
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 June 10, 2019 12:37
Rxjs Behavior Subject for creating observable data.
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 07:33
Laravel Controller model filtering and pagination using request queries.
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,
<script>
export default {
props: {
id: Number,
},
data() {
return {
avenger: {} // Our avenger object is initially empty
};