monteecristoo’s blog

https://twitter.com/irakaarozo

mongoDB ver 3.4 installation on a cloud9 workspace

// 環境:PHP7 Laravel5.4 mongoDB 公式Doc の Install MongoDB Community Edition on Ubuntu に従う。 1 Import the public key used by the package management system. sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A…

Laravel & redis 接続テスト

Installation composer require predis/predis @web.php Route::get('/redis_test', function() { print_r(app()->make('redis')); } // Illuminate\Redis\RedisManager Object ( [driver:protected] => predis [config:protected] => Array ( [default] => …

mongoDB uninstall

// mongoDB unistall To completely remove MongoDB from a system, you must remove the MongoDB applications themselves, the configuration files, and any directories containing data and logs. The following section guides you through the necess…

cloud9 でディスク容量がいっぱいになったとき

// 残存容量の確認 $ df /boot 以下のコマンドで比較的使用量の大きいディレクトリを確認できる du -h -t 50M 参考: munibus.hatenablog.com kisk0419.hatenablog.com

Setting Up MongoDB on cloud9 Laravel project

// community.c9.io www.compose.com https://teratail.com/questions/41471

エラーメモ

ブラウザクラッシュ 原因: topnavbar のエラー → width: 100% と padding: xxx px を同時に使用したことに起因 side navbar の toggle menu error → home 経由後ならエラー出ず、Stream, profile でエラー

Laravel mail notification with pusher and mailtrap

// Laravel で pusher を使った notification を受けて mailtrap 経由で通知メールを送る。 monteecristoo.hatenablog.com 上記の続き @.env mailtrap のアカウント情報を記入 MAIL_DRIVER=smtpMAIL_HOST=smtp.mailtrap.ioMAIL_PORT=2525MAIL_USERNAME=YOUR …

Noty installation with Laravel + Vue.js App

npm install noty --save @resources/assets/js/bootstrap.js window.noty = require('noty'); @app.blade.php <script> @if(Session::has('success')) new noty({ type: 'success', layout: 'bottomLeft', text: '{{ Session::get('success') }}' }); @endif </script> -----…

要検

computed: { hoge() { return $store.state.hoge } }, Vuex の state は method で hoge.foo などで値を参照できない

cloud9 で permission エラーが出たら…

// sudo を付ける ex) sudo composer self-update

Laravel Echo を使ってnotification の実装 with Pusher

// Laravel Echo : A JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel. Installation composer require pusher/pusher-php-server "~3.0" 参考: laravel.com Problem 1 - Installation re…

CSS vertical-align が機能しない

CSS

// 対象が インライン要素または、テーブルセル以外ではvertical-alignは適用できない 参考: www.htmq.com 対象にline-heightで値を別に設定していないかを確認 参考: www.htmq.com

CSS ボックスレイアウト

// ボックスレイアウト 横並び均等配列 必須 親 display: table; table-layout: fixed; width: 100%; 子 display: table-cell; 参考: delaymania.com

優良記事リンク CSS

CSS

// app.codegrid.net phiary.me

React を使うならライセンスに注意

// it.srad.jp

Laravel update 5.4 to 5.5

// composer.json ファイルを github.com をコピーしてペースト。 composer.jsonの自分でカスタマイズした部分をペースト。 composer update php artisan --version でアップデートを確認。 参考: laravel.com www.youtube.com

Vue.js Lifecycle

#74

Vue.js within Laravel 5.x

Laravel 内の Vue.js vue-loader@13.0.4にアップデートすると [Vue warn]: Failed to mount component: template or render function not defined. とエラーが出るので vue-loader@12.2.2 を使用(要検証) yarn add vue-loader@12.2.2

Vue.js  computedへのアクセス

computed() Computed properties are defined as no-argument functions 参考: stackoverflow.com computed同士なら this.foo で定義した computed 同士で値にアクセスできる computed: { loadedUser() { return this.$store.getters.loadedUser(this.$route…

Laravel pagination backend setting with Vue.js

@relationships.php public function res_recommend() // users not follow { $fs = $this->follows()->get(); // Auth_userがfollowしているuser $follows = array(); foreach($fs as $f) { array_push($follows, $f->target_id); } array_push($follows, $…

Vue.jsのcomputedにgettersを使用した時のconsole上のエラー

// ある関数の引数にcomputedしたloadedUserを使用 <img :src="getUserPic(loadedUser.avatar)"> computedにgettersであるloadedUserを使用 computed() { loadedUser() { return this.$store.getters.loadedUser(this.$route.params.userName); } } gettersでのloadedUser // loadedUsers に読み込んだ …

Vue.js: share funcitons and data etc each component -- Mixin

@someMixin.js export const someMixin = { data() { return { }, methods: { }, computed() { } @someComponent.vue import { someMixin } from './someMixin'; export default { mixins: [someMixin] } #174 global mixin はすべてのsingle vue instance …

Vue.js toggle css classes

bind single class bind object to manage multi css classes <script src="https://unpkg.com/vue"></script><div id="app"> <div class="demo" @click="attachRed = !attachRed" :class="divClasses"> </div> <div class="demo"></div> <dv class="demo"></dv> </div> new Vue({ el: '#app', data: { attachRed: false, }…

Vuex state management

state data をとどめておく場所。どの component からも this.$store.state.hoge からアクセス可能 getters state を加工したい場合使用。同じ加工を複数の component で使用したい場合、code の duplicate を防ぐ。どの component からも this.$store.gette…

Laravel5.4 ORM + PHP Traits

// ORMにfunctionを追記出来るがreusableでなく、肥大化することがあるためtraitsを使うことがある。 TraitsやORMのfunctionはmethod chainやORM向けのmethodを使用できる点で優れる。 @App\foo.php (ORM) use App\Traits\Friendable; class User extends Au…

Vue.js within Laravel Authentication from Vue component

// Laravel内に設置型のVue.js component内からLaravelのAuth::routesを使う方法 * vue component内にはlaravel blade template が使えないので {{ route('logout') }} 等の便利なディレクティブが使えない。 通常の {{ route('logout') }} で発行されるHTML…

Authentication Laravel with Vue.js

9 Backend @UserController.php /*-------------------------------------- | For Frontend Authentication | ---------------------------------------*/ public function signup(Request $request) { $this->validate($request, [ 'name' => 'required', '…

CSS position: sticky;

CSS

// CSS position stickyについて 他のカラム等を加味しながら要素を固定したい e.g) サイドバーと別カラムでトップメニューを固定表示したい → sticky 他の要素を加味しない → fixed stickyを使うときはtop, left, right等の場所を指定するプロパティーと一…

vue-awesome-swiper でメニューバーをstickyに表示したい

// vue-awesome-swiperはflexboxを使っている。 cssに追加 .swiper-wrapper { align-item: flex-start; } →→ フレックスボックスの上端をそろえる .swiper-container { overflow: visible !important; } →→ デフォルトでvue-awesome-swiperはoverflow: hidde…

Windowsコマンドプロンプトから空のファイルを作成

type nul > test.html