Pull to refresh
0
0
Николай Катаев @nik_k

User

Send message

DevTips: Советы веб-разработчику (1-16)

Reading time5 min
Views70K
Команда браузера Google Chrome проделывает огромную работу для того, чтобы разработчикам жилось лучше. Chrome DevTools — пример замечательного инструмента, сильно упрощающего отладку вашего веб-приложения. Но подчас не весь функционал этой системы виден с первого взгляда, поэтому Umar Hansa — программист из Лондона — описывает его на своем сайте, причем в весьма удобном формате: немного текста и короткий скринкаст. А мы, в свою очередь, решили сделать эти советы более доступными русскоязычной аудитории.

Содержание:
  1. Перенаправление порта позволит вам открывать локальные ссылки на мобильном устройстве
  2. Активация псевдо-классов DOM-элемента
  3. Повтор сетевого запроса при помощи cURL
  4. Запуск сохранённых блоков кода (сниппетов) на любой веб-странице
  5. Отслеживание изменений файлов через DevTools
  6. Простая запись действий страницы
  7. Поиск элементов DOM-дерева при помощи CSS-селекторов
  8. Копирование изображения в формате Data URI
  9. Переход к нужной строке при открытии файла
  10. Упрощенная навигация между правками
  11. Копирование ответа на сетевой запрос
  12. Работа с несколькими курсорами при редактировании скриптов
  13. Блочное выделение
  14. Быстрый мониторинг событий в консоли
  15. Доступ к выбранному DOM-узлу в консоли
  16. Отслеживание незавершенных сетевых запросов при помощи фильтра is:running

Продолжение: 17-32, 33-48.
Читать дальше →
Total votes 67: ↑62 and ↓5+57
Comments18

Мифы и рецепты Docker

Reading time5 min
Views90K
Вокруг постоянно говорят про Docker. Я знаю что вы отвечаете: «Это что-то про контейнеры, виртуализацию, облака», «У нас все и так работает», «Это все баловство», «Он не запустится на нашем старом ядре линукса», «Точно так же можно подготовить образ для облака и запустить его», «Можно просто настроить LXC, chroot или AppArmor». Вы знаете, что он вам не нужен. Очередная модная штука. В конце концов, просто лень разбираться. Но любопытно! Тогда, читайте. Это серия из шести заметок.

Если вы не слышали о контейнерах в Линуксе, вот список страниц, которые надо прочитать, чтобы понимать о чем речь:


Поставьте Docker, он небольшой. Для Windows и Mac можно просто поставить Toolbox: www.docker.com/toolbox. Создавать виртуальную машину и настраивать лучше из командной строки, а не через графическую обертку. Прочитайте несколько уроков из мануала. Здесь я пишу о том, чего в документации нет.

Docker — это не виртуализация.


Вот какой у меня линукс:

Welcome to Ubuntu 15.04 (GNU/Linux 3.19.0-15-generic x86_64)

Last login: Tue Aug 18 00:43:50 2015 from 192.168.48.1
gri@ubuntu:~$ uname -a
Linux ubuntu 3.19.0-15-generic #15-Ubuntu SMP Thu Apr 16 23:32:37 UTC 2015 x86_64 x86_64 x86_64 GNU/                                       Linux
gri@ubuntu:~$ free -h
             total       used       free     shared    buffers     cached
Mem:          976M       866M       109M        11M       110M       514M
-/+ buffers/cache:       241M       735M
Swap:         1.0G       1.0M       1.0G

Запускаю CentOS:

gri@ubuntu:~$ docker run -ti centos
[root@301fc721eeb9 /]# uname -a
Linux 301fc721eeb9 3.19.0-15-generic #15-Ubuntu SMP Thu Apr 16 23:32:37 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux
[root@301fc721eeb9 /]# cat /etc/redhat-release
CentOS Linux release 7.1.1503 (Core)
[root@301fc721eeb9 /]# free -h
              total        used        free      shared  buff/cache   available
Mem:           976M         85M        100M         12M        790M        677M
Swap:          1.0G        1.0M        1.0G

Docker — это не chroot, их функционал частично совпадает. Это не система безопасности вроде AppArmor. Docker использует те же контейнеры, что и LXC, но интересен он не контейнерами. Docker — это ничего из того, что я думал о нем до того, как прочитал документацию.

То же ядро, память, файловая система, а дистрибутивы, библиотеки и пользователи — разные.

Docker — это инструмент объекто-ориентированного проектирования


Регулярно возникает вопрос, является ли конфигурация nginx частью веб-приложения. Системные администраторы спорят с разработчиками. Но недавно в мире появились devops и захотели вместо последовательно-процедурного вызова команд из bash думать привычным OOP. Docker дает инкапсуляцию, наследование и полиморфизм компонентам системы, таким как база данных и данные. Это значит, что можно провести декомпозицию всей информационной системы, выделить приложение, web-сервер, базу данных, системные библиотеки, рабочие данные в независимые компоненты, внедрять зависимости из конфигов, и заставить все это работать одной группой, одинаково на разных компьютерах.

