🖥 Chat UI Kit – дизайн для чатов с шапкой, футером и объемными аватарками. Главная страница имеет множественный градиент в сине-зеленых оттенках.

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


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

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

• Сериализация сущностей с помощью декораторов на TypeScript

• От Web к Native с React

• Обучение детей HTML, CSS, JavaScript: обзор курса по созданию сайтов

• Как улучшить работу сайта с помощью оптимизации изображений Image Stack

• Удалёнка до того, как стала удалёнкой


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

window.navigator

Это свойство возвращает объект описания приложения (user agent), которое выполняет скрипт. В подавляющем большинстве случаев это приложение — браузер. Объект содержит свойства, описывающие браузер, и методы для выполнения действий.

Часто используемые свойства:
userAgent возвращает строку, которая содержит название браузера. Не стоит использовать это свойство, чтобы определить браузер пользователя! Спецификация рекомендует браузерам передавать минимум информации в userAgent, значение может меняться от версии к версии.

language возвращает предпочитаемый язык интерфейса в виде языкового тега. Например, en, ru, en-US и т.д. Обычно это язык, установленный в настройках браузера.

languages возвращает массив предпочитаемых языков в порядке предпочтительности. Первый в списке будет язык, который возвращает navigator.language.

cookieEnabled возвращает true, если браузер пользователя поддерживает куки и они включены, false в противном случае.

onLine возвращает true, если у пользователя есть подключение к сети. Браузеры вкладывают разные смыслы в понятие «онлайн», поэтому это свойство — ненадёжный источник данных.

clipboard — это удоб­ный до­ступ к бу­фе­ру об­мена из Clipboard API. Объект предоставляет несколько методов для сохранения информации в буфер и чтения из него. write — универсальный метод для сохранения данных в буфер. Можно использовать специальный writeText, если вы уверены, что нужно скопировать только текст. Оба метода асинхронные и возвращают Promise. Для чтения из буфера есть аналогичные read и readText.
clipboard доступен только при работе с HTTPS или localhost. Если clipboard не доступен, вы можете использовать старый подход через document.execCommand('copy').

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

Методы объекта navigator служат для взаимодействия с другими WebAPI. Например, метод vibrate, который вызывает вибрацию пользовательского устройства, если она поддерживается: navigator.vibrate(200)

👉 @seniorFront

📊 ТОП-7 библиотек визуализации данных в 2024 году: обзор и сравнение

Подробный обзор 7 популярных библиотек для визуализации данных. Сравниваем функциональность, производительность и удобство использования Latitude, D3.js, Chart.js, Apache ECharts, Nivo, Plotly и Victory.

Читать...


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

​80% разработчиков недовольны своей работой. Причина не в ИИ и не в коде

Результаты последнего опроса Stack Overflow показали, что большинство разработчиков не получают удовольствия от своей работы. Если верить неофициальным данным, то доля довольных среди сантехников и фермеров оказывается выше. В чем же проблема?

Не оправдавшиеся ожидания и технический долг
Технический долг – главный источник раздражения у разработчиков. Работа с несовершенными системами деморализует людей и затрудняет выполнение сложных задач.

Культура суеты и бюрократия
Давление, вызванное необходимостью уложиться в сроки, в ИТ-индустрии часто доходит до крайности. Разработчиков подстегивают выполнять задачи как можно быстрее, чтобы получить как можно больше дохода. Возрастающее давление в компаниях оборачивается завышенными ожиданиями и выгоранием.
Кроме того, существует вечная проблема бюрократии, которой особенно подвержены крупные компании. Бесконечные совещания и оторванные от реальности требования начальства создают и усиливают ощущение бессмысленности.

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

Несмотря на то, что работа не доставляет им удовольствия, большинство разработчиков пишет код в нерабочее время в качестве хобби (68%). Также почти 40% пишут код в нерабочее время ради профессионального роста или ускоренного обучения при помощи онлайн-курсов. Что наводит на мысль: проблема кроется вовсе не в коде!

👉 @seniorFront

✅️ 3D-эффект перехода между элементами

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

Посмотреть код и поиграть с эффектом можно тут:

https://codepen.io/noeldelgado/pen/nweYMz


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

💾 Windows XP – полупрозрачный стеклянный логотип Windows. Отличный пример того, как можно представить графику в 3D-формате.

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


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

👩‍💻 Ionic vs React Native: ключевые различия, о которых следует знать перед началом работы

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

Читать...


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

