Senior Frontend - javascript, html, css. Страница 79

👉 @seniorFront

​​Готов проверить насколько ты крут во фронтенде? На канале Frontend Tests & Tasks мы собираем для Вас самые интересные вопросы и  задачи по фронтенду. Если вдруг не сможешь решить задачу - не беда, мы подробно объясним её решение. Готов? Тогда поехали 👉 @frontend_tests

GSPreloader Это лоадер из библиотеки GreenSock. В JS задаётся его конфигурация до 11 строчки. Остальное - код самого лоадера. 👉 @seniorFront

Sum of two lowest positive integers Создайте функцию, которая принимает массив чисел и возвращает сумму двух наименьших положительных чисел этого массива. Примеры: [19, 5, 42, 2, 77] //7. [10, 343445353, 3453445, 3453545353453] //3453455. 👉 @seniorFront

Incoming Call Вёрстка создана с использование препроцессоров Haml и SCSS. При нажатии на кнопки задействуются CSS анимации. 👉 @seniorFront

Легко справляетесь с простыми задачами, но чувствуете, что для серьезных проектов пока не хватает навыков? Тимлиды ВКонтакте записали курс по современному фронтенду для junior и middle разработчиков. Здесь вы научитесь: - Делать быстрые, качественные интерфейсы и адаптивную верстку; - Создавать приложения, доступные в офлайне; - Писать тесты и повышать производительность кода; - Разбираться в смежных темах: деплой, CI/CD, мониторинг, кэширование, оптимизация на сервере. По итогам курса у вас будет готовый сервис на React с деплоем на собственном сервере. Вы станете крепким специалистом с широким набором скиллов, а наш HR доведет вас до оффера в крупную компанию. Записывайтесь на курс до 17-го декабря — по промокоду SENIORFRONT действует скидка 10%! Ознакомиться с подробной программой курса и оставить заявку можно на сайте. Там же для всех желающих доступна бесплатная демоверсия курса.

Архитектурный паттерн MVC MVC (сокращение от Model—View—Controller) — это архитектурный паттерн, который делит модули на три группы: - модель (model), - представление (view), - контроллер (controller). Модель содержит данные приложения, за которыми приходит пользователь. Например, список своих заказов в интернет-магазине. Представление показывает эти данные в понятном для пользователя виде. Например, на свёрстанной странице сайта или в приложении на телефоне. Контроллеры принимают пользовательские команды и преобразуют данные по этим командам. Например, если пользователь нажимает кнопку «Удалить заказ», то контроллер отмечает этот заказ в модели удалённым. 👉 @seniorFront

CSS Glowing Text Animation Effects В этом видео автор анимирует CSS свойство text-shadow, тем самым создавая эффект мерцания текста. 👉 @seniorFront

Sign in/up Form При нажатии на кнопки автор изменяет CSS свойство transform у карточки, а также изменяет цвета фонового градиента. 👉 @seniorFront

layered mockup presentation Создано без использования JS. При нажатии на каждый слой задействуется отдельная CSS анимация. 👉 @seniorFront

💣 Создайте игру «Сапёр» с помощью React Hooks! Приглашаем 13 и 14 декабря на интенсив от OTUS! ✔️ Разберем принципы игры, алгоритм для построения поля и интерфейса игры. ✔️ Сделаем 2 реализации — с использованием useEffect и useRedux. ✔️ Разберем, как тестировать React Components с использованием React-Testing-Library. Бесплатный интенсив — это часть хардкорного онлайн-курса «React.js Developer» от OTUS для опытных JS-разработчиков, для регистрации пройдите вступительный тест. Занятие пройдет в прямом эфире, записи не будет! Ждем вас онлайн! Регистрируйтесь сейчас — напомним перед вебинаром! 👉 Регистрация на 1-й день интенсива: https://otus.pw/9kT2/ 👉 Регистрация на 2-й день интенсива: https://otus.pw/dkGU/

