Senior Frontend - javascript, html, css


Kanal geosi va tili: Rossiya, Ruscha


Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Связанные каналы  |  Похожие каналы

Kanal geosi va tili
Rossiya, Ruscha
Statistika
Postlar filtri


Что такое ARIA-атрибуты?

ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний.
Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?».
Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?».

ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов.

Общий синтаксис ARIA-атрибутов — aria-атрибут="значение".
Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему.
Пароль

Пароль должен содержать не меньше 20 знаков

aria-describedby связывает с помощью одинакового ID два элемента — поле и подсказку из тега . Скринридер озвучит текст подсказки после подписи и основной информации о поле.

👉 @seniorFront


Синдром самозванца Vs Излишняя самоуверенность

Есть два зеркальных деструктивных поведения, с которыми мы встречаемся на работе - излишняя самоуверенность и синдром самозванца. На сколько они опасны для руководителя и для самой команды? Как с ними бороться? Ответы в этой статье.

👉 @seniorFront


Even or Odd Accessor

Создайте функцию, к которой можно обратиться не только как к функции, но и как к объекту. В обоих случаях передается число. Функция должна проверить, четное ли оно.

Примеры:
evenOrOdd(2); //'Even'
evenOrOdd[2]; //'Even'
evenOrOdd(7); //'Odd'
evenOrOdd[7]; //'Odd'

👉 @seniorFront


Обучаем Java-разработчиков оплата после выхода на работу

В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты.
Если задуматься, то все в выигрыше:
— ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя;
— в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше;
— мы прокачиваем твои навыки еще 2 года после курса: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут;
— мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов.

Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку!

Узнать больше

#реклама 16+
kata.academy

О рекламодателе


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
Blackhole

Создано и анимировано на canvas при помощи WebGL.

👉 @seniorFront


Представьте, что вы хотите создавать мощные и интерактивные веб-приложения, но каждый раз сталкиваетесь с трудностями в структуре кода и управлении компонентами. Вы чувствуете, что ваши текущие знания и навыки недостаточны для достижения результата.

А теперь представьте, что вы без труда создаете современные веб-приложения с помощью Angular, успешно используя компоненты, TypeScript, RxJS и Reactive Programming. Вы уверенно разрабатываете интерфейсы, которые нравятся пользователям и используете передовые инструменты для упрощения разработки.

Хотите это реализовать? Приглашаем вас на практический открытый урок «Angular Framework: работа с Компонентами» 24 июня в 20:00 мск. На вебинаре мы разберём структуру фреймворка Angular и научимся использовать компоненты для создания приложений. А еще создадим приложение при помощи ng терминала, поставляемого Angular, и компоненты, которые отобразим на странице.

Этот урок специально разработан для junior-разработчиков, которые хотят познакомиться с фреймворком Angular.

Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: Регистрация

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnjcLxkrv


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
CSS Pulse Animation Effects

В этом видео создается анимация пульсации на CSS.

👉 @seniorFront


Какой из методов массива в JavaScript можно использовать для создания итерируемого объекта из значений элементов массива?
So‘rovnoma
  •   map()
  •   forEach()
  •   values()
  •   filter()
682 ta ovoz


Хочешь получить реальный опыт и начать карьеру в аккредитованной IT-компании уже этим летом?
Стань участником Летней Школы системных аналитиков от Совкомбанк Технологий!


Прокачай скилы и освой одну из самых востребованных профессий на рынке.

📌8 - 28 июля. Кострома, Нижний Новгород, Майкоп

Почему стоит принять участие:
– Много практики. Вместе с командой ты будешь решать реальные задачи бизнеса, а опытные менторы тебя поддержат.
– Нетворкинг. Взаимодействуй с топовыми экспертами из Совкомбанк Технологий.
– Возможность получить офер в крупную IT-компанию. А ещё очень круто провести время вместе с единомышленниками.

После Летней Школы ты сможешь стажироваться или работать в 10 городах России, полный список ищи в нашем боте.

Как принять участие:
1. Заполни анкету в нашем боте @SummerSchoolSKBT_bot
2. Пройди тестовое задание
3. Получи приглашение

Узнай подробности и задай вопросы лично куратору Летней школы 👉@SummerSchoolSKBT_bot

LjN8K6PtZ
ООО «Феникс Образование», ИНН
7708274227


No script accordion animation

Реализовано на HTML и SCSS. При наведении задействуются CSS трансформации и изменяется значение grid-template-rows.

👉 @seniorFront


Leaping Percentage Loader

Это анимированная svg картинка. Логика смены чисел реализована в JS.

👉 @seniorFront


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
Проводит нагрузочное тестирование

👉 @seniorFront


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
CSS Animation Effects Tutorial

В этом видео создаётся анимированная граница на HTML и CSS.

👉 @seniorFront


Team Profiles rotation with Theme Toggle

Стилизовано при помощи Tailwind. Каждая фотография - это input type="radio".

👉 @seniorFront


Ты начнёшь верстать увереннее, добавишь в портфолио 1 крутой сайт и сможешь повысить цену на свои услуги…

Потому что Роман Чернов, веб-разработчик с 10-летним стажем, организовал бесплатный 7-дневный интенсив с практикой и обратной связью.

За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
- Получишь сертификат

👉 Забрать бесплатно 7 дней обучения frontend-разработке

Реклама. ИП Чернова О. А., ИНН:771399721044


Перформанс ревью

