phiary
JavaScript の dispatchEvent の情報があまりにも少なかったので解説用にサンプルを作ってまとめてみました. このエントリーでは dispatchEvent の基本的な使い方と活用例について解説します. うまく使えばネイティブっぽく JavaScript を拡張したりってこともできる便利な関数です. About 今回制作したサンプルデモは２つ. 最初のサンプルはイベントを発行するサンプルです. boxB をクリックした際に boxA のクリックイベントも発生するようになっています. 2つ目のサンプルは rightclick イベント という 右クリックしたときのみ発行する独自イベントを定義しています. Code 今回制作したサンプルデモ１個目の全体コードです. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <l
phiary
『yield』 に引き続きマニアックな Riot.js tips です. 先日下記のようなツイートが流れてきました. ちょっとこれは驚愕の事実かも...riotjsでタグで直接onscroll="{hoge}"ってかたちでbindするじゃん？スクロールする度に、updatedが呼ばれる。。。つまり、スクロールする度にupdate()がかかってる。。。！？ — 杏z (@AnzNetJp) 2016年10月27日 もれなく私も昔これにハマったことがあったので, その対処法を紹介したいと思います. Riot.js におけるイベント発火時のライフサイクル Riot.js は, onほにゃらら に設定している関数を呼ぶと自動で update を呼ぶ仕様になっています. onclick や ontouchstart といったそれほど頻繁に発火しないイベントならそれでも良いのですが, onscroll
phiary
Riot.js には yield という仕組みがあります. これを使いこなすことで定義済みのコンポーネントの一部を柔軟に拡張することができるようになります. 今回はこの yield について, デモや図を交えて解説したいと思います. そもそも Riot.js について知りたい方はまずこちらをどうぞ フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary Riot.js の yield とは？ yield は, Riot.js のコア機能の一つで子タグに親タグから部分的に HTML を差し込むことができます. この仕組みをうまく活用することで拡張性のある柔軟なタグ(コンポーネント)を定義することができます. yield を使ったデモ yield を使ったデモです. header の中身を外から指定したり, material
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Twitter を見ていると 『Riot.js でも Sass 使いたいー！』ってのをちらほら見かけます. Riot.js は, 標準で Less にも Sass にも対応してると思っていたんですが, ちゃんと中身を読んでみると Less にしか対応していませんでした💦 (以前ドキュメントで対応してるっての見た気がするんだけどなぁ...) ただ, 引数で簡単に拡張できるよう良い感じに作ってくれているので, 手軽に Sass を導入できます. なので今回は, 実際に Riot.js のパーサーに Sass
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python ちょっと前に riot.js に, 実行時(runtime) でも jade 使えるようにする pull req 投げてたんですが無事にマージ & リリースされましたー!! ってことで紹介したいと思います. 対応 version は v2.3~ です. 何が変わったの？ 巷では Browserify やら Webpack やら流行ってるみたいですが, 個人的にはそういったローカルでごにょごにょする系は好きではないです. なので, riot.js の埋め込みタグ実装 <script type='riot/t
phiary
Riot.js には, yield という定義済みのタグに HTML を挿入する便利な機能があります. ただこの yield というキーワード, 色々な言語で様々な用途として使われていて漏れ無く jade にも同じキーワードで違う機能として定義されちゃっています. なので Jade でタグ定義する際に yield を使うと, Riot.js ではなく Jade のほうの yield として認識され上手く動きません. 今回はその解決方法を紹介したいと思います. 解決方法 下記のように書き換えるだけです. yield Text Text Text Text ↓ #{'yield'} Text Text Text Text サンプル ちゃんと yield 部分が展開されているのが分かるかと思います.
phiary
先日書いた 『Electron の入門エントリー』 が好評だったので私の大好きな Riot.js の入門も書いてみました. AngularJS や React でもいくつか Web アプリケーション作ってきましたが, 私にとっては Riot.js が一番しっくりきました. なので今回は Riot.js について紹介します. とにかく詳しい説明はいいから触って試してみたいって方はぜひ読んでみてください. Runstant を使ったデモを並べているので, このページ上で実行したりコードをいじることができます. 実際に動かしながら, Riot.js がどれだけ使いやすいか体感してみてください♪ Riot.js とは？ 今のところ私にとって(使いやすさ, 手軽さ, 規模感総合して)最も優れた JavaScript フレームワークです. 主な特徴 個人的に Riot.js でいくつかサービス作ってき
phiary
『notie.js』とは？ 公式より A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies. JavaScript のためでクリーン(おそらく依存性がないってこと)でシンプルな通知ライブラリです. 的なことが書かれています. Official ... https://jaredreich.com/projects/notie.js/ Github ... https://github.com/jaredreich/notie.js 『notie.js』デモ 『notie.js』の使い方 Install cdn 経緯で読み込みます. github を見る限りだとまだリリースバージョンがないようだったので commit バージョンをしていして cdngit
phiary
Electron 入門です. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリー. 最短でインストールから実行, 配布用ファイルの作成までやる方法です. 「これ何やってんの？」 とか 「どういう意図で？？」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Setup ディレクトリを作成 $ mkdir electron-app $ cd electron-app package.json を作る 色々聞かれるので適当に enter 押す $ npm init 出力された package.json の中身 { "name": "electron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error:
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
