Frontend Portal @frontendportal Channel on Telegram

Frontend Portal

22 Jan, 11:00

Видео объясняет одну из особенностей TypeScript: поведение кода в бесконечном цикле while (true).

Если после такого цикла есть строки кода, они считаются недостижимыми, поскольку цикл теоретически выполняется бесконечно.

Однако, если в цикле есть логика прерывания (break), TypeScript больше не считает последующий код недостижимым.

✔️ #tip by Matt Pocock

➡️ @FrontendPortal | #TypeScript

2,349

Frontend Portal

22 Jan, 07:38

Использование box-shadow необычным способом, которого вы могли не ожидать 🤩

Box-shadow в CSS может быть многослойным. Вы можете применять несколько теней для одного элемента. Обычно это используется для создания глубоких и реалистичных теней, но что мешает нам немного поэкспериментировать? 😂

🔸 Здесь мы создаём тень с нулевым размытием и небольшим смещением, чтобы создать дублирующий слой.

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

🔸 И, наконец, добавляем ещё один слой с настоящей тенью.

➡️ @FrontendPortal | #CSS

2,805

Frontend Portal

21 Jan, 11:09

Простой трюк, чтобы поменять две переменные местами

Деструктурирующее присваивание позволяет присваивать элементы массива в правой части переменным в левой части

Здесь мы создаем массив с двумя переменными, а затем присваиваем его противоположным переменным

➡️ @FrontendPortal | #js

3,856

Frontend Portal

21 Jan, 09:09

Совет IT-спецам на 2025 год - чаще посещайте тематические мероприятия

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

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

Оффлайн и онлайн, для разных специальностей и уровней знаний.

👨🏻‍💻 В этом канале ты найдешь самые актуальные и интересные события: анонсы форумов, конференций, митапов, вебинаров, хакатонов, олимпиад и многое другое.

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

IT мероприятия России / ITMeeting / IT events

3,759

Frontend Portal

21 Jan, 06:48

Откопал интересный репозиторий — react-learning-resources

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

Здесь собраны курсы, статьи и полезные инструменты, которые покроют всё: от основ React до более продвинутых технологий.

→ https://github.com/nareshbhatia/react-learning-resources

➡️ @FrontendPortal | #resourse

4,088

Frontend Portal

20 Jan, 17:00

Атрибут poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео

➡️ @FrontendPortal | #HTML

4,400

Frontend Portal

20 Jan, 08:46

Свойство columns помогает разделить текст или элементы списка на несколько колонок.

Вы можете контролировать как:
🔸 Количество колонок
🔸 Ширину каждой колонки

Здесь мы использовали "auto" для количества колонок и ширину 10rem.

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

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

➡️ @FrontendPortal | #CSS

4,733

Frontend Portal

16 Jan, 16:07

Держите под рукой эти бесплатные и удобные шпаргалки по CSS:

🔸Селекторы
🔸Box Model
🔸Flexbox
🔸Grid

→ Ссылка на репозиторий GitHub

➡️ @FrontendPortal | #resourse

6,838

Frontend Portal

16 Jan, 14:00

Если вы используете Object.fromEntries(url.searchParams) для разбора строки запроса, теперь вы можете заменить это на typedSearch(url.searchParams, schema) для:

🔸типобезопасности
🔸поддержки массивов

✔️ #tip by EGOIST

➡️ @FrontendPortal | #TypeScript

6,687

Frontend Portal

16 Jan, 07:56

Интересный способ выровнять иконку с текстом

Единица cap считается относительно высоты заглавных букв шрифта

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

Полный код:

<div class='container'>
  <div class='icon'>...</div>
  <div class='text'>Settings</div>
</div>

