27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
⏭️ Руководство по Next.js: серия статей для фронтенд-разработчика
Next.js — это фреймворк React для создания клиент-серверных (fullstack) веб-приложений. Мы используем компоненты React для разработки UI (user interface — пользовательский интерфейс) и Next.js для дополнительных возможностей и оптимизаций
⭐️ ApexCharts — современная JavaScript-библиотека, которая позволяет создавать интерактивные визуализации данных с помощью простого API и более 100 готовых к использованию примеров.
Библиотека включает более десятка типов диаграмм, которые обеспечивают красивую и адаптивную визуализацию в ваших приложениях и на информационных панелях.
Вас ждет множество визуальных демонстраций и примеров кода — или просто посетите домашнюю страницу.
🔜 GitHub
➡️ @FrontendPortal | #resourse
🌟 Недооцененная особенность Grid в CSS - это возможность укладывать элементы друг на друга или создавать наложения.
Без этого вам пришлось бы использовать абсолютные позиции, что может быть несколько неудобно.
⏩ Этот элемент будет полезен для таких вещей, как группа фотографий, баннеры категорий, группы глав и т. д.
➡️ @FrontendPortal | #CSS
🔥 Самые нужные каналы для Frontend разработчика, чтобы расти в доходе 💸
• Frontend | Вопросы собесов
• Frontend | LeetCode
• Frontend | Тесты
• Frontend | Удалёнка
Подпишись, чтобы не потерять ☝️
〰️ Элемент <path> в SVG — один из самых мощных элементов в библиотеке основных форм SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.
Форма элемента path определяется одним атрибутом: d. Атрибут d содержит серию команд и параметров. Хотите погрузиться детально?
🔜 Читайте подробное интерактивное руководство.
➡️ @FrontendPortal | #article
🔥 15 полезных сайтов, которые упростят вашу работу и не только: подборка для фронтенд-разработчика
⏩ Визуализация регулярных выражений JavaScript
⏩ Документация для разработчиков: онлайн + офлайн
⏩ cdnjs: поиск библиотек с открытым исходным кодом
⏩ Фотосток с огромной коллекцией изображений
⏩ Интеллектуальное сжатие WebP, PNG и JPEG
⏩ Удаление фона изображения
⏩ Создание красивых изображений с исходным кодом
⏩ Подбор палитры цветов для разработки дизайна
⏩ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
⏩ Иконки с открытым исходным кодом
⏩ Проверка совместимости CSS и JavaScript в различных популярных браузерах
⏩ Создание файла README
⏩ Проверка производительности сайта
⏩ Редактирование фотографий
⏩ Подборка иллюстраций без лицензии
🔜 Читайте подробнее про сервисы на Medium или в PDF
➡️ @FrontendPortal | #resourse
⭐️Отладка в браузере
Отладка – это процесс поиска и исправления ошибок в скрипте. Все современные браузеры и большинство других сред разработки поддерживают инструменты для отладки – специальный графический интерфейс, который сильно упрощает отладку
😮 Добавлена новая база слитых курсов на 800ГБ:
Python:
/channel/+QPSH2IcGu4w5ODky
Frontend и Web:
/channel/+MiJVQSyUlDNjODky
Программирование:
/channel/+opj2LZT23ddiZDli
Графика и дизайн:
/channel/+vrZ8dhdUEXM3YmQy
🔥 Бесплатный курс по TypeScript от команды Хекслет
Что внутри:
— Основы TypeScript
— Типизация функций
— Типизация массивов
— Подробнее о типах
— Классы
— Интерфейсы
— Дженерики
— Типизация объектов
🔜 Пройти курс
➡️ @FrontendPortal | #курсы
⭐️Один из моих любимых эффектов в CSS - Эффект матового стекла(Glassmorphism)
Чтобы эффект получился эстетичным, обязательно используйте яркие и градиентные цвета в качестве фона. Избегайте использования монохромного фона
➡️ @FrontendPortal | #CSS
🖥 Javascript - первый канал для FrontEnd разработчиков.
По контенту:
1. Готовые примеры c кодом: карусели, паралаксы.
2. Frontend курсы 2024 года бесплатно.
3. 2000 реальных задач с собесов с разбором от Senior разработчика.
4. Маст-хэв папка Frontend разработчика.
Подписывайтесь, такие знания в 2024-м году на вес золота: @javascriptv
По мотивам поста с советом про отступы для вложенных радиусов: как использовать кастомные свойства, чтобы определить радиус вложенности элементов 👇
.parent {
--nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
border-radius: var(--nested-radius);
}
👩💻 Метод toSorted()
Метод массива toSorted() это копия метода sort(), но, в отличие от него, не мутирует исходный массив, а возвращает новый отсортированный массив
➡️ @FrontendPortal | #js
🔥Тесты для подготовки к собеседованию🔥
Выбери своё направление:
1. Frontend
2. Python
3. Java
4. Тестировщик QA
5. Data Science
6. DevOps
7. C#
8. C/C++
9. Golang
10. PHP
11. Kotlin
12. Swift
48 часов IT-брейнсторминга на «Хакатоне Т1»! 🌐
«Хакатон Т1» в рамках конференции «Импульс» пройдет в Нижнем 4-7 октября. На нем айтишникам предлагают решить две реальные продуктовые задачи, связанные с управлением эффективностью и быстрым подключение к конференции.
💻 За призовой фонд в 600 000 рублей приглашают соревноваться начинающих и опытных специалистов в командах от 3 до 5 человек. В каждом из двух треков будут определены по три команды победителей, которые разделят между собой призовой фонд.
Разработчики, ваш шанс проявить себя! Успевайте зарегистрироваться до 1 октября - https://cnrlink.com/hackt1nizhniynovgorodfrontportal
Кстати, участники очного этапа также смогут присоединиться к масштабной ИТ-конференции «Импульс Т1» и узнать все о новейших разработках и трендах в ИТ-сфере, инженерии и технологиях.
🔹4-5 октября (онлайн), 6-7 октября (офлайн)
🔹«Академия Маяк», Нижне-Волжская наб., 11
Реклама. ООО "Т1". ИНН 7720484492.erid: LjN8K7gUW
C# Developer
C# позволяет извлечь информацию о типах данных, которые используются в программе. При помощи нее можно создавать генераторы кода, новые классы, создавать провайдеры в другие системы и многое другое.
Приходите на открытый урок «Использование механизма Reflection для генерации кода». Мы рассмотрим:
1️⃣ Что такое Reflection
2️⃣ Как в reflection нам помогают атрибуты
3️⃣ При помощи reflection мы создадим мини ORM позволяющую создавать SQL код для генерации БД на основе классов (code-first подход)
Кому полезно: C# разработчикам, которые хотят научиться создавать более гибкие и динамичные приложения с использованием продвинутых техник программирования.
✅ Бонус за регистрацию «Топ 5 ошибок, которые допускают джуны на собеседованиях (и как их избежать)». Записывайтесь: https://clck.ru/3DgJyk
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: 2VtzqwpUj9T
Осень — время новых знаний! 👨🎓
И мы знаем, где будут прокачивать свои hard и soft skills IT-специалисты — на IT Community Day, который Сбер проведёт сразу в трёх городах:
✔️ В Санкт-Петербурге 5 октября обсудим искусственный интеллект, возможности фронтенда, новую среду разработки и мотивацию для айтишников.
✔️ В Казани 12 октября научимся управлять большими данными, укрощать искусственный интеллект, создавать успешное резюме и находить подход к карьере.
✔️ В Екатеринбурге 19 октября поговорим об интеграции LLM в приложение, методологии API-first и комбинации личного и профессионального развития.
Во всех городах вас будут ждать топовые спикеры, а после докладов — afterparty. Регистрируйтесь на IT Community Day в Санкт-Петербурге, Казани и Екатеринбурге👌
🔥 The Concise TypeScript Book
Перед вами книга, которая содержит исчерпывающий и краткий обзор возможностей TypeScript.
Вас ждут четкие объяснения, охватывающие все аспекты последней версии языка, от его мощной системы типов до расширенных функций.
🔜 Версия на GitHub
➡️ @FrontendPortal | #TypeScript
⚡️ Шпаргалка по компонентам URL
Именование основано на свойствах объекта URL в JavaScript (поэтому не спрашивайте меня, почему он называется Search, а не query params 😐)
➡️ @FrontendPortal | #шпора
💸 Вакансии для IT'шников
Выбери своё направление ⤵
1. Frontend
2. Python
3. Java
4. Тестировщик QA
5. Data Science
6. DevOps
7. C#
8. C/C++
9. Golang
10. PHP
11. Kotlin
12. Swift
🎊Как эффективно скалировать Node.js-серверы и улучшить производительность приложений?
Узнайте на открытом вебинаре 2 октября в 20:00 мск, где мы разберем:
- встроенные способы скалирования в Node.js;
- как использовать Docker-контейнеры для скалирования;
- примеры облачных решений и Kubernetes для Node.js.
Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.
Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡️➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cBoYB4
🌟 Одним свойством создаём эффектный параллакс
Свойство background-attachment определяет будет ли фон прокручиваться вместе со страницей или будет зафиксирован на одном месте. Часто используется для создания так называемого эффекта параллакса
➡️ @FrontendPortal | #CSS
Promises Training
Проект, созданный для того, чтобы помочь фронтенд-разработчикам углубить понимание работы с промисами в JavaScript.
Практикуйтесь в работе с промисами с помощью тщательно подобранной коллекции интерактивных задач, каждая из которых сопровождается набором тестов
🔜 Ссылка на GitHub
➡️ @FrontendPortal | #resourse
Архитектурные стили Web API — это концептуальные модели, которые определяют, как разрабатывать и взаимодействовать с API, используя определённые правила и принципы.
✔️ Приходите на вебинар, где мы не только разберем популярные стили и протоколы, для создания веб-приложений, но и на практике применим эти технологий.
⚡️ Это занятие важно для всех, кому интересна история развития современных технологий веб-разработки и ASP.NET в частности!
Урок проведет Виктор Дзицкий. Опыт разработки на C# и ASP.NET более 10 лет. А курс C# ASP.NET Core разработчик стартует в октябре. За 6 месяцев вы станете fullstack-специалистом и сможете претендовать на зарплату 180000+ руб.
Регистрируйтесь сейчас: https://vk.cc/cBi0YA
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
👩💻 DevTools: советы и трюки
Подборка малоизвестных (и не только) советов и рекомендаций для разных браузеров, которые помогут вам раскрыть весь потенциал DevTools:
⏩ Inspect Popups on Hover
⏩ Use logpoints
⏩ Emulate foldable devices
⏩ Autocomplete styles
⏩ Color formats
⏩ Capture High-res screenshot
⏩ Inspect Event streams
⏩ View and Copy style changes
⏩ Live expressions
⏩ Debug horizontal scrollbars
➡️ @FrontendPortal | #разное
⚡️ box-shadow VS drop-shadow
box-shadow дает нам прямоугольную тень, даже если элемент не имеет фона, а drop-shadow создает тень от непрозрачных частей элемента
Также, drop-shadow не поддерживает четвертое значение, которое отвечает за радиус распространения и ключевое слово inset, которое превращает тень из внешней во внутреннюю
➡️ @FrontendPortal | #CSS
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.
👩💻 Что нужно знать о современном CSS: на заметку фронтенд-разработчику
Подборка современных дополнений к CSS: container queries, nesting, scroll-driven animations, view transitions, :has() и многие другие.
⏩Прочитать можно здесь
➡️ @FrontendPortal | #article
Обрезка текста для одной единственной строки
Когда мы хотим, чтобы наш текст был на одной линии (на прямой линии). Мы можем добиться этого, установив свойство white-space на значение nowrap. Если текст длинный, а ширина контейнера например 300px, тогда текст будет просто выходить за пределы контейнера, хоть и по прежнему будет в одну строку.
Чтобы его обрезать можно использовать следующие свойства:
.truncated-text {
width: 300px;
overflow: hidden; // скрывает все что выходит за зону контейнера
text-overflow: ellipsis; // заменяет скрытый текст на многоточие
white-space: nowrap; // текст в одну строку
}
Различные фильтры, доступные в CSS ⭐️
Свойство filter в CSS позволяет добавлять визуальные эффекты к любому элементу (не только к изображениям), например, регулировать яркость, контрастность и т. д.
⏩Существует также свойство backdrop-filter, которое использует тот же набор функций, но применяет их к фону элемента, а не к самому элементу
➡️ @FrontendPortal | #CSS