CSS Best Practices:
https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners—net-6741
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
Markup:
http://habrahabr.ru/post/203440/
http://habrahabr.ru/post/19362/
http://habrahabr.ru/post/108142/
http://habrahabr.ru/post/151931/
http://habrahabr.ru/post/202408/
99% проблем юзабилити возникают из-за медленного ответа веб-интерфейсов. Очень важно создавать быстрые интерфейсы. UIKit полезен именно для этого. Он лёгкий, модульный, и идеальный для разработки фронтенда. Предоставляет богатый набор HTML, JavaScript и CSS компонентов.
Желаете создавать симпатичные презентации в HTML? Хотите добавить движухи, переходов между слайдами? Это можно сделать при помощи Reveal.js. Он помогает создавать презентации, оптимизированные для сенсорных устройств, которые везде смотрятся приятно. Есть выбор эффектов перехода — Fade, Zoom и так далее.
Для тех, кто хочет разрабатывать красивые гибридные мобильные приложения. Touchstone.js работает на основе React.js, и имеет такие возможности, как нативное поведение для сенсорных экранов, функции навигации, компоненты форм и многое другое.
Легковесный фреймворк, помогающий создавать сайты и приложения с отзывчивым дизайном. Содержит богатый набор возможностей. Что он умеет:
Ещё один хороший фреймворк для фронтенда, любимый многими разработчиками отзывчивого дизайна. Этот фреймворк помогает разрабатывать сайты быстро. У него есть много возможностей – отзывчивая сетка, сниппеты, кнопки и другие компоненты интерфейса. Это проект с открытым кодом, доступным на Github
Позволяет без лишних действий создать тему для WordPress. Минималистический дизайн позволяет просто и легко сделать тему без ненужных функций. Включает код, оптимизирующий юзабельность темы, поддержку мобильных устройств и SEO.
Фреймворк на основе HTML5 для разработки минималистичного дизайна мобильных приложений.
Идеальный фреймворк для разработчиков, создающих упрощённый интерфейс с использованием JS на основе шаблона Model View View (MVVM). Библиотека на чистом JS, работающая в связке с любой серверной или клиентской технологией и в любом современном браузере.
Отзывчивый фреймворк на основе Normalize.css. Работает со старыми и современными браузерами. Содержит только самое необходимое для создание темы с нуля для любых устройств.
When Apple released iOS 5 last year, one of the improvements included in Mobile Safari was the inclusion of support for scrolling of block elements with the CSS overflow:auto oroverflow:scroll declarations. In addition, support for fancy and fast bounce-scroll behavior is provided with the inclusion of the -webkit-overflow-scrolling: touch vendor-specific declaration.
The inclusion of scrolling on clipped elements is great and goes a ways towards making it much easier to layout HTML5 pages and apps in a consistent manner, and closes the gap a bit between web and native behaviors. And it’s easy to implement.
For example, to add scrolling on an element with class="scrolling-element":
.scrolling-element {
overflow: auto; /* or overflow: scroll, if that's your thing */
-webkit-overflow-scrolling: touch;
}
Unfortunately, Apple released a buggy implementation of -webkit-overflow-scrolling: touch. The problem is seems pretty awful at first: if you use the new native scrolling behavior on elements that use or contain children withposition:relative, you may end up with some pretty gnarly rendering areas. This is particularly true for stuff that gets rendered off-screen.
Lucky for us, there is relatively (ahem) painless workaround. If you force Mobile Safari to use hardware acceleration when drawing the positioned elements, the rendering errors disappear. How do you do that? With a little 3D magic, via a no-move translation with this declaration: -webkit-transform: translate3d(0,0,0). Sprinkling this 3D fairy dust on your elements with position:relative and your rendering issues will vanish.
.scrolling-element-class {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-element-class .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}
One thing I have found is that sometimes, you need to apply the hardware acceleration hack to all of the child elements inside the scroller. This turned out to be true on a very complicated faux table in our really big HTML5 iPad app. The solution there was to use a scope universal selector. This isn’t the most performant selector, but it gets the job done in a way that working with the individual elements just didn’t cut it.
.scrolling-element-class * {
-webkit-transform: translate3d(0,0,0);
}
Update: I have found since writing this that even the hardware acceleration hack doesn’t cure all rendering ills. On the aforementioned complex layout, which for various reasons mimics a table, some of the elements in the cells were rendering incorrectly even with translate3d(). The solution in this case was to fix the height of the elements. This is not ideal in all situations, of course, and I’ll be looking for alternatives in the future. Also, iOS 5.1 does not appear to fix the scrolling issues.
Когда я начал играться с Node.js, для меня существовала лишь одна вещь, которая доставляла мне дискомфорт. Занятно, но я говорю сейчас о module.exports. Говоря занятно, я намекаю на то, что это, всё-таки, одна из фундаментальных частей Node.js и она достаточно проста. Сейчас же, оглядываясь назад, я не могу объяснить почему меня это так стопорило… Просто помню, что этот момент был для меня не очевиден. Ну и, полагаю, что я один из тех многих, кто встретив его разок-другой, сначала только путался, прежде чем написал что-либо применив его.
В Node, все штуки видны друг другу только в рамках одного и того же файла. Под штуками я подразумеваю переменные, функции, классы и их члены. Например у нас есть файл misc.js следующего содержания:
var x = 5;
var addX = function(value) {
return value + x;
};
Привычный доступ к переменной x и функции addX из другого файла невозможен. Это никак не связано с использованием var. Дело в том, что Node состоит из блоков называемых модулями, и каждый отдельный файл по своей сути — отдельный блок, чья область видимости изолирована от других таких же блоков.
Теперь, перед тем как мы узнаем, как сделать эти штуки видимыми вне модуля, рассмотрим более подробно как загружаются модули в Node.js. Сейчас речь пойдёт о том месте, где пишется require. require используют для загрузки модуля, обычно присваивая результат его работы какой-то переменной:
var misc = require('./misc');
Конечно же, до тех пор, пока наш модуль ничего не отдаёт, все приведённые примеры бесполезны. А чтобы наш модуль что-нибудьотдал, мы будем использовать module.exports:
var x = 5;
var addX = function(value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
Вот теперь наш модуль стал гораздо более полезным:
var misc = require('./misc');
console.log("Добавив %d к 10 мы получим %d", misc.x, misc.addX(10));
Есть ещё такой способ отдать штуки из нашего модуля:
var User = function(name, email) {
this.name = name;
this.email = email;
};
module.exports = User;
Разница между этими подходами не велика, но важна. Как видно, в данном случае мы экспортируем функцию напрямую:
module.exports.User = User;
//vs
module.exports = User;
Всё это к тому, что потом её будет легче использовать:
var user = require('./user');
var u = new user.User();
//vs
var u = new user();
Выгода от использования такого способа заключается в том, что в данном случае нам не важно, будет ли ваш модуль представлять контейнер c экспортируемыми значениями или нет.
Чтобы ещё более красочно представить процесс взаимодействия модулей, давайте рассмотрим следующий пример:
var powerLevel = function(level) {
return level > 9000 ? "it's over 9000!!!" : level;
};
module.exports = powerLevel;
Когда вы подключите данный модуль используя require, фактически им будет являться функция, что позволит вам сделать следующее:
require('./powerlevel')(9050);
Что, по сути, является упрощённой записью следующего кода:
var powerLevel = require('./powerlevel')
powerLevel(9050);
Надеюсь эти примеры помогут вам освоиться!
От переводчика:
Прошу принять во внимание, что приведенный здесь код, возможно, не является хорошими практиками. Тем не менее разбор сниппета из этого поста может оказаться еще одним поводом окунуться в функциональный JavaScript.
Недавно я увидел изящный JS сниппет в этом твите.
var bind = Function.prototype.call.bind(Function.prototype.bind); // #fp
Взглянув на него, я смог догадаться, что он делает. Он превращает x.y(z) в y(x, z). Радуясь как ребенок, я показал его своим коллегам. Они спросили меня, что же тут происходит. Я открыл рот, чтобы объяснить и… не смог сказать ни слова. Я развернулся и ушел.
В большинстве случаев, взглянув на хорошо написанный код, можно легко догадаться, что он делает. Имея какой-то опыт в функциональном JavaScript, прочитав «Functional JavaScript» и «JavaScript Allongé» (обе замечательны), у меня не возникло особых трудностей в его прочтении. Но как объяснить этот код кому-то без опыта функционального программирования?
Я решил поэтапно разобраться на простых примерах что же тут происходит. Результат был таков:
// Создадим простой объект, чтобы использовать его в качестве контекста
var context = { foo: "bar" };
// Функция, которая возвращает свойство «foo» контекста «this»
function returnFoo () {
return this.foo;
}
// Свойства не существует в текущей области видимости, поэтому undefined
returnFoo(); // => undefined
// Но если мы свяжем эту функцию с контекстом
var bound = returnFoo.bind(context);
// Свойство теперь в области видимости
bound(); // => "bar"
//
// Так работает Function.prototype.bind.
// Так как returnFoo — это функция, она наследует прототип Function.prototype
//
// Существует несколько способов связывания функции с контекстом
// Call и apply позволяют вам вызывать функцию с нужным контекстом
returnFoo.call(context); // => bar
returnFoo.apply(context); // => bar
// Так же можно вложить функцию в объект
context.returnFoo = returnFoo;
context.returnFoo(); // => bar
//
// Теперь давайте немного усложним
//
// В Array.prototype есть замечательный метод slice.
// При вызове на массиве он возвращает копию массива
// от начального индекса до конечного (исключительно)
[1,2,3].slice(0,1); // => [1]
// Мы берем slice и присваиваем его локальной переменной
var slice = Array.prototype.slice;
// slice теперь оторван от контекста. Из-за того, что Array.prototype.slice
// работает с данным ему контекстом «this», метод больше не работает
slice(0, 1); // => TypeError: can't convert undefined to object
slice([1,2,3], 0, 1); // => TypeError: ...
// Но мы можем использовать apply и call, они позволяют нам передавать нужный контекст
slice.call([1,2,3], 0, 1); // => [1]
// Apply работает как call, но принимает аргументы в виде массива
slice.apply([1,2,3], [0,1]); // => [1]
// Немного надоедает использовать .call каждый раз. Может воспользоваться bind?
// Точно! Давайте привяжем функцию call к контексту slice.
slice = Function.prototype.call.bind(Array.prototype.slice);
// Теперь slice использует первый аргумент в качестве контекста
slice([1,2,3], 0, 1); // => [1]
//
// Неплохо, правда? Но у меня осталась еще кое-что.
//
// Давайте проделаем с самим bind то же,
// что мы делали со slice
var bind = Function.prototype.call.bind(Function.prototype.bind);
// Обдумайте то, что мы только что сделали.
// Что происходит? Мы оборачиваем call, возвращая функцию, которая принимает функцию и контекст
// и возвращает связанную с контекстом функцию.
// Вернемся к нашему первоначальному примеру
var context = { foo: "bar" };
function returnFoo () {
return this.foo;
}
// И к нашему новому bind
var amazing = bind(returnFoo, context);
amazing(); // => bar
// Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
VirtualBox USB ‘Add device filter` does not work under 14.04
It’s permission related issue.
vboxusers with this command:sudo usermod -a -G vboxusers $USERAfter that restart your computer, start virtualbox and enjoy.
На вопрос, как сделать AJAX запрос к другому домену, я всегда отвечал, что никак, и предлагал в качестве альтернативы jsonp, прокси, флеш, фреймы. Но, оказывается, большинство современных браузеров (IE8+, FF3.5+, Chrome 6+ и Safari 4+) вполне поддерживает кроссдоменный XMLHTTPRequest.
С клиентской стороны все остается без изменений. Только теперь браузер не блокирует запрос при отправке, а добавляет к нему заголовок с именем домена, откуда делается запрос: Origin: example.com
Ответ от сервера он так просто назад не пропускает, сервер должен добавить специальный заголовок: Access-Control-Allow-Origin: *
Вместо звездочки сервер может указать конкретный домен, которому разрешено получить ответ.
Вот такое элегантное решение. Без лишних HTTP запросов, без изменения клиентского API, без нарушения безопасности существующих приложений (ведь подгрузить картинку с другого домена или отправить форму в ифрейм можно было и раньше), и наконец, в отличие от Флеша, с гибкой настройкой прав доступа к индивидуальным страницам.
Спецификация CORS (англ.)
Поддержка в браузерах (англ.)
Соображения безопасности (англ.)
easyXDM — альтернативное решение, работает без Флеша во всех браузерах
Tuts+ Tutorials
Firebase library for AngularJS: AngularFire
Developer Notes 