.container {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.icon {
  height: 1cap;
  aspect-ratio: 1;
}

➡️ @FrontendPortal | #CSS

6,298

Frontend Portal

15 Jan, 14:07

Зацените эту находку — библиотека Sonner для React

Это мощный инструмент для создания уведомлений. Простая установка, кастомизация и реально топовые визуальные фишки. Хватает трёх строчек кода, чтобы всё заработало.

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

Короче, если хотите добавить стильных "тостов" в проект — однозначно стоит глянуть: https://sonner.emilkowal.ski/

➡️ @FrontendPortal | #resourse

6,052

Frontend Portal

15 Jan, 06:07

Размытие невыбранных элементов в CSS 🤩

HTML:

<div class="icons-container">
<button ...>...</button>
<button ...>...</button>
<button ...>...</button>
</div>

🤔 Относительно недавно в CSS появился новый псевдоселектор :has. Этот селектор позволяет выбрать родительский элемент, если его дочерние элементы удовлетворяют определённым условиям

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

➡️ @FrontendPortal | #CSS

5,785

Frontend Portal

06 Jan, 06:31

Держите интересную статью про балансировку текста в CSS

Автор рассказывает, как с помощью свойства text-wrap: balance решать проблемы неравномерного переноса строк в заголовках и текстах

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

👉 Читайте статью здесь: Balancing Text In CSS

➡️ @FrontendPortal | #article #en

3,241

Frontend Portal

02 Jan, 16:07

Наткнулся на крутую штуку — Project Wallace

Это сервис, который анализирует качество твоего CSS-кода

Разбирает CSS на кусочки и показывает, где накосячил с производительностью, что не по стандартам, а что вообще сложно поддерживать.

В итоге получаешь чёткий список того, что нужно поправить, чтобы код стал чище и быстрее

👉 https://projectwallace.com/css-code-quality

➡️ @FrontendPortal | #resourse

5,803

Frontend Portal

02 Jan, 14:07

😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно!

Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css.

Детальный анализ материалов по FRONTEND-разработке. При этом информация представлена в лёгком и доступном формате, который делает процесс обучения увлекательным и ненадоедливым!

Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS

3,505

Frontend Portal

02 Jan, 09:45

Знали ли вы о таком атрибуте size, который можно использовать с элементами <select> в HTML? 🤩

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

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

(Лично мне это напоминает те самые виджеты в Visual Basic в старые времена)

Видите ли вы какие-то случаи применения этого атрибута? 🤔

➡️ @FrontendPortal | #CSS

5,606

Frontend Portal

31 Dec, 08:14

Всех с наступающим новым годом 😚

5,183

Frontend Portal

29 Dec, 14:17

🤣

➡️ @FrontendPortal | #memes

6,593

Frontend Portal

29 Dec, 09:37

Нашел для вас пять классных ресурсов, которые помогут разобраться в GIT

🔜

Learn Git Branching — это интерактивный учебник по Git, направленный на закрепление теории прохождением наглядной практики.

🔜

Oh My Git! — игра для обучения Git. Там визуализируются внутренние структуры репозиториев. Игра опенсорс, так что можно покопаться в исходниках

🔜

Git How To — это интерактивный тур, который познакомит вас с основами Git

🔜

Pro Git book — онлайн учебник по Git, который предлагает подробные руководства и документацию по всем аспектам работы с системой контроля версий

🔜

Git Gud — CLI-игра с различными уровнями сложности, которая поможет освоить Git от базового уровня до профи

➡️ @FrontendPortal | #resourse

6,412

Frontend Portal

29 Dec, 07:37

Готовишься к собеседованию в IT?

Разбираем для тебя самые актуальные вопросы для подготовки

Выбирай направление:

👩‍💻 Frontend
👩‍💻 Python
👩‍💻 Go
👩‍💻 Java
👩‍💻 C/C++
👩‍💻 C#
👩‍💻 PHP
👩‍💻 QA
📊 SQL
👩‍💻 Git

3,370

Frontend Portal

29 Dec, 06:07

Battery Status API

Через Battery Status API можно получить доступ к информации о батарее устройства

navigator.getBattery().then((batteryManager) => console.log(batteryManager));

Интерфейс BatteryManager позволяет взаимодействовать с Battery Status API и предоставляет доступ к информации об уровне заряда батареи устройства. Метод navigator.getBattery() возвращает промис, содержащий объект типа BatteryManager

Полный код — Codepen
Подробнее — Статья

➡️ @FrontendPortal | #js

4,370

Frontend Portal

28 Dec, 16:07

Хочешь применить неоновый эффект к своим текстам?

→ Тебе нужен только HTML, чтобы добавить атрибут data-text, и CSS, чтобы стилизовать эффект.

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

Пример: https://codepen.io/carmenansio/pen/XWBKLqm

✔️ #tip by Cosmic Red

➡️ @FrontendPortal

4,328

Frontend Portal

28 Dec, 06:08

Как безопасно хранить пароли?

➡️ @FrontendPortal | #разное

5,283

Frontend Portal

27 Dec, 09:07

Устанавливаем пользовательские стили для полосы прокрутки

СCS:

/* Вся полоса прокрутки */
::-webkit-scrollbar {
  width: 20px;
}
/* Дорожка полосы прокрутки */
::-webkit-scrollbar-track {
  background-color: #fff;
}
/* Перетаскиваемый маркер прокрутки */
::-webkit-scrollbar-thumb {
  background-color: red;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(34, 250, 88);
}

Поддержка псевдоэлемента ::-webkit-scrollbar составляет 94.42%, а ::-webkit-scrollbar-thumb и ::-webkit-scrollbar-track — 80.29%

➡️ @FrontendPortal | #CSS

4,251

Frontend Portal

26 Dec, 17:10

HTML атрибут translate

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

Может иметь одно из двух значений: yes или no

Очень полезно для брендов или названий компаний:

<footer>
  <p translate="no"> Company Name </p>
</footer>

➡️ @FrontendPortal | #HTML

2,086

Frontend Portal

26 Dec, 15:10

Господи, да в чём проблема стать фронтендером?

Подписался на эти три канала:

👉 Фронтенд
👉 Верстка
👉 Node.JS

Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!

Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

2,424

Frontend Portal

26 Dec, 12:07

🚪

➡️ @FrontendPortal | #memes

2,935

Frontend Portal

26 Dec, 10:07

Наткнулся на прикольный React-компонент — spoiled

Он прячет текст или элементы под облаком частиц, которое рассеивается при наведении, как в Telegram.

Использует CSS Painting API для реалистичного рендеринга, есть fallback для неподдерживаемых браузеров

Поддерживает тёмную/светлую темы, анимации переходов и гибкие настройки (FPS, плотность, цвет)

Установить можно через npm:

$ npm i spoiled

Подробнее: https://github.com/molefrog/spoiled

➡️ @FrontendPortal | #resourse

3,048

Frontend Portal

26 Dec, 08:07

Мы собрали для вас лучшие TG для web разработчиков! 😎
Подписывайся скорее, пока доступ не заблокировали! 🔥

• Рецепты кода
• Мемы
• Интересные статьи и факты
• Викторины
• Макеты
• Иконки
• Полезные ссылки

Пссс...

А в этом сервисе (klicks.ru

) ты можешь сократить ссылку, поделиться файлом или текстом, ставить пароли, отслеживать статистику по переходам, включать автоудаление - и всё это бесплатно!

2,917

Frontend Portal

26 Dec, 06:17

🖥 Docker — это платформа, основанная на контейнеризации вашего приложения, чтобы оно одинаково работало везде, где установлен Docker 🤩

❕

Примечание:
Для простоты объяснения я не углублялся в технические детали. Заметьте, что контейнер — это выполняющийся экземпляр "образа контейнера", который и является тем, что вы будете распространять.

Некоторые связанные концепции:

🔹

Dockerfile
Это файл, написанный вами, содержащий набор инструкций о том, как создать контейнер. Docker использует его для создания образа контейнера.

🔹

Docker Hub
Это онлайн-репозиторий (похожий на npm для Node.js), где хранятся контейнеры, созданные другими пользователями, и которые вы можете использовать. Существуют официальные образы контейнеров для популярных технологий, таких как базы данных, языки программирования и т.д.

🔹

Docker Compose
Это способ построения всей вашей инфраструктуры из отдельных контейнеров. Он описывает, какие контейнеры вы используете и как они взаимодействуют друг с другом (используя виртуальную сеть).

➡️ @FrontendPortal | #разное

3,152

Frontend Portal

25 Dec, 14:07

😂

➡️ @FrontendPortal | #memes

3,641

Frontend Portal

25 Dec, 10:07

Ищете SVG-иконки для своих проектов?

На сайте svgl.app вы найдете десятки иконок с различными вариантами экспорта и настройки

➡️ @FrontendPortal | #resourse

3,661

Frontend Portal

25 Dec, 08:07

👩‍💻

Программирование — В С Ё

В 2024 году на кодинге уже не вывезешь, перспектива года - Информационная Безопасность.

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

👍

ZeroDay - Уроки, эксплуатация уязвимостей с нуля

👍

Белый Хакер - Свежие новости из мира ИБ

😎

Арсенал Безопасника - Все необходимые инструменты

😎

Бункер Хакера - Статьи, книги, шпаргалки и хакинг

👨‍💻

Серверная Админа - Настройка и уроки по компьютерным сетям

📂Вступай и изучай новое направление!

3,704

Frontend Portal

25 Dec, 06:07

Еще один пост из серии про HTTPS

📝

Transport Layer Security (TLS) обеспечивает безопасную связь между клиентом и сервером.

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

TLS-разгрузка используется в сложных, высоконагруженных сетях, где сервер приложения не может позволить себе обрабатывать TLS-шифрование/дешифрование, так как это требует значительных ресурсов процессора

➡️ @FrontendPortal | #разное

3,572

Frontend Portal

24 Dec, 08:10

Ловите лайфхак: GitHub + VS Code - быстрое редактирование кода в вашем репозитории прямо в браузере

Для этого нужно заменить в ссылке .com на .dev. Или просто нажать на клавиатуре «.».

Редактор будет абсолютно идентичен вашему редактору на локальной машине (если у вас включена синхронизация с GitHub аккаунтом): цветовая палитра, подсветка синтаксиса, плагины и т.д.

Пользуемся и делимся с теми, кто не в теме 👍

➡️ @FrontendPortal | #разное

892

Frontend Portal

24 Dec, 06:10

Как айтишнику выйти из выгорания и вернуть силы что-то делать?

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

Выгорание - профессиональная болезнь программистов. И чтобы не потерять доход и бесценные годы, надо научиться с ним справляться.

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

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

✔️ Научиться расставлять приоритеты и найти время на жизнь
✔️ Избавиться от прокрастинации
✔️ Вернуть себе мотивацию и интерес к работе
✔️ Расставить границы и перестать перерабатывать

Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания и ущерба для личной жизни!

1,801

Frontend Portal

24 Dec, 05:07

Блокчейн — это основополагающая концепция, лежащая в основе Биткойна и других криптовалют

📱

Это система, которая по своей природе безопасна и основана на одноранговой (peer-to-peer) архитектуре. Существует множество концепций, которые делают блокчейн таким безопасным, но они порой сложны для понимания.

Давайте изучим блокчейн, разбирая его по частям 😎

Доказательство выполнения работы (Proof of Work) — это система для установления доверия в блокчейне. Она использует хэш-функции, такие как SHA-1 и SHA-256.

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

➡️ @FrontendPortal | #разное

2,189

Frontend Portal

23 Dec, 16:37

ПРЕКРАТИТЕ допускать эту ОШИБКУ на своих сайтах

😡

Вы можете уменьшить вес изображений до 90%, сохранив их внешний вид

Squoosh — ваш верный помощник в этом деле

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

➡️ @FrontendPortal | #resourse

3,172

Frontend Portal

23 Dec, 14:37

🔒

3000+ ГБ ~~платного~~ контента для программистов выложили в Telegram

Выбирай направление и обучайся:

👩‍💻

Java — 696 ГБ

🖥

Python — 724 ГБ

🖥

Frontend — 981 ГБ

🖥

Backend — 817 ГБ

Пост удалится через 48 часов

🕔

3,358

Frontend Portal

23 Dec, 12:07

Сеньорам с 10-летним опытом принесли посмотреть список требований к вакансии джуна в Frontend-разработке на 2025 год

➡️ @FrontendPortal | #memes

3,755

Frontend Portal

23 Dec, 09:07

Наткнулся тут на одну прикольную штуковину — react-datepicker

Это один из лучших компонентов для React, который помогает легко внедрить календарь с выбором даты/времени

✓ С поддержкой перевода на любой язык
✓ Настраивается с помощью props
✓ Легко создавайте диапазоны дат

Код простейший: пару строк — и у вас готовый, симпатичный пикер. Документация понятная, примеров море. Обязательно попробуйте 😎

→ npm install react-datepicker

➡️ @FrontendPortal | #resourse

3,822

Frontend Portal

23 Dec, 07:07

Фронтенд задачки в картинках — просто, наглядно и понятно. Проверяй свои знания в интерактивном формате каждый день.

Присоединяйтесь: @Frontend_Task

3,635

Frontend Portal

10 Dec, 06:07

Элегантный способ обрезать длинный текст

💃

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

➡️ @FrontendPortal | #CSS

189

Frontend Portal

09 Dec, 11:07

Нашёл отличную тулзу для приложений на React

Проверьте производительность без установки и расширений!

React Scan — это инструмент для поиска слабых мест, не требующий внесения изменений в код проекта

Выполните эту команду в терминале:

npx react-scan@latest <URL>

➡️ @FrontendPortal | #resourse #react

3,020

Frontend Portal

09 Dec, 09:07

⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника

Опыт в программировании не нужен.

На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить

С 10 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать фреймворки — Angular и React

Вот план обучения:
💡 с 10 по 15 декабря свой киносайт на Angular
💡 а с 17 по 21 декабря свою доску объявлений на React

Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля

🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее

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

Подписывайтесь, чтобы участвовать бесплатно

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

👉Участвовать бесплатно

Первые уроки уже доступны

3,036

Frontend Portal

09 Dec, 06:07

Тосты — это ненавязчивая форма уведомлений, которые отображаются (обычно в углу) всего на несколько секунд

Вот как вы можете создать свой собственный тост с использованием HTML, CSS и JavaScript без сторонних библиотек!

⏩ Использование:
Просто вызовите методы showToast и hideToast. Рекомендуется вызывать hideToast через setTimeout через несколько секунд, чтобы тост автоматически закрывался.

➡️ @FrontendPortal | #tutorial

3,282

Frontend Portal

08 Dec, 09:07

🈳

Улучшения, представленные в React 19:

🔹

ref как проп
ref теперь можно передавать как пропс в функциональные компоненты.

🔹

Различия для ошибок гидратации
React добавил улучшенную диагностику для ошибок гидратации.

🔹

<Context> как провайдер
<Context> теперь может использоваться непосредственно как провайдер вместо <Context.Provider>

🔹

Функции очистки для refs
Теперь можно задавать функции очистки для refs, что позволяет избегать утечек памяти.

🔹

Начальное значение для useDeferredValue
Возможность задавать начальное значение для useDeferredValue.

🔹

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

👉 Полный список изменений можно найти в официальном блоге React

➡️ @FrontendPortal | #react

5,102

Frontend Portal

22 Nov, 06:07

⭐️

Web Workers

JavaScript изначально является однопоточным языком. У нас нет встроенной возможности многопоточности.

Но современные браузеры поддерживают Web Workers!

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

➡️ @FrontendPortal | #js

2,674

Frontend Portal

21 Nov, 13:07

Открыл недавно для себя ещё одну крутую фичу в VS Code:

Возможность отображать вкладки в несколько строк без прокрутки 👆

Не знал, что это возможно, крутяк 🤩

➡️ @FrontendPortal | #vscode

3,338

Frontend Portal

21 Nov, 11:07

⚡️Всероссийский Хакатон ФИЦ 2024

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

2. Контекстный перевод названий научных работ: Разработать и реализовать переводчик, который будет переводить названия научных работ с русского на английский.

3. Прогнозирование бизнес драйверов: Разработать решение для задачи прогнозирования временных рядов бизнес-драйверов и произвести прогноз на следующий календарный месяц.

4. Система контроля и управления доступом: Разработка системы контроля и управления доступом в реальном времени. Система будет включать API для управления сотрудниками, точками доступа и интеграцию с системой видеонаблюдения.

И другие 16 кейсов смотрите на сайте: https://фиц2024.рф/hackathon

Хакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн.

🏆Призовой фонд: 6 000 000 руб.
🔥Дедлайн регистрации: 26 ноября, 23:59
📅Даты отборочного этапа: 29 ноября - 2 декабря
🦾Даты финала: 3 - 4 декабря

Зарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon

Реклама. ООО «Акселератор Возможностей», ИНН: 9704005146, erid: 2VtzquqsWwY

3,227

Frontend Portal

21 Nov, 06:47

Простой переключатель (Switch toggle) на CSS

🤩

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

Он сохраняет функциональность чекбокса, но изменяет его внешний вид

Кроме того, здесь не используется JavaScript.

❗️

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

➡️ @FrontendPortal | #tutorial

3,457

Frontend Portal

20 Nov, 11:14

💡 Знал ли ты, что можно открыть браузер в VSCode?

Без расширений и установок. Всё уже встроено!

Твой код и изменения в одном окне 👆

✔️ #tip by Miguel Ángel Durán

➡️ @FrontendPortal | #vscode

4,042

Frontend Portal

20 Nov, 08:00

⭐️

Событие beforeunload

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

Событие происходит перед событием выгрузки страницы unload

Обработка через определение onbeforeunload на объекте window:

window.onbeforeunload = () => false

➡️

Подробнее:
🟡MDN
🟡Doka

➡️ @FrontendPortal | #js

3,095

Frontend Portal

20 Nov, 06:00

Я айтишник и я устал!

С годами работы в IT все сильнее напрягает рутина, прокрастинация, куча задач и 0 желания их выполнять. Че делать?

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

✔️ Как оторваться от ленты соцсетей и сесть за работу с удовольствием?
✔️ Как спокойно общаться с коллегами, если они бесят?
✔️ Как избавиться от постоянной тревожности?
✔️ Как успокоить конфликты в семье и перестать срываться на всех, а вместо этого получить поддержку и понимание со стороны близких?

Подписывайся на канал @remizov_changes - начни работать и жить в кайф, не скатываясь в кризисы и выгорание!

А в закрепе тебя уже ждут бонусы:
👨🏻‍💻 Видео, в котором ты найдёшь ответ на вопрос «Почему у тебя нет энергии и что с этим делать» + гайд как IT-специалисту вернуть энергию, даже если не получается отдохнуть.

3,100

Frontend Portal

20 Nov, 05:37

Цепочка промисов

«Чейнинг» (chaining), то есть возможность строить асинхронные цепочки из промисов – пожалуй, основная причина, из-за которой существуют и активно используются промисы

➡️ @FrontendPortal | #js

3,085

Frontend Portal

19 Nov, 07:43

Создание визуализации аудио с Web Audio API

🔴

Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций

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

➡️ @FrontendPortal | #tutorial #js

3,904

Frontend Portal

12 Nov, 09:55

Мало кто знает о свойстве box-decoration-break в CSS. Давайте это исправим 🙂

Это свойство управляет тем, как оформляется фрагмент текста, когда он переносится на новую строку

При значении clone каждый фрагмент оформляется независимо. Ко всем фрагментам отдельно применяется рамка, тень, фон и др.

👆На гифке показан пример использования этого свойства

➡️ @FrontendPortal | #CSS

3,868

Frontend Portal

12 Nov, 07:30

Ищем новичков во фронтенд-разработке и вёрстке сайтов.

Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

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

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

👉 Приходи на бесплатное обучение и зови с собой друзей

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

4,095

Frontend Portal

12 Nov, 05:14

Эффект печати текста

Трюк заключается в автоматическом пошаговом изменении ширины текстового элемента (по одному символу за раз)

.typing-effect {
  width: 10ch;
  overflow: hidden;
  animation: typing 1s steps(10) infinite alternate-reverse;
}

@keyframes typing {
  from { width: 0ch; }
}

Работает только с моноширинными шрифтами

➡️ @FrontendPortal | #CSS

4,034

Frontend Portal

09 Nov, 10:15

Недавно наткнулся на интересный сайт CSS Tip, который делится мини-советами по CSS

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

⛓ Ссылка: https://css-tip.com/

➡️ @FrontendPortal | #resourse

5,413

Frontend Portal

08 Nov, 06:09

Крутое видео — Некоторые функции Dev Tools, на которые вы, возможно, раньше не обратили особого внимания

➡️ @FrontendPortal

5,633

Frontend Portal

07 Nov, 16:07

Выравнивание последней строки текста

В случае необходимости выравнивания последней строки используйте text-align-last, значения свойства совпадают с text-align

.text {
  text-align-last: right;
}

➡️ @FrontendPortal | #CSS

5,300

Frontend Portal

07 Nov, 14:07

⚡️Слита База из 1000+ топовых IT-курсов

👩‍💻 Все языки: https://t.me/+aJ6DgvwKYzMDFi

👩‍💻 Frontend: https://t.me/+BsAYMK1p1mNDAy

👣

Backend: https://t.me/+KvlCPZxamGdkNDAy

📊

SQL: https://t.me/+ybipaFF2vNc0Njky

Всё лучшее про IT бесплатно — уже на Базе 🚀

3,297

Frontend Portal

07 Nov, 09:16

⚡️

Как установить динамические имена свойств с помощью ES6

ES6 ввел новый синтаксис для определения динамически вычисляемых имен свойств в литералах объектов.

То, что раньше требовало двух шагов, теперь сводится к компактному синтаксису 🥳

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

➡️ @FrontendPortal | #js

5,505

Frontend Portal

06 Nov, 09:37

⚡️

Свойство initial-letter

Оно принимает два значения, разделенных пробелом:

p:first-letter {
  initial-letter: 3.5 3;
}

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

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

Полезные ссылки:
⏩ Попробовать самому
⏩ Подробная статья
⏩ Поддержка 90.83%

➡️ @FrontendPortal | #CSS

5,767

Frontend Portal

06 Nov, 06:08

👩‍💻

Vue.js 3 Design Patterns and Best Practices

Сайт предоставляет перевод книги, посвященной лучшим практикам и шаблонам проектирования в Vue.js 3. В книге рассматриваются основные принципы работы с фреймворком, инструменты разработки (Pinia, Router, Vite и др.) и эффективные подходы к созданию веб-приложений

Книга ориентирована на разработчиков, знакомых с Vue и JavaScript

⛓ Ссылка: https://vue-faq.org/ru/book/

➡️ @FrontendPortal | #Vue #resourse

5,371

Frontend Portal

05 Nov, 16:12

Держите 3 классных эффекта при наведении для ваших изображений 🔥

Сохраняйте их для своего следующего проекта

➡️ @FrontendPortal | #tutorial

5,775

Frontend Portal

05 Nov, 14:07

⚡️ Экс-сотрудник лаборатории Касперского создал два канала по IT и кибербезопасности

▪️ Пакет безопасности
▪️ Культ безопасности

Здесь вы узнаете ТОП-10 IT-гигантов в России с самой слабой защитой от взломов, какие компании «барыжат» вашими персональными данными и как этому противостоять.

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

Подписывайтесь: раз и два.

2,567

Frontend Portal

05 Nov, 11:17

Определяем в CSS, что элемент пустой

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

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

➡️ @FrontendPortal | #CSS

4,914

Frontend Portal

04 Nov, 08:30

⚡️

Функция minmax в CSS гридах

В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.

Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem

➡️ @FrontendPortal | #CSS

5,782

Frontend Portal

04 Nov, 06:30

✍️ Простые советы для тех, кто столкнулся с высшей математикой:

1) Помните, что математика — это не какой-то набор формул. Это язык, который описывает мир вокруг нас.

