WebComponents.kyoto Meetup #2 での発表資料です。 https://wc-kyoto.connpass.com/event/78690/
Web Components で 社内 UI ライブラリを作っている 話
WebComponents.kyoto Meetup #2 での発表資料です。 https://wc-kyoto.connpass.com/event/78690/
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers
Shadow DOM v1 - 自己完結型のウェブ コンポーネント コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 まとめ Shadow DOM は、ウェブアプリ構築の脆弱さを解消します。脆弱な原因は、HTML、CSS、JS がグローバルであるという性質にあります。Google は長年にわたり、この問題を回避するために膨大な数のtoolsを考案してきました。たとえば、新しい HTML の ID またはクラスを使用すると、ページで使用されている既存の名前と競合するかどうかわかりません。微妙なバグが発生して、CSS の特異性が大きな問題になり（すべて !important）、スタイル セレクタが制御不能になり、パフォーマンスが低下する可能性があります。他にもたくさんあります。 Shadow DOM は、CSS と DOM を修正します。ウェブ プラットフォーム
Web Components を本番投入する（2018年春）
2018.02.16Web Components を本番投入する（2018年春）とあるプロジェクトの技術監修をして、大まかに Web Components + Payment Request API な構成で進めてみたのでその話を思い出しながら書く。ちなみに FRESH! ではないです。 決済基盤をサービスで使うための SDKPayment Request API でお察しの通り、新たな決済基盤のプロジェクトで、それを使うための SDK を読み込んでボタンを配置すれば決済できる…みたいなものを作った。Payment Request API は、対応している環境ではそれで、対応していない環境では旧来の通り決済代行業者が用意しているフォーム付きページへ遷移させるという形でビジネスサイドへ提案した。 技術面に関しても、FRESH! で導入済みだったこともあり、いざとなればサポートできるという意味
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
History API — Warpspire Experiments
Infinite Scroll + HTML5 History API Note: This is broken right now, as I need to update it to use the new Twitter APIs. Yay security! This example shows the power of the History API when combined with infinite scroll. Fluid user experience and hard linking all in one. Scroll down, click a link & press the back button, refresh the page — it all just works (well, mostly — still needs some polish).
10 Best jQuery and HTML5 WYSIWYG Plugins — SitePoint
HTML5 WYSIWYG (What You See Is What You Get) editors are always high in demand. But there are now so many of them around that it’s hard to find the best ones. In this post, I’m going to present some of the best jQuery and HTML5 WYSIWYG plugins, saving you time finding the plugin that fits your needs. Froala Froala WYSIWYG HTML Editor is easy to integrate and to use. It requires minimal coding know
wysihtml5 - A better approach to rich text editing
<h1>WYSIHTML5 - A better approach to rich text editing</h1> <p>wysihtml5 is an <span class="wysiwyg-color-green"><a href="https://github.com/xing/wysihtml5">open source</a></span> rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inlin
Prism
Dead simple Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done! Intuitive Language classes are inherited so you can only define the language once for multiple code snippets. Light as a feather The core is 2KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB. Blazing fast Supports parallelism with Web Workers, if available. Extensible Define
HTML5 Forms: JavaScript and the Constraint Validation API — SitePoint
May 23, 2014HTML5 Forms: JavaScript and the Constraint Validation API For the final article in this three-part series about HTML5 web forms we’ll discuss JavaScript integration and the Constraint Validation API. If you’ve not done so already, please read The Markup and CSS articles to ensure you’re familiar with the concepts. HTML5 allows us to implement client-side form validation without any Jav
wavesurfer.js - HTML5で音楽の波形を表示 MOONGIFT
Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave
Animatr
Animatr is a jQuery plugin that allows you to create CSS3 animations using only HTML5 data-attributes. Lay out your animation steps by time (in seconds), percentages, or both. No more @keyframes or browser prefixing Run multiple animations simultaneously in one element Animatr's data-attributes style, and name, are inspired by the wonderful Skrollr. It requires jQuery-Keyframes and PrefixFree. The
Webix: JavaScript UI Library; HTML5 JS framework, 102 UI Web Widgets
JavaScript Desktop serves as remote desktop in a familiar format for Webix and non-Webix widgets and apps that are used daily. 7 high-contrast available skins fully customizable taskbar smart configuration of app shortcuts minimize, expand, stretch, close apps' windows Learn more To Do List is a tool for managing projects and resources, assigning tasks, and keeping track of their implementation. q
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート 白石 俊平（HTML5 Experts.jp編集長） この記事は、「Frontrend Conference The Final」の基調講演「Pragmatic Front-end Developer: From Artisan to Expert」についてのレポートです。 登壇されていたのはリッチメディアの斉藤祐也さん。HTML5 Experts.jpでも、No.10のエキスパートとして何度もご執筆いただいているので、ご存じの方も多いかと思います。 この講演タイトルは、アンドリュー・ハント氏の著作「The Pragmatic Programmer」をオマージュしたとのこと。「Pragmatic」というのは「実践的」という意味の単語で、フロント
Webshim
Important note: Webshim is not compatible with upcoming jQuery 3.x and I do not plan to work on a new major version. I will still fix critical bugs in the future though. Webshim is a polyfill library that enables you to reliably use HTML5 features across browsers, even if native support is lacking. The project is hosted on GitHub, and is available for use under the MIT software license. You can re
モバイル時代のWebパフォーマンス
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。Read less
Component Kitchen - Web Component Experts
Web component experts Web components let you extend HTML with new capabilities. Component Kitchen are experts on this transformational technology. We design, develop, and customize web components so you can accelerate your work and improve your user experience. Elix is our open source collection of common user interface patterns like lists, menus, popups, and carousels.
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
CustomElements.io - Building the Future of the Web, One Custom Element at a Time