Pull to refresh

Nexign запустила маркет dev-to-dev продуктов для разработчиков

Reading time 2 min
Views 116
Nexign corporate blog

Nexign – российская ИТ-компания с более чем 30-летней экспертизой в области разработки ПО. За это время команда программистов создала множество инструментов, которых не хватало на внешнем рынке. Настало время поделиться ими, именно поэтому Nexign приняла решение открыть Nexign Store – маркет dev-to-dev продуктов для разработчиков. 

Читать далее
Rating 0
Comments 0

«DevOps Tools для разработчиков» теперь в формате потока — старт 1 февраля

Reading time 2 min
Views 557
Southbridge corporate blog

1 февраля 2023 года стартует поток курса «DevOps Tools для разработчиков». За месяц обучения вы охватите максимально широкий инструментарий, а также верхнеуровнево разберётесь в разных технологиях и решениях.

Ведут курс два спикера — техлид Coolblue Владислав Килин и старший инженер-программист VK Кирилл Борисов. Влад из разработки, а Кирилл из администрирования. 

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

Читать далее
Total votes 8: ↑7 and ↓1 +6
Comments 0

Будущие улучшения средств веб-разработки в Firefox

Reading time 2 min
Views 9.9K
Firefox Website development *
Сотрудник компании Mozilla организовал масштабный опрос и обсуждение на разных программистских сайтах, что веб-разработчики хотят видеть в Firefox DevTools. Через неделю они собрались с командой Firefox DevTools, и по результатам этой информации составили план развития Firefox DevTools, то есть список приоритетных направлений, которые будут реализованы.

Кодирование в браузере и управление браузером из редактора/IDE


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

В этом отношении будет опробовано два подхода: 1) реализация управления браузером со стороны сторонних редакторов; 2) встроенные редакторы в Firefox.
Читать дальше →
Total votes 33: ↑33 and ↓0 +33
Comments 20

Видеокурс по DevTools от Google и Codeschool

Reading time 1 min
Views 24K
Website development *Google Chrome
image

Известные нам по гениальным обучающим скринкастам Rails for Zombies, Try Ruby и Try Git — команда Codeschool объединилась с корпорацией добра для создания Try DevTools — подробнейшего обучающего курса из семи глав, который, конечно же, является абсолютно бесплатным.
Читать дальше →
Total votes 39: ↑36 and ↓3 +33
Comments 18

«Workspace» и «Сниппеты» в Chrome Dev Tools

Reading time 2 min
Views 29K
Website development *JavaScript *Google Chrome
Tutorial
image
Workspace и Сниппеты — 2 инструмента в Chrome Dev Tools, о существовании которых не все знают. Эти инструменты упрощают веб-разработку, поэтому я решил сегодня о них рассказать.
Читать дальше →
Total votes 59: ↑58 and ↓1 +57
Comments 25

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Reading time 3 min
Views 11K
Website development *CSS *Google Chrome
Tutorial
image
Сегодня мы поговорим о том, как Chrome Dev Tools помогают нам бороться с лишней перерисовкой страницы.

Прошлые части:
«Workspace» и «Сниппеты»
«Поддержка Sass»

Читать дальше →
Total votes 61: ↑57 and ↓4 +53
Comments 4

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №62 (15 — 23 июня 2013)

Reading time 6 min
Views 31K
Zfort Group corporate blog Website development *
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


Читать дальше →
Total votes 43: ↑36 and ↓7 +29
Comments 14

IE11 поддерживает WebGL, SPDY/3 и новые средства для разработчиков

Reading time 1 min
Views 21K
Internet Explorer IT Standards *


Сегодня перед конференцией BUILD в Сан-Франциско компания Microsoft выпустила Windows Server («Blue») для подписчиков MSDN. Номер билда 9341, а Windows 8.1 имеет версию 6.3.9431.winmain_bluemp.130615-1214.

IE11 набирает в тестах на поддержку технологий 351 из 500 баллов, получая 25/25 за поддержку WebGL. Компания Microsoft уже официально подтвердила поддержку WebGL, SPDY/3 и новых средств для разработчиков в IE11.
Читать дальше →
Total votes 92: ↑73 and ↓19 +54
Comments 91

Редактор CSS Shapes для Chrome

