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

Привет! Собрали события недели в один список, и сами немного удивились количеству митапов про микросервисы и про данные. А еще собрали способы получать обновления, потому что список мероприятий ниже станет неполным уже буквально завтра, когда команда сайта https://meetups-online.ru/ найдет и добавит еще пару ивентов.

Так вот, обновления можно получать из RSS, если есть привычка пользоваться ими.

Перетаскивать события из RSS в телеграм может этот бот: @EventMonkeyBot

Еще один бот, но с другой механикой — может присылать мероприятия по выбранным тэгам: @meetup_finder_bot его сделали ребята-подростки, пока учились работать в команде.

Договор на разработку, формирующий правильное взаимодействие заказчика с исполнителем, закрывающий риски и регламентирующий все этапы работы — довольно непростая вещь. Мы строили свой 2 года, собирая обратную связь от клиентов с одной стороны и проектной команды с другой. Стратосфера — веб-интегратор, специализирующийся на е-коммерс, b2b и цифровой трансформации. Соответственно, вся статья дальше будет написана на примере именно веб-разработки.

Как всем известно, JavaScript — это язык, который очень быстро развивается. В стандарте ES2020 имеется немало новых возможностей, с которыми вам, вероятно, захочется познакомиться поближе. Честно говоря, писать JS-код можно по-разному. Различные варианты кода, направленные на решение одной и той же задачи, способны дать один и тот же результат, но некоторые из этих вариантов кода могут оказаться значительно короче и чище других. Для того чтобы сделать код качественнее и понятнее, можно пользоваться всяческими полезными приёмами. О некоторых из таких приёмов речь пойдёт в материале, перевод которого мы сегодня публикуем. Надеемся, то, о чём вы сегодня узнаете, когда-нибудь вам пригодится.

Сегодня хотел бы поговорить о заказчиках, исполнителях. Речь пойдёт о простых сайтах для захвата контактов на товар\услугу. Не берём e‑commerce, сервисы и прочее.

Заказчик

Для чего вообще заказчики (предприниматели) хотят иметь собственным сайт?

Как бы мы не мечтали, что заказчики знают зачем им сайт, на деле ими движут странные мотивы и идеи.

Есть, конечно, клиенты знающие зачем они пришли к исполнителю, но таких единицы. Чем дальше от Москвы, тем хуже ситуация с пониманием.

Существует немало npm-пакетов, предназначенных для разбора и обработки multipart/form-data-запросов на Node.js-сервере. Каждый из них спроектирован по-особенному. Некоторые предназначены для использования с Express.js, другие рассчитаны на автономное применение. Некоторые хранят промежуточные файлы на жёстком диске или в памяти, а некоторые — нет. Исследование всех этих пакетов и выбор того, который подойдёт именно вам, может занять определённое время. Материал, перевод которого мы публикуем сегодня, представляет собой руководство, воспользовавшись которым можно выбрать подходящую библиотеку для организации выгрузки файлов на сервер. Тому, кто подбирает подобную библиотеку, автор этого материала рекомендует сначала ответить на следующие вопросы:

1. Нужен ли вам Express.js?
2. Устроит ли вас сохранение где-либо промежуточных данных, или вы хотите использовать потоковую передачу данных?
3. Если сохранение промежуточных данных вас устроит, предпочтёте ли вы, чтобы они хранились бы в памяти, или на жёстком диске?

Эссе 2004 года

В течение многих лет работающие над своим имиджем умники, такие, как… ну, я, например, бесконечно болтали о юзабилити и о том, как важно сделать программное обеспечение удобным для использования. У Якоба Нильсена есть математическая формула, которую он откроет вам всего за 122 доллара: с помощью неё вы сможете рассчитать значение юзабилити. (Если ожидаемое значение юзабилити больше 122 долларов, думаю, вы получите прибыль.)

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

В этой книге на странице 31 я показал пример того, что в то время было самой популярной программой на Земле — Napster. На главном окне Napster находились кнопки для переключения между пятью экранами. В соответствии с принципом юзабилити, который называется «affordance», вместо кнопок у него на самом деле должны были быть вкладки, что я и хотел продемонстрировать этим примером.



И все же Napster был самой популярной программой на Земле.

Состоялся релиз Adonis JS 5, на данный момент разработчики называют его preview версией, хотя в своем Discord они утверждают что по сути это production-ready версия фреймворка, а названа она preview потому-что еще не все необходимые пакеты были переписаны под версию 5, их скромности стоит позавидовать, от себя скажу что, версия 5 действительно заслуживает широкого внимания, на мой взгляд это один из лучших и простых фреймворков на которых стоит делать backend в 2020+ годах.

AdonisJS это Laravel-подобный фреймворк на NodeJS а теперь еще и на Typescript

Подавляющее большинство веб-приложений как-то взаимодействует с окружающим миром. Например, с REST API серверных частей приложений или с некими внешними сервисами. Материал, перевод которого мы сегодня публикуем, посвящён обработке данных на границах приложений. В частности, речь пойдёт о том, как преобразовывать данные, поступающие в приложение из внешних источников, в правильно сформированные объекты тех типов, на работу с которыми рассчитано приложение.

wkhtmltopdf — это один из самых мощных инструментов для генерации PDF. Он позволяет использовать в генерируемом документе все возможности HTML и CSS. «Под капотом» у него движок WebKit, так что результат почти в точности соответствует выводу «Print to PDF», встроенному в Chrome. Судя по вопросам на Stack Overflow, wkhtmltopdf используется для генерации карт, графиков, бухгалтерских отчётов, подарочных сертификатов, и практически любого другого контента, который в конечном счёте должен оказаться распечатанным на бумаге.