2) Используйте знания в повседневной жизни.

3) Читайте канал преподавателя по высшей математике @lav_math - он понятным языком объяснит все сложные вещи.

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

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

Не теряйте 👉 @lav_math

3,710

Frontend Portal

04 Nov, 05:36

🈳

useEffect vs useLayoutEffect

useEffect: асинхронный и не задерживает отрисовку DOM в браузере.

useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере.

➡️ @FrontendPortal | #react

5,834

Frontend Portal

03 Nov, 05:26

Эта история про «Netflix отказался от React» все еще распространяется спустя годы, и она по-прежнему вводит в заблуждение

это было в 2017 году и только для лендинга

🤣

➡️ @FrontendPortal

5,826

Frontend Portal

02 Nov, 09:13

⚡️ Домены .new (введенные Google) полезны для быстрого доступа к определенным приложениям

➡️ @FrontendPortal | #разное

6,247

Frontend Portal

01 Nov, 10:07

🌟

Простой трюк для добавления градиентной заливки к тексту в CSS

Задаем тексту фоновый градиент с помощью свойства background-clip с значением text. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;

➡️ @FrontendPortal | #CSS #tutorial

5,203

Frontend Portal

30 Oct, 17:10

💡

Тег <meter> в действии

Отображает текущее значение в заданном диапазоне

