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

Timed Cards Opening

Свёрстано на HTML и SCSS. Анимировано при помощи библиотеки gsap.

👉 @seniorFront

​Какие архитектурные решения для React вы знаете?

Существует несколько архитектурных решений и паттернов для построения React-проектов. Вот некоторые из них:
MVC (Model-View-Controller) — это традиционный архитектурный шаблон, который разделяет приложение на три основных компонента — модель, представление и контроллер. React можно использовать на уровне View для рендеринга пользовательского интерфейса, в то время как другие библиотеки или фреймворки могут быть использованы для уровней Model и Controller.

Flux — это архитектура приложений, представленная специально для приложений React. Он следует однонаправленному потоку данных, в котором данные передаются в одном направлении, что упрощает понимание и отладку изменений состояния приложения.

Atomic Design — не является специфичным для React, а представляет собой методологию проектирования, которая делит пользовательский интерфейс на более мелкие, многократно используемые компоненты. Он поощряет создание небольших, самодостаточных компонентов, которые могут быть скомпонованы для создания более сложных пользовательских интерфейсов.

Шаблон контейнера и компонента — отделяет представление (Component) от логики и управления состоянием (Container). Компоненты отвечают за рендеринг пользовательского интерфейса, в то время как контейнеры обрабатывают бизнес-логику и управление состоянием.

Feature-Sliced Design — Это современный архитектурный подход, используемый для организации и структурирования приложений React. Он направлен на решение проблем масштабируемости, удобства обслуживания и повторного использования путем разделения кодовой базы приложения на основе функций или модулей.

👉 @seniorFront

Image slider ripple effect

Создано и анимировано при помощи TweenMax.

👉 @seniorFront