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
Объяснение и визуализация CORS

— Same-Origin Policy(одинаковый хост, порт)
— Отличие простого запроса от preflight
— Добавление кук и авторизационных хедеров к CORS запросам

#CORS #security

К статье(eng)
Javascript Proxy

Объект Proxy оборачивается вокруг заданного объекта для перехвата и обработки различных действий над этим объектом.

В статье перечислены Proxy Traps (Ловушки) и показываются примеры применения Proxy

#javascript

К статье(rus)
Josh W. Comeau анонсировал “Operator Lookup” - поисковик для операторов JS

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

#javascript

Operator Lookup
Как свойство main в package.json определяет точку входа

#nodejs

К статье(rus)
Как и почему Яндекс переехал с собственного npm-репозитория на Verdaccio

#npm_registry

К статье

Verdaccio
7 запахов кода в ваших компонентах React:

— Слишком много свойств
— Несовместимые свойства
— Копирование свойства в стейт
— Возвращать JSX из функций внутри компонента
— Несколько boolean переменных для состояния
— Слишком много useState в одном компоненте
— Большой useEffect, выполняющий разные операции

#react

К статье(eng)
Jack Franklin: “Как писать хорошие комментарии к коду: «зачем», а не «как»”

В статье рассказывается, в каких случаях оставлять комментарий к коду и приводится пример полезного комментария

К статье(rus)
This media is not supported in your browser
VIEW IN TELEGRAM
Вариант позиционирования placeholders в инпутах формы

Codepen
Туториал по 2-х факторной аутентификации на node.js + speakeasy

#nodejs #speakeasy

К туториалу(eng)
Пуленепробиваемая архитектура node.js проекта

— Организация директорий
— 3-х уровневая архитектура для разделения ответственности
— Использование уровня обслуживания(service layer) для бизнес-логики
— Использование слоя публикаций/подписки для разгрузки функций
— Внедрение зависимостей для большей гибкости кода
— Юнит тестирование
— Cron Jobs и повторяющиеся задачи
— Конфигурации

#nodejs

К репозиторию
К статье(eng)
Легкое Google собеседование с Ben Awad(автор плагина для VS Code - Stories)

На собеседовании решают две технические задачки:
— развернуть односвязный список
— развернуть двоичное дерево

#interview #algorithms

К интервью(eng)
Dev Fonts - ресурс, где можно сравнить и выбрать лучшие шрифты для кода

Сравнить шрифты
Перевод серии статей Mariko Kosaka: Устройство современного веб-браузера Chrome

#browser

Часть 1 (CPU, GPU, память, архитектура браузера)
Часть 2 (что происходит во время навигации)
Часть 3 (парсинг, вычисление стилей, Layout, отрисовка)
Часть 4 (События ввода из виджетов браузера)
Типы шаблонов строк в typescript 4.1

Тип шаблона строки имеет тот же синтаксис, что и строки-шаблоны в JavaScript, но открывает большие возможности для типизации.

#typescript

Пример типизации ключа для функции get

К статье(eng)
Новые фичи в вебе за 2020, которые вы могли пропустить:

— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)

#browser_api #css

К статье(eng)
Туториал по Gitlab CI: сборка и публикация образа docker в AWS ECR(Amazon Elastic Container Registry)

#ci_cd #docker

К туториалу(eng)
Обзор JavaScript Symbol

— iterator для итерации объектов
— hasInstance для настройки instanceof
— toPrimitive для преобразования объекта в примитив
— toStringTag для создания стандартного описания объекта
— species для создания производного объекта
— match, replace, search, split для создания регулярного выражения в форме объекта
— isConcatSpreadable для преобразования объекта в массив

#javascript #symbol

К статье(rus)
Анимация наведения и переходов меню

Tympanus
Декораторы JavaScript с нуля

Декоратор — это просто способ обернуть функцию другой функцией, чтобы расширить ее существующие возможности

#javascript #decorator

К статье(rus)
5 вариантов для рефакторинга if else:
— дефолтные значения параметров
— оператор или ‘?:’
— Оператор объединения с null '??'
— Оператор опциональной последовательности ‘?.’
— return без последнего else

#javascript

К статье(eng)