<meter value="75" min="0" max="100">75%</meter>

Визуально заполняется в зависимости от значения атрибута value

🔜 Подробнее — Дока

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #HTML

2,035

Frontend Portal

30 Oct, 15:10

Frontend теперь в телеграм!

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

Логово Верстальщика — научит верстать продающие сайты.

Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.

Frontender's notes — советы и полезные приемы для каждого разработчика.

2,324

Frontend Portal

30 Oct, 07:07

⚡️

Задаём цвет в зависимости от темы операционной системы пользователя

Функция light-dark() принимает два аргумента и возвращает один из них в зависимости от того, какую тему выбрал пользователь.

Первое значение вернётся, если у пользователя установлена светлая тема, либо тема не выбрана, а второе, если установлена тёмная тема

⏩Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение

🔜

На данный момент функция light-dark() поддерживается в последних версиях браузеров(80.93%)

➡️ @FrontendPortal | #CSS

3,352

Frontend Portal

29 Oct, 16:00

🌟

Меняем привычный курсор-стрелку на более подходящий

С помощью свойства cursor можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент

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

➡️ @FrontendPortal | #CSS

3,770

Frontend Portal

29 Oct, 14:00

Фронтенд задачки в картинках — просто, наглядно и понятно. Проверяй свои знания в интерактивном формате каждый день.

