セキュリティ対策としての Cache-Control ヘッダについて - 理系学生日記
今日はブラウザのキャッシュ制御の話。キャッシュについては主に性能面で語られて、情報漏洩に繋がる重要な制御であることは見逃されがちです。 CDN切り替え作業における、Web版メルカリの個人情報流出の原因につきまして | メルカリエンジニアリング 情報漏洩自体はよくないことで、被害にあってしまった人はそんなこと言ってられないけれど、その原因を包みかくさず公開することで他山の石というか、間違いなく日本のセキュリティ意識は向上すると思います。 ぼく自身も、みなさんも、そろそろ Cache-Control: no-cache, no-store, must-revalidate しとけば良いんやろ、というゴミのような意識を改善しなければならないということで、ここにキャッシュについてまとめてみます。 Cache の種類 ブラウザで関連するキャッシュには主に 2 つほどあります。 private cac
Microsoft EdgeのChromium移行とか - fragmentary
週明けに出回った、Microsoft EdgeがChromiumベースになるという話について、Microsoftからアナウンスがあった。 Microsoft Edge: Making the web better through more open source collaboration - Windows Experience Blog For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re announcing that we intend to ado
Google Developers Japan: AMP の新機能、2018 年第 4 四半期
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog
Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。 このタイトルが言いたくて Micro Frontends の記事を書きました。皆さんは Micro Frontends という言葉を聞いたことがあるでしょうか? 私は数ヶ月前まで全く知りませんでした。メルカリのフロントエンドチームにて Micro Frontends に関して考える機会があったので、Micro Frontends とはなんなのか。何をどのように解決しようとしているのかという内容を紹介します。 Micro Frontends とは Micro Frontends という考え方は ThoughtWorks Technology Radar にて2016年に初めて登場したと言われています。日本語で言うときは複数形は無視して "マイクロフロントエン
Microsoft Edge: Making the web better through more open source collaboration - Windows Experience BlogWindows Experience Blog
For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re announcing that we intend to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the w
JavaScriptでテキストの幅を取得する方法 - Qiita
const span = document.createElement('span'); span.style.position = 'absolute'; span.style.top = '-9999px'; span.style.fontSize = '13px'; span.style.fontFamily = 'Segoe UI'; span.textContent = 'あいうえお'; // 一旦 DOM Tree に append しないといけない document.body.appendChild(span); console.log(span.clientWidth); // 幅を取得したら remove document.body.removeChild(span);
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
Web APIにはJSONベースのフォーマットを使おう - Qiita
{ "response": { "id": 3342124, "message": "Hi!", "user": { "id": 3456, "name": "Taro Yamada", "image_url": "/images/taro.png" } } } など、どの構造がいいでしょうか？ もっと違う構造も考えられます。 JSONはシンプルですが、構造に制約がなさすぎます。適切な設計を行うには適切な制約が必要です。 そこで、plain JSONに少し制約を加えたJSONベースのフォーマットを使うことをおすすめします。 もしあなたが、JSONレスポンスをどのようなフォーマットにするかをチームで議論したことがあるなら、JSON APIは『自転車置き場の議論』に対抗する武器となる。 共有された規約に従うことで、生産性が向上し、汎用的なツールを利用でき、アプリケーションという重要なものに集中
モダンフロントエンドの進む道 - Qiita
まえがき 本記事は進化を続けるフロントエンド界隈の思想を大まかに紹介するものです。 「自分で問題を作って自分で解決する自作自演を繰り返している」というような批判をたまにうけるフロントエンド界隈ですが、 それぞれの技術はもちろん何らかの課題を解決するために生まれてきたものであり、 それらの課題と解決策を知り、フロントエンドがどのような方向に進もうとしているのかを認識しておくことは 流行のReactやVue.jsを活用していく上でも地味ながらも確かに役に立つことだと思います。 対象読者 ReactやVue.jsなどを使って現在流行のフロントエンド開発を始める方で 各ライブラリのGetting Startedを読んでHello World程度まで済ませたぐらいの方を想定しています。 この記事では抽象的な思想を中心に扱います。 なのでこの記事を読んであとにリポジトリに即一行コードが増えるような実践
WebPackaging の Signed HTTP Exchanges | blog.jxck.io
Intro WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。 Signed HTTP Exchanges: Signing (コンテンツに署名する) Bundled HTTP Exchanges: Bundling (コンテンツを 1 つにまとめる) Loading Signed Exchanges: Loading (そのコンテンツをロードする) 本エントリでは、各仕様を Signing/Bundling/Loading と記す。 現状、 Signing および Loading の仕様策定が進んでおり、 Chrome は Experimental な実装を行っている。 全体的に仕様が大きく、今後も変更される可能性が高いため、今回は実装が進んでいる Signing に絞り、ユースケース、仕様、および本ブログへの適用を中心に解説する。 Signing (Si
The Many Tools For Shape Morphing | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look
PWA=Serviceworkerは間違い!? ハイパフォーマンスWeb "PWA"導入セミナー ～Webサイト/アプリ構築のベストプラクティスを知ろう～に参加しました - Qiita
PWA=Serviceworkerは間違い!? ハイパフォーマンスWeb "PWA"導入セミナー ～Webサイト/アプリ構築のベストプラクティスを知ろう～に参加しましたHTMLJavaScriptPWA 勉強会詳細 ハイパフォーマンスWeb "PWA"導入セミナー ～Webサイト/アプリ構築のベストプラクティスを知ろう 以前私が書いた記事 【増席しました!!40→60】PWA Beginners 勉強会 #3 に参加しました。2018/04/16(月) 所感 自分自身サーバーサイドエンジニアのため、菊池さんのPWAの歴史についてお話はPWAの前提知識として非常に理解が深まった。やはり技術の理解には歴史が大事であると感じた１日だった。 海外ではフレームワークとPWA兼ね合いを議論していたのは去年まで。近年はプレーンJSとの兼ね合いが議論されているというのが印象的だった。そしてそれは2-3年後
VueがReactを抜かしてGitHubのスター数3位になった件（3大フレームワークの頂点） - Qiita
VueがついにGitHubプロジェクト3位に ふとGitHubのスター数が高い順を見てみたいと思い検索してみたところ、、、 !?!?!?!?!?!?!?!?!? Vueが3位になっているではありませんか。 ついに3大フレームワークの頂点に達したというのか。。。Vueよ。。。 （ちなみに筆者はAngularを書いて、Reactビギナーズガイドを積読中) Vueを書いてみよ。 以上、Vueを書いてみようというお話でした。（違う） 追記（2018/11/27） 5ヶ月前に抜いていたそうです。 情報提供ありがとうございます。 https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html おまけ 下記URLを叩くとスター順で見れます。 https://github.com/search?utf8=%E2%9C%93&q=star
光を超えるためのフロントエンドアーキテクチャ - Speaker Deck
HTML5 Conference 11/25
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement! Here’s what we’ll be building: We’ll
Eight メンション機能の
フロントエンド実装 / Eight Mention Frontend
「プラットフォームサービスの成長を支える技術〜Web現場Meetup #4」で発表した際の資料になります。 https://pixta-inc.connpass.com/event/103943/
Chrome Dev Summit 2018が開催！Web制作者がチェックしておきたい、CSSとJavaScriptの最新情報 | コリス
先週、サンフランシスコで開催された「Chrome Dev Summit 2018」から、Web制作者が特に注目しておきたいハイライトを紹介します。 ナビゲーションの新しい遷移方法、Squooshの開発秘話、新しいPageSpeed API、ChromeでもLazyloadをサポートなど、これからの制作に役立つものばかりです。 Highlights from Chrome Dev Summit 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ナビゲーション遷移（Navigation transitions） Squoosh -15kbのJavaScriptアプリ PageSpeedとLighthouse APIによる統一されたパフォーマンス分析 ChromeでもLazyloadをネイティブにサポート ナビゲーション遷移（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animated Frame Slideshow | Demo 1 | Codrops
25 CSS & SVG Morphing Animation Examples – Bashooka
～Top、～Heightなどの高さに関連したプロパティ一覧 & メモ - Qiita