Houdini、それはCSSの進化を促すプロジェクト - The future starts today
この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは
jQueryを使わずjavascriptだけで書き直した際の記法メモ - Qiita
パフォーマンスが重要な部分では、やっぱりjQueryは気になる。。。 検索するとなにやらVanilla jsというのが盛り上がっていた。 ってもこれただのjQuery使わず、javascript使おうぜって話なだけだけどwww という事で今のjQueryのメソッドをすべてjsで置き換えたらどうなんだ？と思い対応表をまとめました。 jQuery ⇔ vanilla(普通のjavascript) 参考： YOU MIGHT NOT NEED JQUERY Choosing Vanilla JavaScript live(on) event
node.jsのいろいろなモジュール51 – OAuth2認証形式でGoogleスプレッドシートにアクセス | DevelopersIO
node.jsでGoogle Spread Sheetにアクセスその２ OAuth2でGoogle Spreadsheetにアクセスする 前回はサービスアカウント形式の認証とシート共有を使ってGoogleスプレッドシートにAPIでアクセスしました。 しかし、この方法の場合、セキュリティによりシート共有を制限している場合などには使用できません。 Googleでは他にもいくつか認証方法があり、今回はOAuth2を使用してスプレッドシートにアクセスする方法について紹介します。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.10.5 Node : v4.1.2 データとAPIを使用する準備 1.シートの用意とGoogle Developer コンソールにてAPI許可 前回と同じシートを使用します。 Drive APIの許可をしてないなら、許可しておきましょ
【GAS】スプレッドシートのデータをJSON出力する関数をExecution APIで外部のNode.jsから実行する - Qiita
概要 GASと言えば、「Google Apps Script」のGASです。 「Apps Script Execution API」という新しいAPIが使えるようになったそうなので、このAPIを使って、外部環境からGASの関数を実行するというサンプルをご紹介します。 特にスプレッドシートをクラウド型の簡易データベースのように使えることも想定して、 とりあえず表からJSON出力して、「Execution API」で外部のNode.jsから実行するという内容をやってみました。 以下は実装のイメージです。 要は外部から実行する上で「認証」のあたりが重要なポイントで、この「Execution API」を使う事でOAuth認証で気軽に外部からGASにアクセスが可能となります。 今回はGASでスプレッドシートにアクセスしていますが、もちろんGASはカレンダーとか他のアプリケーションの操作もできます。
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
Webページでよく使用されるコンポーネントをアクセシブルに実装するコードのまとめ -Frend
アコーディオンやタブ、ダイアログ、オフ キャンバス、ページ内リンクなど、Webページでよく使用されるコンポーネントをアクセシブルに実装するコードを紹介します。 Frend 実装にあたり Frendのコンポーネントは最小限で、他のスクリプトやCSSの依存はありません。Web標準をプライオリティとして構築されています。 WAI-ARIAに基づき、ARIA属性とイベントバインディングを利用し、ディテールを提供しています。すべてのコンポーネントはキーボードでの操作も可能です。 コンテンツあるいはインタラクションは、それを利用するためのベースラインを保証し、CSSやJavaScriptで拡張している箇所は必ずしもすべてのブラウザで同じように機能しません。しかし、それを利用することに問題はありません。 アクセシブルに実装されたコンポーネント 各ページでは実際のデモとコード、解説が掲載されています。
折り畳み UI のスクリーンリーダー対応 | Accessible & Usable
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
なぜ、VSCodeを使うのか？ - Qiita
Visual Studio Code Advent Calendar 2016：6日目 本記事は「Visual Studio Code Advent Calendar 2016」6日目の投稿です。 はじめに――開発環境の拠点としてのエディタ なぜわざわざ、「Visual Studio Code」（以下「VSCode」）を使う理由を考える記事を書いたのかと言いますと、「開発環境の拠点としてのエディタ」を通して見ることで、最近の開発環境の変化を鳥瞰的に捉えられると考えたからです。 もっと平易に日常の言葉でたとえるとこうです。新しい駅ができるときには、新しい住宅地や商業地ができていたりだとか、生活拠点ができるときには、たいていその背景に何らかに需要がありますよね。そこで、VSCodeが開発された背景は何でしょうか？ 簡単に一言でいうと、HTML5などを中心にした「Webアプリ」（もしくは「ハイブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frend — Accordion