2年前に書いた HTML5 Form Validationサンプル(jQuery + Bootstrap 4.0 + Constraint Validation API) の Vue版です。
HTML5のフォーム要素に備わっているValidation機能(Constraint Validation API)を利用するフォーム要素のコンポーネントと、それを利用したフォームのサンプルを作ってみた。
気ままに綴る独学メモ帳
2年前に書いた HTML5 Form Validationサンプル(jQuery + Bootstrap 4.0 + Constraint Validation API) の Vue版です。
HTML5のフォーム要素に備わっているValidation機能(Constraint Validation API)を利用するフォーム要素のコンポーネントと、それを利用したフォームのサンプルを作ってみた。
array_combine — 一方の配列をキーとして、もう一方の配列を値として、ひとつの配列を生成する
ピコ太郎のPPAPがまんまそのイメージ。
つまりこういうのがやりたい:
const key = ['green', 'red', 'yellow']; const val = ['avocado', 'apple', 'banana']; ↓ {"green":"avocado","red":"apple","yellow":"banana"}
[Vue] ページネーション機能の作り方とコンポーネント作成入門 からの続き。
続きなので前の記事で作ったやつがないとできません!
引き続きCodeSandboxでやります。
ローカルに環境作った方はそちらでどうぞ。
CodeSandboxのプレビューのところに、Testsっていうタブがあるのに気づきました?
これ、テストを実行して結果を表示してくれる便利機能です。
今回はこの機能を使えるようにします!
【2019/10/21追記】CodeSandboxのバグでテスト機能が動きません
およそ3時間くらい苦しめられた。
[PHP] ページング機能の仕組みとか作り方とか が今年で10周年!
今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。
2018年はずっとVue.jsと戯れていたので、Vueでpaginationコンポーネントはどうやって作れば良いの?という視点でまとめてみました。
環境構築は面倒くさいのでCodeSandbox使います!
なのでローカルにインストールからやってみたい方はVueの公式ドキュメント片手にトライしてどうぞ。
書いた時のバージョン
Nuxt 2.2.0
Vue 2.6.6
babelバージョン7系のpolyfillについてのメモ。
カウントダウンの数字が全部バラで要素に入っててスタイルが個別につけられるやつ
Slickで中央表示モードにして外側から中央にかけて大きくさせるエフェクトつけるサンプル。
JavaScriptでオブジェクトをループさせたいと思った時は Object.keys
でキーだけ配列にしたものを
Array.forEach
で回すっていうのが鉄板だったが、
ES2017の Object.entries
の方が見た目エレガントやなあと思った。
JestのtestでmockAxios使ってて、mockResponseのところでエラーになる原因 同名であげられてたissueにあるコメントを要約すると テスト書くときの順番の問題で axios.getしてるやつの後に … 続きを読む
コンテンツがページの半分ずつに並んでいてクリックで全面へ展開させる
マウスホイールの動き関係なしに決まったセクションの位置にだけピタッとスクロールさせたい
PlunkerでAngular2使って作ったオレオレエディタがなんでか読み込まれなくなってて、
直すならついでにVueにしようかなと思い立ったのでCodeSandboxに移植した。
なんばんせんじだかわかりません
不親切なメモです。
某イカゲームの公式サイトなどでやってる手法です。
同じ件に遭遇するだろう同士の為にサンプル含めてメモっておきます。
See the Pen
YouTube Background by Tenderfeel (@Tenderfeel)
on CodePen.
サンプルをjsdo.itからCodePenに移動
なんでもネイティブアプリのUIデザインが1080x1920pxだからと。
えーまじで、と。iPhone6+なら1242x2208pxでないの?と。
Webでそんな数字聞いた事ないんだけど今ってどうなの?と思ってググってみたんだけども
やっぱりWebだと1080なんてのはないなあと思い知らされた。
とはいえ時間もないし強引にやってみることにした。
jQueryではもうアカンと思った時に挙った乗り換え候補はRiot.jsとMithril.js。
どっちもナウいんで一応両方試してみたんだけども、Riot.jsに落ち着いた感じであります。
なんでRiot.jsになったかというと、完全に個人的な好みの問題でして、
すごい大雑把にいうとRiot.jsはHTMLにJSを書くという方針に対してMithril.jsはJSにHTMLを書くという親のReact.jsの流れを汲む文化を継承してるんですが、試しで作ってる時に「HTMLにJS書く方が違和感ない」と思ったからなのでした。
あとはRiot.jsが企業に対してMithril.jsは個人であるといった、開発母体の差もちょっと気になる点でした。
機能面はどちらもミニマムでシンプルでAPI数少なくてとっつきやすいのでそんなに変わらないが、学習コストは独自ルールが多いRiot.jsの方が数段高いと思う。
でこうして紹介するにしてもTodoじゃ面白みがないんで、
実際使えそうなものをサンプルを作ろうとして思いついたのが、
Googleのスプレッドシートで更新情報表示するというものです。
昔普通に商用サイト作ってた頃「ホームページに更新情報表示したい(自分でお知らせ書きたい)」ってな要望が多かったので、今ならこういう手も使えるかなと思いまして。
スプレッドシートをデータベースにするというサンプル自体は4年前にやってたので
http://jsdo.it/Tenderfeel/ahd8
これのガワをbackbone.jsからriot.jsに変更しただけのものですが、
Google visualization API + Riot.js sample
ソースを比較するとえらいこざっぱりしているのがお分かり頂けるかと思います。
backbone.jsと比べても可読性めっちゃ上がってると思う〜。
続きはplnkerにつくったサンプルの解説です。