indeterminate（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 06日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 06 日目 チェックボックスはオン・オフを表現するのに使われますが、未決定 indeterminate というオン・オフどちらでもない（あるいはどちらでもある）状態があり得ます。 JavaScript から indeterminate プロパティを操作するとそれを設定できます。また CSS では擬似クラス :indeterminate を用いてスタイルをあてることもできます。 またまだ選択されていないラジオボタンもこの未決定状態とみなされます。 <input type=”checkbox”> – HTML: HyperText Markup Language | MDN →未決定状態のチェックボックス デモ：indeterminate example 基本的な使い方 設定するには JavaScript から。HTM
ESLintが妙に遅いとき、不要なファイルを読んでないか確認して除外しよう。 | Ginpen.com
ここまでのあらすじ：ESLint は便利。でも実行すると妙に遅い？ CI の実行時間には問題なく、VS Code のプラグインもストレスなく動く。でも手元のコンソールから実行するととても遅い……というか一生終わらない。どうして？ どこかで詰まっている？ なにが？ 先にまとめ ビルドファイルなんかが対象になってるかも DEBUG=eslint:* eslint . で実行し、詳細出力 目的でないファイルが含まれていないか確認 ignorePatterns へ追加して除外 なんか遅い…… あるとき大きめの自動変更をしました。 目視確認の前に機械的に判断できるものは判断してしまおうとコンソールから ESLint を実行したところ……終わらない。ESLint のエラーは VS Code 上ではちゃんと出てくるし、CI もご機嫌に回っているので特に気にしていなかったんですが、どこかに何か問題があるよ
`package-lock.json` はNPMリポジトリーに含まれないよ（NPMおれおれAdvent Calendar 2019 – 07日目） | Ginpen.com
NPMおれおれAdvent Calendar 2019 – 07日目 そういう仕様です。 先にまとめ package-lock.json は NPM リポジトリーに追加されない つまり依存パッケージとしてインストールされる場合、バージョンは固定されない Git のリポジトリーには含めてください 公開されない npm-package-lock.json | npm Documentation One key detail about package-lock.json is that it cannot be published, and it will be ignored if found in any place other than the toplevel package. It shares a format with npm-shrinkwrap.json, which is
よく使う括弧の名前（日本語、英語）を調べてみたよ。ブラケット、ブレースとか。 | Ginpen.com
その他 括弧全般を指す場合はBracketと呼ぶみたい 上記以外にも呼び方の種類は多い、特に英語 鍵括弧 「 」 はCJK(中日韓)で利用される かつて日本の数学では ( ), { }, [ ] の順に小、中、大括弧と呼ばれていたが、今はそうでもないらしい 世界的には ( ), [ ], { } の順に小、中、大が用いらる場合が多いらしい というか初期以外は丸括弧 ( ) の入れ子で全部表現するようになるよね 一般に使われる山括弧 < > は、実は括弧ではなく数学の大小記号 本来の山括弧 〈 〉 は角度が浅い形をしたもの（フォント）が多そう。たぶん 英語WikipediaでもHTMLタグの山括弧をAngle bracketsと記述しているので、別に混同しても問題なさげ 例: ” tags enclosed in angle brackets (like <html>)” 出典 Bracke
全世界で最も多く利用されているCSSプロパティを発表します。ぱんぱかぱーん！（CSS Property Advent Calendar 2013 – 03日目） | Ginpen.com
元ネタ Googleが出している統計を利用しています。 Chromium Dashboard 自動収集される膨大な情報を即時解析し、直近二十四時間分のCSSプロパティ利用統計を見せてくれる。 Google Chromeには使用統計を自動的に送信する仕組みが組み込まれています。 「設定＞機能＞詳細設定を表示…＞プライバシー＞使用統計データや障害レポートを自動的に Google に送信する」がそれです。たぶん。 で、この機能で送信されてきた統計情報のうち、CSSプロパティの利用状況についての情報が上記のものです。あ、なのでたぶんページ単位ではなく閲覧単位です。よく見られるページで利用されていれば使用率は上がる事でしょう。いずれにしろ人気度という観点で問題ないと考えています。 ちなみにCSS以外の統計情報もありそうなんですが、本記事執筆時点ではまだ公開されていないようです。 第1位はwidth、
次世代JavaScript、ECMAScript6の話を聞いてきたからサンプルコードとかメモしときます。 | Ginpen.com
これ行って来ました。 Web先端技術味見部#15 （今回は「ECMAScript6をそろそろ触る」！） : ATND 楽しかった！ JavaScript (JS)とECMAScript (ES)の違いとか、そういうのはググってください。 Firefox Auroraが現状ES6最先端ぽい。次点Chromeは chrome://flags から「JavaScript の試験運用機能を有効にする」を有効にして再起動でES6の機能が使えたりするらしい。 Firefoxで メニューのツール＞Web開発＞スクラッチパッド でスクラッチパッド。なんかコンソールより便利なやつ。 配列内包表記も使えるように。でも見づらいので三項演算子（?:演算子）みたいな扱いになりそうに思った。 サンプルコードいろいろ let ブロックスコープになる。varと有効範囲が異なる。
CSSだけでウィンドウぴったりに表示する編集画面を作る。（CSS おれおれ Advent Calendar 2012 – 23日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 23日目 メールとかブログ記事とかの編集画面みたいなのがあって、それをウィンドウいっぱいに表示するとき、ウィンドウに合わせて縦方向に伸ばすのってどうしてますか？ JavaScript使っちゃいます？ それCSSで出来るよ！ ウェブサービスではあんまりないUIだと思うけど、ウェブアプリ的なものだったらよくあるのでは。 概要 ネタバレ。 height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。 高さを100%に出来る場合、出来ない場合について知る 昔書いたのでちらと読んでみてください。 CSSでheight:100%を使う方法について。 一言で言うと、上位要素に高さの
典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com
一口にJSerといっても、色々な分野の人がいます。あなたはどんなJSerになりたいですか？ 方向性により学ぶべき事も変わってきます。目標を明確にしましょう。 というわけで、独断と偏見……というか主に偏見で三種類にまとめてみました。 追記: 「勉強法」とかタイトルに付けておきながら勉強法に触れてませんでしたので「勉強範囲」に修正しました。ひー。 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基本的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flasherさんがシフトしてくる位置。 発注側が想定するJavaScripter。最近の携帯ゲームで需要がある。 お仕事 JSだけでなくCSSや画像を駆使して画面を描く。 UIだけならいなくても困る事はないけれど、UXま
jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。） えらい！ jQuery Blog » jQuery 1.8 Released jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!) jQuery Blog » The New Sizzle jQuery Blog » jQuery Core: Version 1.9 and Beyond jQuery Blog » jQuery 1.9 and 2.0 — TL;
JavaScriptのDateの挙動が面白かったのでまとめてみた。 | Ginpen.com
typeof ( Date ); // => "function" typeof ( Date()); // => "string" typeof ( new Date()); // => "object" typeof ( +new Date()); // => "number" typeof (1+new Date()); // => "string" typeof ( !new Date()); // => "boolean" Date はJavaScriptのコアに組み込みのコンストラクターですね。関数です。なので typeof Date は当然 "function" になります。 いやJavaScriptじゃないけど 正確にはJavaScriptじゃなくてECMAScriptの仕様になります。 というわけで、本記事はECMA-262の15.9 Date Objectsとかを参照し
ぽわーんってさせるjQueryプラグインを作りました。 | Ginpen.com
ぽわーんって感じです。デモ見て！ jQuery.gpPowanは「ぽわーん」とさせるプラグインです。 「ぽわーん」のところは応用が利きそうなので、「ひょいっ」ってさせるやつも作れそう。
Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。 | Ginpen.com
右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ＆ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。（ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。） 画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら（Chromeが更新されてて）変わってるから、ときどき覗いてみるといいんじゃない
「何か困ったこと」と「解決のために試したこと」を管理するMyerrをリリースしました。 | Ginpen.com
何かよくわからない不具合のときって色々試してみたりするんですが、そういうときって「あれこれ試したっけ？ そいでどうなったっけ？」みたいになりませんか？ 僕だけですか？ 僕だけかもしれません。ええと、とにかくそういうときに僕が便利な感じのアプリです。 Herokuという、ウェブアプリをホスティングしてくれてるサービスを利用しているので、URLもginpen.comじゃありません。 まあ習作なので、 こんな事を試しています： Railsの習作 Rails+Twitter連携の練習 Herokuの試用 Twitter Bootstrapの試用 Bootstrapは作ってる途中でバージョンアップしてガラッと変わってしまったので困りました。別に何日もかけて作ってたわけでもないんですけどね……。 (´・ω・｀) ｱｲﾔｰ Rails+Twitter連携は近日中にまた記事にまとめるつもりなのでお楽しみに
jQuery.gpKey 0.1を公開しました。 | Ginpen.com
はいこちら。 jQuery.gpKeyでキー操作が楽々に。 向こうのページにも書いてますが、 任意の要素単位で管理 親しみやすい記述でキーを割り当て の2点が特徴で、ウェブアプリで機能を実現するためのメタ的な機能を提供します。 あんまり需要ないかなーとは思わないでもないですが、自分で欲しかったので。 色々考え中でまだガラッと仕様変更になるかもしれません。とりあえずバージョンも0.1にしときました。数字キーとShiftキーの組み合わせと、あと記号キーの扱いをどうしようかなあと思案中。記号キーはkeyCodeがバラバラで……USキーボードなんていうものもあるし……。
他人の能力を自分のものにできる .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("/"));
カラーコードを素敵に扱うビット演算（JavaScript おれおれ Advent Calendar 2011 – 8日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 8日目 CSSで色を表現する方法の一つにカラーコードというものがありまして、#55CC2Aみたいな感じで色を表現できますね。光の三原色RGB (Red, Green, Blue)を2桁の16進数で表現して連結したものです。 これをJavaScriptから扱うなら、そのまま16進数で0x55CC2Aみたいに扱うと見た目が似ていて楽チンそうです。（ちなみにアルファベットは大文字でも小文字でも可。） この中から一色分だけ取得したりするには、ビット演算でムニャムニャするのが良いです。 （あるいはrgb()の形の表現でも良いでしょう。） 先に結論 // 取得 var code = 0x55cc2a; var red = code >> 16; // => 0x55 var green = code >> 8 & 0xff;
記号じゃない演算子（JavaScript おれおれ Advent Calendar 2011 – 3日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 3日目 演算子というと+とか=とか&&とか記号が思い浮かぶんじゃないかと思うんですが、アルファベットで構成される演算子っていうのもあるんですよね。ちょいとまとめてみます。 new delete typeof void instanceof in 順に見て行きましょう。 new演算子 インスタンスを作る奴ですね。jQueryでもりもり作るような場合にはまず見ないと思うんですが、もっとこうプログラマーちっくにごりごり作る場合にはよく使ったりします。 newという演算子はクラスからインスタンス（そのクラスの実体であるオブジェクト）を作成する……というのが一般的な動作です。が、JavaScriptは違います。そのそもクラスというものは存在しません。先の例のMyClassはクラスではなくコンストラクターです。 まあこのあた
parseInt()の甘い罠（JavaScript おれおれ Advent Calendar 2011 – 4日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 4日目 <input />の入力値は文字列なので、数値として扱うには変換してやる必要がありますね。そんなときには組み込み関数であるparseInt()が便利です。 var numText = document.getElementById('num').value; var num = parseInt(numText); console.log(num);
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リセットCSSをダウンロードしてくるのが面倒なら、覚えてしまえばいいじゃない。（CSS おれおれ Advent Calendar 2012 – 12日目） | Ginpen.com
配列の .lengthは代入できる（JavaScript おれおれ Advent Calendar 2011 – 10日目） | Ginpen.com