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

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​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
This media is not supported in your browser
VIEW IN TELEGRAM
Мяу-мяу пианино

Этот милый codepen-проект предлагает вам поиграть на «мяукающем» пианино. Нажимать на клавиши вы будете не каким-нибудь курсором, а кошачьей лапкой, извлекая из инструмента соответствующие звуки.

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

https://codepen.io/laurenvast/pen/jOrWXej

#codepen
👍22❤12
​Jamstack: философия веб-разработки на примере Next.js

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

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

https://tproger.ru/articles/preimushhestva-jamstack-na-primere-next-js/

#nextjs #jamstack
👍18👎1
​Разработка на JavaScript с нуля в 2022 году: дорожная карта

Чтобы ваше обучение программированию на JavaScript с нуля было эффективным, мы составили для вас подробную дорожную карту. Забирайте себе по ссылке:

https://tproger.ru/articles/javascript-s-nulja-dorozhnaja-karta/

#javascript
👍58👎1
​​Когда ты фронтенд-разработчик, но в душе астроном:
😁141❤13👍9👎1🔥1
​Зачем использовать materialize и dematerialize операторы и что такое Notification в RxJS

Вы когда-нибудь встречали такие операторы, как materialize и dematerialize в RxJS? Вероятно, вы слышали о них, но не применяли их, потому что не до конца понимали, где они могут понадобиться.

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

https://habr.com/ru/company/skyeng/blog/661709/

#angular #rxjs
👍12
​8 советов работы с JavaScript, которые повысят ценность вашего кода

Писать код можно по-разному. Но существует ряд советов, которым стоит следовать, если вы не хотите потом усложнить самим себе жизнь. Одно из основных правил — комментирование кода. Без комментариев вы уже через неделю можете не вспомнить, что делает ваша функция.

Ещё 7 советов можно узнать здесь:

https://nuancesprog.ru/p/15712/

#javascript
👎28👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Библиотека lwder.js

Эта крошечная библиотека позволит вам сделать такие же крошечные и минималистичные загрузчики.

Подробнее:

https://bmsvieira.github.io/lwder.js/demo/index.html

#библиотека
👎18👍11
​Свежий выпуск подкаста Frontend Weekend с Евгением Кателлой в гостях

Это самый длинный выпуск московского видеосезона подкаста, ведь с Евгением можно обсудить много всего: его работу в Рамблере, руководство мобильной разработкой Яндекс.Еды, конференцию Podlodka Crew и множество других интересных вопросов.

Смотрим и слушаем, как обычно, тут:

https://youtu.be/iljZUC6rggQ

#подкаст
👍10
​​Прокачиваем навыки фронтенда с Frontend Practice

Frontend Practice — это сайт, который предлагает вам прокачать навыки вёрстки, воссоздавая реальные сайты. Проекты разбиты по уровням сложности, чтобы вы могли выбрать наиболее подходящий вам.

Подробнее:

https://www.frontendpractice.com/projects/ableton
👍36🔥12👏1
Что может быть хуже кучи Cookies? Уведомление о том, что на сайте не применяются Cookies, которое появляется при каждом обновлении страницы!
❤46😁40👍9🤮4🤯2
​​Детальный разбор вопросов с собеседований фронтенд-разработчиков

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

https://tprg.ru/Mbsq

#видео #фронтенд
👍44👏1
htmlq

htmlq — это парсер веб-страниц, который использует CSS-селекторы для извлечения фрагментов содержимого из файлов HTML. О том как его установить и использовать можно узнать тут:

https://github.com/mgdm/htmlq

#библиотека #парсинг
👍13❤1
​Создание плейлиста Spotify с помощью бота в Discord

В этой статье мы с вами сможем создать бота для Discord с применением Serverless Cloud, который будет добавлять песни в общий плейлист Spotify. Подробная инструкция по созданию здесь:

https://www.serverless.com/blog/making-a-discord-playlist-bot-with-serverless-cloud

#бот #discord
👍7❤1💩1
​Canvas2D. Canvas2D повсюду

Примерно 30-40% сайтов используют элемент <canvas> для своих целей. При этом 98% таких элементов рендерят Canvas2D. Он, кстати, применяется и в автомобилях, и в холодильниках, и даже в космосе.

О том, что он умеет сегодня, рассказали в блоге Google Chrome:

https://developer.chrome.com/blog/canvas2d/

#canvas #html
👍13😁3