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

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Как верстать на CSS Grid?

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

https://youtu.be/pIr6ACmdof4

#css #html
👍2🔥1
Вред и польза fullstack-фреймворков на примере Meteor.js

Термин «FullStack-фреймворк» появился довольно давно и подразумевает использование одного инструмента как для фронтенда, так и для бэкенда. На первый взгляд это может показаться идеальным решением — один человек может написать всё, не изучая множество различных технологий. Но на деле всё иначе и помимо плюсов тут также есть множество недостатков.

Подробнее тут:

https://habr.com/ru/companies/ncloudtech/articles/690464/

#fullstack #meteorjs
👍1👎1
Четыре полезных встроенных веб-API JavaScript

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

В этой статье вы узнаете о четырёх встроенных веб-API JavaScript, которые вы можете использовать в своих проектах: Notification API, Geolocation API, History API и Barcode Detection API. Подробнее:

https://blog.openreplay.com/four-useful-built-in-javascript-web-apis/

#javascript
👍15
This media is not supported in your browser
VIEW IN TELEGRAM
Добавление видео на фон с максимальной оптимизацией

Видео в качестве бэкграунда используется не так часто и это понятно — сайт с таким фоном получается куда более «тяжёлым», чем с картинками или просто CSS-оформлением. Да и не всегда видео на фоне работает достаточно плавно.

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

https://blog.logrocket.com/optimizing-video-backgrounds-css-javascript/

#фронтенд
👍85
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная таблица Менделеева на JavaScript

Особенностью этой таблицы является то, что каждый элемент анимирован в зависимости от агрегатного состояния вещества: твёрдого, жидкого или газообразного. Посмотрите, как это реализовано с точки зрения кода:

https://codepen.io/dilums/pen/oNzyeEv

#codepen #javascript
18👍12🔥11
Делаем оффлайн-страницу для сайта на случай потери интернета

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

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

Делается это довольно легко. Вот здесь есть пошаговая инструкция для проекта на Vue:

https://medium.com/@ahmadkzx/vue-offline-page-fbae11e7c3b7

#vue #фронтенд
🔥8👍52
Как не допустить свалки в Django-проекте: MTV, services.py, новые приложения

Чем дальше в проект, тем больше костылей. Можно ли избежать свалки из сомнительных решений и некачественного кода, если сроки всё время поджимают? Конечно можно, если следовать некоторым правилам.

Подробнее об этих правилах, модели MTV и не только узнаете здесь:

https://tproger.ru/articles/kak-ne-dopustit-svalki-v-django-proekte-mtv-services-py-novye-prilozheniya-239596/

#бэкенд #django
❤‍🔥5
Видеокурс по продвинутому бэкенду на Node.js

В этом видео вы узнаете, как создать масштабируемый бэкенд на Node.js с использованием фреймворка Nest.jsm PostgreSQL в качестве СУБД и Docker. Сохраняйте на будущее в закладках или смотрите прямо сейчас:

https://youtu.be/dDeWWQWMM-Y

#видео #бэкенд #nodejs
👍17🔥6
Свежий дайджест Типичного программиста уже на сайте

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

https://tproger.ru/articles/dajdzhest-tproger/

#дайджесттп
😁11🥱4🤮2
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивный лоадер-скейтбордист

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

Посмотреть, как реализован проект и попробовать можно тут:

https://codepen.io/aaroniker/pen/gOwEjBr

И помните: не нажимайте С! Мы вас предупредили.

#codepen #фронтенд
👍20🤨1
Что такое Go и как его используют

Язык программирования Go был создан в 2009 году и сегодня обретает всё большую популярность. Он отличается эффективностью и скоростью, схожей с языками Си, а также простым синтаксисом, характерным Python.

Сегодня Go популярен в качестве языка для бэкенд-разработки. Почему? В этой статье вы найдёте ответ на этот и другие вопросы:

https://tproger.ru/articles/chto-takoe-go-i-kak-ego-ispolzuyut/

#golang
1👍1
Дайджест Python #7: аналоги ChatGPT и обновления фреймворков

Свежий дайджест Python ждёт вас на сайте. Он порадует вас лучшими материалами по Big Data, AI, Веб-разработке на Python за первую половину апреля.

В этом выпуске вы узнаете об интеграции OpenAPI в Django, работе ChatGPT с базами данных и многом другом:

https://tproger.ru/articles/python-digest-7/

#дайджест #python
😁5💩1
Структуры данных во фронтенде

Структуры данных могут быть пугающими. Особенно для самоучек. Но с толковым объяснением и понятными примерами всё не так уж страшно.

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

https://profy.dev/article/javascript-data-structures

#фронтенд
👍41👎1🐳1
Ловите 20 полезных промптов ChatGPT для IT

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

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

https://tproger.ru/articles/20-rabochih-promptov-chatgpt-dlya-it/

#chatgpt
👍9👎3😐1
Скроллим к фрагменту текста с помощью URL

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

Реализуется это довольно легко, так что стоит взять на вооружение. Инструкцию оставили здесь:

https://blog.jim-nielsen.com/2022/scroll-to-text-fragments/

#фронтенд #навигация #url
😁60👎41👍1🐳1🤣1
PHPize.online — песочница для работы с SQL, PHP и ChatGPT

Это бесплатный проект, позволяющий:
— быстро писать и исполнять SQL запросы к различным популярным базам данных, таких как MySQL, MariaDB, PostgreSQL, SQLite, Oracle и Microsoft SQL Server;
— писать и исполнять код на PHP;
— получать подсказки по написанию кода от ChatGPT.

С помощью него вы можете быстро и просто написать небольшой проект, даже не обращаясь к IDE, и тут же проверить его работоспособность. А самое главное, вы можете поделиться готовым кодом, как, например, с помощью jsbin и codepen для фронтенд-проектов.

Подробнее о проекте, его особенностях и возможностях расскажет сам автор:

https://tproger.ru/articles/phpize-online-onlajn-sreda-dlya-raboty-s-bazami-dannyh-sql-i-php/

#инструмент #php #sql
👍81🔥1
Node.js: использование веб-потоков

Веб-потоки (web streams) — это стандарт для потоков (streams), который поддерживается всеми основными веб-платформами. Потоки — это абстракция для чтения и записи данных последовательно, небольшими частями из любого вида источника — файлов, данных, находящихся на сервере, и т.д.

В этой статье вы узнаете, как правильно использовать веб-потоки и где они будут полезны:

https://habr.com/ru/companies/timeweb/articles/675676/

#бэкенд #nodejs
👍3