vanilla-hamburger

Ванильные гамбургеры
- Быстрые
- Маленькие (1.6KB gzipped)
- Без зависимостей
- Фреймворк агностик
- Чистый TypeScript
- Custom Elements

web-padawan.github.io/vanilla-hamburger
#library #ui

Список всех HTTP статусов с подробным описанием

Часто возникает вопрос: какой HTTP код возвращать в случае ошибки, в этом справочнике весьма подробно описанно назначение каждого из них.

Наиболее часто некорректно используются такие коды:
400 синтаксическая ошибка запроса
415 сервер не умеет обрабатывать этот тип данных. Обратите внимание на передаваемый mime-type
422 запрос синтаксически корректен, но содержит логическую ошибку
409 конфликт с текущим состоянием ресурса и клиент может разрешить этот конфликт
500 ошибка на стороне сервера, в идеале - никогда не должен появляться

restapitutorial.com/httpstatuscodes.html
www.restapitutorial.ru/httpstatuscodes.html
#http

Объ­яс­не­ние клю­че­вых слов initial, inherit, unset и revert в CSS

Важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Может показаться, что они автоматически приходят вместе с HTML, но это не так.

Краткое описание:
- inherit требует унаследовать значение от родителя
- initial устанавливает значение по умолчанию (стандарта, не браузера)
- unset для наследуемых свойств (влияющие на текст) действует как inherit, для ненаследуемых свойств (все остальные) ведет себя как initial
- revert сбрасывает значение до базового значения стилей браузера

web-standards.ru/articles/inherit-initial-unset-revert/
#css

Content Delivery Networks

Отличная статья, в которой много информации о работе сети, о работе CDN, о том как ускорить загрузку сайта используя CDN и многое другое

web.dev/content-delivery-networks
#http #cdn #network

Всего одна ошибка при проектировании React приложения может очень замедлить разработку

В React очень легко создать компонент в родительском и передать его в дочерний для отображения:
function App() {
return (
<Sidebar>
<Logo/>
</Sidebar>
);
}
function Sidebar({children}) {
return (
<div>
{children}
</div>
);
}
Такой подход может значительно упростить написание приложений за счет упрощения пробрасывания параметров в глубь дерева компонентов.
Так же такой подход позволяет делать переиспользуемые и независимые компоненты и видеть логическую структуру приложения:
<Wrapper>
<MainNav>
<GitHubLogo/>
<SiteSearch/>
<NavLinks/>
<ProfileDropdown/>
</MainNav>
<LeftNav>
<DashboardDropdown/>
<Repositories/>
<Teams/>
</LeftNav>
<CenterContent>
<RecentActivity/>
<AllActivity/>
</CenterContent>
<RightContent>
<Notices/>
<ExploreRepos/>
</RightContent>
</Wrapper>

epicreact.dev/one-react-mistake-thats-slowing-you-down
#react

TypeScript. Продвинутые типы

Отрывок из книги "Продвинутые типы".
В этом отрывке хорошо описываются различные крутые возможности языка и как они работают.
Затронуты темы:
- подтипы и супертипы
- вариативность
- совсестимость типов
- уточнение типа
- принцип работы и построения размеченных объединений.

Все же TypeScript замечательный язык, с весьма крутой системой типов, напомню что система типов TS - тьюринг полная.

habr.com/ru/company/piter/blog/518428/
#typescript

Вам не нужен...

Не все популярные инструменты так сильно нужны.
Например, популярная библиотека moment.js занимает 286kb, а ее альтернатива 82kb, притом что функционал очень похож.
В репозитории указаны возможные замены различным технологиям, библиотекам и их конструкциям.

github.com/you-dont-need

Внутреннее устройство и оптимизация бандла webpack

Алексей Иванов рассказывает про оптимизацию webpack сборки.
Автор рассказывает про
- Устройство бандла
- Процесс сборки бандла
- Неочевидные детали этого процесса
- ES6 модули
- Tree shaking
- Асинхроную подгрузку
- Анализ сборки
- Особенности сборки node модулей
- Способы оптимизации бандла

