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», а именно современное меню, что выплывает с границы.