Code Ready | Frontend

Этот навык – чит-код для разработчика Работодатели тратят миллионы из-за лишних 10 секунд, которые грузился интернет-магазин или банк. Поэтому главный навык IT-специалиста в 2024 году – уметь создавать системы, которые обрабатывают огромные потоки данных без задержек и сбоев. Если вы хотите стать востребованным разработчиком, вам нужно знать Redis. Эта система позволяет гарантировать великолепный опыт юзеров от использования ключевых фич вашего проекта. Специально для этого ребята из FAANG School подготовили онлайн эфир, где расскажут, как создавать высоконагруженное приложение с Redis. Вы узнаете: – что такое кэш и когда его использовать – как избежать ошибок многопоточности в Redis – как использовать Redis в высоконагруженных проектах. Реальные примеры кода – о концепции NoSQL и горизонтальном масштабировании – как корректно работать с данными в Redis – как использовать Redis в качестве основной БД Переходите, чтобы после эфира реализовать несколько фич с Redis и увеличить шанс получить оффер.

👩‍💻 Заливка текста картинкой Чтобы добиться эффекта текста с изображением внутри, применяется несколько CSS-свойств, позволяющих заполнить текст любой картинкой. Вот пару свойств, с помощью которых можно создать этот эфффект:

• background-image — добавляет фоновое изображение • background-size: cover — делает так, чтобы изображение полностью покрывало текст • background-clip: text — обрезает фоновое изображение по форме текста. • color: transparent — делает текст прозрачным, чтобы был виден только фон изображения.

➡️ @code_ready | #гайд #css

⚡️ Бесплатное обучение HTML/CSS, JavaScript, React.js с нуля с поддержкой от наставника На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить фронтенд на практических задачах, которые интересно кодить С 26 по 30 августа он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — React.js Что вы сделаете на обучении — Сверстаете макет под присмотром тимлида — Затем добавите JavaScript (и это не пара скриптов для модального окна) — И перепишете проект на React.js 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме В общем — даст пошаговый подробный план «Что учить во фронтенде и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля Подписывайтесь, осталось 30 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первый урок из обучения уже доступен

Куда и как расти IT-специалисту — разберём на конкретных примерах Чувствуете, что достигли потолка, и не понимаете, куда двигаться дальше? Хотите расти в должности и доходе, но не знаете, какие скилы нужно осваивать для этого? На все эти и другие вопросы ответим на большом онлайн-событии. Разработчик, проджект, аналитик и дизайнер из IT-компании ecom.tech расскажут, как выросли до руководителей. Обсудим на конкретных примерах, как и куда развиваться, чтобы повысить свой уровень и получить новую должность. → Бесплатно, 28 августа в 19:00 мск Вы узнаете: — какие навыки прокачивать, чтобы повысить свой уровень; — куда и как расти в карьере разным IT-специалистам; — что должны уметь джун, мидл и синьор; — как устроен рабочий день в ecom.tech; — как руководители стали руководителями — истории пути; — какая ситуация на рынке труда и как сейчас проходит найм. Спикеры: ◾️Владимир Тимошенко — технический руководитель продукта ◾️Александр Маркин — руководитель группы логистических кросс-продуктовых проектов ◾️Сергей Коваленко — руководитель направления продуктовой архитектуры ◾️Дмитрий Деменков — руководитель отдела машинного обучения коммерческих продуктов ◾️Иван Емелюшкин — старший продуктовый дизайнер → Зарегистрируйтесь на онлайн-событие

➡️ @code_ready |#мем

👩‍💻 Мультиколонки в CSS Свойство columns — автоматически разбивает содержимое на несколько колонок. Оно управляет тем, сколько будет колонок и какой ширины они будут.

Шорткат columns объединяет два свойства: • column-width — ширина каждой колонки • column-count — количество колонок

Также есть и другие дополнительные свойства, которые помогают создавать улучшенные колонки: • column-gap — Задает расстояние между колонками • column-rule — Задает стиль, цвет и ширину линии между колонками. Сокращение для column-rule-style/color/rule. • column-fill — Управляет тем, как браузер распределяет содержимое между колонками. ➡️ @code_ready | #свойство #css

