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

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

​​Google Chrome начнет защищать от фишинга в реальном времени

Google объявила войну злодеям в интернете, внедрив новые возможности в свой браузер Chrome: https://tproger.ru/articles/google-chrome-nachnet-zashhishhat-ot-fiwinga-i-virusov-v-realnom-vremeni

Раньше Chrome сравнивал адрес сайта со списком опасных, который обновлялся раз в полчаса. А мошенники наловчились создавать левые сайты на пару минут, успевая делать гадости.

Google решили это исправить и тепер защита от вирусов и фишинга работает в реальном времени. Chrome мгновенно сверяется с базой Google, где хранится инфа о «плохих» сайтах. Результат: на 25% больше заблокированных мошеннических страниц.

Google обещает, что вся проверка происходит анонимно и безопасно. Обновление вот-вот появится в Chrome для компьютеров и iOS. А в течение месяца еще и на Android.

@tproger_web #безопасность #chrome #google


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

Are the numbers in order?

Ваша задача определить, находятся ли числа в порядке возрастания.
Пустой массив и массив с одним значением автоматически считается отсортированным в порядке возрастания.

Пример:
inAscOrder([1,2,4,7,19]); // true
inAscOrder([1,2,3,4,5]); // true
inAscOrder([1,6,10,18,2,4,20]); // false

👉 @seniorFront


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

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

Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 20 по 25 марта.

За 6 дней вы:

— Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика;
— Напишете в тренажёрах свои строчки кода и увидите как изменяется страница сайта в реальном времени;
— Поймёте нравится ли вам веб-разработка

Вступить в кружок.


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

​​💪Angular на стероидах: наращиваем производительность при помощи WebAssembly

В статье описывается процесс написания функций для работы с простыми числами на AssemblyScript, компиляции их в WebAssembly, передачи двоичных данных через WebAssembly API и вызова этих функций из приложения Angular.

Читать...


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

Wavy Color Cube

Куб с анимацией переливающихся цветов в каждой из его сторон. Анимация реализована на чистом CSS.

https://codepen.io/hexagoncircle/pen/MWwjpYY


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

Насколько потолстел JavaScript к 2024 году?

В этой статье автор статьи решил проанализировать популярные сайты и сервисы на предмет объема загружаемого JS кода. И пришел к неутешительным выводам: Например, Gitlab требуется 13 МБ кода, а именно 500К строк JS, просто для отображения статичного лендинга.

Ставь 🔥, если твой лендинг подгружает меньше 1 МБ.

👉 @seniorFront


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

🐙 UI – репозиторий с примерами простых компонентов пользовательского интерфейса. Элементы написаны на React.js и Next.js.

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


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

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

Top 3 source channels:
Senior Frontend - javascript, html, css: 6 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 5 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

​​CreateHtmlForm — простой инструмент для создания HTML-форм с помощью Markdown

Результат можно отображать в виде кода для фреймворков pico.css, Bootstrap или Tailwindcss: https://www.producthunt.com/products/create-html-form

@tproger_web #инструменты


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

​​Element.closest()

Метод Element.closest() ищет и возвращает ближайший (начиная с самого элемента) родительский элемент, соответствующий указанному CSS-селектору. Если ни один элемент не соответствует указанному CSS-селектору, возвращается null.

Типичный пример использования Element.closest() — определение области действия при клике. Допустим у нас есть множество кнопок, находящихся во вложенных контейнерах. Необходимо найти ближайший к нажатой кнопке контейнер.
<div class="container main-container">
   <button id="1">Кнопка 1</button>
   <div class="container parent-container">
     <button id="2">Кнопка 2</button>
     <div class="container child-container">
       <button id="3">Кнопка 3</button>
     </div>
   </div>
</div>

Для решения задачи достаточно добавить только один обработчик события click:
const mainContainer = document.querySelector('.main-container')

mainContainer.addEventListener('click', function (e) {
   const targetElem = e.target

   if (targetElem.tagName !== 'BUTTON') {
     // Eсли клик выполнен не на кнопке ничего не делаем
     e.stopPropagation()
     return
   }

   const containerElem = targetElem.closest('.container')
   // Выводим в консоль контейнер, содержащий нажатую кнопку
   console.log(containerElem)
})

