Контейнерные CSS-запросы наконец-то здесь

С выходом Google Chrome (105) и Safari 16 появилась поддержка контейнерных запросов в CSS. Это даёт гораздо больше возможностей вёрстки. В этой статье вы узнаете, как работают контейнерные запросы, как мы можем их использовать и как выглядит синтаксис, а также увидите несколько реальных примеров и вариантов использования:

https://ishadeed.com/article/container-queries-are-finally-here/

#css #фронтенд

​Как настроить плавную прокрутку свайпом 3D-колеса

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

В этом видео наш подписчик поделился собственным способом решения этой задачи:

https://youtu.be/LdkUGG8f_xg

#видео #фронтенд

Добавляем эффект конфетти на сайт с помощью CSS

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

https://blog.logrocket.com/how-create-confetti-effect-css/

#css #фронтенд

​Как устроена Figma с точки зрения вёрстки

Ахмад Шадид покопался в вёрстке Figma и нашёл несколько интересных вариантов использования Flexbox и Grid. В этой статье он показал их и продемонстрировал насколько мощны сегодня эти способы расположения элементов.

Подробнее:

https://ishadeed.com/article/figma-css/

#css #figma

​Todo Tree — расширение для поиска слабых мест в коде по вашим комментариям

Задача этого расширения для VS Code в том, чтобы быстро найти в вашем коде комментарии, содержащие TODO и FIXME, а затем отобразить их в виде дерева на панели действий. Это позволяет отслеживать все места в коде, нуждающиеся в исправлении.

Скачать можно тут:

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

#vscode

​Как уменьшить размер JavaScript SDK на 29%

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

Как в итоге им всё-таки удалось уменьшить размер пакета почти на треть, узнаете тут:

https://blog.sentry.io/2022/07/19/javascript-sdk-package-reduced/

#javascript #рефакторинг

​Что лучше: Flutter или React Native

Споры о том, какая из платформ лучше бурлят уже давно. И умные люди говорят, что всё зависит от конкретной задачи. Но автор этой статьи считает, что так неинтересно и настаивает на том, что Flutter всё же опережает React Native.

С его аргументами можно ознакомиться здесь:

https://shift.infinite.red/flutter-is-better-than-react-native-fed10c92a768

#flutter #reactnative #mobidev

Что почитать. JavaScript для профессиональных веб-разработчиков [4-е издание]

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

В книге вы найдете:

— последнюю информацию о классах, промисах, async/await, прокси, итераторах, генераторах, символах, модулях и операторах spread/rest;
— фундаментальные концепции веб-разработки: DOM, BOM, события, формы, JSON, обработка ошибок и веб-анимация;
— расширенные API-интерфейсы: service workers, fetch, атомизация, потоки, каналы сообщений и веб-криптография;
— а также сотни рабочих примеров кода.

#книга #javascript

​Индексация строк в Rust и TypeScript в сравнениях

И в Rust, и в JavaScript обработка текста на всевозможных письменных языках реализуется посредством такого типа данных, как строка (String). Однако, у каждого языка есть свои особенности, в частности, если речь идёт о графемах или эмодзи.

Давайте посмотрим в чём состоит разница индексации в этих языках:

https://nuancesprog.ru/p/15288/

#rust #javascript

Ещё используете острые углы?! Закругляйтесь

React Cool Inview

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

Подробнее:

https://www.npmjs.com/package/react-cool-inview

#фронтенд #react

Создаём визуализации нажатий с помощью Vue 2 и Vue 3

Для этого нам понадобиться библиотека v-wave, которая позволяет с лёгкостью добавить различные эффекты при нажатии на блоки.

Библиотека и инструкция тут:

https://justintaddei.github.io/v-wave/

#фронтенд #vue #библиотека

Как сделать игру 2048 на React

Игру 2048 знают многие и многие в неё играли. А давайте теперь попробуем реализовать её самостоятельно с автором этого туториала.

В своей версии он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS. Помимо туториала в статье вы найдёте ссылки на игру, её код и демо анимацией:

https://habr.com/ru/company/skillfactory/blog/588356/

#react #gamedev

Хуки жизненного цикла компонентов Angular

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

https://medium.com/@mudit.manucha/actual-use-of-angular-lifecycle-hooks-d922680283c0

#angular #фронтенд

Создаём собственный текстовый редактор на React

Если вам не подходят уже существующие решения для текстовых редакторов, то можно создать своё. Оно будет:

— иметь предустановленные стили элементов;
— настраивать стили текста — курсив, жирность и так далее;
— поддерживать интерактивный элементы, например, ссылки;
— поддерживать хоткеи;
— и импортировать/экспортировать контент в HTML.

Всё это можно реализовать с использованием React, а вернее фреймворка на его основе Draft.js, который специально создан для работы с текстом. Как? Узнаете здесь:

https://habr.com/ru/company/kts/blog/576682/

#react #draftjs #фронтенд

​Как работать с нейросетями на JavaScript

Обычно, когда речь заходит о нейросетях, все сразу вспоминают Python. На самом деле это далеко не единственный язык, где вы можете создать собственную систему машинного обучения. Для JavaScript тоже существуют свои решения, например библиотека Dann.js.

Dann.js — это небольшая,которую легко изучить, поэтому она может стать отличным инструментом для изучения нейронок JS-разработчиками.

Подробнее о библиотеке можно узнать здесь:

https://dannjs.org/

#javascript #ml #dannjs

​Как защитить текст от комбинации Ctrl+F в браузере

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

https://nuancesprog.ru/p/16392/

#фронтенд

​Что такое SEO и как продвинуть сайт в Google

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

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

https://tproger.ru/articles/chto-takoe-seo-i-kak-prodvinut-sajt-v-google/

#seo

Menja — духовный наследник Fruit Ninja на JavaScript

Предлагаем вашему вниманию игру Menja, которая по сути является альтернативной версией Fruit Ninja, но с более геометрическим дизайном. Здесь вам необходимо разрубать пролетающие блоки.

Игра реализовано на JavaScript без сторонних фреймворков. Посмотреть на код и поиграть можно здесь:

https://codepen.io/MillerTime/details/BexBbE

#gamedev #codepen #javascript

30 seconds of code — полезные сниппеты на любой случай

На сайте 30secondsofcode.org собрана большая коллекция сниппетов JavaScript-кода, которые помогают работать с примитивами, массивами и объектами, а также включает алгоритмы, функции управления DOM и утилиты Node.js.

Сохраняйте себе в закладки и не теряйте.

#javascript

​Как профессионально использовать сопоставимые типы TypeScript

Использовали ли вы когда-нибудь сопоставимые типы при работе с TypeScript ? Они позволяют сделать ваш код чище и более читаемым, убрав излишнее дублирование в некоторых частях.

О том, как они работают и как ими правильно пользоваться, узнаете здесь:

https://nuancesprog.ru/p/16399/

#typescript