Webchic - frontend, backend, ci/cd
995 subscribers
273 photos
22 videos
1.11K links
Канал о Web разработке, для фронтов и full stack.

По рекламе @adtgassetsbot
Admin: @Aleksei

🐍Python - @python_lounge
👨‍💻Другие языки - @cccoding
🥷Хакер/ИТ безопасность - @it_ha
Download Telegram
Браузерные апи:
— Geolocation API - позволяет пользователю предоставлять свое местоположение web приложению
— Drag and drop API - для перемещения элементов на странице
— Web Storage API - хранилище сессии (sessionStorage), локальное хранилище (localStorage)
— Web Speech API - позволяет веб приложениям управлять голосовыми данными
— WebRTC API - позволяет сайтам захватывать и передавать аудио и видео, а также обмениваться данными между браузерами

#browser_api

https://habr.com/ru/company/ruvds/blog/525838/
Рендеринг страницы:
— парсинг html
— блокирующие парсинг html и отрисовку страницы ресурсы
— предварительная загрузка ресурсов
— парсинг CSS
— события загрузки
— отрисовка страницы

#browser_rendering

https://webdevblog.ru/kak-brauzer-renderit-veb-stranicu/
:focus-visible vs :focus
:focus-visible - используется для определения фокуса с клавиатуры
:focus - используется для определения любой фокусировки(клавиатура, мышь, тач)

#css

https://css-tricks.com/the-focus-visible-trick/
​​Кнопка удаления
​​Форма логина
​​Использование федерации модулей(module federation) в next.js приложении

Module Federation - фича в webpack5 для построения микрофронтендов с решенной проблемой переиспользования зависимостей

#webpack #module_federation
Разница между HTMLCollection и NodeList

#browser_api

К статье(rus)
Оказывается в addEventListener можно вторым параметром передавать объект с методом handleEvent и это работает во всех браузерах

#browser_api

К статье(eng)
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект размытия бэкграунда с помощью свойства css - backdrop-filter: blur();

#css

Codepen
Подгрузка частей кода в React, в зависимости от девайса

#react #code_splitting

К статье(eng)
This media is not supported in your browser
VIEW IN TELEGRAM
🥚 переключатель, выполнен на чистом css

Codepen
Jack Franklin, разработчик Chrome Dev Tools и Puppeteer, делится советами по организации большого приложения на React.js

— Сборщики
— Организация структуры директорий
— Организация кода React.js компонентов
— Организация Redux actions, reducers с помощью подхода Ducks
— Тесты

#react #redux

К статье(eng)
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация элемента details с помощью Web Animations API (WAAPI)

#browser_api #WAAPI

К статье(rus)
Набор правил составления описания коммита для наведения порядка в логах

#git

К статье(rus)
Улыбнешься - проиграешь

Браузерная игра, для реализации которой использовалась библиотека face-api.js(надстройка над tensorflow.js) для распознавания лиц.

#tensor_flow #face_api #ml

К игре
К статье(eng)
Советы по оптимизации веба, собранные в одной статье

Оптимизации: html, css, картинки, шрифты, javascript, server, инструменты для тестирования, оптимизация фреймворков

#performance

К статье(eng)
Аккордеон галерея на чистом css

Codepen
Атака clickjacking - как проводится и как от нее защититься

В статье приводится практический пример, который можно быстро повторить локально

#security

К статье(rus)