タグ

2017年6月18日のブックマーク (14件)

  • Monitoring Jank: How we found the slowest parts of our UI

    kyaido
    kyaido 2017/06/18
  • https://coliss.com/articles/build-websites/operation/css/learned-reading-the-flexbox-spec.html

    https://coliss.com/articles/build-websites/operation/css/learned-reading-the-flexbox-spec.html
  • CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA

    CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり

    CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
  • Atomエディタに新しく結合された Git / GitHub を試してみよう - ろくデブログ

    「Git」と“GitHub”を統合した「Atom」v1.18が正式版に…というニュースを見かけたので、早速試してみました!GitHubにpushするまで表示方法新しく搭載された機能では、GitHub(...

    Atomエディタに新しく結合された Git / GitHub を試してみよう - ろくデブログ
    kyaido
    kyaido 2017/06/18
  • CSSプロフェッショナルのためのTIPS - Qiita

    CSS ProtipsというTIPS集があって、これ一応日語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。

    CSSプロフェッショナルのためのTIPS - Qiita
    kyaido
    kyaido 2017/06/18
  • 服借り放題サービスは「服好きな人」につかわれない。借り放題アプリ「メチャカリ」意外なユーザーニーズと、長身モデルが「リアルじゃない」言われる話 | アプリマーケティング研究所

    服借り放題サービスは「服好きな人」につかわれない。借り放題アプリ「メチャカリ」意外なユーザーニーズと、長身モデルが「リアルじゃない」言われる話 服が借り放題できるファッションアプリ「メチャカリ」について取材しました。 ※株式会社ストライプインターナショナル メチャカリ部 部長 澤田昌紀さん 「メチャカリ」について教えてください。 メチャカリは「服、借り放題アプリ」です。ユーザーは月額5,800円を支払うことで、好きなアイテム(新品)を借りることができます。 返却すればまた借りられますし、もし借りたアイテムが気に入ったら、そのまま60日間もっていると、ユーザーは「その商品をもらう」こともできるようになっています。 2015年9月にリリースして、ダウンロード数については、50万ダウンロード(iOS75%:Android25%)を超えている状況です。 ※月額5,800円で服が借り放題(主に自社ブ

    服借り放題サービスは「服好きな人」につかわれない。借り放題アプリ「メチャカリ」意外なユーザーニーズと、長身モデルが「リアルじゃない」言われる話 | アプリマーケティング研究所
    kyaido
    kyaido 2017/06/18
  • アメブロ2017 - 大規模サービスhttps化 ~ All Greenを目指して ~

    こんにちは、アメブロのフロントエンドエンジニアのときです。 アメブロでは2017年4月に、PC/SPブラウザの閲覧面のhttps化対応を行いました。 今回は、大規模サービスにおけるhttps化のフロントエンドの対応についてお話しさせていただきます。 ※現在は、https、httpどちらからでもアクセスができる状態で、徐々にhttps一に移行し、「常時https化」を目標としています。 https化って何がいいの? まず、既存のサービスをhttps化することで、サービスやユーザにはどういった影響があるのでしょうか。 メリットとデメリットをかいつまんでご説明します。 メリット セキュリティ強化、信頼性アピール SEO向上 最新の技術を取り入れることができるようになる セキュリティ強化、信頼性アピール 直接的なメリットとしてはやはり、HTTPS通信のみでサイトを配信することによる、セキュリティ

    アメブロ2017 - 大規模サービスhttps化 ~ All Greenを目指して ~
    kyaido
    kyaido 2017/06/18
  • 不動の絶叫マシン、宮ヶ瀬ダムを味わい尽くす!

    ここで、どういうきっかけで僕がダム好きになったか、ちょっと個人的な話をしたい。 およそ20年前、車の免許を取得しあちこちドライブに行っていた。昔から地図が好きだったので、地図で気になった場所に行ってはそこがどうなっているのか見てくる、ということを繰り返していた。 そんな遊びもひと段落し、ドライブの行き場所を探していたとき、友人がさり気なくこんなことを言った。 「そういえばこの辺でダムを造っているよ」 それを聞いた瞬間、俄然興味が湧いた。ダムと言えば巨大なコンクリートの壁だ。それを造っているというとどれだけ大規模な現場だろう。ぜひ見てみたい! というわけでさっそく建設地点に向かったのだが、だいぶ手前で道が通行止めになっていて、その日は工事現場を見ることすらできなかった。しかし、僕はなんだか気になって、それからしばらくの間、その通行止めの場所に通い続けた。 すると1年くらい経ったある日、通行止

    不動の絶叫マシン、宮ヶ瀬ダムを味わい尽くす!
    kyaido
    kyaido 2017/06/18
  • あのモジュールこのコンポーネントそのブロック

    CSS設計におけるコンポーネント粒度について Object Oriented CSS https://www.slideshare.net/stubbornella/object-oriented-css Bootstrap - Components http://getbootstrap.com/components/ BEM https://en.bem.info/ Atomic Design http://atomicdesign.bradfrost.com/ Enduring CSS http://ecss.io/

    あのモジュールこのコンポーネントそのブロック
    kyaido
    kyaido 2017/06/18
  • Amazonのホールフーズ買収の狙いは464箇所もの一等地にある冷蔵庫付き「物流センター」|決算が読めるようになるノート

    朝から凄いニュースが飛び込んで来ました。日経新聞から引用します。 米アマゾン・ドット・コムは16日、米高級スーパー、ホールフーズ・マーケットを137億ドル(約1兆5000億円)で買収すると発表した。買収金額が非常に大きい上に、ネット企業ではなく、リアルの料品スーパーが買収対象ということもあり、業界あげての大騒ぎになっています。 今回の$13.7Bという買収金額はアマゾンの歴代の買収と比べても非常に大きなものです。 今回の買収以前の最大の買収額はザッポスを買収した$1.2B(1200億円)でした。また2017年3月時点での amazon の現金相当の資産が$21.5Bとなっているので、実に所有する現金の半分以上を今回の買収で放出することにもなります。 念のために書いておくと、今回の買収は、買収対象であるホールフーズが上場企業であるため、厳密にはホールフーズ社の株主の承認を経て、米国の規制当

    Amazonのホールフーズ買収の狙いは464箇所もの一等地にある冷蔵庫付き「物流センター」|決算が読めるようになるノート
    kyaido
    kyaido 2017/06/18
  • Kaizen Platform という会社について

    Qiita:Team エントリのレベルが高い CEO や CTO 、プロダクトマネージャーの書く Qiita Entry のレベルが高く、 Qiita:Team のタイムラインがはてブのホッテントリのようだった。ブックマークできるもんならしたいという感じ。お金を儲ける仕組みってこうやって作り出されていくんだなぁと思いながら眺めてた。技術顧問の伊藤直也さんが残していった名エントリも結構あった。 Kaizen エンジニア行動指針とか。 SRE (インフラチーム)のレベルが高い インフラが盤石だった。 SRE は二人しかいなかったがとても仕事が速く、困ったことがあって Slack のインフラ相談チャンネルで相談したらたいてい 3 分くらいで問題が解決してた。 yosudo さんは問題解決能力が高すぎていまは SRE ながら VP of GA (総務部門のドン)やってるし、 glidenote さ

    Kaizen Platform という会社について
    kyaido
    kyaido 2017/06/18
  • 最近ユビレジではじめた Slack チャンネルの新しい運用 - Diary

    最近ユビレジではじめた Slack チャンネルの新しい運用 なんですが、ユーザーサポートから開発者への問い合わせが作成されると自動でそれに対応する Slack のチャンネルが作成される。それは開発者全体チャットみたいなチャンネルに通知される。ユーザーサポートから開発者に問い合わせがくる場合というのは、大抵なんらかのソフトウェアの不具合である。 するとその問い合わせにある問題について知識のある開発者がそのチャンネルに入ってあーでもないこーでもないみたいに議論しながら対応してサポート担当者やら関連する案件の提携先企業やらとやりとりする。また障害であればそこで対応作業の内容を逐次事前に通告して他のメンバーのレビューを仰いでから行う。結果についても遅滞なく報告する。 このようにしているといずれ障害や問題は解決するので、その時点でそのチャンネルはアーカイブして社内 Wiki に簡単な概要を作成する。

    kyaido
    kyaido 2017/06/18
  • CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

    CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基的な使い方

    CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
    kyaido
    kyaido 2017/06/18
  • 脱出できるか

    脱出できなさそうなものはなるべく使いたくないが、代わりがないと使わざるを得ない。古より継続中なのはAdobeプロダクトであり、少し前ならナントカeeScript (あまり書かずに逃げ切った)で、今ならカントカ-in-ナントカ(いずれ死ぬのは自分じゃないと思いながら書いている)かもしれない。 現実をどうにかしようと生まれたものなので、便利で役に立つのはしょうがない。それを将来置き換えることになるかもしれないウェブ標準技術を意識しながら書いてもつぎはぎだらけのものが出来上がるだけだ。そのように意識的にブレーキをかけながら使っても来の力を発揮できないだろう。 そこで脱出できるかを知ることが重要になる。採用の判断基準にするべきではないが、採用が影響を与える範囲を知るためには、脱出できるかという観点がわかりやすい。 明日くらいにSassから脱出しよう、という決意表明のために書いておく。

    脱出できるか
    kyaido
    kyaido 2017/06/18