Разработка через тестирование (TDD) Разработка через тестирование (Test Driven Development, TDD) — практика разработки программ, при которой мы вначале пишем тесты для функциональности, которую хотим создать, затем — реализацию этой функциональности. Когда все заработает — рефакторим код. Основной посыл TDD — в разбиении больших задач на маленькие. Стандартный цикл разработки состоит из трёх этапов и занимает 10–15 минут. 1. Красная зона. На нём мы пишем тест, который точно упадёт с ожидаемой причиной. Если причина падения теста не совпадает с ожидаемой, переходить к реализации функциональности рано. 2. Зелёная зона. На нём пишем функцию, которая проходит этот тест. Цикл короткий, поэтому реализация должна быть максимально простой. 3. Синяя зона. На этом этапе мы рефакторим код тестов и реализации. Проводить рефакторинг в синей зоне безопасно, потому что вся функциональность, которую рефакторинг затрагивает, уже покрыта тестами. Если что‑то по пути сломается, мы об этом тут же узнаем.

Animated Circular Navigation В этом видео автор создаёт радиальное меню и с помощью CSS трансформаций добивается оригинального эффекта при нажатии на пункты этого меню. 👉 @seniorFront

Перейду сразу к делу. Пост для тех, кто хочет попрактиковаться в верстке и сделать хороший проект для своего портфолио. С 10 по 13 декабря будем делать сайт с интерактивной навигацией для настоящего жилого комплекса. Немного о программе: ✅ День 1 — разметка страницы с помощью HTML и CSS — вырезаем графику из макета Figma — сохраняем код на Github ✅ День 2 — верстаем дом с навигацией по этажам — полигоны в SVG-графике — пишем стили для страницы ✅ День 3 — делаем интерактивную навигацию — подключение скриптов к сайту — база по JS, которая нужна в работе — библиотека jQuery для простоты работы ✅ День 4 — пишем правила адаптивной верстки — проверяем функционал, дописываем его — публикуем сайт в интернете Все предельно просто. Регистрируйся по ссылке, пиши код, общайся с другими участниками и получай мотивацию на дальнейшее обучение: telegram.me/gloacad…demy_bot

Paper boat sailing in the rain Вёрстка сделана при помощи препроцессоров Haml и SCSS. В JS автор генерирует капли, которые падают рандомно. Кроме того, можно создать свою каплю, кликнув на экран. 👉 @seniorFront

Memory Game Суть игры в том, что надо найти пары одинаковых карточек. Логика сделана на JS. 👉 @seniorFront

​3 ошибки начинающих JavaScript-разработчиков, мешающих стать профессионалом Нежелание знакомиться с концепцией «чистого кода» Создавать чистый код должен учиться каждый начинающий разработчик, если он желает стать профессионалом. С концепцией «чистого кода» стоит ознакомиться еще на старте карьеры. Чем раньше вы начнете следовать положениям этой концепции, тем раньше вы привыкнете сразу писать чистый код, который легко обслуживать впоследствии. Слишком раннее начало работы над большими проектами Если вы не мидл и не сениор, то вы, скорее всего, не сможете закончить ваш «большой проект». В нем будет слишком много элементов и вещей, которые нужно учесть. Допустим, вы все-таки потратили кучу времени на него, а теперь пытаетесь перейти на уровень мидла. И тут понимаете, что не можете показать кому-либо этот код, потому что он не очень хорош. На этот «проект века» вы потратили кучу времени и сил, но его нельзя назвать примером хорошей работы, которую можно добавить в портфолио. Социальная самоизоляция Семья и близкие — это важно. С головой погрузившись в изучение JavaScript и недооценивая важность своей психической и эмоциональной жизни, вы рискуете погрузиться в депрессию и стать раздражительным. 👉 @seniorFront

❗️ NodeJS — самая популярная технология в Силиконовой долине. Навык работы на этой платформе открывает удивительные карьерные возможности любому разработчику на JavaScript. ❓ Хотите узнать подробнее какие возможности открывает Node.js разработчикам на Javascript? 👉 Приглашаем 8 декабря в 20:00 на Demo Day онлайн-курса «Node.js Developer» от Otus. 💪 Александр Коржиков, ведущий эксперт JavaScript расскажет, как за 4 месяца научиться разрабатывать серверные приложения любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js и получите глубокое понимание архитектуры и дизайна Node.js. 📌 В конце встречи у вас будет возможность занять место в группе по спец.цене. 👉 Регистрируйтесь по ссылке https://otus.pw/ZX7s/