Веб-страница
24K subscribers
1.76K photos
535 videos
1 file
3.96K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​​Как выглядит any в TypeScript:
😁106🔥15👍7💩1
Как попасть в IT, не становясь программистом

В новом выпуске подкаста Frontend Weekend Андрей Смирнов встретился с Артёмом Малышевым, автором другого популярного подкаста «Мы обречены». Артём невероятно креативен и талантлив – вместе с Филом Ранжиным они придумали множество шоу, в которых Артём как продюсер грамотно реализовал потенциал людей вокруг себя.

Смотрим и слушаем тут:

https://www.youtube.com/watch?v=WQI3pT1gQlY

#подкаст
👍7👎3💩2😁1
Создание, тестирование и деплой одностраничного приложения с помощью Vue 3 + Vite и Pinia

В этом руководстве подробно описаны шаги по созданию функционального примера одностраничного приложения книжного магазина с использованием Vue 3 и запуска его с помощью Vite. Оно также включает подробности о том, как добавить управление состоянием с помощью Pinia (альтернатива Vuex) и маршрутизацию с помощью Vue Router .

https://dev.to/andreirusu_/create-test-and-deploy-a-single-page-app-with-vue-3-vite-and-pinia-5097

#vue #spa #pinia #vite
🔥10👍6💩2
11 исходных программ JavaScript, предоставляющих шаблоны проектирования

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

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

https://nuancesprog.ru/p/15565/

#javascript
👍37👏2🥰1
Вот чего вы не знали о :where()

На первый взгляд использование :where() может оказаться надуманным и усложняющим разработку. В неумелых руках этот псевдокласс действительно может сделать читаемость стилей хуже. Однако, есть ряд ситуаций, когда он оказывается действительно кстати. Подробности в статье:

https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where/

#фронтенд #css
👍8🔥4
Это пока клиенты тоже человеки
😁159👍22🤩3
Devices.css — полезная библиотека для демонстрации мобильных продуктов

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

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

https://github.com/picturepan2/devices.css

#библиотека #css
👍28
Где учить React в 2022 году

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

В этой статье вы найдёте качественные источники, проверенные временем и опытными разработчиками, не только по React, но и по JavaScript, а также по смежным технологиям:

https://blog.openreplay.com/where-to-learn-react-js-in-2022-a-list-of-resources-for-new-developers

#javascript #react
👍16👎2
Formik — лёгкий способ создать сложную форму обратной связи

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

Подробности:

https://formik.org/

#библиотека #react
👍12
Пятница: *наступает*
Я:
👍66😁24👎1
Пишем NFT модульный синтезатор на JavaScript

Вы ещё не работали с NFT? Тогда мы идём к вам! А точнее предлагаем вам статью, которая поможет узнать NFT не понаслышке, получить новый опыт, а может, кто знает, и новый источник дохода.

Все подробности тут:

https://habr.com/ru/post/645467/

#nft #javascript
🤮9👍5🔥4🤔1
Что плохого в react-router?

На сегодняшний день react-router — это, можно сказать, монополист в мире React. Если в проекте нужен роутинг, то скорее всего выбор падет именно на эту библиотеку. Однако, автору этой статьи не давали покоя некоторые его нюансы, поэтому он решил написать собственное решение, которое продолжает успешно применять и сегодня.

О том, чем же react-router всё-таки не угодил и как быть с этим, читайте в статье:

https://habr.com/ru/post/599347/

#react
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
JavaScript редактор SVG диаграмм который весит в 6,5 раз меньше bootstrap

Если вам необходимо создать диаграмму, то DgrmJS отличный вариант. Он прост, выполнен на vanillaJS, имеет открытый исходный код, а весит при этом меньше bootstrap.

В этой статье автор рассказал, как ему удалось этого добиться:

https://habr.com/ru/post/648759/

#javascript #svg
👍375👎1
Библиотека ng2-charts для Angular

Продолжаем знакомить вас с полезными библиотеками на все случаи жизни. На очереди у нас библиотека, имеющая более двух тысяч звёзд на GitHub, которая даёт необходимые директивы для создания шести видов графиков на основе Chart.js.

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

https://valor-software.com/ng2-charts/

#библиотека #angular
👍102🔥2
Современные методы получения данных API в React

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

Это руководство рассматривает современные способы извлечения данных в React, а также их обработки:

https://blog.logrocket.com/modern-api-data-fetching-methods-react/

#react #api
👍15
This media is not supported in your browser
VIEW IN TELEGRAM
Красивая SVG-анимация страницы 404

Предлагаем вашему вниманию вариант оформления страницы 404, выполненный с помощью SVG. Посмотреть, как реализован этот проект можно тут:

https://codepen.io/brookjordan/pen/XNgmGq

#codepen
👍29👎2
Команды и сочетания клавиш NPM, которые нужны каждому JavaScript-разработчику

Знаете ли вы, что с помощью NPM можно выполнять удивительные действия, которые помогут вам ускорить разработку вашего приложения? Если хотите лучше разбираться в NPM и его возможностях, то вам сюда:

https://blog.bitsrc.io/the-most-pertinent-npm-commands-and-shortcuts-you-should-know-as-javascript-developer-d84e34f6fe32

#npm #javascript
👍13🔥2
История Angular: прошлое, настоящее и будущее

Angular прошел долгий путь в мире веб-разработки и разработки приложений с момента своего появления в 2010 году. И до сих пор он остаётся одним из главных фронтенд-фреймворков.

Но знаете ли вы, как ему удалось стать популярным и до сих пор оставаться востребованным? Эта статья расскажет вам, что делает Angular уникальным:

https://enlear.academy/angular-roadmap-the-past-present-future-212d8b98591b

#angular
👏3👍2🔥1
Избавляемся от switch

В своё время switch был добавлен в JS, чтобы упростить работу с множеством условий и избавить нас от необходимости написания и чтения «простыни» из if-else на десятки строк. Но, как показывает практика, switch далеко не всегда справляется со своей задачей.

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

https://nuancesprog.ru/p/8593/

#javascript
💩25👍12🥰3😁1
TypeScript — секретные материалы

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

https://www.youtube.com/watch?v=JJ171w3u2wQ

#видео #typescript
🔥11👍7