🖥 Как создать мощную фронтенд-архитектуру

Что такое «Feature Sliced» дизайн во фронтенде? Поговорим о том, как он работает, какие плюсы и минусы, и что получается на выходе.

Читать...


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

Manufactured

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

https://codepen.io/saifkeralite/pen/RwMJgVd


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

👩‍💻 5 ключевых моментов в JavaScript, чтобы не косячить

JavaScript — непростая штука, которая может запутать как новичков, так и профи. Эти советы помогут тебе писать JS-код так, чтобы не напороться на ошибки.

Читать...


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

​Что такое promise и какие состояния у него есть?

Это объект, представляющий завершение (или неудачу) асинхронной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от необходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать.

Состояния:
- Pending (Ожидание): Начальное состояние; асинхронная операция не завершена.
- Fulfilled (Исполнено): Операция завершена успешно, и promise возвращает результат.
- Rejected (Отклонено): Операция завершена с ошибкой, и promise возвращает причину отказа.

Пример:

let promise = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

promise.then(
    function(result) { console.log(result); }, // обработчик успеха
    function(error) { console.log(error); } // обработчик ошибки
);

Promise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций.

👉 @seniorFront

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

• Динамический рендеринг Angular-компонентов

• Использование isolatedModules в Angular 18.2

• Лучшая система шаблонов в Go

• Просто выберите Postgres

• Как Google обрабатывает JavaScript в процессе индексации веб-страниц


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

​Бумажные книги по программированию — удобный инструмент или пережиток прошлого?

Низкое качество перевода
Почти в любой современной книге есть очевидные неточности перевода, опечатки. Иногда встречаются и откровенные грубые ошибки. Причём большинство таких ошибок мог бы найти и исправить опытный редактор при первом внимательном прочтении текста. Но складывается впечатление, что некоторые современные книги по программированию (да и по другим темам) никто толком не вычитывает и не проверяет перед отправкой текста в печать.

Халтурное исполнение
Также у меня есть претензии к переплёту. Недавно одна из книг в мягкой обложке распалась на отдельные страницы после первого же прочтения. Знаете такие переплёты, в которых страницы не сшиты в тетрадки, а склеены каким-то некачественным клеем? Стоит открыть такую книгу, и страницы начинают подозрительно скользить и через некоторое время вообще вываливаются из переплёта. В результате читатель получает вместо книги стопку отдельных листов. А ведь тот же Фигурнов, изданный в непростые 90-е, держался много лет.

Быстрое устаревание
Это, конечно, проблема не самих книг, а описываемых в них объектов. Уж слишком быстро они сейчас устаревают. Если раньше справочник по командам какого-нибудь MS DOS был актуален много лет, то теперь описание очередного модного фреймворка устаревает почти сразу после выхода. Поэтому сейчас я стараюсь покупать только такие книги, в которых описаны фундаментальные вещи. Например, алгоритмы, принципы и методики разработки. Такие книги не устареют ещё долгое время и не будут бесполезно занимать место и собирать пыль в книжном шкафу.

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

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

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

Но не всё так плохо. Сейчас продолжают издавать интересные книги по общим, неустаревающим темам. Жаль только, что к этим книгам применяют тот же подход, что и к мелкотемным: «Зачем стараться?»

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

👉 @seniorFront

🖥 Virtual Reality Landing Page Concept – футуристичный дизайн для лендинга про виртуальную реальность. Преобладают оттенки голубого, фиолетового и красного.

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


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

Неклассическое чтение для руководителей: разборы и гайды по менеджменту, open source, контенту и *random topic*

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

👉 @seniorFront


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

👩‍💻 Как использовать селектор :has() в CSS

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

Читать...


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

❓ Адаптивная вёрстка: что это и как использовать

Адаптивная вёрстка позволяет правильно отображать содержимое веб-сайта на любых устройствах. Рассказываем, как это сделать.

Читать...


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

One Million Checkboxes: как обычный пет-проект превратился в площадку для баловства подростков

Когда создатель One Million Checkboxes (OMCB) запустил свой проект — сайт с миллионом глобальных чекбоксов, он и не догадывался, что всё выйдет из-под контроля.

За пару недель более 500 тыс пользователей нажали на чекбоксы 650 млн раз, превратив OMCB в вирусный феномен.

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

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

Полная статья с описанием произошедшего:

https://habr.com/ru/articles/839866/


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

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

Top 3 source channels:
Senior Frontend - javascript, html, css: 2 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