Веб-разработка - DevMagazine
Веб-разработка - DevMagazine
  • 131
  • 786 747
Установка padding и margin в Tailwind CSS
#Tailwind #TailwindCSS #CSS
В этом видео рассматриваем утилиты для установки padding и margin компонентов с TailwindCSS.
Мы в соцсетях:
💻 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 GitHub: github.com/vadimkorr
☕️ Поддержать канал: www.donationalerts.com/r/devmagazine
Курсы и плейлисты:
💡 Tailwind: ua-cam.com/play/PLmfIBo6rTVR4tuvT6o2ncCoBYd-HJZSi2.html
💡 Redux Saga: ua-cam.com/play/PLmfIBo6rTVR6jKRgpblTdzto9v-yWgqk-.html
💡 Все о ReactJS: ua-cam.com/play/PLmfIBo6rTVR4OGBHkgPUst49WliEAkZDc.html
💡 Как пройти ReactJS собеседование: ua-cam.com/play/PLmfIBo6rTVR6jNZoTnNggWliFC7Cmco7p.html
💡 ReactJS хуки: ua-cam.com/play/PLmfIBo6rTVR50EVDaRz0HuImZ6iLDs40N.html
💡 Паттерны ReactJS: ua-cam.com/play/PLmfIBo6rTVR7vVeFBPV3YrsXwk8wDbihw.html
💡 Redux: ua-cam.com/play/PLmfIBo6rTVR70B7skhP5BtczReJMZQ0Vd.html
💡 Как создать слайдер на ReactJS: ua-cam.com/play/PLmfIBo6rTVR4JBtaOfWLMNgjIeVC3_dl7.html
💡 Svelte: ua-cam.com/play/PLmfIBo6rTVR5XNcJxu8TwzEvIDUCAhGc6.html
💡 Sass: ua-cam.com/play/PLmfIBo6rTVR7YkcR_26vgH37l3GS2pYBa.html
💡 GraphQL: ua-cam.com/play/PLmfIBo6rTVR7qfgmVHBsgOoiBAx5Guwfp.html
💡 JavaScript: ua-cam.com/play/PLmfIBo6rTVR6ncz0yM8Bhpff8yI7F1oKp.html
#devmagazine #devmagazinechannel
Переглядів: 1 056

Відео

