Веб-страница
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
​Подробное руководство по word-wrap, overflow-wrap, и word-break в CSS

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

Эта статья представляет собой руководство по углубленному изучению CSS-свойств word-wrap, overflow-wrap и word-break, которые позволят предотвратить переполнение содержимым контейнера и нарушение вёрстки.

https://tprg.ru/AMTI

#css
​Создаём приложение для записи с экрана на JS

Хотя JavaScript запускается в браузере, мы можем его использовать не только для записи активной вкладки. Инструмент, который предлагается создать в этом руководстве, сможет записывать любую вкладку или даже весь экран.

Подробнее:

https://tprg.ru/w0pr
​Контролируем scroll полностью или реализация события React: onRenderChildrenComplete

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

https://tprg.ru/bYEy

#react
😁1
​5 лучших функций JavaScript ES12, которые вы можете использовать уже сейчас

ECMAScript 2021 (12-е издание) теперь доступен и поставляется с новыми функциями и улучшениями синтаксиса. Спецификации были окончательно доработаны ECMA International 22 июня 2021 года.

В этой статье подробно продемонстрируют 5 основных функций, предлагаемых ECMAScript 2021, чтобы вы могли начать использовать их в своих проектах и улучшить свой опыт работы с JavaScript. 

https://tprg.ru/tCwJ

#javascript
VS открылся, вот и рабочий день закончился
​Лучшие практики для React iframe

iframe — это, по сути, фрейм внутри фрейма. Используя тег <iframe/>, вы можете легко встроить внешний контент из других источников прямо на свою веб-страницу.

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

Как реализовать iframe наилучшим образом при использовании React, узнаете здесь:

https://tprg.ru/SNDZ

#react
​5 фреймворков CSS-in-JS для использования в 2021 году

По мере того, как веб-разработка продолжает активно развиваться, появляются новые способы ведения дел, и вокруг них строятся сообщества. Так, продолжает набирать популярность подход CSS-in-JS.

В этой статье вы найдёте несколько фреймворков CSS-in-JS, которые вы можете сразу же опробовать в своем рабочем процессе:

https://tprg.ru/sRBL

#css #javascript
​Процедурная генерация бумажных снежинок

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

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

https://tprg.ru/uVch

#typescript
​Использование однофайлового компонента Vue 3 без компиляции

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

https://tprg.ru/NLpT

#фронтенд #vue
​​Тестирование в продакшене be like:
​Как работает JavaScript: массивы и хэш-таблицы

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

Подробнее:

https://tprg.ru/oaNP

#javascript
​Как создать простой сокращатель URL-адресов с помощью Node.js и MongoDB

В этом уроке вы узнаете, как создать простой сокращатель URL-адресов с нуля. В этом руководстве предполагается, что у вас уже есть базовые знания JavaScript, Node.js и MongoDB.

https://tprg.ru/cO9y
​React Testing Library. Полный курс

В этом видеокурсе вы рассмотрите тестирование React-компонентов с помощью библиотеки react-testing-library и научитесь делать это самостоятельно. Также вы познакомитесь с плюсами и минусами библиотеки.

https://tprg.ru/eSjG

#видео #react
​Когда бэкендер получил работу фуллстака:
​Умная техника липкого футера

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

https://tprg.ru/k0mx

#css
​Файловая маршрутизация с React Router

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

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

https://tprg.ru/ybgc

#react
​5 распространенных ошибок при использовании promise

В своё время промисы стали спасение JavaScript-разработчиков от ада обратных вызовов. Сегодня промисы также продолжают использоваться, но из-за того, что некоторые люди не понимают, как именно устроен promise могут возникать ошибки.

В этой статье вы узнаете о 5 таких ошибках:

https://tprg.ru/c1Dm

#javascript
​Различные способы добавления комментариев на ваш статический сайт

Сегодня существует уже много готовых решений для добавления комментариев на ваш статический сайт.

Подробнее о них и способах их интеграции читайте в статье:

https://tprg.ru/aGCr
​Как скрыть/показать липкий заголовок при прокрутке с помощью JavaScript

Вы наверняка видели механику, когда при прокрутке сайта хедер с логотипом и меню прячется, а при обратной прокрутке появляется вновь. Хотите научиться делать также?

В этой статье вы найдёте подробную инструкцию по реализации такой фичи:

https://tprg.ru/kIOJ

#javascript
​Если вы дата-инженер уровня middle+, то Ozon приглашает вас на Data New Year

Вы сможете:

— познакомиться с тимлидами и Q&A;
— самостоятельно выбрать команду для прохождения собеседования;
— получить оффер от Ozon в тот же день.

Оставить заявку можно до 17 декабря на сайте: https://goo.su/CLo

Кстати, руководитель направления хранения и обработки данных Ozon Tech подготовил для вас видео. Он расскажет, что такое бизнес разведка, а также как его команда превращает информацию в значимые данные.

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