​Что должен уметь фронтенд-разработчик в 2023 году

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

Подробнее:

https://tproger.ru/articles/chto-dolzhen-umet-frontend-razrabotchik-v-2023-godu-roadmap/

#фронтенд #roadmap

​Создание микрофронтенда со Svelte и Podium

Микрофронтенд позволяет нам создавать независимые части крупной архитектуры, что делает разработку удобнее и быстрее. В этой статье вы узнаете, как создавать отдельные микросервиы для фронтенда, используя Svelte, Rollup и Podium, а затем научитесь их компилировать в единое приложение:

https://blog.logrocket.com/building-svelte-micro-frontends-podium/

#микрофронтенд #svelte #фронтенд

​Как подключить ChatGPT к рабочей почте с помощью Nodul

Если на вашем сайте предполагается оформление заказов или взаимодействие с клиентами, то сегодня можно автоматизировать даже общение с ними. Например, подключив ChatGPT или любую другую нейросеть.

А как именно интегрировать ChatGPT на сайт и научить работать с почтой, узнаете тут:

https://tproger.ru/articles/vam-pis-mo/

#chatgpt #nodul #бэкенд

​15 полезных расширений для VSCode, которые упростят разработку

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

https://tprg.ru/4SpV

#vscode

​Создание калькулятора только с чистым HTML и CSS

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

https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html

#html #css

​Анализ работы Guess.js в приложении Angular

Guess.js — это библиотека, разработанная Google, которая использует данные аналитики для определения, какие ресурсы должны быть предварительно загружены, чтобы ускорить загрузку страницы. В статье рассматривается процесс интеграции Guess.js в Angular приложение, а также его настройка и использование:

https://nuancesprog.ru/p/16808/

#angular #guessjs

Давайте хвастаться своими успехами

Ну что, как прошла ваша неделя? Успели закрыть текущие таски или, может быть, сделали какую-то крутую фичу?

Переходите по ссылке и делитесь своими успехами в комментариях к статье:

https://tproger.ru/articles/chto-vy-delali-na-jetoj-nedele-post-ljogkogo-hvastovstva-za-20-24-fevralja/

​​Когда фронтенд ещё не отлажен, а запускать сайт уже надо:

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

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

https://nuancesprog.ru/p/16733/

#chrome #бэкенд

​Зачем нужна ARIA и как она помогает сделать веб-стайт более доступным

ARIA, или Accessible Rich Internet Applications — это спецификация, которая позволяет сделать веб-контент и сайты доступными для людей с ограниченными возможностями. В этой видео вы на простых примерах разберётесь с aria-ролями и aria-атрибутами:

https://youtu.be/oS5tmH8HtFw

#видео #aria

​Как использовать React в приложениях Angular

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

О том, как это сделать:

https://nuancesprog.ru/p/16840/

#react #angular

​8 CSS-проектов, демонстрирующих мощь теневых эффектов

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

https://speckyboy.com/css-snippets-shadow-effects/

#css

​Держите свежий дайджест Python: версия 3.12 и свой GPT за 60 строк кода

Подготовили для вас лучшие материалы по питону с 14 по 28 февраля. Большие данные, нейросети, Django, Flask и многое другое ждут вас тут:

https://tproger.ru/articles/dajdzhest-python-4-versija-3-12-i-svoj-gpt-za-60-strok-koda/

#дайджест #python

​Как посчитать длину текста и не привлекать внимание санитаров

В этой статье вы узнаете, как правильно рассчитать длину текста в JavaScript даже если там присутствуют эмодзи. Она будет одинаково полезна как начинающим разработчикам, так и весьма опытным. Благодаря ей вы поймете устройство Unicode и особенности его работы в JS.

Подробнее:

https://habr.com/ru/company/avito/blog/675586/

#javascript

​21 лучшая практика при написании кода на TypeScript

За счёт своей продвинутой системы типов TS позволяет писать более надёжный, обслуживаемый и масштабируемый код. Однако, чтобы задействовать весь потенциал этого языка и создавать высококачественные проекты, важно понимать лучшие практики и следовать им.

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

https://habr.com/ru/company/ruvds/blog/712548/

#фронтенд #typescript

​​Как прошла ваша неделя? Поделитесь своими успехами и похвастайтесь достижениями

Разработали крутую фичу, придумали интересную идею для пет-проекта или уже завершили работу над ним? Поделитесь своими яркими моментами в комментариях к статье:

https://tproger.ru/articles/chto-vy-delali-na-jetoj-nedele-post-hvastovstva-za-27-fevralja-3-marta/

#чат

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

Многие фронтенд-разработчики не тестируют свой код должным образом. Это касается и начинающих разработчиков, и более подготовленных. Причём речь касается 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