Веб-страница
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
​​Как выступить на IT-конференции и не провалиться?

Помните про подготовку: выверенные тезисы и отрепетированная речь — уже полдела!

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

#советы
👍9
​​Объясните, что такое IT, так, будто вы за новогодним столом с родственниками.
14😁11🔥4
Если ещё не успели украсить свой сайт к Новому году, ловите подборку несложных, но эффектных праздничных украшений:

https://tproger.ru/digest/new-year-scripts/

#codepen
12👍3
​​​Благодарим вас, что читаете и поддерживаете канал «Веб-страница».

Админы любят вас и поздравляют с наступающим Новым годом! Так сказать, чтоб прод стоял и деньги были 🥂
🤩26🔥107👍5
​​Это уже уровень сеньора
🤣91🤯11👍5🤩2
Заказчик: Нужно на нашем сайте сделать кнопки зеркальными, чтобы пользователь заходил и видел своё отражение.

Я: Подержите моё пиво.

CodePen-проект: https://codepen.io/tyeb_11/pen/dygoJow

#codepen
😁84🔥10👍5🤯31
​​Топ-14 Chrome-расширений для веб-разработчика

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

https://www.youtube.com/watch?v=d0EyQEGfVNg

#инструменты
👍8👎1
​​Что учить в 2024: роадмап и тренды веб-разработки

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

Приятного просмотра: https://www.youtube.com/watch?v=f76BnFk3pLI

#тренды #фронтенд #бэкенд
🔥8
Ещё одно расширение для VS Code от создателей Incredibly In Your Face, только теперь с лицом Думгая. Показывает реакцию на количество ошибок в коде.

Исходники: https://github.com/virejdasani/InYourFace

Расширение: https://marketplace.visualstudio.com/items?itemName=VirejDasani.in-your-face

Не разочаровывайте Думгая!

#инструменты
🔥14😁4🤔4👍21
​​Почему JavaScript останется популярным языком программирования в 2024 году?

Узнали у middle и senior-разработчиков, почему JavaScript будет популярным языком программирования в 2024 году и как это влияет на IT-рынок: https://tproger.ru/articles/populyarnost-javascript

#javascript #тренды
🔥103👍3
Вечное противостояние
🤣69👍10🔥3👎21
​​Заглядываем в консоль: пасхалки и приглашения на работу, которые вы могли пропустить

Разработчики часто прячут пасхалки в коде. Веб — не исключение. Это статья о поиске пасхалок в коде и о том, какие из них автору реально удалось найти: https://habr.com/ru/companies/timeweb/articles/781376/

#кек
🥰6👍42
​​Old​ but gold: Лучшая коллекция генераторов CSS-кода

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

https://blog.openreplay.com/a-top-collection-of-css-code-generators/

#css #фронтенд
🔥11👍2
​​Old but gold: Как понять режимы наложения раз и навсегда

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

Если вы всё ещё не знаете, чем отличается Lighten от Soft Light или Multiply от Screen, то для вас есть статья, которая доходчиво всё объяснит: https://awdee.ru/blending-modes/

#ui #design
🔥5👍2
​​Вопросы с собеседований: почему лучше загружать ресурсы для сайта с нескольких доменов?

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

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

Подробнее по ссылке: https://web-standards.ru/articles/front-end-performance/#section-5

#основы #собеседование #сеть
👍15
​​16 впечатляющих игр на чистом CSS

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

От головоломок до классики — откройте для себя проекты игр, демонстрирующие универсальность CSS без использования JavaScript. Демо и исходники прилагаются: https://www.frontendplanet.com/css-game-examples/

#css #gamedev
🤯14😁4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Классическое собеседование на веб-разаботчика
😁81🤣42👍6🔥4👎1
​​​Полный курс по Vue.js

Vue.js — это JavaScript-фреймворк, который создал разработчик Эван Ю. В 2012 году Эван работал в Google, где успел попробовать Backbone.js и Angular.

Именно после этого он решил создать собственный фреймворк — сначала просто как пет-проект. И хотя популярность обрушилась на Vue.js ещё в 2015 году, он до сих пор по душе многим разработчиками.

И вот отличный видео-курс, в котором вы рассмотрите работу с Vue.js: https://youtu.be/6wYu4_6hcDY

#фронтенд #vuejs #курс
👍18👎6
​​Вероятность того, что интернет пропал из-за сисадмина, случайно запершегося в серверной, невероятно низкая.

Но она никогда не равна нулю.
😁85🔥4🤯2
​​Как правильно использовать html-элемент dialog вместо самописных решений и встроенных в JS методов alert(), prompt() и confirm()?

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

В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Подробнее о том, как с ним работать, наш читатель рассказал в статье: https://tproger.ru/articles/kak-ispolzovat-html-element

#html #javascript #тренды
👍19
​​Для тех, кто пропустил: на днях пакет Everything, охватывающий зависимостями все пакеты в репозитории NPM, чуть не сломал сам NPM.

На праздниках NPM-пакет Everything от разработчика PatrickJS, охватывающий зависимостями все пакеты в репозитории NPM, случайно чуть не сломал NPM под девизом «мы оживили демона».

Ситуацию постарались быстро исправить, но она все равно оказалась очень интересной. Для этого случая даже сделали специальный сайт: https://everything-registry-website.pages.dev/

Как такое стало возможно и к чему привело:

— Один из разработчиков JavaScript-пакетов провёл эксперимент с созданием и размещением в репозитории NPM пакета everything, который охватывает зависимостями все существующие пакеты в репозитории.

— Для реализации подобной возможности пакет everything связан прямыми зависимостями с пятью пакетами @everything-registry/chunk-N, которые в свою очередь привязываются зависимостями к более 3000 пакетов sub-chunk-N, в каждом из которых осуществляется привязка к 800 существующих пакетов в репозитории;

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

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

— Примечательно, что удаление самого пакета everything также оказалось заблокированным, так как 9 лет назад в репозитории был размещён тестовый пакет everything-else, в котором была указана строка everything в списке зависимостей. Таким образом, пакет everything после публикации оказался в зависимостях у другого пакета.

Дьявол ещё никогда не заходил так далеко.

#javascript #безопасность #nodejs
🔥15🤯13👍91