Frontend-разработка
2 subscribers
878 photos
579 videos
3.31K links
Агрегатор каналов о фронтенде
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
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
Бумажные книги по программированию — удобный инструмент или пережиток прошлого?

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

Халтурное исполнение
Также у меня есть претензии к переплёту. Недавно одна из книг в мягкой обложке распалась на отдельные страницы после первого же прочтения. Знаете такие переплёты, в которых страницы не сшиты в тетрадки, а склеены каким-то некачественным клеем? Стоит открыть такую книгу, и страницы начинают подозрительно скользить и через некоторое время вообще вываливаются из переплёта. В результате читатель получает вместо книги стопку отдельных листов. А ведь тот же Фигурнов, изданный в непростые 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
Forwarded from Frontender's notes [ru]
👩‍💻 Exes and Ohs

Проверьте, содержит ли строка одинаковое количество "x" и "o". Метод должен возвращать логическое значение и быть нечувствительным к регистру. Строка может содержать любой символ.

Пример кода:

XO("ooxx") => true
XO("xooxx") => false
XO("ooxXm") => true
XO("zpzpzpp") => true // when no 'x' and 'o' is present should return true
XO("zzoo") => false


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

function XO(str) {
// Преобразуем строку в нижний регистр
str = str.toLowerCase();

// Подсчитываем количество 'x' и 'o'
let xCount = 0;
let oCount = 0;

for (let char of str) {
if (char === 'x') xCount++;
if (char === 'o') oCount++;
}

// Сравниваем количество 'x' и 'o'
return xCount === oCount;
}

// Примеры использования
console.log(XO("ooxx")); // true
console.log(XO("xooxx")); // false
console.log(XO("ooxXm")); // true
console.log(XO("zpzpzpp")); // true
console.log(XO("zzoo")); // false
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как использовать селектор :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
This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 0 messages
Our filtering prevented you from: 11 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Веб-страница: 3 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
This is a daily stats digest!
Today the bot processed: 12 messages
Today you received: 0 messages
Our filtering prevented you from: 12 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 4 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 4 message(s)
Frontender's notes [ru]: 3 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
This is a daily stats digest!
Today the bot processed: 17 messages
Today you received: 0 messages
Our filtering prevented you from: 17 messages

Top 3 source channels:
Frontender's notes [ru]: 9 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
This is a daily stats digest!
Today the bot processed: 17 messages
Today you received: 0 messages
Our filtering prevented you from: 17 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 13 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
This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 0 messages
Our filtering prevented you from: 11 messages

Top 3 source channels:
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 3 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
This is a daily stats digest!
Today the bot processed: 6 messages
Today you received: 0 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
This is a daily stats digest!
Today the bot processed: 19 messages
Today you received: 0 messages
Our filtering prevented you from: 19 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 12 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
Frontender's notes [ru]: 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
Новая волна email-мошенничества через... фальшивые доказательства измены

Мошенники нашли новый способ запугать людей — отправляют письма с якобы доказательствами измены второй половинки.

Они используют личные данные (имена, клички питомцев) и ссылки на «украденные» данные, включая переписки и историю сайтов.

Защититься достаточно просто — не поддавайтесь панике! Скорее всего, данные взяты из открытых источников или общедоступных утечек. Также не переходите по ссылкам и просто удалите письмо.


Original post link: t.me/tproger_web/4797
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 19 messages
Today you received: 1 messages
Our filtering prevented you from: 18 messages

Top 3 source channels:
Сайтодел | GitHub, Верстка, Сайты, FullStack: 12 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 2 message(s)
Senior Frontend - javascript, 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