Code Ready | Frontend

Куда и как расти 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

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ▪️ Как научиться отвлекаться от работы и отдыхать? ▪️ Как совместить кучу рабочих задач и время с семьей? ▪️ Как справиться с прокрастинацией? ▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайся на канал @vadimpetrov_psy и научись работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходи в закреп канала - там много полезного, и даже бесплатный мини-курс. https://t.me/+DVr139qIfJxhNzYy

📱 Переключаем видимость пароля Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
  <input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
    if (showPasswordCheckbox.checked) {
        passwordInput.type = 'text';
    } else {
        passwordInput.type = 'password';}});

➡️ @code_ready | #обучение #js

📱 Как работает Array.from() в JS? Функция Array.from: Создаёт новый массив из массивоподобного или итерируемого объекта, позволяя преобразовывать структуры данных, такие как строки или наборы, в массивы. Она имеет несколько вариантов использования, давайте их разберём: • Array.from('hello') — Преобразует строку в массив символов. • Array.from(new Set([1, 2, 3])) — Преобразует Set в массив, убирая дубликаты. • Array.from({ length: 5 }, (_, i) => i + 1) — Создаёт массив из 5 элементов с помощью функции-генератора.

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

➡️ @code_ready | #функция #js

Оплачиваемая стажировка и трудоустройство без опыта — ну ничего себе 😳 Все возможно с Добровольным квалификационным экзаменом! Это бесплатный проект Правительства Москвы, где ты можешь показать свои знания по специальности, запомниться потенциальным работодателям и получить оффер в престижные компании Москвы. Тебя ждет всего три шага: 1️⃣ Пройди тест После регистрации на сайте ДКЭ тебе будет доступно 70 профессий по 7 направлениям. Выбирай тест по своей специальности и проверь уровень своих знаний! 2️⃣ Реши кейс Если ты успешно сдал тест, тебя пригласят на следующий этап, где ты с другими участниками в команде будешь решать реальный кейс одного из работодателей. 3️⃣ Стань победителем Окажись в числе лучших по общему количеству баллов за оба этапа и получи шанс попасть на оплачиваемую стажировку с дальнейшим трудоустройством. Готов проявить себя? Регистрируйся и начинай проходить тест — https://dke.moscow Реклама. АНО "РАЗВИТИЕ ЧЕЛОВЕЧЕСКОГО КАПИТАЛА", АНО "РЧК". ИНН 7710364647. erid: LjN8KNSNC

😎 Ребятки) Нужен человек для долгосрочного оплачиваемого сотрудничества, для вас это будет как подработка. Важно знать базу верстки (html, css, js) и идеальные практические знания одного из этого:

Python Java C и C++ C# Sql, базы данных и php

Кому интересно пишите в личку https://t.me/energy_it, сразу с описанием своих знаний.