habr.com/ru/company/jugru/blog/342842/
#webpack

SVG иконки

Хороший обзор использования SVG на сайте:
- плюсы векторной графики
- где взять иконки
- где нарисовать
- шрифт vs спрайт
- различные способы поключения на сайт
- плюсы и минусы каждого способа

css.yoksel.ru/svg-icons/
#svg #css #html

SCSS in TS

В этот раз сразу две статьи, в обоих советы и способы использования популярной библиотеки для реализации CSS in JS с типизацией. Некоторые примеры и советы видимо хотят сделать SCSS in JS
Кратко отмечу интересные пункты:
- Практическое использование на примере реализации списка
- Типизация кастомных props:
styled.h1<{ active: boolean }>`some props`;
- Типизация темы используя .d.ts файл
- Глобальные переменные для стилей
- Удобный способ описания Media Query

carlrippon.com/playing-with-styled-components/
blog.agney.dev/styled-components-&-typescript/
#styledcomponents #typescript #react

Как соощить браузеру что сайт поддердивает цветовые схемы

Как же это прекрасно когда сайт переключается на темную тему вместе со всем окружением.
К сожалению, не все браузеры поддерживают темизацию. Стандартная темизация не всегда настолько хорошая как хотелось бы, на изображении видно что инпуты и кнопки в темной теме остались такими же как и в светлой теме.
Подстроить сайт под темную тему можно используя Media Query:
@media (prefers-color-scheme: dark) { ... }
Так же надо уведомить браузер о поддержке темизации:
<meta name="color-scheme" content="dark light">
или
:root {
color-scheme: dark light;
}

stefanjudis.com/today-i-learned/how-to-tell-browsers-that-your-site-supports-color-schemes/
#browser

А вы используете темизацию?

Пишем кастомный трансформер AST на TypeScript

Бывают ситуации, когда требуется программа, анализирующая текст другой программы, будь то автогенерация кода или же проверка на ошибки. В таких случая не обойтись без парсера кода и понимания того, что он выдает - Abstract Syntax Tree.
Для таких случаев создатели парсера TypeScript предусмотрели специальное API длч преобразования AST -> AST.
В статье описывается процесс написания такого трансформера.

habr.com/ru/post/457770/
#typescript #ast

Приходилось ли вам сталкиваться с AST или обработкой кода?

Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно

TypeScript при стандартных настройках много чего прощает. Это хорошо для упрощения перехода с JavaScript, однако в большом проекте это может привести к ухудшению кодовой базы. Но всего несколько советов позволит TypeScript раскрыть всю свою мощь.
- Никогда не используйте any
- Используйте strict режим, который включает сразу все 6 других настроек строгости. Их также можно включать по отдельности для постепенного рефакторинга.
- Больше иммутабельности, пусть даже только на уровне типов - readonly и as const
- Вывод некоторых типов можно сделать при помощи встроенных служебных типов - Utility Types
- Используйте сужение типов (я об этом писал в t.me/webcodernotes/90)
В некоторых случаях можно заставить TypeScript игнорировать ошибки, добавив в комментарий @ts-ignore, главное с этим не переусердствовать.

habr.com/ru/company/tinkoff/blog/521262/
#typescript

Вёрстка на Grid в CSS. Полное руководство и справочник

Отличная статья по CSS GRID, довольно подробно рассказывается как сетка работает и как с ее помощью сделать различные макеты.

medium.com/@stasonmars/grid-220508316f8b
#css #cssgrid

Приходилось ли вам использовать CSS GRID? Какие впечатления?

Сравнение слияния и перебазирования

Каждый раз я поражаюсь сколько возможностей предоставляет git, и вот одна из них - перебазирование.
Я очень люблю порядок в репозитории и merge коммиты очень его портят (по моему мнению).
В статье описывается разница между git merge и git rebase, как они работают и как их использовать.
Команда git merge <branch> создает новый коммит в текущей ветке, который объединяет ее с <branch>.
Команда git rebase <branch> добавляет коммиты из текущей ветки сразу после <branch>. При этом git последовательно применяет коммит за коммитом, и если происходит конфликт - то останавливается, предлагая пользователю его решить.
Добавив параметр -i можно контролировать процесс: изменить коммит в истории, изменить его описание и слить или поменять порядок коммитов.
Например команда git rebase -i HEAD~5 позволяет исправить что-либо в 5 последних коммитах.

