Веб-страница
22.1K subscribers
2.17K photos
561 videos
2 files
4.45K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​Что такое Web3? Объяснение децентрализованного Интернета будущего

С момента появления интернета он претерпел серьёзные изменения, но одной из вещей, которая не менялась была централизация. Да, сегодня сложно представить работу интернета без ЦОДов, которые хранят множество информации и контролируют взаимодействие пользователей с ней. Но Web3 призван сделать интернет не только децентрализованным, но и более конфиденциальным, чем сейчас. О том, как это возможно — читайте в статье:

https://www.freecodecamp.org/news/what-is-web3/

#web3
💩11👍10😁5
Запустить принудительно остановленный Docker контейнер можно с помощью…
Anonymous Poll
25%
docker start
19%
docker restart
17%
docker exec
39%
docker run
👍3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
hello в стиле Apple

Сложный с точки зрения количества строк, но простой по сути codepen-проект, повторяющий приветственное окно различной яблочной продукции, выполнен с использованием SVG и библиотеки GSAP:

https://codepen.io/tripti1410/details/pordWpZ

#codepen
👍11
​intro.js — то, что нужно для создания простых и мощных визуальных руководств пользователя

Если вам необходимо продемонстрировать возможности вашего продукта и показать, как им пользоваться простым пользователям, то JavaScript-библиотека intro.js отлично вам подойдёт. Её уже используют многие крупные компании такие, как Amazon, Nestle и другие, так что на неё можно положиться.

Убедитесь сами:

https://introjs.com/

#библиотека #javascript
👍14
Зачем мне эта математика? Компьютер сам посчитает!
😁91👎8🔥5👍3
Media is too big
VIEW IN TELEGRAM
Создание радиального меню для сайта

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

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

https://www.youtube.com/watch?v=9li7UcMuwKI

#видео
👍14🔥10
​Как плагин Emmet помогает ускорить работу с программным кодом

Emmet — ранее известный как Zen Coding — набор плагинов для текстовых редакторов, которые помогают ускорить написание кода HTML и CSS. И ускорение здесь действительно заметное. Например, стоит вам ввести знак «!» и нажать клавишу TAB, как тут же появится готовый «скелет» HTML-страницы. Но это только верхушка айсберга! Подробнее о возможностях Emmet вы узнаете в этой статье:

https://tproger.ru/articles/kak-plagin-emmet-pomogaet-uskorit-rabotu-s-programmnym-kodom/

#emmet
👍19🔥5❤1
​Как довести фронтендера до инфаркта:
😁125😱19👍16🤬9🔥3👎1
​Рефакторинг компонента React со 165 до 30 строк

React Hook Form — одна из самых популярных библиотек для обработки элементов ввода формы в экосистеме React. Но добиться её правильной интеграции может быть непросто, если использовать какую-либо библиотеку компонентов.

Эта статья научит вас, как интегрировать React Hook Form с различными компонентами Material UI:

https://habr.com/ru/company/otus/blog/653017/

#react
👍10👎2
​Создание веб-макетов для двухэкранных и складных устройств

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

Подробнее обо всём в статье:

https://tprg.ru/tghD
👍14
​Навигация с горизонтальной прокруткой

Цель этой статьи — научить вас создавать отзывчивую горизонтальную навигацию с помощью прокрутки переполнения. Весь код уже тут вместе с объяснениями:

https://markdotto.com/2022/03/10/horizontal-scrolling-nav/

#фронтенд
👍12👎1🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
Как Discord реализовал навигацию клавиатурой по всему приложению

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

Перевод статьи можно прочитать здесь:

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

#javascript
👍36🔥8
Достойные этой награды, отзовитесь
😁82🥰17👍14🔥7🤔1
​7 проблем создания прогрессивных веб-приложений

PWA работает в четыре раза быстрее, чем обычные веб-сайты. Тем не менее, есть некоторые общие проблемы при его создании. Давайте рассмотрим их вместе, чтобы заранее быть готовыми к их устранению:

https://dzone.com/articles/7-challenges-to-creating-your-ecommerce-shops-pwa

#pwa
🔥8👍2
Media is too big
VIEW IN TELEGRAM
Библиотека Vanta.js

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

Подробнее о библиотеке:

https://www.vantajs.com/

#библиотека #javascript
🔥28👍4
​Flexbox Defense — защищаемся башнями и изучаем flexbox

В этой простой игре в стиле Tower Defense вы сможете попрактиковаться в использовании Flexbox CSS. Вас ожидают 12 волн с различными условиями.

Поиграть можно тут:

http://www.flexboxdefense.com/

#css
👍38
​​Как упростить работу с базами данных в Node.js с помощью Objection.js

Objection.js — минималистичная ORM-библиотека для Node.js, которая сильно упрощает взаимодействие с базами данных и не перегружена дополнительными функциями, как sequalize или typeORM.

В этой статье вы узнаете, в чём её специфика и как строить запросы с её помощью:

https://habr.com/ru/company/hexlet/blog/660359/

#nodejs #библиотека
👍2
Всё познаётся в сравнении
😁108🔥8👍6💩5👎3
​7 расширений VS Code, которые стоит знать разработчику React

VS Code — одно из лучших оружий программиста. Вот 7 отличных расширений, которые может использовать разработчик React, чтобы сделать его ещё более мощным:

https://nuancesprog.ru/p/15719/

#react #vscode
👍14🥰1