Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 10719 сообщений
Cообщения с меткой

html - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

Параллакс в 2D игре. Интересный эффект движения при создании игры на JavaScript (canvas)

Воскресенье, 26 Июня 2016 г. 16:46 (ссылка)

При создании игры наткнулся на интересную идею, как можно реализовать эффект трехмерного движения, при создании, например, платформера. Данная возможность, думаю, подойдет для большинства 2D игр, завязанных на скроллинге игрового мира.

image



Тайминг видео:

00:00 — 02:09 — теория

02:08 — 03:32 — создание и позиционирование объектов

03:32 — 05:16 — управление объектом, движение

05:16 — 07:44 — создание эффекта параллакса (трехмерности)

07:44 — 08:50 — закрепление камеры на объекте



Сам урок:

Смотреть 10 минут








Как обычно, если есть вопросы — пишите в комментарии.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/304140/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Делаем крутые Single Page Application на Basis.JS. Часть 1, вступительно-теоретическая

Воскресенье, 26 Июня 2016 г. 15:36 (ссылка)

Всем доброго времени суток!

Данная статья начинает цикл публикаций, посвященных basis.js – фреймворку для создания полноценных Single Page Application.





Про фреймворки



Ядро современных фронтенд–фреймворков практически не ориентировано на работу с данными так как не имеет структур и алгоритмов для обработки коллекций.

Вместо этого, разработчику предоставляется возможность самостоятельно работать с данными и итерировать коллекции прямо в шаблоне, либо оперировать DOM–элементами прямо из кода контроллера/компонента, опять же, самостоятельно связывая данные с их визуальным представлением.

Минусы таких подходов должны быть очевидны.

При манипуляции с DOM–элементами из контроллера/компонента:

— приходится самостоятельно реализовывать структуры данных и алгоритмы обработки наборов данных

— увеличивается сложность и поддерживаемость кода, так как приходится вручную работать с DOM–элементами и налаживать связи между данными и DOM–элементами

— чаще всего невозможно использовать шаблонизаторы



При использовании шаблонизатора в работе с набором данных:

— ухудшается читаемость шаблона, так как логика частично переносится в шаблон

— эффективно ли в шаблонизаторе реализован механизм обновления частей представлений и реализован ли?

— всё еще отсутствуют механизмы обработки наборов данных



Раньше всё это практически не имело значения, так как за обработку данных и их визуальное представление отвечал backend.

Всё, что нужно было сделать – загрузить страницу по нужному адресу и представление уже сформировано.

Минус такого подхода – отсутствие интерактивности и динамичности в плане обновления данных.

Современное SPA должно быть автономным в плане функционала и обращаться на сервер только тогда, когда необходимо синхронизировать данные (сохранить или получить новые).

Соответственно, всю работу по обработке и визуализации этих данных должен брать на себя фронтенд.

С приходом AJAX и WebSocket, стало гораздо проще следить за обновлением данных и обеспечить интерактивность приложения.

Но AJAX и WebSocket про работу с сетью и они не решают базовой задачи – работы с данными.



Допустим, вы делаете одностраничное приложение – клиент для ВКонтакте.

Вот некоторые из требований к приложению: загрузка, обновление, поиск, группировка, сортировка друзей из социальной сети.

Затем добавляется раздел «музыка». Здесь уже требуется работать с плейлистами (как своими, так и друзей). Тот же поиск.

Добавляется раздел «сообщения». Здесь есть работа с «комнатами» и сообщениями.

Думаю смысл понятен…

Так вот: музыка, друзья, сообщения и так далее – это всё данные, которые надо сортировать, группировать, искать и, наконец, визуализировать. При этом визуальное представление должно своевременно обновляться в режиме реального времени.



Таким образом, в арсенале разработчика должны быть мощные и удобные инструменты для работы, теоретически, с любым количеством данных.



Про шаблонизаторы



Дабы не разводить очередной холивар, я не буду приводить в пример конкретные популярный фреймворки. Вместо этого, представим, что есть некий абстрактный фреймворк с гибким и удобным шаблонизатором.

Как бы мы решали задачи описанного выше SPA?

Очень просто – загружаем данные с сервера соц.сети и скармливаем их шаблонизатору фреймворка.

Отлично, задачу вывода мы, казалось бы, решили.

Но вот мы понимаем, что в уже отрисованную коллекцию добавились новые элементы.

Что делать?

Опять же, всё очень просто – просим шаблонизатор перерисовать представление, но уже с новыми данными.

И всё вроде бы хорошо, пока данных не так много.

А теперь представим, что у нас есть коллекция из 100 объектов, которую мы получили от сервера.

Мы отдали эти данные шаблонизатору, он их послушно отрисовал, но через некоторые время, сервер сообщает нам, что в коллекцию добавился еще один элемент.

Что мы делаем? Снова отдаем данные шаблонизатору и он, внимание, перерисовывает все ранее отрисованные данные.

Не очень–то эффективно, не правда ли? Особенно если элементов в коллекции будет больше.

Отмечу, что здесь я говорю про строковые шаблонизаторы, которые на вход получают шаблон и данные, а на выходе выдают строку с HTML–кодом, которую и нужно вставить в DOM.

Но строковые шаблонизаторы они на то и строковые, что понятия не имеют об HTML и DOM. Им всё равно какие данные в какой шаблон вставлять и что потом разработчик будет с этими данными делать.



Про умные шаблонизаторы



В противовес обычным, строковым, шаблонизаторам есть более умные.

Их преимущество в том, что они–то уже «в курсе», что работают с HTML и на выходе отдают не строку с HTML–кодом, а DOM–дерево с подставленными в него данными. При этом, каждый элемент данных, который поступил на вход такого шаблонизатора, становится связанным с соответствующим ему DOM–узлом. Таким образом, при изменении какого–либо элемента коллекции, происходит обновление только того узла, с которым этот элемент связан. Возвращаемся к примеру со списком из 100 элементов. В случае с умным шаблонизатором, он сам определит – содержимое каких элементов коллекции было изменено и обновит только соответствующие узлы, не перерисовывая при этом всё представление.

Такой подход, несомненно, более эффективен, особенно при больших наборах данных.

Но, опять же, даже он не решает главной проблемы – работы с данными.

Да, в подобные шаблонизаторы встроена возможность использовать pipe–фильтры, которые позволяют модифицировать данные перед выводом, но, во–первых: такой подход ухудшает читаемость шаблона; во–вторых: это возможность шаблонизатора, а не фреймворка, который использует шаблонизатор и в более сложных ситуациях не спасет от нагромождения кода, как со стороны шаблона, так и со стороны контроллера/компонента.

Как следствие, возникает фундаментальная проблема, которая уже не раз здесь упоминалась – обработка данных.



Про basis.js



Basis.js – это фреймворк, ядро которого строилось с расчетом на работу с данными.

Отличительной особенностью фреймворка является сама модель построения приложения.

Законченное приложение на basis.js представляет собой иерархию компонентов, между которыми циркулирует поток данных.

При этом, образ потока данных лучше всего отражает суть происходящего, ведь создание приложения на basis.js – это налаживание связей между частями приложения.

Грамотно построенное приложение избавляет от необходимости даже банального перебора DOM–элементов.

За всё отвечает сам фреймворк и его гибкие инструменты.

При этом, сам фреймворк построен на абстракциях, что позволяет в полной мере использовать преимущества полиморфизма и, в большинстве случаев, абстрагироваться от конкретной реализации.



Основы работы с basis.js вы можете почерпнуть в этой статье, написанной автором фреймворка.

Мне выпала возможность продолжить цикл статей.



От теории – к практике



Одной из главных составляющих любого SPA является реакция приложения на действия пользователя, другими словами – своевременное обновление данных.