Что такое ПРОКСИ в JavaScript (Proxy)
Переглядів 11 тис.2 роки тому
#js #javascript Полезный Сайт О Разработке 👉 it-dev-journal.ru Proxy в JavaScript позволяет перехватывать и переопределять операции над объектом. Мы в соцсетях: 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать: www.donationalerts.com/r/devmagazine 📃 Репо simply-reactive: github.com/vadimkorr/simply-reactive Курсы и плейлисты: 💡...
Как использовать Компоненты высшего порядка ReactJS
Переглядів 2,9 тис.2 роки тому
#React #ReactJS Паттерн Компонент высшего порядка назван по аналогии с функциями высшего порядка. Функция высшего порядка - это функция, которая либо принимает функцию как аргумент, либо возвращает функцию как результат. И то же самое можно сделать с компонентами. Функция (Higher Order component, HOC) может принимать компонент в качестве аргумента, что-то с ним делать и возвращать модифицирован...
Собеседование JUNIOR frontend REACT
Переглядів 40 тис.2 роки тому
#React #ReactJS В этом выпуске разберем вопросы собеседования Junior frontend React разработчика, рассмотрим вопросы по JavaScript, HTML, CSS, которые обязательно спросят и решим алгоритмическую задачу, а также оценим алгоритмическую сложность решения. Мы в соцсетях: 👉 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ...
Flexbox в TailwindCSS
Переглядів 2,2 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео рассматриваем утилиты для работы с flexbox в Tailwind. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать канал: www.donationalerts.com/r/devmagazine Курсы и плейлисты: 💡 Tailwind: ua-cam.com/play/PLmfIBo6rTVR4tuvT6o2ncCoBYd-HJZSi2.html 💡 Redux Saga...
Как поменять цвет текста и фона в TailwindCSS
Переглядів 1,9 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео рассматриваем утилиты для изменения цвета шрифта и фона в Tailwind. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать канал: www.donationalerts.com/r/devmagazine Курсы и плейлисты: 💡 Tailwind: ua-cam.com/play/PLmfIBo6rTVR4tuvT6o2ncCoBYd-HJZSi2.html...
Размеры шрифта и их кастомизация в Tailwind
Переглядів 1,6 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео рассматриваем утилиты для работы с размерами шрифта в Tailwind, и способы кастомизации размеров шрифта через tailwind.config.js. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать канал: www.donationalerts.com/r/devmagazine Курсы и плейлисты: 💡 Tail...
Паттерн Render Props в ReactJS
Переглядів 5 тис.2 роки тому
#React #ReactJS В этом видео поговорим о паттерне Render props в ReactJS, напишем примеры с разными кейсами где render props полезны, посмотрим на проп children и передадим в него аргументы. Render prop - это функция, которая возвращает JSX, и эта функция используется как проп в компоненте. К пропсам с таким поведением принято добавлять префикс render (renderContent), чтобы отличать обычные про...
Как работает TailwindCSS
Переглядів 2,2 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео рассматриваем как работает Tailwind, как он определяет какие утилиты использованы, и нюансы связанные с этим процессом. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать канал: www.donationalerts.com/r/devmagazine Курсы и плейлисты: 💡 Tailwind: ua-...
Ширина и высота в TailwindCSS
Переглядів 2,7 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео рассматриваем утилиты для работы с шириной и высотой в Tailwind, а также абсолютные и относительные единицы измерения - px, проценты, rem, vh, vw, ... Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать канал: www.donationalerts.com/r/devmagazine Кур...
Как тестировать Redux Saga? Тестирование fork
Переглядів 4422 роки тому
#ReduxSaga #Redux #React В этом видео рассматриваем тестирование эффектов fork в Redux Saga. Особенность fork в том, что он возвращает объект задачи. И этот объект иногда передается в другие эффекты например в cancel. И в тестах мы должны создать мок этого объекта и передать его дальше в следующий эффект. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: tw...
Варианты установки TailwindCSS
Переглядів 3 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео рассмотрим все варианты установки Tailwind. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать канал: www.donationalerts.com/r/devmagazine Курсы и плейлисты: 💡 Tailwind: ua-cam.com/play/PLmfIBo6rTVR4tuvT6o2ncCoBYd-HJZSi2.html 💡 Redux Saga: ua-cam.co...
Как написать компонент с TailwindCSS?
Переглядів 5 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео пишем компонент с TailwindCSS. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддержать канал: www.donationalerts.com/r/devmagazine Курсы и плейлисты: 💡 Tailwind: ua-cam.com/play/PLmfIBo6rTVR4tuvT6o2ncCoBYd-HJZSi2.html 💡 Redux Saga: ua-cam.com/play/PLmfIB...
Как работать с TailwindCSS CLI?
Переглядів 5 тис.2 роки тому
#Tailwind #TailwindCSS #CSS В этом видео рассматриваем работу с CLI TailwindCSS. Это интерфейс командной строки, который может компилировать tailwind файлы в файлы css. Для инициализации конфиг файла используется команда npx tailwindcss init. Мы в соцсетях: 💻 Сайт: it-dev-journal.ru 💻 Telegram: t.me/devmagazinechannel 💻 Twitter: _devmagazine 💻 GitHub: github.com/vadimkorr ☕️ Поддерж...
Компоненты высшего порядка ReactJS (Higher-order components)
Переглядів 9 тис.2 роки тому
#React #ReactJS Паттерн Компонент высшего порядка назван по аналогии с функциями высшего порядка. Функция высшего порядка - это функция, которая либо принимает функцию как аргумент, либо возвращает функцию как результат. И то же самое можно сделать с компонентами. Функция (Higher Order component, HOC) может принимать компонент в качестве аргумента, что-то с ним делать и возвращать модифицирован...
Как тестировать Redux Saga? Full Saga testing
Переглядів 1,1 тис.2 роки тому
Как тестировать Redux Saga? Full Saga testing
Кастомный ХУК для изменения ТЕМЫ приложения на ReactJS (Темная тема React)
Переглядів 11 тис.2 роки тому
Кастомный ХУК для изменения ТЕМЫ приложения на ReactJS (Темная тема React)
Установка TailwindCSS
Переглядів 9 тис.3 роки тому
Установка TailwindCSS
Что такое Tailwind CSS?
Переглядів 12 тис.3 роки тому
Что такое Tailwind CSS?
О курсе Tailwind CSS
Переглядів 15 тис.3 роки тому
О курсе Tailwind CSS
Как тестировать ветвления в Redux Saga?
Переглядів 6963 роки тому
Как тестировать ветвления в Redux Saga?
Тестирование Redux Saga
Переглядів 1,1 тис.3 роки тому
Тестирование Redux Saga
Списки в Sass - тип list
Переглядів 7183 роки тому
Списки в Sass - тип list
О типе map в Sass
Переглядів 1,2 тис.3 роки тому
О типе map в Sass
Как комбинировать саги с RACE и ALL в Redux Saga?
Переглядів 5393 роки тому
Как комбинировать саги с RACE и ALL в Redux Saga?
Как получить данные из стора в Redux Saga?
Переглядів 9483 роки тому
Как получить данные из стора в Redux Saga?
Все о математических функциях в Sass
Переглядів 9163 роки тому
Все о математических функциях в Sass
Встроенные модули Sass
Переглядів 7013 роки тому
Встроенные модули Sass
Как запустить несколько саг в Redux Saga?
Переглядів 5413 роки тому
Как запустить несколько саг в Redux Saga?
Отличия Apply и Call в Redux Saga
Переглядів 5823 роки тому
Отличия Apply и Call в Redux Saga

