Revealing Slider

Реализовано на HTML и SCSS. Анимация переключения создана при помощи CSS clip-path.

👉 @seniorFront

Neon Clock

Оригинальные часы, логика работы которых реализована в JS. Свёрстано на HTML и SCSS.

👉 @seniorFront

Awesome Magic Indicator

Логика перемещения маркера реализована в JS. Стилизовано в CSS.

👉 @seniorFront

Fullscreen drag-slider with parallax

Оригинальный слайдер, логика работы которого реализована в JS. Стилизовано в SCSS.

👉 @seniorFront

What's in a name?

Создайте функцию, принимающую в качестве параметра две строки и проверяющую, содержит ли первая строка все буквы второй строки по порядку.
В этом случае функция должна возвращать true, а в противном случае — false. Сравнение букв должно быть чувствительным к регистру.

Примеры:
"Across the rivers", "chris" --> true
^ ^ ^^ ^
c h ri s

Contains all of the letters in "chris", in order.
----------------------------------------------------------
"Next to a lake", "chris" --> false

Contains none of the letters in "chris".
--------------------------------------------------------------------
"Under a sea", "chris" --> false
^ ^
r s

Contains only some of the letters in "chris".

👉 @seniorFront

Нужна ли айтишнику вышка?

Куда отдать абитуриента, чтобы вырос программистом? Можно ли совмещать ли работу с учебой и когда начинать? Получать ли второе высшее, если недавно устроился в IT и хочешь выучить недостающую базу?

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

👉 @seniorFront

Глобальные ключевые слова в CSS

Для всех свойств CSS, помимо их стандартных значений, можно задать значения в виде ключевых слов:

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

inherit
CSS-свойства делятся на наследуемые и ненаследуемые.
Значения наследуемых свойств применяются не только к элементу, для которого прописаны, но и для всех вложенных дочерних элементов. Это очень удобно, чтобы не писать много одинаковых свойств для разных селекторов, перечисляя всех потомков.

unset
Это ключевое слово ведёт себя по-разному с наследуемыми и ненаследуемыми свойствами:
- С наследуемыми свойствами ключевое слово unset ведёт себя как inherit.
- С ненаследуемыми свойствами оно ведёт себя как initial.

revert
Это ключевое слово сбрасывает значение свойства до указанного в стилях браузера.

CSS 3D Bending Effect - Page Flip

Создано на чистом CSS с использованием возможностей препроцессора Haml.

👉 @seniorFront

​Как очистить карму своему коду?

Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!

В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?

Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.

Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.

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

👉 @seniorFront

Prompt engineering — путь к эффективной работе с ChatGPT

В этой статье рассказывается о том, как эффективно работать с ChatGPT в разных задачах и архитектуре. Многие пробовали, но не у всех получилось. Статья написана по мотивам доклада для конференции Highload.

Какие темы обсуждаются:
- Поговорим о GPT;
- Разберёмся, зачем нужны промпты;
- Рассмотрим фреймворки для создания промптов;
- Создадим ассистента архитектора.

👉 @seniorFront

Tab bar active animation

Создано на HTML и SCSS. В JS реализована логика переключения классов при нажатии на элемент меню.

👉 @seniorFront

В ПСБ Цифровая лаборатория есть программа, по которой платят 100 000 руб. за рекомендацию в ИТ.

Деньги придут, как только рекомендованный вами сотрудник пройдет испытательный срок.На какой стек и с каким опытом ищем ИТ-специалистов — смотреть тут.

Проектов много. Работа стабильная, зарплата приличная.

Реклама. ООО "ПСБ ЛАБ". ИНН 7714436892.

Infinite Page Scrolling

В этом видео создается страница с подгрузкой данных при прокрутке на чистом JS.

👉 @seniorFront

Турецкий продавец мороженного покоряет фронтенд

👉 @seniorFront

Shattered popup

При нажатии частицы генерируются в JS и затем анимируются в SCSS.

👉 @seniorFront

CSS / SVG Blobby Background

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

👉 @seniorFront