Если мы говорим про данные, то в basis.js есть множество абстракций для описания данных.

Наиболее простой из них является класс Token.

Token позволяет описать скалярное значение, на изменение которого можно подписаться:

let token = new basis.Token(); // создаем Token
let fn = (value) => console.log('значение изменено на:', value); // функция–обработчик

token.attach(fn); // подписываемся на изменение значения

token.set('привет'); // устанавливаем новое значение
// console> значение изменено на: привет

token.set('habrahabr'); // console> значение изменено на: habrahabr
token.set('habrahabr'); // ничего не выведет в консоль, т.к. значение не отличается от уже установленного

token.detach(fn); // отписываемся от изменений значения

token.set('basis.js'); // новое значение будет установлено, но у токена уже нет подписчиков


Метод Token#attach – добавляет подписчика на изменения значения токена.

Метод Token#detach – удаляет ранее добавленного подписчика.



Более того, один токен может зависеть от другого:

let token = new basis.Token();
let sqr = token.as((value) => value * value); // создаем еще один токен, зависимый от token
let fn = (value) => console.log('значение изменено на:', value);

token.attach(fn);

token.set(4); // console> значение изменено на: 4
console.log(token.get()); // console> 4
console.log(sqr.get()); // console> 16

token.set(8); // console> значение изменено на: 8
console.log(token.get()); // console> 8
console.log(sqr.get()); // console> 64

token.detach(fn);

token.set(10);
console.log(token.get()); // console> 10
console.log(sqr.get()); // console> 100


Token#as – создает новый токен и автоматически подписывает его на изменения значения оригинального токена.

Изменяя значение оригинального токена, оно передается функции, указанной в as и в порожденный токен записывается ее результат.

Таким образом, можно создать цепочку токенов, значение каждого из которых будут зависеть от значения предыдущего токена:

let token = new basis.Token();
let sqr = token.as((value) => value * value);
let twoSqr = sqr.as((value) => value * 2);
let fn = (value) => console.log('значение изменено на:', value);

token.attach(fn);

token.set(4); // console> значение изменено на: 4
console.log(token.get()); // console> 4
console.log(sqr.get()); // console> 16
console.log(twoSqr.get()); // console> 32

token.detach(fn);

token.set(10);
console.log(token.get()); // console> 10
console.log(sqr.get()); // console> 100
console.log(twoSqr.get()); // console> 200


Токен может быть разрушен вызовом метода Token#destroy.

Разрушенный токен становится абсолютно бесполезен, потому как перестает уведомлять подписчиков об обновлении своего значения, да и добавить новых подписчиков к нему уже нельзя.



Вот такой простой и удобный механизм обновления данных заложен в basis.js.



Давайте посмотрим как используются токены в компонентах basis.js:

let Node = require('basis.ui').Node;
let nameToken = new basis.Token('');

new Node({
container: document.body, // где разместить элемент
template: resource('./template.tmpl'), // шаблон
binding: {
name: nameToken
},
action: { // обработчики событий
input: (e) => nameToken.set(e.sender.value)
}
});


А вот и шаблон:



Привет {name}




Теперь, при вводе данных в текстовое поле, вместо {name} будет подставляться актуальное значение.

Другими словами: свойство Node#binding представляет собой объект, свойствами которого могут быть токены.

Node подписывается на изменения значения таких токенов и своевременно обновляет представление, при чем только те его части, которые реально изменились.



Конечно же не могу обойти вниманием пример с Token#as:

let Node = require('basis.ui').Node;
let nameToken = new basis.Token('');

new Node({
container: document.body,
template: resource('./template.tmpl'),
binding: {
name: nameToken.as(value => value.toUpperCase())
},
action: {
input: (e) => nameToken.set(e.sender.value)
}
});


Уже догадались чтобы будет выведено?



Вы конечно можете возразить, мол:

пппфффф… в ангуляре то же самое делается вообще без единой строчки кода


Да, но позже вы увидите как элегантно basis.js справляется с гораздо более сложными задачами.



Не смотря на то, что в этой части нашего цикла было больше теории чем практики, мы рассмотрели один из важнейших аспектов basis.js, который поможет нам в понимании дальнейших тем.



Спасибо за внимание!



P.S.: если вы, как и я, любите ES6 и хотите использовать его вместе с basis.js, тогда вам понадобится вот этот плагин.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/304078/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Позвольте представить, Shadow DOM API на основе слотов

Суббота, 25 Июня 2016 г. 23:05 (ссылка)

Предлагаю вашему вниманию перевод статьи «Introducing Slot-Based Shadow DOM API» автора Ryosuke Niwa, написанную им в блоге WebKit осенью прошлого года.



Мы рады анонсировать что базовая поддержка нового Shadow DOM API на основе слотов, которую мы предлагали в апреле (прим. переводчика: речь идёт об апреле 2015) уже доступна в ночных сборках WebKit после r190680. Shadow DOM это часть Веб Компонентов – набора спецификаций, изначально предложенных Google для того чтобы сделать возможным создание переиспользуемых виджетов и компонентов в вебе. Shadow DOM, в частности, предоставляет легковесную инкапсуляцию DOM дерева, позволяя создавать на элементе параллельное дерево, так называемое «теневое shadow дерево», с помощью которого изменяется отрисовка элемента без изменения DOM. Пользователи такого компонента не смогут ненароком что-то в нём изменить, ведь его shadow дерево не является привычным потомком элемента-хоста. Кроме того, действие стилей также ограничено областью действия (scope), а значит CSS правила, объявленные снаружи shadow дерева не применяются к элементам внутри такого дерева, а правила, объявленные внутри – к элементам снаружи.



Изоляция стилей

Первое значительное преимущество использования shadow DOM – это изоляция стилей. Представим, что мы хотим создать собственный прогресбар. Например, следующим образом мы могли бы использовать два вложенных div'а для того чтобы представить сам прогресбар и ещё один div с текстом, в котором показывать процент выполнения:




Обратите внимание на элемент template, использование которого позволяет автору включить сниппет HTML-текста, чтобы позже быть инстанциированным путём создания клона. Это первая фича «веб компонентов», внедрённая нами в WebKit; позже её включили в спецификацию HTML5. Элементу template в документе разрешено появляться в любом месте (скажем, между table и tr), а содержимое внутри template инертно и не выполняет скриптов и загрузку изображений или любых других ресурсов. Таким образом, пользователю сего прогресбара будет достаточно инстанциировать и обновлять его как показано ниже:

var progressBar = createProgressBar();
container.appendChild(progressBar);
...
progressBar.updateProgress(10);


С такой реализацией прогресбара есть одна проблема: оба его div'а доступны любому желающему, а стили не ограничены только рамками самого элемента. К примеру, стили прогресбара, определённые для CSS класса progress будут так же применены и к следующему HTML:


Pending an approval



А стили других элементов будут переопределять внешний вид прогресбара:


