FrontEndDev

08 Nov 2024 22:29

Как отключить ECH для вашего домена на Cloudflare

Если ваш сайт на Cloudflare перестал работать без VPN, то все дело в технологии Encrypted Client Hello, которую включил Cloudflare. Ее можно отключить на платных тарифах в админке, а в бесплатных только если ты хакер.

Сначала проверяем домен на предмет работы ECH так:
https://dns.google/resolve?name=[ВАШ_ДОМЕН]&type=HTTPS

У меня в ответе видно, что включен {"name":"jem-space.ru.","type":65,"TTL":300,"data":"1 . alpn=h3,h2 ipv4hint=188.114.96.1,188.114.97.1 ech=AEX+DQBBHQAgACAhjyy/+kI2j...."}

Идем в https://dash.cloudflare.com/profile/api-tokens и копируем свой Global API Key.
На странице домена внизу справа копируем Zone ID.

Отключаем ECH запросом curl (или постман)

curl -X PATCH "https://api.cloudflare.com/client/v4/zones/{ID_ZONE}/settings/ech" \
     -H "X-Auth-Email: {ACCOUNT_EMAIL}" \
     -H "X-Auth-Key: {GLOBAL_API_KEY}" \
     -H "Content-Type:application/json" --data '{"id":"ech","value":"off"}'

FrontEndDev

07 Nov 2024 17:37

Геймдев на JavaScript

Туториал по созданию Sonic Runner с использованием библиотеки Kaplay.

https://www.youtube.com/watch?v=EmMO0yQ7eeY

FrontEndDev

06 Nov 2024 12:31

Вписываем текст во всю ширину строки

Интересный трюк, позволяющий подогнать размер шрифта для полного заполнения текста

https://frontendmasters.com/blog/edge-to-edge-text/

FrontEndDev

04 Nov 2024 17:20

npm audit

Что такое npm audit и как фиксить проблемы с уязвимостями, которые мы видим в консоли после установки.

https://www.niraj.life/blog/understanding-npm-audit-fixing-vulnerabilities-nodejs/

FrontEndDev

30 Oct 2024 13:44

Значок скрола в DevTools

Теперь стало намного проще находить элементы, у которых присутствует скрол, с новым обновлением DevTools.

https://developer.chrome.com/blog/swe-devtools-scroll-badge

FrontEndDev

29 Oct 2024 07:45

Создаем заполняющийся индикатор загрузки

Пошаговый туториал создания лоадера с использованием всего 1 элемента на чистом CSS.

https://www.freecodecamp.org/news/filling-css-loaders/

FrontEndDev

28 Oct 2024 14:00

erid:2VtzqubR5DN
Как устроена работа ИТ-специалистов в Т-Банке?

Загляните в канал T-Crew — тут показывают будни команды и делятся полезным:

— Дайджесты вакансий, регистрация на fast track и приглашения от руководителей.
— Анонсы мероприятий. Например, когда пройдет следующий ИТ-каток, ИТ-пикник и другие нашумевшие ивенты.
— Кейсы, статьи и лайфхаки для работы — от методов планирования до карьерного роста.

Подписаться на T-Crew

FrontEndDev

26 Oct 2024 09:28

Способы реализации светлой/темной темы

Используем css переменные, prefers-color-scheme и JS для динамического переключения темы.

https://css-tricks.com/come-to-the-light-dark-side/

FrontEndDev

25 Oct 2024 12:00

Прими участие в «Хакатоне по разработке кибериммунных технологий 3.0» от «Лаборатории Касперского» с призовым фондом 1 000 000 рублей!

Регистрация на хакатон открыта до 15 ноября: https://cnrlink.com/cyberimmunehack3frontdev

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

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

Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского».

Ключевые даты:
• 15 октября – 15 ноября – регистрация участников
• 8 ноября – митап с экспертами и игра «Огнеборец»
• 15 ноября – старт хакатона
• 17 ноября – дедлайн загрузки решений
• 22 ноября – подведение итогов и объявление победителей

Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов: https://cnrlink.com/cyberimmunehack3frontdev

Реклама. АО «Лаборатория Касперского». ИНН 7713140469. erid: LjN8K7KrX

FrontEndDev

24 Oct 2024 03:08

Создаем книжный магазин используя React, Node и MongoDB

Большой и подробный туториал по созданию frontend и backend частей для онлайн магазина книг.

https://www.youtube.com/watch?v=pgw2KPfgK1E

FrontEndDev

22 Oct 2024 01:18

LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite

Добавляем к привычному сравнению способов хранения данных на фронте новые: OPFS и WASM-SQLite

https://rxdb.info/articles/localstorage-indexeddb-cookies-opfs-sqlite-wasm.html

FrontEndDev

20 Oct 2024 01:26

CSS Pattern

Сборник красивых фонов на чистом CSS

https://css-pattern.com/

FrontEndDev

16 Oct 2024 15:20

Приглашаем на конференцию по JavaScript-разработке — 7 ноября онлайн и 14–15 ноября в Санкт-Петербурге

Новая HolyJS — это:
— 40 докладов и 3 воркшопа о JavaScript во всех сферах его использования;
— большая встреча JS-сообщества в онлайне и офлайне;
— обмен опытом, нетворкинг, конкурсы по кодингу и другие активности.

О чем можно послушать: про фронтенд, бэкенд, графику, 3D-движки в беспилотных автомобилях, архитектуру, внутренности фреймворков и многое другое.

Чем можно заняться на воркшопах: оптимизировать web perf, разработать игру для TON, внедрить HTMLVideoElement с быстрой перемоткой.

Где попробовать свои силы: в «открытом микрофоне», в соревновании Code in the Dark и других конкурсах от партнеров конференции.

