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

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

В какую сторону развивается Vue и есть ли ему современные альтернативы

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

Но ему уже более 10 лет. А для IT-продукта это большой срок, за который появились другие проекты. В этой статье мы решили разобраться, есть ли альтернативы у фреймворка, каковы его особенности и преимущества, и как использовать Vue.js с максимальной эффективностью.

#vue

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

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

Разработчик смотрит, какой дизайн предлагает сверстать дизайнер.

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

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

Стильная анимация кнопки поиска для вашего сайта

Сделана с помощью классического стека HTML + CSS (SCSS) + JS, поэтому может быть использована вами в любом проекте без установки дополнительных библиотек.

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

#codepen #фронтенд

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

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

Создаём свой индикатор прокрутки на чистом JS + SVG-анимация окружности

Индикатор прогресса чтения статьи сегодня является популярным решением на многих сайтах. В этом видео автор показал, как реализовать такой элемент, а ещё как сделать аналогичный индикатор, но в форме кольца:

https://youtu.be/ScadOMC4Bko

#видео #фронтенд

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

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

Эти ребята явно шарят в IT, не так ли?

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

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

Как работает псевдокласс :has() в CSS

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

Как это работает?

element:has(selector) выбирает элемент, который содержит определённого потомка или соответствует указанному селектору.

/* Выбрать карточки, содержащие кнопку */
.card:has(button) {
border: 2px solid blue;
}

Здесь будут выделены только те .card, внутри которых есть <button>.

Зачем он нужен?

1. Работа с родительскими элементами. Например, стилизовать <div>, если внутри него есть конкретный элемент.

2. Условное форматирование. Например, вы можете выбрать контейнеры, в которых есть определённое состояние, например, отмеченный чекбокс.

/* Стилизовать родительский div, если внутри есть отмеченный чекбокс */
div:has(input[type="checkbox"]:checked) {
background-color: lightgreen;
}


#простымисловами #css

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

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

Будущее микросервисов: уйдем ли мы к монолитам 2.0

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

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

#микросервисы

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

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

Как парсить сайты в обход защиты от парсинга?

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

На Хабре есть неплохой гайд. Делимся с вами: https://habr.com/ru/post/710982/

#linux #html #javascript #сsharp

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

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

Помоги сделать Tproger интереснее 

Друзья, мы ищем тех, кто:
— Пишет код (и иногда испытывают к нему почти родственные чувства).
— Работает с данными, инфраструктурой или тестированием (и гордится этим).
— Управляет проектами, командой (или хотя бы котом).
— Просто интересуется IT.

Сейчас нам очень важно ваше мнение про Tproger и как сделать его лучше. Займёт не более 2-3 минут, если ни на что не отвлекаться.

Ссылка на анкету: https://tprg.ru/zmo2

#tproger

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

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

CSS-вишлист 2025

Что бы вы добавили в CSS в этом году? Каждый год язык обрастает новыми возможностями и этот не исключение. Мы не знаем наверняка, что именно попадёт в релизную версию, но можем с вами пофантазировать, как это сделали ребята в этой статье. Они предлагают добавить if(), новые атрибуты в link() и многое другое.ъ

Со всеми идеями можете ознакомиться в материале, а пока напишите в комментариях, чего вам не хватает в CSS сегодня.

#css

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

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

Слайдер настроения на чистом JS

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

Создан он с помощью SCSS и JS. Забрать код в свой проект или изучить подробнее можно по ссылке на codepen.

#codepen #слайдер #ui

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

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

Рунет прилёг отдохнуть

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

Почувствовали на себе?

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

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

Признавайтесь, кто тоже только что узнал?

pyscript.net

@zen_of_python

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

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

Продвинутый бэкенд на Node.js

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

https://youtu.be/dDeWWQWMM-Y

#бэкенд #nodejs #nestjs #postgresql

p.s. Дайте знать, если будут проблемы с видео на мобилках. Telegram в последнее время багует, особенно с видео

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

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

Performance и оптимизация TypeScript-типов в больших проектах

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

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

#typescript

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

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

Accessibility для всех: Как удержать пользователя в приложении с помощью доступности

Accessibility — это свойства приложения, которые дают возможность пользоваться им людям с ограниченными возможностями. Например, для пожилых или юзеров с частичной потерей зрения. Делать приложение доступным не только гуманно, но и выгодно.

