大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - QiitaRegister as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
Service worker が拓く mobile web の新しいかたち
This document discusses using Rails as a backend for front (BFF) layer in a microservices architecture. It describes how Rails was used to build the BFF layer for an e-commerce site called HPB, acting as an API gateway between the client and various backend services. Key points discussed include using Puma to improve throughput, caching APIs to reduce response time, and implementing an API gateway
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
『Web API: The Good Parts』読んだ - ✘╹◡╹✘
『Web API: The Good Parts』を読んだ。贈ってくれた人達ありがとうございます。 Web API: The Good Parts 作者: 水野貴明出版社/メーカー: オライリージャパン発売日: 2014/11/21メディア: 大型本この商品を含むブログ (2件) を見る 目次 詳細はO'Reillyのページにて。 1章 Web APIとは何か 2章 エンドポイントの設計とリクエストの形式 3章 レスポンスデータの設計 4章 HTTPの仕様を最大限利用する 5章 設計変更をしやすいWeb APIを作る 6章 堅牢なWeb APIを作る 所感 Web API、よく知らない場合はとりあえず作りやすい方法で作っていこうという気持ちになりやすい。しかし、Web APIは後から変更するのが比較的難しいものなので、つらいものを使い続ける羽目になりやすい。また一貫性が重要視されやすいので
Webライティング11のルール
Web用の分かりやすい文章が誰でも書けるようになるための11のポイントをまとめたスライドです。Read less
HerokuのAPIデザイン
Herokuが自ら実践しているAPIデザインガイドをGithubに公開した． “HTTP API Design Guide” このガイドは些細なデザイン上の議論を避けて，ビジネスロジックに集中すること目的としている．Heroku特有なものではなく，一般にも十分適用できる知見となっている． 最近は，モバイル向けにAPIをつくることも多いため，勉強もかねて抄訳した．なお内容は，HTTP+JSONのAPIについて基本的な知識があることが前提となっている． 適切なステータスコードを返す それぞれのレスポンスは適切なHTTPステータスコード返すこと．例えば，“成功"を示すステータスコードは以下に従う． 200: GETやDELETE，PATCHリクエストが成功し，同時に処理が完了した場合 201: POSTリクエストが成功し，同時に処理が完了した場合 202: POSTやDELETE，PATCHリク
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer Blog
こんにちは、id:hakobe932です。はてなブログではユーザ体験の改善のために、ページ表示速度を向上させるための様々な取り組みを行っています。このエントリーでは、はてなブログで行っている、ブラウザキャッシュの活用、JavaScriptのページ最下部での読み込み、JavaScriptの圧縮、という3つの取り組みについて解説します。 ブラウザキャッシュの活用 同じ内容のJavaScriptやCSSを、ページを表示するたびにダウンロードすると、余分なHTTPリクエストが発生しますし、読み込み時間がかかります。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 $ curl -I http://hat
Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog
「HTML5 Advent Calendar 2013」の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
メール配信クラウドサービス13個の価格比較グラフを作りました（SES/SendGrid/Mailgun...） - atskimura-memo
メール配信サービスを調べていたら、調子に乗って 月間のメール配信数ごとの価格比較グラフ ができあがりました。 http://atskimura.github.io/compare/cloud-mail.html 多すぎ！w 以下で細かく見て行きましょう。 なお、ここで言うメール配信サービスはAmazon SESやSendGridなど、アプリから通知メールを大量配信するときなどに使うサービスです。 対象サービス 対象にしたサービスは以下の13個。相変わらずいっぱいある。 Amazon SES SendGrid、SendGrid（日本） Mailgun Postmark Mailjet Mandrill LeaderSend SocketLabs Elastic Email turboSMTP PostageApp Critsend ニフティクラウド ESS MailChimpなどのマーケティ
あのサイトの訪問者はどんなキーワードで検索してくるかざっくりわかるWebサービス「SimilarWeb」｜男子ハック
精度が低いので参考程度にしからならいけど面白いサービスです気になるあのブログやあのサイトがどのくらいアクセスがあって、どこから人が来て、どんな検索キーワードで引っかかっているのか。そんなことがわかったら色々面白い。 そういった情報を「ざっくり」教えてくれるWebサービスが「SimilarWeb」です。 正直なところ精度は高くなく、個人的な感想としては30〜40%程度くらいしか一致しないかなといったところですが、なかなか面白いWebサービス。 以下に男子ハックで試してみた結果を見ながらどんなことがわかるかご紹介。 まずは「トラフィックがどのくらいあるのか」という情報です。 12M（120万）となっています。だいたいあっている感じです。訪問別PVが1.65となっていますが、こんなに高くないですね。直帰率ももう少し高いです。 トラフィックのソースですが、ソーシャルがかなり高く出ていて、検索がかな
フラットデザインの参考にも！Bootstrap3対応のかっこよすぎる無料テーマまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Bootstrap3の無料テーマ＆テーマ集まとめ BlackTie.co http://www.blacktie.co/ 最近衝撃を受けたフリーのテーマ集。どのテーマもかっこよすぎて涙が出ます……ありがたや……ネーミングとロゴもかわいくてきゅんとしますね。 テーマ数は現在（2015年6月時点）25個あり、今後の追加も楽しみですね。 Bootswatch http://bootswatch.com/ こちらもテーマ集です。Bootstrap2の頃からありましたが、3にも対応したようです。フラットデザインにするなら「Flatly」がおすすめ。 Start Bootstrap http://startbootstrap.com/ こちらもテーマ集。管理画面用やポートフォリオ用など、いろいろな用途別に作られているのがありがたいですね（「Sponsored」のタグがついたものは有料なのでご注意！）。
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodyHouse | Web Design Nuggets
Effective web performance tuning for smartphone
https://developers.google.com/web/tools/setup/workspace/setup-devtools
Just Delete Me | A directory of direct links to delete your account from web services.