Такой подход можно использовать, чтобы снизить потери рабочего времени дорогих front-end разработчиков на настройку базы данных и Nginx. Чтобы уйти от vendor lock-in. Не обломаться когда openssl на сервере не поддерживает cipher, используемый в API госучреждения. Чтобы приложение работало независимо от версии PHP или Python на сервере заказчика. Создавать open source не только в виде кода, но и настройкой пакетов из нескольких приложений, написанных на разных языках, работающих на разных слоях OSI.
Читать дальше →
Total votes 35: ↑32 and ↓3+29
Comments99

Школа Вебмастеров «Яндекса» и прямые трансляции лекций на «Мегамозге»

Reading time1 min
Views8.1K
С 1 сентября по 1 декабря будут идти открытые лекции «Школы Вебмастеров», организуемые «Яндексом».

Шестая лекция называется «Usability и Landing Page», а ведет её Дмитрий Сатин из UsabilityLab.

Прямая трансляция начнётся в 17.00 по московскому времени.
Читать дальше →
Total votes 12: ↑12 and ↓0+12
Comments0

Continuous Integration для самых маленьких

Reading time12 min
Views115K

Вы все еще публикуете проект вручную? Тогда мы идем к вам


Под катом гайдлайн по внедрению CI для .NET проектов «с нуля», включающий:
  1. Автоматические ежедневные сборки
  2. Уведомления о проблемах
  3. Интеграцию с баг-трекером и системой контроля версий
  4. Версионирование продукта
  5. Версионирование базы данных
  6. Автоматизированные выкладки и бекапы

Читать дальше →
Total votes 48: ↑41 and ↓7+34
Comments46

Введение в D3

Reading time6 min
Views140K

D3.js (или просто D3) это JavaScript-библиотека для обработки и визуализации данных. Она предоставляет удобные утилиты для обработки и загрузки массивов данных и создания DOM-элементов. Эта заметка описывает работу с основными методами библиотеки, она подойдёт для изучения основ библиотеки и погружения в её логику и возможности.

Для понимания статьи пригодятся знания JS, HTML и CSS.

Читать дальше →
Total votes 63: ↑59 and ↓4+55
Comments7

Список YouTube-каналов для обучения веб-разработке

Reading time2 min
Views218K
image


Привет, хабражители!

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

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

Под катом — текущая версия списка.
Читать дальше →
Total votes 64: ↑59 and ↓5+54
Comments16

15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц

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

В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.

Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.

Читать дальше →
Total votes 71: ↑65 and ↓6+59
Comments17

Inline-block как замена float

Reading time2 min
Views147K
Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?

Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float'а.

Что такое inline-block?


Обычная структура блочного элемента:



Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.
Читать дальше →
Total votes 85: ↑63 and ↓22+41
Comments81

О том, как сайт Have I been pwned? масштабировался под высокой нагрузкой и сколько это стоило (<$25)

Reading time18 min
Views28K
На картинке изображен график роста траффика, который облачные адепты по всему миру продают в виде одного из сценариев, когда эластичное масштабирование имеет высокую ценность:

Sessions going from barely anything to almost 12k an hour almost immediately

Это график посещений сайта Have I been pwned? (HIBP), который в один момент стал обслуживать со ~100 сессий в час до… 12000 сессий в час. Практически мгновенно.

Это случилось на неделе в сентябре, когда траффик буквально увеличился в 60 раз. 10 сентября – 2105 сессий, 11 сентября – 124036 сессий. Интересные вещи происходят, когда нагрузка увеличивается так резко, так быстро. Так что мне захотелось поделиться с вами несколькими вещами, которые я узнал – что было сделано мной хорошо и что следовало улучшить.
Читать дальше →
Total votes 56: ↑45 and ↓11+34
Comments12

Автоматическое оповещение читателей о новостях с помощью ВКонтакте

Reading time7 min
Views40K
Вторая часть

Предисловие


Те из вас, кто пользуется социальной сетью ВКонтакте и подписан на официальную страничку Хабры в ней, заметили, что все новые топики с главной появляются на страничке в виде сообщений-ссылок:
vk

Так вот, если у вас есть свой блог и вы хотите на своей личной страничке публиковать такие же сообщения-ссылки автоматически — топик может быть вам интересен. Сегодня мы попробуем публиковать простые сообщения ссылки, а далее добавлять к ним «превью»-картинки.
Читать дальше →
Total votes 103: ↑73 and ↓30+43
Comments57

30 полезных сервисов для веб-разработчика

Reading time2 min
Views163K
Решил собрать сервисы, которые могут быть полезны веб-разработчикам и дизайнерам. Буду рад, если кто-то найдет для себя полезный сервис. Осторожно, под катом куча картинок!
Читать дальше →
Total votes 180: ↑156 and ↓24+132
Comments48

30 полезных сервисов для веб-разработчиков и дизайнеров v2

