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


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

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

Следующие 30  »
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)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Front-end шаблонизатор

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

Прошлую свою статью я посветил описанию «велосипеда» (загрузчика и шаблонизатора в рамках «легкого» framework’а). Волею судеб, для пары проектов я был вынужден выделить шаблонизатор и сделать его standalone версию, обогатив при этом рядом новых возможностей. Именно об front-end шаблонизаторе и пойдет речь.



Но чтобы сэкономить ваше время, прежде я обозначу тех, кому эта статья может быть интересной (ибо букв будет много):




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

  • Вы back-end разработчик, и вам интересно использование шаблонов на front-end’е.

  • Вы давно ищете какой-нибудь инструмент для систематизации своей коллекции UI-control'ов, накопившуюся за несколько лет.

  • Вы интересуетесь разработкой web-компонентов.

  • Вам хочется высказать критические замечания и порекомендовать angularJS.

  • У вас есть свободное время и вам интересно почитать об очередном велосипеде.

  • У вас нет свободного времени, но вам интересно.

  • Вы хороший и любознательный человек.







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



Например, шаблон в patterns – это просто HTML страница и ничего больше. Никакого специфичного синтаксиса вроде того, что используется в EJS и многих других шаблонизаторах.












Весь синтаксис patterns ограничивается тремя определениями:




  • Hook. {{name_of_hook}}. Зацепка, с помощью которой вы можете помечать места в шаблоне для вставки контента.

  • Model. {{::name_of_ reference }}. Так вы можете указать на свойство узла или его атрибут, который должен быть связан с объектом модели для дальнейшего манипулирования.

  • DOM. {{$name_of_reference}}. Указав с помощью этой метки на узел, вы получите возможность очень быстро обращаться к данному узлу, изменять его, прикреплять события и делать прочие рутинные вещи.





Создание шаблона





Ну давайте на примере. Создадим popup для авторизации пользователя. Нам понадобятся четыре шаблона:




  • Всплывающее окно — html.

  • Разметка для окна авторизации — html.

  • Поле для текста — html.

  • Кнопка — html.





Ниже шаблон для всплывающего окна (popup).














{{title}}



{{content}}


{{bottom}}











Как вы уже заметили – это самый обыкновенный HTML файл. В HEAD вы можете подключать CSS и JS файлы, которые будут автоматически подключены вместе с шаблоном и закэшированы.



Кэширование – это важная часть patterns. И сами шаблоны (HTML) и ресурсы (CSS и JS) сохраняются в localStorage, а это значит, что при повторном использовании шаблона, все данные будут взяты не с сервера, а с клиента, что самым благоприятным образом сказывается на скорости отрисовки. Кроме того patterns сам следит за актуальностью кэша: всякий раз patterns запрашивает HEADERs всех шаблонов и их ресурсов; и если что-то изменилось, patterns самостоятельно обновит кэш, чтобы поддерживать всю систему в актуальном состоянии. Но, вернемся к нашему окну авторизации.



Шаблон разметки (далее буду приводить только содержание тега BODY, для экономии места)




Login


{{login}}

Password


{{password}}
{{controls}}






Поле для ввода текста (в нашем случае это будет логин и пароль)



{{::value}}











Обратите внимание на то, что мы связали INPUT.value и P.innerHTML через переменную названную value, используя приведенную выше метку {{::value}}. Таким образом, если какой-то текст будет введен в INPUT, то он будет отображен и в связанном параграфе. Кроме того, созданная переменная value будет помещена в модель.



Ну и последний шаблон, необходимый для окна авторизации – кнопка.



    {{title}}




Прежде чем пойти дальше, стоит оговориться. Тот факт, что patterns в качестве шаблонов использует полноценные HTML файлы дает вам возможность открывать их отдельно от страницы, где они используются, а это дает возможность быстрой отладки стилей и логики, если таковая предусмотрена.



Присоединение шаблона





Шаблон может быть присоединен к странице (то есть отрисован) двумя способами:




  • Через вызов JavaScript метода

  • Через HTML разметку.





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



Отрисовка через JavaScript





