Веб-разработка *

Всем привет! Меня зовут Владислав Родин. В настоящее время я преподаю на портале OTUS курсы, посвященные архитектуре ПО и архитектуре ПО, подверженного высокой нагрузке. Сейчас в OTUS'е открыт набор на новый поток курса Разработчик на Spring Framework. В преддверии старта курса я решил написать небольшой авторский материал, которым хочу поделиться с вами.

---

Предыстория

Spring содержит внутри себя много «магии», осуществляя самостоятельно некоторые неочевидные вещи. Незнание или непонимание этого может приводить к side-эффектам, с которыми вы можете столкнуться в процессе написания своего приложения, используя данный framework.

Одной из таких неочевидных вещей является injection интерфейсов Java Collection Framework'а. Самостоятельно наступив на грабли, связанные с этой темой, и услышав очередные вопросы от коллег, я решил с ней разобраться и зафиксировать результаты своих исследований в виде статьи с надеждой, что она кому-то поможет уже в работе или при начальном освоении Spring'а.

Коронавирус типа 2019-nCoV, после вспышки заболевания в китайском городе Ухань, стремительно распространяется по миру. На момент написания оригинальной статьи (30 января 2020 года) сообщалось о более чем 9000 заражённых и о 213 умерших, на сегодня (10 февраля 2020 года) сообщается уже о 40570 зараженных, 910 человек умерло. Случаи заражения коронавирусом выявлены во Франции, в Австралии, в России, в Японии, в Сингапуре, в Малайзии, в Германии, в Италии, в Шри-Ланке, в Камбодже, в Непале и во многих других странах. Никто не знает о том, когда вирус будет остановлен. Пока же число подтверждённых случаев коронавируса лишь растёт.

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

Интерактивная карта распространения коронавируса типа 2019-nCoV

Здесь будут использованы такие технологии, как Python 3.7, Pandas, Plotly 4.1.0 и Jupyter Notebook.

Свежая подборка со ссылками на новости и материалы. В выпуске: PHPUnit 9 и другие релизы, 3 свежих RFC предложения из PHP Internals, порция полезных инструментов, видео, подкасты и многое другое.

Приятного чтения!

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

На Real World отсутствует пример для aiohttp, и я решил его сделать. Опытным разработчикам, похоже, некогда этим заниматься, а начинающим в aiohttp непонятно как делать правильно. Я начал его делать с помощью Tortoise ORM. Пока начал делать аутентификацию.

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

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

Хочу поделиться опытом работы с аудио. Под «аудио» я подразумеваю HTMLAudioElement и Web Audio API.

Что будем делать?

Мы создадим нечто вроде плеера для одного трека (о полноценном проигрывателе — в одной из следующих статей).

Условия:

• Возможность загрузки файла из любого места на жестком диске как по нажатию кнопки, так и перетаскиванием.
• Круговой графический и текстовый индикаторы прогресса.
• Текстовый индикатор громкости звука.
• Визуализация аудио данных.
• Управление плеером с помощью клавиатуры.

В сети полно материалов как по HTMLAudioElement, так и по WAAPI, поэтому я сделаю акцент на практической составляющей. Кроме аудио, мы будем работать с drag-drop и canvas.

Без дальнейших предисловий…

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

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

В вопросах, которые показались мне сложнее прочих, приведены ссылки на дополнительную литературу.

Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.

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

Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеке.

ЧЕТВЕРТАЯ ЗАДАЧА

В работе с данными важно иметь возможность выполнить несколько типов операций. В web разработке за это отвечает CRUD — четыре базовые функции. У библиотеки Webix есть все средства для реализации CRUD. Основой для решения новых задач мне послужит материал из предыдущих публикаций: создание интерфейса приложения, модулей проекта и работа с формами.

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

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

Попытаемся отфильтровать информацию и записать основную формулу. Мы собираемся пошагово масштабировать наш новый сайт для обмена фотографиями Graminsta с 1 до 100 000 пользователей.

