CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。 matrix() は、 transform で使える各種関数すなわち translate(), scale(), rotate() 及び skew() を置き換え得る最強の関数です。配列の reduce() 的な立ち位置、といえばJavaScriptに明るい皆さまに通じ
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追
Babelを使って現代的JavaScriptを始める。（現代的JavaScriptおれおれアドベントカレンダー2017 – 01日目） | Ginpen.com
現代的JavaScriptおれおれアドベントカレンダー2017 – 1日目 基本的にIE以外の現代的なブラウザ（つまり更新されているもの）では、特に何もしなくても現代的なJavaScriptをだいたい利用することができます。 それでも古い環境に対応するため、あるいはより先進的な記法を使う場合、Babelの力を頼りましょう。 Babel · The compiler for writing next generation JavaScript 前提知識 CLI npm package.json Babelとは 「次世代JavaScript記法のためのコンパイラ」です。コンパイラじゃなくてトランスパイラという表現を使う人もいます。 Babelは「黒い画面」で動くツールで、これを使うと新しい文法で記述したJSファイルを変換して、古い文法で構成されたものを生成することができます。そしてそれは古い環
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
他人の能力を自分のものにできる .apply()で高度な成り済ましを（JavaScript おれおれ Advent Calendar 2011 – 15日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 15日目 JavaScriptの関数は関数オブジェクト（Functionのインスタンス）なので、メソッドを使う事ができます。中でも最も使用頻度が高いのが .apply()だと思います。 .apply()を使うとその関数を実行する事ができます。……というと「はてな？」ですが、着目すべきは実行する際のコンテキストと引数を自由に設定できるという点です。 例えば配列風のオブジェクトを考えます。このオブジェクトは配列じゃないので、Arrayインスタンスなら使えるはずのメソッドが使えません。 var arr = ["a", "b", "c"]; console.log(arr.length); // => 3 console.log(arr[1]); // => "b" console.log(arr.join("/"));
.apply()を駆使してスルー力を極めろ（JavaScript おれおれ Advent Calendar 2011 – 16日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 16日目 （※「スルー力」は「するーか」じゃなくて「するーりょく」です。） .apply()を使って他の関数を実行できる事は昨日示しました。 これを応用して、メソッドが呼ばれた際にそのままスルーして、別のメソッドが呼ばれたかのように振る舞う事ができます。
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
#JSオジサン に参加してきたよ。 | Ginpen.com
お呼ばれしまして、ちょっとお話ししてきました。初参加。 内容の過不足あればPRください。 ginpei/20141218-js-ojisan JSオジサン #4 【満員御礼！】JSオジサン #4 : ATND 俺の 俺の 俺 の 話 を 聞 け https://t.co/4YtCuVt8nj — JSオジサン (@JS_ojisan) 2014, 11月 18 agoさんによるウェルカムLT 到着したらもう喋ってる人がいて「すわ一時間間違えたか」と焦ったけどagoさんだったので安心して着席しました。 はじまってないのにもう話してる… #JSオジサン pic.twitter.com/FkWLbaarPD — JSオジサン (@JS_ojisan) 2014, 12月 18 #jsオジサン 今回もWelcomeLTありかな。できれば「サービス多言語化戦線異常なし」みたいなのと、「テストの価値は
JavaScript設計の世代と近未来の話。（JavaScriptおれおれAdvent Calendar 2014 – 24日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 24日目 個人的に、こんな感じで認識してますって話。書くにあたりあんまり精査してないので勘違いありそう。やさしく教えてください。 もちろん個々人では先取りしてあれやこれややってる人もいて、そういう人たちは特に今でも第一線で頑張っているように思う。 原初 設計なし DHTML (Dynamic HTML) NoScript 設計なしに書いていた時代。 もちろん個別のアルゴリズムとかはあったんだけど、アプリケーションというよりはウィジェットとかそういう規模のもの。 あれよあれ、マウスカーソル追っかけるやつとかそういうの。もちろんまともに考えられたものもあったけど、少数派。JavaScriptといえば「よくわからない派手で邪魔なもの（を作るやつ）」という認識。ブラウザーの設定やプラグインでスクリプトの実行を停止している閲覧
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
最初にドキュメントから書く話。（JavaScriptおれおれAdvent Calendar 2014 – 17日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 17日目 特にライブラリー的なものを作るとき、最初にドキュメントを書くようにしてます。 例えばこれ、まだドキュメントしかないです。 ginpei/scroller.js 最初にドキュメントを書く効能 もちろん後で書く手間が省けるってのもあるけど、それより、最初にAPIのリファレンスを作る事で、成果物の最終形が明確になります。最終形が分かっていれば、ごりごり書いてそれに近づけるだけっすね。 APIが決まっていれば試験を書ける、試験が書ければリファクターができる、リファクターができれば雑なコードでも実装を進められる。とまあそんな感じ。 もしここで明確な最終形を記述できなかったとしたら、それは現時点ではまだ何を作れば良いかわかっていないという事になるでしょう。それだとコードも書けない。 モジュールでも同じように 製品内の部
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