Reading time3 min
Views86K
Предыстория: я веду свой паблик ВК о веб-разработке, в связи с чем я каждый день имею дело с большим количеством материалов о веб-разработке. Однажды (3 месяца назад) мне пришла в голову идея опубликовать на хабре подборку «30 полезных сервисов для веб-разработчика». Тот пост набрал почти 100 000 просмотров, и мне приятно, что он оказался полезен сообществу. С тех пор у меня поднакопилось больше 30 новых сервисов, которые будут полезны как разработчикам, так и дизайнерам. Лучшие из них я собрал в этом посте. Осторожно, под катом много картинок!
Читать дальше →
Total votes 67: ↑63 and ↓4+59
Comments19

Наш велосипед или скрипты, облегчающие жизнь админа

Reading time2 min
Views39K
image
В комметариях к одной из предыдущих статей была просьба выложить на всеобщее обозрение все наши наработки, используемые в повседневной жизни. Общими усилиями все было собрано, описано и выложено на github.
Под катом ссылка на репозиторий и краткое описание скриптов.
Читать дальше →
Total votes 42: ↑38 and ↓4+34
Comments21

Twitter.Bootstrap.MVC4 – пакет Twitter Bootstrap для ASP.NET MVC 4

Reading time2 min
Views32K

Я хочу рассказать о NuGet пакете, который пригодится тем, кто решил создать приложение на связке ASP.NET MVC 4 и Twitter Bootstrap. Этот пакет не только добавит ресурсы Twitter Bootstrap в проект, но и предоставит готовые способы решения часто возникающих задач.
Читать дальше →
Total votes 48: ↑38 and ↓10+28
Comments11

Как обсуждать деньги на собеседовании: стратегия переговоров для соискателя

Reading time7 min
Views268K
Статья “Как обсуждать деньги с руководством или почему иногда останавливаются карьеры?” неожиданно набрала +165 и под 100 тысяч просмотров, и мы решили продолжить переговорно-зарплатную тематику.

Сегодня публикуем статью нашего коллеги Дмитрия Коткина, уже полюбившегося хабровчанам по теме противостояния давлению в переговорах.

Признаться, мы долго думали, публиковать ли этот материал, потому что тема денег — крайне неоднозначна, и всегда поляризует аудиторию. Более того, статья была написана не для ИТ-шников. Но в конце концов решили статью запостить, потому что приемы там изложены, как нам показалось, достаточно универсальные, и в конце концов там не предлагается вести себя на собеседовании как здесь:



Дмитрий Коткин “Переговоры о зарплате. Практические рекомендации.”


Читать дальше →
Total votes 105: ↑96 and ↓9+87
Comments79

Стартап шаг за шагом: первая бизнес-модель

Reading time5 min
Views73K


Мы продолжаем цикл статей о том, как построить стартап, — рассказываем о каждом шаге на собственном примере. Мы уже описали, как придумать идею и как собрать команду, теперь поговорим о бизнес-модели.
Читать дальше →
Total votes 21: ↑17 and ↓4+13
Comments6

«Делай что должен» или «Кем я точно не хочу быть в 50 лет»

Reading time9 min
Views158K


Многих из вас, возможно, посещала крамольная мысль «а тем ли я занимаюсь, чем должен?». На правильном ли вы пути? Действительно ли расходуете отведенное вам на планете время на нужные и значимые дела? Стоит ли вообще заниматься тем, чем вы занимаетесь? Как найти свое предназначение и не пожалеть о потраченных впустую годах? Позволим же себе предаться философии чтобы в очередной раз осмыслить свое предназначение.
Читать дальше →
Total votes 56: ↑41 and ↓15+26
Comments79

Метод одного дня

Reading time4 min
Views8.1K
Понедельник начинается в субботу.
А. Стругацкий, Б. Стругацкий.

Прошедшее забыто, грядущее сокрыто, настоящее даровано. Поэтому его и зовут настоящим!
Мудрая Черепаха из «Кунг-фу Панда»

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

Метод заключается в том, что основан на одной мысли: есть всего один день, сегодняшний, в котором и нужно делать все по максимуму для результата.

Под катом простая схема, как этого достичь.
Читать дальше →
Total votes 164: ↑142 and ↓22+120
Comments99

Application Porno или как найти секреты в мобильных приложениях и вынести всё

Reading time5 min
Views54K
В новостной ленте я недавно обнаружил любопытное исследование, где ребята скачали и распарсили Android Playmarket, проанализировали сотни тысяч приложений на предмет наличия зашитых секретных токенов и паролей.

То что результат их работы касался только анализа декомпилированного кода под Android, cподвиг меня написать про исследование, которое я проводил еще год назад, причем не только для Android, но и для iOS приложений, и которое, в итоге, вылилось в целый online-инструмент, о котором я расскажу в самом конце, когда станет очевиден его смысл. Часть написанного ниже была представлена на конференции ZeroNights и на страницах журнала «Хакер». (Т.к. материал не был опубликован онлайн, редакция дала на «добро», на публикацию здесь). Итак, поехали.
Читать дальше →
Total votes 99: ↑92 and ↓7+85
Comments38

Information

Rating
Does not participate
Location
Пермь, Пермский край, Россия
Date of birth
Registered
Activity