КОМЕНТАРІ

  • @макс-х9п9л
    @макс-х9п9л Місяць тому

    Рендеринг родительского компонента очевидно ререндерит дочерний компонент. Но что значит через изменение пропсов?

  • @ЕкатеринаЗданевич-ы2х

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

  • @efimkapliy6370
    @efimkapliy6370 Місяць тому

    Полезное видео по работе с импортами внутри scss-файлов, спасибо!

  • @dmitrym840
    @dmitrym840 Місяць тому

    Nest js

  • @ВладОся-з7ь
    @ВладОся-з7ь Місяць тому

    спасибо за видос , очень полезно и по делу

  • @dmitrym840
    @dmitrym840 Місяць тому

    Спасибо большое за такой труд

  • @TolegenAibatullin
    @TolegenAibatullin Місяць тому

    Даже бухой поймет это с первого раза. Спасибо!

  • @serg888fert4
    @serg888fert4 Місяць тому

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

  • @АлексейНахимов-б5с
    @АлексейНахимов-б5с 2 місяці тому

    А как сделать чтобы межу файлами _mixins и _variables.scss было одно пространство переменных, т.е. напр. чтобы в _variables я мог использовать миксины из _mixins ?

  • @denpol9956
    @denpol9956 3 місяці тому

    9:25 то есть, Вы хотите сказать, что это был полезный функционал, а сейчас мы посмотрим ещё... )

  • @lovely000wicked
    @lovely000wicked 3 місяці тому

    про race четко и по полочкам, спасибо!

  • @nth-prog8562
    @nth-prog8562 3 місяці тому

    Отличный ролик. Выдали базу по прокси, большое спасибо

  • @GonzaVladimir
    @GonzaVladimir 4 місяці тому

    notificationBase это самостоятельный переиспользуемый компонент. его надо в компонент по человечески вынести. makeNotification это тоже компонент ты чё людей запутал. =)

  • @emporteme
    @emporteme 4 місяці тому

    теперь я понял что все это время был не прав на счет ssr спасибо за видео)

  • @emogirl3884
    @emogirl3884 4 місяці тому

    мне вот теперь интересно стало, вы сами работаете? должно быть вам легко проходить собеседования

  • @danyjos3
    @danyjos3 5 місяців тому

    Lo veo desde Ecuador, muchas gracias por tu solución y tus cursos. Saludos !!

  • @BuAjoyib
    @BuAjoyib 5 місяців тому

    Благодарю 🎉😂 кнмсрсурсркпс вццявцяа ноооеоеом чпупчкпчрксррвцяя бжщжьжщ

  • @dimendroider7550
    @dimendroider7550 6 місяців тому

    Братишка спасибо за крупный шрифт можно смотреть даже на экране телефона Ещё раз спасибо за урок

  • @efimkapliy6370
    @efimkapliy6370 6 місяців тому

    Хорошее видео!

  • @smykoil
    @smykoil 6 місяців тому

    не знаю какие в svelte оптимизации, но в чистом жс [...items, item] работает намного дольше чем items.push(item). переприсваевание должно тоже срабатывать очень быстро. поэтому вряд ли [...items, item] предпочтительнее.

  • @TheMrFangame
    @TheMrFangame 6 місяців тому

    Урок хороший, но пример не совсем. По сути это оверинджениринг в примере. А конкретное использование HOC не раскрыто

  • @seriogaromanchykov9451
    @seriogaromanchykov9451 6 місяців тому

    Большое спасибо , это выглядит проще чем с материалюай

  • @ПожилойБилибоба
    @ПожилойБилибоба 7 місяців тому

    А что значит селектор: а--modifier?

  • @ИванЕгоров-с7ы
    @ИванЕгоров-с7ы 8 місяців тому

    Хороший урок, понято и доступно объяснил

  • @never.m1nd
    @never.m1nd 8 місяців тому

    Привет! Если добавляю transition на body то при начальной загрузке страницы (или перезагрузке) происходит переход от светлой к темной теме, мигание или перетекание, выглядит не очень эстетично. Как этот баг убрать?

    • @never.m1nd
      @never.m1nd 8 місяців тому

      Сам и отвечу. Я пофиксил эту багу с помощью события load добавляя класс с transition только после загрузки HTML и внешних ресурсов: window.addEventListener('load', () => { document.body.classList.add('transition') })

  • @el_marca4987
    @el_marca4987 8 місяців тому

    Благодарю, очень полезные вещи узнал для себя

  • @beda9679
    @beda9679 9 місяців тому

    однозначно лайк. я не ожидал, что всего за 10 минут можно поменять тему в приложении. Актуально на апрель 2024

  • @mokkamokka4097
    @mokkamokka4097 9 місяців тому

    чувствуется опыт, спасибо!

  • @tanyab3325
    @tanyab3325 9 місяців тому

    как установить компаненту карусель? С помощью какой команды?

  • @oksssvv
    @oksssvv 9 місяців тому

    Хорош, очень ясно излагаешь, спасибо за информацию 🤝🏻

  • @АнжеликаЧегринец
    @АнжеликаЧегринец 9 місяців тому

    Спасибо за видео! Очень понятная подача и реализация!

  • @mokkamokka4097
    @mokkamokka4097 9 місяців тому

    вообще топ, содержательно, последовательно из лекции в лекцию. Спасибо!

  • @амирханшамгонов-р5д
    @амирханшамгонов-р5д 10 місяців тому

    спасибо за видео

  • @vvspl
    @vvspl 10 місяців тому

    Мне объяснения не понравились. Если автор считает эти хуки азами и хочет объяснить что-то для новичков, то зачем брать примеры "посложнее"? Раз взялся объяснять в одном видео за все хуки - чтобы не было галопом по Европам - объясняй с самыми простыми примерами, а если кому надо - снимешь для продвинутых по отдельному видео на каждый хук с продвинутыми примерами. А так ощущение что ты старался сделать абы быстро. В общем - совсем не старался. Сделал ставку на то что для профи - и так сойдёт, а новички - сосите лапу.

  • @ВиталийСемпай
    @ВиталийСемпай 10 місяців тому

    Npx не робит

  • @suspenseorigin5542
    @suspenseorigin5542 10 місяців тому

    Полезное видео, спасибо за труды!

  • @mz4480
    @mz4480 10 місяців тому

    Спасибо. А скажите пожалуйста, в C++ есть аналог вот этого понятия hoisting?

  • @Stas-ir3gh
    @Stas-ir3gh 11 місяців тому

    Ты на телефоне программируешь?

  • @ArtemMindsurfer
    @ArtemMindsurfer 11 місяців тому

    правда очень хорошое объяснение

  • @arteminsight
    @arteminsight 11 місяців тому

    шикардос! контент кайф

  • @nataliaortega9595
    @nataliaortega9595 11 місяців тому

    как сделать const PAGE_WIDTH для кроссбраузерная верстки? чтобы размер менялся при изменении устройства. Сейчас получается фиксированный размер, но хочется сделать более пластичным.

  • @killerben5
    @killerben5 11 місяців тому

    установка ппц конечно, куча танцев с бубном. Вот бы через cdn одной строкой подключить и все :)

  • @masyamyc
    @masyamyc 11 місяців тому

    Просто отличное видео, спасибо

  • @grantorino3465
    @grantorino3465 Рік тому

    не пробовал ли динамическое название класа, вместо safe list указать в коментарии компонента? подхватит ли такой вариант?

  • @ПавелКуприянов-ь8ы

    Класс, спасибо! Смотрю уже ночью, не могу сообразить, а как зациклить слайдер

  • @SingleFeniks
    @SingleFeniks Рік тому

    Когда понимаешь, что SSG в Битрикс реализован адекватнее чем в Next.js. 😄

  • @bnidia
    @bnidia Рік тому

    что такое пропс?

    • @theSnow45
      @theSnow45 8 місяців тому

      Это сокращение от английского properties - свойства. Вы их задаёте при использовании компонента По аналогии из C#, например, public string Name { get; set; } Здесь у автора установлено дефолтное значение, его задавать необязательно

    • @bnidia
      @bnidia 8 місяців тому

      @@theSnow45 спасибо большое!

  • @МедетБерикбаев

    Видно что хорошо объясняешь. Но есть вопрос... есть видео где ты все TodoList, Editor Container.... начинаешь создавать? или репозиторий? как ты все это создавал? классно было бы если есть видео где объясняется Redux...

  • @ВладиславБогер

    Бро, Context помог решить проблему Спасибо!

  • @eurodoo
    @eurodoo Рік тому

    Было бы классно если бы ты по сети показал какие данные приходят в разных видах рендеринга