Webdev сохраненки
13 subscribers
137 photos
17 videos
7 files
353 links
Tips and tricks и прочие полезности из области веб-разработки, а также репосты понравившихся материалов
加入频道
Создание одностраничного приложения с Laravel и Vue

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

👉 @web_craft | #laravel
Forwarded from Laravel World
50-drops-of-php-light.pdf
350.9 KB
Книга «50 drops of PHP»
В ней собрано множество полезных и, либо неизвестных, либо недооцененных PHP-функций.
https://github.com/roberto-butti/50-drops-of-php
Forwarded from Душный Вуй
#vuejs

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

https://webislife.ru/vuejs-optimization-with-v-once-v-memo/
Forwarded from Веб-страница
Новый синтаксис диапазона медиа-запросов 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.

Читать
10 тенденций веб-разработки в 2023 году

Эта статья — своего рода попытка осмыслить последний опрос State of JS и спрогнозировать тренды на текущий год.

Читать
🔥👩‍🎓 Кстати, на web.dev есть целый раздел learn, где компактно в формате курсов описаны ключевые темы веб-дизайна и веб-разработки.

https://web.dev/learn/
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Веб-страница
This media is not supported in your browser
VIEW IN TELEGRAM
Создание отзывчивого мобильного меню с помощью CSS без JavaScript

В этой статье вы узнаете, как создать отзывчивое мобильное меню с помощью CSS, без использования JavaScript. Автор пошагово показывает, как создать и стилизовать гамбургер-меню, анимировать его и сделать его доступным для пользователей с ограниченными возможностями:

https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/

#css #фронтенд