Scroll with light (CSS only)

Создано без использования JS. Задействуется свойство animation-timeline со значением scroll().

👉 @seniorFront

Falling Stars

Элементы генерируются в JS и анимируются в CSS.

👉 @seniorFront

Interactive Form

Форма реализована на HTML и SCSS.

👉 @seniorFront

Получите средний символ

Вам будет дано слово. Ваша задача - вернуть средний символ слова. Если длина слова нечетная, верните средний символ. Если длина слова четная, верните 2 средних символа.

Пример:
getMiddle("testing") = "t"

👉 @seniorFront

Hover slider (dark/light)

Кастомный курсор и логика переключения тем реализованы в JS.

👉 @seniorFront

В чем разница между контролируемыми и неконтролируемыми компонентами в React?

Разница между контролируемыми (управляемыми) и неконтролируемыми компонентами заключается в том, как они управляют своим состоянием и обновляют его.
Управляемые компоненты — это компоненты, состояние которых контролируется React. Компонент получает свое текущее значение и обновляет его через входные параметры. Он также запускает функцию обратного вызова при изменении значения. Это означает, что компонент не хранит собственное внутреннее состояние. Вместо этого родительский компонент управляет и передает значение управляемому компоненту.

 import { useState } from 'react'; 

 function App() { 
   const [value, setValue] = useState(''); 

   return ( 
     <div> 
       <h3>Controlled Component</h3> 
       <input name="name" value={name} onChange={(e) => setValue(e.target.value)} />
       <button onClick={() => console.log(value)}>Get Value</button> 
     </div> 
   ); 
 }

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

import { useRef } from 'react';

function App() {
const inputRef = useRef(null);

return (
<div className="App">
<h3>Uncontrolled Component</h3>
<input type="text" name="name" ref={inputRef} />
<button onClick={() => console.log(inputRef.current.value)}>Get Value</button>
</div>
);
}

👉 @seniorFront

Electric strings

Создано на canvas и чистом JS.

👉 @seniorFront

​ИИ против всех: когда и почему мы стали бояться алгоритмов (и что с этим делать)

О том, что бездушные алгоритмы рано или поздно лишат работы всех (или почти всех) написано немало статей — от новостей с громкими заголовками до аналитических отчетов.

Почему алгоритмы сейчас недолюбливают
Сейчас алгоритмы прочно входят в нашу жизнь, и многие начали воспринимать их как угрозу. Одна из причин тому — страх остаться профессионально невостребованным. Постоянным рефреном к достижениям в сфере ИИ идет список должностей, которые в ближайшем будущем заменит искусственный интеллект. McKinsey еще в 2017 году давала «оптимистичный» прогноз: к 2030 году автоматизация позволит сократить до 800 миллионов рабочих мест. Другие консалтинговые фирмы в своих отчетах напирают на то, что автоматизация затронет не только «синих воротничков», а также, к примеру, юристов и менеджеров среднего звена.
В таких условиях и под градом кликбейт-новостей в стиле «ИИ вместо бухгалтера/тестировщика/дизайнера: какие профессии уйдут в 2024 году» сложно сохранять оптимизм по поводу технологий.

Что-то здесь не так
Итак, социологи вполне однозначны: народ недолюбливает ИИ. Но что понимают сами опрашиваемые под «искусственным интеллектом»? На этот вопрос у ученых тоже есть ответ, и он неутешительный. В исследовании 2019 года, которое провели специалисты из Кембриджа, выяснилось, что четверть респондентов не может дать «удовлетворительного» описания ИИ-системы.
Участники разнообразных опросов не всегда верно оценивают проникновение технологий в жизнь и их реальные возможности и ограничения. При этом сам термин «искусственный интеллект» остается для них размытым и насыщенным смыслами, почерпнутыми из кино и художественной литературы.

Как жить дальше в мире с алгоритмами
Можно прислушаться к мнению Кена Голдберга (Ken Goldberg), профессора Калифорнийского Университета и CEO Ambidextrous Robotics — одного из тех представителей ИТ-сообщества, кто не разделяет страхов перед грядущей сингулярностью. По его словам, главные преимущества современных машин (в широком смысле этого слова): умение распознавать паттерны в больших объемах данных, точность вычислений и способность не терять бдительность. Все это хорошо подходит, к примеру, для разработки систем видеонаблюдения. Тем не менее, на текущем этапе машинам чрезвычайно плохо удается принимать адекватные решения в сложных ситуациях, ловко оперировать новыми материалами и объектами: «Я убежден, что в этом смысле ничего принципиально не изменится как минимум в ближайшие 20, а то и 50 и 100 лет». Те, кто не разделяет всеобщей ИИ-паники, убеждены: вряд ли нейросети заменят собой людей, новые системы просто изменят подход к работе.

👉 @seniorFront

Год не станет новым, если все оставить по старому

(Джейсон Стэтхем)

Поэтому самое время получить профессию мечты, тем более с новогодней скидкой в 60%

Python-разработчик - 3784р
Веб-разработчик - 4696р
PHP разработчик - 3797р
Fullstack разработчик - 3604р

Выбирай себе подарок на новый год! 🎄🔥

Canva's Magic Mouse Effect

Частицы генерируются в JS и анимируются в CSS.

👉 @seniorFront

Playful

При нажатии кнопки изменяется CSS свойство transform. Плавность достигается заданием CSS transition.

👉 @seniorFront

CSS Transforming Loader

В этом видео создаётся простой анимированный loader на HTML и CSS.

👉 @seniorFront

👉 @seniorFront

Custom Accessible Emoji Slider

Создано на Vue, стилизовано в SCSS.

👉 @seniorFront

Hologram effect Button 3D Icon

Создано без использования JS, при помощи возможностей препроцессоров Pug и SCSS.

👉 @seniorFront

👉 @seniorFront

Animated Login Page

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

👉 @seniorFront

Hover Effect

Оригинальные анимированные карточки на HTML и CSS.

👉 @seniorFront

Persistent Bugger

Напишите функцию persistence, которая принимает положительный параметр num и возвращает его мультипликативную стойкость, то есть количество раз, которое нужно перемножить цифры в num, пока не получится одна цифра.

Пример:
39 --> 3
(because 3*9 = 27, 2*7 = 14, 1*4 = 4 )

999 --> 4
(because 9*9*9 = 729, 7*2*9 = 126, 1*2*6 = 12, 1*2 = 2)

👉 @seniorFront