Vue.js + Nuxt.js + GraphCMSでSSRブログ生活 - ShoYamane.me
Vue.js + Nuxt.js + GraphCMSでSSRブログ生活 先日、Vue.js + Nuxt.js + GraphCMSでブログリニューアルしました！って記事を公開したのですが、GraphCMSが気になる！っていう声がチラホラ聞こえたのでGraphCMSの使い方をVue.js + Nuxt.jsで使う際の注意点をまとめて見ようかなと思います。対象としてはVue.jsとNuxt.jsは触ったことあるよ〜という人向けに書いてますのでご了承ください。 DEMO https://explorer-combs-21111.netlify.com/blog/1/ サーバーはNetlifyにデプロイしていますが、いちおうGTMatrix評価では100点です。 GraphCMSのメリット、デメリット GraphCMSを使ってて感じたメリットデメリットを箇条書きしてみたいなと思います。 メリッ
Let’s write Pong in WebAssembly
WebAssembly PongDemo Fiddle I’ll be writing the game mostly in C and with a little help from JavaScript for rendering and event handling. Since I’ve got two languages to work with, I could slice the application in several ways but I want to write as much of the game in C as I can, and only use JavaScript for library support. I will not include any .h files thus no external libraries will be availa
Vue.jsのpropsカスタムバリデーターを使った堅牢なコンポーネント作成 - Qiita
Vue.jsには、それぞれのコンポーネントのpropsにバリデーションルールを設定することができます。 ReactでいうところのpropTypesのような概念ですが、あちらより基本構造がシンプルであり、反面複雑な条件は自分でバリデーションルールを書くスタイルとなっています。 これまでは受け付けるpropsの名称だけを設定することも一般的でしたが、Vue 2.4以降は公式のスタイルガイドでも、propsに型や独自で定義するバリデーターを定義することを推奨することとなりました。 ですが、従来型の記法が利用されていることもまだまだ多く、中にはご存じないかたも多いのではないでしょうか。 この記事では、そんなVue.jsのpropsのバリデーターに焦点をあて、基本的な使い方についてご紹介します。 TL;DR propsでキー名のみを指定するのはやめよう とりあえず型だけでも縛ることができるなら型制限
WebUSBでFeliCaの一意なIDであるIDmを読む - Qiita
概要 Suica、PASMO、おサイフケータイに代表されるFeliCaカードには一意のIDとしてIDmという数値が割り当てられている。USB接続のFeliCaリーダーを使ってそいつを読む。 デモ デモページはこちら→ https://saturday06.github.io/webusb-felica/demo.html 注意：チャージ済みだったり、オートチャージが有効なカードでは絶対に実験しないでください。勝手に決済が発生してお金が無くなっても責任はとれません。 ソースはこちら https://github.com/saturday06/webusb-felica/blob/gh-pages/demo.html だいたい、下記のような感じで送受信関数を作っておいて async function send(device, data) { let uint8a = new Uint8Arra
js-sequence-diagrams by bramp
This should be a diagram! If you don't see it you need Javascript enabled Intro A simple javascript library to turn text into vector UML sequence diagrams. Heavily inspired by websequencediagrams.com, who offer a serverside solution. We use Jison to parse the text, and Snap.svg to draw the image. Examples
VS CodeがDOMによるターミナル実装のパフォーマンスを改善できなかったためCanvasに変更
Integrated Terminal Performance Improvements Electronという史上まれに見るそびえ立つクソのようなGUIプラットフォーム上で実装されているVS Codeが、ターミナルの実装をDOMによるものからCanvasによるものに変更したそうだ。これは、DOMによる実装ではパフォーマンスの改善が十分にできなかったからだという。 DOMでターミナルを実装する際の問題ごととして、テキスト選択、テキストアライメント、GC、パフォーマンスを上げている。 テキスト選択：ターミナルのテキスト選択を実現するためにDOMのテキスト選択の挙動をだいぶ上書きしなければならない。 テキストアライメント：一部の文字はモノスペースになってくれず、workaroundとして一文字ごとに固定長のspanで包む必要があるが、これはパフォーマンス上よろしくない。 GC：DOMでターミナ
Chartkick.js - 多数のグラフに対応したラッパーライブラリ MOONGIFT
Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。 そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。 Chartkick.jsの使い方 曲線のグラフ。 円グラフ。 ドーナッツグラフ。 棒グラフ。 横型。 エリアグラフ。 点だけのグラフ。 バブルチャート。 複数の要素を同時に。 横棒グラフでもできます。 横棒グラフで積み上げ型。 複数の要素でかつグルーピング。 色を変えた円グラフ。 データが一定でない要素同士でも。 10分ごとといった細かい単位でも。 細かい横棒グラフ。 Chartkick.jsは Chart.js、GoogleチャートそしてHighchartsに対応しており、これらのグラ
Wallaby - Immediate JavaScript test feedback in your IDE as-you-type
Few months ago we have introduced Quokka.js — Live Scratchpad for JavaScript in your editor, with access to your project’s files, inline reporting, code coverage, rich output formatting, automatic node packages installing, and much more. Since then the tool had been downloaded around 200,000 times (for VS Code and JetBrains IDEs) and the number of active users is quickly growing. We are very excit
GitHub - danielb2/purdy.js: Print things real purdy
Prints anything indented, and with arrays with index keys, and different types in colors such that it's very easy to get an overview of what object you're dealing with. object - anything, number, object, array, etc. options - optional object with the following keys. plain - when true, prints result without colors. Defaults to false with tty, true when not. path - when true, prints result with a pa
Headless Chromeでデザイン変更履歴を追える魚拓を作ってみた - pixiv inside
はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
window.stop - Web API | MDN
Abortable fetch | Blog | Chrome for Developers
小さな課題解決から始めるVue.js / Getting started Vue.js for small improvement
GitHub - puppeteer/puppeteer: JavaScript API for Chrome and Firefox
GitHub - aksakalli/gtop: System monitoring dashboard for terminal
GitHub - darcyclarke/rawkit: 🦊 Immediately Open Chrome DevTools when debugging Node.js apps
GitHub - IonicaBizau/node-cobol: :tv: COBOL bridge for NodeJS which allows you to run COBOL code from NodeJS.
GitHub - sinonjs/nise: Fake XHR and fake server
GitHub - kujirahand/nadesiko3: Japanese Programming Language Nadesiko v3 (JavaScript/TypeScript)
