🏭 25 лучших практик отправки кода в продакшн

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

🔗 Основной сайт
🔗 Зеркало

#инструмент дня

Устал вручную типизировать ответы от API для TypeScript или любого другого типизированного языка?

Есть решение!

https://app.quicktype.io/

Фиганул туда JSON — получил нужную структуру или описание типа, даже с тайпгардами. Уютненько!

Есть расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

Ещё один мощный инструмент в тему дня: https://transform.tools. Одним типизированием JSON не ограничивается: можно CSS в Tailwind, а можно Flow в TypeScript.

Вот, например, если кто использует Zod — конвертор типов в схему Zod: https://transform.tools/typescript-to-zod

#json #typescript #type

​Intersection Observer

Это браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента.

Пример
Для наглядности область наблюдения выделена жёлтой рамкой, а снизу показано как изображения прокручиваются к этой области. Видно, что изображения начинают загружаться при пересечении пунктира, то есть чуть раньше, чем они появляются в видимой области. Это возможно благодаря свойству rootMargin.

Ещё одна фишка — изображение Морти немного увеличивается, когда полностью оказывается в наблюдаемой области. Такой трюк делается с помощью свойств threshold и intersectionRatio, о которых будет рассказано ниже.

Упрощённый код для этого примера выглядит приблизительно так.
const lazyImages = document.querySelectorAll('.lazy-image')

const callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log('Пользователь почти докрутил до картинки!')

entry.target.src = entry.target.dataset.src
observer.unobserve(entry.target)
}
})
}

const options = {
// root: по умолчанию window, но можно задать любой элемент-контейнер
rootMargin: '0px 0px 75px 0px',
threshold: 0,
}

const observer = new IntersectionObserver(callback, options)

lazyImages.forEach((image) => observer.observe(image))

👉 @seniorFront

Каррирование

#theory | Гайды по JavaScript

Мемоизации в JavaScript на практике

Материал для новичков и не только, после прочтения которого должно сложиться уверенное и всестороннее понимание мемоизации и таких тем, как: замыкание, функции высшего порядка, чистые функции, каррирование, TDD, рекурсия и property‑based тестирование. А главное — понимание как и где это применять.

Читать

Команда Microsoft заявила о выпуске TypeScript 5.0

TypeScript стал меньше, проще и быстрее. Команда внедрила новый стандарт декораторов, добавила функциональные возможности для лучшей поддержки проектов ESM в Node и сборщиках, предоставила авторам библиотек новые способы управления обобщенным выводом, расширила функциональность JSDoc, упростила настройку и внесла множество других улучшений.

Подробнее

​The-book-of-secret-knowledge — Коллекция из разных списков, руководств, шпаргалок, блогов, хаков, мини-програм, инструментов cli/web и многого другого

Репозиторий представляет собой коллекцию различных материалов и инструментов. Он содержит много полезной информации, собранной в единое целое. Наиболее подходящим список будет для системных и сетевых администраторов, DevOps и пентестеров.

⤷ Ссылка на проект

GitHub | #Archive #Interesting

​15 обязательных шпаргалок для веб-разработчиков

Здесь вы найдёте подборку шпаргалок для разработчиков, которые содержат основные синтаксические конструкции и команды для работы с различными технологиями и языками программирования. Шпаргалки по CSS Flexbox, Grid, React, Git, Node.js, Django и не только ждут вас тут:

https://dev.to/ishratumar/15-must-have-cheatsheets-for-developers-1n92

#шпаргалки

​​🚀6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 1)

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

Читать...

​​💪6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 2)

Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут автор рассказывает, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.

Читать...

JavaScript справочник

1loc.dev - это справочник с готовыми сниппетами кода.

В нем куча готовых решений!
Например таких, как:
- проверка, что дата является выходным днем
- проверка, что путь является относительным
- добавление определенного суффикса к числу
и многие другие.

Ссылка 

#js

Pinia Cheatsheet

#vuejs
#pinia