Frontend разработчик

Совет по CSS 💡 Две строчки кода, чтобы изменить размер любого блочного элемента с помощью CSS. 📲 Мы в MAX 👉 @frontend_1

Совет по CSS 💡 Узнай, как легко можно использовать видео в качестве фона. 📲 Мы в MAX 👉 @frontend_1

Совет по HTML 💡 Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы? 📲 Мы в MAX 👉 @frontend_1

Как использовать зависящие от языка кавычки в CSS HTML имеет встроенную поддержку автоматических кавычек, которые зависят от языка. Вот пример:

<q lang="en">Hello</q>
<q lang="de">Hallo</q>
<q lang="fr">Bonjour</q>

Визуально результат будет таким:

"Hello"
„Hallo“
«Bonjour»

И это работает и в CSS! Если вы используете селектор ::before и хотите добавить кавычки вручную, вы можете использовать значение open-quote для свойства content.

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

Совместно с HTML-атрибутом lang, браузер сам позаботится о корректных кавычках. Это особенно полезно для многоязычных сайтов и повышает доступность. https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/ 📲 Мы в MAX 👉 @frontend_1

День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

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

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFHXhJiu ИП Галактионов Тихон Витальевич, ИНН 771618975809

Cовет💡 Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы. 📲 Мы в MAX 👉 @frontend_1

📌Как работает Javascript: шпаргалка для разработчика 🔹 Интерпретируемый язык JavaScript выполняется браузером или движком JavaScript, а не компилируется заранее в машинный код. Это делает его высоко портируемым между платформами. Современные движки, такие как V8, используют технологию Just-In-Time (JIT) для компиляции кода непосредственно в исполняемый машинный код. 🔹 Функции — объекты первого класса В JavaScript функции рассматриваются как объекты первого класса, что означает, что их можно хранить в переменных, передавать в качестве аргументов другим функциям и возвращать из функций. 🔹 Динамическая типизация JavaScript — это язык с динамической (слабой) типизацией, что означает, что тип переменной можно не объявлять заранее, и он может изменяться во время выполнения программы. 🔹 Клиентская (асинхронная) обработка JavaScript поддерживает асинхронное программирование, позволяя выполнять операции, такие как чтение файлов, HTTP-запросы или взаимодействие с базами данных, в фоновом режиме. Эти операции запускают коллбэки или промисы по завершении, что особенно полезно для веб-разработки, повышая производительность и удобство использования. 🔹 Прототипное ООП В отличие от классического объектно-ориентированного программирования, JavaScript использует прототипное наследование. Это означает, что объекты могут наследовать свойства и методы от других объектов, а не от классов. 🔹 Автоматическая сборка мусора JavaScript автоматически управляет памятью, удаляя объекты, которые больше не используются программой. Это помогает предотвращать утечки памяти и оптимизировать производительность приложения. 🔹 Сравнение с другими языками JavaScript отличается от таких языков, как Python или Java, своей ключевой ролью в веб-разработке. - Python известен своей читаемостью кода и универсальностью. - Java славится строгой структурой и надежностью. - JavaScript, в свою очередь, является интерпретируемым языком, который работает непосредственно в браузере без необходимости компиляции, что делает его гибким и динамичным. 🔹 Связь с TypeScript TypeScript является надмножеством JavaScript, добавляя в него новые возможности, в том числе аннотации типов. Это означает, что любой корректный JavaScript-код также будет валидным TypeScript-кодом. 🔹 Популярные фреймворки JavaScript - React — гибкий, с большим количеством плагинов, созданных сообществом. - Vue — чистый и интуитивно понятный, с хорошо интегрированными реактивными возможностями. - Angular — строгий в плане структуры, идеально подходит для корпоративной разработки. 📲 Мы в MAX 👉 @frontend_1

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. https://max.ru/tipsysdmin Типичный Сисадмин Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП

Используйте свойство columns, чтобы разделить статью на отзывчивые колонки 🚀. 📲 Мы в MAX 👉 @frontend_1

Card :hover spotlight effect with background-attachment 🤙 Используем background-attachment, чтобы прикрепить фон к области просмотра https://codepen.io/jh3y/pen/RwqZNKa 📲 Мы в MAX 👉 @frontend_1

CSS Совет 💡 Возможно, ты не знал об этом более удобном и понятном синтаксисе для диапазонов в медиазапросах 🤩 📲 Мы в MAX 👉 @frontend_1

