🖥 Ecommerce App – дизайн приложения для интернет-магазина. Здесь есть два типа карточек: заполненные градиентом и прозрачные с круглым фоном для товара.

Сайтодел | #макет #figma


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

🔝 ТОП-10 шаблонизаторов для фронтенд-разработки

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

Читать...


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

👩‍💻 Отложенная загрузка на уровне шаблонов в Angular

Знакомьтесь с новой фичей Angular 17  —  Deferrable Views. Этот API для отложенной загрузки зависимостей шаблонов обеспечит беспрецедентный уровень эргономики. Чтобы оценить его преимущества, предлагаем сравнить новый и традиционный подходы к отложенной загрузке шаблонов.

Читать...


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

​​​5 ошибок, которые можно допустить при запуске первого проекта React

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

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

https://css-tricks.com/5-mistakes-starting-react/

#react


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

Array.values()

Массив в JavaScript имеет различные методы для перебора элементов. Например, map() или forEach(). Но иногда удобнее работать не с самим массивом, а с итерируемым объектом.
Метод values() возвращает новый объект-итератор, созданный из значений элементов массива. Подробнее о том, что такое итератор, можно прочитать в посте «Итератор».

Пример:
const array = [1, 2, 3]
const iterator = array.values()

for (const item of iterator) {
console.log(item)
}
// 1
// 2
// 3

👉 @seniorFront


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

👩‍💻 Освоение различных видов линий в Jetpack Compose с помощью PathEffect

Устали от однообразных линий в Jetpack Compose? Вы не одиноки! Сегодня поговорим о том, как создавать различные стили линий и фигур в рамках Jetpack Compose и использовать их на практике.

Читать...


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

​​Про UI/UX в двух словах: как и зачем применяют принципы логики в дизайне интерфейсов?

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

Логика и дизайн-мышление помогают создавать выдающиеся интерфейсы. О том, как это работает, и как «прокачать» эти навыки, рассказывает наш читатель Иван Сержантов: https://tproger.ru/articles/kak-i-zachem-primenyayut-principy-logiki-v-dizajne-interfejsov

#дизайн #ux


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

🖥 Template Plants Animated – дизайн веб-страниц в оттенках холодного и теплого зеленого. Приятный бонус - изображения растений без фона в формате PNG.

Сайтодел | #макет #figma


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

👩‍💻 10 полезных методик во фронтенд-разработке React

Рассмотрим практики и методики, которые упрощают создание приложений в React, делают код более эффективным и читабельным, упрощают его обслуживание.

Читать...


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

Stacked Cards with Autoplay

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

👉 @seniorFront


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

👩‍💻 Массив++

Учитывая массив целых чисел любой длины, верните массив, в котором единица добавлена к значению, представленному массивом.

Массив не может быть пустым. Допускаются только неотрицательные однозначные целые числа. Возвращайте null для недопустимых входных данны

Пример кода:

upArray([2,3,9]) => [2,4,0]
upArray([4,3,2,5]) => [4,3,2,6]
upArray([1,-9]) => null

Решить задачу ⬅️

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

function upArray(arr) {
if (arr.length === 0 || arr.some(num => num < 0 || num > 9)) {
return null;
}

for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i] < 9) {
arr[i]++;
return arr;
}
arr[i] = 0;
}

arr.unshift(1);
return arr;
}

// Примеры использования функции
console.log(upArray([2, 3, 9])); // => [2, 4, 0]
console.log(upArray([4, 3, 2, 5])); // => [4, 3, 2, 6]
console.log(upArray([1, -9])); // => null


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

👩‍💻 Очистка операторов импорта TypeScript с помощью псевдонимов путей

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

Читать...


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

​​​Скрытые функции Google Chrome для разработчика

Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает. 

В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:

https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/

#devtools #инструменты


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

🖥 Вам нужен сайт? — Мы найдем исполнителя!

➖ Сайт под ключ;
➖ Верстка;
➖ Дизайн;
➖ Лендинг;
➖ Интернет магазины.

Мы найдем разработчика под любую задачу. Достаточно указать пожелания по сайту в свободной форме, нажав на кнопку ниже. ⬇️


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

👩‍💻 Интеграция Rust в Next.js: практическое руководство для разработчика

Как добавить Rust в свой инструментарий и проекты? Рассмотрим различные варианты развертывания кода Rust на Vercel с написанием конечных точек API, общие закономерности разработки API, проблемы применения Rust в продакшене. Весь код и примеры ― в шаблоне.

Читать...


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

​​В VSCode нашли расширения с вирусами и миллионами установок

Эксперты из Израиля обнаружили вредоносные расширения для Visual Studio Code (VSCode), установленные миллионами пользователей. Они позволяют злоумышленникам красть учетные данные, информацию о системе и устанавливать удаленные оболочки на компьютеры жертв.

В ходе анализа исследователи обнаружили следующие проблемы:
— Было выявлено 1283 расширения с известным вредоносным кодом, установленных 229 млн раз.
— 8161 расширение общается с жестко закодированными IP-адресами.
— 1452 расширения запускают неизвестные исполняемые файлы.
— 2304 расширения используют GitHub-репозитории неоригинальных издателей, что указывает на их подделку​.

Подробнее: https://tproger.ru/news/v-vscode-nawli-raswireniya-s-virusami-i-millionami-ustanovok

#vscode #безопасность


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

❓ Зачем нужен CORS: просто о сложном

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

Читать...


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

🐙 JS2Flowchart – библиотека для визуализации JavaScript-кода. Она генерирует блок-схемы, позволяет настроить стиль и показать код на разных уровнях абстракции.

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


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

#вопросы_с_собеседований
Какие бывают человеческие ошибки в javascript?

В javascript есть два типа ошибок.
Syntax error. Это ошибки или опечатки в коде, из-за которых программа вообще не выполняется или останавливается на полпути. Обычно появляются сообщения об этих ошибках.

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


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

Лайфхак для IT-шников в 2024

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

На бесплатном обучении от FAANG School ты прокачаешь алгоритмы с разработчиком с 7-летним опытом, который решил 500+ задач на LeetCode. Узнаешь:

– Как использовать разные структуры данных
при решении задач
– Какие 20% усилий дают 80% результата
при подготовке к алгоритмам
– Prefix Sum и Sliding Window. 2 подхода, которые закрывают задачи на 200к$ во время собесов в Google
– Как научиться решать алгоритмы без матана

Простые и доступные объяснения, полезные квизы и опросы, а также много задач для практики.

Переходи и жми на кнопку «Принять участие», если хочешь увеличить шансы устроиться в Яндекс, Amazon, Google и другие.


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

Cityscape

При нажатии на части сцены задаются различные CSS-классы, которые запускают анимации и трансформации.

https://codepen.io/jackiezen/pen/bvqqOo


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