Our Services Section Card

В этом видео создаются карточки с оригинальным эффектом при наведении на HTML и CSS.

👉 @seniorFront

Вот что бывает, когда родители работают на удаленке

👉 @seniorFront

Gooey SVG Filter Button

Оригинальная кнопка, анимированная в CSS. Параметры анимации зависят от положения курсора и изменяются в JS по событию 'pointermove'.

👉 @seniorFront

EC card hover

Несколько карточек, стилизованных и анимированных в HTML и CSS.

👉 @seniorFront

CSS Custom Smiley Checkbox Design

В этом видео создаётся анимированный переключатель на HTML и CSS.

👉 @seniorFront

Multiple Glow effects Button

Подборка CSS анимаций для кнопки, которые переключаются при помощи радио кнопок.

👉 @seniorFront

My Language Skills

Вам дан объект, содержащий результаты теста по языкам. Верните массив языков, для которых результат теста больше 60 в убывающем порядке.

Примеры:

{"Java": 10, "Ruby": 80, "Python": 65}
// ["Ruby", "Python"]

{"Hindi": 60, "Dutch" : 93, "Greek": 71}
// ["Dutch", "Greek", "Hindi"]

{"C++": 50, "ASM": 10, "Haskell": 20}
// []

👉 @seniorFront

Понятно про браузер: критические этапы рендеринга, аппаратное ускорение и оптимизации

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

👉 @seniorFront

​Что такое promise и какие состояния у него есть?

Это объект, представляющий завершение (или неудачу) асинхронной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от необходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать.

Состояния:
- Pending (Ожидание): Начальное состояние; асинхронная операция не завершена.
- Fulfilled (Исполнено): Операция завершена успешно, и promise возвращает результат.
- Rejected (Отклонено): Операция завершена с ошибкой, и promise возвращает причину отказа.

Пример:

let promise = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

promise.then(
    function(result) { console.log(result); }, // обработчик успеха
    function(error) { console.log(error); } // обработчик ошибки
);

Promise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций.

👉 @seniorFront

Animated Card Flip

Карточки свёрстаны при помощи препроцессоров Pug и Less. Логика раскрытия карточки реализована в JS.

👉 @seniorFront

​Бумажные книги по программированию — удобный инструмент или пережиток прошлого?

Низкое качество перевода
Почти в любой современной книге есть очевидные неточности перевода, опечатки. Иногда встречаются и откровенные грубые ошибки. Причём большинство таких ошибок мог бы найти и исправить опытный редактор при первом внимательном прочтении текста. Но складывается впечатление, что некоторые современные книги по программированию (да и по другим темам) никто толком не вычитывает и не проверяет перед отправкой текста в печать.

Халтурное исполнение
Также у меня есть претензии к переплёту. Недавно одна из книг в мягкой обложке распалась на отдельные страницы после первого же прочтения. Знаете такие переплёты, в которых страницы не сшиты в тетрадки, а склеены каким-то некачественным клеем? Стоит открыть такую книгу, и страницы начинают подозрительно скользить и через некоторое время вообще вываливаются из переплёта. В результате читатель получает вместо книги стопку отдельных листов. А ведь тот же Фигурнов, изданный в непростые 90-е, держался много лет.

Быстрое устаревание
Это, конечно, проблема не самих книг, а описываемых в них объектов. Уж слишком быстро они сейчас устаревают. Если раньше справочник по командам какого-нибудь MS DOS был актуален много лет, то теперь описание очередного модного фреймворка устаревает почти сразу после выхода. Поэтому сейчас я стараюсь покупать только такие книги, в которых описаны фундаментальные вещи. Например, алгоритмы, принципы и методики разработки. Такие книги не устареют ещё долгое время и не будут бесполезно занимать место и собирать пыль в книжном шкафу.

Массивность
Мне нравится читать книги не только за столом. Хочется иметь возможность полистать интересное издание и в кресле, и на балконе, и в дороге, и на скамейке в парке. Часть мои книг по программированию для этого не предназначены в принципе. Они весят больше, чем мой ноутбук. Такие увесистые фолианты долго одной рукой не подержишь, в рюкзаке с собой не потаскаешь.

Сложность поиска
Книги по программированию — это хороший источник теоретических знаний. Можно почитать какую-нибудь главу, чтобы как следует изучить новую синтаксическую конструкцию языка. Но вот для чего они совершенно не предназначены, так это для поиска ответа на конкретный практический вопрос.
Это касается даже тех книг, которые, в общем-то, для этого и предназначены. Например, всякие «книги рецептов», «сборники паттернов». Сначала мы судорожно листаем страницы в поисках нужного раздела. Потом пытаемся вчитаться во фрагменты кода. Как на зло, нам попадается множество примеров, которые не помогают нам в решении задачи. В итоге мы часто так и не находим конкретного ответа на конкретный вопрос, закрываем книгу и идём гуглить.

Мелкотемье
Был такой термин в советские времена. Он очень хорошо подходит для описания ситуации с современной компьютерной литературой. Всё больше становится книг, посвящённых одной мелкой частной теме. На первый взгляд это хорошо, ведь в такой книге тема будет всесторонне раскрыта, будут освещены все вопросы и нюансы. Например, будет подробно описано использование какого-нибудь фреймворка для решения конкретной задачи. Но зададимся вопросом: где он будет через несколько лет? Скорее всего, его заменит другой, не менее прогрессивный фреймворк и по нему будут писать новые книги. Все об этом знают. Возможно, поэтому книги и получаются такими некачественными. Зачем стараться, если книга всё равно скоро устареет. Одноразовые книги для одноразового «пластмассового мира».

Но не всё так плохо. Сейчас продолжают издавать интересные книги по общим, неустаревающим темам. Жаль только, что к этим книгам применяют тот же подход, что и к мелкотемным: «Зачем стараться?»

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

👉 @seniorFront

Неклассическое чтение для руководителей: разборы и гайды по менеджменту, open source, контенту и *random topic*

Хотел бы поделиться материалами о менеджменте в широком контексте. От научных статей, которые помогут понять суть технологий вроде больших языковых моделей, и до книг по менеджменту и практических разборов того, каким может быть контент-маркетинг без рекламы. Получилась компактная и разнообразная подборка.

👉 @seniorFront

bouton envoyer

Оригинальная кнопка - SVG картинка, анимированная библиотекой gsap.

👉 @seniorFront

Next Level Lightsaber

В этом видео создаётся анимация появления текста на чистом CSS. Неоновый эффект реализован при помощи теней.

👉 @seniorFront

Объяснил джуну архитектуру проекта

👉 @seniorFront

Fractal Lightning

Реализовано и анимировано на canvas и чистом JS.

👉 @seniorFront

Services section

Свёрстано на HTML и стилизовано при помощи tailwind. Эффект при наведении реализован в SCSS.

👉 @seniorFront

Spotlight Effect

В этом видео создается эффект подсветки курсора на CSS и JS.

👉 @seniorFront

ThreeJS Toys

Создано и анимировано при помощи библиотеки Three.js

👉 @seniorFront