Дайджест свежих материалов из мира фронтенда за последнюю неделю №400 (27 января — 2 февраля 2020)
4 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
512K+
JavaScript *
Прототипно-ориентированный язык программирования
247,93
Рейтинг
Нет, динамические системы типов по своей сути не более открыты
19 мин
Перевод
Священные войны в интернете о системах типов по-прежнему страдают от распространенного мифа о том, что динамические системы типов по своей природе лучше подходят для моделирования предметных областей «открытого мира». Обычно аргумент звучит так: цель статической типизации состоит в том, чтобы как можно более точно зафиксировать все сущности, однако в реальном мире это просто неудобно. Реальные системы должны быть слабо связаны и должны как можно меньше быть завязаны на представление данных, поэтому динамическая типизация приводит к более устойчивой системе в целом.
Пишем генератор галереи изображений со встроенным слайдером
7 мин
Туториал
Доброго времени суток, друзья!
Вместо введения (постановка задачи)
Все началось с изучения чужих слайдеров (готовых решений в сети, типа bxslider, owlcarousel и slick). Когда-нибудь я напишу подробные руководства по работе с этими инструментами (sweet dreams). Появилось желание написать свой слайдер. Однако вскоре (в том числе, после прочтения нескольких статей на Хабре) пришло осознание, что просто слайдер — это для слабаков. Нужно что-то более радикальное.
В итоге придумал себе такую задачу: написать генератор адаптивной галереи со встроенным слайдером.
Условия:
- Возможность загружать любое количество изображений (из любого места на жестком диске).
- Галерея состоит из загруженных изображений, разметка формируется «на лету» с соблюдением семантики HTML5.
- Галерея одинаково хорошо смотрится на экранах с различным разрешением.
- При клике на любом изображении генерируется слайдер.
- При генерации слайдера затемняется фон.
- Изображение, по которому кликнули — первый слайд.
- Переключение слайдов реализовано через DOM.
- Слайды переключаются плавно.
- Возможность управлять переключением слайдов с помощью кнопок и клавиатуры.
- Возможность вернуться к галерее при клике на текущем слайде и кнопке, а также с помощью клавиатуры.
- Чистый JavaScript (вся разметка через JS).
- Минимум кода.
Итак, поехали (как сказал Гагарин, отправляясь в космос).
Дайджест материалов сообщества Svelte (16.01 — 01.02)
1 мин
Сегодня мы начинаем делиться с вами наиболее заметными материалами сообщества Svelte. Приятного чтения!
Веб-компоненты и открытые стандарты
5 мин
Если спросить разработчиков, почему они выбрали веб-компоненты для своего проекта, довольно часто можно услышать такие аргументы
- Это веб-стандарт, сделанный открытым сообществом, а не какой-то частной компанией
- Веб-стандарты не ломают обратную совместимость, не придется переживать за свой код в будущем
- Все современные браузеры придерживаются стандарта в своем поведении, меньше сюрпризов на кросс-браузерном тестировании
Аргументы выглядят логичными и справедливыми в обычной ситуации, но в случае веб-компонентов есть нюансы, которые я попробую раскрыть в этой статье.
Игра, управляемая лицом, в масках Инстаграм, или двойной клик глазами
11 мин
Что за бред, подумаете вы. Что за бессмысленный набор слов? Но, увы или ура — кому как, сегодня это уже не бред, а реальность. Речь в статье пойдет о написанной мной для Инстаграм игре, в которой в качестве контроллера используется ваше лицо, а точнее, не только оно, но иногда и вся голова. Перемещение по игровому полю производится посредством поворота и наклона головы, а выбор действия — открытием рта либо двойным «кликом» (морганием) глазами. Double blink, наверно, стоило бы его назвать…
О дивный новый мир! Вероятно, хипстеры будущего займутся разработкой скриптов для генерации красивого разноцветного дыма за своими легковыми космическими капсулами или написанием шейдеров для придания интересных визуальных эффектов черным вратам персонального телепорта, типа падающих снежинок (Web 100.0) или фрактального тумана (WebGL 100.0) или… Нет, пожалуй, у меня не хватит фантазии представить себе, какой ерундой можно было бы заняться в будущем: я пытаюсь мыслить слишком логично. Но лет 30 назад мы точно, ни в каком сне, ни при каких условиях не смогли бы даже подумать, что сегодня мы будем создавать маски для социальной сети под названием Инстаграм. И более того — что внутри этих масок появятся полноценные игры. Мне стало страшно и интересно. В общем, страшно интересно. И, как вы уже поняли, я не удержался и тоже написал такую игру. Разумеется, для того, чтобы поиграть в нее, у вас должен быть смартфон на Android или iOS с фронтальной камерой и установленным приложением Инстаграм.
Знакомимся с Web Animations API
5 мин
Перевод
Доброго времени суток, друзья!
Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.
Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).
Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации.
Давайте рассмотрим этот API на простом примере.
Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.
Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).
Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации.
Давайте рассмотрим этот API на простом примере.
Dagaz: Сумма технологий
10 мин
Итак, технологии интересуют меня, так сказать, по необходимости: потому что всякая цивилизация включает и то, к чему общество стремилось, и то, чего никто не замышлял. Порой, и довольно часто, путь технологии открывал случай: искали же когда-то философский камень, а нашли фарфор.
Станислав Лем.
С самого начала работы над проектом, было понятно, что качественный AI мне жизненно необходим! Самому с собой играть скучно, а модуль для игры по сети — он неизвестно когда ещё будет. Я пытался писать ботов сам, но все они работали либо плохо, либо плохо и медленно. В конце концов, я устал заниматься этой самодеятельностью и нашёл шахматного бота, качество игры которого меня вполне устраивало. Но тут возникла проблема. Мне-то были нужны не только Шахматы. Тому, как я с этим боролся, и посвящена эта статья.
Как мигрировать с mocha на jest в 15 простых шагов — и зачем
10 мин
Уже давно я заглядывался на фреймворк для тестирования jest, в котором есть огромное количество всяких вкусных фишек, одна из которых — многопоточное выполнение тестов. При условии того, что у меня был проект на 5000 юнит тестов, миграция обещала быть крайне полезной. Далее я расскажу 14 простых шагов, за которых мне удалось мигрировать — пусть и с некоторыми оговорками — и что мы в результате получили. Спойлер — всё получилось очень круто.
Yarn 2 — с Prolog'ом и плагнплеями
4 мин
Yarn — менеджер пакетов для ноды — выпустили вторую версию. И, похоже, парни серьёзно вознамерились изменить статус-кво в экосистеме ноды, а то и вообще в пакетных менеджерах. Удаляйте все свои картинки про гигабайтные мамки node_modules, убирайте
yarn install из скриптов CI, мы начинаем очередную великую JavaScript-смуту. Если вкратце:- Режим Plug'n'Play стал дефолтным, а node_modules — вторичным, через плагин.
- Сделали плагин и воркфлоу для монореп — может и lerna будет не нужна.
- Встроили свой мини-шелл, чтобы скрипты пакета без этих ваших cross-env в винде запускать.
- Добавили пролог для проверки правил между воркспейсами.
- npx опять же свой запилили.
Если вы не хотите обновлять все ваши проекты, просто запустите yarn policies set-version ^1 (смотри legacy.yarnpkg.com/en/docs/cli/policies) в репозиториях, которые должны остаться на Yarn 1 и закомитьте результат. Тогда Yarn будет использовать локальные бинарники Yarn 1 вместо глобальных так что все в команде будут использовать одну версию!
The Ember Times — Выпуск 132
5 мин
Перевод
Привет Эмберисты!
Приходите на митапы конференции EmberConf, узнайте, как использовать RouteInfo.metadata из EmberMap, попробуйте сэндвич Octane & JAM на EmberConf, изучайте производительность приложения Ember с помощью Tracerbench и попробуйте расширение для VSCode Related Files Hopper!
От переводчика: Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в нашем добром телеграмм-канале
Реализация автодополнения кода в Ace Editor
6 мин
Туториал
Ace (Ajax.org Cloud9 Editor) — популярный редактор кода для веб-приложений. У него есть как плюсы, так и минусы. Одно из больших преимуществ библиотеки — возможность использования пользовательских сниппетов и подсказок. Однако, это не самая тривиальная задача, к тому же не очень хорошо документированная. Мы активно используем редактор в своих продуктах и решили поделиться рецептом с сообществом.
Leaflet. Дружим Image с Canvas
4 мин
Доброго времени суток, дорогие хабрахабровцы!
Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.
Ближайшие события
Насколько важен порядок свойств в объектах JavaScript?
4 мин
В случае JavaScript-движка V8 — очень даже. В этой статье я привожу результаты своего маленького исследования эффективности одной из внутренних оптимизаций V8.
Детский ReactJS из 135 строк кода
7 мин
Про ReactJS статей уже много. Но чтобы приступить к изучению начинающему программисту, нужно найти то самое начало, где основы его сотворения. Мне захотелось показать, что нет ничего сложного в понимании принципов разработки фронтенда на этом фреймворке.
Одна методика изучения позволила мне понять устройство многих сложных программных систем и сводится к тому, что нужно переписать изучаемый проект так, чтобы получился какой нибудь неведомый зверь, который хотя бы чуть-чуть шевелился и был в чем-то схож со своим прообразом.
Одна методика изучения позволила мне понять устройство многих сложных программных систем и сводится к тому, что нужно переписать изучаемый проект так, чтобы получился какой нибудь неведомый зверь, который хотя бы чуть-чуть шевелился и был в чем-то схож со своим прообразом.
JavaScript библиотека Webix глазами новичка. Часть 3. Модули, диаграммы, древовидные таблицы
6 мин
Туториал
Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.
Анализ тональности текста на Node.js
6 мин
Туториал
Всем привет. Тема достаточно интересная и может показаться довольно не простой в реализации. Но я человек практический и хочу прикоснуться к прекрасному особо не напрягаясь. Сегодня мы с вами сделаем "микросервис" для анализа сентиментальности / тональности текста. А походу дела, еще несколько интересных вещей которые помогут вам для подготовки своего текстового обращения к Скайнету.
Последовательность шагов по организации управленческого учета на платформе JetCalc
11 мин
В декабре прошедшего года у большинства коммерческих предприятий и государственных учреждений завершился процесс разработки и согласования планов хозяйственной деятельности на предстоящий год. Кто-то сформировал оптимистичный план, кто-то перестраховался на случай непредвиденных внешних обстоятельств, а кто-то подготовился к самому худшему сценарию. Степень проработанности планов у всех также разная – одни ограничились лишь самыми общими цифрами по доходам и расходам, а другие детально просчитали каждую статью. Но даже качественно и детально проработанный план – это только полдела. Чтобы план заработал как неотъемлемая часть эффективной системы управления, необходимо обеспечить регулярный контроль исполнения намеченных планов.
MyApp extends Holiday
11 мин
Туториал
Я уверен, что среди уважаемой аудитории найдутся те, кто меня поймет. Дело в том, что во всем изобилии популярных библиотек и фреймворков для веб-фронтэнда, лично мне, не нравятся, практически, все альтернативы. В каждом из вариантов я нахожу для себя существенные минусы, которые не дают мне спокойно ими пользоваться. Начинается всегда все радужно: интересный концепт, здравые, на первый взгляд, рассуждения в пунктах «за»… Но затем, все, снова и снова, начинает упираться в избыточные зависимости, лишние сущности и попытки решить проблемы, которые разработчики сами же и создали. Нам предлагают выучить новый синтаксис, принять новые идеи, узнать кучу умных слов, установить множество «необходимых» пакетов. Ок, я люблю все новое, и люблю умные слова. Но меня сильно обескураживает, когда то, что можно сделать просто, люди начинают фрактально усложнять. Вы наверняка уже читали исповеди тех, кто также как и я, отчаялся искать во всем этом здравый смысл и решил уйти в другую крайность — все писать «на ваниле». Со мной это случилось, когда я разочаровался в проекте Polymer, создаваемом при активном участии разработчиков из Google. Сначала мне все очень нравилось, девизом этого движения была фраза «Use the platform!», что для меня означало: «не стоит делать в коде того, что браузер сам сделает эффективнее». Команда Polymer сделала очень многое для внедрения новых стандартов и возможностей на уровне платформы, и за это им — огромное спасибо. Но когда эти цели были достигнуты, они сами принялись нарушать свои-же принципы. И вот их новая библиотека (LitElement) уже отказывается работать напрямую в браузере без установки специального окружения, потому как ребята не следуют стандартам… Я продолжаю наблюдать за развитием LitElement, и даже вижу явные признаки возвращения этих заблудших на путь истинный, но сам я этим уже пользоваться не буду, потому, что теперь у меня есть кое-что получше.
Чему я научился, написав библиотеку компонентов на Svelte
5 мин
Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.
Каким приемам Svelte я научился, читайте под катом.