👉 @seniorFront

Производительность фронтенда: большое приложение на реактивном SSR-топливе

Как построить архитектуру фронта, чтобы приложение загружалось быстро и при этом выполняло требования поисковой оптимизации? Как мы можем это измерить?

Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода?

На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021.

https://habr.com/ru/companies/superjob/articles/660681/


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

​​📋Ленивые бесконечные списки на основе Deferrable Views

В этой статье поделюсь реализацией списков на основе Deferrable Views, недавно появившихся в Angular 17.

Читать...


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

Animated Covers

Здесь реализовано множество простых анимаций при наведении на блок.

👉 @seniorFront


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

​​Осторожно, PHP калечит людей...


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

Platonic solids

Анимированный настраиваемый многогранник, выполненный с помощью CSS и JavaScript.

https://codepen.io/Dillo/pen/OJOjdQp


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

​​👆Интерфейс под один палец. Концепция ONE TOUCH

В этой статье автор расскажет о концепции ONE TOUCH, которая предполагает выполнение любого действия в приложении одним пальцем, в любом положении экрана.

Читать...


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

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

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

​​​Наглядные примеры использования React Hooks

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

https://css-tricks.com/react-hooks-the-deep-cuts/

@tproger_web #react #фронтенд


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

​Что выбрать опытному разработчику? Фриланс vs агентство

Существует миф, что на фрилансе разработчику можно заработать больше, чем работая на агентство. Может быть, это бы и было так, если бы разработчики умели себя продавать. По статистике, если взять двух специалистов с абсолютно одинаковыми hard- и soft-скиллами, но один из них работает на крупного интегратора, а другой - на фрилансе, стоимость их часа будет отличаться как минимум в два раза. Причем не в пользу “свободного плаванья”. Итак, почему же на интегратора работать выгоднее?

Умение продавать
Это, пожалуй, первое и основное. В крупном агентстве работает целый штат маркетологов, которые могут донести ценность услуг своих сотрудников до нужной аудитории. И эту ценность крупный интегратор добавляет к стоимости часа. Здесь уже не придется бороться со своим “синдромом самозванца”, мучиться на тему “дорого или не дорого беру” и других психологических загонов. Просто читаешь свою анкету на сайте и понимаешь, насколько ты крут.
Ценность, которую необходимо создать, делится на два показателя:
1. Выгода: помощь вашему клиенту в увеличении дохода, прибыли, узнаваемости, репутации.
2. Боль: помощь вашему клиенту в снижении затрат, рисков, проблем.

Сложности общения с клиентом
Знаем по опыту, что разработчики часто интроверты и им сложно много общаться с людьми. Особенно со “сложными” клиентами. С этим часто связано и достижение потолка чистой прибыли на фрилансе. Ведь важно не только качественно предоставлять услуги и выполнять «объемы работы», но и решать проблемы заказчиков, заниматься исследованием, задавать много вопросов и анализировать.

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

Пространство для творчества
Кстати, о творчестве. Одной из проблем, с которыми сталкивается рынок фриланса среди разработчиков — механическое выполнении заранее установленных списков задач. Наихудший из возможных подходов — отвечать на каждый вопрос точно так, как задано, отмечать все поля в точности так, как указано, и предоставлять запрошенную информацию буквально, независимо от того, насколько она неуместна. Ваша миссия — продемонстрировать, что вы не похожи ни на кого другого, не с точки зрения стиля и оформления КП, а с точки зрения погружения в суть проблемы.
Как вы планируете выделиться из всех, если все ваши действия специально сделаны, как указано в ТЗ?
Причем это не значит, что вы должны вообще не обращать внимания на этот процесс или грубо игнорировать запросы на получение нужной для клиента информации.
Топовые агентства используют все более изобретательные методы к взаимодействию с клиентами на этапе оценки, они рассматривают проблемы выходя за рамки технического задания, которое предоставил клиент. Они сосредотачивают свою энергию и вектор на творческом решении маркетинговых, продуктовых и других проблем.

👉 @seniorFront

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

В этой статье описывается создание frontend на React, подключение кошельков, работы со смарт-контрактом через веб-приложение.

Читать...


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