Веб-страница
24.1K subscribers
1.73K photos
529 videos
1 file
3.93K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
PureMVC фреймворк

Это крутой фреймворк, основная цель которого состоит в разделении интересов создаваемого кода. Суть кроется в названии, MVC — Model, View и Controller. А подробности кроются здесь:

https://puremvc.org/

#фреймворк
👍4
Что такое «Разделение ответственности» в коде

«Разделение ответственности» — ключевой фактор грамотной организации кода. Но что это значит и как правильно применять это? Если кратко, то это правильное разделение кода не только по функциям, но и по файловой структуре. Подробнее:

https://habr.com/ru/company/piter/blog/672522/
👍6🔥1🤣1
Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

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

https://tproger.ru/articles/podgotovka-okruzhenija-react-prilozhenija-vscode-prettier-eslint-stylelint-husky/

#react
👍17❤‍🔥21
Улучшенная прокрутка с помощью современного CSS

Скроллбар — это обыденная вещь, которая есть на каждом сайте и в приложении. Давайте посмотрим, что можно сделать в 2022 году, чтобы улучшить возможности прокрутки для наших пользователей:

https://blog.mayank.co/better-scrolling-through-modern-css

#css #фронтенд
👍23👏2
Theatre.js — это библиотека анимации JavaScript с графическим интерфейсом

Theatre.js — это библиотека анимации JavaScript с графическим интерфейсом. Она позволяет анимировать DOM, WebGL, а также любую переменную JavaScript. 2D, 3D, анимация клавиш, создание ховеров и прочее.

Протестируйте и попробуйте сами:

https://www.theatrejs.com/

#библиотека #фронтенд
👍33🤯1🍾1
Полное руководство по React Context

React Context позволяет без использования props’ов передавать и применять данные в любом компоненте приложения. Таким образом, он упрощает обмен данными между компонентами. В этой статье представлены советы, которые будут полезные даже тем, кто ещё не работал с React:

https://nuancesprog.ru/p/15868/

#react
👍13
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопка Play/Pause

Кнопка play/pause сделана с помощью чекбокса, а анимирована средствами CSS. JavaScript здесь не используется. Посмотреть как это работает можно тут:

https://codepen.io/RitikaAgrawal08/pen/eYGXQLz?editors=1100

#codepen
👍14🤔2
Защищаемся от DDoS-атак: что делать до, во время и после атаки

Распределенные атаки типа DDoS — это набор хакерских действий, направленных на сбой или нарушение работоспособности различных видов инфраструктур в сети, будь то простой веб-сайт или большой клиентский сервис. В этой статье разбираются способы борьбы с подобными атаками, а также как их предотвратить:

https://proglib.io/p/zashchishchaemsya-ot-ddos-atak-chto-delat-do-vo-vremya-i-posle-ataki-2022-06-28
👍16
Совместное использование компонентов React с Webpack 5

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

Подробнее:

https://nuancesprog.ru/p/15900/

#webpack #react
👍13🥰2🔥1💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный индикатор меню

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

https://youtu.be/5LTD_480gNU

#видео #туториал
👍21
Дыры в документации и ошибки laravel: в чём дело и как их исправить

Laravel хороший фреймворк — в нём довольно много готовых инструментов, неплохая реализация DI-контейнера и blade-шаблоны. Но в этом фреймворке есть подводные камни, которые кроются глубоко в исходниках и при этом не имеют явной документации. Вот о подобных вещах и расскажет эта статья:

https://tproger.ru/articles/dyry-v-dokumentacii-i-oshibki-laravel-v-chjom-delo-i-kak-ih-ispravit/

#laravel #php
👍4😱1
Временная мёртвая зона в JavaScript

Интересная задача про временную мертвую зону в JavaScript. Здесь вы изучите, как объявляется переменная (выполняется инициализация). Какие правила объявления переменной и вычисления её лексической привязки. Рассмотрите примеры кода temporal dead zone javascript.

https://youtu.be/OgE3P6kEPz4

#видео #javascript
👍4😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Берите на заметку для создания самой упоротой капчи
🔥75😁41❤‍🔥3👍3
Как создать простую функцию AWS Lambda с помощью TypeScript

Для написания функции Lambda обычно используется Node.js. Однако JavaScript вызывает определённые сложности из-за отсутствия проверки типов и отладки кода. Применение Typescript для решения этой задачи обладает рядом преимуществ. Подробнее о них в статье:

https://nuancesprog.ru/p/15880/

#typescript
👍2
Создание Todo List на чистом JavaScript

Небольшой туториал с разбором кода, с помощью которого вы сможете реализовать собственный список задач на чистом JavaScript:

https://itchief.ru/javascript/todo-list

#javascript #туториал
👍16
zx.js вместо Shell

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

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

#javascript
👍9👎2
Bun: новый рантайм для JavaScript

Bun конкурирует с хорошо известными NodeJS и Deno. Это новый JavaScript рантайм с нативным сборщиком, транспайлером, исполнителем задач и встроенным npm клиентом.

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

https://habr.com/ru/news/t/676102/

#javascript
👍21❤‍🔥3🤔21🔥1
Как с помощью Core Web Vitals влюбить в свой сайт пользователей и поисковые системы

Core Web Vitals — ядро сервисов для оценки производительности сайтов. Почему такое большое внимание уделяем Core Web Vitals и как эти метрики помогают повысить качество взаимодействия веб-ресурса с пользователем — в этом материале:

https://tproger.ru/articles/kak-s-pomoshhju-core-web-vitals-vljubit-v-svoj-sajt-polzovatelej-i-poiskovye-sistemy/

#seo
👍12👎1🔥1
Продвинутый бэкенд на Node.js

В этом видео вы узнаете, как реализовать масштабируемый бэкенд на Node.js с использованием фреймворка Nest.js. В качестве СУБД здесь используется PostgreSQL в связке с ORM Sequelize на Node.js. Вы также увидите, как обернуть приложение на Node.js в docker и docker compose.

https://youtu.be/dDeWWQWMM-Y

#бэкенд #nodejs
❤‍🔥35👍9🔥2
Создаем сайт-портфолио с responsive-дизайном

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

https://techrocks.ru/2021/08/24/responsive-portfolio-using-pure-html-css-javascript/

#фронтенд
👍21🔥5