Reading time 1 min
Views 32K
CSS *Browser extensions


Спецификации CSS Shapes позволяют красиво оформить обтекание текстом на веб-странице. Средствами CSS можно создать произвольную форму, но это обычно весьма трудоёмкая задача. Новое расширение CSS Shapes Editor для Chrome кардинально облегчает процесс. Это интерактивный редактор CSS Shapes, где контуры указываются простым перетягиванием точек с помощью мыши.
Читать дальше →
Total votes 61: ↑58 and ↓3 +55
Comments 17

Анализ рендеринга через Skia Debugger: как можно найти самые дорогие для отрисовки элементы

Reading time 4 min
Views 22K
VK corporate blog Website development *CSS *
Доброго дня, недавно я решал проблему притормаживания скролла на страницах Почты Mail.Ru. Особенно эта проблема была заметна на retina-дисплеях. После простого анализа я пришел к выводу, что одна из основных проблем — это медленная отрисовка страницы.

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

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


Читать дальше →
Total votes 76: ↑72 and ↓4 +68
Comments 8

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

Reading time 5 min
Views 69K
VK corporate blog Website development *
Tutorial
Translation
Команда браузера 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
Comments 18

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

Reading time 5 min
Views 34K
VK corporate blog Website development *Google Chrome
Tutorial
Translation
Продолжение цикла переводов полезных советов для веб-разработчика. Другие части: 1-16, 33-48.

Содержание:
   17.  Быстрое редактирование названия HTML-тега в панели «Elements»
   18.  Разворачивание всех дочерних узлов выбранного элемента
   19.  Переключение состояния вкладки DevTools при помощи горячих клавиш
   20.  Переключение на DOM-элемент из DevTools консоли
   21.  Подсветка выполняемого выражения
   22.  Улучшения в работе инструмента Color Picker
   23.  Включение точки останова и навигация по стеку вызовов при помощи горячих клавиш
   24.  Просмотр определения функции, зарегистрированной как обработчик события на DOM-элементе
   25.  Нотификация о JS-ошибке во время написания кода
   26.  Персистентность настроек отображения для режима «Инкогнито»
   27.  Визуализация выбранного режима сглаживания анимации
   28.  Просмотр и изменения точек останова DOM-дерева при помощи панели «Breakpoints»
   29.  Пять интересных возможностей панели «Console»
   30.  Автодополнение свойств и методов объекта в панели «Console»
   31.  Просмотр и отладка обработчиков событий
   32.  Автоматическая остановка выполнения программы при возникновении любых исключений
Читать дальше →
Total votes 32: ↑31 and ↓1 +30
Comments 13

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

Reading time 5 min
Views 31K
VK corporate blog Website development *Google Chrome
Tutorial
Translation
И вновь в эфире цикл переводов полезных советов для веб-разработчика. На этот раз автор расширил спектр исследуемых инструментов, добавив туда редактор Sublime Text и фреймворк Node.js. Предыдущие части: 1-16, 17-32.

Поехали!

Содержание:
   33.  Разворачивание упрощенной записи CSS-свойств
   34.  Определение совпадения селекторов по цвету
   35.  Использование визуальной навигации и просмотр снятых скриншотов процесса загрузки страницы
   36.  Sublime Text: нечеткий поиск при помощи функциональности GOTO
   37.  Быстрое изменение значения CSS-свойств при помощи клавиатуры и колеса мыши
   38.  Прокрутка элемента в области видимости
   39.  Node.js: Использование Babel для запуска ES6
   40.  Переход к просмотру и редактированию CSS или Javascript-файлов из панели «Elements»
   41.  Отображение значений Javascript-переменных рядом с кодом в процессе отладки
   42.  Использование цветовой группировки в панели «Network» для упрощения идентификации типа ресурса
   43.  Активация псевдо классов DOM-элемента
   44.  Инспектирование самих инструментов разработчика
   45.  Запуск выбранного блока кода из панели «Sources»
   46.  Установка условных точек останова
   47.  Переход к следующему вхождению выбранной строки при помощи горячих клавиш
   48.  Редактирование CSS-файла в панели «Sources» и упрощенное изменение значений CSS-свойств
Читать дальше →
Total votes 34: ↑32 and ↓2 +30
Comments 0

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

