JavaScript *

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

Предисловие

Однажды веб серфинг привел меня к этому.

Позже обнаружил статью про то, как это работает.

Казалось бы, ничего особенного — Пикачу, нарисованный средствами CSS. Данная техника называется Pixel Art (пиксельное искусство?). Что меня поразило, так это трудоемкость процесса. Каждая клеточка раскрашивается вручную (ну, почти; благо существуют препроцессоры; Sass в данном случае). Конечно, красота требует жертв. Однако разработчик — существо ленивое. Посему я задумался об автоматизации. Так появилось то, что я назвал Pixel Art Maker.

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

Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.

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

Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?

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

В этой статье объясняются некоторые концепции из теории музыки, на основе которых работает Web Audio API (WAA). Зная эти концепции, вы сможете принимать взвешенные решения при проектировании аудио в приложении. Статья не сделает вас опытным инженером по звуку, но поможет понять, почему WAA работает так, как работает.

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

Я решил заняться рефакторингом своего старого кода, а также, подправить графику. Дизайн мне всегда давался с трудом, это не мое. Рассчитывая хоть на какое-то вдохновение, я включил саунд-трек из GTA San-Andreas, тот, что с кантри-музыкой, с радио K-Rose. Мне кажется, что он хорошо передает атмосферу Лас-Вегаса. Я там никогда не был, но точно передает! Клянусь своей звездой шерифа. (Если что — она пластиковая, так что, не жалко...) И даже не поленился зайти в саму легендарную игру и прокатиться по Лас-Вентурасу, виртуальному прототипу мировой игорной столицы.

Здавствуйте, в этом туториале мы рассмотрим как разработать очень простую, но контролируемую форму в React, сфокусировавшись на качестве кода.

При разработке нашей формы мы будем следовать принципам «KISS», «YAGNI», «DRY». Для успешного прохождения данного туториала вам не нужно знать этих принципов, я буду объяснять их по ходу дела. Однако, я полагаю, что вы хорошо владеете современным javascript и умеете мыслить на React.

Идея появилась, после того как случайно увидел подобный генератор для американской биржи NASDAQ, где автор bash скриптом скачивает с FTP сервера сводный список американских бумаг и трансформирует его в JSON, состоящий из одних тикеров, а затем при помощи фреймворка bootstrap и чистого JavaScript выводит на экран рандомный биржевой тикер, одновременно давая ссылку на популярный ресурс Yahoo! Finance.


«Магия» платформы CodePen для Московской биржи

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

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

В этой статье я хотел бы рассмотреть ориентированность quartet на TypeScript.

Автор статьи, перевод которой мы сегодня публикуем, говорит, что в компании commercetools приняли на вооружение хуки React в начале 2019 года — в момент их появления в React 16.8.0. С тех пор программисты компании постоянно перерабатывают свой код, переводя его на хуки. Хуки React позволяют, не используя классы, работать с состоянием компонентов и пользоваться другими возможностями React. Используя хуки, можно, работая с функциональными компонентами, «подключаться» к событиям жизненного цикла компонентов и реагировать на изменения их состояния.

Многие из нас уже несколько недель сидят дома и в голове все чаще звучит мысль — а нужно ли? Может быть власти и медиа сильно преувеличивают — если что и было, то уже закончилось, можно возвращаться в привычный ритм. В этой статье я дам вам возможность самим ответить на этот вопрос. Пользуясь случаем, я разработал приложение наподобие Plague Inc, только без игровой механики, но с возможностью точечной настройки параметров — Pandemic simulator. В статье я покажу, как отличается характер пандемии в зависимости от нас с вами — сидим ли мы дома и моем ли руки.

Вот так изменится население США в случае если у COVID-19 будет 90% летальность.

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

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

Для регистрации жестов (касаний) и перемещения (перетаскивания) используется hammer.js. Данная библиотека позволяет обнаруживать как клики мышью, так и касания пальцем.

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

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

Немедленно вызываемая функция (Immediately Invoked Function Expression — IIFE) в JavaScript — это конструкция, позволяющая вызывать функцию непосредственно после ее определения.



В этой статье мы разберемся, почему стоит отказаться от использования IIFE, несмотря на ее былые заслуги.

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

Обзор

Intersection Observer API (IOA) позволяет приложению асинхронно наблюдать за пересечением элемента (target) с его родителем (root) или областью просмотра (viewport). Другими словами, этот API обеспечивает вызов определенной функции каждый раз при пересечении целевого элемента с root или viewport.

Примеры использования:

• «ленивая» или отложенная загрузка изображений
• бесконечная прокрутка страницы
• получение информации о видимости рекламы для целей расчета стоимости показов
• запуск процесса или анимации, находящихся в поле зрения пользователя

Falcon Heavy Demo Mission

Писать тесты скучно. А то, что скучно делать, постоянно откладывается. Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions, и в этой статье покажу вам другой, немного странный подход к автоматизированному тестированию.

Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.

Я — большой любитель TypeScript. По возможности я стараюсь использовать этот язык в своих проектах. TypeScript даёт разработчику отчёты об ошибках и проверку типов в JavaScript и TypeScript-коде. Кроме того, тот, кто пишет на TypeScript, может пользоваться удобными возможностями по автозавершению кода, может, быстро и надёжно, выполнять рефакторинг. TypeScript — это первая линия обороны от ошибок в коде. Ещё одна сильная сторона этого языка заключается в том, что он позволяет, при написании программ, пользоваться самыми свежими возможностями JavaScript. При этом то, что получается при преобразовании TypeScript-кода в JavaScript, будет поддерживаться всеми браузерами. Это очень приятно.



Правда, не все фронтенд-проекты предусматривают применение TypeScript. Что если можно было бы пользоваться возможностями TypeScript, но при этом не переводить на него весь проект (и всю команду), и не добавлять в конвейер сборки проекта новый инструмент? Это возможно благодаря VS Code и JSDoc.

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

Что такое Houdini?

Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут расширять CSS, используя JavaScript, влияя на рендеринг CSS и указывая браузеру, как следует применять стили. Это обеспечит значительное повышение производительности и стабильности, нежели использование полифилов.

Гудини состоит из двух групп API — высокоуровневые API и API низкого уровня.

API высокого уровня связаны с процессом рендеринга (стиль — макет — рисование — композиция). Эта группа включает:

• Paint API — позволяет расширять CSS на шаге (имеется ввиду стадия рендеринга) отрисовки визуальных элементов (цвет, фон, границы и т.д.).
• Layout API — позволяет расширять CSS на шаге определения размеров, позиции и выравнивания элементов.
• Animation API — «точка расширения» на шаге отображения и анимирования элементов.

Низкоуровневые API являются основой для высокоуровневых и включают в себя:

• API типизированной объектной модели (Typed Object Model)
• API пользовательских свойств и значений (Custom Properties & Values)
• API метрик шрифта (Font Metrics)
• Ворклеты (Worklets)

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

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

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

В этой статье я хотел бы рассмотреть производительность quartet и её причины.

Статья на тему Краткости и простоты будет 4 апреля.

Будем исследовать этот аспект в сравнении между quartet и другой намного более популярной ajv.