Советов «как ускорить веб-приложение» в интернете немало. Но при попытке применить их на деле может вспоминаться мем «делойте хорошо а плохо не делойте». Ситуации очень различаются, и универсальные рецепты плохо подходят.
Поэтому на нашей конференции HolyJS Наталья Стусь поделилась тем, как выглядела работа над производительностью не в «вакууме», а конкретно в случае Авто.ру. Конечно, раз всё индивидуально, вы не сможете тут же сделать всё в своём проекте «точно так же». Но вот извлечь какие-то полезные принципы и понять, на что обратить внимание, вполне можно. Участникам конференции доклад понравился, и теперь для Хабра мы сделали его текстовую версию (а для тех, кто предпочитает видео, доступна запись).
Конечно же, после смерти Flash веб не превратился в простую, скучную плоскость. К старту курса по фронтенду показываем, как при помощи Three.js и технологии WebGL создать магический шар с анимацией внутри объёма. Автор статьи не только опубликовал код на CodePen для удобной демонстрации, но и добавил на страницу ползунки, чтобы вы могли экспериментировать с шаром и сразу видеть результат. В конце вы найдёте ссылку на исходный код на Github и демонстрацию не на CodePen.
К старту курса по Frontend-разработке делимся переводом подборки различных инструментов: от генератора CSS, который рассчитывает пространство так, что брейкпоинты (контрольные точки) заменяются переменными, до редактора анимации прямо в браузере, а также средства масштабирования для отзывчивости в SVG и даже визуализатора специфичности CSS, который пригодится при анализе больших таблиц стилей. Мы структурировали и, где это было возможно, расширили оригинал, добавив информацию и примеры из репозиториев и официальных описаний инструментов.
Вам больше не помогут no-cache или max-age заголовки, вы просто не знали и не могли узнать о механизме обновления SW. Потому что про него вам не говорили.
Кроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного
Я собрал список из десяти отличных репозиториев на Github, которые помогут вам существенно расширить свои знания.
А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
У webpack'а есть много полезных плагинов, о которых многие не знают и не используют в своих проектах. Под катом я собрал 5 таких, они могут здорово упростить вам жизнь!
Когда-то давно я получил высшее образование по физике. Позже еще самостоятельно выучился на веб-программиста. С тех пор я преимущественно работаю программистом, но продолжаю уделять время и физике, и технике (что-нибудь рассчитываю или конструирую), и науке в целом. Подобное «раздвоение» приносит интересные результаты. Оказалось, что некоторые факты в физике можно хорошо объяснить с помощью программирования.
Откуда вообще возник такой вопрос? У старшего ребенка в школе было занятие про планеты Солнечной системы. В целом, он их знает, и на вечернем небе мы видели некоторые (Юпитер, Марс, Сатурн). Но многие интересные факты остаются за пределами понимания. Не хватает наглядности, движения, может быть, интерактивности. Вот именно этот пробел в подаче материала я и захотел заполнить с помощью веб-программирования, следуя известной мудрости «лучше один раз увидеть, чем сто раз услышать».
Как вы уже догадались, в статье речь пойдет о фактах, касающихся Солнечной системы (не только о планетах). Давайте посмотрим, что есть такого любопытного в нашем галактическом уголке.
Появилась как-то задача подключатся по VPN к рабочей сети, чтобы иметь доступ к внутренним ресурсам.
Средствами Мака это можно сделать создав VPN подключение и 2 варианта:
1. поставить галочку «Слать весь трафик через VPN подключение»
2. статически прописать статически route add -net 192.168.10.0/24 192.168.44.1, где 192.168.10.0/24 — сеть в которой находятся компьютеры на работе, 192.168.44.1 VPN шлюз к которому я подключаюсб.
Итак после каждого подключения нужно делать вторую манипуляцию, так как общий доступ в интернет ограничен и скорость не ахты. Или задача состоит в том чтобы ходить на сайты (например youtube) через более быстрый канал VPN…
Всегда есть соблазн предлагать покупателю товар «в нагрузку». Те уважаемые читатели, которым довелось жить в Советском Союзе, могут помнить, как желающим купить вожделенный билет в Мариинский театр могли предложить его только в комплекте с билетом на утренник в заштатном доме культуры, а к дефицитному килограмму гречки по 56 коп. обязательно прилагалось на рубль-два старого печенья, сырков «Дружба» или еще чего-нибудь залежавшегося.
В современной России странные сопутствующие товары в интернет-магазине чаще обусловлены не суровым умыслом освободить склад от бесполезного, а недостатком аналитики и бедностью фантазии маркетологов. Возьмем, например, люстру во вполне симпатичном магазине всякой электрики 220-volt.ru:
Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.
На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.
Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Производительность всегда играла ключевую роль в программном обеспечении. А в веб-приложениях её значение ещё выше, поскольку пользователи легко могут пойти к конкурентам, если сделанный вами сайт работает медленно. Любой профессиональный веб-разработчик должен об этом помнить. Сегодня по-прежнему можно успешно применять массу старых приёмов оптимизации производительности, вроде минимизации количества запросов, использования CDN и не использования для рендеринга блокирующего кода. Но чем больше разработчики применяют JavaScript, тем важнее становится задача оптимизации его кода.
Всем привет! Не так давно в одном из комментариев я пообещал написать вводную статью для быстрого знакомства с возможностями Ionic Framework (далее IF). Стараюсь сдерживать свои обещания. Для начала мне хотелось бы выложить список ссылок, которыми часто пользуюсь при разработке с помощью IF:
Сегодня мы хотели бы поделиться текстом Михаила Завилейского, генерального директора DataArt и автора другой замечательной статьи о менеджменте. Надеемся, вам понравится!
Disclaimer и благодарности
Хочется поделиться множеством мыслей, которые стали моими существенно позднее, чем мне хотелось бы и не пришли в мою голову «сами по себе». Просто довелось нечто услышать, увидеть, прочитать или получить совет, и в голове что-то «встало на место». Я бы хотел сказать спасибо всем поимённо, но не могу — помню только книжки Дэвида Майстера, пересказы семинаров Михаила Гринфельда и еще лица полудюжины умнейших людей, чьи имена я забыл… А скольких уже совсем не помню, но всё равно — всем спасибо! И вдруг еще кому-то пригодятся ваши идеи.
Хотелось бы немного рассказать о тех ошибках, которые очень опасно совершать особенно сейчас, особенно в странах или городах золотого миллиарда. Думаю каждый работающий или сталкивающийся с деятельностью большой или не очень компании (или гос структуры) как и я удивляется на сколько же всё не эффективно и поражается как при таком раздолбайстве и пофигизме шестерёнок машина всё еще работает.
Несколько месяцев назад наша компания решила выбрать корпоративный PHP-фреймворк, который мы бы использовали для большинства проектов. До этого у нас был целый зоопарк: Symfony, Zend Framework, Yii — кому что больше нравилось. После рассмотрения популярных фреймворков мы решили попробовать Laravel. Результатом нескольких обучающих дней стал конспект, в котором строится простенькое приложение, но так как подробный туториал уже присутствует на хабре, то я решил написать только о четырёх инструментах, которые будут полезны при разработке и о которых почему-то не упоминают в туториалах:
При разработке достаточно большого приложения неизбежно возникает момент, когда приложение наконец-то становится достаточно большим чтобы тормозить. Для AngularJS существует множество методик позволяющих добиться нужной производительности: bindonce, фильтрация списков, использование $digest вместо $apply, ng-if вместо ng-show (или наоборот), и другие. Но все они позволяют делать только локальные улучшения, не помогая в глобальном плане: избавиться полностью от вызовов $rootScope.$digest не получается, а проверка состояния всего приложения может идти очень долго.
В этой статье я хочу предложить архитектурное решение: разбиение приложения на несколько несвязанных с точки зрения фреймворка частей и самостоятельная реализация связей между ними.