⚡️YouTube теперь в Telegram! В cвязи с недавнем замедлением Ютуба — лучшие обучающие каналы переехали в Telegram Вот каналы для наших айтишников: 👩‍💻 Frontend: @Frontend ⚙️ Backend: @Backend 🤓 Общее айти: @portalToIT 👩‍💻 Python: @Python 📱 GitHub: @GitHub 👩‍💻 Java: @Java 👩‍💻 C#: @Csharp 👩‍💻 С/С++: @Cpp 🖥 Базы Данных & SQL: @SQL 👩‍💻 Golang: @Golang 👩‍💻 PHP: @PHP 👩‍💻 Моб. разработка: @MobDev 👩‍💻 Разработка игр: @GameDev 👩‍💻 DevOps: @DevOps 🖥 Data Science: @DataScience 🤔 Хакинг & ИБ: @InfoSec 🐞 Тестирование: @QA 🖥 Дизайн: @Design Есть еще ссылки, если вам зайдет такой формат, то ждите в ближайшие дни:)

CSS Click Chart — с помощью этого  инструмента можно кликнуть на любое свойство, и сразу увидеть его пример и как оно работает. Также отображается поддержка браузерами. ⛓ Ссылочка: https://css3clickchart.com/ ➡️ @code_ready | #ресурсы

📱 Питомцы прямо в редакторе)) vscode pets — это расширение для VS Code, которое добавляет животных прямо в редактор кода. Они могут не просто бегать, но и указывать на ошибки в коде. Очень веселая штука. ➡️ @code_ready | #плагин

Больше никаких плохих контролов! Эти карточки появились благодаря яндексовской конференции «Я 💛 Фронтенд 2024». Ребята из Яндекса сделали их на основе доклада Ильи Бирмана, арт-директора Бюро Горбунова. Илья жёстко прошёлся по интерфейсам российских и международных сервисов и приложений, а главное, на примерах показал, как кнопки, слайдеры, выпадайки и прочие контролы делать нужно, а как ни в коем случае нельзя и где спрятаны различия. Полезные посты для фронтендеров вроде этого регулярно публикуют на канале [Yandex for Frontend]. Подписывайтесь, ребята готовят много интересного!

👨‍💻 Gallery Эффект плавного приближения фотографии из галереи. Реализовано с помощью Css и Js. ⛓ Готовый код: Ссылочка ➡️ @code_ready | #кодпен

👩‍💻 Неоновый эффект для текста Для создания эффекта неонового текста используется несколько CSS-свойств, которые позволяют добавить тексту подсветку. Рассмотрим ключевое свойство, которое отвечает за этот эффект:

• text-shadow — Самое главное свойство, имеет много нюансов, используется для добавления тени к тексту. • color: #fff — не столь важно, но для красоты пойдет) а то черный текст смотрится не очень.

➡️ @code_ready | #гайд #css

👩‍💻 Атрибут download Атрибут download используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера. Этот атрибут особенно полезен, когда вам нужно предоставить пользователям возможность скачать файлы, такие как изображения, документы, видео и другие ресурсы. ➡️ @code_ready | #атрибут #html

👨‍💻 Изучай фронтенд по мини-гайдам! Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript ➡️ Подписывайся на WebTaverna 😮

👩‍💻 Прокрутка с привязкой Свойство scroll-snap-type позволяет задать привязку прокрутки к определённым точкам, что делает процесс прокрутки страницы более плавным и контролируемым. Параметры свойства: • none: Отключает привязку прокрутки. • x или y: Устанавливает привязку прокрутки по горизонтали или вертикали соответственно. • both: Активирует привязку прокрутки как по горизонтали, так и по вертикали. • mandatory: Прокрутка останавливается только на привязанных точках, делая её обязательной. • proximity: Прокрутка останавливается на привязанных точках, только если они близко.

overflow-x: scroll — для плавного перемещения от элемента к элементу по оси X.

➡️ @code_ready | #свойство #css