React Static 公式ドキュメント和訳 「基礎概念」編 - Qiita
React Static とは Reactベースの静的サイトジェネレータです。 つまり、全てハードコードの静的サイトはもちろん、ブログのようなCMSベースのサイトも React＋αの知識で！ DBなしに！ サーバーの（大した）設定もせず！ 超高速表示に！ 作れる優れもの。 僕のようなフロントエンドに知識が偏ってる人間には特に福音だったりします。 その中でもReact Staticは、Mediumで3,000clapを叩き出した記事 「2019年のReactジェネレータ」でもGatsbyに続き２番手に選ばれたイケてる子！ しかもGatsbyよりも学習コスト≒React＋αのα部分が少ないと僕の中で噂に。 ということで公式ドキュメントの「基礎概念」（Core concepts）部分を以下に訳します。 続編 React Static 設定大全 https://qiita.com/IYA_UFO/
SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog
最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ
DNS over HTTPSの必要性について - Qiita
なぜ今までのDNSでは問題があるのか インターネット上の通信の多くは、ブラウザを利用したウェブによるものです。 セキュリティ向上のため、GoogleやFireFoxといった大手ブラウザベンダーが平文通信であるHTTPから暗号通信であるHTTPSへの移行を推奨し、盗聴・改竄・なりすましといった問題を解決することが出来ます。 しかしながら、そのHTTPS通信をする前のDNSによるドメイン解決は暗号化されておらず盗聴でアクセスするホスト名を把握される、なりすましで偽の応答を返されるといった可能性があります。 それを防ぐための方法の1つが、DNS over HTTPSです。 DNS over HTTPSとは 今までDNSサーバ（フルリゾルバ）の（主に）UDPポート53番に対して行われていたDNSによる名前解決を、TCPポート443番に対するHTTPS(HTTP/2 over TLS)通信上で行うプ
WEB特集 “フェイク”はカネになる その実態を追跡した | NHKニュース
国内の市場規模が１兆5000億円に上る巨大なネット広告の市場。その裏で闇が広がっている。「インスタ映え」という流行語を生み、国内で約3000万人のユーザーがいるインスタグラムに、内容がまったくウソの「フェイク広告」が掲載されていたことがＮＨＫの取材でわかった。 なぜ、問題のあるネット広告が見逃され、配信されてしまうのか。追跡すると「フェイク広告」を使った“錬金術”の実態が見えてきた。 （「ネット広告の闇」取材班記者 田辺幹夫・斉藤直哉／ディレクター 中松謙介）
Webデバイストラッキング手法の紹介
サイバーエージェントの実践×実験Snowflake 導入の経緯から最新機能のトライアルまで / How Snowflake Is Used In CyberAgent - Go To the Future
Cookie の性質を利用した攻撃と Same Site Cookie の効果 | blog.jxck.io
Intro Cookie はブラウザによって保存され、紐づいたドメインへのリクエストに自動で付与される。 この挙動によって Web におけるセッション管理が実現されている一方、これを悪用した攻撃方法として、 CSRF や Timing Attack などが数多く知られており、個別に対策がなされてきた。 現在、提案実装されている SameSite Cookie は、そもそもの Cookie の挙動を変更し、こうした問題を根本的に解決すると期待されている。 Cookie の挙動とそれを用いた攻撃、そして Same Site Cookie について解説する。 Cookie の挙動 Cookie は、 Set-Cookie によって提供したドメインと紐づけてブラウザに保存され、同じドメインへのリクエストに自動的に付与される。 最も使われる場面は、ユーザの識別子となるランダムな値を SessionI
『次世代Webカンファレンス』のAdのセッションが面白かったのでまとめたメモ - コード日進月歩
昨日の録画が上がってて、作業しながら聞いてたら面白かったので昨日の記事に追従する形おまとめした。 (1/21 コメントいただいたので、コメントで補足頂いた部分に注記を足しました！ありがとうございます！) 発表のまとめ Ad www.youtube.com トークメモ トラッキング 広告主としては電話番号や住所のような個人情報は欲しくないが、もっと匿名性のある情報はほしい。 GDPRの考え方により、個人情報の範囲が拡張されて、閲覧履歴すらも個人情報とみなされると日本でもその時流が来る可能性がある。 デジタルマーケティングなので、ユーザに合わせたよりよいものを出すためのものだが、どんどん規制が厳しくなっている セキュリティ ユーザが任意で広告トラッキングをさせないためのITP (Intelligent Tracking Prevention) を回避するような業者も出てきているが、あまりよろし
次世代Webカンファレンス 2019 振り返り
nwc.md 次世代Webカンファレンス 2019 振り返り この文章に関しても所属組織とは関係のない個人の見解です 所感など 本当に全く打ち合わせをしていないので、話題が分散しがちだったかもしれない。 せっかくの所属組織とは無関係のレギュレーションなので、具体名を上げてガンガン治安の悪いことを言うつもりだったのだけど、直前に「具体的な企業名は避けましょう」と言われて若干遠慮した。 マズいことをガンガンしゃべる覚悟で来たので、防刃ベストを着ているが、特に出番は無かった。トイレにも行った。 本当は話す予定だったトピックについて、いくつかは、別途private gistに書く。 話した話題の参考情報 CDN設定の話、request collapsing という名前の機能 https://tech.mercari.com/entry/2017/06/22/204500 http://www.it
ウェブ解析終了のお知らせ – Digital Marketing Blog
通称「赤R」と呼ばれる会社のウェブサイトから、某デジタルマーケティングソリューションベンダーの計測タグがなくなった、という噂を聞いたので、見に行ってみたら本当に無くなっていた。 背景はわからないけれど、まあ時代の流れとしては正しい気がしているので、思ったことを一筆書かせてもらおうと。 ※ちなみに、ECサイトからはなくなったけれど、グループの別事業サイトではまだタグは生きてるようだったので、全社的な終了か否かは知らぬ。 ■ウェブ解析の時代は終わった 赤Rといえば、有料アクセス解析ツールの超VIPクライアントとして有名であったわけだけど、逆にこれまでよく使い続けてきたな、という気もしている。この流れに乗って、青い方のRも解約するんじゃないかな、って気すらしている。 昨今のビッグデータ云々の流れもあってか、ウェブ解析ツールの市場価値は大きく下がっている、と個人的には思っている。 実際、僕も昔は毎
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
Firebaseの各機能を3行で説明する - Qiita
Firebase は機能が多すぎてよく分からなかったので、自分の整理用に「 Firebase で何ができるか」をだいたい3行でまとめてみました。 利用可能な環境かどうかは、以下のアイコンで示しています。 … Android 利用可能 … iOS 利用可能 … Web 利用可能 [追記] 新しい機能が増えたので2018/09/26時点で整理しました。 Analytics Google Analytics for Firebase イベントベースでデータ収集・分析ができる。無料。 アプリの場合は Google Analytics for Firebase を、ウェブサイトの場合は Google Analytics を使うことになる。 BigQuery と統合して複雑な解析を行うこともできる。 Develop Firebase Authentication メールアドレスとパスワードを利用したユ
埋め込みタグの挿入だけ！無料でWebサイトに決済機能を導入できる「Payzard」を使ってみた - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトやブログなどへプログラミング不要で簡単に決済機能を組み込むことができる無料のWebサービスをご紹介します！ 埋め込みタグをHTMLに挿入するだけでGUIによる細かな設定が可能で、月額課金や寄付金の導入なども今すぐ始めることができますよ。 ショップサイトや有料サービスの開発を考えている人も参考になると思うので、ご興味ある方はぜひ試してみてください！ 【 Payzard 】 ■「Payzard」の使い方 それでは、まず最初に「Payzard」を使った決済機能を利用するための方法について見ていきましょう！ サイトにアクセスしたら、画面の上部にある「Start now」ボタンをクリックします。 決済機能を導入しようと考えているWebサイトのURLを入力します。 プラットフォームの選択画面になるので、今回は「Other platfor
モバイルエンジニアが H.265/HEVC 使った方がいい理由（わけ) - スタディサプリ Product Team Blog
こんにちは。モバイルエンジニアの@daisukefujiです。 少し前になりますが、WWDC 2017 にてH.265/high-efficiency video coding(HEVC) のサポートが発表されました。 iOS デベロッパーの方はご存知だと思いますが App Store審査ガイドライン に以下のビデオストリーミングコンテンツについての規定があります。 2.5.7 携帯電話ネットワークを介した10分以上のビデオストリーミングコンテンツにはHTTP Live Streamingを使用し、ベースラインの192 kbpsのHTTPライブストリーミングを含める必要があります。 ここで唐突に「ベースライン」という用語が使われていますが、これは「H.264 Baseline profile」もしくは「MPEG-4 Part 10 Advanced Video Coding の Basel
Hugo + GitHub Pagesでポートフォリオを作る - プログラミングで世界を変える
出来たもの Nakaji Kohki https://nkjzm.github.io/ [ urlの先の内容が変わって趣旨が伝わらなくならないようにするためのgif github.com はじめに 知り合いがGitHubにResume(職務経歴書)をまとめていて良さそうに見えた。 土曜日を1日使ってポートフォリオを公開してみた。 公開まで 技術選定 サーバー: GitHub Pages 静的サイト生成ツール: Hugo (+ Academic) なるべく手軽に公開できて、かつマークダウンに対応している技術という軸で選びました。 GitHub Pagesで正式サポートされているJekyllも検討しましたが、使いませんでした(後述)。 GitHub Pages 自分でサーバーをホスティングしなくて良い GitHubに対する操作だけで完結できる 独自ドメインにも対応 サーバーの知識がないので、自
Deprecating cssnext
Like I said in my farewell to CSS post, I don't use CSS directly anymore. And things have been this way for years now. I also have been tired of PostCSS (because I disagree with the vision and the directions taken by the project). Beside the fact that I were not using CSS directly anymore, too many PostCSS releases meant that I had to update most of the PostCSS plugins underneath cssnext in order
リードエンジニアにおけるサービスリードという役割 - BASEプロダクトチームブログ
こんにちは、CTOの藤川です。 これまでエンジニアの肩書において、エンジニア専門職の上級職としてリードエンジニアという役割を設定しておりました。 リードエンジニアと言うと、世間の見方としては「技術力に優れたエンジニア」というやや漠然とした役割と想像しているのではないでしょうか？ Webサービス開発における「技術力」とは 「良いサービス」とは 「良いサービス」を提供するために、エンジニアに求められるスキル Webサービス企業におけるエンジニア属性：「テック」と「サービス」 「テックリード」と「サービスリード」の役割 リードエンジニア テックリード サービスリード 「サービスリード」とは、その一文字を直す作業に意義、喜びを感じられること 一緒に良いサービスを作りませんか？ Webサービス開発における「技術力」とは そもそも「技術力とは何ぞや？」というのが曖昧なことが多いです。 というのも、私共
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Progressive Web Apps | web.dev
Netlify: All-in-one platform for automating modern web projects
