LearnCode.academy とは？ www.youtube.com LearnCode.academy という YouTube チャンネルがあり，Vue.js や React + Redux などを解説した，無料の学習動画が公開されている．今回受講したのは「Vue Tutorial」で，全9回となっている．合計しても「約1時間程度」なので，スキマ時間を活用して気軽に学ぶこともできる．「Vue.js は気になるけどまだ試したことがない」という人にオススメ！ Vue Tutorial #1 - Vue JS Tutorial for Beginners #1 setting up an app Vue Tutorial #2 - Vue.js filters and computed data Vue Tutorial #3 - Vue.js directives and event

エンジニアがスキルを磨きたいとき。キャリアプランに迷ったとき。モチベーションを高めたいとき。いつも助けになってくれるもの。それは、本。 優秀なエンジニアを目指すのであれば、良質な多くのインプットが不可欠です。それでは、各領域の著名なエンジニアにとって、良質なインプットとは？ 本稿では、19名の著名エンジニアに、自身のキャリアを支えてくれた“この一冊”というべき名著を伺いました。 各領域で活躍するエンジニアたちは、数多ある書籍からどんな一冊を選び、そこから何を学んできたのでしょうか？ 自身のスキルやマインドを磨くために、絶対に読んでおくべき珠玉の書籍を、ご本人と書籍の関わりエピソードとともに紹介してもらいました。 ※人名の50音順に掲載。回答者は敬称略とする。 池澤あやかが推薦！『Prototyping Lab』 サイバーエージェント 板敷康洋が推薦！『リファクタリング』 リーバンス 今井彩

前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce

こんにちは、エンジニアの@sota1235です。 タイトルの通り、今回は愚直に改善をした話をします。 メルカリのJavaScript メルカリにおけるJavaScriptの活用場面は以下のようなものがあります。 メルカリWeb アプリ内Webview 社内ツール React Native Node.js製のbotやGoogle App Scripts etc… いずれもサービスにとって重要なものであり、サーバサイドエンジニアであってもJavaScriptに触る機会は少なくありません。 かくいう私も普段はサーバサイドエンジニアですが、JavaScriptコードを書いたりレビューする場面が多くあります。 そんな中でWebチームにおいて、JavaScript開発でいくつか問題がありました。 課題その1: JavaScriptのレビューコスト問題 1つ目の課題としてJavaScriptのコードをレ

(注：2017/07/19、いただいたフィードバックを元に翻訳を修正いたしました。) ESM、CJS、UMD、AMD 　—　どれを使うべき？ 最近、 Twitter では、 ESモジュール の現状、特に、 *.mjs をファイル拡張子として導入すると決めた Node.js の現状について大騒ぎになっています。この話題は複雑で、かなりの労力を費やしてそれに専念しないと議論について行けないので、 皆が恐れと不安を抱く のも無理はありません。 古き恐れ フロントエンド開発者なら、 JavaScriptの依存関係の管理に悩まされた日々 を憶えている人も多いでしょう。あの頃は、ライブラリをベンダーフォルダにコピー&ペーストし、グローバル変数に依存し、あらゆる物を正しい順序でconcatしようとしてもネームスペースの問題に対処する必要がありました。 何年もかかって、私たちは共通モジュール形式と中央集権

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用

みなさんはじめまして！エディターのFukkaです。 私は現在、美術大学でUIデザインとUXデザインを学んでいます。 現役大学生の視点から、デザインについて様々な記事をお届けしていこうと思います！ 今回取り上げるのは、おすすめTwitterアカウントです。 私がデザインを学び始めた頃、情報のキャッチアップに悩んだ経験があるので、社内のメンバーに「フォローするべきTwitterアカウント」を聞いてみました！ 1. 日本のトップクリエイター 原研哉 @haraken_tokyo Follow @haraken_tokyo 無印良品や蔦屋書店など、有名な案件を手がけるアートディレクター。原デザイン研究所代表。 領域に捉われないデザインが生まれる理由を、彼の思想に触れることで少し理解できるのではないでしょうか。 ああ、東京に帰ってきた。厦門と北京、中国はちょっと行かないとすぐに変わる。電子決済は素晴

Google Chromeの拡張機能をひたすら試して、おすすめのものを32個厳選しました。目的に応じて、使えそうなものを探して頂ければと思います。 最後のセクションでは、ブログなどでよく取り上げられているものの「これはいらないんじゃないか」という拡張機能をまとめています。参考になれば幸いです。

新しくプロジェクトを始めるときに開発者を悩ませる、フレームワーク選び。ReactとAngularをあらゆる点で比較しながら、どう選ぶべきか？ の基準を考えます。 AngularとReactのどちらを選びますか？ JavaScriptのフレームワーク選びで多くの開発者が悩んでいます。始めたばかりの初心者も、次のプロジェクトで使うフレームワークを検討中のフリーランサーも、企業戦略を立てるITアーキテクトも。そこで、フレームワーク選びの知識を授けましょう。 最初にお伝えします。この記事では、どちらが優れているか明確な結論は出しません。しかし、何百とある似たようなタイトルの記事も同じです。自分の環境と使い方によって多くの要素が絡むため、一概に決まらないのです。 この記事は、Angular（バージョン2以上のこと。古いAngularJSのことではない）とReactを体系的に比較し、違いを理解した上で

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

