*** PLEASE NOTE: This article has been extended as of 01/06/2016 with an additional 5 problems. The latest version (which includes all the below points also), can be found here: https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/ *** Whether you’ve just discovered BEM or are an old hand (in Web terms anyway!) and have been using it for the

UI vs. UXIf you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX? At their most simple forms, UX design is what makes an interface useful, and UI design is what makes an interface beautiful. For UI, this includes a blend of visual hierarchy and interface elements. To understand what separates a great interface from

This case study aims to chronicle how we created a design system at WeWork. I’ll share insight into our process, product design, the tools we used to create and implement the system, and also how we document and share the system with our team. IntroductionWeWork creates inspiring shared workspaces, with an emphasis on community. We design and build our own internal digital tools to meet our busine

In this tutorial I explain how to get Hot Module Replacement (HMR) working with an app created with Angular CLI. Image courtesy of UdemyThe action planThe first thing we need to do is make sure we have an up-to-date version of Angular CLI installed. When we have the right version of Angular CLI installed we will create a new app and configure our app by adding a new environment to the Angular CLI

Are you lost trying to build and use Web Components? Skate.js uses the platform and sheds some light on it. What are we going to build?An input-like tag which looks like a normal text input but splits the content into tags when the users hit space. Take a look at the live demo of the component here and the code here for a better understanding and features: Natural deletion when pressing DEL.UI 100

今回は、デザイナーであればついつい食い付いてしまう「フォントの話」についてです。ウェブサイトや公共交通機関など、日常的に目にするところでどんなフォントが使われているのか、改めてまとめてみました。 Appleのウェブサイトで使われている有名な組み合わせと言えば、「AXIS」と「Myriad」です。 他の日本語フォントと比較すると分かりますが、「AXIS」は直線フォルムで先進的な印象を与えるため、Appleのブランドイメージと良く合っています。 そのAXISに、Frutigerよりもやや有機的で愛嬌のある「Myriad」を組み合わせることで、冷たすぎる印象になるのを和らげていると思います。 Apple公式サイトのCSSを見ると、「Apple TP」というフォントが指定されていますが、これはAXISとMyriadのオリジナル合成フォントパッケージのようです。 ただ合成フォントにしただけでなく、フ

大変ご無沙汰しております。TechFeedの白石です。 前回の記事でお伝えしたとおり、先日2016/11/7、TechFeed初回リリース（7月26日）以来初めてのメジャーバージョンアップを果たしました。 コードベースを大幅に書き換え、Webアプリとモバイルアプリを全て一つのソースコードで実現するようにしました（実際には、一部以前のコードも残っていますが）。ついでにService Workerによるプッシュ通知やオフラインキャッシュ（現在無効化していますが近々有効化）、Web App Manifestの配置なども行い、Progressive Web Apps化も果たしました。 1ソースであらゆるデバイスとブラウザに対応Progressive Web Appsの定義もあいまいな気がしていますが、ぼくらとしては、対応ブラウザ（Android Chromeなど）でWebサイトにアクセスした際に「

あたりを参照。 要は複数層から成るレイヤードアーキテクチャの一種で、レイヤー・要素間の結合性を依存性ルールによって縛り、下記のような恩恵を期待する。 恩恵 アプリケーションをフレームワークから独立させる。フレームワークによって提供されている機能や設計に依存せず、同時にフレームワークの制約に縛られない。 テストを容易にする。各レイヤー・要素を独立して動作させる。ある一つの要素のテストのために、他の要素を用意する必要がない。 UIに依存しない。UIがブラウザではなくCLIになったとしても、ビジネスルールを変更する必要がない。 データベースに依存しない。OracleやMySQLを問題なくMongoやPostgresQLに置き換えられる。Webのクライアントとしては、永続化層に依存しない。Web APIのURLやリクエストパラメータが変わったとしても置き換えられる。また、Web APIではなくLo

UIがとてもイケている『エロい』Macアプリを適当に挙げようと思う。 私が考えるエロいUIの条件： AppKitを利用したCocoa AppデスクトップアプリWebView, Electron, Flash, Javaなどの技術で構築しないHIGを守る／Apple純正アプリをリスペクトするWindowsのUIを基準にしないドラッグアンドドロップなど機能的にもMac OSの仕組みに従う独自UIで汚染しすぎないMac OSらしい色使いMac OSらしいアニメーション／インタラクションMac OSらしい言語表現（例えば「ウインドウ」「環境設定...」など）Mac OSらしいフォント（San Francisco, Helvetica Neue, Lucida Grande, Hiragino Sans, Menlo, Monaco...）標準的なメニューバーおよびキーボードショートカットよって例え