This media is not supported in your browser
VIEW IN TELEGRAM
Infinite Portals
Создано и анимировано на canvas с использованием возможностей THREE.js
👉 @seniorFront
Создано и анимировано на canvas с использованием возможностей THREE.js
👉 @seniorFront
👍12🔥6
Что такое SyntheticEvent в React?
Anonymous Quiz
25%
События, генерируемые компонентами React
60%
Абстракции над нативными событиями браузера, предоставленные React
9%
События, вызываемые асинхронными действиями
6%
События, обрабатываемые сторонними библиотеками
👍3❤1🔥1
Media is too big
VIEW IN TELEGRAM
Direction-Aware Text Hover Effects
В этом видео создается анимация при наведении на текст, которая меняется в зависимости от места наведения курсора.
👉 @seniorFront
В этом видео создается анимация при наведении на текст, которая меняется в зависимости от места наведения курсора.
👉 @seniorFront
👍4❤2🔥1
Christmas Trash Party
Вы получите trash1 и trash2, которые могут иметь следующие значения:
Вы должны вернуть булево значение, если они строго равны.
Примечание:
тройное равенство === и строгое неравенство !== не допускаются
Пример:
👉 @seniorFront
Вы получите trash1 и trash2, которые могут иметь следующие значения:
[], false, '', new Array(), null, NaN, undefined, 0, -0, 0n, -0n, '0'.Вы должны вернуть булево значение, если они строго равны.
Примечание:
тройное равенство === и строгое неравенство !== не допускаются
Пример:
compareTrash(0, false) => false compareTrash('', '') => true compareTrash([], 0) => false👉 @seniorFront
👍3🤔2
Не бойтесь бросать свои пет-проекты
В этой статье автор рассказывает о своём недавнем пет-проекте, который он забросил в тот же день, в который запустил.
Выводы, к которым автор пришел:
Вместо того, чтобы подходить к своему первому проекту чисто из амбициозных соображений или чтобы впечатлить работодателя, взгляните на него в первую очередь как на способ изучить новые возможности. Как только вы наберётесь достаточно опыта (то есть заброшенных пет-проектов), остальное придёт само. Личные проекты должны быть креативными и интересными. Если вы заметите, что вас начинает беспокоить срок готовности вашего начинания или, хуже того, если вы из-за него начнёте выгорать, то не мешкая бросайте. Велика вероятность, что при внимательном рассмотрении вы заметите немало ценности, которую он вам уже принёс.
👉 @seniorFront
В этой статье автор рассказывает о своём недавнем пет-проекте, который он забросил в тот же день, в который запустил.
Выводы, к которым автор пришел:
Вместо того, чтобы подходить к своему первому проекту чисто из амбициозных соображений или чтобы впечатлить работодателя, взгляните на него в первую очередь как на способ изучить новые возможности. Как только вы наберётесь достаточно опыта (то есть заброшенных пет-проектов), остальное придёт само. Личные проекты должны быть креативными и интересными. Если вы заметите, что вас начинает беспокоить срок готовности вашего начинания или, хуже того, если вы из-за него начнёте выгорать, то не мешкая бросайте. Велика вероятность, что при внимательном рассмотрении вы заметите немало ценности, которую он вам уже принёс.
👉 @seniorFront
👍11🔥2❤1
Более надёжные кастомные чекбоксы с псевдо-классом focus-within
Каждый верстальщик делал или сделает кастомный чекбокс. Как у любого элемента управления, нам нужно стилизовать состояние focus. Большинство примеров строятся на использовании соседнего родственного комбинатора +.
Есть специалисты, которые нашли недостаток этого способа. По их мнению, часто происходит так, что люди случайно вставляют элемент <input> в другое место. По этой причине селектор перестаёт работать.
Думая над решением этой проблемы, ко мне пришла мысль: «А почему бы не заменить соседнего родственного комбинатора + на псевдо-класс focus-within?». Ведь данный псевдо-класс срабатывает, когда сам элемент или кто-то из его дочерних элементов находится в фокусе. И в случае использования его в нашей задаче, получится так, что позиция элемента <input> неважна.
Заменим фрагмент кода с комбинатором + на псевдо-элемент :focus-within.
Мне кажется, даже код выглядит «красивее». А вы как думаете? Напишите в комментариях.
👉 @seniorFront
Каждый верстальщик делал или сделает кастомный чекбокс. Как у любого элемента управления, нам нужно стилизовать состояние focus. Большинство примеров строятся на использовании соседнего родственного комбинатора +.
<body>
<div class="custom-checkbox">
<input id="cb" type="checkbox" class="custom-checkbox__input">
<label class="custom-checkbox" for="cb">Запомнить данные</label>
</div>
</body>
.custom-checkbox__input:focus + .custom-checkbox__label::before {
outline: 3px solid #222;
}
Есть специалисты, которые нашли недостаток этого способа. По их мнению, часто происходит так, что люди случайно вставляют элемент <input> в другое место. По этой причине селектор перестаёт работать.
Думая над решением этой проблемы, ко мне пришла мысль: «А почему бы не заменить соседнего родственного комбинатора + на псевдо-класс focus-within?». Ведь данный псевдо-класс срабатывает, когда сам элемент или кто-то из его дочерних элементов находится в фокусе. И в случае использования его в нашей задаче, получится так, что позиция элемента <input> неважна.
Заменим фрагмент кода с комбинатором + на псевдо-элемент :focus-within.
.custom-checkbox:focus-within .custom-checkbox__label::before {
outline: 3px solid #222;
}
Мне кажется, даже код выглядит «красивее». А вы как думаете? Напишите в комментариях.
👉 @seniorFront
👍16❤2
Неразрешимые проблемы программирования
Статья эта вызревала давно. Название у неё, конечно, провокационное, потому что да, я буду писать про неразрешимые вопросы, но это будут не те вопросы, про которые вы подумали.
Собеседования
Мы сейчас ограничимся программистской спецификой. Понятно, что у рекрутеров, тимлидов и HR-менеджеров свои трудности с соискателями. Вольётся ли человек в коллектив? Это не наша забота. Наша забота — за час времени определить технический уровень кандидата.
Сейчас общепризнанно, что нестандартные задачки для этого не сильно подходят: когда-то их давали в Microsoft, но потом перестали. Иногда их дают в других компаниях. Мы научились более-менее отвечать на вопросы, почему люки круглые, или сколько заправок в Нью-Йорке, но, похоже, они не помогают работодателю оценить программиста.
Потому что на работе — обычно — нам не приходится решать нестандартные задачи. Нам не приходится решать олимпиадные задачи. И что мы оцениваем, задавая вопрос про люки — не известно никому.
Онбординг
Это адаптация сотрудника, только что вышедшего на работу. Вам должны рассказать, где здесь гардероб, туалет и столовая, как зовут соседей слева и справа, как подключиться к корпоративной почте и каковы ценности компании.
С этим обычно никаких проблем не возникает.
Затем вам дают проект — из тех, что мы называем legacy. Триста человеко-лет — десять лет и тридцать программистов. Часть из них сидит сейчас рядом с вами, но другая часть давно уволилась. Ваша задача — разобраться в проекте как можно быстрее.
Никто не знает. Если проект целиком не знают даже старожилы, то и у вас нет никаких шансов. Возможно, онбординг, как и день сурка, будет длится вечно. К счастью у нас есть четыре волшебных средства, которые помогают нам в адаптации. Комментарии, документация, тесты и помощь коллег.
Код-ревью
Здесь прекрасно всё, даже трудно выбрать, с чего начать. Да, вы и сами всё знаете.
Начнём с главного-очевидного. Почему-то так вышло, что среди программистов много душнил. Мы любим спорить, любим сомневаться даже в очевидном, плюём на авторитеты. И при этом, высказывая своё — безусловно ценное — мнение, редко заботимся о тонкой душевной организации коллег.
Когда нас называют идиотами, мы конечно, возмущаемся. А когда мы называем идиотами — нет.
Код-ревью — неиссякаемый источник напряжения в команде. Программистов надо учить давать конструктивную обратную связь. Но если они не хотят учиться, вы их не заставите.
👉 @seniorFront
Статья эта вызревала давно. Название у неё, конечно, провокационное, потому что да, я буду писать про неразрешимые вопросы, но это будут не те вопросы, про которые вы подумали.
Собеседования
Мы сейчас ограничимся программистской спецификой. Понятно, что у рекрутеров, тимлидов и HR-менеджеров свои трудности с соискателями. Вольётся ли человек в коллектив? Это не наша забота. Наша забота — за час времени определить технический уровень кандидата.
Сейчас общепризнанно, что нестандартные задачки для этого не сильно подходят: когда-то их давали в Microsoft, но потом перестали. Иногда их дают в других компаниях. Мы научились более-менее отвечать на вопросы, почему люки круглые, или сколько заправок в Нью-Йорке, но, похоже, они не помогают работодателю оценить программиста.
Потому что на работе — обычно — нам не приходится решать нестандартные задачи. Нам не приходится решать олимпиадные задачи. И что мы оцениваем, задавая вопрос про люки — не известно никому.
Онбординг
Это адаптация сотрудника, только что вышедшего на работу. Вам должны рассказать, где здесь гардероб, туалет и столовая, как зовут соседей слева и справа, как подключиться к корпоративной почте и каковы ценности компании.
С этим обычно никаких проблем не возникает.
Затем вам дают проект — из тех, что мы называем legacy. Триста человеко-лет — десять лет и тридцать программистов. Часть из них сидит сейчас рядом с вами, но другая часть давно уволилась. Ваша задача — разобраться в проекте как можно быстрее.
Никто не знает. Если проект целиком не знают даже старожилы, то и у вас нет никаких шансов. Возможно, онбординг, как и день сурка, будет длится вечно. К счастью у нас есть четыре волшебных средства, которые помогают нам в адаптации. Комментарии, документация, тесты и помощь коллег.
Код-ревью
Здесь прекрасно всё, даже трудно выбрать, с чего начать. Да, вы и сами всё знаете.
Начнём с главного-очевидного. Почему-то так вышло, что среди программистов много душнил. Мы любим спорить, любим сомневаться даже в очевидном, плюём на авторитеты. И при этом, высказывая своё — безусловно ценное — мнение, редко заботимся о тонкой душевной организации коллег.
Когда нас называют идиотами, мы конечно, возмущаемся. А когда мы называем идиотами — нет.
Код-ревью — неиссякаемый источник напряжения в команде. Программистов надо учить давать конструктивную обратную связь. Но если они не хотят учиться, вы их не заставите.
👉 @seniorFront
👍5❤1
Хороший парень, плохой код: доброта дороже денег?
Сегодня о тимлидском-наболевшем. Вот представьте, образовалась перед вами дилемма: есть в команде специалист, который по человеческим качествам — просто душка, но его скорость и качество работы вызывают желание спрятаться под стол и тихонько поплакать. Как быть?
Робин Гуд наоборот
Представьте, что вы — суперпонимающий, эмпатичный тимлид. У вас возникает соблазн оставить этого неэффективного разработчика просто потому, что он хороший человек. Но вот в чем загвоздка: по сути, вы будете платить ему из денег, заработанных его коллегами, теми, кто действительно выкладывается, фигачит овертаймы и вносит свой вклад в успех проекта. Такой вот странный сценарий Робина Гуда, только он отбирает у работящих, чтобы отдать... ну, не очень работящим.
Прежде чем принимать радикальные решения, важно пригласить разработчика на откровенный разговор. Обсудите причины его неэффективности и попытайтесь найти пути решения проблемы вместе.
Если же это не помогло, вариантов два:
Рефакторинг. Скорректировать зарплату разработчика в соответствии с его реальным вкладом. Это может показаться жестким, но это способ сохранить справедливость и обеспечить всем соответствующее вознаграждение.
Исключение. Оно же — увольнение. Возможно, это наилучший выход как для компании, так и для самого сотрудника. Он сможет найти работу, которая лучше соответствует его навыкам, а команда — повысить свою эффективность.
Впрочем, бывают и ситуации, когда такой неэффективный сотрудник может оказаться "душой команды" – тем, кто создает позитивную атмосферу, поддерживает коллег, помогает разрешать конфликты и просто поднимает всем настроение. В таких случаях его вклад выходит за рамки выполнения задач и оказывает положительное влияние на общий психологический климат и продуктивность.
👉 @seniorFront
Сегодня о тимлидском-наболевшем. Вот представьте, образовалась перед вами дилемма: есть в команде специалист, который по человеческим качествам — просто душка, но его скорость и качество работы вызывают желание спрятаться под стол и тихонько поплакать. Как быть?
Робин Гуд наоборот
Представьте, что вы — суперпонимающий, эмпатичный тимлид. У вас возникает соблазн оставить этого неэффективного разработчика просто потому, что он хороший человек. Но вот в чем загвоздка: по сути, вы будете платить ему из денег, заработанных его коллегами, теми, кто действительно выкладывается, фигачит овертаймы и вносит свой вклад в успех проекта. Такой вот странный сценарий Робина Гуда, только он отбирает у работящих, чтобы отдать... ну, не очень работящим.
Прежде чем принимать радикальные решения, важно пригласить разработчика на откровенный разговор. Обсудите причины его неэффективности и попытайтесь найти пути решения проблемы вместе.
Если же это не помогло, вариантов два:
Рефакторинг. Скорректировать зарплату разработчика в соответствии с его реальным вкладом. Это может показаться жестким, но это способ сохранить справедливость и обеспечить всем соответствующее вознаграждение.
Исключение. Оно же — увольнение. Возможно, это наилучший выход как для компании, так и для самого сотрудника. Он сможет найти работу, которая лучше соответствует его навыкам, а команда — повысить свою эффективность.
Впрочем, бывают и ситуации, когда такой неэффективный сотрудник может оказаться "душой команды" – тем, кто создает позитивную атмосферу, поддерживает коллег, помогает разрешать конфликты и просто поднимает всем настроение. В таких случаях его вклад выходит за рамки выполнения задач и оказывает положительное влияние на общий психологический климат и продуктивность.
👉 @seniorFront
👍15
This media is not supported in your browser
VIEW IN TELEGRAM
Squidematics
Реализовано на canvas и JS без использования библиотек для создания анимаций.
👉 @seniorFront
Реализовано на canvas и JS без использования библиотек для создания анимаций.
👉 @seniorFront
🔥15👍3
Media is too big
VIEW IN TELEGRAM
Awesome Cursor Animation on Mousemove
В этом видео создаётся анимация при движении курсора. В JS генерируются элементы, каждому из которых задаётся случайная траектория движения.
👉 @seniorFront
В этом видео создаётся анимация при движении курсора. В JS генерируются элементы, каждому из которых задаётся случайная траектория движения.
👉 @seniorFront
👍6🔥4❤2
Media is too big
VIEW IN TELEGRAM
Full Page Scroll Progress Indicator
В этом видео создаётся индикатор прокрутки страницы на CSS и JS.
👉 @seniorFront
В этом видео создаётся индикатор прокрутки страницы на CSS и JS.
👉 @seniorFront
❤7👍1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Starry Campsite
Вся сцена реализована с использованием возможностей препроцессоров Pug и SCSS.
👉 @seniorFront
Вся сцена реализована с использованием возможностей препроцессоров Pug и SCSS.
👉 @seniorFront
🔥7👍1
Currying functions: multiply all elements in an array
Необходимо создать функцию multiplyAll, которая принимает в качестве аргумента массив целых чисел. Эта функция должна возвращать другую функцию, которая принимает в качестве аргумента одно целое число и возвращает новый массив.
Возвращаемый массив должен состоять из каждого элемента первого массива, умноженного на целое число.
Вы не должны изменять исходный массив.
Пример:
👉 @seniorFront
Необходимо создать функцию multiplyAll, которая принимает в качестве аргумента массив целых чисел. Эта функция должна возвращать другую функцию, которая принимает в качестве аргумента одно целое число и возвращает новый массив.
Возвращаемый массив должен состоять из каждого элемента первого массива, умноженного на целое число.
Вы не должны изменять исходный массив.
Пример:
multiplyAll([1, 2, 3])(2) = [2, 4, 6];👉 @seniorFront
👎8