Присоединяйтесь: @Frontend_Task

3,727

Frontend Portal

29 Oct, 07:55

box-sizing: content-box vs border-box

⏩При значении свойства box-sizing, равном content-box (значение по умолчанию) ширина элемента рассчитывается следующим образом:

Ширина контентной области (100) + внутренний отступ слева и справа (10 + 10) + ширина правой и левой рамок (10 + 10). Итого: 140 пикселей.

Аналогично с высотой.

Выходит что первый элемент получил размеры 140 х 140

⏩Размер второго элемента считается иначе. Из-за значения border-box браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.

➡️ @FrontendPortal | #CSS #собес

3,867

Frontend Portal

28 Oct, 16:36

Обводка текста с помощью CSS-свойства text-stroke

Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:

webkit-text-stroke-width
webkit-text-stroke-color

🔜

Поддержка свойства составляет 94.93%

➡️ @FrontendPortal | #CSS

4,057

Frontend Portal

28 Oct, 14:00

Прими участие в «Хакатоне по кибериммунной разработке 3.0» от «Лаборатории Касперского» с призовым фондом 1 000 000 рублей!

Регистрация на хакатон открыта до 15 ноября

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

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

Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского».

Ключевые даты:
• 15 октября – 15 ноября – регистрация участников
• 8 ноября – митап с экспертами и игра «Огнеборец»
• 15 ноября – старт хакатона
• 17 ноября – дедлайн загрузки решений
• 22 ноября – подведение итогов и объявление победителей

Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов

