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時間で作ったあれなあれ
翼の騎士正体考察 最新刊の宣伝 先日、 最新18巻が発売された 。七ツ星 魔人 ヴァンデル も残るは、ノア、ベルトーゼ、ロディーナと3体まで減り物語も佳境に入ったと言える。今巻は、新生ビィト戦士団の結成と魔人博士ノアとの邂逅までが描かれているのだが、いやあ、そう来たかぁという落ちで、何も情報無しで読むとめっちゃビックリすると思う。 最新刊読んでいない人は今すぐ購入して読もう。 翼の騎士について 翼の騎士の初登場は（恐らく）7巻P94。シルエットのみの登場。本格的な登場は9巻のP31以降。 本格登場から、ゼノン戦士団の才牙を十分以上に使いこなしていて、正体は一体誰なのだろうと考えさせられるキャラだ。 翼の騎士は ゼノン戦士団を良く知っている ゼノン戦士団の才牙を使いこなせる 武器としてミニガンを持っている（9巻P82） 武器として長剣（？）を持っている（12巻P115） 長剣と天力を使って弓
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack4→webpack5をして、Module not found: Error: Can't resolveが出た場合、'html-loader'を削除しろ
application.cacheメモ
neo ondemand scrollbar作った