JavaScript *

Благодаря тому, что React предоставляет удивительные возможности по работе с отображением, можно сосредоточиться только на организации логики приложения и семантике кода, описывающего работу с данными. Т.е. выбирая state management библиотеку, происходит выбор стилистики будущей кодовой базы.

В данной статье мы рассмотрим подход, основанный на сервисах-сторах, реализуемый благодаря библиотеке lamp-luwak.

Важное обновление #1

Storybook используется в качестве хоста для компонентов. Вы можете собирать и хостить компоненты любым другим способом. Например, импортировать их в одном JavaScript-файле и скормить его webpack-dev-server запущенного параллельно с Cypress в течении тетса.

Еще более важное обновление #2

Статья писалась когда версия Cypress была ниже 4.5.
На текущий момент доступны важные обновления Cypress и аддона cypress-react-unit-test. Сейчас не обязательно иметь отдельный хост для компонентов — эту задачу взял на себя Cypress.
Единственная причина реализовать описанный ниже подход — скорость или какие-то баги. Настоятельно рекомендую попробовать аддон cypress-react-unit-test.

Звучит ли это знакомо: «Я начал заниматься веб разработкой после прохождения курсов»?

Возможно, вы хотите улучшить свои знания основ информатики в части структур данных и алгоритмов. Сегодня мы поговорим о некоторых наиболее распространенных структурах данных на примере JS.

1. Стек (вызовов) (Stack)

Стек следует принципу LIFO (Last In First Out — последним вошел, первым вышел). Если вы сложили книги друг на друга, и захотели взять самую нижнюю книгу, то сначала возьмете верхнюю, затем следующую и т.д. Кнопка «Назад» в браузере позволяет перейти (вернуться) на предыдущую страницу.

Наверное, многим приходилось делать специфические инструменты под свои узкозаточенные нужды — скрипты или Excel-таблицы. И после задумываться: что, если точно такое же решение нужно кому-то ещё? Как об этом узнать и понять, можно ли на этом заработать?

Моя история началась с достаточно простой задачи. Мне нужно было посчитать всего лишь одно число: годовую доходность для своих инвестиционных инструментов. Обшарив весь интернет и не найдя готового решения, мне пришлось сделать его на основе Гугл-таблиц самому. Получилось хорошо — и я решил проверить, существует ли коммерческий спрос на мою разработку.

В этой статье я расскажу:

1. как сделать таблицу для расчёта годовой доходности инвестиций с учётом всех операций и периодов;
2. как создать лендинг и настроить аналитику для потенциальных пользователей;
3. как проверить гипотезу и потенциальный спрос с помощью контекстной рекламы в Яндексе с бюджетом в 1500 рублей.

Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?

Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.

Эта статья о том, как, а главное, зачем вводить в обычных Web приложениях режим поддержки Touch.

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

1. Оценка ситуации: определение узкого места производительности сервера.
2. Стабилизация сервера: применение срочных мер по улучшению ситуации.
3. Улучшение системы: расширение и оптимизация возможностей системы.
4. Мониторинг сервера: использование автоматизированных средств, позволяющих предотвращать возникновение проблем.

Рендеринг диаграмм может серьёзно нагрузить работой браузер. Особенно если речь идёт о выводе в интерфейсе сложного приложения множества элементов, представляющих диаграммы. Попытаться улучшить ситуацию можно с помощью интерфейса OffscreenCanvas, уровень поддержки которого браузерами постепенно растёт. Он позволяет, задействовав веб-воркер, переложить на него задачи по формированию изображения, выводимого в видимый элемент <canvas>.



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

За последние 5 лет Node.js очень изменился, но знания о платформе у сообщества остались на уровне 2013-2015 годов, все те же подходы, все те же проблемы. Сообщество плохо следит за новыми возможностями, а если и узнает про них, то это не влияет на написание ежедневного кода. В Node.js, да и в JavaScript, слабо проникают фундаментальные знания по программной инженерии и архитектуре, параллельному программированию, GRASP, SOLID, GoF, а если и проникают, то не подвергаются адаптации и переосмыслению. Поэтому, среди других языков программирования JavaScript воспринимается, как несерьезный, а в среде разработчиков Java, C++, C#, распространено мнение, что Node.js, это платформа для малограмотных людей. Как преодолеть эту тенденцию и как изменить подход к разработке на Node.js в 2020 году, с использованием всех современных возможностей и знаний, а так же, что нужно изменить в ежедневных практиках написания кода, эти и другие вопросы рассматриваются в трех бесплатных вебинарах «Node.js в 2020: Выйди и зайди нормально» 11, 14 и 21 апреля, накануне выхода Node.js v14.

Иногда кажется, что веб компоненты не дотягивают до фреймворка, особенно если сравнивать их с наиболее популярными представителями. Но многое самое насущное, что не закрывается реализацией стандартов входящих в понятие веб компонентов, достаточно легко прикрутить с помощью библиотек или небольшого объема своего изящного кода. Одной из таких возможностей является роутинг на стороне фронтенда. Фича не всегда необходимая, возможно даже спорная, но в большинстве фреймворков она присутствует и многими используется. Что же в веб-компонентах? А мы попробуем реализовать роутинг с помощью библиотеки navigo.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

@octokit/rest изначально не является оригинальной разработкой GitHub, и представляет собой адаптацию github — самого популярного пакета 2017 года от пользователя @bkeepers. В этом посте будем говорить про @octokit/rest — теперь официальный JavaScript SDK для GitHub REST API.

