Веб-страница
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
Энтузиаст соединил ChatGPT-4 с мозгом с помощью JavaScript

В качестве прослойки между мозгом и ChatGPT использовался нейроконнектор Crown, который преобразует мозговые волны в код, который затем можно использовать как угодно. Сперва разработчик научил систему распознавать, когда он представляет, как откусывает лимон. А затем пошёл дальше и с помощью SDK на JS настроил систему на общение с ChatGPT.

Подробнее об этом он рассказывает в своём видео:

https://youtu.be/-HYbFm67Gs8

#javascript #chatgpt #видео
😱20👍7🤯72
Превращаем старый телефон на Android в веб-сервер

У многих дома лежат старые ненужные телефоны, которыми уже никто не пользуется, но и прадавать их смысла нет из-за смешной стоимости. Но даже такой телефон ещё может послужить вам на пользу.

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

https://habr.com/ru/company/sportmaster_lab/blog/683242/

#бэкенд #интересное
👍13😐71
Почему стоит использовать Babel в разработке. Инструкция по написанию Babel плагина

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

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

https://tproger.ru/articles/pochemu-stoit-ispolzovat-babel-v-razrabotke-instrukciya-po-napisaniyu-babel-plagina/

#babel #javascript
👍93
Изучаем CSS Flex и Grid в фэнтезийном путешествии

Если хотите отточить свои навыки в позиционировании объектов с помощью флексов и гридов, при этом с интересным сеттингом, то вы по адресу. На сайте codingfantasy.com вы можете отправить в путешествие и помочь королю Артуру бороться со злом, используя Flex Box или спасти эльфа из лап демонов с помощью CSS Grid.

Уровней достаточно, чтобы стать настоящим CSS-гуру, проверьте сами:

https://codingfantasy.com/games

#css #игры
👍166🤣2
Юлия Миоцен: Топ-10 CSS-свойств аниматора

Юлия уже много лет занимается CSS рисунками и анимациями. Её демки неоднократно попадали в топ codepen и, возможно, вы их даже видели. За время работы у Юли образовался топ самых любимых, интересных и полезных CSS-свойств, без которых не обходится ни одна демка.

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

https://youtu.be/fFRADs5R9ME

#видео #css
15👍4😐1
9 способов разрядить атмосферу перед созвоном

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

В этой статье мы расскажем вам о 9 способах пережить минуты до начала созвона:

https://tproger.ru/articles/top-9-veshhej-pered-mitom/
😁41👎1
Галерея паттернов на чистом CSS

Ловите подборку паттерном, выполненных на чистом CSS. Как раз о них рассказывала Юлия в своём докладе. Да, паттерны — штука специфичная и уместна далеко не везде, но, как минимум, вы можете изучить, как такие паттерны создаются и затем использовать знания для вашей работы.

Смотрим галерею тут:

https://projects.verou.me/css3patterns/

#css
👍16
Дайджест Типичного программиста уже ждёт вас

Мы взяли лучшие материалы, которые выходили у нас, отобрали из них самые лучшие, разбили на темы, чтобы вам было удобно ориентироваться и выложили у нас на сайте. Немного про ChatGPT, чуть-чуть про веб, кое-что про пик Балмера и многое другое.

Переходите по ссылке и ищите то, что интересно именно вам:

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

#дайджесттп
6👍2
Доклад: Зачем учить TypeScript

TypeScript — один из самых популярных и востребованных языков программирования последних лет. Так ли он необходим для программиста или можно легко без него обойтись? Опытные разработчики поделились, зачем всё же стоит изучать TypeScript:

https://www.youtube.com/live/j-R0eP8uaHQ?feature=share

#доклад #typescript #javascript #ru
👍3
Аутентификация с помощью Django и SPA

Используя Django для создания одностраничных приложений у вас может возникнуть резонный вопрос: «Как мне настроить аутентификацию?». Что ж, если есть вопрос, то найдётся и ответ.

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

https://www.mikesukmanowsky.com/blog/authentication-with-django-and-spas

#django #python #бэкенд
5👍1
React Spectrum — создание компонентов нового поколения

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

Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.

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

https://habr.com/ru/articles/718000/

#react #фронтенд
👍1
Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

#js
🔥20👍3🥱1😐1
Мощь декораторов TypeScript на живых примерах. Декорирование методов класса

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

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

https://habr.com/ru/articles/707496/

#typescript
👍9
Сквозь тернии к core-у, или процесс компиляции Vue

Сегодня Vue пользуется огромной популярностью, успешно конкурируя с React. У него есть и удобные шаблоны, и однофайловые компоненты, и хранилище состояний и многое другое прямо «из коробки».

Но как это всё работает и компилируется? В этой статье вы найдёте ответ:

https://habr.com/ru/companies/nordclan/articles/690522/

#фронтенд #vue
Копирайтер против ChatGPT: чей текст про Python лучше

С появлением ChatGPT всё большему количеству людей пророчат остаться без работы, ведь их может заменить нейросеть. Коснулось это и копирайтеров. Но так ли всё страшно на самом деле?

Мы решили провести эксперимент и сравнить как справятся копирайтер и ChatGPT с одинаковой задачей. Тут мы оставили оба варианта текста и голосовалку, чтобы вы могли оценить чей вариант лучше:

https://tproger.ru/articles/kopirajter-protiv-chatgpt-chej-tekst-luchwe/

#chatgpt #python
😁14👍4👎1🍾1
This media is not supported in your browser
VIEW IN TELEGRAM
Ничего милее этих панд вы сегодня уже не увидите

Нашли для вас на CodePen проект, который позволит вам окружить себя пандами! Всё, что нужно сделать — нажать на кнопку «panda!» и к вам тут же выкатится милейшаяпиксельная панда, которая будет бегать по экрану. Нажмёте ещё раз — и появится ещё одна, и так пока вам не надоест.

Кстати, сделаны они с помощью SVG. Покликать и изучить код проекта можно тут:

https://codepen.io/Ma5a/pen/bGgxaYy

#codepen
👍20😍11
Дайджест Tproger: волшебство CSS-анимаций и GPT внутри гуманоидного робота

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

https://tproger.ru/articles/dajdzhest-tproger-volwebstvo-css-animacij-chatgpt-vnutri-gumanoidnogo-robota-i-bitkoin-vnutri-macos/

#дайджесттп
👍5
Как верстать на 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