3,992

Frontend Portal

28 Oct, 06:34

⚡️

Преобразование текста в речь

SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость)

В этом примере я создал простое поле ввода и вызываю данный фрагмент во время события клика на соседнюю кнопку

⏩ Этот API также поддерживает преобразование речи в текст!

🔜

Подробнее — Cтатья

➡️ @FrontendPortal | #js

4,159

Frontend Portal

27 Oct, 16:00

Использование CSS-градиента для затемнения картинки

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

СSS:

background: linear-gradient(
to right,
rgb(0 0 0 / 0.5),
rgb(0 0 0 / 0)
), url("img.jpg") 100%/cover no-repeat;

➡️ @FrontendPortal | #CSS #tutorial

4,676

Frontend Portal

27 Oct, 14:00

CodHub теперь в Telegram❗️

Устали от 100500➕ бесконечного множества каналов, в поисках полезного материала и новостей из мира 🤩 ? Добро пожаловать в наш проект CodHub l Программирование — Мы собираем для вас все лучшие материалы любых направлений в одном канале:

📱 — Frontend 👩‍💻 — C+
📱 — Python 🤔 — Hacking
📱 — Java 👩‍💻 — Golang
📱 — C# 👩‍💻 — Linux
👩‍💻 — Lua 👩‍💻 — php
👩‍💻 — Kotlin 👩‍💻 — Git
👩‍💻 — Assembler 👩‍💻 — Swift
🖥 — SQL 👩‍💻 — Mob. Develop
👣 — Backend 🐞— Qa Automation