За рендеринг шаблона отвечает метод get — _patterns.get(), который вернет экземпляр класса шаблона, который вы можете смонтировать (прикрепить к указанному узлу), через метод – render. Взгляните на пример ниже и все станет ясно.



var id = flex.unique();
_patterns.get({
url : '/patterns/popup/pattern.html',
node : document.body,
hooks : {
id : id,
title : 'Test dialog window',
content : _patterns.get({
url : '/patterns/patterns/login/pattern.html',
hooks : {
login : _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'text',
}
}),
password: _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'password',
}
}),
controls: _patterns.get({
url : '/patterns/buttons/flat/pattern.html',
hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }]
}),
}
})
}
}).render();




Самый важный параметр – это url, где мы указываем место, откуда брать шаблон. Не менее важный параметр – это hooks. Помните в шаблонах мы указывали места для контента через метку – {{name}}. В параметре hooks, мы определяем контент для каждой такой метки.



Полное описание всех параметров, которые принимает метод _patterns.get(), вы можете найти здесь. А на результат этого примера можно посмотреть тут.



Но идем дальше.



Отрисовка через HMTL разметку





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



    
0



text


password


login_button
cancel_button







В данном случае для определения hook’ов мы используем одноименные теги. То есть приведенные ниже две конструкции по своему смыслу идентичные.




0

...





_patterns.get({
url : '/patterns/popup/pattern.html',
hooks : {
id : 0,
title : 'Test dialog window',
...
}
}).render();




Обратите внимание, что тег PATTERN мы используем только для корневого узла, а дальше лишь добавляем свойство SCR, чтобы обозначить, что в качестве контента hook (зацепки) будет использоваться вложенный шаблон.



То есть следующая разметка означает, что patterns должен найти шаблон по адресу, указанному в SRC и применить его с hook’ом type в значении “text”.




text





Здесь вы можете посмотреть на работающий пример. Откройте sources of page, чтобы убедиться, что никаких вызовов JavaScript нет и в исходной разметке страницы присутствует тег PATTERN с необходимыми для отрисовки данными.



Повторение шаблона





Очень часто нам бывает необходимо повторить шаблон многократно. Самым ярким примером этого служит таблица. Чтобы ее создать нам понадобится два шаблона.



Шаблон таблицы.










{{rows}}
{{titles.column_0}} {{titles.column_1}} {{titles.column_2}} {{titles.column_3}}





И шаблон строки в таблице.




{{column_0}}
{{column_1}}
{{column_2}}
{{column_3}}





Имея эти два шаблона и данные, мы можем отрисовать нашу таблицу.



var data_source = [];
for (var i = 0; i < 100; i += 1) {
data_source.push({
column_0: (Math.random() * 1000).toFixed(4),
column_1: (Math.random() * 1000).toFixed(4),
column_2: (Math.random() * 1000).toFixed(4),
column_3: (Math.random() * 1000).toFixed(4),
});
}
_patterns.get({
url: '/patterns/table/container/pattern.html',
node: document.body,
hooks: {
titles: {
column_0: 'Column #0',
column_1: 'Column #1',
column_2: 'Column #2',
column_3: 'Column #3',
},
rows: _patterns.get({
url: '/patterns/table/row/pattern.html',
hooks: data_source,
})
}
}).render();




Здесь вы можете найти работающий пример.



Итак, чтобы повторить некоторый шаблон несколько раз нам достаточно передать значение hook (зацепки) в виде массива данных. И, как вы могли заметить, для повторения шаблона при его определении в HTML мы повторяем значения hook столько раз, сколько нам нужно, как это было ранее продемонстрировано с кнопками к окну авторизации.




login_button
cancel_button





Так же обратите внимание на то, что имена hook’ов в заголовках определены через точку {{titles.column_0}}, что позволяет нам в функции рендеринга использовать более осмысленное определение их значений. Так, все заголовки определяются в объекте titles.



Контролеры и функции обратного вызова





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



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



