こんにちは、フロントエンドエンジニアの荒田です。 早いものでスペースマーケットに入社して半年が経ちました。毎日新しい発見があり充実した日々を送っています。 今日はAtomic Designを使ってReactコンポーネントを再設計したお話をご紹介したいと思います。 背景 今まではReactでコンポーネントを作成するにあたり、粒度に関しての指針が明文化されておらず、コンポーネントの粒度は各エンジニアがそれぞれの思想で決めていたため、担当エンジニアの違いによってコンポーネント粒度がばらばらになる課題がありました。 汎用的で、使いやすい粒度のコンポーネントを作成するためには、デザイナーがデザインを繰り返し使っている、その粒度に合わせるのがいいのでは?と感じました。 そしてそれらを解決するためにAtomic Designを導入してコンポーネントのあり方について再設計することにしました。 Atomic
追記:通販開始しました。https://murasakigoods.booth.pm/items/853566 技術書展4でHelloWorldカルタを頒布しました。買ってくれた方ありがとうございます。作るまでのプロセスとか、どういう風に作ったかとか、どういうスタンスでやったかとかを振り返りました。※全公開投げ銭方式 長いので目次を置いておきます。前半は技術書展前の話、後半は技術書展版に向けた商品の企画(4P)・作成的な話です。 ・頒布結果 ・全体的な進め方・スタンス ・はじまり ・コンテンツ募集呼びかけ ・遊んでもらう ・販売する 商品企画とミニ量産 ・もの(Product) ・デザイン ・販売チャネル(Place) ・ミニ量産(作成) カード印刷/箱/シール印刷/説明書印刷/箱詰め ・価格(Price) ・宣伝(Promotion) ・今後 頒布結果 基本パック50個作って見本1個を除
はじめに 株式会社クリエイスCTOの志村です。 二回に渡り フロントエンド・テストツール比較 Selenium #01環境構築編 フロントエンド・テストツール比較 Selenium #02テスト編 をお送りしてきましたが、Selenium ぶっちゃけ色々な種類が多すぎてわけわからんですよね? モトキ 「WebDriverIOを使うのでインストールしてください」 志村「は?Seleniumじゃねーの??そもそもFirefoxのアドオンでやるんじゃねーの??」 モトキ「。。。」 こんなはずかしい会話になってしまったり。。。 ということで、今回は趣向を変えて「 案外知らない?Seleniumの実態 」を書いていきたいと思います。 この記事のゴール Seleniumの概念を理解し、自動テストを設計する際に適切なツールの選定をできるようにする 番外 Puppeteer こちらも良かったらどおぞ フロ
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの3つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
エンジニア組織のマネージメントってほんと奥が深いですね ~VP of Engineering meetup by CA #3~ こんにちは、サイバーエージェント 事業推進室の伊藤 淳貴(@wildtiger0713)です。 全エンジニア組織に共通する「エンジニア組織のマネージメント」というテーマについて皆で語り合う場として開催している「VP of Engineering meetup by CA」の第3回を4/2(月)に開催しました。 VP of Engineering Meetup by CA #3 https://cyberagent.connpass.com/event/82410/ 今回もサイバーエージェントグループの各事業部、子会社においてVP of Engineering = エンジニア組織のマネージメント の役割を担うキーマン3名が登壇し、それぞれの組織における取り組みや知見
エンジニアとして世に出荷されて3年、そこそこ外部で発表してきたのでその時にやってよかったことやメソッドをまとめておく。 過去の登壇歴 SlideShare, Scrapbox, SpeakerDeckにあげてある 基本的に新しいものは全部SpeakerDeck, 資料作る時間無いときはScrapboxって感じに使い分けてる Sota Sugiura’s Presentations on SlideShare Presentations by Sota Sugiura // Speaker Deck sota1235のスライド置き場 - Scrapbox 30min以上話したイベントの登壇歴だとこんな感じです。 YAP(achimon)C Tokyo 2016(30min) PHPカンファレンス2016(LT), 2017(60min talk) PHPカンファレンス福岡2016(30min
Mac High Sieera で、vimが起動出来ない場合の対処法「dyld: Library not loaded: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/libruby.2.0.0.dylib” 2017年10月8日 オフ 投稿者: KYO MacをHigh Sierraにアップデートしたのですが、vimが使えない〜!ってことで、その対処法です。 vimを起動すると、こんなメッセージが出る方は、下記で対応ください♪ $ vim dyld: Library not loaded: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/libruby.2.0.0.dylib Referenced from: /usr/local/
2024-04-29 CSSってどんな勉強をしたらいいの?おすすめの勉強法3選! 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
*** はじめに少しフライング気味だが、デザイナーとして新社会人をスタートする方が、素敵な先輩や仕事とめぐり逢い、そして、その後の素敵なキャリアを歩むことを願って、このブログを綴りたい。 なぜ、こんなことを書きたくなったかというと、同じ日に同時多発でキャリアに関することが巻き起こり、これは私も、何かを書かなければいけない、お告げのようなものを受けとった(気がした)からだ。 ※ちなみに、noteで書いたインターン生募集の記事はこちら 師匠との出会い 私のデザイナーとしての社会人スタートは、渋谷のデジタルマーケティングの大企業で、大規模なWEB開発のデザインチームだった。長い研修が終わり、デザインチームに配属となった夏の日。私はワインが似合う素敵な女性デザイナー(師匠)と出会った。その時の私は24歳。あれから10年が立ち、34歳の私は師匠と同じくらいの年になったはずだが、今でも超えられた気がし
Revised Revised 型の国のTypeScript 本書について 本書はJavaScriptにコンパイル可能な言語のTypeScriptについて解説した本です。TypeScriptの基本的な知識(型の使い方)やコンパイラのオプション、型定義ファイルの作り方やエコシステムについて解説します。 対象読者は新しめのJavaScript、いわゆるECMAScript 2015とそれ以降*1について理解しているユーザです。Node.js環境やnpmの使い方、OOP (Object Oriented Programming)の効能や利点をある程度理解していることが望ましいです。 本書に登場するすべてのサンプルコードは次のTypeScriptコンパイラでコンパイルできることを確認しています。 Version 2.4.2 本書はC87、C90で頒布した『型の国のTypeScript』の改訂(C9
CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS(Cascading Style Sheets)というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ
マークアップエンジニアの です。 CSSだけでRadioボタンの作り方みたいな内容の記事をよくお見かけしますが殆どのマークアップが気持ち悪く感じるのは僕だけでしょうか? 大体が <section> <input type="radio" name="hoge" value="テストRadio" id="radio_item" checked /> <label for="radio_item" class="radio">TestRadio</label> </section> 繰り返す様ですが コレって気持ち悪いし使いづらいと思うのは僕だけでしょうか? 気持ち悪いと思う点 labelタグの使い方 チェックさせる為にid属性をわざわざ振っちゃう radioボタンに紐づくtextが存在しない場合にどうする気ですか? Tab移動意識してますか? で、気持ち悪い気持ち悪いと言っていても問題は解
2020/07/25 Immersedを追加しました。 2020/05/27 ambr,ViveSyncを追加しました。 2020/05/14 Spatialを追加しました。 既存のVRコンテンツのUIのスクショをとるだけ。 このサイトにもかなりまとまっています。 xR.design: AR & VR Interaction Examples OculusGoのキーボードはこちらで更新しています。 bibinbaleo.hatenablog.com 選択・メニュー OculusQuestのホーム Immersed ViveSync ambr Spatial(OculusQuest) PorkerStarsVR(OculusQuest) NeosVR Maquette Vカツ Cluster バーチャルキャスト The Blu Luckys Tale Oculus First Contact
What is Atomic Parts Base CSS(APB CSS) Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) Atomic Parts Base CSS(APB CSS)って何?? Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) APBCSS は Atomic Parts Base CSSのそれぞれ頭文字を取っていて、「エーピービーシーエスエス」と呼びます。 APBCSS は Atomic Designをベースに設計された「CSSアーキテクチャ」の一つとなります。 Point - Simple - Predictable - General versatility - Reusable - Maintainabl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く