SVG & GSAP Morphing

Рейтинг, созданный из svg-картинки, анимируемой библиотекой GSAP.

https://codepen.io/ksenia-k/pen/JjjyBoL


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

🐙 Phoenix-MD – бот для WhatsApp с расширенной функциональностью. Он позволяет находить аудио и изображения, управлять чатами и многое другое.

Сайтодел | #репозиторий #github


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

🖥 Дайджест самых интересных публикаций за последние дни:

• Что такое WAF и как с ним работать? Показываем на примере уязвимого веб-приложения

• Ищем баги в коде браузера при помощи фаззинга

• Анимации CSS, основанные на времени


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

Neuomorphic Checkboxes

Подборка оригинальных чекбоксов с иконками font-awesome.

👉 @seniorFront


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

👩‍💻 Поросячья латынь

Поросячья латынь, также свинский латинский — «тайный язык», представляющий собой зашифрованный английский. Чаще всего используется в шутливом или полушутливом контексте.

Напишите функцию, которая принимает строку и перемещает первую букву каждого слова в конец, а затем добавляет «ay» в конец слова.

Пример кода:

pigIt('Pig latin is cool') - вернёт 'igPay atinlay siay oolcay'
pigIt('This is my string') - вернёт 'hisTay siay ymay tringsay'

Решение задачи🔽

function pigIt(str) {
return str
.split(' ')
.map(word => word.substr(1) + word.charAt(0) + 'ay')
.join(' ');
}

console.log(pigIt('Pig latin is cool')); // 'igPay atinlay siay oolcay'
console.log(pigIt('This is my string')); // 'hisTay siay ymay tringsay'


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

​Как провести первую ретроспективу и не облажаться?

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

С чего стоит начать подготовку и о чем необходимо задуматься заранее?

1. Определитесь с целью проведения ретроспективы. Что вы хотите обсудить с командой? К примеру: проанализировать спринт, подвести итоги года? Или же вы хотите выявить причины проблем, которые происходили в течении определенного периода времени.

2. Подготовьте презентацию, в которой отобразите вводную информацию для участников ретро: пояснение, что такое ретроспектива; цели; правила, повестку. Это буквально несколько слайдов, но благодаря этой презентации команда будет понимать, что ее ждет. Также, не мало, важно донести ценность мероприятия.

3. Важно определиться с форматом ретроспективы онлайн или оффлайн, а также предусмотреть соответствующие инструменты для комфортного проведения ретро. Если онлайн, то рекомендую популярную платформу Miro, в которой вы найдете шаблоны для ретроспективы на любой вкус, начиная от классических шаблонов Agile ретроспективы заканчивая тематическими (в стиле: стартрека; мультиков, путешествия) Есть и другие платформы: trello, confluence, retrius.

4. Мне очень помогает смоделировать возможные варианты введения мероприятия. Конечно, Вы не сможете предусмотреть все ситуации и кейсы, НО вы проработаете свой формат введения. Заранее продумайте введение ретроспективы; проблемы, которые Вы видите, используйте правильные вопросы: Что у нас получилось хорошо? Что Вас демотивировало? Что мы могли бы улучшить или сделать для более успешного результата?

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

6. По результатам проведенной ретроспективы сформируйте документ, который отобразит вскрытые проблемы и недовольства, позитивные моменты, а также договоренности. Результаты ретро – это план, как избежать тех ошибок/проблем, которые возникли у вас в рамках работы.

7. Еще одно не менее важное действие – это сбор обратной связи: проведите опрос или просто спросите у коллег в Вашем чате команды: Понравилось ли эта активность и чего не хватило? Так скажем на будущее, чтобы развивать свои навыки по проведению ретроспективы.

👉 @seniorFront

Sliding Stepper

Счетчик с красивыми CSS-анимациями при переключении.

https://codepen.io/jkantner/pen/oNGzBmm


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

🔥 Это база 1400 вопросов с собеседований на Frontend разработчика. Фишка в том, что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏


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

💾 Price Range Slider – слайдер для цен с градиентом, который адаптируется под выбранную длину. При движении ярлык с ценой покачивается как реальный предмет.

Сайтодел | #сниппет #css


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

Toaster

Создано на HTML и SCSS.

https://codepen.io/klaufel/pen/OJQBpVQ


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

👩‍💻 Топ-10 заданий по написанию кода для собеседования по React.js в 2024 году

Эти 10 заданий по созданию кода с примерами решений помогут закрепить основные теоретические понятия React.js и прокачать практические навыки. Изучение лучших сценариев написания кода  —  верный путь к успешному прохождению собеседования.

Читать...


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

​Отрицание, торг и принятие работы над проектом без документации

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

Однако, несмотря на первоначальное замешательство, такие ситуации предоставляют уникальную возможность стать настоящим героем проекта. Представьте себе, каким уважаемым и крутым специалистом вы станете, создавая систему документации с нуля!

С таким мощным стимулом автор статьи и решила приступить к делу:

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

2. Анализ базы данных: База данных является краеугольным камнем любого проекта. Без глубокого понимания ее структуры невозможно построить четкую картину всего проекта. Поэтому мы начнем с детального анализа базы данных, чтобы убедиться, что мы имеем полное представление о ее структуре и связях между данными.

3. Создание сервисной карты: Давайте разложим все сервисы и их взаимосвязи на столе. Это поможет нам визуализировать работу нашей системы в целом и лучше понять ее архитектуру. Кроме того, это даст нам возможность выявить возможные узкие места и проблемные зоны, которые требуют дополнительного внимания.

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

5. Описание сценариев использования (use case): Представим себя в роли пользователя и опишем типичные сценарии использования нашего продукта. Это поможет нам лучше понять его функционал и потребности пользователей, а также выявить возможные улучшения и дополнительные функциональные требования.

6. Документация API с использованием Swagger: Документация API - это неотъемлемая часть любого современного проекта. Она позволяет другим разработчикам легко и эффективно взаимодействовать с нашим продуктом, используя наши API.

👉 @seniorFront

​​И это даже не треть всего кода...


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

Flex Slider

Интерактивный слайдер, выполненный с помощью фреймворка Vue.js. При клике на секцию показывается дополнительная информация.

https://codepen.io/rodleviton/pen/yLPGBZP


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

​​​Flexbox Defense — защищаемся башнями и изучаем flexbox

В этой простой игре в стиле Tower Defense вы сможете попрактиковаться в использовании Flexbox CSS. Вас ожидают 12 волн с различными условиями.

Поиграть можно тут:

http://www.flexboxdefense.com/

#css


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

🎨 Цветовая палитра макета "Ice Cream Landing Page"

HEX | RGB
#F094DF | rgb(240,148,223)
#A10520 | rgb(161,5,32)
#400404 | rgb(64,4,4)

⚠️ Цвет копируется одним кликом!

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


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

👩‍💻 Check Done SVG Animated

Красиво анимированная галочка. Сделана на SVG и SCSS.

Открыть код


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

​Конференция Яндекса по бэкенду

30 ноября в Москве Яндекс проведёт большую конференцию для бэкенд-разработчиков — YaTalks 2019: https://tprg.ru/yatalks191

На мероприятии выступят продвинутые инженеры из Яндекса, Google и других продуктовых компаний, чтобы обсудить самые модные технологии и полезные кейсы.

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

Подробная программа и регистрация на сайте: https://tprg.ru/yatalks191

#партнёрский


Original post link: t.me/c/-1001044298783/12068
Forwarded and filtered by @smartfeed_bot

Image Slider

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

👉 @seniorFront


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

🖥 Дайджест самых интересных публикаций за последние дни:

• HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи.

• Асинхронный веб: WebSocket, Server-Sent Events, Long Polling и Short Polling

• Путь Frontend разработчика. Как им стать?

• React Conf 2024. React v19


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

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

Используйте Web Workers для выполнения задач в фоновом потоке.


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