​Как начать тестировать фронтенд: гайд для новичков

Многие фронтенд-разработчики не тестируют свой код должным образом. Это касается и начинающих разработчиков, и более подготовленных. Причём речь касается unit/интеграционных/e2e‑тестов, пирамид тестирования, красно‑зелёного рефакторинга, TDD и BDD, скриншот‑тестирования и других техник.

Этот гайд направлен на то, чтобы научить каждого фронтендера внедрять тестирование для повышения качества кода:

https://habr.com/ru/company/docdoc/blog/716526/

#фронтенд #qa

Иконки погоды в стиле глассморфизма

Эти 4 иконки погоды выполнены в стиле глассформизма. Для создания внешнего вида и анимаций использовались HTML и SCSS. Посмотреть код и забрать его в свой проект можно тут:

https://codepen.io/onediv/full/MWQKgmv

#codepen #html #scss

​Как правила линтинга влияют на архитектуру приложения

В eslint есть одно простое, но мощное правило, которое поможет вам в поддержании архитектуры приложения. import/no-restricted-paths позволяет указать зону, по которой запрещено импортировать определенные пути. Это важно, если вы хотите контролировать связи в архитектуре.

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

https://habr.com/ru/company/okko/blog/716042/

#линтинг

​Менеджмент зависимостей в JavaScript — управляем хаосом

Каждый веб-разработчик сталкивается с магией установки пакетов. Буквально по одной команде менеджер загружает все необходимые файлы и зависимости. Но чем их больше, тем «тяжелее» становится проект и его поддержка.

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

https://tprg.ru/jNfX

#javascript

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Ещё не успели попробовать Flexbox или хотите освежить в памяти все его возможности? В этой статье мы собрали для вас все свойства и продемонстрировали их работу в гифках:

https://tproger.ru/articles/how-css-flexbox-works/

#css #фронтенд

Monster Mash

Нечасто на codepen попадаются интересные проекты не только с точки зрения кода, но и самой идеи. Игра Monster Dash как раз является одним из таких проектов. Это аркада, которая предлагает несколько уровней с разными типами монстров и ваша задача отстреливать их.

Отрисовка здесь происходит с помощью Canvas, в чём вы можете убедиться, изучив код, когда вам надоест играть.

https://codepen.io/grantjenkins/pen/xxjQmmo

#codepen #gamedev

​Что лучше: Map или Object?

Объекты в JavaScript способны на всё. Нет, серьёзно, это просто всемогущая сущность с точки зрения языка. Но даже если объект может всё, это не значит, что его нужно использовать повсеместно.

Например, если вы собираетесь хранить пары ключ-значения, то для этого лучше использовать map и вот почему:

https://www.builder.io/blog/maps

#javascript

​Резервный маршрут в Laravel

В Laravel существует функция маршрутизации Route::fallback(). Если ни один маршрут не сработал, тогда резервная функция переопределяет дефолтную страницу 404 и вводит дополнительную логику. Как это работает и где может применяться читайте тут:

https://laravel.demiart.ru/rezervnyj-marshrut-v-laravel/

#php #laravel

​Шутки в сторону! Пора выяснить действительно важную вещь

Мы подготовили для вас тест, который поможет понять вам какая вы IT-принцесса. Всего 10 вопросов и одной загадкой станет меньше.

Скорее переходите по ссылке:

https://tproger.ru/quiz/kakaja-ty-it-princessa/

#кек #тест

​Создание доступных табов пользовательского интерфейса в JavaScript

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

Он также предоставляет код для создания вкладок с помощью клавиатуры и для улучшения доступности визуального интерфейса.

https://blog.logrocket.com/build-accessible-user-interface-tabs-javascript/

#javascript

​Мобильные платежи и оплата в приложении

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

https://youtu.be/58xWDkLyk7A

#видео

​Наглядные примеры использования React Hooks

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

https://css-tricks.com/react-hooks-the-deep-cuts/

#react #фронтенд

​​Настала пора похвастаться!

Очередная рабочая неделя подошла к концу и у вас наверняка накопилось чем поделиться. Расскажите о своих успехах и достижениях за эту неделю в комментариях по ссылке:

https://tproger.ru/articles/chto-vy-delali-na-etoj-nedele-post-hvastovstva-za-3-10-marta/

#чат

​«Как мы реализовали подпись документов с помощью ЭЦП для площадки на Bitrix»

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

https://tproger.ru/articles/kak-my-s-pomoshh-yu-ecp-realizovali-podpisanie-dokumentov-dlya-elektronnoj-torgovoj-ploshhadki/

#bitrix

А как же Node.js?

​Типичная рабочая задача разработчика и её решение

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

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

https://tproger.ru/articles/typical-it-task/

​Почему вы должны перейти на PNPM

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

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

https://medium.com/@buffet_time/why-you-should-move-to-pnpm-82962f332418

#pnpm