Прототипно-ориентированный язык программирования
Все браузеры элементу body добавляют внешний отступ со значением 8px (margin 8px). Это часть таблицы стилей по умолчанию, рекомендованных w3c. Но почему именно 8px? Откуда такая тенденция?
В этой статье я хочу затронуть задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Image Slider.
За последние 5 месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других. (Больше информации можно прочитать в моем Telegram-канале)
Вы должны реализовать этот виджет за ~45–50 минут и рассказать об оптимизации. Эту информацию я постараюсь рассказать здесь. Основная цель состоит не в том, чтобы реализовать Image Slider с большим количеством функционала, а в том, чтобы показать, как реализовать и оптимизировать.
Disclaimer: Безусловно, эта статья для начинающих кодеров на React. Опытный и не очень react-разработчик не найдет тут ничего полезного. Разве что может указать на ошибки(буду благодарен).
Построение и декомпозиция проекта
Никакой сложной архитектуры и декомпозиции не будет. Цель проекта - показать часто встречаемое применение хука useState и связка javascript кода с html элементами в одном компоненте. Всего будем использовать только три файла: App.js, App.css и Gradient.js.
⚛ Проектируем DataGrid на React так, чтобы сэкономить Boilerplate
Хорошо продуманная архитектура позволяет не только избежать legacy, но и отдать часть рутины менее квалифицированным кадрам. Думаю, будет уместно поделиться заметками о проектировании DataGrid, так как скорее всего вы уже сталкивались с копипастой)
Решение задачи и пояснение алгоритма: Есть n стандартных игральных костей (6-ти гранных кубиков) со стандартным обозначением всех граней от 1 до 6. Бросаем все n кубики разом. Нужно найти вероятность выпадения числа k, а именно суммы всех значений, выпавших на этих кубиках
Прекратите использовать console.log для всего ?. Я вижу, как многие разработчики регулярно используют console.log метод таким образом, который я считаю неправильным.
Недостатки использование console.log для отладки
Многие разработчики до сих пор используют console.log метод для отладки своего приложения. Например, чтобы убедиться, что код запускается или что переменная имеет правильное значение.
Вы не можете отследить жизненный цикл вашего приложения, лишь отслеживаете значение переменной в данный момент времени.
Часто случается так, что console.log забываются в нескольких местах кода, что кроме гипотетической потери производительности (мизерной, но размер которой варьируется в зависимости от объема данных, вызываемых через метод console.log) загрязняя ваш код.
Решение состоит в том, чтобы использовать инструменты отладки, предоставляемые вашим браузером. Это может потребовать некоторого обучения, но вознаграждение перевешивает усилия ?.
⚛ Джентльменский набор React компонентов FullStack разработчика для управления потоком данных.
В этой статье я рассказываю, как сэкономить время на рутинной загрузке данных с сервера и отображении значений в верстке когда Redux или другой контейнер состояния избыточен.
При создании react-приложений часто появляется необходимость расширить функционал уже существующего компонента или переиспользовать общий кусок логики между компонентами, желательно минимально не вмешиваясь в реализацию целевого компонента. У большинства разработчиков в таком случае мысль в первую очередь обращается к использованию HOC (hight order component или по-русски компонент высшего порядка) или же кастомных хуков. Однако у меня нет никакого желания пересказывать вам уже всем давно известные паттерны, которые вы, вероятно, знаете даже лучше меня.
Сегодня я бы хотел рассказать об альтернативе для вышеупомянутых паттернов, которую незаслуженно обходят стороной во многих обзорах полезных практик при построении react-приложений. Решение довольно специфичное, но в некоторых кейсах может помочь вам очень элегантно организовать код
Привет, друзья!
Представляю вашему вниманию перевод второй части этой замечательной статьи.
Веб-потоки (web streams) — это стандарт для потоков (streams), который поддерживается всеми основными веб-платформами: веб-браузерами, Node.js и Deno. Потоки — это абстракция для чтения и записи данных последовательно, небольшими частями из любого вида источника — файлов, данных, находящихся на сервере, и т.д.
Например, глобальная функция fetch (которая используется для загрузки онлайн-ресурсов) асинхронно возвращает ответ (Response), содержащий свойство body с веб-потоком.
В данной статье рассматриваются веб-потоки в Node.js, но то, о чем мы будем говорить, применимо к любой поддерживающей их платформе.
22 июня 2022 123-я ассамблея Ecma General утвердила языковую спецификацию ECMAScript 2022, а значит, она стала официальным стандартом.
В посте разберемся, какие обновления добавлены в эту версию.
Crono это парсер дат на естественном языке. Кроме формальных ISO 8601 или dd.MM.yyyy, распознает варианты а-ля «в среду утром», «с 10 до 11 вечера», «2 часа 5 минут назад» и т.п. Поддерживает 8 языков, в том числе, теперь, и русский.
15 апреля команда телеграм предоставила нам возможность разрабатывать веб ботов.
Теперь взаимодействие с ботами стало очень интерактивным, так как мы обладаем возможностью интегрировать в ботов полноценные веб-приложения.
В процессе разработки веб апп бота я столкнулся с проблемой, что после закрытия интерфейса веб апп и повторном его открытии мы теряем последнюю ссылку на которой находился пользователь, и веб приложение открывается с главной страницы.
Сперва, может показаться, что это не является проблемой, но на самом деле очень легко случайно закрыть веб-окно, так как оно не открывается на весь экран, а чтобы закрыть его, достаточно потянуть его вниз и мы теряем всё предыдущее состояние приложения.
Рассказываем, почему разработчики нашей компании уделяют большое внимание Core Web Vitals и как эти метрики помогают повысить качество взаимодействия веб-ресурса с пользователем. В конце материала — подробная таблица с основными рекомендациями по улучшению CWV и способами решения разных задач, которые мы применяем.
Привет! Меня зовут Влад, я frontend-разработчик в компании SimbirSoft. Мне приходилось создавать приложения как на старых версиях Vue, так и на новых. Причем многие из моих коллег вполне успешно разрабатывают на Vue 2 и не спешат переходить на Vue3, даже спустя два года после релиза.
Что же касается бизнеса и владельцев продуктов, в моей практике также встречались кейсы и примеры, когда заказчики не понимали всех преимуществ использования новой версии.
В этой статье попытался раскрыть новшества, которые могут стать «триггером» для миграции на новую технологию для обеих заинтересованных групп. Поговорим об экосистеме Vue 3, о новинках и пользе для разработчиков и бизнеса. И, разумеется, сравним Vue 2 и Vue 3 с технической точки зрения. Также рассмотрим одно из главных нововведений фреймворка – Composition API, раскроем технические нюансы и определим лучшие кейсы использования нового API.
В JavaScript есть операторы typeof и instanceof, на первый взгляд они похоже, но они выполняют разные функции.
В этой статье будет рассмотрена разница между ними и показаны примеры использования.
Reusability, т. е. повторное использование компонентов ― весьма популярный метод в разработке ПО, веб-сервисов, дизайна и т. п. Огромным преимуществом повторного использования компонентов является экономия средств и времени на разработку ПО. Почему? Если систематизировать повторное использование компонентов, то сокращаются расходы на создание и обслуживание проектов, уменьшаются сроки разработки таких систем, во многих случаях повышается качество программных продуктов. Сегодня предлагаем поговорить об этом методе относительно веб-сайтов, JavaScript и ReactJS.
Если эта тема интересна, то давайте обсудим всё под катом. К слову, статья не очень большая, в ней приводится лишь один пример для Redux, который даёт общее понимание вопроса. А в комментариях давайте обсудим ваш опыт и идеи, которые вы используете в ежедневной работе.
В JavaScript есть операторы typeof и instanceof, на первый взгляд они похоже, но они выполняют разные функции.
В этой статье будет рассмотрена разница между ними и показаны примеры использования.