Запишем, какие конкретные действия необходимо сделать при увеличении аудитории до 10, 100, 1000, 10 000 и 100 000 человек.

Привет, Хабромир! Последний год мы с командой провели, создавая свой стартап «Конструктор чат-ботов для бизнеса Botlify», и я хотел бы поделиться с аудиторией небольшой историей проекта и о принятых технических решениях. В этом посте я постараюсь максимально сконцентрироваться на технических деталях и меньше углубляться в продукт и бизнес, несмотря на то, что в этом проекте моя роль намного меньше связана с разработкой и технологиями. Данный материал основан на моем личном опыте, я не стартап-коуч и не претендую на звание хорошего программиста, менеджера, архитектора или предпринимателя. Мы относительно молодой стартап, у которого не много пользователей, так что тут не будет ничего про нагрузки и проблемы больших проектов. Под катом я расскажу как начинался мой проект, на какие разработческие грабли мы наступали и какие выводы делали.

Привет, Хабр!

За последнее время я заметил целый ряд статей с разного рода критикой веб-компонентов. Порой, эта критика весьма жесткая и даже попахивает хейтерством. На мой взгляд, основной проблемой тут является отсутствие наработанной практики работы с этой группой стандартов у сообщества разработчиков. Многие привычные модели не всегда органично вписываются в проекты с участием Custom Elements и Shadow DOM, на многие вещи приходится смотреть под новым углом и не всем это нравится. Я вполне успешно работаю с веб-компонентами уже несколько лет и даже разрабатываю собственную библиотеку на их основе, поэтому считаю такую ситуацию не очень справедливой. Постараюсь, хотя бы частично, это исправить, по мере моих скромных сил. Я решил сделать серию компактных публикаций, в каждой из которых я планирую затронуть один из частых аспектов критики, а так-же продемонстрировать ряд технических приемов, которые могут оказаться интересными тем, кто еще не определился с тем, на какой стороне баррикад ему быть. Сегодня я хотел бы рассказать о том, как создавать компоненты без Shadow DOM.

Вышла 9 версия Angular, это основной релиз, охватывающий всю платформу, включая сам фреймворк, angular material и CLI. В этом релизе приложения по умолчанию переключаются на компилятор и рантайм Ivy и, а также представляются улучшенные способы тестирования компонентов.

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

ххх: на чём пишешь фронтенд?
yyy: на костылях и велосипедах
ххх: ммм, хороший фреймворк!
Bash.im

Когда приходит мысль стать программистом, ты вдохновенно открываешь справочник Шилдта по С, заказываешь толстую книгу Страуструпа по С++ и учишься шутить про указатель на указатель на указатель и про рекурсию. Жёсткая романтика первого времени… Но всё меняется, когда в твою жизнь случайно приходит JavaScript. «Какой он простой, понятный, какой классный синтаксис! Всё, решено, буду писать сайты», — думает начинающий программист и решает стать гуру всея веба. Но потом выбранный стек меняет своё дружелюбное лицо, и чем дальше, тем больше. Но ты уже не можешь остановиться, потому что ты один из них — фронтенд-разработчиков. Тех самых, которые «смотрящие за мордой сайта». Ну что, захотелось присоединиться? Тогда для вас 2 серия нашего спецраздела «Профессия:…»

Мы уже готовили эту статью, когда в среду вышел пост «Хабр Карьеры» с интервью представителя онлайн-школы о работе фронтенда, что не могло не радовать: значит, в нашей серии «Профессия:..» появится очередной нужный, полезный, актуальный материал. Кстати, первый выпуск был посвящён профессии системного администратора. 

