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
Как создать сервер 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)
8 советов по работе с терминалом, которые ускорят вашу разработку

В статье перечислены удобные инструменты для терминала: атодополнение, быстрый переход между часто используемыми директориями, сокращенные git команды и другие…

#terminal

К статье(eng)
Netflix Intro анимация на чистом CSS

Codepen
Использование Effector в стеке React + TypeScript

Effector - стейт-менеджер с несколькими хранилищами для приложений Javascript (React/ React Native/Vue/Node.js)

#effector #state #react #typescript

К статье(rus)
package.json анатомия

В статье объясняются назначения полей и возможности package.json

#package_json

К статье(eng)
Динамическое программирование - научитесь решать алгоритмические проблемы и задачи программирования

На курсе разбираются задачи разного уровня: числа фибоначчи, поиск пути, возможность суммы определенного числа в массиве и другие. А так же показываются приемы уменьшения сложности алгоритмов.

#algorithms #interview

К курсу(eng)
Набор svg текстур, разработанных с помощью юникод символов и <pattern> элемента

Текстуры
Squoosh - редактор для оптимизации изображений, созданный разработчиками google

#performance

К редактору
Сверхбыстро

Новые функции для преодоления основных пороговых значений Web Vitals:
— content-visibility - позволяет указать браузеру не высчитывать layout, если контент вне viewport
— contain-intrinsic-size - указывает браузеру, какой размер будет у контента(необходимо, чтобы не скакал скролл)
— ascent-override, descent-override, line-gap-override для уменьшения скачка layout, когда подгрузился шрифт
— portal - новый html элемент для отрисовки страницы и возможности “активировать” страницу
— quicklink - библиотека для ускорения навигации между страницами

#performance

К докладу(eng)
This media is not supported in your browser
VIEW IN TELEGRAM
Neumorphism - тренд 2020-го года в дизайне сайтов

Набор материалов с компонентами в стиле Neumorphism:

Neumorphism UI KIT

Codepen набор элементов

Codepen checkbox

Codepen form

Codepen набор элементов

Codepen иконки

#css #neumorphism
This media is not supported in your browser
VIEW IN TELEGRAM
CSS совет от Jhey Tompkins

НЕ используйте <div> для прогресс бара!
Используйте элемент <progress>
Вы можете стилизовать его с помощью переменных CSS и некоторых псевдоселекторов.

#css #html

Codepen

Twitter
<wbr> - html элемент, указывающий браузеру где “обрывать” слово для переноса на новую строку при необходимости

#html

К статье(eng)
This media is not supported in your browser
VIEW IN TELEGRAM
getEventListeners(element) в ChromeDevTools

Вызов getEventListeners(element) в ChromeDevTools консоли
перечисляет всех слушателей событий, прикрепленных к данному элементу

К Твиту
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)