​Битва CLIs: Angular CLI против Nx

Nx — мощная система сборки, которая позволяет работать с монорепозиториями и предлагает разнообразные инструменты и библиотеки.

Автор материала в своё время решил отказаться от Angular в пользу Nx. Почему он принял такое решение, какие проблемы решает этот инструмент и чем он лучше Angular CLI можно прочитать по ссылке:

https://habr.com/ru/companies/tinkoff/articles/738654/

#angular #nx

​Для чего используется WeakSet

WeakSet используется для хранения коллекции объектов со слабыми ссылками. Другими словами, он служит дополнительным хранилищем объектов, используемых другим кодом.

Такие объекты автоматически удаляются сборщиком мусора, когда становятся недостижимыми (неиспользуемыми), т.е. когда от объекта остается только ключ в WeakSet.

#основы

​Framer Motion: библиотека анимирования компонентов

Framer Motion — это библиотека для react-приложений, которая даёт возможность создавать анимированные jsx-компоненты.

Её основные плюсы заключаются в интуитивно понятном интерфейсе и в управлении свойствами анимации прямо в jsx-разметке. Она может анимировать скролы, клики, тапы, драг-н-дропы и даже svg и 3D.

Автор статьи на примере того, как анимировать изменение высоты карточки с изменяющемся контентом показал, как начать работу с библиотекой и какие возможности настройки анимаций она имеет:

https://habr.com/ru/articles/746142/

#анимация

​Как создать и развернуть библиотеку компонентов Vue в NPM

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

В этой статье автор подробно разобрал, как использовать этот лайфхак на практике:

https://habr.com/ru/articles/678274/

#vue

«Не усложняй, бро»

Переключатель светлого и тёмного режима

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

А мы, в свою очередь, уже нашли для вас пример стильного переключателя, реализованного на чистом CSS.

Полный код проекта по ссылке:

https://codepen.io/demilad/pen/bZRjpb

#codepen

​Функция обратного вызова

callback — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение.

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

Один из способов, благодаря которым мы можем избежать подобного сценария это использование callback функции.

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

#основы

Раскрывающиеся рамки элемента при наведении

Не так давно мы рассказывали про эффект «boop» — анимация при наведении. Самое интересное в этом эффекте то, что он может помочь сделать ваш проект более динамичным и отзывчивым.

Нашли для вас проект на codepen с этим эффектом, реализованный на чистом CSS. Благодаря этому приёму, вы сможете привлечь внимание пользователя к нужному элементу.

Полный код по ссылке:

https://codepen.io/zastrow/pen/LYdNPOE

#codepen

Аббревиатур дня — CSS

Как транскрибаторы помогают айтишникам

Существует множество сервисов, которые помогают получить расшифровку аудио или видео. Встроенные решения есть у Chat GPT, в VK, Telegram, и других мессенджерах.

Чем же транскрибация может помочь разработчикам?

1. Понять, что хочет клиент, который почему-то решил озвучить правки в голосовом сообщении;
2. Разобрать, что же говорит тот индус из видео;
3. Получить читаемый пост-митинг после очередного созвона.

А в каких случаях вы используете сервисы для расшифровки в текст? Поделитесь своими кейсами в комментариях к опросу ниже.

​Конкурс на лучший пет-проект от редакции Tproger

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

Для лучших мы подготовили подарки — мерч от Tproger.

Подробные условия проведения конкурса ждут вас по ссылке:

https://tproger.ru/articles/luchwij-pet-proekt-2023-zapuskaem-konkurs/

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

Желаем удачи!

​4 причины, по которым Symfony лучше Laravel

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

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

https://tprg.ru/wtHx

#symfony #laravel

​Задачи по JavaScript

Ваша задача — разрезать плитку шоколада заданного размера n x m на квадратики. Каждый квадрат имеет размер 1х1. Реализуйте функцию, которая будет возвращать минимальное необходимое количество разрезов.

Например, если вам дали плитку шоколада размером 2 x 1, вы можете разделить ее на отдельные квадраты всего за один раз, но для размера 3 x 1 вам нужно сделать два разреза.

Поделитесь своими результатами в комментариях👇

#задачи

​Задачи по JavaScript

Вчера мы опубликовали задачу, а вот и один из вариантов её решения.

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

#задачи

​Для чего используется метод scrollIntoView

Если говорить научным языком, то метод Element.scrollIntoView() интерфейса Element прокручивает контейнер родителя так, чтобы элемент, на котором был вызван scrollIntoView(), стал виден пользователю.

Проще говоря, метод scrollIntoView() прокручивает указанный элемент в видимую область окна браузера.

Допустим, у вас есть элемент с id «el». Тогда код будет выглядеть так, как показано на картинке ниже.

Этот метод может быть полезен, к примеру, для продаж на вашем сайте. Допустим, есть некое описание товара, а внизу кнопка «получить скидку». Когда пользователь нажмёт на неё, данный метод поможет вам перенести внимание пользователя на раздел «скидки».

#основы

​Стек вызовов JavaScript: объяснение с помощью иллюстраций

Стек представляет собой структуру данных, организованных по принципу LIFO, т.е. в порядке обратной очередности (last-in — first-out, последним вошел — первым вышел).

Автор статьи объясняет, как это работает в JavaScript:

https://nuancesprog.ru/p/17792/

#javascript

Птица, которую суждено приручить только фулстеку

Анимация прогресса загрузки

Чтобы ваши пользователи могли следить за прогрессом загрузки, вы можете добавить подобный элемент на ваш сайт.

Проект реализован с помощью CSS и JavaScript.

Полный код по ссылке:

https://codepen.io/codercatdev/pen/VwQgLBy

#codepen

​Обработка событий CSS-переходов в JavaScript

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

https://itchief.ru/javascript/transition-events

#css