Успей подписаться❗️ — @CodHub_tg

2,506

Frontend Portal

26 Oct, 07:08

Псевдоэлемент ::selection

Применяет стиль к выделенному пользователем тексту

::selection {
  background-color: green;
  color: yellow;
}

В правилах стилей допускается использовать следующие свойства: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow

➡️ @FrontendPortal | #CSS

4,918

Frontend Portal

26 Oct, 05:08

🎯 Весь фокус на API — решай реальные задачи и побеждай с Платформой API ВТБ!

Когда: 21 октября — 23 ноября 2024
Формат: гибридный (онлайн и офлайн)
Призовой фонд: 2 млн рублей

🔥 Хакатон подойдёт для тебя, если ты:
– Студент или выпускник технического вуза;
– Backend / Frontend-разработчик;
– Аналитик;
– Архитектор;
– Специалист в области ИБ;
– DevRel.

❗️Выбери свой трек:
• Open API. Создание приложений на основе Open Banking API;
• gRPC. Реализация микросервиса, имплементирующего стандарты СТО БР ФАПИ.СЕК с реализацией на протоколе gRPC;
• Единая платформа аутентификации API. Создание новых подходов к мультифакторной аутентификации.

Прими участие в составе команды или индивидуально. Если нет команды — поможем её собрать!

▶️ Регистрация уже открыта! Подай заявку до 5 ноября, 23:59 МСК по ссылке.

3,297

Frontend Portal

26 Oct, 04:40

➡️ @FrontendPortal | #memes

4,621

Frontend Portal

25 Oct, 15:00

💡

Однотонные серые логотипы для темной и светлой темы

Используя комбинации различных фильтров в CSS, мы можем конвертировать цветные логотипы в однотонные серые для темного и светлого режима

/* Для светлой темы */
.logos img {
  filter: brightness(0);
  opacity: 0.6;
}

/* Для темной темы */
.logos img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

🔜 Поиграть можно здесь

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #CSS

5,023

Frontend Portal

25 Oct, 13:07

🌡 10ТБ Отбороного контента по программированию и дизайну примо в Telegram

👩‍💻 Дизайн

👩‍💻 Программирование

👩‍💻 Системное администрирование

➡️ Подпишись, время ограничено!!

1,258

Frontend Portal

25 Oct, 08:08

🌟

Простой гайд по созданию изображения, которое отображает надпись при наведении

➡️ @FrontendPortal | #tutorial

4,898

Frontend Portal

24 Oct, 17:34

Необычные приёмы отладки, которые браузер от вас скрывает

Перевод списка неочевидных, но при этом полезных хаков, которые позволят использовать отладчик вашего браузера более полноценно. Автор оригинала — Alan Norbauer, фронтенд-разработчик в Netflix

Для понимания материала статьи потребуется как минимум средний уровень владения инструментами разработчика

🔜 Читать

➡️ @FrontendPortal | #article

3,753

Frontend Portal

24 Oct, 15:07

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

25 октября в 18:30 по МСК в Telegram-канале Андрея Шопинского пройдет эфир, где он вместе с гостем расскажет, как с нуля выйти на фриланс и найти первых клиентов.

Вас ждут полезные советы, личный опыт и реальные стратегии — всё без воды!

🔜 Подписывайся на @IT_shopen, чтобы не пропустить

2,905

Frontend Portal

24 Oct, 12:46

😁

➡️ @FrontendPortal | #memes

3,983

Frontend Portal

24 Oct, 10:21

🌟

3 разных способа достичь общей цели - добавить градиент в качестве границы к элементам

🔜

Способ 1:

Использовать встроенное свойство border-image и задать градиент в качестве изображения. Необходимо также указать значения для свойства slice, чтобы добиться нужного эффекта

🔜

Способ 2:

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

🔜

Способ 3:

Добавить настоящую рамку, но при этом использовать два фона для элемента: сплошной фон, который будет до padding box(content and padding), и градиент, который будет растягиваться до области border box (content, padding и border), при этом сплошной фон будет сверху

➡️ @FrontendPortal | #CSS

4,081

Frontend Portal

24 Oct, 08:07

Бэкенд и фронтенд — инь и ян современной разработки. Две идеологии, два мировоззрения, две части единого целого — пересекаются, но не совпадают. Их ключевые различия и точки соприкосновения ребята обсудили в новом выпуске Sravni Podcast.

Внутри выпуска:

- Действительно ли фронтенд проще освоить?
- Кому больше платят?
- Почему так мало хороших фулстек-разработчиков?
- Как джуну стать тимлидом и почему выигрывают всё равно мидлы?
- Насколько быстрым может быть собеседование?

Посмотреть или послушать подкаст можно здесь:

✅YouTube
✅RUTUBE
✅Яндекс Музыка

Реклама. Рекламодатель: ООО «Сравни.ру» ИНН 7710718303, erid: LjN8KXD6n

3,188

Frontend Portal

24 Oct, 07:24

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

Вместо этого используйте эту формулу для расчета внешнего радиуса: внутренний радиус + padding

Можно использовать кастомные свойства, чтобы определить радиус вложенности элементов 👇

.parent {
  --nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
  border-radius: var(--nested-radius);
}

