少人数でのフロントエンド開発をクイックに進めるために - Qiita
この記事は 第2のドワンゴ Advent Calendar 2017 7日目の記事です。 昨日の記事は@yue82さんでRTL設計スタイルガイドのアンチパターンをやってみたでした こんにちは。ニコニコ静画でフロントエンド開発を行っているnagisioです。 今年も冬コミに落ちてしまいました 去年の記事はRe:ゼロから始めるElectron開発生活でした。Electronに関して、残念ながら最近はあまり書いてないのですが、Reactは既に趣味でも仕事でも必須なフレームワークとなりました。 本記事ではそんなReactを用いたプロダクト開発について、どのように開発を進めていくのかを追っていきます。 はじめに（宣伝枠） ニコニコ静画チームにおいて、フロントエンドでの新規開発は基本的に少人数（１〜２人程度）で行っています。比較的小規模な開発が多く、例えば直近でリリースしたのがニコニコ漫画@C93です
バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary -
忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。
HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css
WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.email.css -GitHub normalize.email.cssの特徴 normalize.email.cssの構成 HTMLメールを作成する時のテンプレート normalize.email.cssの中身 normalize.email.cssの特徴 ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。 ネイティブプラットフォームのフォントスタイルを作成。 HTMLメールの一般的なバグに対応。 コメントを使用したスタイルの説明。 normalize.email.cssの構成
当初の懸念どおりブラウザのプッシュ通知は邪悪に使われはじめている。実装側はクリックまで購読確認を待つべき。 - mizchi's blog
追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは
QuipperにおけるReact Native活用事例 - スタディサプリ Product Team Blog
この記事はReact Native Advent Calendar 2017の5日目の記事です。 こんにちは。モバイルエンジニアの@hotchemiです。 今回はQuipperにおけるReact Native活用事例に関して紹介したいと思います。 目次 導入の背景/効能 開発におけるメリット/デメリット リリースサイクル 技術スタック おわりに 導入の背景/効能 Quipperが開発しているスタディサプリでは合格特訓プランという現役大学生コーチによる学習伴走サービスを提供しており、コーチとユーザーのコミュニケーションをより円滑にする為にメッセージ機能をベースとした業務補助iOSアプリの開発を実施する事になりました。 最初のバージョンこそSwiftで開発を進めていたものの以下の組織的・技術的な課題に直面した為、React Nativeを用いた開発に方針転換し現在では運用が軌道に乗っています。
Macに別れを告げて、クラウド中心の開発生活を始めるまで - Qiita
昨年あたりから、Macやめたい病を患っていたのですが、2度の故障を経て、重たい腰を上げました。別にWindows使いたいわけもなく「ローカルが煩わしい」だけなので、Windowsアプリは一切インストールしていません。で、どうやって暮らしてるの? というお話です。 TL;DR このあたり↓を組み合わせていけば、クラウド生活可能: GCP (or AWS) Codeanywhere (or Koding or Cloud9) VPCネットワーク + VPN (IPsec+L2TP) + DNS Figmaほか、Webサービス各種 追記・この記事を書いていたら、AWS Cloud9が発表されました。選択肢が増えて何よりです。 はじめに 本稿は、筆者が「Mac断ち」あるいは「ローカルマシンから解脱(げだつ)」する過程で見えてきた、ベスト(かも)プラクティス集に近いものです。 よく使うテキストエディ
入門者向け alt属性の書き方アドバイス
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
Evolution of <img>: Gif without the GIF
Colin Bendell is a performance and ideas junkie. He is co-author of O'Reilly's High Performance Images and part of the CTO Office at Cloudinary. tl;dr GIFs are awesome but terrible for quality and performance Replacing GIFs with <video> is better but has perf. drawbacks: not preloaded, uses range requests Now you can <img src=".mp4">s in Safari Technology Preview Early results show mp4s in <img> t
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
A Pinterest Progressive Web App Performance Case Study
Pinterest’s new mobile web experience is a Progressive Web App. In this post we’ll cover some of their work to load fast on mobile hardware by keeping JavaScript bundles lean and adopting Service Workers for network resilience. Why a Progressive Web App (PWA)? Some history.The Pinterest PWA started because they were focused on international growth, which led them to the mobile web. After analyzing
あの人気サービスは、Webサイトを高速化するために何をしているか | Wantedly Engineer Blog
最近、Webサイトの高速化が話題になっています。 Wantedlyでもサーバーサイドのレスポンス速度はしっかりトラッキングして取り組んでいましたが、フロントエンドはまだまだやれることがあると認識し、悔しさを胸にさっそく動き出しています。 取り組むに当たって、まずは事例を集めていくことから始めました。サーバーサイドの実装を見ることはできないですが、フロントエンドは頑張れば覗けるので、Webサイトの高速化に取り組んでいそうな他のサービスをじっくり観察することで、自分たちのプロダクトに最適な方法を選択できるはずです。 様々な種類のサービスを提供しているサイトを調査してみると、その高速化の手法はサービスごとに結構違っていて、学ぶことが想像以上に多かったので、ブログにまとめてました。同じようにWeb高速化へのモチベーションが高まっている皆さんの参考になれば幸いです。 Netflixまずは、動画ストリ
編集者が最近のフロントエンド技術に初挑戦して仕事用アプリを作ったので見て - nomolkのブログ
つくったもの 原稿の締切と進捗を管理するシステムです。 これが画面の全体像のキャプチャです。モザイクが多くてよくわからないので、ちょっと説明を加えたのが下の画像です。 上のほうに、その日と翌日の掲載予定記事が出ます。その下にカードのような感じで表示されているのが、各原稿の締切／進捗管理です。 カードは締め切り日順に表示されていて、各カードの内容はこんな感じになっています。締め切りを本人に伝えたかどうかとか、ネタのメモを書き込むことができます。ステータスは未入稿・チェック中・リライト中・入稿済みの4種類があり、手で更新します。 この日は三土さんの締切で、まだ原稿が入稿されていないことがわかりますね。（三土さん晒してすいません。この記事は無事掲載されました） 締切1週間前とか、超過とか、状況によってカード自体の色も変わって気づきやすくなっています。 背景 僕はデイリーポータルZ(以下、DPZ)
全モダンブラウザで使えるJavaScriptのdynamic import（動的読み込み） - Qiita
JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります（参考記事「JavaScriptでモジュールを使う時代に！ ブラウザで覚えるES Modules入門」）。 さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます（tc39/proposal-dynamic-import）。Google Chrome、Firefox、Safariではではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJav
スクロール連動型テキストアニメーションは、ユーザーを遅らせる
より魅力的に見せることを目的とするアニメーションも、使い方を誤れば、コンテンツ消費のスピードを遅らせ、ユーザーの障害になってしまう。 Scroll-Triggered Text Animations Delay Users by Aurora Harley on April 16, 2017 日本語版2017年12月4日公開 昔から知られているユーザビリティの課題の1つに、読み込みの遅さにユーザーが苛立ち、そのサイトや組織に関するイメージに悪影響を及ぼす、というのがある。時間が貴重なときには、一刻も早く欲しい情報の入手がほんの少し遅れただけでも不満を感じるものだからだ。 応答時間が遅くなるのは、大きな画像や凝った作りのウィジェット（たとえば、バナーカルーセルなど)の読み込みや、複雑なデータ処理によるサーバーの遅延によることが多い。しかしながら、最近実施したユーザビリティ調査では、まったく違
独立間もないフリーランス＆5人子持ちの四十男が「家」を建てた話 | マネ会 by Ameba
mizzyと申します。フリーランスのソフトウェアエンジニアで、ServerspecというOSS（オープンソースソフトウェア）の開発者として少しだけ知られています。 この記事では、DevOpsやInfrastructure as Codeについて……ではなく、私が経験した家づくりについてお話します。 2016年初頭、私は神奈川県のとある街に一軒家を建てました。現在は法人化していますが家を建てた当時は個人事業主。しかも妻と5人の子供がいる7人家族。そんな私がどうやって家を建てたのか、お金の面に着目して振り返っていきます。 家づくりのきっかけは「仮面ライダー」だった 2015年のゴールデンウィークに近所の住宅展示場で仮面ライダー関連のイベントがあり、それ目的で三男と四男を連れて行きました。当時は「家を建てる」なんて考えてもいなかったので、モデルハウスを見るつもりは一切ありませんでした。 住宅展示
子育てを始めて5年、今までで一番よかったプレゼントは「プロジェクター」だと思う（寄稿：801ちゃん） - ソレドコ
こんにちは、801ちゃんです。 気付けば2017年もあと少し、皆さまいかがお過ごしでしょうか。 冬コミ、大掃除、お正月の準備……。いろいろと忙しい時期ですが、小さな子どものいる家庭にとっては一年最後の大イベント「クリスマス」が目前です。 スーパーの店員さんのサンタ帽、ご近所の電飾ハウス、アニメの合間のテレビCM。幼稚園ではクリスマス会のお歌の練習。その日に向け、子どもたちのボルテージは上がりっぱなしです。 ケーキやチキンといったごちそうも子どもたちの楽しみですが、何と言っても一番の楽しみはクリスマスプレゼント。うちの5歳と3歳の男児2人もご多分に漏れず、今からクリスマスのプレゼントを楽しみにしています。 が、しかし……おもちゃを……これ以上……増やしたくない……！ 兄弟ゲンカ、片付け、収納……おもちゃはもう限界！ 「2歳差の兄弟だから、遊ぶものも違うしおもちゃでケンカしないでしょう？」なん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
