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

Перед вами — оптическая иллюзия Мюллера-Лайера. Возможно, вы её уже видели (в этой статье я использую слово «видеть» в смысле «воспринимать»; не все познают мир через зрение). 

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


Существуют и другие подобные иллюзии.

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

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 вместо глобальных так что все в команде будут использовать одну версию!

Привет Эмберисты!

Приходите на митапы конференции EmberConf, узнайте, как использовать RouteInfo.metadata из EmberMap, попробуйте сэндвич Octane & JAM на EmberConf, изучайте производительность приложения Ember с помощью Tracerbench и попробуйте расширение для VSCode Related Files Hopper!

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

Доброго времени суток, дорогие хабрахабровцы!

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

Alpine Linux — часто рекомендованный как базовый образ для Docker`а. Вам говорят, что использование Alpine сделает ваши билды меньше, а процесс сборки быстрей.

Но если вы используете Alpine Linux для Python приложений, то он:

• Делает ваши билды намного медленней
• Делает ваши образы больше
• Тратит ваше время
• И в итоге может стать причиной ошибок в рантайме

WebGPU — это один из современных API, предназначенных для работы с компьютерной графикой. Среди других подобных API можно отметить Vulkan, DirectX 12 и Metal. То, что в сфере веб-графики появляются подобные решения, даёт пользователям веб-приложений те же возможности, которые есть у пользователей обычных приложений. А именно, это повышение скорости работы программ благодаря использованию видеоускорителей, это сокращение числа проблем, вызываемых графическими драйверами, это появление новых возможностей веб-приложений. Подобные возможности могут опираться как на расширенные функции браузеров, так и на спецификацию.



Надо сказать, что сейчас разработка под WebGPU — это занятие не для слабонервных. Это — один из самых сложных графических API, доступных в вебе. Но неудобства, связанные с разработкой, сглаживает то, что применение WebGPU означает рост производительности, и то, что это — стандарт, а значит можно рассчитывать на то, что в будущем он никуда не денется. Обратите внимание на то, что спецификация WebGPU всё ещё находится в разработке. Поэтому то, о чём пойдёт речь ниже, со временем может измениться.

Здесь мы, осваивая возможности WebGPU, займёмся разработкой приложения Hello Triangle на TypeScript.

Вот репозиторий, в котором можно найти всё необходимое для начала работы с WebGPU.

Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:

• Некий элемент совершенно невидим и, более того, удалён из потока документа.
• Глазами элемент не увидеть, но он присутствует в документе и доступен для ассистивных технологий наподобие средств для чтения с экрана.
• Элемент видим, но скрыт от средств для чтения с экрана.

Статья, перевод которой мы сегодня публикуем, посвящена разбору методов скрытия элементов веб-страниц с использованием HTML и CSS. Здесь будут рассмотрены такие вопросы, как доступность контента, анимация, сценарии использования технологий скрытия данных на страницах.

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

Всем привет. Тема достаточно интересная и может показаться довольно не простой в реализации. Но я человек практический и хочу прикоснуться к прекрасному особо не напрягаясь. Сегодня мы с вами сделаем "микросервис" для анализа сентиментальности / тональности текста. А походу дела, еще несколько интересных вещей которые помогут вам для подготовки своего текстового обращения к Скайнету.

tl;dr Я бы сказал, что Microsoft на несколько световых лет опередила всех в разработке инструментов для проектирования сложных веб-сайтов. Сейчас эти технологии изобретают заново на руинах погибшей цивилизации.



Когда я был ребёнком, меня всегда завораживали истории о древних цивилизациях. Я зачитывался книгами об Атлантиде, об истории открытия Трои Генрихом Шлиманом, о греках, римлянах, империи инков и Древнем Египте. И меня всегда восхищали их продвинутые знания в области астрономии, математики и медицины, их невероятные достижения, возведение этих огромных монументов и построение высокофункциональных социальных систем. Что ещё более невероятно, так это то, что всё это было сделано за тысячи лет до появления христианской культуры!

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

Есть такая штука, называется SSRF. Про нее написано немало, но все же, я расскажу тебе вкратце.

Допустим, ты заходишь на сайт, заполняешь профиль и доходишь до пункта “загрузить аватарку”. А у тебя выбор — загрузить файл или указать ссылку.

Автор заметки, перевод которой мы сегодня публикуем, хочет рассказать о некоторых особенностях использования циклов for в Python.



Цикл for — это один из краеугольных камней программирования. С этими циклами будущие программисты знакомятся в самом начале учёбы и, после первого знакомства, пользуются ими постоянно.

Я уверен, что среди уважаемой аудитории найдутся те, кто меня поймет. Дело в том, что во всем изобилии популярных библиотек и фреймворков для веб-фронтэнда, лично мне, не нравятся, практически, все альтернативы. В каждом из вариантов я нахожу для себя существенные минусы, которые не дают мне спокойно ими пользоваться. Начинается всегда все радужно: интересный концепт, здравые, на первый взгляд, рассуждения в пунктах «за»… Но затем, все, снова и снова, начинает упираться в избыточные зависимости, лишние сущности и попытки решить проблемы, которые разработчики сами же и создали. Нам предлагают выучить новый синтаксис, принять новые идеи, узнать кучу умных слов, установить множество «необходимых» пакетов. Ок, я люблю все новое, и люблю умные слова. Но меня сильно обескураживает, когда то, что можно сделать просто, люди начинают фрактально усложнять. Вы наверняка уже читали исповеди тех, кто также как и я, отчаялся искать во всем этом здравый смысл и решил уйти в другую крайность — все писать «на ваниле». Со мной это случилось, когда я разочаровался в проекте Polymer, создаваемом при активном участии разработчиков из Google. Сначала мне все очень нравилось, девизом этого движения была фраза «Use the platform!», что для меня означало: «не стоит делать в коде того, что браузер сам сделает эффективнее». Команда Polymer сделала очень многое для внедрения новых стандартов и возможностей на уровне платформы, и за это им — огромное спасибо. Но когда эти цели были достигнуты, они сами принялись нарушать свои-же принципы. И вот их новая библиотека (LitElement) уже отказывается работать напрямую в браузере без установки специального окружения, потому как ребята не следуют стандартам… Я продолжаю наблюдать за развитием LitElement, и даже вижу явные признаки возвращения этих заблудших на путь истинный, но сам я этим уже пользоваться не буду, потому, что теперь у меня есть кое-что получше.

Задавались ли вы когда-нибудь вопросом о том, почему размер Docker-контейнера, содержащего всего одно приложение, может находиться в районе 400 Мб? Или, может быть, вас беспокоили немаленькие размеры образа Docker, содержащего единственный бинарник размером в несколько десятков Мб?



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

Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.

Каким приемам Svelte я научился, читайте под катом.

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

Расширяемость (Extensibility)

Расширяемость это когда вы можете взять технологию и расширить ее для своих нужд. На протяжении нескольких лет мы используем компоненты повсюду, как в качестве разработки приложений (компоненты на React, Vue, Svelte) так и в качестве разработки дизайна (дизайн системы).

На данный момент мы пытаемся сделать эти компоненты более уникальными и удобными для использования. Расширяемость в вебе позволяет нам использовать платформу (браузеры, html/css/js движки) для собственных нужд и экспериментов, разумеется для получения большей выгоды.

Привет!

15 февраля, в субботу, приглашаем на очередную встречу сообщества PHP-разработчиков в офисе Badoo. 

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

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

Регистрация по ссылке, обязательная (важно: пишите свои данные кириллицей). Не забудьте дождаться подтверждения участия, оно придет дней за 10 до митапа. 

Первый доклад в 12:00. В программе пять докладов, практически не ограниченное свободное общение за кофе, викторина, розыгрыш билета на PHPRussia, а в качестве afterparty — очередная встреча сообщества BeerPHP Moscow. 

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

Если Вы следите за релизами TypeScript, то знаете, что опциональная цепочка (Optional Chaining) и объединение с null (Null Coalescing) были представлены в TypeScript 3.7. Также эти фичи по умолчанию включены в Babel 7.8.0. Это одни из главных претендентов на роль особенностей JavaScript. В настоящее время они находятся на 4 и 3 стадиях рассмотрения, соответственно (23 января был принят стандарт ECMAScript 2020, где есть и опциональная цепочка, и объединение с null, и еще парочка занимательных вещей; я в курсе, что недавно на Хабре вышла статья-перевод про особенности, которые привнес в JS ES2020, однако, полагаю, парочка лишних примеров не повредит — прим. пер.).

В статье речь идет о state colocation, то есть о совместном размещении состояний, этот термин можно было бы еще перевести как стейт колокейшн или стейт колокация.

Одной из основных причин замедления работы React приложения является его глобальное состояние (global state). Я покажу это на примере очень простого приложения, после чего приведу более близкий к реальной жизни пример.

Вот простенькое приложение в котором можно ввести имя для собаки (если окно не работает, вот ссылка):

Если вы поиграете с этим приложением то вскоре обнаружите что оно очень медленно работает. При взаимодействии с любым полем ввода возникают заметные проблемы с производительностью. В такой ситуации можно было бы использовать спасательный круг в виде React.memo и обернуть им все компоненты с медленным рендером. Но давайте попробуем решить эту проблему по другому.

Вот код этого приложения: