2017-01-01から1年間の記事一覧

CSS position: sticky;

CSS

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

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

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

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

type nul > test.html

metismenu + vueJs スクリーンサイズに応じて切り替えたい場合

// updated: 2018/4/25 metismenu ・・・ class metismenuが複数あると2つ目がエラー??? 大画面ではサイドに固定されたmetismenuが使いたい モバイルではスワイプでmetismenuを使ったサイドバーを表示させたい 2種類のサイドバーを用意して画面サイズごと…

Laravel blade template でVueを使うときの注意 稀なエラー

blade templateで@section('hoge')を設定したのち、 vue側のapp.jsでvueをinjectするタグを以下のように同じ<hoge>に設定すると… Vue.component('hoge', require('./componets/Hoge.vue')); エラー(コンソールにもコンパイル時もエラーが表示されない)でvueが表示</hoge>…

PeachScript/vue-infinite-loading each element CSS management

github.com infinite-loadingの各elementをイベントを通じてcssを管理 ロードされるlist内にcss管理用のvariableを設置する listのelementに無効なクラスを設定しておいて(defaultでは無効でクラス無し扱い)、イベントでクラスを有効化する

noraesae/perfect-scrollbar でbarが表示されない件

noraesae/perfect-scrollbar #containerのwidthやheightが中に入れたコンテンツのwidthやheighより大きいため。 demoでHeightを中の画像より大きい800pxにするとy-railが消える

Laravel5.4 ORM + Traits + Controller + Routes

level 1. routes.phpに全部記述 leavel 2. controllerを使ってrouteへの記述量を減らす level 3. Eloquent ORMを使ってroute、controllerの記述量を減らす level 4. ORMにTraitsを付与してORMの記述量を分散 cati #9 TraitsやORMへの記述はcontroller側にも…

Vue-infinite-loading error: [Vue warn]: Property or method "recommend" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Vue-infinite-loadingでv-forのpropertyにエラーが出る場合 <p v-for="(recommend, key) in list"> <div id="recommend"> <span v-text="recommend"></span> </div> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading> 余分な<div>があるとエラーが出る。 解決方法: <p v-for="(recommend, key) in list"> </p></div>

vue-router with dynamic router-link

