はてなブックマーク

こんにちわ。ユニバの MJ です。 2017 年も終盤に差し掛かり、今年のフロントエンドの印象としては、特にフレームワーク的な革新はなく中身が成熟していった印象があります。 そんな中で一つまとめておきたい話が一つ。 それが Atomic Design (アトミックデザイン) です。 はじめに Atomic Design という言葉を最初に耳にしたのは とある勉強会で Abema の方の発表でした。 確か 2015年 の冬あたり グラディオ「実際やってみて改めて実感したぜ、Abemaはすげぇ゛よ゛！！！」 イグニス「ああ...もうすでに完成されてたな」 グラディオ「コーディング・デザイン・自由度、3つが調和しねぇと、どれかが飛びでたってだめだ」 プロンプト「おれ、次からもっとフロントエンドを楽しめそうな気がする」 ノクティス「ああ、俺も」 と今更ながら思うわけですな。 よく語られがちなのは

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは、UNIBAの MJ です。今回は、 サイバーエージェントさま が企画されている Frontrend Vol.8 - 帰ってきたフロントレンド に 参加したので、そのまとめと感想を書きます。 この記事は、絶対ブログ書くマン枠 3枠 のうちの一つです。 他の方の記事もきっと上がると思うので是非読んでください。 有用なリンク集 当日の動画 ストリーム配信もやっていた！僕のまとめ見るより、本人の言葉で解釈した方が圧倒的良い console.lealog(); さまの圧倒的なまとめ 各発表のポイントなどが良くまとめられており、私が書く必要ないのではと思うくらい。さっくりどんな内容か知りたい方は是非。 以下から各発表の まとめ・感想 などを書きます。ざっくりとした、まとめに関しては上のリンクから見ていただいた方が良いと思うので、私的な感想の方が多いかもしれません。 Design Syste

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに monpy です。フロントエンドやってます。UNBA 所属 私の働いている会社では、毎クォーターのはじめに、前クォーターの振り返りを発表する。 いつものは esa.io に書いたりするけど、今回からここにまとめようかな。要するに ストック乞食 何の話か 前クォーターは WordPress を利用して、会員向けのコンテンツを含むサイトを構築したことが主だった。 その話を今回する。 実はこの話は wordpress案件 に docker を使ってみた件 にも書いたので、興味があるなら覗いてストックしてほしい。 案件を受けるまで 私

はじめに こんにちは、monpy です。 今日は何を話そうかというと、 Facebook で この記事が回ってきたんですね。 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section4 ～Gulpで処理を自動化しよう～ この記事は、タイトル通り Gulp 入門の記事な訳です。 僕も フロントエンドの端くれなので Gulp は頻繁に利用します。 Gulp が出て一体どんだけ経ったんだろうなぁ、と思いをはせたので調べてみると first commit が 4 Jul 2013。 まだ 2年と5ヶ月くらいしかたってないんだなぁ。と。 でも2年も経てば、技術が変わってしまうのが フロントエンドの常。gulp は辞めようぜ！なーんて記事もちらほら(ひえー)。 今日はそんな技術の移り変わりが激しくて嘔吐感に見舞われた感想です。 ちなみにタイトル通り mi

##photoshop と front の仕事 frontend の仕事をしていると photoshop から画像を切り出してポジションを出すという作業が 少なくない機会訪れるでしょう。 ##position の割り出し方 この作業は非常に面倒。 楽したいなら、プラグイン とか、 sketch を使うとか いろいろ手はあります ##昔ながらの絶対座標なケース 時には絶対座標でレイアウトするとかってケースは多々あります。 こういうときに欲しいツールがない。。。 ならば自作だ！！！ #photoshop plugin つくりましょうよ jsx photoshop の preset/scripts のフォルダにファイルを打ち込めばok #ソースコード これは自分用なので結構汚いし、用途があれですが、、、 全てのレイヤーのポジションを網羅していくスクリプトです。 でそれをテキストファイルに書き出し

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに きょんにちょわ UNIBA の monpy です。 今回から気合の入った記事には会社名を入れることにしました。 それはおいといて、弊社に wordpress 案件がきました。 僕が入社してから wordpress やら MT の仕事はしない傾向にあったんですが、フロントエンドの自分としては一回やっておきたいなぁ、と思い飛びつきました。 ###案件の概要 wordpress を使った会員制のサイトをつくりたい 別途 rails を用いて会員の管理は行う ということで、図に表すと みたいな感じですね。 PHP と Rails の共

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに タイトルにあんなことを書いてはいますが、これはとある案件で行ったことの忘備録的なものです。 別に webGL 宗教というわけでもなく、 これぐらいの表現をしたかったら webGL なんだな という感じで捉えて欲しい。 どんな案件だったか まずこの案件は初めは 3D の球体に地球のテクスチャを貼ってグリグリ動かしたい 球体状には幾つかのオブジェクトが置いてあってインタラクションできる 地球には近づいたり、遠くなったりする できれば、多くの端末で見せたい ( PC, SP <- これが重要 ) という案件でした。割と3Dとかではよ

##はじめに 今回話すのは、React を触ってみて僕としては、中々いい感じだなと思ったところで。 今度はちょっとしたアプリケーションを組んでみようと思ったとき話です。 非常に長い。スライドにすればよかった。LTとかで ##Tumblr 毎度お世話になっております。無料でブログができちゃう神サービス。 問題点 ただし神といっときながらも、幾つか残念な点も多数。 カスタマイズの管理がしにくい テストが辛い(毎回アップロードも嫌だ) 案件で使用するとなると、鍵かけなきゃいけないし。何かと死にたい。 言いたいことは、 Tumblr の仕様にのっとった更新の手間につきます。 今回で可能な解決 今回はすべて TUmblr API から値をとってくるので、いろいろな問題を解決できます。 カスタマイズページで更新せず localhost での確認が可能 テストも毎回テンプレート更新をしないので良いのでし

はじめに まずこの話は 最近話題だった React を案件に とりあえず 使ってみたという話をダラダラと書いた記事です。 React について深く書くという記事ではないでの悪しからず。 状況と経緯 まず状況を整理します。 私の話 フロントエンジニアといして有りたい存在 javascript も少し書くが、そこまで自信を持てるコードではない。という感じ。 最近 BEM にハマっていた。 案件の状況 前々から続く案件。 そのターム毎に、やること自体は変わるが、根本は同じ。デザインレベルで全く違うものだよ。 今回は量としては実質 3 ページ程度のスマホ用サイト。 ajax で通信して 情報を元にシーンを展開していくもの。 フロントの環境は全て私が決めてよい環境(というか一人でつくる) 以前の構築には grunt, assenmble を用いたスタティックなサイトを用いた。 納期がまじで短い、日曜