_patterns.get({
url : 'some_url',
callbacks: {
//Callback-function definition
success: function (results) {
var instance = this,
dom = results.dom,
model = results.model,
binds = results.binds,
map = results.map,
resources = results.resources;
...
}
},
}).render();




А вот чтобы создать контролер, нужно создать JS файл следующего содержания



_controller(function (results) {
var instance = this,
dom = results.dom,
model = results.model,
binds = results.binds,
map = results.map,
resources = results.resources;
...
});




Затем вам достаточно прикрепить его к вашему шаблону.


















{{title}}



{{content}}


{{bottom}}











И все, контролер готов. Теперь все что определено внутри вашего контролера будет запускаться всякий раз после того, как шаблон отрисован.



Однако наибольший интерес представляет объект results, который передается и в контролер, и в функцию обратного вызова.



Модель и связи





Два важных объекта, которые вы получаете – это model и binds



var model = results.model;
var binds = results.binds;




Что бы продемонстрировать, что есть что, давайте изменим шаблон для строки таблицы следующим образом:




{{column_0}}{{::column_0}}
{{column_1}}{{::column_1}}
{{column_2}}{{::column_2}}
{{column_3}}{{::column_3}}





Как вы видите мы добавили пару связей. Во-первых, мы связали свойство background каждой ячейки с переменной background_n. То же самое мы сделали и со значениями самих ячеек, связав их с переменной column_n.



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



_patterns.get({
...
callbacks : {
success: function (results) {
(function (model) {
var fun = function () {
var r = Math.round(19 * Math.random()),
c = Math.round(3 * Math.random());
model.__rows__[r]['column_' + c] = (Math.random() * 1000).toFixed(4);
model.__rows__[r]['background_' + c] = 'rgb(' + Math.round(255 * Math.random()) + ', ' + Math.round(255 * Math.random()) + ', ' + Math.round(255 * Math.random()) + ')';
setTimeout(fun, Math.ceil(50 * Math.random()));
};
fun();
}(results.model));
}
}
}).render();




Посмотреть на слетевшую с катушек таблицу можно здесь.



Итак, объект model содержит ссылки на связанные значения. Обратите внимание на свойство __rows__. Через данную конструкцию __hook__, обозначаются уровни вложенности hook’ов. Так как данные содержатся не в корневом шаблоне (шаблоне таблице), а вложены в hook rows, то и доступ к ним возможен через model.__rows__. Двойное же подчеркивание введено как превентивная мера от конфликтов имен.



Если вы помните, то в шаблоне окна авторизации мы связывали INPUT.value с P.innerHTML. В функции обратного вызова мы так же получаем и ссылку на value.



_patterns.get({
url : '/patterns/popup/pattern.html',
node : document.body,
hooks : {
id : id,
title : 'Test dialog window',
content : _patterns.get({
url : '/patterns/patterns/login/pattern.html',
hooks : {
login : _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'text',
}
}),
password: _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'password',
}
}),
controls: _patterns.get({
url : '/patterns/buttons/flat/pattern.html',
hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }]
}),
}
})
},
callbacks: {
success: function (results) {
var instance = this,
model = results.model;
model.__content__.__login__.value = 'this new login';
}
},
}).render();




С model разобрались, но что же такое binds? А binds по своей структуре тоже самое что и model, за одним лишь исключением – «на конце» не значение, а методы.



success: function (results) {
var instance = this,
dom = results.dom,
binds = results.binds,
id = null;
//Add handle
id = binds.__content__.__login__.value.addHandle(function (name, value) {
var obj = this;
});
//Remove handle
binds.__content__.__login__.value.removeHandle(id);
}




И их (методов) всего два:




  • addHandle

  • removeHandle





Как вы уже догадались, первый прикрепляет обработчик событий, а второй его удаляет. Таким образом, вы можете «повесить» свою функцию к какому-либо свойству модели, которая будет срабатывать всякий раз, когда это свойство меняется.



DOM и карта





Еще два интересных объекта – это DOM и map.



var dom = results.dom;
var map = results.map;




Изменим немного шаблон кнопки для нашего окна авторизации, чтобы продемонстрировать возможности объекта dom.



    {{title}}