🔜 Код здесь

➡️ @FrontendPortal | #CSS

3,187

Frontend Portal

20 Oct, 11:03

🌟 Вот небольшой классный трюк в CSS! Добавление анимированного подчеркивания при наведении на текст

⏩Здесь на самом деле это не подчеркивание, а фоновое изображение, которое представляет собой линейный градиент сверху вниз. Первые 90% фона просто прозрачные, а нижние 10% - желаемый цвет

⏩Изначально ширина фона равна 0% и увеличивается до 100% при наведении

⏩Мы также меняем положение фона, чтобы при наведении подчеркивание увеличивалось слева, а при снятии наведения выходило справа

➡️ @FrontendPortal | #tutorial

2,599

Frontend Portal

20 Oct, 09:03

Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника

На канале Интенсивный JavaScript разрботчик и действующий тимлид помогает изучить фронтенд на практике

Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду

С 20 по 23 октября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля

Что получите на интенсиве
✅ Напишете свой проект на JS: сайт с аниме
✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать
✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе

Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка

Подписывайтесь, осталось 30 мест
Учить фронтенд можно бесконечно, если не знать, куда копать

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

👉Участвовать бесплатно

🔥Подписывайтесь и сразу получите мини-курс по основам JavaScript

2,464

Frontend Portal

20 Oct, 07:04

Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp

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

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical;  
  overflow: hidden;
}

🔜

Поддержка свойства составляет 96.31%

➡️ @FrontendPortal | #CSS

2,565

Frontend Portal

19 Oct, 10:44

💡 Псевдокласс :focus-visible вместо :focus в CSS применяется только тогда, когда фокусировка элемента происходит способами, видимыми для пользователя, например, через клавиатурный ввод.

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

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #CSS

3,140

Frontend Portal

19 Oct, 08:00

🚀 Изучай HTML и CSS с нуля! 🚀

Присоединяйтесь к нашему Telegram-каналу
[https://t.me/made_in_html_css]

Здесь вы найдете:

Уроки с нуля – от основ к сложным темам.
Практические задания – применяйте знания на практике.
Советы от опытных разработчиков – получайте помощь и рекомендации.
Участие в проектах – накапливайте практический опыт.
Обсуждения – делитесь успехами и задавайте вопросы.

Присоединяйтесь к Made in HTML/CSS и начните обучение уже сегодня! 🌟

3,068

Frontend Portal

19 Oct, 06:06

Чаще всего для свойства background-repeat используется значение 'repeat'. А знаете ли вы, что существуют и другие возможные значения?

⏩

round: изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется

⏩

space: аналогично round, но вместо растягивания изображений создает пустое пространство между элементами, когда это необходимо

➡️ @FrontendPortal | #CSS

3,052

Frontend Portal

18 Oct, 08:03

Создаем превью сайта при помощи Open Graph разметки

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

➡️ @FrontendPortal | #HTML #разное

3,389

Frontend Portal

18 Oct, 06:03

ВЫ НЕ МАСШТАБИРУЕТЕ СВОЁ ДЕЛО БЕЗ ЭТИХ ТРЁХ ПРАВИЛ

Раскроем для вас тайну здесь и сейчас:

1. Выстроенная система привлечения клиентов
2. Оцифровка бизнеса
3. Сильная команда,но без больших затрат

Ответы на эти вопросы ⬆️ Вы найдёте в закреплённом посте

Почему же они знают,а вы нет?

Предприниматели с 11-летним стажем Виталий Миронюк и Максим Плугарь;

📍 С мая 2023 привлекли 1,2 млрд руб инвестиций для предпринимателей
📍 Собрали 1500+ кейсов по росту в доходе за 2 года

Все фишки можете узнать и вы,просто читая их канал 😉
Ребята профессионалы своего дела, так что если вы готовы расти в доходе:
Забирайте находку и подписывайтесь на канал @X11FOUNDER

Реклама. ИП Плугарь Максим Андреевич. ИНН 920359268768.
Erid: 2Vtzqw7w6Lj

3,481

Frontend Portal

18 Oct, 05:52

Как работает Javascript: шпаргалка для разработчика

🔜 Источник

➡️ @FrontendPortal | #js

3,246

Frontend Portal

17 Oct, 16:12

💡 Простой способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #devtools

3,567

Frontend Portal

17 Oct, 12:42

🤣

➡️ @FrontendPortal | #memes

3,417

Frontend Portal

17 Oct, 09:08

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

Всплывающие окна повсеместно распространены в Интернете, но до сих пор не было более простого способа их реализации.

Этот API предлагает чрезвычайно простой, гибкий и доступный способ реализации всплывающих окон!

➡️ @FrontendPortal | #CSS

3,771

Frontend Portal

17 Oct, 06:28

🦋

Изучение TypeScript — Полное руководство для начинающих

Оригинал шпаргалки и перевод серии руководств для начинающих в TypeScript👇:

— Часть 1. Введение и примитивные типы данных
— Часть 2. Ссылочные типы данных
— Часть 3. Классы и интерфейсы
— Часть 4. Литералы и дженерики
— Часть 5. Строгий режим и сужение типов

➡️ @FrontendPortal | #TypeScript

3,365

Frontend Portal

16 Oct, 16:22

💡

AbortSignal.timeout() в действии: на заметку фронтенд-разработчику

Данный метод создает сигнал, который автоматически прерывается через указанный промежуток времени в мс

🔜 Поиграть можно здесь

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #js

3,587

Frontend Portal

Frontend Portal (Russian)

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal

Frontend Portal