Итак, вы решили сделать новый проект. И проект этот — веб-приложение. Сколько времени уйдёт на создание базового прототипа? Насколько это сложно? Что должен уже со старта уметь современный веб-сайт?

В этой статье мы попробуем набросать boilerplate простейшего веб-приложения со следующей архитектурой:

Что мы покроем:

• настройка dev-окружения в docker-compose.
• создание бэкенда на Flask.
• создание фронтенда на Express.
• сборка JS с помощью Webpack.
• React, Redux и server side rendering.
• очереди задач с RQ.

Всем привет, меня зовут Ярослав Астафьев, и сегодня я хотел бы провести обзорную экскурсию в тестирование ReactJS. Я не буду углубляться в сложности тестирования веб приложений с использованием определенных библиотек (руководствуясь подходом «сложно тестировать только плохой код»), взамен постараюсь разнообразить ваш кругозор. Так что в этой статье React — скорее повод собрать воедино подходы к тестированию, отправная точка, объединяющая хипстеров и технологии. Корректнее будет даже сказать, что речь пойдет о принципах тестирования вообще с иллюстрациями на ReactJS (и не только).

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



Если введение не вызвало приступ синестезии — добро пожаловать под кат.

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



Как бы не так. Ничего подобного вы сделать не можете, потому что у Tinder патент на жесты «провести вправо, чтобы поставить лайк» и «провести влево, чтобы поставить дизлайк». «Ну, ладно», — думаете вы. «Это ведь визитная карточка всего их приложения, тогда пусть никто никуда не проводит, а просто сделаем MVP, где под пиццей будут кнопки для лайков и дизлайков». Увы, дружок: Tinder запатентовал и это.

Под катом — вторая часть перевода статьи о том, как крупные, известные компании защищают свои дизайн-решения (и какие именно). Примерное представление о том, как происходит процесс оформления прав на тот или иной интерфейс, можно получить в первой части.

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

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



Постараемся коротенько, как обычно:

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

• назначать иконку приложения в строке меню
• делать приложение размещенным только в строке меню
• добавлять пользовательское меню
• показывать всплывающее по запросу пользователя окно и прятать его, когда необходимо, используя Event Monitoring

Замечание: это руководство предполагает, что вы знакомы со Swift и macOS.

На YouTube много бесплатных обучающих и курсов и туториалов.



Я веду freeCodeCamp, YouTube канал без рекламы. У нас есть полные видеокурсы и учебные пособия по многим популярным языкам программирования и фреймворкам (включая JavaScript, Python, Java, Ruby, C, C ++, Angular и не только).

Есть и другие YouTube каналы с бесплатными уроками по программированию, которые ничуть не хуже, а иногда даже лучше, чем платные.

В этой статье я перечисляю десять YouTube каналов, которые можно посмотреть, чтоб прокачаться в программировании. Расположение каналов — случайное.

Бывает полезно посмотреть одну и ту же тему у разных преподов, так можно глубже разобраться в вопросе.

Есть много отличных каналов, для которых у меня не хватило места в этом списке. Поделитесь своими находками в комментах.

Привет, Хабр! Представляю вашему вниманию перевод с англ. статьи Pitching Flutter to your company or client (автор Wm Leler)

С момента публикации статьи What’s Revolutionary about Flutter прошло больше года (и этот материал всё ещё актуален). Когда я писал ту статью, лишь немногие мобильные разработчики слышали о Flutter, но с тех пор многое изменилось. Сейчас я не успеваю следить за потоком новых статей и видео, которые появляются в этом активном и постоянно развивающемся сообществе. Разработчики открыли для себя Flutter, и они от него без ума. Вот пример приложения от Reflectly, созданного с помощью Flutter:


Умное приложение-дневник Reflectly

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

Руководство организовано как последовательность шагов — выбор архитектуры → выбор технологий для вычисления и хранения данных → проектирование приложения Azure → выбор шаблонов → проверка архитектуры. Для каждого из них приведены рекомендации, которые помогут вам при разработке архитектуры приложения.

Автор электронной книги — Эдди Османи, один из руководителей разработки Google Chrome

tl;dr

Cжатие изображений всегда должно быть автоматизировано