Итак, мы добавили ссылку {{$button}} к узлу кнопки. Таким образом, мы отметили узел, в отношении которого patterns создаст коллекцию методов для работы с данным узлом.



success: function (results) {
var instance = this,
dom = results.dom;
dom.listed.__content__.__controls__[0].button.on('click', function () {
alert('You cannot login. It's just test. Login is "' + model.__content__.__login__.value + '", and password is "' + model.__content__.__password__.value + '"');
});
dom.listed.__content__.__controls__[1].button.on('click', function () {
alert('Do not close me, please.');
});
dom.grouped.__content__.__controls__.button.on('click', function () {
alert('This is common handle for both buttons');
});
}




Как вы видите, мы получили возможность прикрепить обработчики событий к кнопкам формы. Полный перечень всех методов, идущих «из коробки» вы найдете здесь. Там же есть и описание того, как добавить свои собственные методы.



Здесь же я лишь обращу ваше внимание на то, что объект dom имеет два свойства:




  • grouped

  • listed





Первое свойство содержит сгруппированные методы. То есть, так как на форме у нас две кнопки, то при обращении, например, к методу on (прикрепление событий), мы прикрепим событие сразу к двум кнопкам. Если же нам нужен доступ к каждой отдельной кнопке, то нам необходимо использовать свойство listed.



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



success: function (results) {
var instance = this,
map = results.map,
nodes = null;
//Will find all P in whole popup
nodes = map.__context.select('p');
//Will find all P inside popup in content area
nodes = map.content.__context.select('p');
//Will find all P in textbox-control of login
nodes = map.content.login.__context.select('p');
}




То есть map.content.login.__context.select('p') будет искать все параграфы только внутри части шаблона, относящейся к шаблону текстового поля, определенному для указания логина.



Вы можете использовать объект map для быстрого поиска узлов и получения ссылок на них.



Обмен данными





Ну и наконец последний объект, передаваемый в функцию обратного вызова – это resources. Все просто – это механизм обмена данными. Так, при отрисовке шаблона вы можете определить свойство resources.



_patterns.get({
url : '/patterns/popup/pattern.html',
node : document.body,
hooks : {
id : id,
title : 'Test dialog window',
content : _patterns.get({
url : '/patterns/login/pattern.html',
hooks : {
login : _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'text',
}
}),
password: _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'password',
}
}),
controls: _patterns.get({
url : '/patterns/buttons/flat/pattern.html',
hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }]
}),
},
})
},
resources: {
field1 : 'one',
field2 : 'two'
},
callbacks: {
success: function (results) {
var instance = this,
resources = results.resources;
window.console.log(resources.field1);
window.console.log(resources.field2);
//Result in console:
//one
//two
}
},
}).render();




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



Условия или меняющиеся шаблоны





На самом деле это наиболее интересная часть patterns (с моей точки зрения конечно), потому что предлагаемые здесь подходы могут вас немного озадачить. Но, обо всем по порядку.



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












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













{{::value}}









You can use in password only letters, number and _











Итак, как вы видите, мы добавили немного новой разметки, а именно:






You can use in password only letters, number and _








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



Так же вы не могли не заметить и прикрепленного JS файла – conditions.js. Вот его содержание:



_conditions({
type: function (data) {
return data.type;
}
});




Как вы можете видеть, там определена функция (type) соответствующая названию условия в разметке .



Так что же произойдет после отрисовки обновленного шаблона окна авторизации? Логика действий patterns будет довольно простой: обнаружив условия в шаблоне текстового поля, patterns попытается найти функцию type (по имени условия). Найдя эту функцию, patterns передаст ей значения hook'ов (аргумент функции – data). Если эта функция вернет определенное в условии значение password, то дополнительная часть разметки будет включена в шаблон.



Здесь работающий пример нашего обновленного окна авторизации.



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