Мой давний заказчик с помощью wkhtmltopdf генерирует PDF-инвойсы в своём веб-магазине. При печати в «шапке» инвойса должен отображаться чёрно-белый логотип, тогда как на сайте используется цветной. Очевидное решение — подменить изображение в CSS @media print { ... } Но тут обнаружилась проблема: если изображение не используется вне @media print, то оно не загружается и при печати (этот баг можно заметить и в окне Print Preview самого Chrome).

Привет, меня зовут Лёша, я работаю в SEMrush в команде SRE, которая занимается обеспечением бесперебойной работы нашего сервиса. Эта история о том, как мы разогнали деплой в 6 раз и сократили затраты на мониторинг в 3 раза. И все это через приручение канареек и самописные инструменты.

Я расскажу, как мы улучшали релизный пайплайн с помощью канареечного деплоя. Так, за пару лет мы прошли путь от «надо бы попробовать» до самописного тулинга.

Большинство знает Kurento, как WebRTC медиа-сервер. Но в их репозитории на git-хабе можно найти много чего интересного. Например, библиотека работы с JSON-RPC, которая берет на себя контроль сессии и управление протоколом.

В этой статье я расскажу как использовать это решение на Java. Сделаем простейший сервер на Spring Boot и клиент на JavaScript.

На модальных окнах, на рекламных объявлениях, на других подобных всплывающих элементах веб-страниц часто можно найти кнопку «Закрыть» с соответствующим символом. Эти кнопки позволяют пользователям (по крайней мере — некоторым из них) закрывать окна. Возможность щёлкнуть по кнопке «Закрыть» часто доступна только тем посетителям веб-страниц, у которых есть мышь. Дело в том, что большинство реализаций подобных кнопок далеко не идеально. В материале, перевод которого мы сегодня публикуем, будет рассмотрено 11 проблемных паттернов, которые используются при создании кнопок «Закрыть», а также — способы решения проблем этих паттернов. Здесь же речь пойдёт и об удачных способах создания кнопок «Закрыть».

В иерархии фронтенд-разработки верстальщики располагаются где-то здесь: 


Фронтенд-разработка в 2020, холст, масло

В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

В прошлый раз, когда мы делали to-do на Alpine.js, меня очень сильно расстроило, что, хоть я и могу создавать вложенные компоненты, я не могу получать данные из родителя. Через какую-нибудь переменную, $parent, например.

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

Если вы подумали, что это не очень хорошо, то вы не правы. На самом деле, это ужасно.

Всё, расходимся? Нет. Я еще раз полистал документацию и вспомнил про магическое свойство $dispatch. Ну, конечно… однопоточная связь, проброс событий. Ну давайте попробуем. А потом еще переосмыслим всё с глобальным store.

Цвета играют жизненно важную роль в формировании внешнего вида веб-страниц. С помощью CSS мы можем управлять основным цветом элементов и их фоновым цветом. Для этого, соответственно, используются свойства color и background. Когда, много лет назад, я изучал CSS, мне не удалось найти доходчивого руководства по использованию цветов в CSS. Поэтому я решил написать такое руководство сам. В этом материале я расскажу о типах цветов и о ключевых словах, используемых при работе с цветами. Мы поговорим о том, в каких ситуациях используются те или иные методики работы с цветами и рассмотрим примеры. Сразу скажу, что здесь я не буду касаться теории цвета.

Подборка новых статей по фреймворку Laravel. Обсудим дефолтные контроллеры, настроим мидлвары и подключим Paypal. Также посмотрим новую админку, позагружаем видео на сайт, отрефакторим код вместе со Spatie и погоняем тесты. Плюс еще много всего вкусного!

Фото: Taylor Otwell

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

Здравствуй, уважаемый %habrauser%. Около 3 лет назад я написал статью о том Как я создал систему установки принтеров на работе. Не могу не согласится с комментариями и отзывами от прошлой статьи, гласящие о том, что для установки принтеров можно воспользоваться групповыми политиками, но в мире в enterprise, больших или малых, возможны и другие случаи разного характера когда не смотря на наличие домена и групповых политик не представляется удобным\возможным разворачивать принтеры через GPO-шки. Учитывая собранный опыт и отзывы пришло время показать о моей новой переписанной системе с гораздо большим и удобным функционалом с сохранением минимализма, и я надеюсь, что кому-то она пригодится. В статье я также расскажу о том, с какими трудностями я столкнулся при создании этой системы. Кому стало интересно добро пожаловать под кат. Осторожно! Будет много картинок!

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



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

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

Сервисы в этой сфере разделены на две группы по основному функционалу: к первой относятся площадки, дающие возможность создать непосредственно дизайн — Figma, Adobe XD, Sketch, InVision Studio — в них вы не соберете сайт, но разработаете его прототип и дизайн-макет. Вторая группа сервисов имеет расширенный функционал, здесь дизайнер может создать сайт с нуля: от прототипа до реализации — Pixli, Webflow и Tilda

Figma, Adobe XD, Sketch, InVision Studio: разработка дизайна и прототипов

Figma

Figma — сервис для дизайнеров интерфейсов и веб-разработчиков. В первую очередь, это онлайн-приложение, но можно воспользоваться и десктопной версией: файлы будут размещены на локальном хранилище, но их можно в любой момент импортировать в облако. Помимо основного функционала предусмотрены легко подключаемые плагины для множества целей: «Если вы можете создать сайт, вы можете создать плагин».