Frontender's notes. Страница 25

Наглядно о том, что такое overengineering

CSS псевдокласс :is() Всем привет! Недавно узнал о том что в CSS есть псевдокласс :is(), который позволяет значительно сократить длинные записи селекторов. По сути он просто принимает список селекторов для выбора элементов HTML. Несколько примеров: button:is(:hover, :focus) {  background: green; } Меняет фон для кнопки если она имеет состояние focus или hover. :is(thead, tfoot) tr :is(th, td) {  background: red; } Выбирает все элементы th и td внутри хедера и футера таблицы. :is(ul, ol, menu) > :is(ul, ol, menu) {  background: yellow; } В данном примере мы выбираем все списки которые уже находятся в списках. Собственно вот такая довольно полезная штуковина. Поддерживается на данный момент всеми основными браузерами, вот ссылка на caniuse. Удачи в экспериментах!

​​Data Science | Machinelearning - самый большой русскоязычный канал с полезными материалами на такие темы как, Machine Learning, Data Science, Алгоритмы, Python. Так же часто публикуются крутые 🔥 вакансии. 👉 Вам сюда: @devsp Добро пожаловать!

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

​​Управление состоянием в React приложения Все мы прекрасно знаем что построить полноценный стор на react context достаточно тяжело, а оптимизировать его ещё тяжелее. Автор этой статьи рассказывает о том как это сделать проще. Читать... #react #js #longread

Совет на 2023 год — изучайте Javascript правильно. Сами посмотрите: на рынке не хватает специалистов, больше 3000 компаний ищут Javascript разработчиков, а средняя зарплата миддла — 200 000 рублей. А для того, чтобы научиться за несколько месяцев, а не лет — держите в подписках канал школа Javascript. Там на пальцах рассказывают что учить, на что забить и что актуально в 2023 году.  С этим каналом вы пройдете путь от "гугл - ошибка в консоли js" до богатого Javascript специалиста. Начните свой 2023 год продуктивно — школа Javascript.

​​МегаФон в поисках Frontend-разработчика в проект Интернет-магазина💚💚💜 📍Москва, гибрид Что нужно делать: - разрабатывать и улучшать UI интернет-магазина; - заниматься миграцией старого функционала в новый; - самостоятельно выявлять и устранять баги; - писать автоматизированные тесты; - проводить регулярную коммуникацию с командой. Оставляй отклик тут Или пиши рекрутеру: @Ne7eli

​​Изучение TypeScript — полное руководство для начинающих. Часть 5 — Строгий режим и сужение типов В заключительной части руководства мы рассмотрим строгий режим и сужение типов в TypeScript. Эти техники позволяют точнее определять типы в коде, чтобы улучшить качество вашего кода и уменьшить количество багов. Другие части: Часть 1 - Введение и примитивы Часть 2 - Ссылочные типы данных Часть 3 - Классы и интерфейсы Часть 4 - Литералы и дженерики 👉 Читать часть 5... #longread #ts

​​Как работает язык программирования? Всем привет! Неплохое общеобразовательное видео в котором кратко и ясно рассказывается на тему того как в целом работают языки программирования. Смотреть... #video

​​Оптимизация загрузки контента Какие инструменты использовать? Как определённые изменения в коде влияют на загрузку сайта?  Разобраться в теме можно по бесплатным урокам ведущего frontend-разработчика на YouTube-канале karpovꓸcourses DEV. 👉 Смотреть уроки

JS - document.visibilityState или определяем активна ли сейчас вкладка в браузере Алоха товарищи фронты! Не большой шортрид о том как определить находится ли сейчас юзер на странице или нет. Для данной задачи мы будем использовать: 👉 Cвойство window.navigator.visibilityState, которое может быть равно или строке 'hidden' или строке 'visible'. 👉 А так же стандартный JS event visibilitychange, который в свою очередь будет реагировать на открытие / скрытие вкладки браузера и проверять свойство window.navigator.visibilityState Пример кода: const isVisibilityHiddenState = 'hidden'; const handleVisibility = () => { if (document.visibilityState === isVisibilityHiddenState) { console.log('user is on the page'); } else { console.log('user is not on the page right now'); } } document.addEventListener('visibilitychange', handleVisibility); Надеюсь это было вам полезно. Удачи в экспериментах!

​​React Batching от создания (v0.4.0) до React 18 Всем привет! Вышло неплохое видео на тему батчинга React в котором отлично рассказывается о том как именно работает этот процесс. Отлично подойдет для тех кто хочет понять как можно оптимизировать производительность вашего приложения. Смотреть видео…

​​5 продвинутых шаблонов React на пальцах Как и любой React-разработчик, вы наверняка задавались одним из следующих вопросов: 👉 Как создать переиспользуемый компонент, подходящий для разных случаев? 👉 Как создать компонент с простым API, упрощающим его использование? 👉 Как создать расширяемый компонент в плане UI и функциональности?  Популярность этих вопросов привела к разработке сообществом React продвинутых шаблонов. В текущей статье я представлю обзор пяти таких шаблонов. А для простоты их сопоставления буду следовать единой структуре для каждого: Сначала будет идти небольшое введение, сопровождаемое реальным примером кода (на основе одного и того же простого компонента Counter). Читать...

​​Эмулируем React useState в обычном JS (via data-attributes & css selectors) Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors. Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и применит соответствующий код css класса. Читать...

​​Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 8-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 10 января.

​​Приветствую товарищи! С наступающим вас Новым 2023 годом и пусть он будет лучше чем этот.

Что то в этом есть

​​Изучение TypeScript — полное руководство для начинающих. Часть 4 — Литералы и дженерики В новой части руководства будут рассмотрены такие важные понятия, как литералы и дженерики. Итак, приступим. Предыдущие части: Часть 1 - Введение и примитивы Часть 2 - Ссылочные типы данных Часть 3 - Классы и интерфейсы 👉 Читать часть 4...