atlassian.com/ru/git/tutorials/merging-vs-rebasing
#git

Какие требования к коммитам у вас?

Как сделать такой эффект

В статье рассказывается и показывается как можно реализовать такой эффект на CSS+JS, с примерами.
Реализация довольно простая, но красивая. Так же в статье показываются еще несколько интересных штучек с похожим кодом и описание фолбека, если JS у пользователя выключен.

css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons
#css #javascript #material

Центрирование в CSS: полная инструкция

В процессе верстки довольно часто встречается задача центрирования блоков, в некоторых случая[ это легко, в некоторых может вызвать головную боль. В этой статье собраны различные способы центрирования для разных ситуаций, все это сопровождается кодом и демострацией.

В случае с flexbox и css grid центрирование не представляет труда: используем justify-content: center для центрирования по горизонтали и align-items: center для вертикального центрирования (точнее по главное и перпендикулярной оси контейнера).
Для горизонального центрирования inline элементов можно использовать text-align: center,
для блоков - margin: 0 auto.
Так же можно использовать трансформации для блоков с абсолютным позиционированием:
position: absolute;
top: 50%;
transform: translateY(-50%);
Для вертикального центрирования inline элементов можно использовать vertical-align: middle.
В статье имеются и другие способы центрирования.

ishadeed.com/article/learn-css-centering
#css

Несколько Angular-приемов, о которых стоит помнить

Давное не было постов про Angular, исправляюсь😀

✔️ Использование InjectionToken для внедрения глобальных объектов позволяет избежать некоторых неприятных проблем, особенно при использовании Angular Universal
✔️ Порой удобнее унаследовать сервис от Observable или Subject
✔️ Для пользователей с High DPI дисплеями можно добавлять расширенный контент, написав простую директиву
✔️ Не забывайте о пайпах, их легко писать и они могут упростить ваш код
✔️ Двухсторонний биндинг делается очень легко
✔️ RxJS содержит много, нет... МНОГО операторов.
И у них много перегрузок.
✔️ RxJS операторы очень легко создавать свои, комбинируя уже имеющиеся
✔️ Структурные директивы, такие как *ngFor можно создавать самому

habr.com/ru/company/tinkoff/blog/514928/
#angular

Какие приемы используете вы?

Componizer

Расширение для VS Code, которое в пару кликов выделяет блок кода в отдельный компонент

marketplace.visualstudio.com/items?itemName=bilelmsekni.componizer
#angular #vscode

Как GitHub и VS Code взаимодейсвуют друг с другом

Microsoft отлично развивает и GitHub и VS Code и их взаимодействие.
✔️ Codespaces. Пока только в раннем доступе, но обещают всем и по цене от 7 руб/час за полноценный VS Code в браузере
✔️ Клонирование GitHub репозитория прямо из VS Code
✔️ Легкая публикация и создание GitHub репозиториев не выходя из VS Code
✔️ Расширенные опции для мерджа, ребейза и т.п. в расширении от GitHub
✔️ Создание и управление issue, pull request прямо из VS Code
✔️ И в целом хорошая поддержка git в VS Code (что MS выносит в отдельные пункты интеграции VS Code и GitHub 😕)

В VS Code появляется столько интересных функций что я уже подумываю перейти на него с Web Storm, но все же VS Code сложно настроить до уровня IDE а не редактора кода.

vscode.github.com
#vscode #github

Какие ваши впечатления от VS Code?

А вы знали что...

TypeScript умеет генерировать .d.ts файлы для .js файлов?

tsc --allowJs -d --emitDeclarationOnly src/foo.js

humanwhocodes.com/snippets/2020/10/create-typescript-declarations-from-javascript-jsdoc/
#typescript