Выбирайте, что вам больше по душе — и покупайте персональный билет со скидкой 15% по промокоду — FRONTENDDEV

В HolyJS можно поучаствовать и за счет компании. Почему это выгодно не только вам, но и работодателю — читайте в статье на VC.

Реклама. ООО «Джуг Ру Груп». ИНН 7801341446

FrontEndDev

15 Oct 2024 00:54

Scroll Driven анимация карточек

Вариант замены привычной карусели

https://codepen.io/paulnoble/full/gOVPedz

FrontEndDev

13 Oct 2024 09:05

Сейчас сезон, когда IT-мероприятий, как из рога изобилия — как оффлайн, так и онлайн

Но где найти единую "базу" ивентов? Чтобы "заглянул -> увидел все что есть -> выбрал -> пошел"?

🔥Советуем обратить внимание на канал, в котором публикуют анонсы вебинаров, хакатонов, конференций, мастер-классов, ивентов от гигантов индустрии и лучших специалистов по кодингу, дизайну, аналитике и т.д.

👍 Очень крутая вещь, где вы точно не пропустите ничего важного и интересного.

🗂 IT-мероприятия России / ITMeeting / IT events - подпишитесь, чтобы не потерять!

FrontEndDev

08 Nov 2024 17:50

Способы улучшить показатели Core Web Vitals

Советы по улучшению показателей INP, CLS и LCP.

https://web.dev/articles/top-cwv

FrontEndDev

07 Nov 2024 12:07

Бесплатное IT-образование в 2024

Отобрали для вас полезные телеграм-каналы, которые помогут освоить программирование и другие IT-направления

Выбирайте нужное и подписывайтесь:

👩‍💻 Frontend: @FrontendPortal
⚙ Backend: @BackendPortal
📱 GitHub: @git_developer
🤓 Книги айти: @portalToIT
👩‍💻 Python: @PythonPortal
👩‍💻 Java: @Java_Iibrary
👩‍💻 C#: @KodBlog
👩‍💻 С/С++: @Cpportal
🖥 Базы Данных & SQL: @SQL
👩‍💻 Golang: @juniorGolang
👩‍💻 PHP: @PHPortal
👩‍💻 Моб. разработка: @MobDev
👩‍💻 Разработка игр: @GameDevgx
👩‍💻 DevOps: @loose_code
🖥 Data Science: @DataSciencegx
🤔 Хакинг & ИБ: @cybersecinform
🐞 Тестирование: @QAPortal
📱 Маркетинг: @MarketingPortal
🖥 Дизайн: @PortalToDesign

➡ Сохраняйте себе, чтобы не потерять

FrontEndDev

06 Nov 2024 10:03

Улучшенная работа вложенного CSS с CSSNestedDeclarations

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

https://web.dev/blog/css-nesting-cssnesteddeclarations?hl=en

FrontEndDev

01 Nov 2024 20:44

Анимируем React приложение с Framer Motion

Короткий курс по анимации на примере приложения со списком.

https://egghead.io/lessons/react-create-micro-interactions-with-framer-motion-gesture-props

FrontEndDev

30 Oct 2024 00:30

State of CSS 2024

Результаты ежегодного исследования о CSS: инструменты, фреймворки, тренды, фичи.

https://2024.stateofcss.com/ru-RU

FrontEndDev

28 Oct 2024 22:54

Сайты на Framer ускорили интерактивность на 50%

Команда Framer о новом обновлении, которое ускоряет интерактивность сайтов, используя более оптимальный алгоритм загрузки и обновления.

https://www.framer.com/blog/sites-interactive-faster/

FrontEndDev

27 Oct 2024 01:59

Продвинутый Ctrl+F

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

https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html

FrontEndDev

26 Oct 2024 00:01

3D анимация грида с scroll-triggered эффектами

Очередной красивый концепт анимаций и переходов с использованием скролла.

Демо | Github

https://tympanus.net/codrops/2024/10/16/staggered-3d-grid-animations-with-scroll-triggered-effects/

FrontEndDev

24 Oct 2024 09:15

Встречайте новый оператор безопасного присвоения

Какие плюсы использования оператора ?= и в каких кейсах его можно использовать.

https://jsdev.space/safe-assignment-operator/

FrontEndDev

22 Oct 2024 13:55

Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?

➡Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:

✔архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔как создавать маршруты, контроллеры и использовать middleware;
✔как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔методы тестирования и отладки приложений Nest.Js.

Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.

Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие:

https://vk.cc/cCklPU

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

FrontEndDev

20 Oct 2024 10:03

Темы для проигрывателей Media Chrome

Набор тем для видео и аудио плееров созданных на основе Media Chrome для любых фреймворков.

https://player.style/

FrontEndDev

18 Oct 2024 02:42

Несколько простых советов по использованию DevTools

От банального $0 в консоли до Edit and Resend Request в Network

https://www.freecodecamp.org/news/cross-browser-devtools-features

FrontEndDev

16 Oct 2024 13:56

Контекстно-зависимые анимации для фиксированных элементов

Изменение масштаба, повороты и движения - динамичные визуальные эффекты для оживления вашего сайта.

Демо | Github

https://tympanus.net/codrops/2024/10/09/exploring-playful-context-aware-animations-for-fixed-elements/

FrontEndDev

14 Oct 2024 14:49

Поддержка различных видов масштабирования

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

https://blog.logrocket.com/understanding-supporting-zoom-behaviors-web/

FrontEndDev

13 Oct 2024 01:33

Управление памятью в JS c WeakRef и FinalizationRegistry

Что такое WeakRef и FinalizationRegistry, как и когда их стоит использовать и как это влияет на использование памяти.

https://jsdev.space/memory-management-js/