_patterns.get({
url : '/patterns/popup/pattern.html',
node : document.body,
hooks : {
id : id,
title : 'Test dialog window',
content : _patterns.get({
url : '/patterns/login/pattern.html',
hooks : {
login : _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'text',
},
conditions : {
type: function (data) {
return data.type;
}
},
}),
password: _patterns.get({
url : '/patterns/controls/textinput/pattern.html',
hooks : {
type: 'password',
},
conditions : {
type: function (data) {
return data.type;
}
},
}),
controls: _patterns.get({
url : '/patterns/buttons/flat/pattern.html',
hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }]
}),
},
})
},
}).render();




Вы, наверное, сейчас хотели бы сказать: условия в шаблоне реализованы через жопу как-то странно. Не спешите. Есть два серьезных мотива.




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

  • Во-вторых, и это для меня главное – у нас есть возможность быстро пересобрать шаблон, если вводные данные изменились. Что бы было яснее: обычный шаблонизатор, анализирует условия и делает итоговый шаблон, который и монтируется в разметку; если данные изменились, нужно удалять отрисованный экземпляр и собирать шаблон заново. Подход с функциями-условиями позволяет обойтись без этой дорогой операции и пересобрать лишь небольшой кусок шаблона, к которому относится условие.





Чтобы лучше понять «во-вторых» давайте изменим шаблон строки для нашей таблицы.




{{column_0}}{{::column_0}}
{{column_1}}{{::column_1}}
{{column_2}}{{::column_2}}


{{column_3}}{{::column_3}}




This value is less than 111




This value is more than 111 and less than 222




This value is more than 222 and less than 333





This value is more than 333 and less than 666




This value is more than 666 and less than 1000










Выглядит все мудрено, правда? Но взглянув на функции-условия, станет все ясно.



var conditions = {
value_sets: function (data) {
if (data.column_3 <= 333 ) { return '0'; }
if (data.column_3 > 333 && data.column_3 <= 666 ) { return '0.5'; }
if (data.column_3 > 666 ) { return '1'; }
},
sub_value_sets: function (data) {
if (data.column_3 <= 111 ) { return '0'; }
if (data.column_3 > 111 && data.column_3 <= 222 ) { return '0.5'; }
if (data.column_3 > 222 ) { return '1'; }
},
};
conditions.value_sets. tracking = ['column_3'];
conditions.sub_value_sets. tracking = ['column_0'];
_conditions(conditions);




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



Через свойство tracking мы показываем patterns при изменении каких данных нужно обновлять шаблон. В данном случае, мы привязали наши условия к значениям первой и последней ячеек каждой строки.



Давайте запустим рендеринг, добавив немного динамики.



var data_source = [];
for (var i = 0; i < 100; i += 1) {
data_source.push({
column_0: (Math.random() * 1000).toFixed(4),
column_1: (Math.random() * 1000).toFixed(4),
column_2: (Math.random() * 1000).toFixed(4),
column_3: (Math.random() * 1000).toFixed(4),
});
}
_patterns.get({
url : '/patterns/table/container/pattern.html',
node : document.body,
hooks : {
titles : {
column_0: 'Column #0',
column_1: 'Column #1',
column_2: 'Column #2',
column_3: 'Column #3',
},
rows : _patterns.get({
url: '/patterns/table/row_con/pattern.html',
hooks: data_source,
})
},
callbacks : {
success: function (results) {
(function (model) {
var fun = function () {
var r = Math.round(99 * Math.random()),
c = Math.round(3 * Math.random());
model.__rows__[r]['column_' + c] = (Math.random() * 1000).toFixed(4);
setTimeout(fun, Math.ceil(50 * Math.random()));
};
fun();
}(results.model));
}
}
}).render();




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



Вместо завершения





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



К главным преимуществам patterns я бы отнес следующее:




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

  • Благодаря нестандартному подходу к условиям шаблон можно частично «пересобрать» без перезагрузки.

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





Но это главные преимущества лишь для меня, для вас они могут быть другие, либо вообще отсутствовать.



Здесь вы сможете найти довольно подробное описание всего того что относится к patterns.



Это страница проекта на github’е.



Спасибо больше за ваше внимание.
Original source: habrahabr.ru.

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

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

Следующие 30  »

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

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

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