JavaScript *

Когда я вижу очередную статью о Svelte:

RE: Боль и слёзы в Svelte 3
Svelte 3: Переосмысление реактивности
Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков
Легенда о Фреймворке Всевластия
Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»
Исчезающие фреймворки

Меня переполняет восхищение от наглости писавших её. С серьёзнейшим видом эти люди приходят и начинают рассказывать что их фреймворк в принципе может рассматриваться как альтернатива большой тройке: Angular, React, Vue. Первый раз я подумал, что автор из-за своей неопытности на полном серьёзе рассматривает Svelte как вменяемую production-ready альтернативу устоявшимся фреймворкам. Второй раз я подумал, что автор испытывает творческий кризис и его так тошнит от большой тройки, что ему хочется писать на чём угодно, но только не на ней. В последующие разы меня преследовало чувство, что кто-то просто строчит заказные посты.

Паранойя, скажете вы и будете правы. Но мой психотерапевт занят поддержкой пострадавших от коронавируса. Им нужнее. Поэтому выговариваться мне придётся вам. А выговориться я бы хотел на тему того, что Svelte — натужно пиаримый кем-то мертворождённый фреймворк. Который в 2020 году является пустой тратой времени и не имеет никаких реальных конкурентных преимуществ по сравнению с другими фронтенд-фреймворками.

Привет, Хабр! В не такие уж далёкие годы, на первом курсе «программистского» факультета, мне нравилось задавать товарищам по учёбе вопрос: «Зачем вы вообще пошли сюда учиться?» Точной статистики ответов я, конечно, не вёл, но доподлинно помню: больше половины хотели делать игры. Большинство тех, кто так отвечал, оказались не готовы к обилию разных видов «математик» и «физик», которыми нас завалили в первые два года учёбы. Выдерживали не все — уже к концу второго курса из пяти переполненных групп осталось три неполных.

Не так давно нашей фронтенд-команде предоставилась возможность попробовать себя в роли gamedev. Очень коротко, задача такая: сделать самую настоящую 3D-игру, да так, чтобы можно было поиграть, просто открыв браузер. Даже мобильный. Даже в WebView.

В этом посте я постараюсь рассказать о том, как мы спроектировали архитектуру игры, с какими проблемами столкнулись, используя один из самых популярных и актуальных технологических стеков — React + Redux, и какими «хорошими практиками», вероятнее всего, придётся пожертвовать, если вы для схожих задач выберете этот же стек.

Привет, Хабр! Завтра, 23 апреля, PiterJS проведёт онлайн-митап — а мы (организаторы HolyJS) поможем им с технической частью трансляции.

На митапе поговорим про разработку сложных UI-компонентов, производительность и CSS-in-TS со спикерами из Lamoda, SEMrush и 1С.

Когда: 23 апреля, 19:00–21:30
Где: YouTube-канал PiterJS

Чудеса случаются — это вам любой программист скажет. (вместо эпиграфа)

Добрый день!

Пример будет простой.

Есть вьюха:

<mvc:View 
    controllerName="MyController" 
    xmlns="sap.m" 
    xmlns:core="sap.ui.core" 
    xmlns:mvc="sap.ui.core.mvc">
    <Button text="Поехали!" press="handlePress" />
    <Table 
        items="{view>/list/items}" 
        mode="MultiSelect" 
        selectionChange="handleTableSelection">
        <columns>
            <Column>
                <Text text="Ид" />
            </Column>
            <Column>
                <Text text="Описание" />
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <ObjectIdentifier title="{view>id}" />
                    <Text text="{view>description}" />
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</mvc:View>

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

Полина Гуртовая — frontend-разработчик уже более 5ти лет, работает в компании Evil Martians. Она не только прекрасный специалист, но и член программного комитета секции Frontend на конференции DUMP 2020, а еще спикер секции этого же года.

Мы пообщались с Полиной и задали ей несколько, как нам показалось, важных вопросов о будущем и настоящем Frontend`а, спросили ее мнение о трендах и тенденциях направления.

Вот что отвечает «злая марсианка» :)

Сегодня поговорим об измерении производительности рендеринга React-компонентов с использованием API React Profiler. Ещё мы будем оценивать взаимодействия с компонентом, применяя новый экспериментальный API Interaction Tracing. Кроме того, мы воспользуемся API User Timing для проведения собственных измерений.

В качестве площадки для экспериментов воспользуемся приложением React Movies Queue.

Приложение React Movies Queue

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

Статья описывает трансляцию кода TypeScript в OData запросы во время компиляции программы.

Плагин babel-plugin-ts2odata выполняет разбор JavaScript AST с помощью библиотеки TsToOdata описание которой в моей предыдущей статье Типизированные запросы OData в TypeScript.

В предыдущей части мы разобрались, как выводить на экран двумерные объекты, такие как пиксель и линия (отрезок), но ведь хочется поскорее создать что-то трехмерное. В этой статье впервые попробуем вывести 3D-объект на экран и познакомимся с новыми математическими объектами, такими как вектор и матрица, а также некоторыми операциями над ними, но только с теми, которые применим на практике.

Очень часто бывают моменты, когда мы хотим удалить все элементы массива, как вариант, у нас есть список задач, и мы хотим удалить все задачи одновременно.

Рассмотрим такой список элементов:

let items = ["tea", "coffee", "milk"];

Чтобы удалить все элементы из массива, мы устанавливаем его значение в пустой массив

items = [];

Это работает отлично, и вы обнаружите, что данный пример используют постоянно. Но с этим есть проблема ...

«Плохие программисты думают о коде. Хорошие программисты думают о структурах данных и их взаимосвязях», — Линус Торвальдс, создатель Linux.

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

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

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

О структурных паттернах читайте здесь.

Порождающие паттерны предназначены для работы с механизмами построения объектов с целью создания объекта наиболее подходящим в данной ситуации способом.

Беда, товарищи!

Дети (~10 лет) перешли на удаленное обучение, расселись по комнатам с компьютерами и не могут сосредоточиться на уроках!

Они добавлены в google families, microsoft family, время за компьютером ограничено, а взрослые сайты убраны через opendns. Но чуть что — и даже прямо во время zoom-конференции урока ребенок начинает смотреть youtube. А потом училка дает домашнее задание — посмотреть видео и написать сочинение. И видео — тоже на youtube. Без ручной модерации не обойтись.

Под катом пишем волшебный пендаль, а именно chrome plugin, который отправляет каждый открываемый сайт в telegram злому родителю, работающему в соседней комнате.

Благодаря тому, что 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. Мониторинг сервера: использование автоматизированных средств, позволяющих предотвращать возникновение проблем.