Куки и куки-окна - что это и как работает? Создаем свои варианты!
HTML-код
- Опубликовано: 6 июн 2024
- Хотите знать, почему вы перестали вводить логины и пароли на сайтах?
В этом ролике мы подробно разберем технологию Cookie, как и зачем она работает в браузере. Поговорим про cookie consent popup, как их создавать при помощи готовых решений и своими руками.
================================
Разделы видео (тайминг/главы):
0:00 - О чем видео?
01:14 - Что такое куки?
03:12 - Подробно про внутренности куки-данных
10:55 - Классификация куки-файлов
13:31 - Безопасность
16:13 - Конфиденциальность и как она регулируется
19:00 - Создаем Cookie consent popup на готовом конструкторе
34:51 - Создаем свой функционал в коде для работы cookie popup
01:04:45 - Используем Cookie Storage
01:19:46 - Переписываем код в формат классов
================================
Ссылки:
Файл скрипта из урока: drive.google.com/file/d/1ng6q...
Файл стилей: drive.google.com/file/d/1O9WV...
GDPR: gdpr-info.eu/
Весь закон кратко: www.osp.ru/cio/2017/07/13052957
Про штрафы: legalitgroup.com/ru/gdpr-shtr...
Большая статья с примерами использования готовых решений: netpeak.net/ru/blog/kak-gramo...
Первый конструктор: www.osano.com/cookieconsent/d...
Второй конструктор: 2gdpr.com/ru/cookieconsent
Еще один: www.cookiebot.com/en/pricing/
Еще один: www.cookiepro.com/
И еще один: www.onetrust.com/
Пример политики использования cookie: strial-tyres.com/ru/cookie-po...
Одни из лучших и доступных курсов по JavaScript, верстке (html/css), React, Wordpress и многому другому вы найдете на campfire-school.com/
Мой инстаграм - / petrychenko_ivan
Телеграм-канал: t.me/petrychenko_ivan
Телеграм-канал с общением: t.me/+U1yEc5iGptY6ghY_
Я ждал этого 4, нет 5 тысяч лет
Новое видео от Ивана - это всегда праздник!!!
Это лучшее видео на эту тему на RUclips! Большое спасибо!
Как всегда, лучший, одно удовольствие проходить твои курсы
Отличный урок! Спасибо!
Очень мало таких грамотных учителей. Ивану большой респект!
Комментарий после 5-ти секунд просмотра: звук просто обалденный! Спасибо за действительно качественный контент)
новый микрофон дает о себе знать))
отличные курсы, спасибо! развивайте канал ,вы отличный преподаватель!
Спасибо тебе большое за курсы.Ты объясняешь лучше всех!
Спасибо тебе большое! Ты очень доходчиво все объясняешь, после твоих роликов и курсов все отлично запоминается, на твои ресурсы каждый раз хочется возвращаться за новой информацией! Ты делаешь очень хорошее и полезное дело! Так держать!
Давно не было новых видео!
Иван, видео - огонь! Отдельная благодарность за разбор данной темы! Курс по JS + React + Redux тоже бомба! Надеюсь, что после таких, всеобъемлющих, курсов поиск первой работы не будет слишком длительным)
Спасибо, полезный урок!
С возвращением, Иван)
Урааа, новый видос, спасибо !!!
Все-таки Иван объясняет так, что всем должно быть понятно, в отличие от многих других видео на ютубе)
Спасибо большое за видео!
Хотелось бы побольше)
лучший ютубер! делай видосы больше и чаще!!
Если хотите научиться научиться чему-то стоящему в вебе, то вам не на Хайп-проекты, а к Ивану. Талантливый преподаватель всё детально покажет и расскажет, лучше него в рунете пока не находил, хотя искал я достаточно. Отличное видео, коих у Ивана огромное количество!)
Отличное видео, всё понятно и ясно. Давно хотел про куки почитать/посмотреть информацию, а тут такой великолепный сюрприз)
Единственное что хотел бы заметить и возможно попросить на будущее (думаю моё мнение другие тоже разделят), так это по возможности давать пояснения с необычным/сложным использованием методов. Например .reduce() в уроке, я подразобрался как он работает конкретно в данном случае, но думаю многим всё же непонятно и в след раз какой нибудь другой пример кода уже не пойму я). Хотелось бы ещё спросить за будущие темы для видео (если таковы планируются). Будут ли видео/уроки о реальной работе с кодом на проектах? Везде огромное количество примеров кода и реализации (уроки других разработчиков, статьи и тд), но так и не понятно действительно это используется в реальных проектах и нет. Будут видео/уроки по CSS (SCSS) фичам? Например необычные свойства, какие-либо полезные особенности (часто в статьях вижу что цвет задают через hsl()) и в каких случаях лучше написать код в CSS, а не JS. Хотелось бы выразить большую благодарность за уроки, ссылки на статьи и за тот труд что ты делаешь для нас.
Полезно, спасибо!
Очень полезное и ёмкое видео, советую купить курс от Ивана, т.к сам закончил его ;)
Спасибо за интересный контент
я уже достаточно просмотрел западных блогеров, просмотрел русскоязычных блогеров и могу точно сказать, у Ивана самый шикарный курс по JS на юдеми. Если кто-то знает еще что-то подобное, буду рад если поделитесь
Спасибо)
Спасибо за новое видео. Добавил к проекту. Дошел до cookieStorage и там получил ошибку на cookie (is not defined) . Классы решил не трогать. Очень информативное видео, я очень вам благодарен за ваши труды. Продолжайте в том же духе!
Спасибо ☺️
у меня была такая же история, но оказалось я в метод getItem(key) не передала key
Иван, вы ТОП! Ваши курсы - лучшее, что есть в РУнете! Без капли сарказма!
Спасибо большое ☺️
Супер видео,трудно на всех сайтах
Иван привет почему так редко видео выходят? Хотим больше контента услышь нас!!!! P.S. за счет твоих обучалок устроился на работу))) спасибо что нормально обьясняешь и разжевываешь))
Ееее, поздравляю)
Да обучающий контент на ютубе мало кто смотрит) А времени тратится на запись довольно много :)
Ну и работки много было)
Лайк поставил сразу как узнал о переводче слова cookie и вспомнил, что на столе лежало печенько xDDD
❤❤❤
Добрый день
Иван, работаете ли вы с тайпскриптом, и если да, то планируется ли выпуск курса по нему на юдеми?
На данный момент ситуация такая, что в русскоязычном сегменте нормальных курсов по тс нет, не только бесплатных, но и платных. Все, что присутствуют - сделанные на авось в стиле 'typescript за час'
Спасибо
Добрый день. Да, есть такая мыслишка) Но блин, времени на все не хватает :(
вместо reduce - можно спокойно использовать Object.fromEntries() :)
Дякую!
Уроки по Angular планируете выпустить?
С сожалению, пока нет
Иван, подскажи модель своего микрофона пожалуйста, звук оч хороший!
HyperX quadcast
@@campfireschool спасибо большое!
Иван, не понятно самое главное, а где же блокировка использования кук, если пользователь отказался?
С давно думал что это такое🤔тепер знаю
Иван, просветите пожалуйста, ваш курс который на udemy, может начать новичок который не знает js, и одновременно изучать js и реакт?
У Ивана есть курс верстки, сначала надо его пройти, потом js +react
@@darkhorsewhitehorse9561 да вёрстку знаю
у меня почему-то Error в консоль выводится при клике на саму плашку, а не на кнопку Отмена (Decline).. Подскажите, если кто знает, почему так. Это при использовании конструктора osano, код точно такой как в видео.
А если быть точнее, то выводится в консоль только Error из блока onRevokeChoice, из остальных (onInitialise и onStatusChange) не выводится ничего из disable cookies
У меня почему-то не работает конструктор на сайте osano, т.е. в графе html ничего не формируется при изменениях
Ммм, печеньки
Аллигатор ты ли это?
В split пробела после ; не хватает, поэтому trim'ать пришлось)
Действительно. Тогда можно использовать Object.fromEntries вместо reduce
Вопрос, а где такую же подставку для ноутбука взять ?
Называется nextstand, можно взять на алике)
@@campfireschool Спасибо )
@@campfireschool о тепер надо взят ноут и клавиш и мышка и еще наушники🙂
Cookie Monster Batman ruclips.net/video/7enjABApKWE/видео.html&ab_channel=utubelor напомнило вот это))))
😂😂
ооо.ничего себе...Иван даже продолжает записывать урок...я курс Udemy добиваю по JS и каждый раз практически хочу дать коммент, но некуда, а тут надеюсь прочитаешь. Так вот всё что ты там делаешь конечно норм и даже может больше, но есть одно "но"...давай возьмём к примеру курс там есть "Продвинутый JS" -Создаем слайдер часть1...вот ты как рыба в воде, это видно по коду и по видео как ты ориентируешься в нём, но когда делаешь всё то-же самое и в итоге запускаешь проэкт, слайдер не работает...Приходится долго искать ошибку или еще что хуже выкачивать всё с github, что не особо перспективно. То есть, там же люди учатся и время от времени в следующих курсах, предусмотри пожалуйста "разбитие выводов console.log(текущий элемент, который пилим)...
И webpakc кстати тоже там не проходит почему-то..обьемная тема может, хотя всё было сделано шаг за шагом.
И печенье "Мария", тоже ничего ))) Напиши мне в телегу Sergey Getman, буду рад общению.
Добрый день. Эти темы разбираются в полном курсе по js. А ошибки, увы, у всех случаются и их нужно уметь искать. Именно поэтому и есть готовый код, в который можно подсмотреть и научится. В реальной работе такого не будет)
А console.log в нужных местах каждый может поставить где он сочтет нужным.
18:10 а как они меня "оштрафуют", если я и моя компания не находится на территории ЕС? Ну скажут мне: "с тебя штраф!", а я платить не буду... И что дальше? Меня экстрадирует моя страна в Европу где меня посадят в тюрьму? )
рандомный = случайный, произвольный
Ударение в слове “домен” сохраняется на втором слоге, как в языке оригинала.
Добрый день Иван, подскажите, почему нельзя упростить выражение:
if(this.getitem(this.consentPropertyType) === 'true') return true
else return false
до вида:
return this.getitem(this.consentPropertyType) === 'true'
Не впервой замечаю что вы не проводите сокращения в таких ситуация и хотелось бы понять чем это вызвано?