Шпаргалка по SQL

Доступные front-end паттерны для отображения таблиц

Зачастую таблицы с данными не умещаются в экраны планшетов и смартфонов. Посмотрим, как решить проблему стилизации и читаемости в таких ситуациях.

https://www.smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1

How to create a debounced ref in Vue 3 using Composition API

https://theroadtoenterprise.com/blog/how-to-create-a-debounced-ref-in-vue-3-using-composition-api

#кодинг
#vue
#vue3

Лучшие практики тестирования JavaScript и Node.js: актуальная коллекция из 50+ передовых практик и примеров.

Репозиторий & Сайт

Подделка API

Тесты и программные компоненты, которые ты хочешь протестировать, в большинстве случаев имеют зависимости. Типичной зависимостью может быть, например, внешний источник данных. Было бы непрактично вызывать настоящий API в тестовой среде или в процессе разработки. В данной статье автор демонстрирует 4 способа подделки API.

👉Читать статью

#статьи

А вы знали, что можно использовать latest() для сортировки результатов? По умолчанию метод сортирует по полю created_at, но вы, например, можете отсортировать по идентификатору: latest('id').

How to make custom endpoint for users in Strapi 4

https://forum.strapi.io/t/create-custom-endpoint-for-users-in-strapi-v4/13724/9

#кодинг
#nodejs
#strapi

Strapi v4 user register override

https://gist.github.com/bibekgupta3333/7c4d4ec259045d7089c36b5ae0c4e763

#кодинг
#nodejs
#strapi

How to Create a Refresh Token Feature in your Strapi Application

https://strapi.io/blog/how-to-create-a-refresh-token-feature-in-your-strapi-application

#кодинг
#nodejs
#strapi

58 PhpStorm Tips & Tricks
Приёмы и хитрости при работе в Шторме
https://masteringphpstorm.com/tips-and-tricks

Создание одностраничного приложения с Laravel и Vue

До запуска пользовательского интерфейса Laravel одной из его функций была поддержка Vue.js.
В статье мы рассмотрим, как создать одностраничное веб-приложение используя связку Laravel и Vue.

👉 @web_craft | #laravel

Книга «50 drops of PHP»
В ней собрано множество полезных и, либо неизвестных, либо недооцененных PHP-функций.
https://github.com/roberto-butti/50-drops-of-php

#vuejs

Статья от @dstrokov про v-once и v-memo во Vue.js

https://webislife.ru/vuejs-optimization-with-v-once-v-memo/

​Новый синтаксис диапазона медиа-запросов CSS

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

Спецификация Media Queries Level 4 представила новый синтаксис для таргетинга на диапазон ширины вьюпорта с использованием обычных математических операторов сравнения — таких, как <, >, и =, которые имеют больше смысла синтаксически при написании меньшего количества кода. Подробнее о них здесь:

https://css-tricks.com/the-new-css-media-query-range-syntax/

#фронтенд #css

Libraries.io — бесплатный поисковик онлайн-репозиториев

С его помощью вы сможете найти нужный вам проект с открытым исходным кодом в базе из 6 млн пакетов

Libraries.io подключается к самым популярным менеджерам пакетов, таким как npm, bower, Packagist и т.д — всего их 32

Стоимость: #бесплатно

#библиотека #пакеты

#такое дня

Меня одного задолбали недоделанные технологии?

Ну в самом деле, что толку, что web-платформа развивается семимильными шагами, если каждый шаг — в клоунских ботинках?

Щас поясню. Примеры будут очень простые, про скроллинг. Но показательные. Дальше предложите сами.

1. position: sticky

Мы его ждали много лет. С таблицами правило стало работать только после того, как в Chrome полностью движок таблиц переписали. А теперь... а теперь ещё несколько лет будем ждать, чтобы получить возможности навесить нужные стили на «прилипший» элемент. Слухи о псевдоклассе :sticked так и остались слухами.

Что мы делаем? Конечно же считаем скролл ручками!

2. element.scrollIntoView

Шикарная вещь! Просто гениальная по своей сути. Что может быть приятнее, чем просто указать, как именно нужно автоматически доскроллить до элемента и где остановиться. Вот только...

Вот только где offset, я спрашиваю? Почему нет такой простой вещи?

Но ведь есть scroll-margin-top, скажете вы...

Ага, вроде и есть. А что если мне нужен разный в зависимости от ситуации? А если динамический? Что если у меня на одном варианте AB-теста есть sticky-заголовки, а в другом — нет?

Что мы делаем? А опять ручками:

const line = document.querySelector(`[data-id=${id}]`);

if (line) {
  const p = line.getBoundingClientRect();
  window.scrollTo(p.left, p.top + window.scrollY - 40);
}

Раздражает. Зачем таким вообще заниматься?

Ну выход на самом деле только один — участвовать в обсуждениях. Или заткнуться.

#css #hate

Перевод статьи Андрея Ситника про новые спецификации CSS и цветовое пространство OKLCH.

Читать