CDNとの付き合い方 – cat /dev/random > /dev/null &
最近何かと話題なCDNですが、そもそもCDNってなんだろう・・・どんなことに使えるんだろう？的なことを書いてみようと思います。 一応先に言っておくと、私はCDN業者に所属したことないのであくまでも利用者として見た時の話を書きます。 また、私の考えであり、様々なワークロードがあるなかでこれがすべてではありませんので、こんな考えもあるんだなぁぐらいに思ってもらえると助かります。 そもそもCDNってなんだろうか そもそもCDNはContent Delivery Networkの略であってCache Delivery Networkの略ではありません。 要はコンテンツをクライアントに対して高速・効率的に配信するためのネットワークです。 良くCDNといえばその成り立ちからキャッシュというイメージはありますが、重要な要素の一つではあるもののCDNの全てではありません。 さらに言えばAkamaiのInt
【2017年度版】Webエンジニアでも最低限押さえておきたい、SEO施策のまとめと実装 - Qiita
Webエンジニアでも最低限のSEO知識を持っておきたい ferretやferretOneといったウェブマーケティングのメディア、ツールを開発、運営している株式会社ベーシックで働いており、近々ECサイトphocaseにて本格的にSEO施策を行うので、勉強がてらエンジニアが覚えておくべきだと思ったSEO周りの知識をまとめました。 この記事も書いていたら長くなってしまったので知らない部分をピックアップして読んでいただければと思います。 実装方法やSEO施策の詳細は貼ってあるリンクだけではなく、 別途Googleで検索するなどして複数の意見をインプットすることをおすすめします。 ###★この記事を読むとどうなるか マーケター、ディレクターとのやりとりがスムーズになる。 意図せず検索順位を下げてしまうコードに気づける様になる。 エンジニア側だけで動けるSEO施策を提案できる様になる。 なんとなくSE
日本の全エンジニアに捧ぐ！現在公開されているAPI一覧【2013年版】 | Find Job ! Startup
2013年のいま、API界隈が熱い！ 今年に入り、官公庁の統計データやNHKの番組情報など、今までなかなか利用できなかったデータがAPIとして扱えるようになってきました。このエントリでは現在公開されているAPIを一覧でまとめます。いま使えるAPIはこれだけ読めば大丈夫。2013年の最新マッシュアップ事情をあますとこなく網羅します！ HOT! API 総務省 次世代統計利用システム（国勢調査、人口推計、就業構造、企業統計、物価統計 etc.） NHK番組表（※未公開） 行政・自治体・公共サービス 郵便番号 郵便番号検索API（郵便番号 → 住所） 郵便専門ネット（郵便番号 → 住所、郵便番号の簡易存在チェック） ぽすたん（郵便番号 → 住所、住所 → 郵便番号） IW3 PROJECT（郵便番号 → 住所、住所 → 郵便番号） 宇宙 Google+ JAXA PR（※現在一部の学生に限定公開
2016年はてなWebオペレーションエンジニアのアウトプット - Hatena Developer Blog
こんにちは、シニアエンジニアの id:y_uuki です。 はてなのWebオペレーションエンジニア8名が、この1年で対外的にアウトプットした成果物をまとめて紹介します。 座談会 Software Engineering System Engineering 輪読会 その他 あとがき 座談会 今週、Webオペレーションエンジニアの座談会記事を公開しました。技術ブログや技術発表では表現しきれない一人一人の考え方や思いが垣間見えるコンテンツになっていると思います。 Software Engineering Keepalivedのシンタックスチェッカ「gokc」を作った - ゆううきブログ gokcというGoで作られたKeepalivedの設定ファイルのシンタックスチェッカーです。社内で普通に導入しています。 インフラエンジニアがGo言語でオペレーションツールを書くことについて - Hatena
マイクロWebアプリケーション - Developers.IO 2016
マイクロサービスとしてバックエンドをHTTPで疎結合に繋ぐアーキテクチャに注目が集まっています。 そのようにバックエンドで実装した機能を直接ユーザに届けるコンポーネントである「Webアプリケーション」も、コントロールしやすい小さな単位でマイクロコンポーネントとして実装していく、そんな試みをご紹介します。Read less
「プログラマでしょ？ホームページ作ってよ！」を1日で対応する - Qiita
プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト
Web over HTTPS
Web over HTTPS DevFest Tokyo 2016 #devfest16 2016/10/0
Twitterはどうやって1秒に3,000もの画像を処理しているのか | FAworksブログ
現在、Twitter は1秒間あたり3,000枚の画像(約200GB)を作成し持続している。 しかしながら、2015年に Twitter はこれら画像ファイル等メディアファイルの保存方法を改善したために、600万ドルを節約することができた。 以前からそうだったわけではない。Twitter は2012年には主にテキストベースだった。 これはまるで、ホグワーツ魔法魔術学校であのかっこいい動く絵が壁にかかってないようなものだ。 2016年の今では Twitter はメディアを駆使した方向へと移行している。 Twitter は、プレビュー、マルチフォト、gif、vine、埋め込みビデオなどで写真をサポートできる新たなメディア・プラットフォームの開発を経て変化したのだ。 Twitter社のソフトウェア開発エンジニアであるHenna Kermani氏が、Mobile @Scale Londonでの興味
Webページ表示速度計測ツールメモ - Qiita
久しぶりにチェックしたのでまとめ。オンラインだったものがなくなっていたり、ブラウザ拡張であったものがなくなっていたりはしている。 WebpageTest (オンライン) Webサイトのパフォーマンスを実際の計測してくれるサービス。計測する地域やブラウザを選択できる。 自前のホスティング環境に導入することで継続的に計測しデータを収集することが可能。 Speed Indexというページの可視部分が表示される平均時間を取るものがあり、表示時間の完了時間を見るのではなく画面の可視部分の9割を速く表示できているかといったユーザ体験により近づいた指標になっている。計測ブラウザにIEを使うと0.1s毎の画面の表示段階のサムネイルが確認できる。 Navigation Timing API (ブラウザ) ブラウザ側に実装されるHTML5のAPI。 W3C Navigation Timing MDN Perf
Webサービスにおける
キャッシュ戦略
YAPC::Asia Hachioji 2016 mid in Shinagawa 2016-07-03 Yusuke Wada a.k.a. yusukebe
リクエスト時の Cache-Control、max-age=0 と no-cache の違い | tech - 氾濫原
ほとんどのブラウザで、通常リロードは Cache-Control: max-age=0、スーパーリロードで Cache-Control: no-cache がリクエストヘッダとして送られてくるみたいなのですが、実際の挙動はともかく意味の違いがよくわかりませんでした。 RFC7234 によると max-age は The "max-age" request directive indicates that the client is unwilling to accept a response whose age is greater than the specified number of seconds. Unless the max-stale request directive is also present, the client is not willing to accept
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
webpackを運用中のサービスに素早く導入する - コネヒト開発者ブログ
はじめまして！ 2月から入社したエンジニアの安達(@ry0_adachi)です。 私からはwebpackを導入する際に行ったことをご紹介していきます。 webpackに乗り換えることのメリットって何だろう？という方や、運用中のサービスがGruntやgulp、browserifyで近いうちにwebpackに乗り換えたいなぁ、と考えている方の参考になれば幸いです。 webpackとは？ ざっくり言うと「コード間の依存を解決するためのツール及びビルドツール」です。 AはBに依存している、といった状態の時にAの書かれているファイルに対してBのファイルを結合して参照できるようにするのがwebpackの仕事です。 なぜwebpackなのか なぜ私がwebpackを導入しようと思ったか、についてですが2つ大きな理由があります。 モジュールロードシステムの導入 ファイルを跨いだモジュールの呼び出しを行うた
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section2 ～CommonJSモジュールと仲良くなろう～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の2つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリケーションのキャッシュ戦略とそのパターン / Pattern and Strategy of Web Application Caching
cookpad.com 全 HTTPS 化の軌跡
TLS徹底演習
ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
