- Видео 24
- Просмотров 231 329
Фронтендер
Добавлен 12 янв 2019
#8 Gulp сборка проекта | Базовые настройки шаблонов
Материалы урока
Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson8
npm i pug-include-glob --save-dev
Ссылки урока
pug-include-glob: www.npmjs.com/package/pug-include-glob
Связь со мной
Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик.
На канале делюсь знаниями по веб-разработке.
VK: berdnikovdmitry
Telegram: t.me/berdnikovDima
#gulp #pug
Таймкоды:
0:00 Интро
0:29 Настройка browserslist
1:11 Создание базовой разметки
7:31 Объявление переменных страницы
9:10 Подключение файлов через pug-include-glob
10:25 Создание миксина icon-mono
12:00 Создание миксина icon-multi
12:24 Создание миксина imgLazy
14:40 Создание миксина img
17:50 Создание миксина img2x
Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson8
npm i pug-include-glob --save-dev
Ссылки урока
pug-include-glob: www.npmjs.com/package/pug-include-glob
Связь со мной
Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик.
На канале делюсь знаниями по веб-разработке.
VK: berdnikovdmitry
Telegram: t.me/berdnikovDima
#gulp #pug
Таймкоды:
0:00 Интро
0:29 Настройка browserslist
1:11 Создание базовой разметки
7:31 Объявление переменных страницы
9:10 Подключение файлов через pug-include-glob
10:25 Создание миксина icon-mono
12:00 Создание миксина icon-multi
12:24 Создание миксина imgLazy
14:40 Создание миксина img
17:50 Создание миксина img2x
Просмотров: 2 579
Видео
#7 Gulp сборка проекта | Организация стилей
Просмотров 2 тыс.3 года назад
Материалы урока Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson7 npm i normalize.css smart-grid save npm i import-fresh gulp-sass-glob save-dev Ссылки урока normalize.css: www.npmjs.com/package/normalize.css focus-visible: www.npmjs.com/package/focus-visible smart-grid: www.npmjs.com/package/smart-grid smart-grid-config: github.com/DmitryBerdnikov/gulp-frontend-start-pro...
#6 Gulp сборка проекта | Организация скриптов
Просмотров 1,3 тыс.3 года назад
Материалы урока Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson6 npm i focus-visible vanilla-lazyload save Ссылки урока gulp src: gulpjs.com/docs/en/api/src gulp dest: gulpjs.com/docs/en/api/dest focus-visible: www.npmjs.com/package/focus-visible focus-visible пример: matthiasott.com/notes/focus-visible-is-here canUseWebp: github.com/DmitryBerdnikov/gulp-frontend-start-p...
#5 Gulp сборка проекта | assets, images, svg-sprite
Просмотров 4,8 тыс.3 года назад
Материалы урока Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson5 npm i gulp-changed gulp-imagemin imagemin-webp imagemin-pngquant gulp-svg-sprite save-dev Ссылки урока when using lastRun new files are skipped: github.com/gulpjs/gulp/issues/2274 gulp-changed: www.npmjs.com/package/gulp-changed gulp-imagemin: www.npmjs.com/package/gulp-imagemin optipng: optipng.sourceforge...
#4 Gulp сборка проекта | sass, stylelint
Просмотров 2,9 тыс.3 года назад
Материалы урока Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson4 npm i gulp-sass gulp-autoprefixer gulp-group-css-media-queries gulp-clean-css stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-rational-order save-dev Ссылки урока gulp-sass: www.npmjs.com/package/gulp-sass gulp-autoprefixer: www.npmjs.com/package/gulp-autoprefixer gulp-gr...
#3 Gulp сборка проекта | pug, pug-linter
Просмотров 2,5 тыс.3 года назад
Материалы урока Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson3 npm i gulp-pug gulp-plumber @zoxon/emitty pug-lint save-dev Ссылки урока gulp-pug: www.npmjs.com/package/gulp-pug gulp-plumber: www.npmjs.com/package/gulp-plumber emitty: github.com/mrmlnc/emitty @zoxon/emitty: www.npmjs.com/package/@zoxon/emitty пример emitty: github.com/mrmlnc/emitty/issues/25 pug-lint: w...
#2 Gulp сборка проекта | javascript
Просмотров 2,6 тыс.3 года назад
Материалы урока Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson2 npm i browserify babelify vinyl-source-stream vinyl-buffer gulp-uglify gulp-sourcemaps gulp-if save-dev Ссылки урока browserify: browserify.org/ babelify: www.npmjs.com/package/babelify gulp browserify: github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-transforms.md npm vinyl-buffer: www.npmjs.com/...
#1 Gulp сборка проекта | babel, eslint, browser-sync
Просмотров 9 тыс.3 года назад
Материалы урока Код: github.com/DmitryBerdnikov/gulp-frontend-start-project/tree/lesson1 npm i gulp @babel/register @babel/core @babel/preset-env eslint eslint-config-airbnb-base eslint-plugin-import @babel/eslint-parser husky lint-staged del browser-sync save-dev Ссылки урока EditorConfig: editorconfig.org gulp: gulpjs.com/ npm @babel/register: www.npmjs.com/package/@babel/register babeljs @ba...
#8 Посадка верстки на Wordpress | Корзина на JavaScript
Просмотров 9 тыс.4 года назад
Делаем свою тему на Wordpress. В уроке сделаем корзину на JavaScript. Для сохранения корзины будем использовать localstorage. /* Материалы урока */ Стартовый и конечные шаблоны для корзины: drive.google.com/drive/folders/18W4VxfG82gS-m9nkyvE-d2PEe1WTSTPa?usp=sharing Код урока: github.com/DmitryBerdnikov/pizzatime-wordpress/tree/master/lesson8 Макет: drive.google.com/file/d/1x2G6nxGaxhxItLxUqclq...
#7 Посадка верстки на Wordpress | Перенос на хостинг, настройка почты
Просмотров 4,6 тыс.4 года назад
Делаем свою тему на Wordpress. В уроке перенесем сайт на хостинг, настроим работу с сайтом на хостинге, и настроим почту. /* Материалы урока */ Код урока: github.com/DmitryBerdnikov/pizzatime-wordpress/tree/master/lesson7 Макет: drive.google.com/file/d/1x2G6nxGaxhxItLxUqclqGEPFNf8y0eSS Верстка: drive.google.com/file/d/1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ База данных и папка wordpress c темой из ур...
#6 Посадка верстки на Wordpress | Страницы
Просмотров 4,8 тыс.4 года назад
Делаем свою тему на Wordpress. В уроке создадим страницы. /* Материалы урока */ Код урока: github.com/DmitryBerdnikov/pizzatime-wordpress/tree/master/lesson6 Макет: drive.google.com/file/d/1x2G6nxGaxhxItLxUqclqGEPFNf8y0eSS Верстка: drive.google.com/file/d/1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ База данных и папка wordpress c темой из урока: drive.google.com/drive/folders/1BlihnNGNMxdZsoA8XWNtXBsjqqy...
#5 Посадка верстки на Wordpress | Таксономии и термы
Просмотров 7 тыс.4 года назад
Делаем свою тему на Wordpress. В уроке создадим страницы для категорий и общую страницу для товаров /* Материалы урока */ Код урока: github.com/DmitryBerdnikov/pizzatime-wordpress/tree/master/lesson5 Макет: drive.google.com/file/d/1x2G6nxGaxhxItLxUqclqGEPFNf8y0eSS Верстка: drive.google.com/file/d/1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ База данных и папка wordpress c темой из урока: drive.google.com/...
#4 Посадка верстки на Wordpress | Кастомный тип поста
Просмотров 10 тыс.4 года назад
Делаем свою тему на Wordpress. В уроке создадим товары и выведем их на главную страницу /* Материалы урока */ Код урока: github.com/DmitryBerdnikov/pizzatime-wordpress/tree/master/lesson4 Макет: drive.google.com/file/d/1x2G6nxGaxhxItLxUqclqGEPFNf8y0eSS Верстка: drive.google.com/file/d/1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ База данных и папка wordpress c темой из урока: drive.google.com/drive/folder...
#3 Посадка верстки на Wordpress | Создание дополнительных полей 2
Просмотров 9 тыс.4 года назад
Делаем свою тему на Wordpress. В уроке создадим дополнительные поля и выведем изображения из админ панели в формате webp /* Материалы урока */ Код урока: github.com/DmitryBerdnikov/pizzatime-wordpress/tree/master/lesson3 Макет: drive.google.com/file/d/1x2G6nxGaxhxItLxUqclqGEPFNf8y0eSS Верстка: drive.google.com/file/d/1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ База данных и папка wordpress c темой из уро...
#2 Посадка верстки на Wordpress | Создание дополнительных полей
Просмотров 18 тыс.4 года назад
Делаем свою тему на Wordpress. В уроке создадим дополнительные поля и выведем меню /* Материалы урока */ Код урока: github.com/DmitryBerdnikov/pizzatime-wordpress/tree/master/lesson2 Макет: drive.google.com/file/d/1x2G6nxGaxhxItLxUqclqGEPFNf8y0eSS Верстка: drive.google.com/file/d/1RuGcr1HIOUKNqsqCwJaoeVCubDzD25VZ База данных и папка wordpress c темой из урока: drive.google.com/open?id=1s1OPcVyS...
#1 Посадка верстки на Wordpress | Установка WP, базовая настройка
Просмотров 48 тыс.4 года назад
#1 Посадка верстки на Wordpress | Установка WP, базовая настройка
#8 Верстка сайта для начинающих | Оптимизация, html валидатор, доработки
Просмотров 4,9 тыс.4 года назад
#8 Верстка сайта для начинающих | Оптимизация, html валидатор, доработки
#7 Верстка сайта для начинающих | Настройка формы, загрузка на хостинг, подключение домена
Просмотров 4,9 тыс.4 года назад
#7 Верстка сайта для начинающих | Настройка формы, загрузка на хостинг, подключение домена
#6 Верстка сайта для начинающих | JavaScript. Фильтр, динамические данные, яндекс карта
Просмотров 7 тыс.4 года назад
#6 Верстка сайта для начинающих | JavaScript. Фильтр, динамические данные, яндекс карта
#5 Верстка сайта для начинающих | JavaScript. Настройка попапов, скролл к элементам
Просмотров 8 тыс.4 года назад
#5 Верстка сайта для начинающих | JavaScript. Настройка попапов, скролл к элементам
#4 Верстка сайта для начинающих | Всплывающие окна
Просмотров 6 тыс.4 года назад
#4 Верстка сайта для начинающих | Всплывающие окна
#3 Верстка сайта для начинающих | О нас и Контакты
Просмотров 7 тыс.4 года назад
#3 Верстка сайта для начинающих | О нас и Контакты
#2 Верстка сайта для начинающих | Каталог товаров
Просмотров 24 тыс.4 года назад
#2 Верстка сайта для начинающих | Каталог товаров
#1 Верстка сайта для начинающих | Шапка сайта
Просмотров 31 тыс.4 года назад
#1 Верстка сайта для начинающих | Шапка сайта
Sank you
не подгружаются картинки
Говно объяснение
Видео топ! Но есть нюанс: если пользователь сам изменит в цену в коде и нажмет отправить- то в корзине будет его цена… есть идеи по реализации?
Есть. Брать цену с бэка, а не фронта перед отправкой заказа.
такой вопрос возник, при закрытии попапа, скролл первый раз работает, второй раз не работает, потом опять работает, в общем через раз работает в прямом смысле, не знаю в чем проблема:( сравнила с кодом на гите, вроде как все соответствует
Не знаю есть ли смысл писать, но третий день мучаюсь с фильтром При переключении по кнопкам в консоли ошибка: Cannot read properties of null (reading ‘firstChild) Если исправить ошибку оберткой цикла в if, то при переключении между фильтрами выдает пустые массивы и ничего не меняется Уже нет идей с какой стороны ошибка
Спасибо! Всех вам благ!
Плагин "WP Translitera", больше не доступен для скачивания.
На странице stylelint-scss npm-пакета есть ремарка, что лучше использовать stylelint-config-standard-scss, который уже включает в себя оный, если вы не собираете набор правил с нуля под свои цели, т.к. там нет танцев с бубном с ошибками эт-рулов. Также предостерегу, что расширение stylelint может не подсвечивать ошибки сразу после установки, стоит внести правки файл с настройками IDE, а именно: "css.validate": false, - отключает нативную валидацию "scss.validate": false, - // - "stylelint.validate": [ "css", "scss", ] - правила для стайлинта какие языки линтировать Все это применимо и к другим css-подобным языкам. Для тех, кто любит заморочится (Как я), стоит еще дописать правила порядка очередности вложенных выражений ( типа медиа - модификаторы по бэм - псведоклассы - псевдоэл-ты.. и т.д.) Хорошей практикой будет запретить переопределение селекторов в медиа запросах, установить макс глубину нестинга А супер круто сделать два конфига под линтер, один который будет проверять только те правила, которые требуют ручного исправления и использоать его по дэфолту, а для хаски сдлеать extended, который запускать с фагом --fix и он будет не только линтить по расширеному набору правил, но и фиксить очередность css-правил Черпал инфу тут blog.csssr.com/ru/article/lint-your-css/
Хочу выразить вам огромную благодарность, за данный курс, он очень хорош.
Спасибо за курс, один из лучших плейлистов, что я смотрел. Здесь я и основным основам пхп научился, смог понять как правильно гуглить и задавать вопросы chadGpt, а также решать проблемы, которые у меня возникли во время курса из за моей невнимательности(просто забыл зайти во вкладку постоянный ссылки после добавления таксономии, так что все страницы, что ты добавлял через иерархию, я добавлял мануально через функции, к счастью в конце я догадался почекать функцию, регистрирующую таксономию.)Не думаю, что я хотя бы какие то функции запомнил, но теперь у меня есть явное понимание, что вордпресс - это не сложно
Блин, твои видосы топчик! Очень прошу начни опять записывать!
Привет! К сожалению пока, на неопределённой паузе
@@Фронтендер-з6о Спасибо за записанное, тогда....)) JS правда уже устарел, но все ровно, для начинающих фронтендеров, твои уроки - просто пушка!
Отличный курс Лучшее что встречал по этой теме! Обязательно надо смотреть после изучения основ в теории
У меня какая-то проблема с этим carbon fields, вообще не получается ни с плагином, ни с кодом его подключить, сайт ломается сразу же
Привет! Давно не следил за совместимостью wordpress с этим плагином, как вариант, может ломаться в новых версиях wordpress, если плагин перестал обновляться
@@Фронтендер-з6о на wp-kama пишут что он не сочетается с вп вообще с 2019 года "по запросу автора", что-то такое. Но у вас видео то не 19-го года, короче хз, а перенести как-то надо🥲
Не знаю прочитаешь ты это или нет. Но у меня почему то не отправляется сообщение на почту. Хотя код php точь в точь, как у тебя
Привет! Не знаю как помочь, так как нету четкого ответа почему это может быть, возможно, на стороне хостинга проблема или все таки в реализации отправки письма Советую найти разные уроки по отправки письма на почту и попробовать их. Если они не будут работать, возможно, проблема в настройках хостинга
люблю тебя
В самом конце появилась непонятная ситуация: при изменении в html сервер автоматически перезагружается, а при изменении в css или добавлении в папку images нет, только в режиме ручной перезагрузки. Может дело в версиях плагинов? В некоторых случаях очень большая разница.
Да, что-то может сломаться, если разные версии
как категориям дать изоброжение и вывести его
Привет. Я через карбон филдс вот так добавлял Container::make('term_meta', 'Изображение') ->where('term_taxonomy', '=', 'product-categories') ->add_fields( array( Field::make('image', 'category_image', 'Изображение'), ) ); Вывод изображения: $cat_image_id = carbon_get_term_meta(term_id, 'category_image'); echo wp_get_attachment_image($cat_image_id, 'full');
Жаль перестали выпускать ролики. Аналогов подачи материала, особенно по посадке на Wordpress, вообще нет. До сих пор в работе использую полученные от Вас знания.
Что делать, если myLib считает за ошибку, (бразуер консоль), выполнял все так же как и вы, и проверил все несколько раз (менял), все равно ошибка.
Привет! Предлагаю попробовать поставить код из репозитория в описании под видео и посмотреть сохраняется ли ошибка
@@Фронтендер-з6о спасибо, я разобрался, вы будете делать еще видео?
@@FreezyIos планирую, но по срокам не знаю
Очень Полезные видео . На ютубе разработчики с большим количеством подписчиков не могут предложить такого. Только воду и песок.)
function.php не срабатывает как на видео, в чем может быть проблема. Не стили не видит , не скрипты. Частая проблема на иннете. Т.е в ново созданном фанкшене не работают хуки и скрипты. Но если вернуть обратно адрес в хедер например стилей работает.. Не могу понять, что не так с фанкшеном . Версия правда вордпресса английская (au).
Привет! Не знаю ответа, нужно код смотреть, пытаться дебажить
Спасибо
В случае экспорта gulp.series каким образом gulp вообще отлавливает окончание выполнение таска? У меня даже примеры из официальной документации жалуются на «The following tasks did not complete».
Привет! Из документации написано, одна операция начинается после другой. Окончанием операции является завершение асинхронной функции, вот примеры gulpjs.com/docs/en/getting-started/async-completion
Бред
Здравствуйте! Нужна ваша помощь… response: "error" при отправлении на сервер Не давно появилось… не знаю как это исправить…
Привет! Слишком мало контекста, чтобы помочь
Всем привет! Ребята, подскажите, дошел до 8 урока. Все делаю, как на видео. Но, когда заливаю новые изображения и создаю свои Категории и Товары, изображения не отображаются на сайте в добавленных товарах. Их просто не видно. Перезаливал фото, делал переиндексацию в плагине Converter for Media - ничего не помогает.
Без воды, четко по делу и очень много. Класс!
привет урок супер но есть один вопрос а ты незнаешьсайт только для украины не яндекс просто в других уроках кто делает карту там джаву пишут по другому и в сочитании не получаеться. спасибо в заранее
Здравствуйте! А не подскажешь как подружить carbon fields с yoast seo? Чтобы yoast seo сканировал и доп.поля Спасибо)
Здравствуй! К сожалению не сталкивался с таким, можно посмотреть в этом направлении. Но не знаю реализуемо ли wordpress.org/support/topic/carbon-fields-and-yoast-seo-support/ github.com/htmlburger/carbon-fields/issues?q=yoast
Спасибо за классные уроки! Я что-то подзависла и не могу сообразить, что задает высоту блока "О нас"? Высота section-about (по содержимому) и паддинги от section (по 110px)?
Привет! Вроде да, явно высоту лучше не задавать, а если где-то нужно, то лучше использовать min-height, ну и в крайнем случае height
с сайта карбона при попытке скачать просто обновляется на главную ..........
Привет! Уже давно не пользовался этой технологией. Значит надо поискать другой способ установки или использовать ACF
@@Фронтендер-з6о Карбоновыми формами давно не пользовались? Чем же тогда пользуетесь.
@@happy--user давно wordpress не использовал в работе, сейчас только фронтендом занимаюсь
не выводятся атрибуты у товаров, что с этим делать? <?php $prim_attribute ?> по этой записи ничего не выводится, а если вывести эту переменную через принт р , то пишет что якобы вообще не определена эта переменная
Привет! Не знаю как помочь, потому что без контекста не разобраться. Можно попробовать поставить код из урока и базу данных и посмотреть будет ли работать.
Спасибо большое за видео! Классный формат, уместные и понятные комментарии 👍 Возник вопрос на 53:30 - здесь используются стили top: 50%; transform: translateY(-50%). Почему нельзя применить просто top: (-50%)?
Привет! Потому что нам нужно сместить элемент относительно своей оси на 50% Здесь описано medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e
@@Фронтендер-з6о Спасибо!)
у меня есть вопрос, а в каком моменте вы будете дорабатывать бургер меню в шапке
для адаптации
Привет, надеюсь ответишь, добавляю классу catalog_item (width:calc(100%/3)) текст сужается, перебрасывая слова на другую строку, но остальные items так сказать не входят в линию
Привет! Можешь ссылку расшарить с версткой? Без контекста сложно понять
Подскажите пожалуйста, как я могу сменить яндекс карту на гугл карту?
Привет! Простого ответа нет. Советую поискать информацию на тему "Как вставить google maps на сайт"
Привет! 15:33 → Подключаем ассоциации в админку. Вывод массива через print_r выдает объекты в том порядке, в котором они добавлены в настройках ассоциации. Но если сделать вывод товаров как у вас в видео, то сортировка сбивается и они публикуются по дате добавления постов (товаров). Не могу понять, как сделать, чтобы выводились именно в порядке из админки. Подскажите пожалуйста) При этом сортировка на странице в ассоциациях сохраняется при изменениях. Но посты все так же публикуются по дате)
Привет! Уже не помню как сделать
Спасибо за хорошее видео. Только не совсем понял, зачем в index.php оставлять get footer и get header, а так же на главной странице вызывать get header и get footer
Привет! get_footer и get_header работают как импорты, чтобы вместо get_footer подставилось содержимое из файла footer.php, а вместо get_header - header.php
Добрый день. Возникла проблема с WPJS, прописывая в консоли выдает ошибку - не обнаружено.
Нашел ошибку, 98% проблем из-за невнимательности))
@@vikjaros согласен, тоже там трабл был, но все в итоге решил))) главное идти до конца!
на сколько хорошо использовать глобальные переменные?) на сколько знаю их лучше избегать
Привет! Если можно обойтись без глобальных переменные, то лучше без них.
Здравтвуйте! кстати, а комментарии для сайта не знаете как написать?
Здравствуй! Как сделать форму для отправки комментариев, и показать список всех комментариев? Даже не знаю как ответить на этот вопрос, нужно уметь отправлять данные на сервер, сохранять и получать их, чтобы отобразить
Откуда у тебя в меню появилась вкладка товары? А точнее на каком этапе она должна появиться?
Привет! Пришли пожалуйста таймкод видео, сложно без контекста понять
@@Фронтендер-з6о 12:35 есть вкладка товары в меню.
@@vofanossssss вначале урока создается кастомный тип поста Товары, он как раз и появляется в меню
а ты можешь написать такой же информативный видос, где ты еще и корзину используешь?
Спасибо, бро, что ты существуешь ; )
вообще не для новичков.........................
чувак, спасибо! ты лучший
Очень интересно!!! Желаю Удачи!!!
видео хорошее, но я не понимаю почему у меня выводятся id записей как здесь: 12:43, но потом при проверке $query оно ничего не видит и следовательно не выводит записи
Привет! Можно попробовать запустить код с гитхаба (ссылка в описании видео), если он работает, то кусками пытаться внедрить себе. Если не работает, то можно выложить на гитхаб проект и прислать сюда ссылку со строчкой кода, который не работает
@@Фронтендер-з6о спасибо, я уже разобрался)
@@silicontower0908 в чем проблема была ?
@@Deeborn уже не помню, я по-моему закостылял как-то
Контент супер, моя огромная благодарность! То что надо, чтобы вырасти от джуна до миддла.