Мы могли бы обойти эти ограничения, дав прогресбару имя custom element, например custom-progressbar чтобы ограничить область действия стилей, а затем проинициализировать все остальные свойства в all: initial, однако в мире Shadow DOM есть более элегантное решение. Основная идея в том, чтобы представить внешний div в качестве дополнительного слоя инкапсуляции так что пользователи не увидят что происходит внутри (создание div'ов для лейбы и самого ползунка), стили прогресбара не будут вмешиваться в работу остальной страницы и наоборот. Для этого нам понадобится сначала создать ShadowRoot, вызвав метод attachShadow({mode: 'closed'}) у прогресбара, а следом вставить в него DOM узлы, необходимые для нашей реализации. Допустим, мы и дальше используем div для задания хоста данному shadow root, тогда мы можем следующим образом создать новый div и приаттачить shadow root:



Обратите внимание, что элемент style находится внутри template и будет склонирован в shadow root вместе с div'ами. Это ограничит область действия стилей этим самым shadow root. Точно так же стили снаружи не применяются к элементам внутри.

Совет: во время дебага может оказаться полезным режим open shadow DOM, при котором shadow root будет доступен через свойство shadowRoot элемента-хоста. Например, {mode: DEBUG ? 'open' : 'closed'}



Копозиция слотов

Внимательный читатель к этому моменту наверняка задался вопросом: почему бы не сделать это средствами CSS и не лезть в DOM? Стилизация это концепция представления, зачем же мы добавляем новые элементы в DOM? На самом деле, первый публичный рабочий черновик CSS Scoping Module Level 1 определяет правило @scope как раз для этих целей. Зачем же понадобился ещё один механизм изолирования стилей? Хорошей причиной для имплементации послужило то, что элементы реализованные внутри компонента скрыты от внешних механизмов обхода узлов, таких как querySelectorAll и getElementsByTagName. Из-за того что по умолчанию узлы внутри shadow root не обнаруживаются этими API, пользователи компонент могут не задумываться о внутренней реализации каждого компонента. Каждый компонент представлен в виде непрозрачного элемента, детали реализации которого инкапсулированы внутри его shadow DOM. Имейте в виду, что shadow DOM никоим образом не заботится о cross-origin ограничениях как это делает элемент iframe. При необходимости другие сценарии смогут проникнуть внутрь shadow DOM. Однако, есть и другая причина по которой появился этот механизм – композиция. Допустим, у нас есть список контактов:


и хотим мы каждому пункту контактной информации из списка добавить красивостей при включённых скриптах:



Вместо того чтобы копировать весь этот текст в наш собственный shadow DOM, мы могли бы следующим образом использовать именованные слоты для отрисовки текста в коде нашего shadow DOM не меняя его:



Концептуально слоты – это незаполненные пробелы в shadow DOM, заполняемые потомками элемента-хоста. Каждый элемент назначается слоту с именем, определённым в атрибуте slot:


Таким образом мы присоединяем к li наш shadow root, а каждый span с атрибутом slot назначается слоту с соответствующим именем внутри shadow DOM. Взглянем подробнее на шаблон shadow DOM:

Name:





Email: Unknown

Address: Unknown
В этом шаблоне имеется два слота с названиями email и address, а также слот с названием fullName, содержащий внутри себя два других слота firstName и lastName. Слот fullName пользуется техникой фолбека, когда firstName и lastName отображаются только в случае отсутствия узлов назначенных fullName. Несмотря на то, что в данном случае каждому слоту назначен ровно один узел, мы могли бы назначить множество элементов с одинаковым атрибутом slot одному и тому же слоту, тогда бы они отображались в том же порядке, в каком они расположены потомками хост-элемента. Можно также использовать безымянные стандартные слоты, их заполнят те потомки хоста, у которых не указан атрибут slot. Когда браузер рендерит этот компонент, содержимое li заменяется на shadow DOM, а слоты внутри него заменяются назначенными узлами так, будто на самом деле отображается следующий DOM:


Как видите, основанная на слотах композиция это мощный инструмент, позволяющий виджетам вставлять в страницу содержимое без клонирования и изменения DOM. С его помощью виджеты могут реагировать на изменения их потомков не прибегая к MutationObserver или каким-либо явным уведомлениям от сценариев. В сущности, композиция превращает DOM в связующий механизм коммуникации между компонентами.



Стилизация хост-элемента

Есть ещё один момент, который стоит отметить в предыдущем примере – мистический псевдокласс :host:


Этот псевдокласс, как следует из его имени, применяется к хосту shadow DOM, в котором находится это правило. По умолчанию, авторские стили снаружи shadow DOM имеют более высокий приоритет в сравнении со стилями внутри shadow DOM. Это сделано чтобы внутри компонента можно было определить «стили по умолчанию», а пользователям компонента дать возможность их переопределять когда нужно. В дополнение, компонент может определить принципиально важные для его отображения стили (такие, например, как ширина или display) с ключевым словом !important. Любые !important правила внутри shadow DOM считаются более приоритетными тех !important, что объявлены снаружи.



Дальнейшая работа

Много работы ещё впереди относительно внедрения Веб Компонентов. Мы бы хотели позволить стилизировать слоты shadow DOM через стили соответствующих внешних узлов. Есть также пожелания научить компоненты встраиваться в тему документа, а также выставлять наружу стилизируемые части в виде псевдоэлементов CSS. В долгосрочной перспективе мы бы хотели увидеть императивный DOM API для манипуляции назначением слотов, мы уже давно предлагали это сделать. А ещё мы заинтересованы в дополнении shadow DOM произвольными (custom) элементами. Вкратце, custom elements API даёт авторам возможность ассоциировать классы JavaScript с конкретным именем элемента в документах HTML; отличный способ идеоматически назначать произвольное поведение и shadow DOM. К сожалению, на данный момент существует несколько противоречивых предложений о том как и когда создавать произвольные элементы. Чтобы помочь направить обсуждение в W3C мы планируем сделать прототип в WebKit. Для сборки пакетов и поставки Веб Компонентов мы работаем над модулями ES6. Как и Mozilla, мы верим что модули радикально изменят отношение авторов к структурированию их страниц. В конечном счёте мы хотели бы спроектировать API создания полностью изолированных веб компонент с подобными iframe политиками безопасности, основанными на shadow DOM и произвольных элементах. В заключение, хотелось бы отметить что мы действительно очень гордимся тем, что значительные возможности Веб Компонентов появляются в WebKit, мы будем и дальше писать о новых появляющихся возможностях. В случае если у вас остались какие-то вопросы обращайтесь напрямую ко мне, @WebKit или к Джону Дэвису.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/304112/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Как стать профессиональным веб-разработчиком: практическое руководство

Среда, 23 Июня 2016 г. 01:46 (ссылка)



Дорога длинна и трудна, но интересна и полезна!



Статья задумывалась как практическое руководство для желающих стать профессиональным веб-разработчиком. Я уже более 20 лет пишу код для веба. Я ежедневно работаю с веб-разработчиками и помогаю им. В статье я опишу, что вам нужно выучить, когда вам нужно это выучить и где взять информацию (чаще всего даже бесплатно). Затем я дам совет по получению реального опыта, и что самое важное – по получению денег за написание кода.



По статье разбросано множество ссылок на бесплатные и важные ресурсы. Для простоты я собрал их в PDF и разбил по категориям. Мне не платят за упоминания сайтов, ссылки на которые я привёл – я всего лишь хочу порекомендовать вам лучшие ресурсы, чтобы помочь вам достичь вашей цели.



Что нужно помнить:



1. Статью разрешается пролистывать



Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:



Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.



2. Попробуйте всего понемногу, а затем выбирайте специализацию.



Деньги – не самое важное. Вам необходимо ЛЮБИТЬ ваше занятие! Но вы не узнаете, что вам нравится, пока не попробуете.





Найдите свою страсть, а потом монетизируйте её



Руководство поможет вам ознакомиться с как можно большим количеством областей веб-разработки как можно быстрее. А потом поможет вам выбрать специализацию в той области, что вам понравилась. Сначала вы не достигнете совершенства ни в чём – вы выучите основы, и потом продолжите изучение. Найдите свою страсть, и я покажу вам, как двигаться дальше.



Я решил писать код. Мне нравится веб. Я не знаю, с чего начать





У вас всё получится!



Поздравляю! Это серьёзный первый шаг и начало чего-то весьма захватывающего. Но это может оказаться и очень сложным. Не волнуйтесь, я помогу.



Сначала вам нужно быстро познакомиться с основами всех областей веб-разработки («полный цикл»). Обучение будет разнообразным, но неглубоким. Это нужно для того, чтобы найти область, которая вам нравится, а также приобрести основные навыки в разных областях. Тогда вы сможете понимать и работать с большим набором задач, вне зависимости от того, на чём вы остановите свой выбор.



Изучите основы HTML



Язык разметки гипертекста, Hypertext Markup Language (HTML), контролирует содержимое и разметку того, что вы видите в браузере. Начав с него, вы получаете интерфейс пользователя, с которым можно взаимодействовать, и видите результаты работы своего кода. При изучении более сложных языков его важность будет возрастать. Вам ведь не нужно кодить вслепую.



Вот, что вам нужно изучить на тему HTML:





Я уже знаю основы HTML



Круто! Это очень важный шаг. Теперь изучите основы JavaScript.



Изучите основы JavaScript



JavaScript – язык веба, и все основные браузеры (Chrome, Firefox, Safari, IE, множество других) поддерживают его. Каждый сайт, каждое веб-приложение, которым вы пользовались, скорее всего, содержит огромное количество JS-кода. Не говоря уже о том, что язык набирает популяность и на других платформах – сервера, настольные компьютеры, другие устройства.



Пока вам нужны основы, и для этого подойдут следующие ресурсы:





Я знаю основы JavaScript и HTML



Потрясающе! Теперь добавим к вашим навыкам CSS



Изучите CSS



CSS, или Cascading Style Sheets (каскадные таблицы стилей). Используются для настройки внешнего вида элементов HTML на странице. Ознакомьтесь с бесплатным обучающим материалом от Mozilla, а затем обращайтесь к ресурсу CSS-Tricks для решения самых сложных проблем (справа вверху есть поиск).



Переходим к бэкенду



До сих пор мы с вами рассматривали то, что называют «фронтендом» веб-разработки. Вы ознакомились с основными языками, работающими в браузере. Пора переходить к бэкенду – коду, работающему на сервере. Не волнуйтесь, сервер вам не понадобится – ваш компьютер справится с этим.



Языков для бэкенда масса, но поскольку вы знакомы с JavaScript, я порекомендую изучить использование Node.js. Он позволяет запускать JS-код на сервере, а не в браузере.



В дополнение к этому вам необходимо изучить Express и MongoDB.



Express


Это библиотека, с помощью которой Node.JS может работать веб-сервером (слушать запросы от страниц и отправлять им ответы).



MongoDB


Это база данных, позволяющая вам хранить и извлекать информацию.



Изучить три эти темы можно благодаря следующему прекрасному и бесплатному обучающему материалу, и его продолжению.



Мне нужно выбрать между «фронтенд», «бэкенд» и разработкой полного цикла



После того, как вы попробовали оба варианта разработки, настало время делать выбор. Если вы не успели их попробовать – обратитесь к предыдущему разделу статьи, чтобы заполнить пробелы в ваших знаниях.









К этому моменту вы писали два типа кода. Один предназначен для взаимодействия с пользователем, другой – с данными. Что вы предпочитаете?



Взаимодействие с пользователем? Поздравляю, вы фронтенд-разработчик!



Взаимодействие с данными? Поздравляю, вы бэкенд-разработчик!



Оба? Поздравляю, вы разработчик полного цикла!



Ничего не понравилось? Поздравляю, веб-разработка – это не для вас. Возрадуйтесь, что вы поняли это сейчас, и не потеряли кучу времени и денег. Не готовы сдаваться? Может, вам не попался язык, который пришёлся бы вам по душе? Попробуйте изучить другие языки в разделе «Я хочу быть бэкенд-разработчиком».



Я хочу быть разработчиком полного цикла



Круто. Вам нужно ознакомиться со всем содержимым разделов «Я хочу быть бэкенд-разработчиком» и «Я хочу быть фронтенд-разработчиком».



Я хочу быть фронтенд-разработчиком и я знаю основы JavaScript, HTML и CSS



Для эффективной работы фронтенд-разработчиком вам необходимо в совершенстве овладеть HTML, CSS и клиентским JavaScript. Также вам нужно будет хорошо разобраться в нескольких важных фреймворках. Вы приобретёте навыки, которые работодатели и клиенты ожидают найти в разработчиках фронтенда.



К этому моменту вы уже должны знать основы HTML. В противном случае вернитесь к разделу «Изучите основы HTML».



Изучите промежуточный и продвинутый HTML


Ознакомьтесь с обучающим материалом по промежуточному HTML, а затем – по продвинутому.



Изучите продвинутый клиентский JavaScript




Отличная серия книг по JS, при этом бесплатная



Для поднятия вашего уровня владения JavaScript, я рекомендую серию книг «You Don’t Know JS» за авторством Кайла Симпсона. Автор выложил всю серию в онлайн совершенно бесплатно:





Кроме того, вашим лучшим другом должен стать и MDN JavaScript.



[Также совершенно бесплатно вам доступен превосходный перевод отличной книги "Выразительный JavaScript" — прим.перев.]



Знать «троицу фронтенда», HTML, CSS и JavaScript – это, конечно, здорово. Но для зарабатывания денег придётся вам познакомиться с некоторыми фреймворками.



Изучите jQuery


Это самая популярная библиотека JS всех времён. Хотя из-за некоторых новых фреймворков важность jQuery чуть поуменьшилась, если вы ищете работу, велика вероятность, что jQuery будет присутствовать в описании необходимых навыков (и упоминаться на собеседовании) ещё много лет.



Рекомендую изучить jQuery при помощи материалов FreeCodeCamp – это быстрый и эффективный метод. После этого отправляйтесь на официальный обучающий сайт – там вы найдёте дополнительные инструкции.



Также вам понадобится держать под рукой документацию по jQuery API.



Изучите популярный JS-фреймворк


Фреймворки делают работу с определённым языком или технологией легче, поскольку решают наибольшие проблемы, существующие у выбранной технологии. JavaScript очень благотворно повлиял на разработку и популяризацию фреймворков.



Чуть ли не раз в неделю появляется новый фреймворк, который прочат на место нового стандарта разработки. Вам нужно будет прошерстить сайты с вакансиями и немало погуглить, чтобы выяснить, какой фреймворк популярен на вашем рынке. Также рекомендую инструмент от Hacker News по оценке тенденций рынка вакансий.



Во время написания этой статьи следующие фреймворки пользовались популярностью:







React JS


React создали разработчики Facebook для работы с их архитектурой Flux. Это JS-библиотека для создания интерфейсов. Не так давно она вырвалась на первое место по популярности, перегнав Angular. Начинайте с React. Здесь можно найти хороший бесплатный курс для начинающих.



Angular 1 и 2


Angular JS создали разработчики Google, и он быстро набрал популярность. Многие компании сильно вложились в него, и, судя по графику выше, он всё ещё популярен. К сожалению, в Google приняли решение полностью переписать Angular при разработке 2-й версии. Поэтому Angular 1 и Angular 2 получились практически полностью разными. Если вам хочется стать экспертом в Angular, придётся изучить оба фреймворка. Возможно даже, что вам окажется достаточно и первой версии – пока ещё есть время. Но время это уже на исходе. Большинство работы, связанной с Angular, постепенно переходит на Angular 2. В Code School есть интересный бесплатный курс по Angular 1. А для изучения Angular 2 посмотрите бесплатные видео.



Ember JS


Для людей с опытом работы в Ember JS пока ещё есть места, но судя по графику, он уже помирает. Его не поддерживают такие монстры, как Google или Facebook, а вы и так будете загружены изучением React и Angular. Но если вам интересно, можете почитать официальное руководство по Ember JS.



Выбрав наиболее подходящий фреймворк и хорошенько ознакомившись с ним, стоит изучить идущий в паре с ним CSS-фреймворк. Два крупнейших игрока на этом рынке сегодня – Bootstrap и Material Design.



Bootstrap


Bootstrap сделали разработчики Twitter, и он уже довольно взрослый и популярный. Версии Bootstrap существуют для Angular, Angular 2 и React.



Material


Material – это набор правил дизайна, разработанный в Google. Он набирает популярность, существуют его версии для Angular и React. Поскольку Angular – это тоже детище Google, сочетается Material с ним превосходно.



Вот вам несколько ссылок:





Поздравляю! У вас есть ключевые навыки фронтенд-разработчика!





Вы только посмотрите на него!



Я хочу быть бэкенд-разработчиком



Прекрасно! Первый шаг – выбор языка. Для работы с бэкендом существует много языков, и у каждого есть свои преимущества и недостатки. Ознакомьтесь с таблицей языков программирования, отсортированных по популярности. Все они уже десять лет входят в десятку лучших. Отмеченные зелёным – это веб-языки, которые с годами набирают популярность.





TIOBE Index of Programming Languages, www.tiobe.com/tiobe_index?page=index



Концентрируйтесь на языках, чьи названия я обвёл зелёной рамкой. Если вы не знаете их, начинайте сверху таблицы и идите вниз. Останавливайтесь, когда найдёте то, что вам нравится, и копайте вглубь!



Если вы знакомы с одним из отмеченных зелёным цветом языков, и он вам нравится – концентрируйтесь на нём.



Java


Чрезвычайно популярный язык, запускающийся почти везде. Разработан в Sun Microsystems (сейчас им владеет Oracle). На этом языке пишутся приложения для Android. Его также можно использовать для создания десктопных приложений, и, конечно, веб-приложений (как отдельных приложений бэкенда, так и работающих в паре с JSP). Он развитый, стабильный, и для его изучения есть огромное количество ресурсов. Кроме того, это самый популярный язык для изучения объектно-ориентированного программирования в колледжах и университетах. Вот неплохой курс по Java для начинающих.



C#


C# был создан в компании Microsoft как прямой конкурент Java. До недавнего времени его поддержка на системах, не принадлежащих Microsoft, была не ахти – но сейчас ситуация выправляется. Как и Java, этот язык объектно-ориентирован, и может использоваться как для создания веб-приложений (как отдельно, так и совместно с ASP.Net), так и десктопных приложений. Если вы пользуетесь ОС Windows, и вам нужна более привычная среда разработки, C# может подойти вам. Ознакомьтесь с бесплатным курсом по языку от Microsoft Virtual Academy.



Python


За ним не стоит огромная компания, как за языками Java или C#, но Python – отличный язык для того, чтобы быстро выполнять поставленные задачи. Его относительно легко учить, и с каждым годом он набирает популярность. Если другие языки пришлись вам не по вкусу, вы можете углубиться в него. Лучше всего начать отсюда.



JavaScript


Если вы читаете эту статью с начала, то с JS вы уже разобрались. С пришествием Node.JS и популярностью npm (системы управления пакетами, Node Package Manager), серверный JavaScript несомненно будет и дальше набирать популярность. Стоит изучения.



Если вы раньше этого не сделали, сейчас самое время изучить Node.JS, Express и MongoDB при помощи этого превосходного бесплатного изучающего материала и его продолжения.



Ruby


Это странный язык. Те, кому он нравится, влюблены в него по уши. Он входит в десятку лучших, но рост его популярности замедляется. Он представляет собою гибрид между функциональным и императивным программированием. Рекомендую попробовать – вдруг вы станете одним из ярых его приверженцев. Рабочие места для Ruby будут существовать ещё долго. Но обязательно проверьте свой рынок вакансий, чтобы хоть какие-то компании были заражены интересом к Ruby.



Лучше всего учить Ruby на ресурсе RubyMonk



Что насчёт PHP?


На рынке полно вакансий для PHP, но, по крайней мере, судя по нашей табличке, он теряет популярность. Я выделил его жёлтым, поскольку это всё ещё неплохой выбор для создания карьеры. Если говорить честно, я сам не большой фанат PHP – возможно, это предубеждение играет свою роль. Но я не могу представить, чтобы через 5-10 лет PHP стал бы популярнее JavaScript, хотя сейчас он более популярен, и вакансии для PHP всё ещё будут существовать.



Я много чего изучил, но у меня нет реального опыта





Ну что, давайте наработаем вам опыт!



Без опыта работы очень сложно устроиться на работу. Сначала нужно закончить парочку персональных проектов, чтобы освоиться с их созданием от начала до конца. А когда вы начнёте работать над ними, очень полезным будет изучить способ управления и публикации кода. Для этого вам потребуется GitHub.



GitHub


GitHub это онлайн-репозиторий на платформе Git. Он позволяет хранить, управлять и публиковать код. Если вы уже работаете разработчиком, вы просто обязаны иметь там учётную запись. Изучить работу с GitHub вы сможете из этого обучающего материала «Hello World», а также из интерактивного обучающего материала по использованию платформы Git.



Личные проекты


Разобравшись с GitHub, нужно приступать к разработке своих проектов. И вот вам пара идей:


  • Сделайте простенький блог (вот вам обучалка для React и Node);

  • Сделайте простой календарь (обучалка для C# и .Net).





На ресурсе Free Code Camp вы найдёте разнообразные примеры проектов, включая те, что требуют только фронтенд. Два моих любимых, это:





Реальный опыт


Теперь вам нужен реальный опыт. Это значит, работать на кого-то ещё. Персональные проекты – вещь хорошая, но их недостаточно для того, чтобы успешно соревноваться на рынке работы. Для этого существует несколько вариантов.



1. Внесите вклад в проект с открытым кодом



Благодаря популярности GitHub существуют миллионы открытых проектов, в которых есть проблемы (ошибки), которые только и ждут, чтобы их исправил кто-то вроде вас. Включить в резюме упоминание об участии в известном открытом проекте – это отличный способ повысить ваш статус. Лучше всего найти себе проект по душе при помощи ресурса Code Triage. Он поможет выбрать наилучший проект для вас и будет отправлять вам задачи по почте каждый день.



2. Поработайте на знакомого или родственника



Выберите друга или родственника, владеющего своим предприятием, и сделайте для него веб-приложение или сайт, или улучшите существующий. Только выбирайте аккуратно – вам нужен проект подходящего масштаба. Правильный выбор родственника также поможет вам избежать неприятностей. В идеале вам нужен проект, который вы сможете сделать за срок менее 90 дней, и человек, с которым у вас очень честные взаимоотношения. Не бойтесь признаваться, когда что-то пошло не так, как было запланировано, и не бойтесь отказывать и давать отпор на определённые запросы или ожидания. Также убедитесь, что ваш отказ от проекта или отказ от него вашего партнёра не повлияет на ваши отношения.



3. Поработайте на благотворительные организации



Очень полезный способ набрать опыт – поработать на благотворительные и некоммерческие организации. Вы можете обратиться к милой вашему сердцу организации подобного рода и предложить свою помощь. Вы можете найти нужный проект через сайт Catch a Fire. А если вы полностью пройдёте программу обучения на сайте Free Code Camp и получите все сертификаты, вы получите доступ к некоммерческим проектам, где сможете применить ваши навыки.



4. Рабский труд



Дерзкий получился заголовок для следующего предложения – но, по-моему, если вы выберете этот вариант, а потом найдёте нормальную работу или пойдёте фрилансить, он покажется вам рабским трудом. На сайтах Upwork, Fiverr и PeoplePerHour можно преуспеть в роли разработчика, но вам придётся назначать очень маленькую плату и смириться с положением человека, просто зарабатывающего опыт.



У меня есть опыт, помогите мне с работой





Готовы бросить вызов миру?



Первое правило – не называйтесь «веб-разработчиком».







А что же это за разница такая между веб-разработчиком и разработчиком полного цикла? А вот получается, что разница составляет $7000 в год. Если серьёзно, простая смена названия может решать довольно много.



Сделайте приличное резюме


Несмотря на все весёлые истории про людей, которые вытворяют что-то невообразимое, чтобы привлечь внимание работодателя, вам всё равно необходимо будет подготовить хорошее резюме. Эта статья с ресурса Tech Republic поможет вам с этим.



Создайте веб-сайт с портфолио


Ещё важнее, чем резюме, иметь хороший веб-сайт с портфолио. Возьмите все реальные проекты, которые вы делали, разместите их на персональной страничке. Почитайте хорошие советы по созданию такого сайта в статье с SitePoint. Ещё очень важно пояснить, как именно каждый из ваших проектов решил бизнес-задачу вашего клиента (или работодателя). В таком случае ваш сайт будет на голову выше других.



Подготовьтесь для интервью


С этим вам поможет моя предыдущая статья How to Win the Coding Interview.



Подкачайте необходимые для интервью умения


Вам нужно подготовиться не только к написанию кода. В хорошей статье с Life Hacker описано много полезной и ценной информации.



Главное – закрепиться на рынке


Не сильно переживайте насчёт получения работы мечты у работодателя мечты с зарплатой мечты. Сначала просто добейтесь получения работы, где вы будете писать код за деньги. Получив больше опыта, сможете планировать следующий шаг.



Хочу быть фрилансером


Сам себе хозяин – это хорошо, но это одновременно и огромное давление, и большие сложности. Лучший источник информации по фрилансу из всех, что я видел — DoubleYourFreelancing.com. У него есть серия статей, которые помогут вам стать фрилансером лучше, чем это получилось бы у меня. Читайте.



Ещё один вариант, если вы в себе уверены – сервис Toptal. Они принимают лишь 3% из всех, кто подаёт заявки, и этот процесс очень сложен, но если вы попадёте туда – у вас будет доступ к хорошо оплачиваемым работам, над которыми вы сможете трудиться удалённо.



Я начал работу, но чувствую, что зашел в тупик


Понимаю. Это нелегко, и если кто-то говорил вам обратное – он либо этим не занимался, либо пытается выманить у вас деньги. Если вы чувствуете, что зашли в тупик, попробуйте следующие варианты:



Освежите ваше первоначальное намерение


Спросите себя, запишите на бумаге, почему вы решили идти по этому пути. В силе ли всё ещё ваш ответ? Если да – то зачем останавливаться? Вперёд!



Оцените свои реальные возможности


Теперь, когда вы знаете больше о том, что требуется для реализации ваших желаний, и что вы можете сделать – у вас есть хорошее представление о том, что может случиться в лучшем случае, в худшем случае. Поймите, что, скорее всего в жизни реализуется «наиболее вероятный» случай, который будет чуть ближе к «лучшему случаю», чем к «худшему». Вам не надо бояться – идите вперёд. У вас всё получится!



Прочтите следующую статью



"Не бросайте – каждый эксперт был когда-то новичком"
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/303896/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Орит_Кохан

Генератор HTML+CSS шаблонов (CSS Layout Generator)

Суббота, 18 Июня 2016 г. 17:32 (ссылка)

Это цитата сообщения технология Оригинальное сообщение

Генератор HTML+CSS шаблонов (CSS Layout Generator)

http://csstemplater.com/

CSS Layout Generator - онлайн генератор шаблонов HTML + CSS.
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

VIM: зачем, если есть IDE, и как?

Пятница, 17 Июня 2016 г. 18:13 (ссылка)

Сегодня вышел текст о том, как человек перешёл с Sublime на VIM. В комментариях, как обычно это бывает, появились сообщения в духе "Зачем мне тратить время на Vim, если есть IDE, где всё работает?" (люди даже статьи на эти темы пишут). Хотел внести свои пять копеек, но объём написанного плавно перевёл текст из разряда "комментарий" в разряд небольшой статьи.



В целом, всё, что ниже — это вкусовщина, конечно. Нравится вам ваша IDE (или ваш текущий инструмент), да и пожалуйста. Используйте для текущих задач то, чем вы владеете лучше всего, это аксиома эффективной работы. Но если у вас вдруг появилось немного времени на повышение вашей эффективности в целом, то попробую вас заинтересовать именно Vim'ом, сравнивая его с некой обобщенной IDE.





Зачем?



На мой взгляд минусы любой IDE в сравнении с VIM (или, наоборот, преимущества VIM) следующие:




  • IDE значительно тяжелее VIM (даже с плагинами); отсюда очевидный минус, что для IDE — нужна достаточно мощная рабочая станция.

  • IDE обычно поддерживает небольшое число языков/платформ. Vim же единообразно поддерживает всё на свете. В Vim я пишу на Ruby/Rails, Python (или так), C, OpenCL (+PyOpenCL), CUDA (+PyCUDA), bash, Go, XML, YAML, HTML, Markdown, Textile, CSS, .ini, Sage, Magma, GAP (последние 3 — системы компьютерной алгебры), LaTex, а также редактирую специфические конфиги некоторых программ (типа X, mutt и т.п.) и редактирую почту. Конфиги и почта — это специфический пример, но, что касается языков программирования и разметки, то вам понадобится осваивать несколько IDE со своими особенностями, горячими клавишами и т.п. только потому, что IDE обычно имеет узкий круг поддерживаемых технологий. Vim (как и Emacs) умеет почти всё, и вам не надо заново привыкать к инструменту. Кроме того, создателю плагина надо сосредоточиться только на том, чтобы хорошо сделать поддержку специфических для ЯП вещей, а всё остальное Vim уже умеет. Как следствие, при переходе от одной технологии к другой (условно, сегодня пишете на Ruby, завтра на Python, а потом обратно), вы не лишитесь привычных базовых вещей, как это могло быть при смене IDE, т.к. останетесь в Vim.

  • Vim, как следствие из предыдущего, поддерживает вещи, которые никто другой не поддерживает: попробуйте найдите IDE для Magma. А для Vim всё есть. Объясняется это тем, что для редких вещей создавать IDE неоправданно, а написать базовый плагин для Vim не так сложно.

  • Vim может работать в режиме только консоль. Иными словами с Vim ваш компьютер может быть тонким клиентом. Конкретно в моём случае есть 10-ти летний Full HD ноутбук IBM'овский. Ясно, что его уже на нормальное использование как рабочей станции для программирования не хватает ну никак: тесты на нём будут идти вечность, а упомянутые IDE будут ощутимо тормозить. В тоже время есть доступ по ssh к мощному серверу, на котором в результате и ведётся разработка: гоняются тесты, работает редактор и т.п. Кроме того, связка vim + tmux + ssh — это постоянно открытая рабочая сессия. Начал работать на одной машине (к примеру, на работе), отлогинился не закрывая редактора и т.п., продолжил из дома с ноутбука — чрезвычайно удобно. А в моём случае, так ещё и для некоторых задач основное вычислительное оборудование (несколько GPU) физически воткнуто в сервер, т.е. помимо удобства, описанного выше, быть тонким клиентом ещё и необходимость. Попробуйте-ка проделать всё это в своей IDE!

  • Сама идеология Vim — очень мощная штука в сравнении с классической IDE. Есть книга Practical Vim: Edit Text at the Speed of Thought, её название ("редактируй текст на скорости мышления") прекрасно отражает результат, который вы получаете на выходе. К сожалению, в этом сложно убедить человека, который не попробовал (хотя некоторые пытаются). Суть в том, что эта идеология настолько заразна, что хочется перенести её с редактора на все сферы общения с компьютером: браузер, pdf-просмоторщик, почтовый клиент, музыкальный проигрыватель, файловый менеджер и многое другое.

  • С Vim вам не понадобится мышь, если вы конечно этого захотите (если не захотите, то Vim отлично интегрирован с мышью). Мне больно смотреть, как люди мучаются с тачпадами или носят с собой мышки, располагая их на разных поверхностях, при работе с ноутбуком.

  • Vim невероятно расширяем, любая ваша хотелка так и или иначе реализована или может быть реализована в Vim.

  • Ваша конфигурация для VIM вообще без труда переносится с машины на машину. Будет ли так просто с вашей IDE?



Если не хватило, вот ещё немного литературы на тему: раз, два, три.



И да, сообщество Vim помешано на эффективности, постоянно появляются новые крутые инструменты, направленные на ускорение, автоматизацию и облегчение того, или иного. И, если у вас ляжет к этому душа, то работа в VIM доставим вам массу удовольствия.



Как?



Не стоит сразу ставить адские комбайны из чьих-то конфигов. Да, они выглядят круто, но там часто неинтуитивные горячие клавиши, много магии и лишнего. Пройдите vimtutor. Затем ставьте голый VIM (обычно он не такой голый, как кажется на первый взгляд) и работайте. Ну, ок, уговорили. Настройте в vimrc set nocompatible (убрать совместимость с VI) или поставьте sensible (супербазовый vimrc с настройками типа nocompatible), или работайте в neovim (новая в основном совместимая с VIM реализация VIM с человеческими настройками по-умолчанию).



В процессе работы у вас будут появляться хотелки. Как только появится хотелка, нужно:




  • Поискать, эта функция может быть среди базовых возможностей VIM (а чаще оно так и есть).

  • Если не нашли, то ищите соответствующий плагин и устанавливайте. Плагины советую ставить с помощью vim-plug.

  • Обязательно читайте документацию к установленному плагину (:help ). Она всегда хорошая и понятная!



Не ставьте много плагинов за раз. Возьмите за правило, не больше 2 плагинов в день, тогда вы всегда будете знать, что есть причина поломки, или наоборот, причина ускорения работы. Да и если сразу поставить 33 плагина, то у вас в голове возникнет каша, и вы не будете использовать ни один из этих 33 даже на половину.



P.S. На всякий случай дополню: я не утверждаю, что VIM круче IDE в любой ситуации. Я утверждаю, что существуют параметры, по которым VIM круче IDE, и поэтому имеет смысл обратить на него своё внимание. Эти параметры лично для меня существенны, и я их перечислил в параграфе "Зачем?".


Original source: habrahabr.ru.

https://habrahabr.ru/post/303554/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Как называть css-классы

Понедельник, 13 Июня 2016 г. 21:54 (ссылка)

Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.



0. Прежде чем думать о названии класса, выберете подходящее название для HTML-элементов





Если это поле, используйте элемент input



Читать HTML-документ будет гораздо легче.



Пример:









Источник: Рафаэль Гоитер (французская статья)





1. Назначайте классы как можно ниже по DOM-дереву





Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.



Пример:


Lorem ipsum







main.mainly p { /* Не делайте этого */
}

/* Вместо этого присвойте название класса p :

*/
.paragraphly {
}




Источник: Крис Койер



2. Называйте классы по содержимому





Пример:

.c-header-logo {
/* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */
}




Источник: phpied.com



3. Не называйте класс по содержимому, если картинка нагляднее





Скажем, лого шапки на самом деле выглядит так:

image



Тогда не называйте его header-logo.

.guillotine {
/* О, сразу видно, что мы хотим стилизовать */
}




4. Попробуйте суффикс -like для лучшей переносимости кода.





Пример:

h3, .h3-like {
/* какое-то оформление */
}









Источник: KNACSS v4



5. Не используйте верблюжийРегистр





Это затрудняет чтение



Пример:

.navToOneModuleICreated {
font-size:2em;
}
/* против */
.nav-to-one-module-i-created {
font-size:2em;
}




Источник: Гарри Робертс



6. Пробуйте БЭМ





На сегодняшний день это одно из самых популярных соглашений.




  • Поначалу он кажется странным, но не бойтесь.

  • Порог вхождения очень низкий

  • Можно использовать его уже сейчас в любой части проекта.

  • Долгосрочные перспективы колоссальны





(двойной дефис) означает вариант элемента.



(двойное подчёркивание) означает дочерний элемент.



Пример:






.btn--warning {
/* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HMTL-код. Какое облегчение! */
}
.btn__text {
/* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */
}




Источник: Калиг, пятьдесят оттенков БЭМ



Рекомендовано: Smashing Magazine, боремся с БЭМ



7. Пробуйте ещё страшнее





БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.



Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.



Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.



Пример:



.DIMENSIONS_OF_mycomponent {
/* Куда ещё противнее. Зато теперь понятнее, о чём речь. */
/* Я использую его для классов-заготовок в SASS. */
/* Но всё же не злоупотребляйте этим правилом. */
}




8. Не сокращайте описывающие слова





Помимо уже устоявшихся nav, txt, url… следует избегать любых аббревиатур.



Источник: phpied.com



9. Пробуйте использовать только одну букву в качестве осмысленного префикса





В случае визуального компонента начинайте с c-, а в случае объекта (напр. макет) — с o-, мне просто нравится этот трюк Гарри Робертса.



Пример:






Источник: исходный код «Inuit Kitchen Sink»



11. Используйте префикс js-, если он используется только для JavaScript





Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js-.



Пример:






Источник: Дерик Бейли, книга по marionnette.js



12. Старайтесь отделить родительский элемент от дочернего





Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.



Пример:



(плохо)






(хорошо)






13. Несемантические классы должны явно описывать свои свойства.





Большинство из них содержат только одно свойство, и незачем его скрывать.



.horizontal-alignment { /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */
text-align: center;
}
/* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */
.u-text-align--center {
text-align: center;
}




14. Явные хаки (I)





Если вы не довольны вашем CSS-селектором, скажите это всем.



Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.



Подберите в вашей команде слово, подходящее для таких случаев, и придерживайтесь его на протяжении всего проекта.



Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.



Пример:

.my-component {
margin-left: -7px; /* ХАК здесь: магическое число, нужное, чтобы компенсировать пробел */
}




15. Явные хаки (II)





Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css



Опять же, Гарри Робертс подсказал



Источник: Гарри Робертс



16. Старайтесь избегать более двух слов для одного имени





Название должно говорить само за себя, в одно-два слова, иначе код будет трудно поддерживать.



Пример:

.button {
/* Хорошо */
}
.dropdown-button {
/* Всё ещё хорошо */
}
.dropdown-button-part-one {
/* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */
}
.dropdown-button-part-one__button-admin {
/* Ой, всё!!! */
}




17. Используйте атрибут data-state для указания состояния компонента





Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.



Пример:







Источник: к сожалению, не могу вспомнить, кто об этом писал, но его совет оказался весьма полезным.



18. Используйте префиксы has- или is- для состояния





Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.



Пример:

.activated {
/* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */
}
.is-activated {
/* Да, вы оформляете состояние. */
}




Источник: оформление кода в Mobify



19. Используйте дефис в качестве префикса при сочетании нескольких состояний





Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.



Пример:

.activated {





Источник: Бен Смифет



20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных





Это упрощает чтение документа.



Пример:







Источник: я узнал это, когда работал с командой Predicsis



21. Не следуйте правилам





Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.



Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:



1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3) но избегайте переусложнения.



Если правило вам не подходит, просто пропустите его



Наслаждайтесь!



Особая благодарность @HugoGiraudel, @kaelig и @gaetanbt за их отзывы.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/303174/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Книга «Создаем сайты с помощью HTML, XHTML и CSS на 100 %»

Пятница, 10 Июня 2016 г. 12:41 (ссылка)

Всем привет! Мы решили задуматься над экологией(сохранность лесов) и выпустили книгу только в электронном виде:



image Книга содержит описание языка HTML 4, XHTML, CSS2. Также описаны новые средства HTML 5, CSS 3. Подробно исследована степень их поддержки в новейших версиях популярных браузеров. Автор опирается на авторитетные стандарты W3C и WHATWG.



Материал книги исчерпывающе объясняет все основные моменты веб-дизайна динамичных и статичных веб-страниц в простой и удобной для усвоения форме: в виде набора пошаговых процедур, реализующих конкретные операции веб-дизайна, с хорошо подобранными и выразительными примерами.







Введение


Книга начинается с описания структуры документа HTML. В главе 1 на простом примере показано, из каких компонентов состоит HTML-код, применяемый для создания любой веб-страницы. Вводятся основные понятия и даются сведения о синтаксических конструкциях языка HTML — элементах, тегах, метатегах и атрибутах. Указывается, что такое заголовок и тело документа HTML, обсуждается задача структурирования документов HTML. Для освещения этих общих вопросов, относящихся к любому документу HTML, использован язык HTML 4 как наиболее широко распространенный в данное время.



В главе 2 обсуждается язык XHTML. Вы узнаете, что послужило причиной его появления и какие принципиальные новшества вносит этот язык в средства создания документов HTML. Прочитаете, что такое язык XML, как он применяется при создании документов XHTML и какие требования предъявляет язык XHTML к создаваемым на его основе документам по сравнению с языком HTML 4. Также затронуты вопросы преобразования документов на языке HTML 4 в формат, удовлетворяющий требованиям XHTML. Это далеко не праздный вопрос, поскольку сейчас в Интернете существует множество сайтов, созданных с помощью устаревших версий языка HTML, а кроме того, огромное количество пользователей работают со старыми версиями браузеров. И если ваша задача — максимально расширить аудиторию сайта, то вы должны озаботиться совместимостью кода HTML ваших страниц со средствами их просмотра на различных устройствах, включая мобильные. Мы обсудим, каким требованиям должен удовлетворять код страницы, созданной на языке HTML 4, чтобы ее мог корректно воспроизвести браузер, поддерживающий XHTML.



В главах 3–5 описываются методы создания и оформления основных частей документов HTML. Наиболее подробно рассказывается о средствах языка XHTML, но средства языка HTML 4, не вошедшие в XHTML и признанные устаревшими, также не обделены вниманием. Причина все та же — в настоящее время существует большое количество сайтов, созданных на основе HTML 4, к тому же множество людей используют устаревшие браузеры. Таким образом, каждый веб-дизайнер, даже перешедший на новый язык XHTML, должен обеспечивать совместимость своих сайтов с техническими возможностями их посетителей. Поэтому вам следует знать средства языка HTML 4, включая признанные устаревшими, чтобы правильно адаптировать уже имеющиеся веб-страницы к новым средствам их просмотра. Вы познакомитесь со средствами языка HTML для ввода текста и его форматирования, настройки внешнего вида таблиц, включения в страницу веб-графики и мультимедийной информации (аудио- и видеоклипов). Эти элементы дизайна значительно улучшают восприятие веб-страницы, превращая скучный документ в яркую и красочную витрину вашего сайта, которая не оставит равнодушным ни одного посетителя.



Узнав об основных элементах дизайна, в главах 6 и 7 вы познакомитесь с фреймами и формами. Фрейм — это вставленная в HTML-страницу другая HTML-страница.Такая структура очень удобна, когда на веб-странице нужно поместить несколько различных компонентов, отображаемых поочередно по желанию посетителя. Тем не менее в языке HTML 5 фреймы отсутствуют, вместо них предоставляются другие средства обновления содержимого различных областей веб-страниц. С формами знаком практически каждый, кто пользовался почтовыми сервисами на большинстве веб-сайтов. Формы позволяют поместить на страницу элементы управления, как в обычном интерфейсе Windows, и использовать их для ввода и отправления писем, данных интерактивных опросов и т. д. Язык HTML 5 значительно расширяет набор средств, используемых при построении форм.



На этом рассмотрение языков HTML 4 и XHTML заканчивается. Главы 8–10 посвящены очень важному средству веб-дизайна — языку CSS. Это очень эффективный и современный инструмент оформления веб-страниц, напоминающий стилевое форматирование, которое применяется в Word. В новейших версиях языка гипертекстовой разметки все средства оформления документов передаются средствам CSS. Вместо того чтобы каждый раз вводить множество параметров форматирования части документа, вы определяете стиль и применяете его там, где необходимо. В настоящее время используется CSS версии 2, и мы займемся его освоением, поскольку это основное рабочее средство оформления веб-страниц.



После ознакомления со средствами HTML 4/XHTML/CSS2 в главах 11–13 обсуждается работа с языком разработки сценариев JavaScript. Подробно описаны основные синтаксические конструкции языка и методы включения сценариев в HTML-страницы. Вы освоите основные понятия событийного программирования и научитесь создавать динамические HTML-страницы.



Завершив обсуждение средств языков HTML 4, XHTML, DHTML, JavaScript и CSS2, в главах 14 и 15 мы переходим к обсуждению возможностей новейшего, еще не завершенного языка HTML 5 по созданию современных сайтов и их оформлению с использованием средств CSS3. Язык CSS3 идет на смену CSS2, и в него включено множество новинок, позволяющих создавать выразительные веб-страницы и корректно воспроизводить их на современных устройствах, включая мобильные.



Пока языки HTML 5 и CSS3 не введены в действие и их разработка не завершена, но многие браузеры уже поддерживают некоторые новые средства, предлагаемые HTML 5 и CSS3. Вы познакомитесь с новыми средствами HTML 5, предназначенными для структурирования создаваемых документов, создания в них разделов, меню, верхних и нижних колонтитулов. Все эти новинки значительно упрощают труд веб-дизайнера при конструировании сайтов. Вы также узнаете о средствах HTML 5 для работы с графикой, включения в веб-страницу мультимедийной информации и средств ее воспроизведения. Для решения этих задач HTML 5 предлагает множество новых возможностей, позволяющих избежать использования различных проигрывателей сторонних производителей, апплетов и сценариев, неизбежных при работе с языками HTML прежних версий. Мы также обсудим новые средства HTML 5 по созданию форм на веб-страницах, значительно расширяющие возможности предыдущих версий языка HTML.



Наконец, речь пойдет о некоторых новых возможностях языка CSS3, дополняющих и расширяющих язык CSS2. Вы научитесь применять в различных областях веб-страницы графические эффекты: заливки, градиенты, поворот этих областей, создание активных обновляемых областей, придание таблицам и полям внутри форм выразительного вида. Средствами языка CSS3 можно делать многое, для чего ранее приходилось прибегать к графическим редакторам и включать в веб-страницы множество рисунков, усложняющих их структуру и увеличивающих объем загружаемой информации при просмотре.



Более подробно с книгой можно ознакомиться на сайте издательства

Оглавление

Отрывок



Для Хаброжителей скидка 25% по купону — Квинт



При покупке электронной книги — все доступные версии отправляются пользователям.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/303054/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<html - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda