アメブロ2016 アメブロフロント刷新にみる ひかりとつらみアメブロのフロントエンド刷新についてFrontrend Vol.8で発表した内容です。Read less
QiitaのCSS構成2016 - Qiita
Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas
リクルートテクノロジーズのフロントエンド開発 2016 - from scratch
前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた
フリーランスアニメーター 瀬川美里 - Konifar's WIP
SHIROBAKO Advent Calendar 2016 始まりました。ということで、瀬川さんの話をします。 出典 : http://shirobako-anime.com/character.html 瀬川さんと言えば、宮森も見惚れる風貌や、最終回でのほろ酔い姿で視聴者を魅了したことは言うまでもありませんが、やはり最も印象的なのは ベテランの風格溢れる仕事への姿勢と言えるでしょう。 第1話でタイトなスケジュールで割り込みの仕事をこなす中、額に冷えピタを貼って 「綱渡りか…」と独り言をつぶやく様は、さながら情熱大陸のワンシーンのようでした。 もちろんアニメなので脚色は入っているとは理解しつつも、瀬川美里という1人のフリーランスアニメーターについて振り返ることは非常に有益だと思うので、印象的なシーンを例に上げて簡単にまとめておこうと思います。 クオリティに対する意識 実は、瀬川さんの登場
「自信がない」じぶんとのつき合い方 - デザイナーのイラストノート
夢見がちでまじめなうお座A型、社会人14年のうちフリーランスを10年もやりましたが、相変わらず人見知りですぐに自信をなくしてしまいます…。そんなわたしですが、最近ではこうやってブログやセミナーで自分の考えを発表する機会も増えてきました。「自信がない」じぶんとのつきあい方について書いてみたいと思います。 自信とは何か わたしにとって自信とは、「MP（マジックパワー）」のようなものです。その自信（MP）の根拠は、これまでの経験や他人から得た評価です。 じぶんを評価されるということ 人の評価というのは大きく2つあります、今回は「事実起因評価」と「感情起因評価」と呼ぶことにします。 学校や仕事で、評価を受けるときの物差しは、主に「事実起因評価」です。 しかし、人の能力というのはこれまで培ってきた感性というものと深く関わりがあります。例えばわたしはデザイナーですが、じぶんのデザイン能力や感性は「これ
Houdini、それはCSSの進化を促すプロジェクト - The future starts today
この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは
備忘録: yarnpkgで依存パッケージのガーデニング作業を楽に行う - saneyuki_s log
前提 yarnpkgのv0.17系 依存パッケージのガーデニングという単語の意味についてはググれ How to yarn outdatedとかで更新が必要そうなものを眺める いきなり2へすっ飛んでもいい バージョンをstableとかdevとかnextで指定している場合は出てきたり出てこなかったりするけど yarn upgrade-interactiveする バージョンをstableとかdevとかnextで指定している場合は出てきたり出てこなかったりするけど 2を繰り返す yarn upgradeで, 表に出てこない依存関係含めてyarn.lockを更新する 今のところ, ./node_modules/を消して, yarn.lockを消して, yarn installしてyarn.lockを再生成した場合と同じ効果が得られる
汚いコード書いてない？フロントエンダー必須のPostCSS+Stylelintがいい感じ
チームでCSSを書くなら、コードをなるべくきれいに保ちたいもの。CSS変換ツールとして注目を集めるPostCSSとStylelintを使えば、効率よく実現できそうですよ。 ｢コード品質｣は、プログラマーにとって目新しいものではありません。開発者は、コードがただ機能するだけでは不十分だと知っています。コードは読みやすく、明快な構成で、一貫性があるべきです。また、ある一定の評価指標に沿っている必要があります。 あいにく、この点はCSSを書く際に見落とされがちです。理由を長々と話してもよいのですが、重要な点は、CSSもJavaScriptやPHPなどと同様のコードであり、その書き方には気をつけるべきだということです。そうしないと、より複雑な事態を招きかねません。 記事では、「PostCSS」というツールを使ってCSSコードを高品質に保つ方法を説明します。最初に｢より良いCSSコード｣とは実際どの
ニオイが外に漏れない最強のゴミ箱はコレだ！／シンプルヒューマン スリム タッチバーカン | OMGmag
なんだか見た目も高級そうな佇まい。ヘアラインのステンレスが美しいです。そして作りは価格に見合ったしっかりしたもので、質感も含めて一見して「いいやつ感」がにじみ出ています。大きいので存在感がありますが、デザイン的にどんなお部屋でもマッチすると思います。 通常ゴミ箱って隠すモノというイメージが強いですが、これは見えててもOKかなと思います。わが家ではこれ見よがしに堂々と御鎮座ｗ https://www.simplehuman.com/ simplehumanスリムタッチバーダストボックス 40Lのスペック [list class=”li-accentbdr strong”] サイズ／ 26.0×43.0x72.0cm 重量／6.7kg 容量／40リットル 材質／ステンレススチール・ポリプロピレン [/list] 二重構造で手入れがしやすく清潔 毎日使うものですし、普通に使っていてもそれなりに汚
Variable Fontについて - console.blog(self);
Goodpatch Advent Calendar 2016の7日目！ フォントもくもく会 #5でVariable Fontについて調べてみた。2016年9月にVariable Fontというものが発表された。ひとつのフォントファイルで、さまざまなウェイトで表示ができる。 ワルシャワで開催中のATypIカンファレンスにて、バリアブルフォントと呼ばれる新しいタイプのフォントが世界に紹介されました。Apple、Google、Microsoft、およびアドビが共同で開発したバリアブルフォントは、ジョン ハドソン（John Hudson）の言葉を借りれば「ひとつのファイルでありながら複数のフォントのように動作する」フォントです。ひとつのフォントファイルを使い、ファイルサイズを拡大することなくウェイト（太さ）や幅やその他の属性を無限に変更することができたらどうなるか、またデザインにおいてそれがどのよ
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
夜行バスの選び方はここをおさえろ！遠征バンギャに長距離バス活用術を聞いた | SPOT
こんにちは！ 非常勤ライターのひにしあい(@sunwest1)と申します。 皆さんは帰省やコンサート、出張など長距離を移動するとき、夜行バスを利用したことはありますか？ この夜行バス、価格以外の比較検討するポイントがわからずとにかく安さだけで選んでしまいがち。 私もその一人でした。今回、初めて夜行バスの利用を検討する人や同じように悩んでいる人に役に立つ「夜行バスの選び方」に詳しい人はいないかと考えました。 そこで閃いたのが「遠征バンギャ」の存在です。 アーティストのツアーに合わせて日本全国を駆け巡る遠征バンギャたち。一体、彼女たちはどんな基準で夜行バスを選んでいるのでしょうか？ 今回は本命バンドのツアー中は1か月の半分以上を夜行バスで過ごすというバンギャと実際に東京～名古屋の遠征を1日で行いながら、夜行バスの選び方やポイント、安眠のための必携アイテムまで根掘り葉掘り聞いてきました。その結果
DeNAのWELQ問題、最大の原因とされている責任者「村田マリ」とは何者なのか？
「検索結果上位をニセの医療情報などで埋め尽くして金儲け」「ニセ医療情報を信じて健康被害が多発」という事態となっていた「DeNAによるWELQをはじめとする複数サイトでのコンテンツファーム問題」を受けて運営元のDeNAは医療情報をまとめたキュレーションサイトWELQを閉鎖、さらに類似の手法で展開していたiemo、Find Travel、cuta、UpIn、CAFY、JOOY、GOIN、PUULを閉鎖、そして独立して運営しているので問題ないとしていたはずのMERYまでも閉鎖、そして12月7日(水)15時半より記者会見を開き、ネット上でもYouTubeでライブ中継、さらにNHKも生中継するというレベルにまで至りました。 WELQなど全10サイトを非公開に DeNAが記者会見 - YouTube しかし、なぜか昨日の記者会見では現場に関する最大の責任者であるはずの「iemo」の創業者で、今回の検索
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自動で会計、待ち時間なし アマゾンがコンビニ進出 - 日本経済新聞
ジョブズになり損ねた女：DNA検査の寵児、エリザベス・ホームズの墜落
Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離