2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘
この文章は https://github.com/r7kamura/keyworks/ の製作記である。Keyworksはキーボードショートカットをカスタマイズするための凡庸なブラウザ拡張であり、つい先日、思いつきによりつくられた。 いま見ているページをTwitterで共有するとき、あるいはMarkdownで書いた文書にページのリンクを載せるとき、皆どのようなツールを利用しているのだろう。この話題を出すと、それ専用のChrome拡張や、秘蔵のブックマークレット、VimやEmacs風のキーバインドを実現するツールのプラグインなど、みな懐から様々なツールを取り出して楽しませてくれる。自分はというと、これまでKeyconfigというChrome拡張を使っていた。 Keyconfig - Chromeウェブストア https://github.com/os0x/ChromeKeyconfig Ke
ニコニコ大百科のネタバレ防止反転を解除するブックマークレットをちょっとだけ変えてみた
概要!!! iPhoneでニコニコ大百科を見てるとネタバレ防止反転を読むことが出来ないという悲しい事態がある。 それを回避する方法を今日たまたま見かけたので、実践してみた。 詳細ッ！！！ 元ネタはこちら ニコニコ大百科のネタバレ防止反転を解除するブックマークレット で、改造したコードはこちら。元ネタはPCサイトのノードをターゲットにしていたので、僕はモバイルサイトの方のノードをターゲットにした。後、無意味に無名関数で囲って謎の汚染保護。深い意味は無い。 javascript:(function(){ $(".article [style*='color: white'],.article [style*='color: #ffffff']").css("color",""); } )() 後は↑のコードをSafariやChromeのブックマークに設置するだけ。 Google Chromeの
モバイルブラウザで音が出ない時
超例外ﾊﾟﾃｨｰﾝ おっす、オラ開発狂。 今日も元気にデバッグしまくるぜ。 今日解決したのは超例外パターンだ。あまりにも例外的な状況だから誰の役に立つか分かんねーけど、多分誰かを救うことになると思うからここに書きなぐっておくぜ。 モバイル版Google Chrome(iOS)やAndroidのブラウザで音が鳴らない 最近、JavaScriptでvar sound = new Audio();sound.src='hoge.mp3';sound.play();みてーなコード書くんだけれど、音が鳴らない環境があってオラ超困ったんだぞ。 その環境は、Basic認証をかけてる環境だ。 おめえたちも騙されたと思ってBasic認証を書けたサーバにmp3ファイルを置いてモバイル版Google Chromeでアクセスしてみるんだ。 そもそも再生されなくて目の前が真っ白になるぞ。 こりゃ～つれ～な～、おらわ
iOS7にて、Mobile Safariのwindow.innerHeightを正しく取得する方法
久々のブログ どうも、お久しぶりです。最近、私生活やら公生活が忙しすぎてブログ書く暇がありませんでした。 今日、むちゃくちゃ感動した技術を見つけたので、それをメモ書きします。 iOS7のMobile Safari限定バグ iOS7のMobile Safariは、以前のMobile Safariと仕様が変わり、スクロールすると、上部のアドレスバーと下部の操作エリアが自動的に隠れる仕様になりました。 自動的に隠れたアドレスバーや操作エリアを再表示するためには、Mobile Safariの上部や下部を軽くタップして表示させるという動作が必要です。 今回問題となったのはこの再度アドレスバーと操作エリアを表示させた画面サイズでした。 よくあるコードですと、window.innerHeightで高さが取得出来るのですが、恐ろしいことに、この画面のサイズは、アドレスバー＋操作エリアの高さを計算に入れてい
popInの新サービス
popInの新サービスが開始されました 僕のアルバイト先であるpopInの新サービスがリリースされました。 普段はこういう記事は一切書かないのですが、今回作ったサービスは僕もすごく気に入っていて、たくさんの人に活用していただきたいなと思ったので、ブログを書くことにしました。 ただ、機能を紹介するだけですと面白くないので、ほんの少しだけ、popInと僕の歴史を交えながら読んでいただければ幸いです。 popInと僕以前から知っている方々は別として、僕はpopInという会社でアルバイトしています。 僕がpopInでアルバイトするようになったのが2008年からなので実に6年近くになります。 創業のかなり初期からこのすごい企業にコミット出来たのは運が良かったと言えます。当時の僕のスキルは今の１０分の１程度でした。Twitterだってろくに知らなかったのです。 そんなド素人の僕でしたが、素人と違う所が
スペースアルクで検索ボックスに自動フォーカスするのを防ぐvimperator plugin書いた
Vimperatorのプラグイン以前にある人が困っていたので、Vimperatorのプラグインを書いた。それをすげえ放置してたんだけれども、今更ながら思い出したので公開。 多分、色々間違っていると思う。 // License : Public Domain // Ver : 1.0 // Description : Disabling extra features for www.alc.co.jp. // Name : better alc (function () { function betterAlc(){ var q=content.document.getElementById("q"); q.blur(); } // Add Command commands.addUserCommand( ["better[alc]"], "Better alc", betterAlc );
ハタさんのブログ(復刻版) : SVG で横書きの文字のまま、タテに表示
前回の続きです 横書きに表示されている文字をタテに表示するというのを挑戦してます。 今回は SVG を利用しているので、ほぼ全てが座標で表現されます。 こんな感じ↓ ブラウザで座標を考える場合 (0, 0) が左上になり、それよりも外側はブラウザの表示の外になります。 そこで、「美しい日本語」という文字列を (0, 0) からレンダリングするとこんな感じになります。 単純に考えれば、この文字列を 90° 垂直に回転 させれば、タテに表示されそうですがそうもいきません。 文字列を (0, 0) にレンダリングしてしまったので、そのまま回転させてしまうと、画面の外に出てしまいます。 ちなみに、SVG の回転は transform(rotate) を使うんですが、rotateの引数に rotate(rangle, cx, cy) と X座標(cx) と Y座標(cy) の回転位置を
3時間で作ったあれなあれ
Let's note CF-SZ6にGoogle Play入りChromeOSをインストールする 先日、 魔が差して 、 Let's note CF-SZ6の中古 をポチってしまった。なんとなく ChromeOS に触りたくなり、中古のやっすいPCに入れたらええんちゃうんという心の声に逆らえなくなった。 で、一旦ChromeOS Flexを入れて使ってみたんだけれど、やっぱりGoogle Playのアプリが入れられないのはNG。 自分が欲しかったのは、Google Playが使えるChromeOSなんやという事で、 ネットのインストール記事 を探して、入れることにした。 ほぼ、そこの記事通りにインストールしているが、自分なりのアレンジも加えているので、参考にする人は参考にしていただきたい。 手順は下記の通り 軽量Linuxをダウンロードする 対応しているChromeOSのバージョンを調べ、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack4→webpack5をして、Module not found: Error: Can't resolveが出た場合、'html-loader'を削除しろ
application.cacheメモ
neo ondemand scrollbar作った