Утечки памяти похожи на сущности, паразитирующие на приложении. Они незаметно проникают в системы, поначалу не принося никакого вреда. Но если утечка оказывается достаточно сильной — она способна довести приложение до катастрофы. Например — сильно его замедлить или попросту «убить».



Автор статьи, перевод которой мы сегодня публикуем, предлагает поговорить об утечках памяти в JavaScript. В частности, речь пойдёт об управлении памятью в JavaScript, о том, как идентифицировать утечки памяти в реальных приложениях, и о том, как с бороться с утечками памяти.

Доброго времени суток, друзья!

Простые одностраничные приложения, основанные на React, Vue или чистом JavaScript, окружают нас повсюду. Хороший «одностраничник» предполагает соответствующий механизм маршрутизации.

Такие библиотеки, как «navigo» или «react-router», приносят большую пользу. Но как они работают? Необходимо ли нам импортировать всю библиотеку? Или достаточно какой-то части, скажем, 10%? В действительности, быстрый и полезный маршрутизатор можно легко написать самому, это займет немного времени, а программа будет состоять менее чем из 100 строчек кода.

С момента своего возникновения веб-приложения прошли долгий путь. Мы знаем, какую важную роль играет в вебе JavaScript и какие безграничные возможности есть у нас при выборе фреймворков и технологий. Каждый фреймворк имеет свои достоинства и недостатки, но почти во всех используются какие-то основные методологии. Такие инструменты как create-react-app, next.js, vue-cli и другие действительно полезны для начального формирования проекта и его структуры, но в остальном вы вольны создавать приложение в соответствии со своими предпочтениями и требованиями проекта.

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

Люди пользуются кнопкой возврата на предыдущую страницу в браузере очень часто — возможно, чаще, чем вы думаете. А если так, то зачем сразу выбрасывать страницу из памяти браузера, а спустя секунду тратить время и трафик на её повторное открытие? Чтобы пользователь мог быстро вернуться назад, была придумана технология BFCache, о которой важно помнить при разработке интерфейсов. Виктор Хомяков victor-homyakov разобрался в «кэшировании туда и обратно» и составил таблицу совместимости BFCache с разными API.


— Здравствуйте, меня зовут Виктор. Я работаю в составе довольно большой команды, которая занимается страницей поиска.

Доброго времени суток, друзья!

В данной статье мы рассмотрим парочку примеров использования Web Storage API или объекта «Storage».

Что конкретно мы будем делать?

• Научимся запоминать время воспроизведения видео.
• Поработаем с формой входа на страницу.
• Напишем логику списка задач.
• Реализуем чат.
• Схематично набросаем корзину для товаров.

Итак, поехали.

Когда я создавал библиотеку для валидации данных quartet, взял следующие цели-ориентиры:

• TypeScript
• Краткость и простота
• Производительность

В этой статье покажу как библиотека quartet понимает, что значат слова "Краткий" и "Простой" в контексте подхода к валидации.

Я давно думал о кастомизации внешнего вида типовых функций взаимодействия с пользователем в JavaScript — alert(), confirm() и prompt() (далее модальные окна).
Действительно, они очень удобны в использовании, но разные в различных браузерах и весьма неприглядны на вид.
Наконец руки дошли.
В чём проблема? Обычные средства выдачи диалогов (например, bootstrap) не получится использовать также просто, как и alert, где браузер организует остановку выполнения кода JavaScript и ожидание действия пользователя (клик на кнопке закрытия). Modal в bootstrap потребует отдельную обработку события – клик на кнопке, закрытие модального окна…
Тем ни менее я уже использовал кастомизацию alert в играх для замены стандартных сообщений на соответствующие стилю игрового оформления. Это хорошо работает, включая сообщения об ошибках соединения и других системных ситуациях. Но это не сработает для случая необходимости ожидания ответа пользователя!

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

Знаю, многие меня в этом желании не поддержат. И не без причины! Исторически сложилось так, что звуки в интернете использовались крайне неудачно и некрасиво:

• В ранние дни веба некоторые страницы проигрывали фоновую MIDI-музыку.
• Всплывающие мошеннические окна используют звуки для достижения своих нехороших целей. Они, с помощью звуков, стремятся привлечь внимание пользователей и сделать обман более правдоподобным.
• Звук присутствует и в автоматически запускающихся видео (ну это совсем кошмар).

Правда, я уверен в том, что совсем отказываясь от звука — это как если вместе с водой выплеснуть и ребёнка. Звуки могут делать акценты на действиях пользователя, они способны усиливать обратную связь. Звук может немного скрасить выполнение неких скучных действий. Если звуки на веб-страницах применяют со вкусом, они способны улучшить впечатления пользователя от проекта, сделав его более «осязаемым» и реальным.



Эта идея не нова: в играх и в мобильных приложениях звуки используются постоянно. На самом деле, веб — это странное исключение из общей тенденции. Большая часть цифровых продуктов, мысли о которых приходят мне в голову, использует звуки. Я уже не говорю о тактильном отклике, который используется в мобильных приложениях для того чтобы приблизить их к реальности.

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

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

Доброго времени суток, друзья!

Структурные шаблоны проектирования используются для построения больших систем отношений между объектами с целью сохранения гибкости и эффективности. Давайте рассмотрим некоторые из них с отсылками на Игру престолов.

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

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