tproger_web | Unsorted

Telegram-канал tproger_web - Веб-страница

26007

Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai

Subscribe to a channel

Веб-страница

Google Play уходит, а ваши платежи остаются!

Google Play прекращает сотрудничество с российскими разработчиками 26 декабря. Кажется, самое время подключить альтернативный способ приёма онлайн-платежей. 

С CloudPayments монетизация бизнеса продолжит работать без перебоев!

Интегрируйте сценарии оплаты через мобильный SDK и получите весь инструментарий платёжного сервиса CloudPayments:

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

Подключить сервис легче, чем вы думаете
Ассистенты Cloud всегда помогут с реализацией ваших идей.

Подключение: https://clck.ru/3FQ6tZ

Подписывайтесь на канал Cloud и получайте ещё больше полезной информации о приёме онлайн-платежей.

Это #партнёрский пост

Читать полностью…

Веб-страница

Бесплатный курс по Node.js для Web3

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

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

Начать можно по ссылке.

#курс #web3 #nodejs

Читать полностью…

Веб-страница

Подробный урок по Vite для начинающих

Vite — это инструмент для сборки и сервер для современной веб-разработки. Он опережает по скорости Webpack и использует множество современных возможностей браузеров.

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

#vite #video

Читать полностью…

Веб-страница

RUINSWORD: Многопользовательский шутер с открытым миром для браузера на JS/TS, Three и Vue

Вот по-настоящему амбициозный проект, который на 100% раскрывает возможности современных браузеров. Несмотря на то, что сейчас доступна только бета-версия, мы с вами можем оценить объём проделанной работы и даже поиграть.

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

#gamedev #vue #threejs

Читать полностью…

Веб-страница

Vite 6.0: Новые возможности и будущее веб-разработки

26 ноября вышла новая мажорная версия Vite, которая принесла много нового. Например:

1. новое экспериментальное API для переменных окружения;
2. обновление поддержки версий Node.js;
3. значение по умолчанию для resolve.conditions;
4. JSON stringify;
5. расширенная поддержка ссылок на ассеты в элементах HTML;
6. postcss-load-config;
7. Sass теперь использует modern API по умолчанию;
8. кастомизация CSS названий файлов на выходе в library mode.

Более подробно о каждом обновлении в статье.

#новости #vite

Читать полностью…

Веб-страница

Perspective Loader на чистом CSS

Вы, скорее всего, видели этот шуточный ролик, где показывается почему на самом деле лоадер прерывается во время загрузки или установки.

Пользователь CodePen решил повторить его во фронтенде и сделал анимацию, которая работает исключительно на HTML и CSS.

Посмотреть код можно здесь:
https://codepen.io/jh3y/pen/xxWdOQy

#codepen #css

Читать полностью…

Веб-страница

Современные способы управления контентом

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

В этой статье разбираются:

— современные методы создания аккордеонов и подсказок;
— как использовать элементы <details> и <dialog> для улучшения UX;
— почему минимализм в веб-разработке сегодня так важен.

Подробности: https://css-tricks.com/the-different-and-modern-ways-to-toggle-content/

#фронтенд #css

Читать полностью…

Веб-страница

Направить потоки данных системы Мир Plat.Form в нужное русло поможет ваш выбор

Это первая серия фантастического комикса про Эндрю и Межгалактическую платформу Мир Plat.Form

Какой будет следующий этап приключений, зависит от вашего голоса в опросе

Читать полностью…

Веб-страница

Игры для дизайнера: как прокачать перо (кривые Безье), как кернить буквы и другие полезности

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

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

Смотрите видео и выбирайте понравившиеся сервисы. Для вашего удобства мы ещё и тайм-коды по сервисам оставим:

00:00 - bezier.method.ac
07:43 - type.method.ac
10:30 - shape.method.ac
11:28 - betterwebtype.com/triangle
14:53 - boolean.method.ac
16:32 - pixact.ly
17:08 - game.ioxapp.com/eye-test
18:35 - kolor.moro.es
19:14 - color.method.ac
20:55 - cantunsee.space
28:36 - userinyerface.com

#дизайн #видео

Читать полностью…

Веб-страница

Совет для React-разработчиков: старайтесь избегать множества вложений провайдеров в React

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

#react #советы

Читать полностью…

Веб-страница

