2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。
私たちはなぜ SPA で開発するのか / Why you choose SPA
2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
FRONTEND CONFERENCE 2019の登壇資料です。 https://2019.kfug.jp/session/onoueyosuke Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptは…
ITP2.1の影響と対策方法のまとめ、JavaScript生成cookie7日間問題 | marketechlabo
ITPの仕様 次々と新しいバージョンがリリースされるITP。微妙にアップデートされ、仕様がわかりにくくなっているので現時点で最新のものを解説する。 ITPの目的と概要 われわれウェブサイト運用者は cookieやローカルストレージなどを使ってブラウザにドメインのデータを保持し、 それらのデータを必要に応じてツール間で連携する ことによって行動計測やコンテンツの出し分けなどのマーケティング活動を行っている。ITPはウェブサイト訪問者のプライバシー保持のためにそれを制限する仕組みである。具体的に何をやっているのかざっくりまとめると、 この3つのケースにおいて cookieなどを使ったデータ保持が短期間しかできなくなる（期間の長さはケースごとそれぞれ異なる） リファラが使い物にならなくなる 可能性があるということである。その結果 コンバージョントラッキングができない リマーケティング広告が配信で
GraphQLでフロントエンドの複雑性とたたかう
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
現代フロントエンドに欠かせないwebpackとBabelを理解しよう
Transcript ݱϑϩϯτΤϯυʹ͔ܽͤͳ͍ XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP����� /BNF� ����4BLJUP�.VLBJ� 5XJUUFS ����!@@TBLJUP@@� $PNQBOZ� ����$ZCP[V�JOD� ����'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ෦࣮Λ͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ&$."4DSJQUͱ͍͏ݴޠ༷͕͋Δ� w͜ͷݴޠ༷ΛܾΊ͍ͯΔҕһձ͕5$�� 5FDIOJDBM�$PNNJUUFF��� � w&4��
npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita
npmとはNode.jsインストール時に付属するパッケージマネージャーで、Node.jsのパッケージの管理や実行を取り扱うものです。 npmのバージョン5.2.0で導入された「npx」を用いると、下記のようにローカルにインストールしたnpmパッケージを、npxコマンドだけで実行できるようになります。 npxはnpmにバンドルされているため、npxの個別インストールは不要です。 次のようにしてモジュールを実行できます。 従来のnpmの実行方法との比較 従来では、ローカルのnpmパッケージを使用するには、次のような方法が必要でした。 方法1: ./node_modules/.bin/(パッケージ名)で実行する 方法2: $(npm bin)/(パッケージ名)で実行する 方法3: package.jsonにnpm-scriptsを記述して実行する npxはいずれの方法よりも簡潔なコマンドで、パッ
自宅サーバのデスクトップへブラウザからアクセスできるように「noVNC」を設える - Qiita
主な目的としては、以下のようで、 自宅の無線 LAN ルータの設定を、外からイジりたい Dropbox や ownCloud のクライアントのように、サーバ上で動いてはいるけれど GUI の方が操作しやすいアプリへ、外からアクセスしたい（SSH だとしんどい） スマホから自宅のブラウザへアクセスして艦これの遠征を出s（以下自粛） その際の要件なんですが、 経路を暗号化したいが、都度 SSH 等でトンネルするのは面倒だ VNC クライアントをクライアントごとに用意するのも面倒だ ブラウザだけで何とかならない？ HTTPS のサーバ証明書ならば、安かったので入れてあるんだけれど といったところです。 ガラケーのカバー率が気になるとか、Extended Validation 証明書でなければ、というのでないかぎり、サーバ証明書なんて年で 1,000 円くらいですので皆さんもぜひ。あれ？ name
これもまたHTML5の面白さ。WebブラウザでVNC·noVNC MOONGIFT
noVNCはHTML5/Canvas/WebSocketを利用したWebブラウザで使えるVNCクライアント。 noVNCはHTML5/Python製のオープンソース・ソフトウェア。複数台のPCを使いこなす時に、モニタまで台数分あると邪魔になってしまう。そこでよく使われているのがリモートコントロールだ。有名なものとしてはVNCが知られている。 外部からアクセス VNCクライアントは既に多数あるが、コンピュータに不慣れな人が簡単に使えるというのはあまり多くないように感じられる。そこで試してみたいのがWebブラウザから使えるVNCクライアント、noVNCだ。 noVNCはHTML5を使って作られているソフトウェアで、WebブラウザからWebSocketを使ってPython製のプロキシに接続し、そのプロキシがWebSocketとVNCプロトコルの橋渡しをするようになっている。VNCサーバによっては
noVNC
noVNC, the open-source VNC browser client - noVNC is a VNC client JavaScript library as well as an application built on top of that library. noVNC runs well in any modern browser, including mobile browsers (iOS and Android). HTML5 WebSockets and Canvas Try it! An online version of the noVNC client is available HERE. Check out these videos and screenshots for examples of how noVNC looks. Community
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
交差オブザーバー API - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback 交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。 従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり
Intersection Observer が良さそうなので試してみた - Qiita
個人的に辛いと思っていたこと レスポンシブ時で要素のスクロール位置がレイアウトによって変化する場合（SPだとレイアウトが縦長になるため） 感覚的に書けないつらさ １回のみの動作させるときはflag処理が必須（スクロールさせてfalseにしてfalse時は動作させないなど） スクロールイベントの発生は断続的なのでブラウザでの負荷がヤバい。 setTimeoutとかrequestAnimationFrameとかで軽減させる方法は一応ある ⇛ (関連記事) lazyloadなどの遅延読み込みをネイティブで分かりやすく出来ないか。 Intersection Observer という技術について こちらの記事で「Intersection Observer」というAPIを要素の遅延読み込みに利用していると知り、なんとなく調べてみることにした。 概要 Intersection（交点）Observer（監
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prototype Pollution in Kibana
非同期処理の歴史から見たコンピューティングの進化
JS Bin
GitHub - novnc/noVNC: VNC client web application
Nondestructive_TypeScript.md
nexeでNode.jsのアプリをパッケージングしてみた - Qiita
GitHub - nexe/nexe: 🎉 create a single executable out of your node.js apps
