10 полезных библиотек для фронтенд-разработки

Некоторые из них вам, возможно, знакомы, но некоторые смогут удивить. Например, тут вы найдете современную альтернативу библиотеке lodash, дополнение к Moment.js, библиотеку для работы с элементами Drag'n'Drop и многое другое.

Переходите по ссылке и выбирайте самые полезные для вас:

https://nuancesprog.ru/p/24406/

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

Зато 5 минут и работает. А баги и в остальные 4 часа 55 минут поправить можно

Благотворительный проект «Дело в собаке» ищет администратора сайта с функциями вёрстки

До 6 часов в неделю, удалёнка, без зарплаты.

«Дело в собаке» — полностью волонтёрский проект. Он посвящён собакам-помощникам для людей с разными ментальными и физическими заболеваниями, например депрессией, диабетом или астмой.

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

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

Что нужно делать?

— Сверстать сайт по готовому дизайну и перенести на сервер (сайт на Vue.js), настроив почту и разделы сайта по запросу.
— Администрировать сайт.

Сайт: https://delovdogs.ru/

Подробности о вакансии: https://gorodrabot.ru/vacancy/922041017/administrator_sayta_verstka_v_blagotvoritelnyiy_proekt_moskva

Связаться с руководителем проекта: @Nyta_Gins

Оптимизация загрузки ресурсов с помощью Fetch Priority API

Fetch Priority API указывает приоритет ресурсов для браузера. Это позволяет обеспечить оптимальную загрузку данных для того, чтобы пользователь мог максимально быстро начать работу с сайтом.

В этой статье вы узнаете, как работать с этим API и где он поддерживается в настоящее время:

https://web.dev/fetch-priority/

#api

Следим за NPM-пакетами правильно

pkg-size — это инструмент, который поможет вам проанализировать влияние NPM-пакетов на размер локальных node_modules и бандла при сборке проекта.

Как его установить и использовать, узнаете здесь: https://pkg-size.dev

#инструменты #npm

SSL и SSL-сертификаты для новичков

Тема SSL, сертификатов и вот этого всего довольно сложная. Но эта статья должна помочь вам разобраться в теме так, чтобы хоть что-то отложилось в голове.

Переходите по ссылке и читайте: https://habr.com/ru/articles/884898/

#ssl

Немного полезной информации о слотах в Vue.js

Слоты — это такие места в компоненте, куда можно вставлять разметку. Они позволяют создавать универсальные компоненты, которые сохраняют логику, но могут быть кастомизированы, как вам надо.

Подробнее о возможностях и пользе слотов: https://habr.com/ru/companies/otus/articles/850204/

#vue #фронтенд

разработчик сделал пинг-понг во вкладках браузера

Пользователь Nolen Royalty сделал «Faviconic Pong», где игра происходит между главным окном Chrome и 240 фавиконами. В игре есть ракетки, мяч и табло для подсчета очков.

Код залипалова можно глянуть здесь. А разобраться, как он работает — вот тут.

@your_tech

Pass Strength Shield

Это анимированное поле ввода пароля, созданное с помощью React, GSAP и DrawSVGPlugin3. Картинка над полем меняется в зависимости от того, соответствует пароль требованиям или нет.

Как повторить такой проект, можно узнать на его странице:

https://codepen.io/lerida/pen/MWjPxRW

#codepen

Как задеплоить вебаппку «Телеграма» всего за 20 минут

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

#telegram #webapp #miniapp

Проверьте свои репозитории. Вдруг там и до первой версии рановато

Сможете сделать устойчивую систему на Java?

Представьте, что вам нужно разработать систему на Java, которая выдержит любую нагрузку и не упадет. Для этого, как минимум, нужно выбрать наиболее подходящий фреймворк. Справитесь?

Проверьте свои силы в новом квизе: https://tprg.ru/zEI5

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

#квиз

ESLint теперь официально поддерживает линтинг CSS

Об этом появилась информация в блоге команды. Для настройки необходимо установить плагин @eslint/css. Он обеспечивает синтаксический анализ с помощью CSSTree и правил CSS.

Чтобы использовать плагин, установите его с помощью npm:

npm install @eslint/css -D

Подробнее можно почитать в их блоге.

#новости #css #eslint

Функции в CSS? Серьёзно?

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

Но вот пощупать функции в тестовой версии нам никто не запретит. Поэтому открываем статью и смотрим, как CSS превращается в язык, прости Господи, программирования.

Все подробности здесь: https://css-tricks.com/functions-in-css/

#css

Как конфигурировать Git

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

О том, как это сделать правильно, узнаете в статье: https://habr.com/ru/articles/886538/

#git

Меняем JS-библиотеку анимации на View Transitions

Теперь не нужно подтягивать тяжелые JavaScript библиотеки для анимаций в ваш проект. В Chrome и Safari появилась поддержка View Transitions API. Эта апишка дает нам механизм для простого создания анимированных переходов между различными состояниями веб-сайта без необходимости расписывать сложную логику с помощью JS.

Как это работает вы можете увидеть здесь.

#фронтенд #css #javascript

Что такое рекурсия и как с ней работать

Рекурсия — функция, которая вызывает саму себя. Её базовое применение — разбить большую задачу на несколько мелких, что делает код проще и понятнее, или когда нужно повторить какое-то действие несколько раз.

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

А вы используете рекурсию в своих проектах?

Используем tan(atan2()) для работы с вьюпортами в CSS

Такой способ был описан давно, но многие по-прежнему о нем не знают. Он позволяет, используя тригонометрические функции в CSS, узнать размер области просмотра и использовать это значение для дальнейшей работы.

Как это работает и где можно использовать, подробно рассказано здесь.

#css #фронтенд #лайфхак