Если вашим сайтом пользоваться сложно, вы теряете деньги и постоянных клиентов. Давайте разберёмся, как не допустить убытков и при этом сделать своё приложение качественнее и удобнее. Подробности в статье: https://tproger.ru/articles/kak-uderzhat-polzovatelya-v-prilozhenii-s-pomoshhyu-dostupnosti

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

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

HTTP-запросы: GET, POST и другие

HTTP-запросы — основа взаимодействия между клиентской и серверной частями веб-приложений. В этой статье мы рассказали, как работать с HTTP-запросами в веб-разработке на Node.js, Python и PHP, а также привели примеры на JavaScript с использованием fetch и axios.

#http #api

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

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

Перестаньте молиться на принципы S.O.L.I.D.

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

В связи с этим возникает парадокс: принципы SOLID крайне важны, но каждый понимает их по-своему. Получается, что это уже не какая-то одна концепция, а множество разных под одним названием. Автор сегодняшней статьи предлагает пересмотреть отношение к этим принципам, взглянуть на них свяжим взглядом и, возможно, даже отказать от них. Подробнее: https://habr.com/ru/articles/874584/

#solid

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

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

Пример инди-стартапа для чтения книг в оригинале. Что думаете?

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

Посмотреть на то, что у него получилось и узнать, с какими сложностями он столкнулся можно в его статье.

#петпроект #веб

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

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

Вам от 13 до 20 лет, вы уже знаете основы Python и хотите двигаться дальше, в область современной аналитики? 

Тогда у вас есть крутой шанс прокачать свои навыки на бесплатной программе по анализу данных от Яндекс Лицея! 

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

Набор открыт также на онлайн-программы по веб-разработке на Go и Django, машинному обучению и большим данным. Не откладывайте на следующий год — подайте заявку до 29 января!

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

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

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

Пишем свой движок для Flexbox-вёрстки

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

Если заинтересовались, то давайте без лишних слов приступим к делу. Подробности по ссылке:

https://tchayen.com/how-to-write-a-flexbox-layout-engine

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

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

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

Крутая анимация перехода с перспективой при скролле

Отличный пример создания красивого перехода. Эффект достигается за счёт увеличения изображений и грамотной работы со слоями. Сделан с помощью библиотеки GSAP.

Посмотреть код можно тут: https://codepen.io/GreenSock/pen/YzbPYMx

#codepen

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

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

Это не его закрыли с сеньорами на одном проекте. Это их закрыли с ним.

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

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

Как сделать анимацию разными способами

Во фронтенде существует куча способов создать анимации: HTML + CSS, Canvas, SVG, WebP, Lottie и так далее. Каждый из вариантов даёт различные преимущества.

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

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

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

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

Дорожная карта фронтенд-разработчика

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

#видео #фронтенд

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

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

Упрощаем создание SVG-фигур

Если вам необходимо быстро создать фигуру необычной формы с помощью SVG, то попробуйте воспользоваться Blobmaker. Он позволяет быстро сгенерировать «кляксу» нужной вам формы всего в несколько нажатий. Выберите количество необходимых точек фигуры, а затем насколько она должна быть кривой и сохраните её. Вы также можете скопировать код и сразу вставить на страницу.

Работает бесплатно, попробуйте сами: https://www.blobmaker.app/

#инструменты #фронтенд

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

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

Кто в IT зарабатывает больше всех: статистика 2025 года

Максимальный рост зарплат в прошлом году наблюдался... Угадайте у кого? Правильно, у разработчиков 1С. А средняя зарплата у опытного фронтенд-разработчика составляет в районе 350к рублей. Сейчас зарплаты в айти растут в геометрической прогрессии, правда, как и требования к самим программистам и разработчикам.

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

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

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

Шок! Леди Гага слила свой приватный SSH-ключ.

Кидайте в комменты варианты для чего он.

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

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

Необычные эффекты по ховеру, или введение в React-Spring

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

В этой статье вы узнаете, как сделать интересные эффекты наведения с помощью хуков React:

https://habr.com/ru/company/kts/blog/670234/

#react

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

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

Что такое траст сайта: подробный разбор и выводы

Траст сайта (от англ. «доверие») — уровень доверия поисковой системы к сайту. Если поисковая система доверяет сайту, то будет лучше и быстрее выводит сайт в топ, многое позволять и на многое закрывать глаза.

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

#видео #seo

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