Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Менеджер по рекламе: @Spiral_Yuri Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Перед тем, как выбрать оффер, пойми себя
Представьте, что вам нужно решить, сменить работу или остаться. Какую компанию выберете? Ту, где платят больше?
Если бы только оклад решал, все бы хотели в компанию А, а в компанию Б никто бы не шёл. Но кто-то выбирает крипту, а кто-то госорганизацию. Как не оказаться случайно в стартапе, если вы хотите стабильности на годы — попробуем ответить в статье. Обойдусь без коучинга, мы научимся определять, что важно для нас, любимых.
Я покажу методологию оценки, которой пользуюсь, чтобы сравнить условия работы в нескольких компаниях.
👉 @frontendInterview
Как увеличить картинку при наведении?
За изменение масштаба изображения отвечает свойство transform с функцией scale(). В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.
Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover .scale {
transition: 1s; /* Время эффекта */
}
.scale:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в <div>. Для него задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также overflow со значением hidden, чтобы пряталось всё за пределами <div> .scale {
display: inline-block; /* Строчно-блочный элемент */
overflow: hidden; /* Скрываем всё за контуром */
}
.scale img {
transition: 1s; /* Время эффекта */
display: block; /* Убираем небольшой отступ снизу */
}
.scale img:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
👉 @frontendInterview
Как добавить тень к тексту?
Тень к тексту добавляется с помощью стилевого свойства text-shadow. С помощью его параметров можно установить положение тени, степень её размытия и цвет тени
Обязательных параметров у text-shadow два:
- смещение тени по горизонтали, значение может быть положительным (тень будет справа от текста) или отрицательным (тень будет слева от текста);
- смещение тени по вертикали, значение может быть положительным (тень будет ниже текста) или отрицательным (тень будет выше текста).
Остальные два необязательных параметра указывают размытие тени и её цвет.
Например, чтобы добавить тень к заголовку, можете использовать следующий код: h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
В данном примере тень будет смещена на 2 пикселя вправо и вниз от текста, размытие тени составит 4 пикселя, а цвет тени будет полупрозрачным чёрным (rgba(0, 0, 0, 0.5)).
👉 @frontendInterview
Современный подход к программной архитектуре: сложные компромиссы
В архитектуре программного обеспечения нет простых решений. Напротив, есть масса сложностей — задач и проблем, для решения которых нет готовых ответов и приходится выбирать между различными компромиссами. Эта книга научит вас критически относиться к компромиссам, связанным с распределенными архитектурами. Опытные архитекторы Нил Форд, Марк Ричардс, Прамод Садаладж и Жамак Дехгани обсуждают стратегии выбора архитектуры, подходящей для тех или иных случаев. История Sysops Squad — вымышленной группы специалистов — позволяет исследовать все аспекты выбора архитектуры: от определения степени гранулярности сервисов, управления рабочими процессами и оркестрации, разделения контрактов и управления распределенными транзакциями до оптимизации таких операционных характеристик, как масштабируемость, адаптируемость и производительность.
👉 @frontendInterview
Получи грант на обучение в Центральном университете
Получи несгораемый грант до 2 800 000 ₽ на учебу в бакалавриате Центрального университета. Гранты покрывают от 25 до 100% стоимости обучения. Сумма гранта не уменьшается, а может увеличиться за дополнительные достижения и успехи в учебе
Подать заявку
#реклама
apply.centraluniversity.ru
О рекламодателе
Внимание, разработчики! Приглашаем вас на открытый вебинар по алгоритмам и структурам данных от опытного практикующего эксперта💯
Ждём вас на уроке «Визуальное сравнение 1-2-3 алгоритмов сортировок» от OTUS, где мы:
- подробно рассмотрим три алгоритма сортировок: Пузырьком, Вставкой и Шелла;
- сравним их по различным критериям: сложность и количество обменов, стабильность и адаптивность;
- напишем алгоритмы и сравним их быстродействие;
- продемонстрируем их работу на игральных картах🂱️
🔥 Спикер Евгений Волосатов — программист баз данных и преподаватель с огромным и разнообразным опытом, автор статей и учебных программ по C#, Java, PHP.
Встречаемся 1 июля в 20:00 мск в преддверии старта курса «Алгоритмы и структуры данных». Все участники вебинара получат специальную цену на обучение.
🔴 Регистрируйтесь на урок и подписывайтесь на бота, чтобы ознакомиться с программой курса и забронировать спецскидку 10% (акция до 30 июня): регистрацияРеклама ООО «Отус онлайн-образование», ОГРН 1177746618576 erid2SDnjdD9vA6
Как сохранять мотивацию при разработке в одиночку
Один из основных камней преткновения для разработчиков, работающих в одиночку – поддержание мотивации на должном уровне. В последнее время автор вел записи о попытках себя замотивировать, отмечал, что работает, а что не работает. В статье приведены несколько рабочих методов.
👉 @frontendInterview
Как изменить вид нажатой кнопки?
Чтобы пользователь понимал, что его щелчок по кнопке сработал, в момент щелчка меняют вид самой кнопки. Для этого используется псевдокласс :active, который добавляется к селектору button. Стилевые правила для этого селектора определяют вид нажатой кнопки
Результат данного примера показан на рисунке ниже. Для селектора button:active используется свойство box-shadow со значением inset, оно создаёт внутреннюю полупрозрачную тень, за счёт чего кнопка кажется вдавленной.
👉 @frontendInterview
Как вывести картинку заданных размеров без искажений?
Для элемента <img> размеры картинки задаются с помощью атрибутов width и height. <img src="image/redfox.jpg" alt="Лиса" width="500" height="286">
Если оставить только один размер, к примеру, ширину равную 100%, то браузер высоту вычислит самостоятельно и выведет картинку с сохранением исходных пропорций.
Если требуется при гибкой ширине ограничить высоту изображения заданным размером и сохранить исходные пропорции картинки, то есть два метода:
- с помощью свойства object-fit;
- вывести изображение в виде фона через свойство background.
Использование свойства object-fit
Свойство object-fit применяется для масштабирования картинки, ограниченной заданными размерами. Значение cover у этого свойства заставляет изображение полностью заполнить область указанных размеров при сохранении пропорций картинки. .hero {
width: 100%; /* Ширина */
height: 300px; /* Высота */
object-fit: cover; /* Изображение вписывается в вышеуказанные размеры */
}
Центр картинки при масштабировании по умолчанию остаётся в центре области. Не для всех изображений это является подходящим, поэтому с помощью свойства object-position можно задать выравнивание картинки относительно её края object-position: center top; /* Положение изображения */
👉 @frontendInterview
isItLetter
Создайте функцию, которая проверяет, является ли переданный символ буквой.
Примеры: isItLetter('a') => true, `'a' is a letter`
isItLetter('1') => false, `'1' is not a letter`
👉 @frontendInterview
Атрибут autofocus в HTML5: нужно ли указывать значение?
HTML-атрибут autofocus позволяет немедленно после загрузки страницы установить фокус на конкретном элементе. Оба варианта — autofocus="autofocus" и autofocus — верны, однако предпочтение отдается короткой записи autofocus для сокращения и очистки кода. <input type="text" autofocus>
При этом, текстовое поле станет активным сразу после завершения загрузки страницы.
👉 @frontendInterview
Успел на созвон
👉 @frontendInterview
Обучаем Java-разработчиков оплата после выхода на работу
В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты.
Если задуматься, то все в выигрыше:
— ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя;
— в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше;
— мы прокачиваем твои навыки еще 2 года после курса: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут;
— мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов.
Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку!
Узнать больше
#реклама 16+
kata.academy
О рекламодателе
Совет фронтендерам и дизайнерам: Хватит тратить время на поиск макетов Figma
Все макеты реальных сайтов, которые заказчики присылают на вёрстку уже нашли и бесплатно выкладывают на канале Figma Portal
Пополняйте свое портфолио настоящими работами вместе с @maket_figma
🔥Тесты для подготовки к собеседованию🔥
Выбери своё направление:
1. Frontend
2. Python
3. Java
4. Тестировщик QA
5. Data Science
6. DevOps
7. C#
8. С/C++
9. Golang
10. PHP
11. Kotlin
12. Swift
Разбираем как решать задачи на LeetCode
✅ Примеры решений
✅ Пояснения
Выбери своё направление:
1. Python
2. JavaScript
3. Java
4. C#
5. Golang
6. С/C++
7. PHP
8. Kotlin
9. Swift
Прокачай скиллы, чтобы получить заветный оффер
Ребята из команды FAANG School собрали в одном месте гайды, шпаргалки, мануалы и чек-листы, в общем всё, что поможет стать сильными профессионалами.
Основные концепции Docker, наборы команд в JetBrains, пошаговая RoadMap по Java и множество других полезных материалов будут всегда под рукой, помогут быстро справиться со сложными вопросами и тем самым приблизят вас к высокой зп.
Библиотечный каталог постоянно пополняется, а значит, будет еще больше ценного контента. Бесплатно и навсегда!
Переходи, заглядывай в библиотеку и сохраняй полезности, если хочешь увеличить шансы устроиться в Яндекс, Amazon, Google и другие.
Попасть в библиотеку JAVA JUNIOR
Strip Comments
Создайте функцию, которая удаляет весь текст, следующий за любым из переданных маркеров комментариев. Любые пробелы в конце строки также нужно удалить.
Примерvar result = solution("apples, pears # and bananas\ngrapes\nbananas !apples", ["#", "!"])
// result should == "apples, pears\ngrapes\nbananas"
👉 @frontendInterview
Как убрать рамку у кнопок?
По умолчанию, браузер добавляет к кнопкам рамку, которая меняет свой стиль при изменении цвета фона кнопки.
Сама рамка устанавливается через универсальное свойство border, оно одновременно определяет толщину рамки, её стиль и цвет. Соответственно, чтобы у кнопки убрать рамку есть три способа:
- задать нулевую толщину рамки - Используем свойство border-width с нулевым значением.
- указать стиль рамки как none или hidden - За стиль рамки отвечает свойство border-style.
- установить прозрачный цвет рамки - В CSS для прозрачного цвета зарезервировано ключевое слово transparent. Так что для рамки пишем свойство border-color с этим значением.
👉 @frontendInterview
Когда решил удалить из кода костыль
👉 @frontendInterview
Оплачиваемая стажировка и трудоустройство без опыта — ну ничего себе 😳
Все возможно с Добровольным квалификационным экзаменом! Это бесплатный проект Правительства Москвы, где ты можешь показать свои знания по специальности, запомниться потенциальным работодателям и получить оффер в престижные компании Москвы.
Тебя ждет всего три шага:
1️⃣ Пройди тест
После регистрации на сайте ДКЭ тебе будет доступно 70 профессий по 7 направлениям. Выбирай тест по своей специальности и проверь уровень своих знаний!
2️⃣ Реши кейс
Если ты успешно сдал тест, тебя пригласят на следующий этап, где ты с другими участниками в команде будешь решать реальный кейс одного из работодателей.
3️⃣ Стань победителем
Окажись в числе лучших по общему количеству баллов за оба этапа и получи шанс попасть на оплачиваемую стажировку с дальнейшим трудоустройством.
Готов проявить себя? Регистрируйся и начинай проходить тест — https://dke.moscow
Реклама. АНО "РАЗВИТИЕ ЧЕЛОВЕЧЕСКОГО КАПИТАЛА", АНО "РЧК". ИНН 7710364647. erid: LjN8KBpQh
Разрабатываете бизнес-логику для проекта, но сталкиваетесь с трудностями в выборе между конечными автоматами (state machines) и рабочими процессами (workflows)? Ищете метод, который поможет вам лучше управлять состояниями и процессами в системе?
После прохождения нашего вебинара вы сможете эффективно описывать бизнес-логику с помощью конечных автоматов, успешно реализовывать процессы с пакетом workflow и четко понимать разницу между workflow и state machines. Ваша разработка станет значительно более структурированной и управляемой.
Встречаемся 2 июля в 20:00 мск в преддверии старта курса «Symfony Framework». Все участники вебинара получат специальную цену на обучение!
Спикер Михаил Каморин — Dev Tech Lead в Skyeng, участник и организатор конференций по PHP, член ПК Podlodka PHP Crew.
Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://otus.pw/F7XU/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjcohEAe
Такси для бизнеса. Яндекс Go
Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go
Узнать больше
#реклама
business.go.yandex
О рекламодателе
Жемчужины проектирования алгоритмов: функциональный подход
В этой книге Ричард Бёрд представляет принципиально новый подход к проектированию алгоритмов, а именно проектирование посредством формального вывода. Основное содержание книги разделено на 30 коротких глав, называемых жемчужинами, в каждой из которых решается конкретная программистская задача. Эти задачи, некоторые из них абсолютно новые, происходят из таких разнообразных источников, как игры и головоломки, захватывающие комбинаторные построения и более традиционные алгоритмы сжатия данных и сопоставления строк. Каждая жемчужина начинается с постановки задачи, формулируемой на функциональном языке пpoгpaммиpoвaния Haskell, чрезвычайно мощном и в то же время лаконичном, позволяющем легко и просто выражать алгоритмические идеи. Новшество книги состоит в том, что каждое решение формально вычисляется из исходной постановки задачи посредством обращения к законам функционального программирования.
👉 @frontendInterview
Представьте, что вы хотите создавать мощные и интерактивные веб-приложения, но каждый раз сталкиваетесь с трудностями в структуре кода и управлении компонентами. Вы чувствуете, что ваши текущие знания и навыки недостаточны для достижения результата.
А теперь представьте, что вы без труда создаете современные веб-приложения с помощью Angular, успешно используя компоненты, TypeScript, RxJS и Reactive Programming. Вы уверенно разрабатываете интерфейсы, которые нравятся пользователям и используете передовые инструменты для упрощения разработки.
Хотите это реализовать? Приглашаем вас на практический открытый урок «Angular Framework: работа с Компонентами» 24 июня в 20:00 мск. На вебинаре мы разберём структуру фреймворка Angular и научимся использовать компоненты для создания приложений. А еще создадим приложение при помощи ng терминала, поставляемого Angular, и компоненты, которые отобразим на странице.
Этот урок специально разработан для junior-разработчиков, которые хотят познакомиться с фреймворком Angular.
Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: Регистрация
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnje2owTg
Хватит терять время на уже готовый код!
Frontend Trends — библиотека фронтендера, где собраны готовые CodePen решения для ежедневных задач. Эффекты при наведении, 3D-анимации, готовые карточки и др.
Зашли – сохранили – применили в своём проекте. Пользуйтесь: @trends_frontend
Вечный покой .env: как эффективнее удалять закомиченный файл .env из Git-репозитория
В этой статье автор рассказывает как удалить файл из репозитория так, чтобы его было трудно откопать. Может быть полезно на случай, если вы залили в репозиторий то, чего там быть не должно.
👉 @frontendInterview
Разбираем как решать задачи на LeetCode
✅ Примеры решений
✅ Пояснения
Выбери своё направление:
1. Python
2. JavaScript
3. Java
4. C#
5. Golang
6. С/C++
7. PHP
8. Kotlin
9. Swift