Switch Day and Night - Cat

Вся сцена реализована на HTML и CSS.

👉 @seniorFront

​Итератор

Итератор — это объект, который умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая своё текущее положение внутри этой последовательности.
Иными словами итератор — это такой механизм, который позволяет перемещаться (итерироваться) по элементам коллекции в определённом порядке и делает их доступными.

В JavaScript итератор — это объект, который возвращает следующий элемент последовательности, через метод next(). Этот метод возвращает объект с двумя свойствами:
- value — значение текущего элемента коллекции.
- done — индикатор, указывающий, есть ли ещё в коллекции значения, доступные для перебора.

function makeIterator(array) {
let nextIndex = 0

return {
next: function () {
if (nextIndex < array.length) {
const result = { value: array[nextIndex], done: false }
nextIndex++
return result
} else {
return { done: true }
}
}
}

После создания, объект-итератор может быть явно использован, с помощью вызовов метода next():
let iterator = makeIterator(['Hello', 'world'])
console.log(iterator.next().value)
// 'Hello'
console.log(iterator.next().value)
// 'world'
console.log(iterator.next().done)
// true

Как только метод next() завершает перебор, то возвращается { done: true }. Это является сигналом, что итерирование завершено.

👉 @seniorFront

Star Wars Imperial Army's Product Slider

Свёрстано на HTML и SCSS. Функционал слайдера реализован при помощи библиотеки Swiper.

👉 @seniorFront

​Почему умирает твой пет-проект?

А вы потянете пет-проект в одиночку?
Теперь мы плавно переходим ко второму вопросу в нашей повестке: А вы вообще реально думаете, что сможете реализовать все самостоятельно? Ведь крупные компании располагают тысячами сотрудников и множеством команд, каждая из которых разрабатывает свою часть продукта. И вы считаете, что все это можно сделать в одиночку.
Главным героем в этой небольшой истории будет Иван.
Иван решает реализовать свою криптовалютную биржу с изюминкой, которую мы оставим в секрете. И казалось бы по версии Ивана достаточно фронт на реакте запилить, бек и авторизацию и кошельки, и можно отправляться на минимальном MVP в релиз. Но будет ли так — это большой вопрос.
Для успешной работы ему приходится находится в роли заказчика, аналитика, разработчика, тестировщика и девопса. В дальнейшем он пытается совместить все эти роли, но несмотря на затраченное время, его цель остается далекой. Учитывая, что на разработку крупных продуктов командам требуется годы, в одиночку он может лишь сделать небольшую часть. Возможно, стоило начать с чего‑то более ограниченного или посильного.

А обладаете ли вы временем для работы над пет-проектом?
Давайте опишем персонажа по имени Олег, которого прозвали «Где правки?». Он является весьма успешным и востребованным тимлидом небольшой команды разработки. Помимо рабочей сферы у него есть также настоящая семья: жена и несколько детей. И вот ему поступает предложение о совместной разработке проекта с друзьями, на что он соглашается.
И вот работа над пет‑проектом набирает обороты, и жизнь в нем оживает: друзья уже приступили к выполнению своих первых задач, но Олег пока не может присоединиться. Ведь на его работе требуется закрыть релиз, а после работы он обещал сводить жену в магазин, а также забрать детей из садика. И вообще кровь из носу он завтра точно выполнит свою часть заданий.
В целом всегда важно заранее понимать свои силы. Конечно, всегда хочется участвовать во всех интересных проектах, но если нет возможности, стоит отказаться, чтобы не подводить других. Или определить, что график работы будет не очень напряженный, чтобы вы смогли справиться.

👉 @seniorFront

Social icon animation

После загрузки страницы запускаются несколько анимаций с разной задержкой, созданной при помощи setTimeout.

👉 @seniorFront

Pixelate

Размытие реализовано при помощи CSS backdrop-filter. Логика перемещения фильтра реализована в JS.

👉 @seniorFront

Gradient Text Stroke Effects

В этом видео создается градиентный текст при помощи CSS background-clip со значением text.

👉 @seniorFront

👉 @seniorFront

Как получить ипотеку в Москве под 4,5%?

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

ИТ-ипотека по таким условиям будет доступна до конца 2024 года. Но дальше получать ее будет сложнее – у банков заканчиваются лимиты на льготные программы. Так что лучше не откладывать.

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

Подписывайтесь на Негинского и забирайте из закрепа подборку 12 лучших ЖК для ИТшников. Она будет доступна 24 часа, поэтому не откладывайте.

Наши коллеги запустили канал-тренажёр для кодеров

Они ежедневно дают задачи на JavaScript, HTML, CSS, Python, Java. Объясняют решения и публикуют туториалы, как исправить сложные баги.

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

И это не всё — скоро розыгрыш подписок Telegram Premium 🎁

Чтобы участвовать, достаточно решить задачу с картинки:

Parallax Depth Cards

Реализовано на Vue. Поворот карточки реализован при помощи CSS трансформаций.

👉 @seniorFront

Masked SVG Loader

Это SVG картинка, анимированная в CSS.

👉 @seniorFront

👉 @seniorFront

Reveal Text on Scroll

В этом видео создаётся эффект появления новых элементов на экране при помощи JS.

👉 @seniorFront

Exploring UI

Анимировано библиотекой GSAP. Логика переключения слайдов реализована в JS.

👉 @seniorFront

Character with longest consecutive repetition

Для заданной строки s найти символ c (или C) с самым длинным последовательным повторением и вернуть: [c, l]
где l (или L) - длина повтора. Если есть два или более символов с одинаковым l, возвращается первый в порядке появления.

Для пустой строки возвращается:["", 0]

Примеры:
longestRepetition("aaaabb") => ["a",4]
longestRepetition("bbbaaabaaaa") => ["a",4]
longestRepetition("cbdeuuu900") => ["u",3]

👉 @seniorFront

Minimal Clothing Catalogue

Вёрстка реализована на HTML и SCSS.

👉 @seniorFront

aria-level

aria-level помогает браузерам и вспомогательным технологиям рассказать об уровнях элементов, когда не можете передать их иерархию с помощью чистого HTML.

Пример
<span
role="heading"
aria-level="1"
>
Гайвань
</span>

Скринридеры прочтут код примерно так: «Гайвань, заголовок первого уровня».

Используйте для заголовков теги <h1>–<h6>. У них по умолчанию есть свойство aria-level. Когда по крайне важной причине верстаете кастомные заголовки, учитывайте несколько особенностей поведения aria-level.

Заголовок с ролью heading без aria-level автоматически получает второй уровень.

👉 @seniorFront

Music Player with Slider

Слайдер создан библиотекой Swiper. Логика запуска и переключения музыки реализована в JS

👉 @seniorFront

​Сколько работают программисты?

Для начала, что такое "работа"? По моему мнению, это и обдумывание задачи, и планирование, и чтение рассылок, и написание кода и рисование набросков - всё это важно.
Но под работой часто имеют в виду именно написание кода.
Мне тяжело работать больше чем 5 часов. Я могу проработать и 8, и 12, но для этого нужно иметь очень точный план работы и точное описание результата. Обычно первого нет. Реже нет второго.

По 15 часов в день работают либо профнепригодные, неспособные выполнить задачу вовремя, либо одержимые. И то и другое говорит о низком уровне организации личного времени.

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

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

Но не стоит путать работу над своими проектами и работу выходные. Это разные вещи.

👉 @seniorFront