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

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

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

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

#фронтенд #css

​Qooxdoo 6.0 — JavaScript фреймворк для тех, кто любит кодить

Обожаете JavaScript, но пресловутые CSS и HTML так и лезут под руку, чтобы сверстать очередной элемент, оттесняя от любимого Япа? Выход есть! Фреймворк Qooxdoo позволит вам создавать полноценные веб-приложения с помощью одного только Javascript, а также использовать ООП так, что оно обойдёт возможности даже стандарта ES7.

Заинтригованы? Тогда скорее переходите по ссылке и читайте статью:

https://habr.com/ru/post/705254/

#javascript #qooxdoo

​Как понять режимы наложения раз и навсегда

Ну что, дизайнеры, давайте представим, что вам необходимо выбрать режим наложения для создания очередного потрясающе красивого элемента страницы. Что вы будете делать? Скорее всего начнёте перебирать каждый вариант наложения по списку, пока не найдёте подходящий. Так?

Если вы всё ещё не знаете, чем отличается Lighten от Soft Light или Multiply от Screen, то для вас есть статья, которая доходчиво всё объяснит:

https://awdee.ru/blending-modes/

#ui #design

​Дайджест Python: итоги 2022 года, обзор версии 3.11 и курсы от Google

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

Подробнее:

https://tproger.ru/articles/dajdzhest-python-itogi-2022-goda-obzor-versii-3-11-i-kursy-ot-google/

#python

​Разработка идеального пользовательского интерфейса для выбора языка

Насколько сложно может быть разработать качественный языковой селектор? Это не так просто, как можно подумать. Вам нужно избегать перенаправлений, разделять настройки языка и стран, допускать переопределения и использовать немодальные окна.

Окунитесь в мир разработки идеального UI и научитесь создавать лучший селектор языка в этой статье:

https://www.smashingmagazine.com/2022/05/designing-better-language-selector/

#фронтенд #ui

Целых 100 CSS-кнопок для вашего следующего проекта

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

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

https://ui-buttons.web.app/

#фронтенд #css

​Как ускорить full-stack разработку, не создавая API

Когда вы используете API для взаимодействия бэкенда с фронтендом, запускается процесс, который состоит из 4 этапов:

1. Запрос на получение данных из базы данных;
2. Отправка запроса API;
3. Обработка запроса API;
4. Получение данных из базы данных.

Для внутренних API второй и третий пункт кажутся достаточно затратными и необязательными, поэтому есть способ, как обойти их и свести обмен данными к их запросу и получению. Как это сделать рассказали в этой статье:

https://nuancesprog.ru/p/16651/

#фронтенд #бэкенд #api

Пикачу в коробке

Эта лягушонка в коробчонке пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.

Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:

https://codepen.io/maxi83c/pen/JjOZdWX

#codepen #css

Управление содержимым веб-страницы с помощью жестов

Еще недавно управление содержимым веб-страницы с помощью жестов можно было наблюдать разве что в фантастических фильмах. Сегодня все, что для этого требуется — видеокамера и браузер (и библиотека от Google).

В данном туториале вы рассмотрите 5 примеров:

— получение данных с видеокамеры и их отрисовка на холсте (canvas);
— обнаружение и отслеживание кисти руки;
— управление «курсором» с помощью указательного пальца;
— определение жеста «щипок» (pinch);
— нажатие кнопки с помощью щипка.

Подробнее:

https://habr.com/ru/company/timeweb/blog/698286/

#фронтенд #javascript

​Сравнение React и Vue: что общего и в чём разница по версии ChatGPT

Статей со сравнением фреймворков и библиотек огромное количество и каждый автор выделяет в качестве плюсов и минусов что-то своё. Мы решили пойти дальше и поинтересоваться мнением у нашумевшей ChatGPT. Она рассказала про React и Vue, а также выделила основные достоинства и недостатки.

Со статьёй, написанной нейросетью познакомиться можно тут:

https://tproger.ru/articles/sravnenie-react-i-vue-chto-obshhego-i-v-chjom-raznica/

#vue #react #chatgpt

Как отследить событие закрытия браузера и вкладки с помощью JavaScript

Небольшой туториал для начинающих фронтенд-разработчиков. Изучайте, сохраняйте и берите на вооружение:

https://nuancesprog.ru/p/16673/

#javascript

​Представляем Turbopack: преемника Webpack на основе Rust

Webpack был загружен более 3 миллиардов раз. Это стало практически неотъемлемой частью создания сайтов, но пришло время двигаться быстрее и масштабироваться без ограничений.

Сегодня появился новый инструмент Turbopack — это современный преемник Webpack. Подробнее о нём:

https://vercel.com/blog/turbopack

#webpack #turbopack

Создание редактора веб-кода

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

https://www.smashingmagazine.com/2022/01/building-web-code-editor/

#javascript #css #html

​Полезные инструменты для создания изображений AVIF

AVIF (формат изображения AV1) — это современный формат, который обеспечивает куда более значительное сжатие файла по сравнению с такими форматами, как JPG, JPEG, PNG и WebP.

В этой статье вы узнаете о некоторых браузерных и CLI инструментах для создания изображений AVIF:

https://css-tricks.com/useful-tools-for-creating-avif-images/

Как дать обратную связь, которая поможет начинающему разработчику совершенствовать навыки и не расстроит его?

Один из советов — не забывайте хвалить.

Другие рекомендации по фидбэку джунам найдёте в карточках от Яндекс Практикума. Читайте и берите на заметку: https://tprg.ru/dRHw

​Управление Состоянием В React С Помощью MobX

MobX — это проверенная в боях библиотека, которая упрощает и масштабирует управление состоянием за счёт прозрачного применения функционального реактивного программирования.

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

https://blog.openreplay.com/state-management-in-react-with-mobx/

#react #mobx

3D-эффект перехода между элементами

В этом проекте интересным образом реализован эффект перехода между элементами. Так, например, вы можете, просматривая изображения в галереи, узнать подробности или описание, наведя на изображение. При этом, если до этого курсор был на другой карточке, то возникнет эффект «перекатывания кубика».

Посмотреть код и поиграть с эффектом можно тут:

https://codepen.io/noeldelgado/pen/nweYMz

#codepen #фронтенд

​Анатомия ошибки в JavaScript

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

https://habr.com/ru/company/piter/blog/695890/

#javascript

Adrenaline — умный отладчик вашего кода

Этот отладчик кода работает на OpenAI Codex. Он не только исправляет ваш код, но и обучает вас на этом пути, давая ценные советы.

Инструмент бесплатен, а попробовать его можно тут:

https://github.com/shobrook/adrenaline

#инструмент

​Уже слышали про новую крупную утечку Яндекса?

На этот раз за персональные данные можно не переживать, ведь утекли исходники. Причём объём «слитого» кода немалый — аж 45 ГБ. Под раздачу попали многие сервисы компании — Карты, Алиса, Такси, Поисковая система и так далее.

Большая часть кода написана на Python 2.7, C++, Go и TypeScript. Нашлось место и забавным находкам, например, наименованию репозиториев. Подробнее у нас на сайте:

https://tproger.ru/articles/45-gb-ishodnogo-koda-jandeksa-okazalis-v-otkrytom-dostupe/