✍️ Recoleta – шрифт с засечками, вдохновленный эстетикой 1970-х годов. Соединяет в себе мягкие формы и угловатые штрихи. Пример можно посмотреть в сниппете Cards

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


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

Infinite Scroll Multi-Directional Content

Реализовано на React, анимировано библиотекой gsap.

👉 @seniorFront


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

​​🤔Оценка внедрения архитектуры Jamstack в веб-разработке: тематические исследования реальных приложений

Из данной вы можно узнаете о преимуществах и особенностях архитектуры Jamstack в веб-разработке.

Читать...


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

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

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 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

🔥 Годнота

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


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

Как анализировать алгоритмы?

Вычислительная сложность алгоритма описывает, как выполняемый алгоритмом объём работы зависит от размера входных данных.
Обычно у алгоритмов бывает две сложности:

- временная сложность — как количество операций, которые выполняются при работе алгоритма, связано с объёмом входных данных;
- сложность по памяти — как количество памяти, которое нужно алгоритму, связано с размером входных данных.
В обоих случаях оцениваем, как связаны используемые алгоритмом ресурсы (время или память) с количеством входных данных. Может показаться, что алгоритм медленнее работает и потребляет больше памяти, когда размер входных данных большой. Это не всегда так. К примеру, скорее всего время работы функции const doNothing = (...asManyDataAsYouLike) => { } не будет зависеть от количества переданных ей аргументов. Оценка сложности этой функции — O(1). Попробуем разобраться, что это значит.

Способы оценки сложности (обозначения)
Есть несколько способов оценки сложности алгоритмов. Их основная идея – получить ограничение для функции, которая связывает размер входных данных и количество операций или размер памяти. Не стоит определять эту функцию точно, нам нужна именно оценка.

O (О-большое)
O, читается как «О», «О-большое» или «биг (big) О», описывает оценку сложности сверху. То есть максимальное количество операций, которое алгоритм может выполнить в худшем случае. В скобках после О указывают функцию, которая ограничивает сложность. Например, O(n) означает, что сложность алгоритма растёт линейно. Это означает, что время выполнения алгоритма увеличивается прямо пропорционально размеру входных данных (к примеру, есть список из 10 элементов, алгоритм займёт определённое время. Но если будет 20 элементов, то алгоритм займёт в два раза больше времени). При этом как именно линейно не важно. Давайте рассмотрим несколько примеров.

Вычислительная сложность этого алгоритма — O(n). Мы обрабатываем каждый элемент один раз. Если в нашем массиве n элементов, мы выполним тело функции reduce n раз.
const sum = (someArray) => someArray.reduce((sum, value) => sum + value, 0)

Вычислительная сложность этого алгоритма тоже будет O(n). Мы обрабатываем каждый элемент два раза. Если в нашем массиве n элементов, то выполним тело функции reduce 2 × n раз. n раз для суммирования и n раз для произведения. Это описывает формула O(k × n) = O(n). В нашем случае коэффициент не имеет значения, так как он не зависит от размера входных данных.
const sumAndProd = (someArray) => {
const sum = (someArray) => someArray.reduce((sum, value) => sum + value, 0)
const prod = (someArray) => someArray.reduce((prod, value) => prod * value, 1)
return sum * prod
}

👉 @seniorFront

​​🤠На стороне своих правил в ESlint

В данной статье рассказывается о значимости договорённостей в разработке, представлены примеры правил для React и Redux, обсуждается автоматизация правил с помощью ESlint и раскрыта архитектура программы в ESlint при создании собственного плагина.

Читать...


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

ChatGPT попросили нарисовать слово «Honda» символами ASCII, но у ChatGPT не получалось...

Когда ИИ восстанет, автора этих сообщений явно помилуют.


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

💾 Ipanema Pattern – паттерн с деталями в форме кругов и эллипсов. Можно использовать его как заставку для шапки сайта или как фоновое изображение.

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


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

Collapsible Timeline

Свёрстано на HTML и CSS. Логика раскрытия элементов меню реализована в JS.

👉 @seniorFront


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

​​😎GET запросы на практике: правила, принципы и примеры

В этой статье я спроектирую контракт по шагам, и на каждом из них я расскажу про общие рекомендации из копилочки “Полезное”, а также про личные правила и практики, полученные долгим опытом работы над постоянно меняющимися ИТ-продуктами, которые помогут для “дальновидного” проектирования GET REST API.

Читать...


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

Color Palette

Палитра с оттенками цветов. Полноценно работает с компьютера. Логика переключения между оттенками написана на JavaScript.

https://codepen.io/onlyveen/pen/rwvKqb


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

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

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 2 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

🐙 Brainwave – репозиторий проекта по созданию сайта. Здесь есть сниппеты кода, ссылка на видеоурок и описание фич готового продукта.

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


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

​Интересный codepen-проект: Balloon Bears

Это небольшая игра, написанная на React с использованием gsap.

Исходники: https://codepen.io/jh3y/pen/NWOLyGd

#codepen


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

​​🚀Гонка за скоростью: сравнение производительности ведущих фреймворков JavaScript в веб-разработке. Fastify, Express, Koa

В этой статье я узнаю, что было проведено исследование производительности веб-фреймворков JavaScript - Fastify, Express и Koa.

Читать...


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

❓ Что будет на выходе?

Ответ: 10 10


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

​​Без каких знаний не обойтись бэкендеру в 2024 году?

Изучать бэкенд с нуля и даже актуализировать уже имеющиеся знания и навыки — задачка не из простых. Мало того, что основное время уходит на работу и дом, нужно постоянно следить за трендами разработки, чтобы оставаться востребованным специалистом.

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

Мы попросили мидл- и сеньор-бэкендеров ответить на вопросы:
— Что должен был уметь бэкендер в 2024 году?
— Какие тренды в бэкенде в 2024 году?
— Что нужно изучить, чтобы прокачаться?
— Специалистов какого стека не хватает на рынке?

Вот что они ответили: https://tproger.ru/articles/backend-2024

@tproger_web #тренды


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

​​😶‍🌫Web3 приложение Twitter на React.js + Solidity | часть 1

В этой статье я подробно покажу процесс создания dApp приложения на примере Twitter.

Читать...


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

​Почему конфликтуют тестировщики и разработчики, и как этого избежать

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

При знакомстве с командой первое, что я услышал от разработчика, было: «Надеюсь, мы не сильно задолбаем друг друга багами». Это описывает в целом проблему взаимодействия двух структур.

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

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

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

Корень конфликта
Таким образом, мы обнажили корень конфликта — разные цели! Когда у людей разные цели, как их не объединяй, они всё равно будут идти каждый своей дорогой, по итогу – в разные стороны.

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

👉 @seniorFront

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

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 4 message(s)
Веб-страница: 2 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