ウェブサイトやグラフィック制作をより快適にし、生産性をアップさせてくれるChrome拡張機能をまとめてご紹介します。ウェブ制作に携わる、すべての人にオススメです。 便利なオンラインツールを一緒に活用して、自分だけの爆速Web制作スタイルを目指しませんか。 What Font ウェブサイトで使われている、フォントの種類を知りたいと思ったことはないでしょうか。これまではFirebug や Webkitなどを利用していましたが、What Font を使えば、気になる書体をマウスクリックするだけで確認できる、シンプルさが便利なツール。 Fontface Ninja Fontface Ninja は、ウェブサイトで使われているフォントをカーソルを合わせるだけで確認できるだけでなく、その場で購入までできます。ウェブデザイナーは持っておきたい拡張機能のひとつ。 Window Resizer Window

［53選］国内注目のWebサービス・アプリを大調査！ プログラミング言語、フレームワーク、アーキテクチャの一覧【2017年】 星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。53サービスのフレームワークやアーキテクチャ、開発効率化ツールを集めました。 国内だけでも星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。 今回は53サービス（追記を含む）のフレームワークやアーキテクチャ、開発効率化ツールを集めました。選定理由もお答えいただけたサービスについては、アーキテクチャを選んだ理由も紹介していきます。 C2C、コマース メルカリ、ココナラ、BASE、Tokyo Otaku Mode、STORES.jp、Snapmart、IQON 情報サービス グノシー、価

説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka

みなさんは、CSSを書くときに管理のしやすさを意識していますか？　CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設

デザイナーの副業は何がおすすめ？ その質問にぼくは間違いなく「ブログを書くこと」と即答します。 世の中には色んな副業がありますよね。コンビニなどのアルバイトもそうだし、スキルを生かしたデザイン制作も副業。 結論としてデザイナーがブログを副業にするメリットは非常に大きいと言えます。 [box class=”box32″ title=”デザイナーがブログをやるべき理由”] [list class=”li-check”] 今までの経験や知識が収益になる ブログにアウトプットすることで視野が広がる 文章で伝えるスキルがアップする デザインができるブロガーは圧倒的に有利 [/list] [/box] お金儲けだけではなく、スキルアップや視野を広げることにも繋がりますし、文章力も自然とアップします。もちろんこうしたスキルは本業へと還元されますし、最終的には一石五鳥くらいになるんじゃないかと。 また、ブ

2月28日（火）に渋谷で行われた「Service Design Night vol.4 ～事業会社とデザイン会社　デザイナーぶっちゃけトーク：スキルアップやキャリアパスについてどう思う？～」というイベントに登壇させていただきました。テーマは、事業会社と制作会社でデザインに関わる人がそれぞれの視点で、今後デザイナーはどのようにキャリアアップやスキルアップを図るのか？という問題を掘り下げて考えるというものです。 デザイナーに求められるスキルが多様化・細分化される中、数年後にどんな人材になっていれば良いのか？今後何を身につけていくべきなのか？という疑問は、多くの方が抱いている問題です。今回私は事業会社で働いたことのない、生粋の制作会社視点の立場でのスピーカーということで、お声がけいただきました。このエントリーでは、私自身が発表した内容を補足と合わせてご紹介してみたいと思います。 一緒に登壇された

more cool Domains from FunkyFlo: renn.autos insta.sbs jubilee.today cola.website jö.club jö.click shakeit.baby euro.baby arab.baby haul.website theface.space metapervert.com brazz.club 2nx.org methereum.club coke.bar porno.cfd baker.men seller.men inblack.men wlan.party slap.website twerk.party xnft.quest shitcoin.quest bitcoins.gift 1coin.buzz titcoin.xyz metaviral.website corona.gift metaviral.m

新書『逆説のスタートアップ思考』が明日 3/8 に Amazon 他の書店で発売されます。この記事はその書籍を読む前後に読んでもらえると、本の内容の見通しがよくなるのではないかと思います。 さて、タイトルの中にある「スタートアップ思考」は、Peter Thiel の Zero to One 第一章『僕たちは未来を創ることができるか』の最後の見出しから取ってきたものです。 ここで言うスタートアップ思考とは一体何なのでしょうか。私の現在の理解の範囲では、「自分の頭で考える」「自分の意志を持つ」「自分で決める」ということで、まとめてしまえば非常に凡庸なものかな、と思っています。 ただこれは、スタートアップ的な考え方を持つ創業者や投資家が、起業家志望の相談に乗っているときに 「で、君だけのユニークな洞察は何？」「で、君はどうしたいの？」といった、個人の意志や考えを確認してくることが多いことに符合し