Create and configure lightweight, reproducible, and portable development environments.

14 основных глав и 11 пояснительных хорошо знакомят с миром Meteor и доступны даже тем, кто никогда не занимался веб разработкой. Meteor — полноценный фреймворк со своей отдельной вселенной подключаемых пакетов под названием Atmosphere, и, в некотором смысле, он содержит в себе все, что нужно для разработки. Книжка познакомит вас с понятием кода на сервере и на клиенте, расскажет про модную реактивность данных, затронет MongoDB, упомянет про особенности NoSQL в сравнении с реляционными базами данных.

Meteor is a full-stack development platform that makes it easier than ever before to build real-time web applications. This tutorial will get you up and running with Meteor in no time.

Your daily dose of web design detail inspiration.

Before I came up with the interactive placeholder, I was just using a normal one. I liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared.
Entire teams use Circle — the person who enters a value first isn’t always the same person who sees it later. To solve this problem I tried making the placeholder persist through the typing.
This worked well and made handling pre-filled data that much easier. When the <input> gets pre-filled, it behaves as it would if the user entered it themselves. Now teammates who view this in the future will know what this input is meant for right away.

Add some simple data attributes to your markup, run $.stellar().
That's all you need to get started. Scroll right to see Stellar.js in action.

I recently migrated this website from Wordpress to Github pages using Jekyll and poole. So far I am really happy with the transition. Over time, I grew to really dislike how heavy-weight Wordpress is. I dislike how WYSIWYG editors make it really hard to see what HTML is being generated and tend to bloat the code that is produced. I found the Wordpress plugin system so confusing that I was afraid to try to customize the layout of anything.

After several failed attempts at getting set up with GitHub Pages, I vowed that if I ever figured out how to do it, I’d write it up. Fortunately, I did eventually figure it out, so here is my write-up.

January 1976. Philadelphia Flyers v. CSKA Moscow. The Cold War. The soul of hockey at stake. Story by Dave Hollander, drawings by Stephen Halker.

This is the story behind Fi’s re-imagination of how news content is consumed on the web.

Getting ideas on demand is hard.
Niice is a tool to help you find that spark.

The purpose of Meaningful Transitions is to illustrate the process of the interaction and the structure of the user interface. They focus on specific events, or clarifying the user's interaction by animation. All transitions are divided into six categories in order to differentiate between their application. The aim is to present a scaleable collection of existing transitions. The transitions are shown in an abstract visualization to clarify their purposes, these visualizations also contain concrete examples. A closer look at a transition offers more information on the field of use, the mental model, the consistency, the cognitive benefit, and the illusion. see more

In this paper, we describe an empirical investigation of the utility of several perceptual properties of motion in information-dense displays applied to notification. Notification relates to awareness and how dynamic information is communicated from the system to the user. Key to a notification technique is how easily the notification is detected and identified. Our initial studies show that icons with simple motions, termed moticons, are effective coding techniques for notification and in fact are often better detected and identified than colour and shape codes, especially in the periphery. A subsequent experiment compared the detection and distraction effects of different motion types in several task conditions. Our results reveal how different attributes of motion contribute to detection, identification and distraction and provide initial guidelines on how motion codes can be designed to support awareness in information-rich interfaces while minimizing unwanted side effects of distraction and irritation.

The proliferation of information on the Internet poses a significant challenge on humans' limited attentional resources. To attract online users' attention, various kinds of animation are widely used on websites. Despite the ubiquitous use of animation, there is an inadequate understanding of its effect on attention. Focusing on flash animation, this study examines its effects on online users' performance and perceptions in both taskrelevant and task-irrelevant information search contexts by drawing on the visual search literature and two theories from cognitive psychology. In the task-relevant context, flash is applied on the search target; while in the task-irrelevant context, flash is applied on a nontarget item. The results of this study confirm that flash does attract users' attention and facilitates quicker location of the flashed target item in tightly packed screen displays. However, there is no evidence that attracting attention increases recall of the flashed item, as is generally presumed in practice, and may even decrease the overall recall. One explanation is that when users have to use their limited attentional resources on suppressing the distraction of flash, they will have less mental resources to process information. Moreover, the results suggest that processing information about an item depends not only on the attention it attracts per se, but also on the attention that other items on the same screen attract. While flashing an item may not increase the recall of that item, it can reduce the recall of other items (especially the nontarget items) on the screen. Finally, flash has negative effects on users' focused attention and attitude towards using the website. These results have implications for website interface design, online product promotion, online advertising, and multimedia training systems, among others.

Celebrating animations of interest in software user interfaces.

UX Movement is a user experience blog that shows how good and bad interface design practices affect user behavior. We believe that a clear, fast and easy-to-use interface is the greatest user experience. It’s the UX designer’s job to make this happen.

The agency worked with Tina Brown to bring The Daily Beast to life. When Vogue wanted to create its online presence the final deal was hammered out directly between Code and Theory co-founder Brandon Ralph and iconic Vogue Editor-in-Chief Anna Wintour.

If you're considering or actively building Ajax/RIA applications, you should consider the Uncanny Valley of user interface design. When you build a "desktop in the web browser"-style application, you're violating users' unwritten expectations of how a web application should look and behave. This choice may have significant negative impact on learnability, pleasantness of use, and adoption.

UXPin is the UX Design Platform that gets it right.

Разработчик пользовательских интерфейсов Stripe Майкл Виллар опубликовал в своем блоге материал, в котором рассказал о том, как команда платежного стартапа смогла улучшить юзабилити форм оплаты, добавив в них элементы анимации, и привел соответствующие примеры.