4 заметки с тегом

js

БЭМ (BEM) от Яндекс

26 сентября 2016, 16:21

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».


Установка

  • Минимальные требования
    • Node.js 0.10+;
    • Git Bash — для пользователей операционной системы Windows.

  • Сделайте локальную копию project-stub

  • git clone https://github.com/bem/project-stub.git --depth 1 start-project
    cd start-project
    npm install



    Важно: Не используйте права суперпользователя (root) при установке npm- и bower-зависимостей.
    bower-зависимости ставятся при выполнении npm postinstall в папку libs.

  • Запустите
  • npm start


  • Проверить работу по адресу: http://localhost:8080/desktop.bundles/index/index.html
  • Должна открыться страница с примерами блоков библиотеки.


    Пошаговая инструкция: https://ru.bem.info/platform/tutorials/quick-start-static/


    Презентация



    bem-xjst — шаблонизатор для тех, кто ведёт веб-разработку в рамках БЭМ-методологии.


    Шаблонизатор содержит два движка:
    BEMHTML — для преобразования BEMJSON в HTML.
    BEMTREE — для преобразования BEMJSON с данными в BEMJSON с БЭМ-деревом для последующего преобразования с помощью BEMHTML.


    Как писать шаблоны на оф. сайте: https://ru.bem.info/platform/bem-xjst/

Онлайн редакторы кода HTML + CSS + JS

26 октября 2015, 16:00

Главное преимущество редакторов онлайн, это просмотр готового варианта в реальном времени.
После создания аккаунта, Вы можете зайти, посмотреть код и отредакторовать его, с любого места, где есть интернет.

Итак, список редакторов:
http://www.cssdesk.com/ — самый старый редактор, включает в себя html + css без js.
http://cssdeck.com/ — полноценный редактор с возможностью подключить разные библиотеки
http://jsbin.com/ — полноценный редактор, по сути похожий функционал, что и предыдущего редактора
http://jsfiddle.net/ — аналог предыдущим редакторам, одно основное отличие это дизайн.
http://codepen.io/ — еще один современный редактор.
http://rendera.herokuapp.com/ — еще один, хороший редактор для обучения, потому что, одна из вкладок это примеры, что сразу можно вставить и посмотреть код.
http://plnkr.co/ — и еще один.

Выбираете на свой вкус.

Brackets — удобный редактор кода

3 июня 2015, 12:35

Оф. сайт. brackets.io
Brackets — удобного редактировать код HTML+CSS+JS

Популярные горящие клавиши:

Ctrl + Alt + P — интерактивный просмотр
Ctrl+k — help
Crtl+пробел — подсказка
Crtl+E — помошник
Alt+C — Html marks

Полезные дополнение:
Emmet.io
CssFier
minifier
beautify
eqFTP
QuickFormTool
Brackets Snippets
Response for Brackets

Если использовать для PHP, то можно установить расширение PHP Debug

Создаем анимационное меню

3 июня 2015, 10:41

Создаем «Animated border menu», а именно современное меню, что выплывает с границы.