OffscreenCanvas в JavaScript: разгоняем графику до максимума

OffscreenCanvas — это API, которое позволяет рендерить графику в отдельном потоке Worker, не блокируя основной поток, где обрабатывается интерфейс. Технически это достигается за счёт разделения UI и вычислений.

В этой статье вы узнаете зачем он нужен и как правильно его использовать. Уже пробовали?

#javascript #canvas #фронтенд

Читать полностью…

Веб-страница

Большой гайд по миграциям в Django

Макс — автор YouTube-канала PyLounge, о котором вы, возможно, слышали и чьи видео мы иногда выкладываем здесь или в нашем канале по питону. Он уже давно работает с Python в качестве бэкенд-разработчика и накопил достаточно опыта и знаний, связанных не только с разработкой, но и миграцией.

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

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

#django #бэкенд

Читать полностью…

Веб-страница

#простымисловами: Что такое FOUС и как его избежать

FOUC раздражает пользователей, но есть простые и эффективные способы его избежать.

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

#фронтенд #fouc

Читать полностью…

Веб-страница

Создаём таймер обратного отсчёта на CSS

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

В статье показаны два:

1. С помощью CSS, чтобы быстро добавить анимацию без сложных скриптов.
2. С JavaScript, если требуется полный контроль над логикой и внешним видом.

Подробности реализации доступны в этом руководстве.

#фронтенд #css #javascript

Читать полностью…

Веб-страница

TailwindCSS, Bootstrap, Foundation — эти инструменты становятся всё популярнее. Но в среде разработчиков сложилось не однозначное отношение к ним.

Одни называют их спасением: мол, быстрее, удобнее, понятнее. Другие жалуются, что это приводит к «мусорному» коду, где вместо структурного CSS — хаос из классов в разметке.

Сегодня я предлагаю вам обсудить этот вопрос и поделиться своим мнением. Должны ли разработчики полностью переходить на такие подходы? Или же классический CSS и аккуратное разделение стилей останутся золотым стандартом?

#обсуждение #css

Читать полностью…

Веб-страница

SDUI, или Как бэкенд-разработчику почувствовать себя фронтендером

Server Driven UI (SDUI) — это пользовательский интерфейс, управляемый сервером. Он сокращает клиентскую логику и обеспечивает согласованность между клиентскими платформами (web, iOS, Android и т. д.) за счёт возврата информации о продукте (элементов экрана для отображения и их содержимом) из API.

Другими словами, эта технология позволяет UI сделать запрос к API и получить в ответ JSON, в котором содержатся компоненты экрана (кнопки, checkbox’ы, поля для ввода и т. д.), а также логика их отображения под необходимую платформу.

Как это работает, рассказали в статье.

#ui #бэкенд #sdui

Читать полностью…

Веб-страница

Новогодний генератор снежинок на JS

Сейчас на codepen проходит новогодний челленедж. Каждая неделя — новая тема. Прошлая была посвящена снежинкам и хочу показать вам один проект, который там отметился. Это генератор снежинок, написанный на JavaScript.

Ключевой его особенностью является то, что все снежинки генерируются рандомно благодаря особому алгоритму. Это может оказаться удобно, если вам нужно добавить на сайт, например, эффект падающих снежинок.

Посмотреть принцип работы кода можно на странице проекта.

#codepen #javascript

Читать полностью…

Веб-страница

Продолжение комикса уже подоспело

Вы не забыли, как Эндрю выбирал между оптимизацией работы узла и заменой старого узла на новый? С вашей помощью он сделал правильный выбор и, завершив задачу, пришел к новой развилке: теперь вопрос задает сотрудник исследовательского центра Мир Plat.Form. Поможете с выбором?

Читать полностью…

Веб-страница

Здравствуйте, мистер Андерсон

Читать полностью…

Веб-страница

HellPot | Бесконечный honeypot для HTTP-ботов

Этот инструмент отправляет непослушных ботов в ад. запускает бесконечный поток данных, чтобы они теряли свои «души». В его основе движок, что использует фрагменты произведений Ницше. Написан на Go, поддерживает конфиги в .toml.

Цена: бесплатно  
Репозиторий проекта

⚡ — актуально
🗿 — Бог миловал

@prog_tools

Читать полностью…

Веб-страница