Веб-скрапинг — это метод сбора данных с веб-сайтов. Этот термин обычно используется в применении к автоматизированному сбору данных. Сегодня мы поговорим о том, как собирать данные с сайтов анонимно. Причина, по которой некто может захотеть анонимности в деле веб-скрапинга, заключается в том, что многие веб-серверы применяют определённые правила к подключениям с IP-адресов, с которых за некий отрезок времени выполнено какое-то количество запросов. Здесь мы будем пользоваться следующими инструментами:

• Puppeteer — для доступа к веб-страницам.
• Cheerio — для парсинга HTML-кода.
• Tor — для выполнения каждого запроса с различного IP-адреса.

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

Я десять лет тестирую и пишу код, а последние четыре года — тестирую доклады в программном комитете конференции Heisenbug. Сегодня расскажу о сквозных тестах, кросс-браузерности и ощущениях от использования Playwright версии 0.10.0.

Из конца в конец

Зачем нужны сквозные (end-to-end) тесты? Они управляют браузером и имитируют действия пользователя. Например, я описал пользовательские сценарии и хочу, чтобы они были проверены с каждой версией продукта. Проверять все сценарии для всех версий вручную — дороже и дольше, чем автоматикой.

Есть разные инструменты: Selenium, Puppeteer, Protractor, Cypress и другие. Две недели назад вышел новый инструмент — Playwright, над которым работал Андрей Лушников, разработчик Puppeteer. Эта библиотека полностью решает проблему написания кросс-браузерных тестов.

Если вы регулярно пишете приложения на Angular и потратили на это не одну сотню часов, вы, скорее всего, знаете об этих функциях. Но, всё же, чтобы убедиться — прочтите :)

Прежде чем мы перейдем к функциям Angular, стоит упомянуть один очень полезный инструмент. Bit (Github) позволяет с легкостью работать над Angular-компонентами вместе и делиться ими. От души рекомендую его для поддержания консистентного интерфейса, ускорения разработки и минимизации количества ошибок в коде.


Пример: Круговые загрузчики для Angular с bit.dev

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



Статья, перевод которой мы публикуем, нацелена на разбор особенностей устройства низкоуровневых строительных блоков библиотек глубокого обучения. Сначала мы кратко поговорим о сущности глубокого обучения. Это позволит нам понять функциональные требования к соответствующему программному обеспечению. Затем мы рассмотрим разработку простой, но работающей библиотеки глубокого обучения на Python с использованием NumPy. Эта библиотека способна обеспечить сквозное обучение простых нейросетевых моделей. По ходу дела мы поговорим о различных компонентах фреймворков глубокого обучения. Библиотека, которую мы будем рассматривать, совсем невелика, меньше 100 строк кода. А это значит, что с ней будет достаточно просто разобраться. Полный код проекта, которым мы будем заниматься, можно найти здесь.

Rust становится первоклассным языком в самых разных областях. Мы в Discord успешно используем его и на серверной, и на клиентской стороне. Например, на стороне клиента в конвейере кодирования видео для Go Live, а на стороне сервера для функций Elixir NIF (Native Implemented Functions).

Недавно мы резко улучшили производительность одной службы, переписав её с Go на Rust. В этой статье объясним, почему для нас имело смысл переписать службу, как мы это сделали и насколько повысилась производительность.

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

«Отзывчивый» является одним из стандартов веб-разработки. Существует большое количество разрешений экрана, и это количество все время увеличивается. Мы стремимся поддерживать все возможные размеры экранов с сохранением дружелюбного пользовательского интерфейса. Отличным решением данной задачи являются медиа-запросы (media-queries). Но что насчет веб-компонентов? Современная веб-разработка основана на компонентах, и нам нужен способ делать их отзывчивыми. Сегодня я хочу рассказать о ResizeObserver API, позволяющим следить (наблюдать) за изменениями размеров конкретного элемента, а не всей области просмотра (viewport), как в случае с медиа-запросами.

Заключительная часть статей, посвященных тому, как можно использовать принципы чистого кода в TypeScript(ps. Все эти принципы относятся не только к языку TypeScript).