Оптимизацию графики обязательно надо автоматизировать. О ней легко забыть, рекомендации меняются, да и сам контент может легко проскользнуть мимо конвейера сборки. Для автоматизации при сборке используйте imagemin или libvips. Есть и много других.

Большинство CDN (например, Akamai) и сторонних решений вроде Cloudinary, imgix, Fastly Image Optimizer, Instart Logic SmartVision и ImageOptim API предлагают комплексные автоматизированные решения для оптимизации изображений.

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

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

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

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

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

Хотя сам продукт имел очень общее назначение, клиенты обычно использовали его для конкретных задач. Эти задачи выжимали максимум из CMS, а разработчикам приходилось искать решение проблем. После десяти лет работы в таком окружении я узнал огромное число способов, как может сломаться веб-приложение в продакшне. Некоторые из них обсудим в этой статье.

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

Если вы начали работу в таком окружении, а затем приступили к созданию и развёртыванию веб-приложения с нуля, то очень быстро узнаете, что такое «до опасного поверхностные знания».

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

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

Сегодня я расскажу вам, как мы делали микросервисный фронт в нашем SaaS-решении и с какими проблемами столкнулись.

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

Заголовок статьи звучит как epic fail, но на самом деле все не так однозначно. Да и в общем и целом эта история закончилась весьма позитивно, хоть и не в Google. Но это уже тема для другой статьи. В этой же статье я расскажу о трех вещах: каким образом проходил мой процесс подготовки, каким образом проходили интервью в Google и почему же на мой взгляд все не так однозначно, как может показаться.

В наши дни веб-сервисы постоянно подвергаются самым разным атакам. Поэтому безопасность — это то, о чём стоит помнить на всех этапах жизненного цикла проектов. Авторы материала, перевод которого мы сегодня публикуем, поддерживают репозиторий на GitHub, содержащий около 80 рекомендаций по обеспечению безопасности приложений, работающих на платформе Node.js. В этом материале, базой для которого послужило множество публикаций, посвящённых безопасности, собрано более двух десятков рекомендаций, касающихся Node.js, и некоторые советы общего характера. При этом данный материал покрывает топ-10 уязвимостей из списка проекта OWASP.

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

Мы попросили поделиться своим кейсом разработки и доставки микросервисов Алексея Баитова, ведущего инженера 2ГИС. Поговорим на тему архитектурных решений, деплоя и возможности масштабирования. Расспросим про трендовые и просто удобные инструменты для работы.

Процесс работы пользователей с интерактивными веб-сайтами может включать в себя шаг отправки им JavaScript-кода. Часто — слишком большого объёма такого кода. Если на сайте используется очень много JavaScript, это особенно сильно сказывается на мобильных пользователях. Например, вам случалось бывать на мобильных веб-страницах, которые, вроде бы, выглядят как уже готовые к работе, но не реагируют на щелчки по ссылкам или на попытки прокрутить страницу?


JavaScript-код, который попадает в мобильные браузеры, всё ещё остаётся самым дорогостоящим ресурсом, так как он, многими способами, может задержать переход страниц в состояние, в котором с ними можно взаимодействовать. Какую нагрузку на системы создаёт JavaScript в наши дни? Как анализировать сайты? Как ускорить загрузку и обработку браузерами интерактивных веб-страниц? Эдди Османи, перевод материала которого мы сегодня публикуем, решил найти ответы на эти и на многие другие вопросы, встающие перед теми, кто пользуется JavaScript для разработки веб-сайтов в 2018 году.

До того, как написанный нами код будет исполнен, он проходит довольно долгий путь. Андрей Мелихов в своем докладе на РИТ++ 2018 разобрал каждый шаг на этом пути на примере движка V8. Заходите под кат, чтобы выяснить, что даёт нам глубокое понимание принципов работы компилятора и как сделать JavaScript код производительнее.



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

Спойлер: «Преждевременная оптимизация — корень всех бед», Дональд Кнут.



О спикере: Андрей Мелихов работает в компании Яндекс.Деньги, активно пишет на Node.js, а в браузере — меньше, поэтому ему ближе серверный JavaScript. Андрей поддерживает и развивает сообщество devShacht, заходите познакомиться на GitHub или Medium.