#простымисловами: Почему изображения тормозят сайты и что делать

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

Начните с малого: проверьте текущие изображения на сайте и попробуйте применить хотя бы пару советов из этих карточек — разницу вы заметите сразу!

Читать полностью…

Веб-страница

Придумайте подпись в комментариях

Читать полностью…

Веб-страница

Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax

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

#javascript #видео

Читать полностью…

Веб-страница

Техно-город из нашего виммельбуха продолжает готовиться к Новому Году!

На городской ёлке зажглись яркие огни, а улицы осветились блеском гирлянд и фонарей. Пока одни бегают в поисках подарков любимым, другие усердно доделывают важные задачи до конца года. В общем, что говорить, скорее открывайте третью главу и увидьте всё своими глазами: https://tprg.ru/nVBh

Реклама, ИП Михайлишина Гузель Фаниловна, erid: LjN8JsvVt

Читать полностью…

Веб-страница

BigDevSoon — полезный тренажёр для фронтендеров с большой коллекцией челленджей и проектов

На платформе собрано 100 челленеджей на каждый день. Каждый отличается по сложности и по тому, какие скиллы помогает прокачать. А ещё здесь готовые идеи проектов. Каждый проект разбит на отдельные карточки, которые позволяют разделить проект на отдельные части для последовательной разработки.

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

#тренажёры

Читать полностью…

Веб-страница

Встречайте Limbo — новая компактная и портативная СУБД

По сути, это SQLite, полностью переписанная на Rust. Разрабатывает его команда Turso, которая ранее сделала форк SQLite — libSQL, имеющий 12 тысяч звёзд на GitHub и 85 контрибьюторов.

Limbo направлена на то, чтобы со временем стать полностью совместимой с SQLite, при этом имея нативную поддержку асинхронности.

Сейчас можно посмотреть, как работает версия 0.0.9, протестировать СУБД в связке с JS или Python и, возможно, помочь разработчикам в качестве контрибьютора, если вам такое интересно. Почитать подробнее можно в блоге Turso, а изучить кодовую базу и потестить на GitHub.

#субд #sqlite #limbo #rust

Читать полностью…

Веб-страница

Новое CSS-свойство, облегчающее работу с transition

Анимация с помощью Transition является наиболее простым способом оживить сайт. Но в некоторых случаях это может вызвать трудности. Например, при задействии блоков с установленными размерами в значении auto или при отображении элемента, имевшего значение свойства display: none.

В CSS появилась новая фича calc-size(), которая позволяет справиться с этим. И в этом туториале вы узнаете не только, как воспользоваться ею для настройки переходов, но также свойством interpolate-size, правилом @starting-rule и свойством transition-behavior.

А вы уже пробовали спользоваться этими способами?

#css #фронтенд

Читать полностью…

Веб-страница

А в итоге окажется, что это API уже не работает и есть новая версия

Читать полностью…

Веб-страница

Frontend Night: встречаемся 16 декабря!

Для генерации лучших идей и общения с топовыми экспертами нет более подходящего места и времени, чем Frontend Night by Sber

Если вы участвовали в прошлом году — вы знаете, о чем речь. А если нет — спешите присоединиться, регистрация уже открыта!

Что ждет в программе:

— Стрим «Frontend-разработка»

Об основных направлениях frontend-технологий, архитектуре приложений и оптимизации процессов разработки

— Стрим «Soft-skills и процессы»

Все секреты успешного менторинга, эффективной коммуникации, управления командами и адаптации к новым ролям

А еще: фирменные игры, много общения и, конечно, pre-christmas party!

К деталям:
16 декабря, понедельник, 17:00,
онлайн и офлайн (Москва, по предварительной регистрации)

Начните свой новогодний марафон вместе с frontend community

P.S. Вы скорее всего уже знаете, как организаторы любят игры. В этот раз нужна ваша помощь — оставляйте свои ответы на короткие вопросы, они очень пригодятся!

Программа и регистрация — по ссылке

Это #партнёрский пост

Читать полностью…

Веб-страница

Настраиваем аутентификацию в веб-приложениях на Django

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

Реализовать такой механизм не тяжело, если вы используете в своём проекте Django. Как это сделать рассказываем в нашей новой статье.

#бэкенд #django #безопасность

Читать полностью…
Subscribe to a channel