Jade / Pug html Шаблонизатор Обзор

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ม.ค. 2025

ความคิดเห็น • 102

  • @TheMrsviat
    @TheMrsviat 9 ปีที่แล้ว +12

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

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว +5

      Святослав Овсянников Спасибо за позитивный фидбек! Это мотивирует. Буду делать еще обзоры.

  • @romanhrechuk7775
    @romanhrechuk7775 8 ปีที่แล้ว

    Информации о Jade достаточно и даже больше! Спасибо за проделанную работу! Очень помогло!

    • @RosIvanov
      @RosIvanov  8 ปีที่แล้ว

      +Роман Гречук спасибо

  • @ВладимирХроменок
    @ВладимирХроменок 7 ปีที่แล้ว

    Хорошее видео! Только начал изучать Jade, и было интересно посмотреть, как люди его используют. Хотя это все можно почитать в документации, но автор хорошо и доходчиво (как по мне) рассказал основные фичи. Спасибо за работу!))

  • @obvious_things
    @obvious_things 9 ปีที่แล้ว

    Грамотное видео, все обстоятельно и понятно. Спасибо

  • @МаксимВавилкин-у9ж
    @МаксимВавилкин-у9ж 8 ปีที่แล้ว

    Спасибо! Лучшее видео по Jade на русскоговорящем youtube.

    • @RosIvanov
      @RosIvanov  8 ปีที่แล้ว

      Спасибо

  • @skylinar8831
    @skylinar8831 8 ปีที่แล้ว +2

    Реально спасибо!!! Лучше и не объяснишь))

  • @angrygantz4671
    @angrygantz4671 9 ปีที่แล้ว

    Хорошо подготовлено, отличный материал. Спасибки -). Единственно, имхо немного темп низковат изложения -))) Чуть затянуто получилось. Хотя может для совсем новичков так и надо -))

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      AngryGantz Спасибо за позитивный отзыв! Согласен, темп невысокий и иногда меня уносит не туда, но что уж поделать, такой темп речи и манера излагать мысли..Всем конечно не угодить, так как все мы разные и уровень восприятия у каждого разный, но буду стараться, по-возможности, не распыляться на детали.

  • @svetlana_wo
    @svetlana_wo 7 ปีที่แล้ว

    Классный обзор, спасибо! :) Хорошо пошел на скорости 2

  • @SergiuBurduja-y1l
    @SergiuBurduja-y1l 6 ปีที่แล้ว

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

  • @Kranoselskiy
    @Kranoselskiy 9 ปีที่แล้ว +5

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

    jd
    text.jade
    Использование: набираем jd( эта комбинация нравится лично мне, ее можно заменить на любую удобную Вам между тегов ) и жмем TAB. Создает блок с классом, который Вам необходим, если есть надобность использовать айди, или айди и класс - можно создать новый сниппет на базе этого. Всем хорошего дня!

  • @PacoOfficial
    @PacoOfficial 9 ปีที่แล้ว

    делай больше видео у тя получается хорошо

  • @АлексейМасалов-г3р
    @АлексейМасалов-г3р 8 ปีที่แล้ว +3

    проект "jade" кстати переименовали в "pug". Это название уже принадлежало какой-то другой софтварной компании, и они в суд подали.
    И спасибо за отличный видос!

    • @RosIvanov
      @RosIvanov  8 ปีที่แล้ว +1

      +Алексей Масалов спасибо за инфу

  • @Serjgap
    @Serjgap 7 ปีที่แล้ว

    шикарно, огромное спасибо

  • @napoleonborntoparty5437
    @napoleonborntoparty5437 9 ปีที่แล้ว

    Вася ты лучший)

  • @PacoOfficial
    @PacoOfficial 9 ปีที่แล้ว

    крутая тема

  • @slavaslava9763
    @slavaslava9763 9 ปีที่แล้ว

    неплохо! Чем еще можешь поделиться?

  • @seminioni
    @seminioni 9 ปีที่แล้ว

    Клевоооооо

  • @ярославчорний-з4ь
    @ярославчорний-з4ь 8 ปีที่แล้ว

    все норм пасібо

  • @2tanhamon-gameblog480
    @2tanhamon-gameblog480 6 ปีที่แล้ว

    как ты связал jade и emmet ? у меня при нажатии Tab он ставит пробел а не раскрывает мои ul>li*5

  • @def347art
    @def347art 9 ปีที่แล้ว

    Хороший обзор! Насколько я правильно понял Jade используется как инструмент при верстке и для создания своего шаблона и компонент, которые позволят ускорить верстку. А что насчёт использования Jade в полноценной разработке? Как в нём принимать какие-либо данные и откуда? Как вобще отдавать страницу пользователю в зависимости от ситуации, от каких то входных параметров? Или это уже делается при помощи js фреймворков? Только начал знакомиться с модными фронтедерскими штуками, типа css-препроцессоров, шаблонизаторов. Раньше всё делал чисто html, css, php, mysql. Сейчас решил пойти во фронтенд. И мне вот это не понятно)

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว +1

      Alexander Nesterov К сожалению нет такого опыта. У меня есть общее представление жизни jade на сервере, но конкретный код не писал и примеров показать нет.
      Я не уверен, что мое представление полностью правильно, поэтому лучше я промолчу, чем если буду нести ересь )

  • @andreytsapko4213
    @andreytsapko4213 7 ปีที่แล้ว

    Рос, у меня такой вопрос:)
    header - зависимый блок
    main - зависимый блок
    content - независимый
    Как подставлять новый контент внутрь main, который находится внутри header?

  • @hellarazor
    @hellarazor 8 ปีที่แล้ว

    Подскажите, чем extends отличается от include?
    Спасибо за инфу!

    • @RosIvanov
      @RosIvanov  8 ปีที่แล้ว

      include th-cam.com/video/QCsFDi1cQIk/w-d-xo.htmlm30s
      extends + block th-cam.com/video/QCsFDi1cQIk/w-d-xo.htmlm35s
      см описание к видео

  • @musoverda
    @musoverda 9 ปีที่แล้ว

    привет. очень хорошо! такого большого материала, как у тебя, на русском по jade еще пока просто нет! нравиться, что стараешься все на примерах практических показывать - без них все рассказанное - пыль. Вот вопрос есть - ты упомянул в видео, что при верстке каждый будет видеть, какие элементы можно сделать отдельными компонентами в виде миксинов. И потом повторно использовать эти миксины-компоненты. А примеры таких миксинов-компонентов - есть, покажешь?

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว +1

      Valery Semenencko Привет, рад что видео полезно, спасибо за отзыв!
      То, что у меня есть на данный момент могу показать легко )
      Вот мой репо с моим микро бойлерплейтом github.com/rosivanov/bp
      В папке jade есть файл миксины, это те миксины которые я таскаю с собой везде. Они описывают только метаданные. Но там есть миксин browshappy и есть еще файл nav (заготовка под менюшку), они часть разметки, поэтому в принципе, я бы отнес их к небольшим компонентам.
      Делал себе заготовку на модальное окно github.com/rosivanov/shards/tree/master/modal это наверно единственный полноценный компонент который у меня есть.
      ====
      Мне как-то попадаются очень разные макеты и разметка получается разной, и заюзать заготовки просто анриал. Поэтому обычно я дописываю миксины в процессе, под конкретную работу.
      Например из недавнего, в макете много разбросано однотипных элементов, поэтому для них сделал миксин
      mixin skill_item(skillTitle, skillVal)
      figure.skill-item
      figcaption.skill-item_title= skillTitle
      .skill-item_dots(data-hint= skillVal, class='hint--bottom hint--bounce')
      Но опять же, это только под этот один макет, больше его нигде не заюзать.
      Вообще меня самого интересует вопрос универсальных компонентов/заготовок для верстки. Но я пока не встречал метод/инфы о том как их правильно делать, а хотелось бы именно универсальности...

  • @ПавелПавел-д6я
    @ПавелПавел-д6я 7 ปีที่แล้ว

    Почему то не работает emmet с jade/pug в brackets. Уже и все плагины скачал , а он только подсвечивает синтаксис, пробелы не расставляет . Не подскажите в чем проблема ?

  • @jenyaspace
    @jenyaspace 7 ปีที่แล้ว

    использую Pug через Gulp в связке с gulp-jade-php который компилит паги в php файлы и возникла проблема с командой include так как это зарезервированное слово в php и видимо pug его не понимает и оно не работает, подскажите можно ли как-тот include для пага экранировать чтобы он не был виден как php команда?

  • @rustark
    @rustark 8 ปีที่แล้ว +1

    для бесплатной коалы есть бесплатный плагин для бесплатной компиляции jade. коала молодец.

    • @АлександрНасыров-ь4ь
      @АлександрНасыров-ь4ь 7 ปีที่แล้ว

      Бесплатная коала не умеет LiveReload-ить, а полуплатный Prepros умеет.

    • @dmitry.gashko
      @dmitry.gashko 7 ปีที่แล้ว

      А беспланый gulp может делать все и очень быстро)

    • @АлександрНасыров-ь4ь
      @АлександрНасыров-ь4ь 7 ปีที่แล้ว

      Бесплатный gulp хорош) Только бесплатный gulp убивает чувство прекрасного своими вылетами при ошибках)

    • @dmitry.gashko
      @dmitry.gashko 7 ปีที่แล้ว +2

      Раньше для меня так же было.
      Но потом написал в конфиге:
      .pipe(sass().on('error', sass.logError))
      и жить стало проще)
      для других плагинов тоже по-идеи такое должно быть.
      p.s. так при ошибке в sass gulp не останавливается, а простовыводит в консоле ошибку и работает дальше

    • @АлександрНасыров-ь4ь
      @АлександрНасыров-ь4ь 7 ปีที่แล้ว +1

      Классно! Ну, теперь точно пересяду на gulp) Спасибо за инфу

  • @nicky14952281
    @nicky14952281 9 ปีที่แล้ว

    Рос, промотал половину обзора (слишком затянуто было) Подскажи по инфе динамической генерации страниц. Ну или где эти тутсы достать? я не могу доставать данные в jade-шаблоны из js-файлов

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      +Nicky Kieth речь об этом? toster.ru/q/133647

    • @nicky14952281
      @nicky14952281 9 ปีที่แล้ว

      не, как его с галпом подружить, очевидно. другой вопрос как jade подружить с данными из объектов в main.js. ну то есть я хочу к примеру чтоб title менялся, вытаскивая данные из javascript-файла, скажем из объекта pagedata, в котором есть параметр pageTitle. и я хочу чтоб jade вытаскивал title из некой базы данных на js

    • @AndrewLewman
      @AndrewLewman 9 ปีที่แล้ว

      +Nicky Kieth посмотри sorax spotlight

    • @nicky14952281
      @nicky14952281 9 ปีที่แล้ว

      да, глянул уже. он там его на кофескрипте прикрутил)

  • @ZaebalEtotYoutub
    @ZaebalEtotYoutub 9 ปีที่แล้ว

    Почему grunt не используешь для компиляции
    Вроде и плагин какой-то в brackets висит?

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      ZaebalEtotYoutub использую, gulp-jade

  • @jenyaspace
    @jenyaspace 8 ปีที่แล้ว

    можно ли в джейде писать классы через амперсанд как по БЭМу?

    • @RosIvanov
      @RosIvanov  8 ปีที่แล้ว

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

  • @Gorr1995
    @Gorr1995 8 ปีที่แล้ว

    Скажите пожалуйста , extends не то что дописывает/ переписывает вмистимости block а полностью переписывает страницу вставляя изменения ?!

    • @RosIvanov
      @RosIvanov  8 ปีที่แล้ว

      Думаю вопрос уже решен.

    • @Gorr1995
      @Gorr1995 8 ปีที่แล้ว

      Да )) иногда ответа ждать приводится слишком долго и удаётся самому разобраться)

  • @robsoer3899
    @robsoer3899 9 ปีที่แล้ว

    Хороший материал, спасибо!
    А кому низкий темп - ютуб позволяет увеличить скорость, постоянно так делаю, можно выбрать свой темп.
    Брекетс тупит, это да... Понравился он мне, с первого взляда, но так и не прижился. Ну не может десктопное приложение написаное на JavaScript не тупить

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      Rob Soer Спасибо за отзыв! Про брекетс тру стори, особенно когда проект доходит до средних масштабов брекетс лагает страшно. А какой редактор или ide используешь сейчас?

    • @robsoer3899
      @robsoer3899 9 ปีที่แล้ว +2

      Ros Ivanov остановился на Sublime Text. В сочетаниями с плагинами, может быть очеть мощной штукой

  • @bgdn19
    @bgdn19 9 ปีที่แล้ว

    хорошая подача материала, единственный минус - очень большой кусок видео. как вариант, дополнительно, сделать нарезку на 3-5-10 мин. Я к тому, если надо вспомнить что-то, можно снова посмотреть ту часть видео или обратиться к мануалу (если найдешь на доступном языке). Подход не новый, все им пользуются, желаю успеха продолжай в том же настрое.

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

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

    • @bgdn19
      @bgdn19 9 ปีที่แล้ว

      Ros Ivanov думаю, хорошая идея+++. Хотя, если хочешь расширить аудиторию, вариант с нарезкой будет продуктивней. (здесь главное наименование, как в принципе везде :) ).

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      Я подразумевал это видео, так как резать его уже нет смысла.

    • @bgdn19
      @bgdn19 9 ปีที่แล้ว

      Ros Ivanov посмотрел твой репозиторий, структура и логика - все чертовски круто... хорошо, что ты делишься своими идеями и тратишь время не зря...

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      Спасибо, кстати я добавил в описание навигацию на основные моменты.

  • @Oswee
    @Oswee 8 ปีที่แล้ว

    Mogu dobavitj, wto naprimer PhpStorm ot Jetbrains eto vstroeno kak otdelnij plugin. Sootvetsvenno otdelno ne4evo ne nado ustanavlevatj. I voobwe - o4enj rekomenduju PhpStorm ilji WebStorm.

  • @bramduss
    @bramduss 7 ปีที่แล้ว

    А зачем оно нужно? Есть sublime редактор, там же почти тот же синтаксис

    • @RosIvanov
      @RosIvanov  7 ปีที่แล้ว +1

      не нужно

    • @dmitry.gashko
      @dmitry.gashko 7 ปีที่แล้ว

      Почему не возникает такой же вопрос относительно emmet и того же scss?
      Да синтаксис у емета и jade похож, но первый - это просто плагин, второй - это препроцессор.
      Как минимум емет сразу же преображует в html (а мне, например, хочется, что бы html был отдельно а jade отдельно.
      Кроме того емет покрывает только маленькую часть функционала jade. В нем нет ни javascript-а, ни инклудов, ничего. Кроме того в jade есть еще что-то с наследованием, что тоже можно очень удобно использовать.
      Проблема в jade (как и gulp и других препроцессораз) в том, что его нужно устанавливать, настраивать и привыкать (после чего он становится очень даже удобным)
      Ну и еще у всех разные вкусы)

  • @musoverda
    @musoverda 9 ปีที่แล้ว

    это получается что-то вроде библиотеки готовых компонентов, так?

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      Valery Semenencko по-сути да, в твоем предыдущем комменте я более подробно написал

    • @musoverda
      @musoverda 9 ปีที่แล้ว

      Тупой Верстальщик ок. тогда такой вопрос. ты верстаешь страницу, и тебе попадается по ходу действия табы, слайдер, аккордеон и т. д. (что угодно). ты уже знаешь, как их делать и делаешь их тут же, прямо на коленках? то есть, ты можешь вручную сделать каждый из этих компонентов, ты знаешь принцип работы и создания каждого из них? и тебе нет надобности "бежать" к тому же jQuery UI, к примеру?

    • @musoverda
      @musoverda 9 ปีที่แล้ว

      Тупой Верстальщик если так, то такой подход требует и хорошего знания JavaScript, в дополнение к HTML/CSS.

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      Valery Semenencko К jquery и другому чужому коду я бегаю регулярно. Обычно я придерживаюсь такой схемы - Если что-то идет не так и не получается быстро использовать чужое решение, тогда либо ищу другое, либо уже смотрю исходники чтобы внести изменения в стили/логику под свои задачи. Если и то, и другое не получается, тогда да, начинаются коленки. Как эту задачу решаешь ты? )

    • @musoverda
      @musoverda 9 ปีที่แล้ว

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

  • @slavaslava9763
    @slavaslava9763 9 ปีที่แล้ว

    Вопрос: почему при вставке в while переменной - ошибка? Код - jsfiddle.net/slavik_210/h5cu462x/
    И как записать обьект не в одну линию, а кадую ячейку на новой строке?

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว +1

      Slava Slava Привет, сори ответ с задержкой, скорее всего вопрос решен, но все же вот рабочий вариант codepen.io/ros/pen/ogKQLR
      Там есть 3 момента -
      * в jsfiddle не нашел поддержки jade. В разделе languages есть только HTML, т.е. в jsfiddle синтаксис jade не выполняется.
      * li= #{pereminna} тут интерполяция не нужна, тк стоит равно, которое подразумевает, что мы будем использовать какую-то переменную в качестве значения. Если бы равно не было, тогда да, нужна интерполяция.
      * n++ перед ним нужно добавить минус, чтобы явно указать, что n++ это некий код который нужно выполнить, иначе jade его расценит как хтмл тег.
      Вообще в джейде немного с этим намудрили, то есть без минуса можно писать его собственные конструкции (case, each, unless) и еще if, while, а вот любой другой js код нужно записывать уже с минусом.
      По поводу обьекта хороший вопрос!
      Я лично так и не нагугли как это можно по-нормальному сделать. Например такая форма записи не прокатывает
      - var obj = {
      - a = 1,
      - b = 2,
      - c = 3
      - }
      Я вышел из этого так
      - var index={}
      - index.title = 'Index'
      - index.navHref = 'index.html'
      //- seo
      - index.description
      - index.keywords
      //- open graph
      - index.og={}
      - index.og.showOG = true
      - index.og.prefix = 'og: ogp.me/ns#'
      - index.og.type
      - index.og.title
      - index.og.description
      - index.og.url
      - index.og.image
      - index.og.locale
      Выглядит конечно как булщит, но хотя бы так.

    • @slavaslava9763
      @slavaslava9763 9 ปีที่แล้ว

      Тупой Верстальщик спасибо за ответ.Теперь понял. Не представляю как с хтмл можно без jade работать. И кстати у тебя prepros нормально работает? У меня в последнее время медленно компилирует. Использую sass, jade. И много файлов. Думаю уже ssd диск покупать

    • @slavaslava9763
      @slavaslava9763 9 ปีที่แล้ว

      Тупой Верстальщик смотри как модифицировал - codepen.io/6pm/pen/wawWReспасибо! без тебя не разобрался б!

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      Slava Slava Если есть возможность взять ssd - бери, оно того стоит.Да, препрос может тупить и это напрямую зависит от количества файлов в проекте. Самое простое это отключить трекинг ненужных файлов. В настройках - app menu/project defaults/more/watched files оставить только нужные расширения. Тогда препрос не должен трейсить все подряд файлы.
      Еще вариант,
      - использовать libsass (есть в препросе). Компилит в разы быстрее, но есть минусы.
      - компилить через таскранер (не тестил скорость).

    • @slavaslava9763
      @slavaslava9763 9 ปีที่แล้ว

      Тупой Верстальщик я и использую libsass. Трекинг всех файлов не хочется отключать, так как часто вношу измененния и в sass и в jade. Ти не с Киева? Акцент знакомий)

  • @anton-ekip
    @anton-ekip 7 ปีที่แล้ว

    кто юзает в проектах таскраннеры, тот безусловно не будет юзать препрос, так как это предыдущая ступень. Но тем кто юзает небольшой лайфхак - старый препрос версии 4.2.0 денег не просит (а это дико раздражает в препросе), а работает в целом так же. пробовал на вин7. на десятке не пробовал

  • @ярославчорний-з4ь
    @ярославчорний-з4ь 8 ปีที่แล้ว

    комілюйте через gulp

  • @TalkerTube
    @TalkerTube 8 ปีที่แล้ว

    Еще бы разрешение экрана у тебя было раза в два меньше, цены бы обзору не было

    • @RosIvanov
      @RosIvanov  8 ปีที่แล้ว

      +TalkerTube Это я криво выставил захват, но уже как есть.

  • @АлексЗидков
    @АлексЗидков 9 ปีที่แล้ว +1

    Спасибо, отличная презентация возможностей jade.
    Плюс (для обучения) и минус (в качестве презентации) - долго разжевываете детали.

    • @RosIvanov
      @RosIvanov  9 ปีที่แล้ว

      Алекс Зидков Спасибо за фидбек.