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



Материал, перевод которого мы сегодня публикуем, посвящён рассказу о некоторых возможностях консоли Chrome, которые известны не так широко, как они того заслуживают.

Сервис omg-img позволяет вставлять иконки вот так:

<img src="https://png.icons8.com/search">

Чувствуете, к чему я клоню? Сделали вставление иконок не выходя из IDE. Просто пишете URL, параметры вроде цвета и стиля — мы отрендерим иконку и отдадим через хороший, годный CDN.

Вместо search можно написать любое название иконки:

• home
• sheep-on-bike
• trump

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

Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.

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

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

Я работаю в команде Онлайн. Мы делаем веб-версию справочника 2ГИС. Это долгоживущий активно развивающийся проект, в котором JavaScript используется как основной язык как на клиенте, так и на сервере.

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

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

Продолжению быть!
Часть 1

---

Задачи поставлены, и вроде бы самое время перейти к чтению различных обзоров и тестов, но…
С чего начать? В какую сторону вообще смотреть?

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

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

Навеяно генеральной уборкой в доме. Жена хотела все повыкидывать, а я отчаянно сопротивлялся. Вопросы так и сыпались: «Ну зачем тебе старый, разобранный сидиром?», «Зачем тебе старые распечатки phrack, каких-то дизасмов и пр.?», «Зачем тебе старые джинсы и кросовки с дыркой?», «Зачем тебе коробки от ноутбука/телефона?». В итоге мы выкинули несколько огромных мешков хлама.

А сегодня читал рсс ленту и наткнулся на эссе Пола Грэма. И решил перевести эссе умного человека. Наверняка мой перевод содержит множество опечаток, ошибок и неточностей. С удовольствием приму ваши замечания.
Оригинал: www.paulgraham.com/stuff.html
Paul Graham «Stuff»

Вчера Яндекс запустил поиск по комментариям в блогхостингах. Пока это ЖЖ и Лиру. Но этого уже более чем достаточно.

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

С сегодняшнего дня Поиск по блогам ищет не только по записям в блогах. Мы объявляем о начале бета-тестирования поиска по комментариям.

Вы можете сами испытать его уже сейчас: blogs.yandex.ru/search_comments.xml?text=счастье

Далее я приведу 10 «полезностей» упрощающих работу с вышеуказанным сайтом

Пожалуй, начну с того, что если перегружаться 15 раз в год, то любой «тюнинг» процесса загрузки отнимает больше времени, чем будет выиграно на перезагрузках за все время жизни системы. Однако, спортивный интерес берет свое, тем более, что люди интересуется процессом оптимизации быстродействия. А загрузка оказалась самым очевидным кандидатом в примеры того, как на мой взгляд должен выглядеть этот самый процесс. Сразу скажу, что грузиться будем с 5400 rpm винта, грузиться будем в «рабочую» систему: помимо недобитой вендорской крапвари там стоит еще куча всякого типа вижуал студии, антивируса, скайпа, стима, гуглапдейтера и пр…

Про то, почему отключение pagefile-а скорее вредно, чем полезно — как нибудь в другой раз, а пока…

Живет у меня в доме соседка: очень хорошая женщина, пенсионерка, ветеран труда, бывший медицинский работник, отработавший всю жизнь медсестрой в больнице. В настоящее время на пенсии. Я ей помогаю, чем могу, но сказ не про соседку, а про то, что подарила ей дирекция больницы, где она раньше работала планшет. Все бы ничего в этом планшете (WIFI есть, 3G нету, диагональ экрана 7 дюймов, на алиэкспрессе такие по 45 долларов с доставкой), но вот что делать с этим планшетом, естественно, не объяснили. И пришлось мне отвечать на вопрос, что делаю со своим планшетом я, а я на планшете книжки читаю, в основном Ясинского и Эльтерруса.

Естественно я подключил планшет к своему ноутбуку и перекинул апкашку CoolReader, а также свою библиотеку. К сожалению, через два дня выяснилось, что литературные пристрастия у нас разные и мои книжки соседке неинтересны. Пришлось поделиться паролем от своего вайфая и настроить opds «Флибусты», так как что такое Интернет соседка знала весьма приблизительно и ни компьютера, ни интернет-соединения у нее нет и никогда не было.

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

