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
5 вариантов для рефакторинга if else:
— дефолтные значения параметров
— оператор или ‘?:’
— Оператор объединения с null '??'
— Оператор опциональной последовательности ‘?.’
— return без последнего else

#javascript

К статье(eng)
Полный видеокурс по React(10 часов) от freeCodeCamp

#react

Смотреть курс(eng)
This media is not supported in your browser
VIEW IN TELEGRAM
Ничего странного - просто мужик не дает кликнуть по кнопке

Codepen
This media is not supported in your browser
VIEW IN TELEGRAM
Josh W. Comeau: “Вы знаете эту раздражающую вещь, когда вы прокручиваете до анхора, а ‘липкий’ заголовок сайта скрывает его?”

Это можно исправить с помощью одного css свойства:
.heading {
scroll-margin-top: 72px;
}

#css

К твиту
Использование Babel для статического анализа JSX

В статье реализуется небольшой плагин для babel, разбирающий дерево элементов в jsx

Так же в codesandbox приводится пример использования такого плагина вместе с react-live

#babel #react

К статье(eng)

Codesandbox
Вы не знаете деструктуризацию, пока

#javascript

К статье(rus)
100+ качественных иллюстраций svg/png совершенно бесплатно. Используйте их где угодно без указания авторства

К статье(eng)

К иллюстрациям
Прокачиваем навыки CSS: GRID

Статья от Яндекс Практикума будет полезна тем, кто только начинает осваивать GRID

#css #grid

К статье(rus)
Набор задачек разного уровня по работе с типизацией

Одна из задачек:

Реализовать встроенный в typescript Pick<T, K> generic без использования его.

Разработать тип, с выбором полей K из T

Например:

interface Todo {
title: string
description: string
completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
title: 'Clean room',
completed: false,
}

#typescript

Github
This media is not supported in your browser
VIEW IN TELEGRAM
В libjpeg-turbo сделали большое улучшение прогрессивного рендеринга JPEG. Теперь он шелковисто-гладкий, без блоков.

Jake Archibald: “Это впечатляет! Вы можете увидеть блочность декодирования JPEG Это изменение исправляет это, делая его приятным и плавным.
libjpeg-turbo - это декодер, используемый Chromium и Firefox, возможно, и другими.”

Jake Archibald: “В той же демонстрации вы можете увидеть рендер JPEG до того, как будут доступны какие-либо данные цвета. Это тоже будет исправлено и картинка не будет отображаться, пока не будут доступны данные со всех каналов.”

К демонстрации

К твиту
Перевод статьи Гарри Робертса: “Реальная эффективность Brotli”

В статье приводятся сравнения Gzip и Brotli, подробности про передачу пакетов по TCP, а также советы, как провести сравнения на своих проектах

#brotli #gzip

К переводу

К оригиналу
Перевод статьи Кэтти Сайлор-Миллер: “Шумиха вокруг Core Web Vitals”

В статье рассказывается, насколько важны показатели Core Web Vitals для производительности и seo, стоит ли их использовать и отказаться от остальных метрик.

#performance

К переводу

К оригиналу
Прощай, Web-API

В статье рассматривается подход, при котором не надо реализовывать REST/GraphQL взаимодействие в своем приложении, а можно переиспользовать одну и ту же модель на клиенте и сервере. Такой подход становится возможным с набором библиотек layr

#javascript #api #architecture

К статье(eng)
Как исправить ошибки с помощью Git в командной строке

В туториале будут показаны примеры использования команд:
— restore для отмены изменений по файлу
— amend для изменения последнего коммита
— revert откатывает изменения коммита с помощью нового коммита
— reset удаляет коммиты и выставляет новый указатель HEAD
— reflog логирует каждое изменение HEAD указателя
— cherry-pick берет изменения коммита и вносит их в текущую ветку новым коммитом
— rebase -i манипуляция коммитами и историей изменений

#git

К туториалу(eng)
Скрытые расходы при переходе на микросервисы

— Изменение подхода к работе с мастер-данными
— Невозможность переиспользования исходного кода монолита
— Проектирование системы заново
— Создание нового подхода к управлению инфраструктурой
— Измерение и проверка SLA каждого микросервиса
— Микросервисы добавят на порядок больше точек отказа
— Реорганизация команд
— Обратная совместимость с монолитом
— Интеграция и обучение служб поддержки

#microservices #architecture

К статье(rus)
Toptal соревнование по быстрому кодингу

Соревнование началось 30-го ноября и продлится до 13-го декабря, так что все могут успеть попробовать свои силы.

Так же предусмотрены призы как в суммарном зачете, так и лучшим представителям в своих странах, где число участников достигло как минимум 30

Помимо призов Toptal ищут 3% лучших разработчиков, которые готовы присоединиться к их сети.

#javascript #challenge

Принять учатие
Как создать сервер GraphQL в Next.js

В туториале рассматривается пример подключения GraphQL в Next.js приложение с помощью apollo-server-micro

#graphql #nextjs

К статье(eng)
This media is not supported in your browser
VIEW IN TELEGRAM
“Жидкие” элементы пользовательского интерфейса

Codepen
Вопросы по javascript

В репозитории собраны более 100 вопросов по javascript, так же можно узнать ответы и прочитать объяснение

#javascript

К вопросам(eng)

К вопросам(rus)
Краткое руководство: как легко отобразить на странице исходный код

#css

К статье(eng)