Перформанс ревью (performance review) — система оценки компаниями профессиональных качеств сотрудников. Это – популярный и эффективный инструмент, который используют крупные мировые и отечественные бренды, например, Google, Яндекс и Авито.

В этой статье директор по персоналу компании-разработчика ПО рассказывает, как проходит перформанс ревью в их компании, и дает лайфхаки, которые помогут успешно пройти оценку профессиональных качеств и получить максимум пользы для развития своей карьеры. Надеюсь, после прочтения вы почувствуете себя более уверенно и к следующему перформанс ревью будете во всеоружии.

👉 @seniorFront


Проработал в IT больше 10 лет. Вот 5 вещей, которые я бы хотел знать, если бы начинал сейчас:

1. Консистентность – залог успеха
Когда-то я был не уверен в том, что делаю. Ни в качестве, ни в выборе – от направления до стека. Я переключался между технологиями, думал о том, чтобы бросить то, что делаю, и снова поменять профессию. От этого не было уверенности в собственных навыках, и руки опускались очень часто и очень низко. Определитесь с путем и идите по нему – это даст вам больше плодов, чем широкий спектр посредственно развитых навыков, особенно в начале пути.

2. У вас будет не получаться, вы будете не понимать – и это нормально (и это пройдет со временем, но не совсем)
Со временем станет легче, но это не пройдет. Я прогуливал пары в универе, поэтому у меня остались дыры в фундаментальных знаниях о компьютерной науке, которые я не залатал с опытом. Но это не самое важное. Самое важное, что и в своей работе вы будете иметь пропуски в знаниях. Может быть, не в конкретной работе в конкретной роли на конкретном проекте – это лимитированные знания, проект можно изучить вдоль и поперек, особенно если работать на нем достаточно долго. Но это нормально не знать какие-то вещи о вашей профессии в целом.

3. Не держитесь за плохое место
Бывает такое – плохое рабочее место. Распознать плохое место просто – в конце дня вам хочется завернуться в одеялко и забиться в угол, и самое главное – на работе не с кем об этом поговорить, чтобы улучшить ситуацию. У плохого места бывают разные причины. Иногда это коллектив, иногда начальство, иногда дело может быть в вас – просто не подходите на это место, ошибка найма, и это нормально. Не нормально – держаться за это место.

4. Часто менять работу может быть полезно, но не всем
Я все еще вижу рекомендации для начинающих программистов: меняйте работу почаще. Так, мол, больше опыта наберетесь. Год там, полгода сям, и вот ты через три-четыре года опытный как сеньор помидор. Это может сработать. Но это не для всех.
Есть разные типы людей, по тому, как они умеют концентрироваться и удерживать внимание. Если у вас нет проблем с фокусом, вы легко можете проработать несколько лет на одном месте и изучить все процессы вдоль и поперек – это и цену в текущей компании повысит, и даст возможность в будущем рассказать о том, что узнали, на собеседованиях. Люди недооценивают понимание работы вглубь, а ведь много позиций и компаний, где это ценят.

5. Не упускайте возможности, даже если они кажутся мелкими или незначительными
Карьера в автоматизации тестирования изменила мою жизнь в лучшую сторону. Эта возможность всегда была у меня перед носом. Я не раз задумывался о том, чтобы попробовать, и даже начинал что-то учить, но бросал – мне казалось, что тестирование это несерьезно и вообще это какой-то позор переключаться на тестирование после нескольких лет опыта в веб-программировании (хаха). Оказалось, что я способен сделать серьезную карьеру в этом поле и даже без относительно серьезных усилий. Больших усилий для меня стоило переключиться с работы в баре на работу веб-разработчика.

👉 @seniorFront


Neumorphic Rocker Switch

Оригинальный переключатель, свёрстанный из кнопки на HTML и SCSS. Логика переключения реализована в JS.

👉 @seniorFront


decodeURIComponent и decodeURI в JS

decodeURIComponent применяется для обработки отдельных компонентов URI и эффективно декодирует специальные символы, такие как &, =, +, ?. Этот метод подходит для получения точных значений параметров из строки запроса.

decodeURI предназначен для декодирования полных URI. Он сохраняет специальные символы, которые существенны для структуры URI, например & и = в запросах, тем самым поддерживая целостность URI.

Примеры:
// decodeURI сохраняет структуру запроса
console.log(decodeURI("http://example.com/?name=John%20Doe&age=30")); // "http://example.com/?name=John Doe&age=30"

// decodeURIComponent усиленно декодирует, что может изменить структуру
console.log(decodeURIComponent("name=John%20Doe%26age%3D30")); // "name=John Doe&age=30"

Используйте decodeURIComponent, чтобы извлекать точные значения из составных частей URI, и decodeURI, когда необходимо сохранить работоспособность всего URI.

👉 @seniorFront


Сбросить балласт. Аккуратное отключение лишних фич

Разработчики в целом склонны что-то добавлять, а не убирать, даже в ущерб результату. Исследования показали, что люди плохо справляются с поиском простых решений, которые противоречат шаблонному интуитивному мышлению (что-то добавить).

Что тут говорить, если самая простая программа сегодня весит под 100 МБ, как целая операционная система со всем софтом несколько десятилетий назад. Кто-то говорит, что причиной этого является закон Мура и рост производительности процессоров в геометрической прогрессии. В связи с этим даже интересно, каким был бы софт при замедлении CPU в двадцать раз.

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

👉 @seniorFront

20 ta oxirgi post ko‘rsatilgan.