​Техники обучения, которые вошли в мою рутину

Как и любому программисту, мне приходится учить большие объемы материала с целью повышения квалификации или прохождения интервью. Здесь я опишу способы, которые я использую для упорядочивания и запоминания материала.

Оглавление
Для меня все начинается с составления плана обучения. Это просто список тем, которые я хочу изучить. Он позволяет мне оценить время, требуемое для изучения; отсортировать темы; приоритизировать их; увидеть зависимости между ними.

Подготовка
На день для изучения выбираю две темы. Обычно я стараюсь перемежать теорию с более практической задачей. Это позволяет мне отдохнуть от теории и переключиться. Я беру именно несколько тем для изучения и когда осознаю, что поняла материал, переключаюсь на другую тему. Я не пытаюсь сразу выучить всё, чтоб "от зубов отскакивало", для этого нужно время, чтобы материал уложился в голове. Главная идея откладывания в том, чтобы дать это время.

Чтение и конспект
Во время чтения я подчеркиваю или выписываю ключевые слова. Я не выделяю определения, чтобы не превращать текст в цветное полотно. Также я переписываю основные идеи, определения, алгоритмы. Для этого я использую приложение Anki. В приложении можно создавать карточки, плагины позволяют делать ссылки на другие карточки

Майнд-мап
Если в анки я храню подробные конспекты, то для быстрой ориентации по материалу я использую майнд-мапы. Манд-мапа - это схема, в которой в центре выписывается основное понятие и от него расходятся линии к другим связанным понятиям. Для составления манд-мапы понадобится список ключевых слов, который был сделан во время чтения.

Повторение
Для повторения я не нашла ничего лучше, чем классическое интервальное повторение - сначала вечером, затем на следующий день, через 3 дня и через неделю. В дальнейшем стараюсь повторять раз в несколько месяцев. Для повторения я использую майнд-мапы. Мне проще отмечать дату в уголке на майнд-мапе.

👉 @seniorFront

You have mail!

Реализовано при помощи псевдо-3Д движка Zdog.js

👉 @seniorFront

Animated Slider

Слайдер реализован при помощи библиотеки Swiper.js. Анимированные частицы созданы библиотекой Particles.js

👉 @seniorFront

CSS Transforming Circle Loader

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

👉 @seniorFront

👉 @seniorFront

CSS Scroll-Driven Glow Cards

Анимация реализована при помощи gsap. Запуск осуществляется плагином ScrollTrigger.

👉 @seniorFront

Animated Card

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

👉 @seniorFront

Javascript Scroll Animation

В этом видео создаётся анимация, которая активируется при скроле. Для этого создаётся обработчик события scroll, в котором изменяется значение CSS свойства clip-path целевого элемента

👉 @seniorFront

Encrypted Password Reveal

Вёрстка реализована на HTML и CSS. Анимировано библиотекой gsap.

👉 @seniorFront

RGB → Hex

Необходимо написать функцию, которая принимает десятичные значения RGB кода цвета и возвращает этот код цвета в формате HEX. Допустимыми десятичными значениями RGB являются 0-255. Любые значения, которые выходят за этот диапазон, должны быть округлены до ближайшего допустимого значения.
Обратите внимание: ваш ответ должен быть всегда 6 символов длиной, сокращенный вариант с 3 символами здесь не будет работать.

Примеры:
rgb(255, 255, 255) должна возвращать FFFFFF
rgb(255, 255, 300) должна возвращать FFFFFF
rgb(0, 0, 0) должна возвращать 000000
rgb(148, 0, 211) должна возвращать 9400D3

👉 @seniorFront

SVG Calculator Dial

Вся сцена - это svg картинка, стилизованная в SCSS и анимированная библиотекой gsap.

👉 @seniorFront

​Как определить наличие свойства в объекте?

В JavaScript есть несколько способов определить наличие свойства в объекте.

Оператор in: Можно использовать оператор in, чтобы проверить наличие свойства в объекте или его прототипе.

 const obj = { name: 'John', age: 30 };
 console.log('name' in obj); // true
 console.log('city' in obj); // false

Метод hasOwnProperty(): Метод hasOwnProperty() проверяет, содержит ли объект указанное свойство и не учитывает свойства в прототипе объекта.

 const obj = { name: 'John', age: 30 };
 console.log(obj.hasOwnProperty('name')); // true
 console.log(obj.hasOwnProperty('city')); // false

Сравнение со значением undefined: Можно сравнить значение свойства с undefined, чтобы определить его наличие.

 const obj = { name: 'John', age: 30 };
 console.log(obj.name !== undefined); // true
 console.log(obj.city !== undefined); // false

Использование Object.keys(): Можно использовать метод Object.keys() для получения массива всех свойств объекта и затем проверить наличие свойства в этом массиве.
const obj = { name: 'John', age: 30 };
console.log(Object.keys(obj).includes('name')); // true
console.log(Object.keys(obj).includes('city')); // false

👉 @seniorFront

Процесс заказной разработки можно унифицировать так, что качество продукта не пострадает, а developer experience улучшится. Об этом в своей статье пишет Тимофей Устьянцев 一 фронт-тимлид крупного веб-продакшена ДАЛЕЕ. Тимофей уже несколько лет работает над проектами Kaspersky, X5, IQOS и СБЕР, и теперь делится опытом в цикле статей.

Читайте первую статью на Хабре и переходите на канал ДАЛЕЕ 一 там посты с полезными приемами и инструментами для специалистов диджитала, советы по карьерному развитию и свежие вакансии каждый понедельник 🤟

Реклама. Erid LjN8KEPBB

Infinitely drawing icons

Вся сцена - это svg картинка, анимируемая библиотекой anime.js

👉 @seniorFront

​Что делает фронтенд-разработку интересным и сложным процессом, требующим постоянного обучения и развития?

Рост технологий. С каждым годом появляется всё больше новых технологий, фреймворков, библиотек и инструментов для разработки фронтенда. Это создаёт огромное разнообразие выбора, но и требует от разработчиков постоянного изучения и адаптации к новым решениям.

Развитие веб-стандартов. Стандарты веб-разработки тоже постоянно совершенствуются, чтобы обеспечить более безопасные, производительные и доступные веб-приложения. Следование этим стандартам становится обязательным, что повышает сложность в разработке.

Мобильные устройства и адаптивный дизайн. С появлением мобильных устройств стало важным создавать фронтенд, который отлично работает на различных экранах. Адаптивный дизайн и мобильная оптимизация требуют дополнительных усилий и знаний.

Комплексность приложений. Современные веб-приложения становятся всё сложнее и масштабнее. Они должны обеспечивать богатый пользовательский опыт (UX — user experience), взаимодействие с сервером, обработку данных и множество других функций, что требует более сложных архитектурных решений.

Кроссбраузерность. Разные браузеры могут по-разному интерпретировать и поддерживать стандарты, что создаёт дополнительные сложности в обеспечении единообразного отображения и функциональности приложения в разных браузерах.

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

👉 @seniorFront

React Glow Cards – Minimal

Реализовано на React. Кастомный хук usePointerGlow отслеживает положение курсора пользователя и устанавливает значения CSS переменным.

👉 @seniorFront

Bouncy Balloon

Создано и анимировано библиотекой THREE.js

👉 @seniorFront

Simple Scroll Animation

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

👉 @seniorFront

👉 @seniorFront

All-but-me query

Создано с использованием CSS селектора :has()

👉 @seniorFront