JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
差分検出アルゴリズム三種盛り - Object.create(null)
こんばんは. 気がつけばもうずいぶんと涼しくなってきました. 勢い余って凍ってしまったりせぬよう, くれぐれも普段の言動にはお気をつけください. はじめに さて, 我々人類にはどうしても二つの文字列 (あるいは行ごとに区切られたテキスト) 間の差分を求めなければいけない瞬間が発生します. 先人たちはそういった時のために diff のようなツールを開発し, それを利用することで文明はめざましい発展を遂げてきました. しかしながら, 使用するアルゴリズムを比較検討したい場合, 「差分」の定義を変えるなどして既存のアルゴリズムに変更を加えたい場合, diff のない異世界に飛ばされて自分で実装しなければいけない時などにおいては, 差分検出アルゴリズムについての理解が必要不可欠です. というわけで, この記事では文字列間の差分検出とは何かということと, 差分を求める三種類のアルゴリズムの紹介・解説
Electron、React Native、Cordova…Web技術でネイティブアプリ開発する方法を、アシアル田中さんに聞いた
Electron、React Native、Cordova…Web技術でネイティブアプリ開発する方法を、アシアル田中さんに聞いた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、アシアル株式会社 代表取締役社長の田中正裕さんです。 田中さんのセッションは「Web技術でネイティブアプリを開発する話」（ホール 14:20-15:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあって
上の階の人の騒音をAmazon Dash ButtonとGoogle Sheetsで記録する - Qiita
かくかくしかじか 賃貸マンションの上の階の人がうるさい。 野球の硬式ボールを落としたような「ドン」、「ゴン」という音が朝と夜に聞こえてくる。上の階の人は野球選手？ 管理会社に相談すると、記録をとって欲しいとのこと。 目的 ということで、上の階の人の騒音をなんとかしたい。 というか、管理会社になんとかして欲しい。 管理会社に連絡したところ、「騒音の日時を記録してもらえますか？」と言われた。 なんとなく「はいはい、とりあえず記録してください。話はそれからです。」的な雰囲気を感じたので、「どうですか、見てくださいよこの状況。」と自信を持って伝えたい。 記録する情報 時刻 回数(断続的に騒音が続く場合があるので、その回数) まずは紙とペンで 手っ取り早く、紙とペンで時刻と回数を記録。 こんな感じ。「ドン」は音の感じ。お察しください。 集計して報告 紙に記載された記録をExcelに転記し、グラフ付き
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソース
面倒な環境構築なし！初心者もすぐにプログラミングできるサイト9選 -
Photo by IDM Südtirol - Alto Adige : ICT & Automation こんにちは。谷口です。 プログラミングの勉強や趣味の開発、また仕事でも「ちょっとコードを書いて試したい」ということってよくありますよね。 もちろん、その言語の実行環境を設定済みのPCが手元にあればよいのですが、いざ環境設定をするとなると時間がかかる言語も多いので、プログラミング初心者の方や「ちょっと確認したい・試したい」といった場合、意外とハードルが高いかと思います。 また、「出先だけどコードを書きたい」「グループでプログラミングを学習したい」といった場面もあるでしょう。 そんな時に便利で役立つのが、インターネットさえできればブラウザ上でプログラミングができる「オンライン実行環境サービス」です。 今はオンライン実行環境がかなり増えてきましたので、今回は 会員登録などが不要 無料 で、
攻撃者視点で見る Service Worker / PWA Study SW
PWA Study( https://web-study.connpass.com/event/65267/ ) で発表した資料です。
Dropboxも採用！JSだけでPDFをレンダリングできるPDF.jsにしびれた！
WebアプリでPDFを扱うときって、どうしています？ 一昔前ならサーバーサイドで生成してAdobe Readerで表示させるぐらいでしたが、いまならJavaScriptだけで描画も制御できちゃうんですね。 本記事はJani Hartikainen、Florian Rappl、Jezen Thomas、Jeff Smithが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 現在のブラウザーはほぼすべて、WebサイトでのPDF文書を閲覧できる機能を最初からサポートしています。しかし、開発者はこのもともと備わっている機能を制御できません。たとえば、Webアプリ側のルールでPrintボタンを無効にしたい場合、有料会員への移行ページだけをレンダリングしない場合などを考えてみます。embedタグを使えばブラウザーにもともと備わ
Webアプリ、ゲーム、IoTまで！ブラウザだけでJavaScript開発環境が構築できるWebサービスまとめ -
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザだけで本格的なWebアプリの開発から、ゲーム、IoTまで幅広くトライできる無料のWebサービスを厳選してみました！ それぞれの用途に特化したWebエディタをピックアップし、その特徴や機能などを解説しているのでご興味ある方はぜひ参考にしてみてください！ ■React & Angular開発に特化したWebエディタ「StackBlitz」！ 【 StackBlitz 】 JavaScript開発でのフレームワークと言えば「React」「Angular」が有名ですが、いざ開発を始めようとするとサーバーの準備や関連パッケージの導入など…環境の構築が面倒だったりします。 ところが、この「StackBlitz」はクリック1発で「React」「Angular」の開発環境が整った状態のWebエディタが即座に起動します！ コードエディタとしても優
[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js
画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb）スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他のファイルには一切依存しません。 レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。 HTMLは非常にシンプルな構造です。 CSSトランジションで動作します。 シンプルなイベントAPIを備えています。 Macy.jsのデモ 実際の動作は、デモページで楽しめます。 動作は非常に軽快で、快適です。
![[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4215e0c2d56437668b0e944846344e0e97841024/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017081801-01.png)
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート Special Sponsor slot is now vacant - Inquire now 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
はじめに — Vue.js
最終更新日: 2020年11月7日 Vue.js とは？Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 あなたが Vue についてもっと深く学ぶ前に概要を知りたいのなら、中核となる原則とサンプルプロジェクトを元に説明するビデオを作成しているので、それを見るとよいでしょう。 あなたが経験豊富なフロントエ
実況中継シリーズ - 複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ - Re.Ra.Ku tech blog
先日行われた builderscon tokyo 2017 にて、「複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ」という発表をしてきました。この記事では、そのプレゼンテーションの再現を行います。 アバンパート 本日はこういう発表をします。よろしくおねがいします。 普段はメディロムという会社で働いていて、ScalaとJSを主軸に活動しています。PerlとRubyもたしなむ程度には書きます。業務では、業務で使うアプリケーションをブラウザプラットフォーム上に作っています。こういうブログも書いてるんでよかったら読んでください。 あと、何度かweb+DBプレスに特集書かせてもらっていて、とくに左の「データ構造の基礎知識」ってやつは自分で言うけどまじでいい記事なんでまだ読んでないひとはバックナンバー買って読んでください。 さて、複雑なアプリケーションに立ち向かうためのアー
Debugging Service Workers
Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS. Codelab tools on GitHubnorth_east ݪ�
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mov-love.blogspot.com: JAVASCRIPT | IP Addressから地域判定
くそったれJavaScript - Qiita
