Day/Night Lighthouse Illustration

Свёрстано на HTML и CSS без использования картинок.

👉 @seniorFront

👉 @seniorFront

Login Form

В этом видео создается анимированная форма входа на HTML и CSS.

👉 @seniorFront

accordion gallery zoom animation

Реализовано на HTML и SCSS, без использования JS.

👉 @seniorFront

Ваш заказ, пожалуйста

Ваша задача — отсортировать переданную строку. Каждое слово в строке будет содержать одно число. Это число обозначает позицию, которую слово должно занимать в результате

Примеры:

 Thi1s T4est 3a"  -->  "Thi1s is2 3a T4est"
"4of Fo1r pe6ople g3ood th5e the2"  -->  "Fo1r the2 g3ood 4of th5e pe6ople"

👉 @seniorFront

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