Senior Frontend - javascript, html, css

2023-07-20 19:03:00 GSAP Rolodex Menu

Создано при помощи библиотеки gsap и плагинов Draggable и InertialPlugin.

@seniorFront Открыть/Комментировать

2023-07-20 12:05:03 @seniorFront Открыть/Комментировать

2023-07-19 20:03:03 Animation Effects

В этом видео создаются CSS анимации градиентного фона и зеркальное отражение при помощи CSS свойства -webkit-box-reflect.

@seniorFront Открыть/Комментировать

2023-07-19 14:00:04 CSS vertical carousel animation

Создано при помощи препроцессоров Haml и SCSS.

@seniorFront Открыть/Комментировать

2023-07-18 19:02:01 Night Drive

Создано на JS с использованием обширных возможностей библиотеки THREE.js

@seniorFront Открыть/Комментировать

2023-07-18 12:06:02 Почему многие программисты не развиваются?

Недавний пост про чтение книг был некоторыми воспринят очень буквально. Очевидно теми, кто его не прочитал (хотя он совсем короткий). Разберем некоторые возражения.

1. “Нет даже корреляции между кол-вом прочитанного и зарплатой”
Это говорят люди, которые, вероятно, все в жизни делают ради денег. Но даже в этом случае заявление неверное. Мы отталкиваемся от того, что человек понимает прочитанное и старается это использовать в работе. В любой уважающей себя компании таких людей замечают и стараются удержать, повышая зарплату. У меня нет результатов исследований на тему корреляции знаний/навыков и зарплаты, но я думаю что она существенна.

2. “Чтение ради чтения это глупость“
Такой же аргументацией можно ударить по чему угодно. Бег ради бега? Сон ради сна? Брокколи ради брокколи? Я с трудом могу себе представить человека, который читает книги только ради чтения книг. Конечно же читают ради получения новых знаний, ради эмоций, ради лучшего понимания мира вокруг нас.

3. “Советовать всем “инженерам” одно и тоже очень глупо.”
Замените чтение “постоянным развитием”. Почему многие программисты не развиваются? Невозможно развиваться, все время участвуя в похожих проектах, решая похожие задачи и не делая попыток добиться глубокого понимания используемых технологий. Для многих это, видимо, ОК. Но ребята, жизнь идет, а вы стоите на месте. Я призываю проснуться утром и подумать об этом. Хотя бы раз. Глубоко.

Развитие — это же очень интересно, это такой постоянный hard fun. У меня есть список советов (которые все воспринимают как нравоучения и все равно не слушают):
- В следующий раз, стартуя node.js, попробуйте разобраться как устроен V8
- Имплементируя новую юзер стори, попробуйте понять, зачем она клиенту на самом деле?
- Открывая в браузере онлайнер, задумайтесь, как работает HTTPS
- В очередной раз ошибившись в оценке задачи, подумайте, почему это произошло?
- Ответьте сами себе на вопрос, на сколько вы знаете Java по десятибальной системе? Почему не на 9?
- Используя singleton, вы точно подумали о тестировании вашего когда?
- Вы когда-то проектировали API системы?
- Вы когда-то пробовали решить проблему средствами ФП? Если нет, то почему?

@seniorFront Открыть/Комментировать

2023-07-17 19:07:02 Star Button

Анимация мигания звёзд реализована в SCSS, а сложная анимация кнопки создана при помощи библиотеки gsap.

@seniorFront Открыть/Комментировать

2023-07-17 13:17:03 ​Создание массива из большого количества повторяющихся элементов

Есть несколько разных способов для создания массива с котиками.

Допустим, нам нужно завести котиков в 100 комнат, по одному на комнату, как это сделать? Можно выделить место (память) для котиков, а потом заселить туда котиков:
Array(100).fill(" ") // Чуть более функциональный стиль

Также мы можем выделить 100 комнат, а потом пройти в каждую и руками туда посадить кота. Массив можно создать с помощью деструктуризации [...].
[...Array(100)].map(() => " ")

Также можно создать массив с помощью функции Array.from, указав способ обработки каждого элемента.
Array.from(Array(100), () => " ")

В Array.from также можно передать array-like структуру данных, для этого нам нужно передать поле length.
Array.from({ length: 100}, () => ' ')

Можно создать пустой массив, создать цикл и поселить в каждую комнату по её индексу по коту.
const arr = []
for(let i=0; i<100;i++){
arr[i] = " " // Чуть более императивный стиль
}

Также можно пушить элементы в конец массива, это будет работать быстрее на большом количестве элементов.
const arr = []
for(let i=0; i<100;i++){
arr.push(" ")
}

@seniorFront Открыть/Комментировать

2023-07-16 19:07:04 Pure horizontal slider with sliding menu

Вёрстка реализована на HTML и SCSS. Логика раскрытия меню и карточек реализована в JS.

@seniorFront Открыть/Комментировать

2023-07-06 13:30:05 @seniorFront Открыть/Комментировать