Синхронизация React с API браузера 📲 Мы в MAX 👉 @frontend_1

📌 Как работать с em и rem в CSS? Данный пост о двух важных единицах измерения в CSS — em и rem. Часто новички путаются в их использовании, а ведь это мощные инструменты для адаптивного дизайна! 🔹 em — зависит от родительского элемента em — это относительная единица, которая зависит от размера шрифта родителя. Например:

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

Здесь 1.5em означает 1.5 * 20px = 30px. ⚠️ Будьте осторожны! Использование em для вложенных элементов может привести к неожиданному увеличению шрифта. 🔹 rem — зависит от корневого элемента В отличие от em, rem (root em) всегда рассчитывается относительно font-size у <html>. Например:

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem; /* 24px */
}

Здесь 1.5rem означает 1.5 * 16px = 24px, независимо от родителя! 🧐 Что выбрать? ✔ rem — удобен для глобального масштабирования (например, для всей страницы). ✔ em — полезен для элементов внутри компонентов (например, padding, margin). А вы чаще используете em или rem? Напишите в комментариях! 📲 Мы в MAX 👉 @frontend_1

Сохрани эти 4 CSS-анимации для своего следующего проекта 👨‍💻 📲 Мы в MAX 👉 @frontend_1

День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

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

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFJkdcAV ИП Галактионов Тихон Витальевич, ИНН 771618975809

💡 Простой кейс создания закругленных углов в CSS 📲 Мы в MAX 👉 @frontend_1

7 способов скрыть элемент с помощью CSS 🎨💻 Разбираем 7 различных методов скрытия элементов в CSS и их особенности! 🔥 1️⃣ Использование display

.hide {
  display: none;
}

❌ Не видно скринридерам ❌ Не занимает место ❌ Не принимает клавиатурные события ❌ Не принимает события мыши ❌ Не анимируется 📌 Использование: Полное скрытие элементов, например, скрытие полей в зависимости от выбранного метода оплаты. 2️⃣ Использование visibility

.hide {
  visibility: hidden;
}

✅ Видимо скринридерам ✅ Занимает место ❌ Не принимает клавиатурные события ❌ Не принимает события мыши ❌ Не анимируется 📌 Использование: Для скрытия сообщений об ошибках под формами. 3️⃣ Использование opacity

.hide {
  opacity: 0;
}

✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ✅ Принимает события мыши ✅ Анимируется 📌 Использование: Например, для скрытия ссылок, которые появляются при наведении. 4️⃣ Использование scale

.hide {
  transform: scale(0);
}

✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ✅ Анимируется 📌 Использование: Для скрытия элементов в анимации увеличения. 5️⃣ Использование translate

.hide {
  transform: translateX(-9999px);
}

✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ✅ Анимируется 📌 Использование: Например, для бокового меню на мобильных сайтах в сочетании с position: absolute. 6️⃣ Использование clip-path

.hide {
  clip-path: circle(0);
}

✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ✅ Анимируется 📌 Использование: Можно скрывать элементы полностью, но они остаются доступными для скринридеров. 7️⃣ Использование position absolute

.hide {
  position: absolute;
  left: -9999px;
}

✅ Видимо скринридерам ❌ Не занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ❌ Не анимируется 📌 Использование: Полезно для навигации скринридеров (например, ссылка «Пропустить к содержимому»). 🔥 Бонус: скрытие элемента визуально, но доступность для скринридеров! Используем CSS-хак, чтобы элемент был скрыт, но оставался доступным:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: circle(0);
  clip: rect(0 0 0 0); /* для IE */
}

📌 Использование: Например, для скрытия <h1>, если логотип используется в качестве заголовка. 💡 Подписывайтесь, чтобы получать больше полезных лайфхаков по CSS и фронтенду! 🚀✨ 📲 Мы в MAX 👉 @frontend_1

Совет по Javascript 💡 Возможно, вы не знаете, что мы можем передавать исходную ошибку, при этом повторно выбрасывая ошибку с полезным сообщением для лучшей отладки. 📲 Мы в MAX 👉 @frontend_1

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. https://max.ru/tipsysdmin Типичный Сисадмин Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП

Шпаргалка по выравниванию в CSS Grid 👨‍💻 📲 Мы в MAX 👉 @frontend_1