В 2011 году была переведена хорошая статья „Лучшие шрифты для программирования“. Теперь представляется список самых удачных шрифтов для кода на момент июня 2014 года.
Хотя я и уверен, что многих устраивает Courier New, используемый по умолчанию в Windows во многих редакторах. Но, как человек любящий типографику, настаиваю обратить внимание на одну из гарнитур из этой статьи. Хороший шрифт — это прекрасно!

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

Данное направление можно и нужно оптимизировать на этапе вёрстки/frontend-разработки, поскольку, очевидно, что разметка, стили и скрипты принимают в рендеринге непосредственное участие. Для этого соответствующие специалисты должны знать некоторые тонкости.

Каждый программист — проектировщик API. Хорошие программы состоят из модулей, а протокол взаимодействия модулей — это тоже API. Хорошие модули используются повторно.

API — это большая сила и большая ответственность. У хорошего API будут благодарные пользователи; поддержка плохого превратится в кошмар.

Публичный API — не воробей, опубликуешь — не уберешь. Есть только одна попытка сделать все правильно, поэтому постарайся.

API должно быть легко использовать, но сложно использовать неправильно. Сделать что-то простое с помощью такого API должно быть просто; сложное — возможно; сделать что-то неправильно должно быть невозможно, или, по крайней мере, трудно.

API должен описывать сам себя. Изучение кода на таком API не вызывает желания читать комментарии. Вообще, комментарии редко нужны.

Перед разработкой API собери требования с долей здорового скептицизма. Осознай общие задачи и реши их.

Оформляй требования как шаблоны использования API. Сверяйся с ними в процессе проектирования.

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

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

Тогда у меня и зародилась идея — «А давайте админам звонить в критических ситуациях!»

За реализацией и скриптами — прошу под кат.

Введение

Я – пользователь бытовых погодных станций со стажем, и в этом скрыта двойная катастрофа. Во-первых, я уже настолько привык к тому, что погода внутри и вне дома мне известна, что отсутствие этой информации вводит меня в состояние когнитивного диссонанса. Во-вторых, с погодными станциями мне хронически не везет. Две из них сломались и, как в таких случаях говорят про всяческие индикаторные приборы, стали «показывать погоду», только с точностью до наоборот, показывали они что угодно, только не погоду. Из Штатов привез с собой третью, которая прослужила мне верой и правдой целый год, и я начал было потихоньку расслабляться, но тут у случайно забежавших (и давших нам с женой возможность временно возложить на их плечи заботу о сыне и выбежать из дома) родителей случился приступ принужденной заботы, в свою очередь, вызвавший острое желание помыть окна. Результат тщательного натирания окон – не только сверкающие окна, но и прыгнувший вниз датчик погодной станции. Этаж второй, так что датчик разбился бы вряд ли, но, как известно, непосредственно под окнами каждой многоэтажки есть невидимая пространственно-временная сингулярность. Не знаю, можно ли этот феномен описать в рамках Стандартной Модели, но то, что в основе сингулярности лежит принцип «что упало, то пропало», сомнений нет. Так что датчик я не нашел.
Естественно, в полный рост встала нужда менять девайс, но мысль о том, что ни одна из «бывших» не продержалась у меня дома больше года, настораживала. И тогда в голову забрела идея «а не сделать ли самому?».

Часто бывает так, что существует множество различных проектов, которые необходимо регулярно бэкапить.
Но еще чаще бывает так, что поднимать свой собственный сервис резервного копирования лениво, и копии в лучшем случае делаются время от времени, а в худшем — не делаются вообще. Специально для ленивых людей придумали сервисы синхронизации файлов, такие как Dropbox, Yandex.Disk и иже с ними. Суть всегда одна: файл, загруженный на одном привязанном устройстве, появляется на всех остальных. Ура, решение найдено.
Но встает другой вопрос: безопасность загруженного контента. И если за фотки с Майорки можно особо не переживать, то боевую базу 1С так бэкапить чревато. И вот тут, в этой самой статье, есть небольшой HOW-TO про то, как остаться лентяем и сохранить файлы в безопасности.

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

Быстрое изменение состояния посреди анимации

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

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow: