Flicking is fully written in Typescript, and every classes, properties, and events are correctly typed and exported.
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/element-focus-vs-aria-activedescendant. We hope to fix this soon!). When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/keyboard-focusable-elements. We hope to fix this soon!). If you create JavaScript widgets, one of the key parts to accessibility is managing focus. To manage focus, you need to find keyboard-focusable elements. When you know t
NoJS Side-by-Side A simple bookmarklet that displays the current URL with and without JavaScript side by side in the current window. Bookmarklet To install the bookmarklet either: Drag the link below into your bookmarks bar. NoJS Side-by-Side Copy and paste the code below into a bookmark. javascript:!function(){var e=document.createElement("style");e.innerHTML="\n .side-by-side{\n position:absolut
If you’re interested in translating or adapting this post, please contact us first. Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Most of th
Updated 2014.10.15 / Published 2014.03.04 ホイール系のイベントは各ブラウザの実装がバラバラでクロスブラウザ対策に苦労するイベントのひとつとして知られているでしょうが、Document Object Model Level 3 Eventsにより標準化されたwheelイベントが多くのブラウザで実装されてきています。本エントリーでは現状のホイール操作時の各イベントについて、クロスブラウザでフォールバックしながら用いる方法を解説していきます。 ホイール系イベント比較 DOMMouseScroll, MozMousePixelScroll DOMMouseScrollイベントとMozMousePixelScrollイベントはどちらもGecko 固有のため、現存ではFirefoxしかサポートしていないイベントです。DOMMouseScrollはスクロールする
こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我
Pointing at things on the web used to be simple. You had a mouse, you moved it around, sometimes you pushed buttons, and that was it. Everything that wasn’t a mouse was emulated as one, and developers knew exactly what to count on. Simple doesn’t necessarily mean good, though. Over time, it became increasingly important that not everything was (or pretended to be) a mouse: you could have pressure-
この記事は古くなっています。こちらを参照して下さい。 これまでマウスイベントの扱いは、以下のような記述方法でした。 var elem = document.getElementById("hoge"); if ( elem.addEventListener ) { // IE9以上/Firefox/Chrome elem.addEventListener("mousedown", fn); } else { // IE8以下向け下位互換対策 elem.attachEvent("onmousedown", fn); } } 上記はマウスが存在するという前提で成立していたもので、今後はマルチデバイス対応が求められる時代になります。 今のところはデスクトップ型向けとスマートデバイス型とでは、ユーザエージェントを使ってビューを切り替えるという方法が主流のようです。しかし今後は、Windows 8的
UAが各イベントに対応しているかどうか var _ua = (function(){ return { Touch:typeof document.ontouchstart != "undefined", Pointer:window.navigator.pointerEnabled, MSPoniter:window.navigator.msPointerEnabled } })(); UAがタッチイベントをサポートしているかどうかはdocument.ontouchstartがundefinedを返さないことを条件にし、ポインタイベントをサポートしているかどうかは、navigator.pointerEnabled(windowオブジェクトは省略可)を用います。なおIE10は先攻実装のため、ベンダー識別子を用いる必要があります。 対応するイベント名を割り当てる 先の比較表に応じて、必要なイ
The CSS box model is rather complicated, particularly when it comes to scrolling content. While the browser uses the values from your CSS to draw boxes, determining all the dimensions using JS is not straight-forward if you only have the CSS. That's why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth and scrollHeight. Thes
CSS is the foundation of the contemporary web. It provides the formatting and layout directives that give web pages their distinctive appearance and feel. Nevertheless, traditional CSS has limitations. Media queries, for instance, enable you to modify styles according to the dimensions of the viewport, but they do not consider the size or context of specific page elements. This can lead to inconsi
Dropping the trusted workhorse from our front-end back in 2014 has led to a faster, leaner platform March 1st 2016 I joined Colony back in Summer 2014. Six months into the job, we came to a point in our product development requiring the addition of several large features, and the rethinking of some key pieces of our platform design. Faced by the decision of hacking on top of the code I had inherit
「Node.js で絵文字を使う時の注意点 - Qiita」にコメントしたのですが、大雑把すぎて説明になっていない気がするので、詳細に解説したいと思います。 TL;DR 絵文字のようなサロゲートペアを含む文字列をJavaScriptで扱おうとすると面倒。 ↑ s.length、s[0] とか s.split('') とかがおかしくなる。 1文字ずつに分割したいときは Array.from が使える。 なぜなら、Array.from は内部的に for of 文のようなことをしていて、文字列に対する for of はサロゲートペアを考慮するから。 問題点と解決まで 絵文字を含む文字、つまりUTF-16のサロゲートペアを含むような文字を一文字ずつに分割したい場合、JavaScriptでは問題が生じます。つまり、どういうことかというと、 const kira = 'キラッ🌠' // 見ため上は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く