Веб-страница
22.1K subscribers
2.18K photos
561 videos
2 files
4.46K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Легаси-код в наследство
😁129👍8😱2
​Как наглядно понять работу Kubernetes?

Ну, например, можно настроить управление им в Minecraft и смотреть какие процессы при этом происходят на примере окружения и животных. Звучит безумно? А выглядит ещё безумнее:

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

#видео #devops #kubernetes
🤔6🔥5👍3😁2
​Как инженеру не умереть со скуки во фронтенде?

В новом выпуске подкаста Frontend Weekend Андрей Смирнов пообщался с Полиной Гуртовой, фронтенд-разработчиком компании «Злые Марсиане» и обсудил, сложный ли фронтенд или его просто усложняют ради веселья разрабов, а также остановился ли он в своём развитии и имеет ли ещё место быть Hype Driven Development.

Смотрим:

https://youtu.be/5e2Pma2b2yQ

#видео #подкаст
👍7🤔5🔥2
​NoJS — делаем калькулятор с использованием только чистого HTML и CSS

Самый логичный способ создания калькулятора, работающего на веб-странице — JavaScript, верно? Но автор этой статьи явно не ищет легких путей, поэтому сделал калькулятор с помощью чистых HTML и CSS (даже без препроцессоров), используя радио-кнопки, хитрость и немного магии.

Что в итоге получилось, можно узнать тут:

https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html

#html #css
👍23🤯12❤2🔥1😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация логотипа GitHub на CSS

Эта анимация выполнена без использования JavaScript. Вместо этого все элементы написаны на HTML-препроцессоре Pug, а сама анимация настроена в CSS-препроцессоре Stylus.

Подробнее код можно изучить здесь:

https://codepen.io/toshiya-marukubo/pen/qBPryZb

#codepen #css
😁51👍8
​Мой типичный рабочий день:
👍83😁25
​Является ли Bun следующим значительным достижением после WebPack?

Недавно был представлен новый игрок экосистемы инструментов JavaScript  —  bun. Он призван сделать разработку JavaScript еще быстрее. Этот инструмент можно назвать всеобъемлющим: он не просто ускоряет компиляцию и синтаксический анализ, но и предоставляет собственный менеджер зависимостей и пакетирование.

Обзор этого многообещающего инструмента тут:

https://nuancesprog.ru/p/15623/

#bun #javascript
🤔15👍6
​3 способа стилизации эффектов CSS с помощью box-shadow

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

https://blog.logrocket.com/three-ways-style-css-box-shadow-effects/

#css #фронтенд
👍26
​Как использовать математические функции CSS

Логические функции CSS calc(), clip(), min() и max() поддерживаются всеми современными веб-браузерами. Но, несмотря на то, что они легко доступны, простой поиск на GitHub говорит нам о том, что внедрение этих функций идет медленно.

Давайте познакомимся с ними ближе, чтобы начать использовать в своих проектах:

https://stackdiary.com/css-math-functions/

#css
👍18🔥10😁4
​Как в JavaScript добавляются новые функции

JavaScript не принадлежит какой-то одной организации или юридическому лицу. ECMA (Европейская ассоциация производителей компьютеров) — это организация, которая продвигает стандарты информационных технологий и бытовой электроники. TC39, является частью ECMA. Именно они отвечают за стандартизацию и поддержку JavaScript. В него входят разработчики, ученые, сотрудничающие с сообществом.

Но добавить новый стандарт — только полдела, необходимо, чтобы он был внедрён во все браузеры и платформы. О том, как это всё реализовано, читайте в статье:

https://tprg.ru/97dg

#javascript
👍19❤1🥰1
А когда обратно уменьшаешь, то становится только хуже
😁114🤔9👍6👎1
​​Улучшение Visual Studio Code для новичков

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

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

Подробнее обо всём в статье:

https://habr.com/ru/post/653465/

#vscode
👍30❤2👏2
This media is not supported in your browser
VIEW IN TELEGRAM
10 антипаттернов React, которых следует избегать

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

В этом руководстве вы рассмотрите 10 антипаттернов в React, а также советы и рекомендации по улучшению вышего кода.

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

#видео #react
👍12
​Динамическая типизация — вещь непредсказуемая:
😁41❤3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрее, проще, дружелюбнее: сможет ли quick-lint-js заменить ESLint?

Создатели quick-lint-js считают, что ESLint не только медленный, но и менее точный, чем их решение. По их словам новый линтер способен работать быстрее и проще, чем существующее решение.

Но так ли это? Здесь авторы рассказали о некоторых возможностях и важных различиях в подходе. Посмотрите и решите для себя сами:

https://quick-lint-js.com/blog/version-1.0/

#javascript #линтеры
🔥6👍4
​Любопытные извращения из мира IT, или зачем JS в C++-код вкомпилили

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

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

https://habr.com/ru/post/577938/

#javascript
🔥16👍5❤1🤣1
​Подборка полезных материалов для веб-разработчиков: от бэкенда до фронтенда

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

Бэкенд:
— как освоить бэкенд-разработку в 2022 году: дорожная карта;
— backend для начинающих на node.js express;
— топ-10 бэкенд-фреймворков для веб-разработки в 2022 году.

Фронтенд:
— создание индикатора прогресса чтения в React и TailwindCSS;
— как не надо импортировать SVG в React и Vue;
— создаём анимацию, привязанную к скроллу страницы на чистом JavaScript.

А если хотите ещё больше материалов, то на канале их можно найти по тегам #бэкенд, #фронтенд и другим.

#фронтенд #бэкенд
👍31🔥25❤6👏5🥰1🍓1😈1
6. Понять, что в статье 90% воды, а оставшиеся 10% не о том, что ты искал
😁160👍20❤19🤬9🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Как создавать потрясающие 3D-сцены с помощью React Three Fiber

В этой статье показано, как создавать потрясающие 3D-анимации с помощью React Three Fiber (R3F). Вы рассмотрите настройку сцены, создание геометрии, добавление освещения и включение эффектов постобработки. Более того, вы научитесь воссоздавать приведенную выше анимацию с нуля.

https://varun.ca/modular-webgl/

#фронтенд #библиотека #r3f
❤36👍8