Magnetic Link Hover Effect

В этом видео создаётся эффект при наведении на иконку при помощи JS. В зависимости от положения курсора пользователя задается смещение.

👉 @seniorFront


Original post link: t.me/seniorFront/3912
Forwarded and filtered by @smartfeed_bot

​​Как начать карьеру веб-разработчика?

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

Подборка советов, с чего начать изучение веб-разработки, как не забросить в самом начале и какую дополнительную технологию изучить, чтобы легче находить заказы на фрилансе: https://tproger.ru/articles/kak-nachat-kareru-veb-razrabotchika

@tproger_web #начинающим #карьера


Original post link: t.me/tproger_web/4455
Forwarded and filtered by @smartfeed_bot

​​🗣Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

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

Читать...


Original post link: t.me/frontendnoteschannel/3423
Forwarded and filtered by @smartfeed_bot

Elastic Toggle

Создано на чистых HTML и CSS.

👉 @seniorFront


Original post link: t.me/seniorFront/3914
Forwarded and filtered by @smartfeed_bot

​​⚡️Работа с REST API при помощи swagger-typescript-api

В этой статье рассматривается использование спецификации OpenAPI для описания удаленных API, основные элементы структуры OpenAPI контракта, такие как paths, components и servers.

Читать...


Original post link: t.me/frontendnoteschannel/3424
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 6 messages
Today you received: 5 messages
Our filtering prevented you from: 1 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Веб-страница: 1 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

N-th Fibonacci

Напишите функцию, которая при задании числа (n) возвращает n-е число в последовательности Фибоначчи.

Пример:
nthFibo(4) == 2

Потому что 2 - это четвертое число в последовательности Фибоначчи.

Для справки, первые два числа в последовательности Фибоначчи - это 0 и 1, а каждое последующее число - это сумма двух предыдущих.

👉 @seniorFront


Original post link: t.me/seniorFront/3915
Forwarded and filtered by @smartfeed_bot

​​Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано?

В статье рассказали и показали, как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ: https://habr.com/ru/companies/kts/articles/798615/

@tproger_web #дизайн #вёрстка


Original post link: t.me/tproger_web/4456
Forwarded and filtered by @smartfeed_bot

​​🎃Пора переходить на микрофронтенд? Опыт «Инферит Клаудмастер»

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

Читать...


Original post link: t.me/frontendnoteschannel/3426
Forwarded and filtered by @smartfeed_bot

#вопросы_с_собеседований
В чем разница между атрибутами и свойствами?

Атрибут — термин из HTML, а свойство — из JS. Атрибут — значение в HTML-разметке, а свойство принадлежит объекту JavaScript.


Original post link: t.me/senior_front/1921
Forwarded and filtered by @smartfeed_bot

Может рухнуть при первой атаке. Почему компаниям важно прокачивать киберграмотность

Авторы этой статьи провели опрос среди IT-специалистов, сотрудников ИБ, топ-менеджеров и руководителей компаний на тему кибербезопасности.
Опрос показал, что растёт спрос на повышение знаний. Многие считают, что компании недостаточно защищены; при этом мы видим рост успешных атак на бизнес и появление новых уловок, которые помогают злоумышленникам просочиться в инфраструктуру организаций через корпоративные почты сотрудников. Это говорит о том, что преступники не стоят на месте, ищут новые способы и инструменты для взлома. Следовательно, персонал нужно обучать регулярно. Фактически же такое обучение часто ограничивается рассылкой раз в полгода, которую никто не читает.

В конце статьи представлен чек-лист: как обеспечить достаточное информирование

👉 @seniorFront


Original post link: t.me/seniorFront/3917
Forwarded and filtered by @smartfeed_bot

​​👩‍💻Путь развития Frontend разработчика (Вторая часть)

В этой статье я расскажу про мое представление современной карты развития frontend разработчика.

Читать...


Original post link: t.me/frontendnoteschannel/3427
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 6 messages
Our filtering prevented you from: 4 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 5 message(s)
Frontender's notes [ru]: 3 message(s)
Веб-страница: 1 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​​Вопросы на собеседовании на фронтенд-разработчика

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

Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=RKFu0MC1aUs

@tproger_web #собеседование #фронтенд


Original post link: t.me/tproger_web/4457
Forwarded and filtered by @smartfeed_bot

​Объясните разницу между методами forEach() и map().

Методы forEach() и map() определены на нескольких структурах данных. Мы рассмотрим чем отличаются эти методы для массивов.

Оба метода принимают колбэк, который вызывается для каждого элемента. Разница в том, что метод forEach() ничего не возвращает, а метод map() возвращает новый массив с результатами вызова колбэка на каждом исходном элементе. Если переданный колбэк ничего не возвращает в новом массиве появится undefined

Вы можете вернуть значение и из колбэка для forEach() но оно никак не будет использоваться дальше.

 [1,2,3].forEach(a => a + 3);

Используя map() вы можете создавать цепочки вызовов. Если же вы будете использовать forEach() так сделать не получится.

 const myArray = [4, 2, 8, 7, 3, 1, 0];
 const myArray2 = myArray.map(item => item * 2).sort((a, b) => a - b);

 console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]
 console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]

В примере выше изменился только myArray2.

Для закрепления, реализуем ту же самую логику при помощи forEach().
const myArray = [4, 2, 8, 7, 3, 1, 0];
let myArray2 = [];

myArray.forEach(item => {
myArray2.push(item * 2);
});

myArray2 = myArray2.sort((a, b) => a - b);

console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]
console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]

👉 @seniorFront

​​🦾Использование кастомных шаблонов и конфигов для swagger-typescript-api

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

Читать...


Original post link: t.me/frontendnoteschannel/3428
Forwarded and filtered by @smartfeed_bot

​​Курс: Основы API

Забирайте базовый курс по API. Тут разбирают, что из себя представляет API, как работает и зачем он нужен. Также рассмотрят примеры использования, способы вызова и тенденции развития.

Понимание принципов работы API становится всё более актуальным для карьеры в индустрии разработки ПО. На курсе вы изучите некоторые фундаментальные концепции API и определите общую модель того, как он используется: https://stepik.org/course/124947/promo?search=3345883703

@tproger_web #инструменты #курс


Original post link: t.me/tproger_web/4458
Forwarded and filtered by @smartfeed_bot

💿 Song Selector

Реализовано на HTML и SCSS. Анимация реализована при помощи библиотеки Flipping.

👉 @seniorFront


Original post link: t.me/seniorFront/3923
Forwarded and filtered by @smartfeed_bot

✍️ REM – шрифт без засечек, который подходит для экранов устройств и брендинга продуктов. Пример можно посмотреть в сниппете "45 CSS Only Buttons"

Сайтодел | #шрифт


Original post link: t.me/sitodel/1702
Forwarded and filtered by @smartfeed_bot

​​😯Сравнение работы ре-рендеринга страниц в React и Vue

В этой статье мы проведем общее сравнение ре-рендеринга страниц при обновлении данных в таких библиотеках: React.js и Vue.js.

Читать...


Original post link: t.me/frontendnoteschannel/3430
Forwarded and filtered by @smartfeed_bot

slowroads

Пора за руль: это гонка с процедурной генерацией пейзажей и сменой дня/ночи прямо в браузере. Работает только на девайсах с клавиатурой.

slowroads.io


Original post link: t.me/senior_front/1922
Forwarded and filtered by @smartfeed_bot