リリースから5年、Webフロントエンドの経年劣化と向き合う
@herablog さん、@shunke07 さんと共に Muddy Web #3 で発表した資料です。 https://cyberagent.connpass.com/event/261115/ news.ameba.jpは5年前にデスクトップ版ではReact化、モバイル版ではAMP化が行われました。当時は最先端の技術でしたが時が経つにつれて技術的なトレンドも変化しています。TypeScriptやTanStack、Core Web Vitalsの登場によりWebフロントエンドの技術構成は日々進化しています。 時代の流れに合わせてAmebaNewsでは、脱AMP、脱SPAやTypeScript化などを行いましたので紹介いたします。
Google Spreadsheet を簡易 Webサーバーとして動かして、手軽にWebHookを受け取る方法 - Qiita
Google Spreadsheet を簡易 Webサーバーとして動かして、手軽にWebHookを受け取る方法GoogleAppsScriptWebhook 外部のサービスからの通知を WebHookで受け取ってちょっとした処理をしたいことってたまにありませんか？ たとえば、アプリのクラッシュログを解析するFabricの Crashlytics には、新しいクラッシュが発生したり特定の閾値を超えると WebHookで通知してくれる、つまり特定の URL にPOSTを発行してくれる機能があります。 これを上手く使うと、下の図のように「新しいクラッシュが発生したら Backlogなどのチケット管理サービスに自動登録」といったことができそうです。 もちろんCrashlyticsから BacklogのAPIは直接叩けないので、このように WebHookを使ってこちらのサーバを叩いてもらい、そのサー
スマホのブログ表示速度が遅すぎたので対策をした
表示速度を気にするならば、注意が必要です。 私のようになりますよ。 PageSpeed Insightsとは？ブログの読み込み速度を調べてくれる！ PageSpeed Insightsをご存知でしょうか？ Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します。URL を 2 回（モバイル ユーザー エージェントと PC ユーザー エージェントで 1 回ずつ）取得します。 PageSpeed のスコアの範囲は 0～100 ポイントです。スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します。なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります。 引用元: PageSpeed Insights について |
xerox←ヤバイ？
増田が十数年前にPCを使いはじめ、インターネットに興味をもって 国内外の健全なものからアダルトなネット界隈を様々探索していた。 思春期も相まって なんと男の夢にあふれた世界があるのかと、インターネットの世界の広さに感動していた。 夢にあふれた世界を満喫していると ふとバックグラウンドにxerox.exeなるものが動いていた。 説明しておくと、昔の富士ゼロックスのプリンタープログラムである。 プリンターのプログラムなので、何ら問題はないのだけれども 当時の増田は焦るに焦った。 xエロx.exeと見えて直球なエロいプログラムが動いていると思ってたのである。 当時はまだ、ワンクリック詐欺のようなものが多くなかったのだが ・変なサイトに接続されてしまう！ ・高額なサイト登録され勝手にお金がとられてしまう！ ・家族共用のパソコンだったので、親にエッチなサイト見てるのがばれたらまずい！ と半泣きになり
「この一冊で全部わかるWeb技術の基本」の監修をしました - プログラマでありたい
Facebook, Twitter等で軽く報告しておりましたが、イラスト図解式 この一冊で全部わかるWeb技術の基本の監修をしました。執筆したのは、所属するNRIネットコムの同僚2人です。どちらも、大学時代しっかり情報工学を学んで、入社してからはインフラ寄りの仕事をしている人間です。Webの仕組みを説明するにはピッタリな人間によって書かれています。 イラスト図解式 この一冊で全部わかるWeb技術の基本 作者: 小林恭平,坂本陽,佐々木拓郎出版社/メーカー: SBクリエイティブ発売日: 2017/03/16メディア: 単行本この商品を含むブログを見る 対象読者は？ 入門書なので、これからITエンジニアを目指す人や、なりたての人、或いはIT業界に入ったのでWebとはなんぞやと知りたい営業・企画の人など、非エンジニアでも読めるように意識して書かれています。そもそもWebと一口に言っても、現在では
esa.io クライアントを kotori から Quail に乗り換えた - scramble cadenza
イントロ 職業柄、自分のフィーリングとマッチしているというのもあるのだと思うけど、esa.io を一年運用していて全く困らないし、本当に助かってる。 しかし一点だけ、esa.io というより、OSX の esa.io クライアントに不満があった。 それは kotori というクライアントを使っていたのだけど、「リンクをクリックするとクライアント内で画面遷移し、二度と戻れない」という凶悪な仕様だ。 kotori で書いた記事の中でリンクをクリックするの図はこちらです。 これが超辛い。 esa.io では Qiita みたいなリアルタイムプレビュー機能がついていて、右側で markdown の変換結果が見れる。 ところが記事書いている途中にうっかりリンクをクリックしたらもうゲームオーバーで、編集画面には二度と戻れない。 じゃあどうするかというと kotori を強制終了してやり直すしかない。
LINE DEVELOPER DAY 2016 開催のお知らせ « LINE Engineers' Blog
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog saegusa2017-04-16Yoshihiro was a network engineer at LINE, responsible for all levels of LINE's infrastructure. Since being named Infra Platform Department manager, he is finding ways to apply LINE's technology and business goals to the platform. こんにちは。LINEでネットワークやデータセンターを担当している三枝です。2017年1月にJANOG39で登壇する機会を頂きましたので、今回
Chrome で今見ている Web サイトでどのような技術が使われているのかを調べる拡張機能 BuiltWith Technology Profiler
Web 開発者の方であれば今開いている Web ページにどのような技術が利用されているのか気になる事がありますよね。ソースを表示したり Developer Tools を起動したりして調べるのも良いですがさくっと確認するだけであれば BuiltWith Technology Profiler という拡張機能を利用するのが便利です。 この拡張機能を入れるとメニューバー上にアイコンが表示されるので、調べたい Web ページを開いてアイコンをクリックするだけです。 例えばこのブログだと上記のような感じに表示されます。 かなーり縦に長いので文字で書きますが以下のような情報を取得しています。 Web サーバの種類, バージョン ネームサーバ ホスティングしているサーバ CMS の種類, バージョン 使用しているフレームワーク 広告の種類 ユーザ統計情報(Google Analytics 等) Jav
サイトの高速化を難しく考える前に – cat /dev/random > /dev/null &
ここ最近いくつかのサイトを見ていて、アレ？妙に重くない？とDevTools等を見てみたらいろいろな問題点を見つけました。 例えばベースページが重いというのもあるのですが、単純にリソースが大きすぎる、ヘッダがおかしい等少しの工夫で閲覧をする人たちは快適になるだろうというのを思いました。 正直なところ今回記述する内容はいろんなサイトや書籍では触れられてはいるのですが、サイトを見回って共通で考慮が漏れていて、余りサイトに変更を加えずに効果がでそうなのを纏めてみました。 そのページを見るのにどれだけのダウンロードが必要ですか？ 最近はPC環境もモバイル環境もより強力になり、リッチなコンテンツをストレスなく見ることが可能になりました。 マシンスペックやブラウザの高速化等いろいろありますが、ラストワンマイルのNW帯域が改善したのが大きいと個人的には感じています。 しかし、それに甘えて不必要なリソースを
Webアプリケーション負荷試験実践入門
2015年2月24日 ヒカ☆ラボ発表資料 Webアプリケーション負荷試験実践入門 ■スライドの目的 負荷試験の重要性を認識して頂く 意味のある負荷試験を最短距離で行うための“段取り”を持ち帰って頂く 内容的には、主にAWS上のLAMP構成のシステムに対する負荷試験ですが、負荷試験ツールに依存しない全般的に通用する話を扱っています。Read less
pelletkachels | blog over bedrijven en feitjes en de pelletkachel
Welkom bij Pelletkachels.nl, jouw ultieme bron voor alles wat met pelletkachels te maken heeft! Maar we zijn meer dan alleen een platform voor het bespreken van warmtebronnen. Bij Pelletkachels.nl geloven we dat het delen van kennis en ervaringen over bedrijven en gebeurtenissen ook essentieel is voor het creëren van een betrokken en geïnformeerde gemeenschap. In dit blog duiken we dieper in de we
jagrid - Excel方眼紙をWeb上に再現！ MOONGIFT
これは凄いかも知れない…。 最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。 日本の業務システムと言えばExcel方眼紙がデフォルトです（断定）。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの使い方 こんにちは、Excel方眼紙！ うん、まさにExcel方眼紙です。 表はまさにお手の物。 セル3つ分、といった指定も簡単にできます（data-widthで指定）。 従来のWebコンポーネントと合わせることもできます。ちゃんと文字の頭が合っているのに注目。 こんな緻密な画面も簡単に設計できます。 Webデザインにおいてこれほど緻密な画面を設計しようと思うと、かなり苦労するはずです。しかしja
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iftttでtwitterのつぶやきをgoogle+へ連携させる方法 * prasm（プラズム）