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
Nodejs - лучшие практики

В репозитории собраны рекомендации в разных категориях:
— Практики структуры проекта
— Практики обработки ошибок
— Практики стиля кода
— Тестирование и общие методы контроля качества
— Переход к производственным практикам
— Практики безопасности
— Практики эффективности

#nodejs

Github(eng)

Github(rus)
This media is not supported in your browser
VIEW IN TELEGRAM
CSS совет от Jhey Tompkins

Box Models
— content-box: отступы и границы добавляют к размеру 👎
— border-box: заданный размер - это суммарный размер ширины/высоты и границ 🙌

html { box-sizing: border-box; }
* { box-sizing: inherit; }

Думайте об этом, как о поясе Санты, который держит подкладку!

Codepen

Twitter
Линтер — это чистый код для ленивых

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

#lint

К статье(rus)
Руководитель отдела разработки интерфейсов Илья Кашлаков рассказал про развитие архитектуры фронтенда ЮMoney

В докладе рассказывается о истории развития фронтенда в ЮMoney, с какими проблемами сталкивались, к чему пришли и зачем нужна платформенная команда.

К докладу
До свидания, Google Fonts. Последний аргумент

В статье рассказывается, почему не стоит больше подключать шрифты с CDN Google Fonts, а более производительней отдавать их со своего хостинга.

#performance

К статье(rus)
JavaScript алгоритмы и структуры данных

В репозитории собрано большое количество материала с визуализацией по алгоритмам и структурам данных. Некоторые материалы переведены на русский.

#algorithms

Github
Sarah Drasner: “Если вы устали копаться в документации, чтобы найти правильный метод массива или объекта, я сделала пару инструментов, чтобы помочь!”

Массивы: https://arrayexplorer.netlify.app
Объекты: https://objectexplorer.netlify.app

#javascript

Они оба переведены сообществом на многие языки :)

К твиту
Head-of-Line Blocking в QUIC и HTTP/3: Подробности

В статье рассказывается история развития http, какие проблемы решались и как будет устроен http3

#http #http2 #http3 #tcp #quic

К переводу

К оригиналу
Модули в JavaScript

В статье рассматриваются две основные модульные системы: CommonJS и ESM (ECMAScript 6 модули).

#javascript

К статье(rus)
Addy Osmani: “Совет JS: Array.prototype.flatMap очень похож на map, за исключением того, что он убирает вложенные массивы и оставляет только их значения в результирующем массиве”

#javascript

Twitter
Как один разработчик воссоздал AirDrop, используя только JavaScript

#node #javascript #webrtc

К статье(eng)

Snapdrop.net

Github
This media is not supported in your browser
VIEW IN TELEGRAM
Josh W. Comeau: “Худшая вещь в мире - это когда анимация наведения останавливается, потому что перемещение курсора заставляет ее начинаться/заканчиваться.”

Исправьте это, отделив trigger от visual effect. Слушайте наведение на родителя, а не на анимируемый элемент

#css

Codepen

Twitter
Что нужно знать о популярных JS-фреймворках

В статье рассматриваются популярные фреймворки и библиотеки, их истории развития, преимущества и недостатки.

#angular #react #vue #ember #svelte

К статье(rus)
Как просмотреть в реальном времени свой localhost с ноутбука на мобильном устройстве

#debug

К статье(eng)

Еще один популярный вариант - библиотека ngrok
Репозиторий с большим набором полезных ресурсов, в том числе и по фронтенду.

Github
This media is not supported in your browser
VIEW IN TELEGRAM
Воссоздание эффекта сбоя кнопки, как в Cyberpunk 2077 с помощью CSS

#css

К статье(eng)

Codepen
System Design Primer - Это отличный репозиторий для инженеров-программистов, который поможет вам научиться проектировать крупномасштабные системы. Репозиторий предоставляет организованный набор ресурсов по этой широкой теме.
Поскольку проектирование системы часто является необходимым компонентом процесса технического собеседования во многих компаниях, этот репозиторий также может помочь вам подготовиться к этим собеседованиям с помощью учебного пособия, советов о том, как подойти к собеседованию, вопросов для собеседований с решениями.

#architecture

Github(eng)

Github(rus)
This media is not supported in your browser
VIEW IN TELEGRAM
Animista - сервис с большим набором готовых анимаций, которые можно поднастроить и скопировать код

#css

Animista
Как работает https

Вы когда-нибудь задумывались, почему в адресной строке браузера появляется зеленый значок замка? А почему это важно? Мы тоже, и этот комикс для вас!

Следите за приключениями Certificat, Browserbird и Compugter, объясняющих, почему HTTPS имеет решающее значение для будущего Интернета и как все это работает вместе.

Не позволяйте плохим крабам схватить вас (вы поймете, что мы имеем в виду в комиксе). Узнайте, почему HTTPS важен для вашей конфиденциальности.

#https

К комиксу(eng)
Как работает dns

Веселое и красочное объяснение того, как работает DNS.

“Привет всем! Мы сделали этот комикс, чтобы объяснить, что происходит, когда вы вводите адрес веб-сайта в своем браузере.”

#dns

К комиксу(eng)
Git, я хочу все отменить! Команды исправления допущенных ошибок

#git

К статье(rus)