detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
`content-visiblity` Without Jittery Scrollbars - Infrequently Noted
Alex Russell on browsers, standards, and the process of progress. Update: After further investigation, an even better solution has presented itself, which is documented in the next post. The new content-visibility CSS property finally allows browsers to intelligently decide to defer layout and rendering work for content that isn't on-screen. For pages with large DOMs, this can be transformative. I
Trusted Typesを利用してJavaScriptからのDOM操作をセキュアに行う
ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。 こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。 Trusted Types HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう： const { username, email } = await api.getU
How Web Content Can Affect Power Usage
Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, we’ll talk about factors that affect battery life, and how you, as a web developer, can make your pages more power efficient so that users can spend more time engaged with your content. What Draws Po
JavaScript Package Manager 2019
Node学園で発表した JavaScript Package Manager の話です。
「1⇒100」のために「0⇒1」を考える
フロントエンド - Speaker Deck
All slide content and descriptions are owned by their creators.
Vue.jsの今後と次世代Web開発について
MANABIYA 2018-03-24 (sat) Webセッション ３時限目の発表内容 https://manabiya.tech
今後のフロントエンドについて(仮)
bonfire frontendで発表した今後のフロントエンドの話です。
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
WeAreJavaScripters@15th https://wajs.connpass.com/event/76238/
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
フロントエンドに秩序は戻ったか？
Kyoto.js 12発表スライドです。 https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。
Reactがなぜ素晴らしいのか
詳しくはこちらへ → https://www.facebook.com/groups/toretatech/
JavaScriptのテンプレートJsRenderとJsViewsの紹介 - Qiita
かって、JavaScriptのテンプレートとしてjquery.tmpl.jsが存在した。 jQuery公式サイトにものっていたが、現在はメンテナンスされておらず、公式から削除された。 https://github.com/BorisMoore/jquery-tmpl しかしながら、同じ作者のJsRender、JsViewsといわれるライブラリが後継として存在している。 このドキュメントでは JsRender, JsViewsについての解説を行う。 http://www.jsviews.com/ JsRenderはDOMやjQueryの依存関係なしで、軽量でありながら強力で拡張可能なテンプレートエンジンである。 JsRenderは以下からダウンロードすることが可能だ。 http://www.jsviews.com/#download 実装のサンプルとJsRenderの機能 JsRenderを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実践ES Modules
JavaScriptのE2Eフレームワークを触ってみる
フロントエンド・バリデーション
Universal JavaScript
Reactで学ぶ！いまどきのWeb開発
Vue.js 2.0 Server Side Rendering
React エンジニアのための React Native 入門