Reading time 6 min
Views 35K
VK corporate blog Website development *Google Chrome
Tutorial
Translation
Привет, Хабр! В этот прекрасный пятничный день предлагаем вам ознакомиться с очередной частью цикла переводов советов для веб-разработчиков. Предыдущие части: 1-16, 17-32, 33-48.

Содержание:

   49   Циклическое переключение между панелями при помощи шорткатов
   50   Проверка и активация CSS media queries, а также нахождение этих правил в коде
   51   Предустановка разрешения нового устройства
   52   Улучшения полоски хлебных крошек в панели Elements
   53   Печать стектрейса в консоли
   54   Детектирование долгих фреймов (не путать с iframe)
   55   Продвинутая фильтрация запросов в панели «Network»
   56   Поиск по проекту с возможностью указания файла
   57   Новый экспериментальный редактор раскладки страницы
   58   Дублирование DOM-элементов
   59   Просмотр скриншотов поведения страницы
   60   Редактирование html-кода в панели «Console»
   61   Простые клавиатурные трюки для управления панелей «Стили»
   62   Выбор цвета, сгенерированного палитрой
   63   Инкремент и декремент чисел в DOM-атрибутах
   64   Сетевые запросы в панели «Timeline»
Читать дальше →
Total votes 24: ↑22 and ↓2 +20
Comments 2

Web scraping на Node.js и проблемные сайты

Reading time 14 min
Views 32K
JavaScript *Programming *Data Mining *Node.JS *

Это вторая статья в цикле про создание и использование скриптов для веб-скрейпинга на Node.js.


  1. Web scraping при помощи Node.js
  2. Web scraping на Node.js и проблемные сайты
  3. Web scraping на Node.js и защита от ботов
  4. Web scraping обновляющихся данных при помощи Node.js

В первой статье разбиралась простейшая задача из мира веб-скрейпинга. Именно такие задачи достаются веб-скрейперам в подавляющем большинстве случаев – получение данных с незащищённых HTML-страниц стабильно работающего сайта. Быстрый анализ сайта, HTTP-запросы при помощи needle (организованные при помощи tress), рекурсивный проход по ссылкам, DOM-парсинг при помощи cheerio – вот это вот всё.


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


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

Читать дальше →
Total votes 11: ↑9 and ↓2 +7
Comments 11

FConsole — инструмент для отладки PIxi.js (Canvas/WebGL) приложений

Reading time 1 min
Views 7.3K
Canvas *Debugging *
Буквально вчера выложил в открытый доступ первую рабочую версию консоли для отладки Canvas/WebGL приложений FConsole. Если вы всегда хотели редактировать свойства визуальных объектов без изменения исходного кода, а так же без сложностей просматривать всю иерархию визуальных объектов, то прошу под кат.

image

* На скриншоте представлена Flash-Console, которая бралась в качестве примера при разработке FConsole
Читать дальше →
Total votes 28: ↑28 and ↓0 +28
Comments 15

DevTools в браузере Vivaldi 1.10.289.3

Reading time 3 min
Views 14K
Vivaldi Technologies AS corporate blog Website development *Browsers
image

Всем привет!

Как правило, в последнее время на Хабре мы публикуем только новости о стабильных версиях браузера Vivaldi, не отвлекая «по пустякам» на тестовые сборки. Но сегодня случай особый. Мы добавили в браузер функцию, о которой давно просили многие разработчики, в том числе и на Хабре, поэтому мы решили сообщить новость пораньше, не дожидаясь стабильного релиза. Ну и, конечно, будет лучше, если собственно разработчики и потестируют запрашиваемую функцию. Подробности под катом.
Читать дальше →
Total votes 28: ↑27 and ↓1 +26
Comments 65

Коллекция инструментариев разработчиков

Reading time 1 min
Views 3K
Open source *GitHub *

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


Не менее интересно то, какие источники помогают разработчикам получать актуальную информацию (RSS подписки, список подкастов, любимые книги)


Я решил посвятить этой теме небольшой домашний проект и создать открытую коллекцию с инструментариями разработчиков. Это репозиторий на GitHub куда любой может добавить свой набор полезных программ. Из репозитория я генерирую сайт и RSS.

Читать дальше →
Total votes 14: ↑7 and ↓7 0
Comments 10