Webchic - frontend, backend, ci/cd

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

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

#performance

К статье(rus)

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

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

К докладу

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

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

#lint

К статье(rus)

CSS совет от Jhey Tompkins

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

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

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

Codepen

Twitter

Nodejs - лучшие практики

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

#nodejs

Github(eng)

Github(rus)

getEventListeners(element) в ChromeDevTools

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

К Твиту

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

#html

К статье(eng)

CSS совет от Jhey Tompkins

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

#css #html

Codepen

Twitter

Neumorphism - тренд 2020-го года в дизайне сайтов

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

Neumorphism UI KIT

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

Codepen checkbox

Codepen form

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

Codepen иконки

#css #neumorphism

Сверхбыстро

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

#performance

К докладу(eng)

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

#performance

К редактору

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

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

#algorithms #interview

К курсу(eng)

package.json анатомия

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

#package_json

К статье(eng)

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

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

#effector #state #react #typescript

К статье(rus)

8 советов по работе с терминалом, которые ускорят вашу разработку

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

#terminal

К статье(eng)

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

#css

К статье(eng)

Вопросы по javascript

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

#javascript

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

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