Senior Frontend - javascript, html, css

2021-02-27 12:02:00 CSS Scroll Snap

Одной из основных причин появления спецификации CSS Scroll Snap является обеспечение разработчиков удобными средствами для организации хорошо контролируемой прокрутки содержимого страниц.

Для того чтобы создать элемент-контейнер, поддерживающий прокрутку, понадобится следующее:
1. Использование свойства из группы свойств overflow со значением, отличающимся от visible.
2. Применение некоего способа вывода элементов в контейнере, позволяющего расположить их рядом друг с другом (inline-элементы).

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

Для того чтобы воспользоваться возможностями CSS Scroll Snap дочерние элементы должны выводиться внутри контейнера в inline-режиме.

.section {
display: flex;
overflow-x: auto;
}

Теперь нам, чтобы спецификация CSS Scroll Snap заработала бы, нужно воспользоваться ещё парой свойств. Главный вопрос тут заключается в том, куда именно их нужно добавить.

Сначала надо добавить свойство scroll-snap-type к контейнеру, поддерживающему прокрутку. В нашем примере это — элемент с классом section. Затем нужно добавить свойство scroll-snap-align к дочерним элементам/

.section {
scroll-snap-type: x mandatory;
}

.section__item {
scroll-snap-align: start;
}

Благодаря использованию этих свойств мы настроили элементы, выводимые в контейнере, так, что они будут привязаны к началу контейнера.
Вот как это выглядит. Открыть/Комментировать

2021-02-26 19:30:00 Открыть/Комментировать

2021-02-26 12:30:05 Middle Front-End (React.js) Developer (Serpstat) — Украина. Remote
Полная занятость

Продуктовая компания Serpstat, лидер на рынке разработки SEO-инструментов в СНГ, ищет Middle Front-End Developer в крупный высоконагруженный проект.

Чем предстоит заниматься:
Разработка и поддержка web-приложения на React.

Что ждём от кандидата:
Опыт разработки Front-end приложений от 2,5 лет.
Знание ES6 JavaScript и современного JS-стека.
Отличные знания html5/css3.
Опыт разработки с React, Redux, Redux-saga, React-Router, NodeJS, TS, Jest.
Опыт работы с SOA / json-rpc api.
Умение абстрагироваться от реализации, абстрактно мыслить.
Умение чётко и грамотно доносить свои мысли до собеседника.

Что готовы предложить:
Удобный график работы: с 8 (10) до 17 (19).
Офис в центре города или озможность работать удаленно.
Оплачиваемый отпуск в размере 24-х календарных дней, оплачиваемые больничные.
Возможность обучения и развития: опыт и помощь наших сотрудников, помощь в профессиональной адаптации и обучение куратора на протяжении всего испытательного срока.
Карьерную лестницу и карту знаний, которые дают прозрачное понимание того, что нужно сделать, чтобы перейти на новую ступеньку.

Зарплата:
$1800-2500, по результатам собеседования.

Контакт: @Kuzya_ani

#remote #удаленка #frontend #js #reactjs #redux #middle Открыть/Комментировать

2021-02-26 12:30:05 Открыть/Комментировать

2021-02-26 10:02:38 Газета

Демонстрация разметки, сделанной с использованием CSS Grid. Открыть/Комментировать

2021-02-25 19:03:00 Жадное НЛО

Бесконечно анимированное похищение животных. Разметка сделана с использованием препроцессора Pug. Стили и анимации описаны в SCSS. Открыть/Комментировать

2021-02-25 12:03:00 ​Тестирование вёрстки.

Тестирование верстки сайта осуществляется двумя способами — вручную и с помощью автоматизированных тестов.

Для того, чтобы выполнить ручное тестирование, разработчику и тестировщику необходимо “пройтись” по всем пунктам разработанного заранее чек-листа.

Преимущество ручного тестирование заключается в его “гибкости” и детальности. Тестировщик может увидеть сценарии, которые не прописаны в скрипте, и тут же протестировать их. Однако есть и существенный минус — приходится все “делать своими руками”, а это значит, что затрачивается значительное количество времени. Сократить время проверки помогает автоматическое тестирование.

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

Самые низкоуровневые (простые) тесты — это юнит-тесты. В широком смысле юнит-тесты — это код, который тестирует юниты (части) кода: функции, модули и классы. В рамках frontend-разработки юнит-тесты — это тесты javascript. Обычно каждый javascript-компонент сайта имеет большое количество мелких юнит-тестов. Каждый такой тест проверяет только одно взаимодействие с тестируемым компонентом.

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

Для написания и воспроизведения юнит-тестов можно использовать фреймворк jest. Тесты производятся в виртуальной среде, где взаимодействие с сервером эмулируется.

Больше информации о тестировании можно найти в статье. Открыть/Комментировать

2021-02-24 13:00:12 Что читать/смотреть чтобы стать профессиональным front-end разработчиком?

Админы канала FrontEndDev отбирают лучшие ресурсы по веб разработке

На канале найдешь свежие статьи, фишки JS и TS, туториалы по фреймворкам, лучшие практики разработки и многое другое.

Рекомендуем подписаться! Открыть/Комментировать