CSS в реальной жизни

​Евросоюз убирает cookie-стены

Почти все современные сайты информируют пользователей о «печеньках». Но действительно раздражают не эти уведомления, а cookie-стены — баннеры, которые блокируют доступ к сайту, пока пользователь не даст согласие на обработку персональных данных. Согласитесь, ведь одно дело добровольно принимать условия, и совсем другое — быть вынужденным их принять.

В начале мая этого года Европейский совет по защите данных постановил, что cookie-стены действительно нарушают GDPR (General Data Protection Regulation). Похоже, в ближайшем будущем сайты снова станут user-friendly. Ура!

О том, как Евросоюз борется с «печеньем», можно почитать здесь:

https://tprg.ru/ZGOr

#cookie #безопасность

На tproger.ru появился раздел с промокодами на ивенты и курсы от наших партнёров: https://tprg.ru/Ff2S

Заходите и выбирайте, прямо сейчас там есть конференции и по JS, и по .NET, и даже по Ruby On Rails и тестированию.

Организаторы выдают промокоды специально для вас, наших читателей. Мы планируем постоянно пополнять раздел, так что не забудьте положить страницу в закладки браузера.

13 способов стилизации списков

Не любите списки? Да вы просто не умеете их готовить!

В своей статье автор делится нетривиальными способами стилизации. Всё оформлено в CodePen, так что можно потыкать код, не отходя от кассы.

https://tprg.ru/BOgt

#фронтенд #css

JS-а много не бывает

В чём разница между CSS Grid и Flexbox

Если коротко, CSS Grid — для разметки, Flexbox — для компонентов. Если наглядно, то посетите замечательный сайт, где на пальцах объясняются главные отличия:

https://tprg.ru/NXsD

Почувствуйте себя официантом, расставляющим тарелки, но перед этим обязательно покушайте: от такого интерактива текут слюнки.

#фронтенд #css

Анонсирован выход Terraform v2.0.0 для VS Code

HashiCorp обещали и сделали! Компания взяла на себя поддержку Terraform, инструмента для управления инфраструктурой в формате кода, и теперь выкатывает новую версию. Более 600 000 установок расширения для VS Code прямо-таки пророчили апдейт.

Плагин полностью поддерживает v0.12, а основной упор сделан на автодополнение кода. Более подробно расписали сами ребята из HashiCorp:

https://tprg.ru/2JoD

#devops #vscode

Шпаргалка по Docker

Здесь собраны полезные опции и основные команды сборки, извлечения образов, запуска и остановки контейнеров.

Если вы работаете с Docker, забирайте этот чит-лист себе — пригодится.

#devops #docker

Когда наконец-то написал CSS правильно

​Боремся с уязвимостью внешних ссылок

Используете во внешних ссылках target="_blank"? А вы любите острые ощущения! Страница, на которую таким образом попадает пользователь, получает частичный контроль над ссылающейся страницей. Через эту ссылку злоумышленники могут произвести фишинговую атаку, используя window.opener.

Не хотите стать чьей-то «рыбкой»? Добавьте атрибут rel="noopener noreferrer" во все ссылки с target="_blank": это предотвратит перехват.

Подробнее в статье:

https://tprg.ru/wrAo

#безопасность #фронтенд

Как спроектировать базу данных, чтобы в будущем не пришлось её переписывать?

Мы тут разобрали грамотное структурирование таблиц. Будет интересно тем, у кого уже есть начальные знания по SQL, но хотелось бы копнуть глубже.

Загляните, здесь полезно: https://tprg.ru/hd9J

#бэкенд #базыданных

Все проблемы можно решить с помощью z-index: 1000

Таблица с CSS триггерами

Здесь вы найдёте некоторые свойства CSS и информацию о том, как они влияют на производительность браузерных движков:

https://csstriggers.com/

Разноцветные полосочки демонстрируют:

— Layout: перерасчет макета
— Paint: прорисовку макета
— Composite: компоновку макета

#фронтенд #css

Какие расширения тормозят ваш Chrome

DebugBear проанализировал 1000 популярных расширений браузера и сделал выводы на базе таких показателей:

— Время блокировки основного потока
— Задержка рендеринга страницы
— Время обработки в фоновом режиме
— Количество потребляемой браузером памяти

Если расширений нет, условный сайт загрузится за 40 мс. Если же вы установите Evernote или Grammarly, время загрузки возрастёт до 500 мс. А пока вы не начали массово искоренять расширения, посмотрите саму статью — там интересно:

https://tprg.ru/aeSt

#chrome

Когда ты архитектор, но ещё ты изучаешь CSS

У нас в телеге есть канал про самые важные и смешные IT события России, СНГ и мира, которые влияют на каждого из нас.

Залетайте: @your_tech

Улучшение совместимости Chromium

Разработчики браузера рассказали, какие проблемы совместимости будут исправлены в 2020 году.

Так, например, идёт работа над CSS Grid, Flexbox, элементами управления форм и даже скроллингом. Команда Chromium не из робкого десятка: ребята сами просят пользователей указывать на различные ошибки. С этой целью вы можете тегать их в Twitter, заводить тикеты и проходить небольшие опросы.

Более подробная информация и дополнительные ссылки лежат в статье:

https://tprg.ru/jJ3K

#браузеры

Баланс между нативными и кастомными селектами

Автор рассказывает, как из нативного и кастомного <select> слепить «гибрид», в чём его преимущества, а также объясняет разницу между меню, навигацией и контейнером <select>. Держите интересную статью от настоящего доктора Франкенштейна в мире веба:

https://tprg.ru/OWXg

#фронтенд #html

​Роль this в JavaScript

this указывает на объект, а вот на какой именно — зависит от контекста. Если использовать this в глобальной области видимости, он укажет на window, а если разместить внутри объекта — укажет на этот объект.

Вроде бы всё просто, но есть ещё ряд тонкостей, которые разобраны в статье:

https://tprg.ru/daEh

Автор затрагивает особенности стрелочных функций, ключевое слово new, вложенные объекты и прочие нюансы. Всё с примерами.

#javascript #фронтенд

Что может быть веселее?

Недавно PHP исполнилось 25 лет

В честь юбиляра компания JetBrains подготовила крутой таймлайн с основными событиями из истории популярного backend-языка. Посмотрите, с чего всё начиналось и какие изменения претерпел PHP:

https://tprg.ru/cO4R

#php #бэкенд