vue-routerのrouter-linkを使ってdynamicなlinkの生成 方法① @app.js const routes = [ { path: '/user/:userName', component: Profile, children: [ { path: '', component: Activity, }, { path: 'follow', component: Follows }, { path: 'activity', co…

UI Elements

www.nxworld.net blog.8bit.co.jp tympanus.net Bootstrapで使えるjQueryプラグイン | ENTEREAL metismenu github.com .metismenuが二つあると片方がバグる display: none してもダメ //

Laravel5.4 ORMにexternal functionを付与

例えばApp\Userに外部からfunctionを付与したい場合 @Http直下に以下を設置 @Http\ExternalFunc\Greeting.php

VueJS within Laravel dynamic image binding @nested route

hoge.vue <img :src='user.avatar' > <script> export default { computed: { user() { return this.$store.state.user.user; } }, 上記でdynamicにimageを切り替えられるが、 サブドメインのrouteを定義した場合、 vue-router経由で該当ページまで表示させた場合とページのリロードで表示させ…

check user relationship

#15 parent child server-side //

tinker

$follows = App\Follow::where('user_id', 4)->get() => Illuminate\Database\Eloquent\Collection {#727 all: [ App\Follow {#750 id: 1, user_id: 4, target_id: 1, created_at: "2017-05-30 11:44:03", updated_at: "2017-05-30 11:44:03", }, App\Follow…

oauth認証で突然動作不良が起きたら… Received HTTP status code [401] with message "<?xml version="1.0" encoding="UTF-8"?> <hash> <error>The given URL is considered malware</error> <request>/oauth/request_token</request> </hash> " when getting temporary credentials.

oauth認証が突然出来なくなった → 原因: ドメインがSpamhausのブロックリストに登録されたため 確認方法: oauth認証先のセッティング画面でcallbackURLを変えてみる 例えばtwitterでは… とアラートが出るのでシステムの問題ではなくドメインブロックの問題…

Laravel5.4 + VueJS CSRF token error: TokenMismatchException in VerifyCsrfToken.php line 68:

middleware->('auth')を使用時form関連を扱うときtokenが必要 純粋なLaravel App なら blade templateの {{ csrf_token() }} からtokenを取得して <input type="hidden" name="_token" value="7YC0Sxth7AYe4RFSjzaPf2ygLCecJhblahblah"> をセット、または <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>"> で解決できるがvueの場合や外部のパッケージを利用し…

twitter setting

Laravel5.4 Laravel-Mix issue  Error: Module build failed: Error: Couldn't find preset "es2015" relative to directory

// updated: 2018/2/13 Error: Module build failed: Error: Couldn't find preset "es2015" relative to directory laravel-mixがes2015を認識していない npm install babel-preset-es2015 --save-dev プロジェクトのroot directoryに.babelrc { "presets":…

Laravel + vue-router vue SPAページのRouting @vueJS inside Laravel

基本 app.jsで記述したpathをlaravel側のweb.phpにも記述。その際、returnするviewはvueの起点ページにする。 Route::get('/profile', function() { return view('home'); }); → home.blade.phpにvue componentのprofileがある場合、profileがレンダリングさ…

Vue chips いろいろ

htmlタグ内では{{ }}は使わないで v-bindまたはコロンで下記のように記述 data() { return { img: "http://~~~~" } } <img :src='img'> セミコロンの取り扱い セミコロンなし → static <router-link to="hoge"> セミコロンあり → dynamic <router-link :to="foo"> computed: { foo() { regrgergs } vuexでstateを設定した後</router-link></router-link>…

Laravel Database Seed

create a Seed file php artisan make:seeder UsersSeeder register Seed file @DatabaseSeeder.php use Illuminate\Database\Seeder; class DatabaseSeeder extends Seeder{ public function run() { $this->call(UsersSeeder::class); }} define UsersSeed…

Laravel Migration file 操作

// php artisan make:migration create_messages_table --create="messages" Schema::create付きのmigration fileが生成される。 function up → php artisan migrate した時の動作 funciton down → php artisan migrate:rollback した時の動作 migrateをやり…

Laravel 5.4 Database Structure

Relationships model A: User protected $fillable = [ DBのカラム] public function messages) { return $this->hasMany(Message::class); } model B: Message protected $fillable = [ DBのカラム] foreign_key は登録しなくてOK public function users() …

Vue 2 debugger

stateのツリーのトップフォルダが各stateが所属するjsファイルになる。 例えば... ▼ user: Object ▶ user: Object ▼ stream: Object ▶ messages: Array ▶ streamGroup: Array の場合、userはuser.js、messages, streamGroupはstream.jsに記述してある。

cloud9上のLaravelアプリケーション内のnode server(今回はredis)とsocket.ioでLaravelアプリケーション内のVueJSからwebsocket通信をするとき

// updated: 2018/7/9 node_server側 プロジェクト直下にmkdir node_server npm init → entry point は server.js npm install redis express socket.io @/node_server/server.js var app = require('express')();var server = require('http').Server(app);…

Laravel Socialite + php artisan make:auth integration

scotch.io $table->string('provider')->nullable(); $table->string('provider_id')->unique()->nullable();

Laravel tinker Basic Usage

// テスト用データベースを作成 php artisan make:model Test -m php artisan migrate (phpmyadmin-ctl install) tinkerを起動 php artisan tinker tinker console内で... $test = App\Test::create(); => App\Test {#715 updated_at: "2017-05-08 05:43:30"…

*error

laravel make:auth と socialite のintegration error provider と provider_id を nullableまたはmake:auth経由のデフォルトの値を設定 auth後http通信に切り替わる(cloud9が共有SSLだから???) 参考: qiita.com

cloud9 redis start up

cloud9にはredisがプリインストールされているので起動するだけ sudo service redis-server start redis の起動ポートを調べる sudo service redis-server status redisにアクセス redis-cli