Pull to refresh
18
Karma
0
Rating
Маров Николай @kolyuchii

Пользователь

Сниппеты для Chrome DevTools

Reading time 5 min
Views 30K
Website development *JavaScript *Google Chrome
Возможности встроенного в браузер инструмента Chrome Developer Tools можно расширить с помощью сниппетов. Это ускоряет разработку и упрощает рабочий процесс. Хорошая коллекция сниппетов есть на GitHub'е.

Сниппеты в Google Chrome


Подробно о функциях сниппетов можно почитать в официальной документации Chrome. А вот краткая инструкция:

  1. Зайти в «chrome://flags» — Отметить «Enable Developer Tools experiments».
  2. Открыть DevTools: «Settings» — «Developer Tools Experiments» — Отметить «Snippets support».
  3. После перезагрузки во вкладке DevTools «Sources» появится «Snippets», где можно управлять сниппетами:

image
Читать дальше →
Total votes 51: ↑49 and ↓2 +47
Comments 13

Эволюция разработки в Badoo

Reading time 1 min
Views 19K
Badoo corporate blog
Как устроен процесс организации разработки в крупном интернет-проекте на всех этапах его роста? Что происходит, когда из стартапа компания перерастает в проект с более чем 190 миллионами пользователей.

В прошлом году на конференции Whalerider Алексей fisher Рыбак рассказывал о том:

  • как у нас Badoo сейчас устроена разработка;
  • как в процессе развития проекта её перестраивали;
  • какие проблемы решали;
  • как преодолевали кризисы роста;
  • на какие грабли наступали.

В секции вопросов есть интересная информация о том, как в Badoo устроена система мотивации и бонусов.
Сейчас у нас появилось видео и мы хотим поделиться им с вами.



Total votes 73: ↑64 and ↓9 +55
Comments 18

Пишем быстрый и экономный код на JavaScript

Reading time 16 min
Views 67K
JavaScript *Programming *Client optimization *
Translation
Такой движок JS, как V8 (Chrome, Node) от Google, заточен для быстрого исполнения больших приложений. Если вы во время разработки заботитесь об эффективном использовании памяти и быстродействии, вам необходимо знать кое-что о процессах, проходящих в движке JS браузера.

Что бы там ни было — V8, SpiderMonkey (Firefox), Carakan (Opera), Chakra (IE) или что-то ещё, знание внутренних процессов поможет вам оптимизировать работу ваших приложений. Но не призываю вас оптимизировать движок для одного браузера или движка – не делайте так.

Задайте себе вопрос:
— можно ли что-то в моём коде сделать более эффективным?
— какую оптимизацию проводят популярные движки JS?
— что движок не может компенсировать, и может ли сборка мусора подчистить всё так, как я от неё ожидаю?



Есть много ловушек, связанных с эффективным использованием памяти и быстродействием, и в статье мы изучим некоторые подходы, которые хорошо показали себя в тестах.
Читать дальше →
Total votes 78: ↑72 and ↓6 +66
Comments 29

Основной цикл в Javascript

Reading time 9 min
Views 75K
TradingView corporate blog JavaScript *
Sandbox


Все мы слышали про ajax и node.js. Они прочно обосновались уже не просто в словарном запасе, но и в наборе инструментов веб-разработчика. Ajax — асинхронное подтягивание данных с сервера на страницу, node — фреймворк с асинхронным IO. Но как в таком однопоточном языке, как Javascript, реализуется та самая асинхронность?

Вы, наверное, уже догадались из заголовка, речь пойдет об основном цикле («main loop»).
Читать дальше →
Total votes 190: ↑186 and ↓4 +182
Comments 41

Range, TextRange и Selection

Reading time 13 min
Views 76K
JavaScript *
Многим JavaScript-разработчикам приходилось сталкиваться с объектами, перечисленными в заголовке, например, при решении следующих задач:
— создание визуальных редакторов (wysiwyg),
— поиск в окне браузера,
— выставление BB-кода,
и т.д.

В этой статье автором предпринята попытка собрать перевод документации об этих объектах в одном месте + написать небольшие сопроводительные примеры. Перевод вольный, не дословный, так что если встретите неточность или корявую формулировку — пишите в комментариях.

В целом пост носит справочный характер, и, надеюсь, кому-то упростит разработку.

Читать дальше →
Total votes 96: ↑96 and ↓0 +96
Comments 28

Размеры экранов

Reading time 2 min
Views 531K
Smartphones Tablets
Tutorial
Планшеты и смартфоны оснащаются экранами с разными соотношениями сторон и разной плотностью пикселей, однако эти параметры редко указываются в технических характеристиках.

Попробуем разобраться со всеми хитростями, связанными с этими параметрами. Начнём с планшетов.
Вот соотношение размеров экранов, использующихся в большинстве современных планшетов.



Обратите внимание, насколько экран 8" с соотношением сторон 4:3 визуально больше широкого экрана 7". А широкий экран 10.1" на сантиметр меньше экрана 9.7" по высоте.

Я свёл в таблицу параметры экранов, чаще всего использующихся в планшетах.



Текст на экранах с низким PPI (количеством точек на дюйм) читается не комфортно. Я бы не стал покупать планшет с экраном, имеющим PPI ниже 150. Даже 164 PPI экрана iPad mini многим кажутся недостаточными. Отлично воспринимаются экраны с PPI больше 200.

Для меня было большим открытием, что экран 9.7" 1024x768 имеет даже меньшее PPI, чем экран 7" 800x480.

Читать дальше →
Total votes 157: ↑147 and ↓10 +137
Comments 69

You are the CSS to my HTML

Reading time 1 min
Views 3.3K
Design
Всем добрый день!

Как выразить чувства «компьютерщику»? Пожалуй, так:



Фраза, понятная не всем, но «знающие» оценят сколько души вложено в эти слова :-)
Total votes 192: ↑148 and ↓44 +104
Comments 80

Алгоритмы поиска путей на JavaScript

Reading time 1 min
Views 31K
JavaScript *Game development *Algorithms *


Поиск оптимального маршрута юнита к цели на неизвестной карте — одна из самых сложных задач при разработке игры. К счастью, существует некоторое количество алгоритмов, которые решают эту задачу. Есть и отличная библиотека PathFinding.js с поддержкой 11 таких алгоритмов.
Читать дальше →
Total votes 65: ↑47 and ↓18 +29
Comments 14

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

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


Читать дальше →
Total votes 47: ↑44 and ↓3 +41
Comments 0

Асинхронный JavaScript: без колбеков и промисов

Reading time 7 min
Views 42K
Abnormal programming *JavaScript *
Sandbox
Наверное, каждый, кто использовал JavaScript, когда-либо сталкивался (или столкнётся в будущем) с асинхронными вызовами. Может быть, это будет обращение к базе на стороне сервера. Может быть — работа с таймером для создания анимации на сайте.

Для того, чтобы «побороть» асинхронность, используются разные инструменты от промисов до смены языка программирования. Но иногда очень хочется бросить всё и написать на чистом JS линейный код:

timeout(1000);
console.log('Hello, world!');


Можно ли реализовать нечто подобное? Разумеется, можно.
В данной статье мы рассмотрим один опасный, но действенный способ.
Читать дальше →
Total votes 70: ↑57 and ↓13 +44
Comments 32

Революция дата-байндинга с Object.Observe()

Reading time 17 min
Views 36K
Website development *JavaScript *Programming *
Translation

Введение


Грядет революция. Появилось новое дополнение к JavaScript, которое изменит всё, что вы когда-либо знали о дата-байндинге. Помимо этого, изменится и подход ваших MVC библиотек к наблюдениям за редактированием и обновлением моделей. Вы готовы?

Хорошо, хорошо. Не будем тянуть. Я рад вам представить Object.observe(), который появился в бета версии Chrome 36. [ТОЛПА ЛИКУЕТ]

Object.observe() является частью следующего ECMAScript стандарта. Он позволяет асинхронно отслеживать изменения JavaScript объектов… без использования каких-либо сторонних библиотек, он позволяет наблюдателю отслеживать изменения состояния объекта во времени.
Читать дальше →
Total votes 65: ↑57 and ↓8 +49
Comments 48

Функциональный JavaScript, Часть 1: Введение

Reading time 3 min
Views 26K
JavaScript *Functional Programming *
Translation

Введение


JavaScript мощный, но недопонятый язык программирования. Людям нравится говорить, что он является объектно-ориентированным языком программирования или является функциональным языком. Другим нравится говорить, что он не является объектно ориентированным или не является функциональным языком программирования. Некоторые скажут что он относится к обеим парадигмам или ни к одной из них — но, давайте отложим на пока этот спор в сторонку.
Читать дальше →
Total votes 48: ↑37 and ↓11 +26
Comments 15

Функциональный Javascript. Пишем свои линзы, часть 1

Reading time 7 min
Views 28K
JavaScript *Functional Programming *
Sandbox
Привет, хабр.
В данной статье мы познакомимся с линзами, узнаем для чего они нужны, а также реализуем их на JavaScript.

Зачем нужны линзы


Начнем, пожалуй, с ответа на вопрос, зачем же нужны линзы.

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

В основе этого лежит тот факт, что при изменении какой-либо части неизменяемой структуры данных создается ее копия, отличающаяся от оригинала этой самой измененной частью. Полное копирование всей исходной структуры не эффективно, поэтому новая структура как правило использует ссылки на неизмененные части из оригинала.
Читать дальше →
Total votes 53: ↑48 and ↓5 +43
Comments 42

Линейная алгебра для разработчиков игр

Reading time 19 min
Views 700K
Game development *
Tutorial
Translation
Эта статья является переводом цикла из четырёх статей «Linear algebra for game developers», написанных David Rosen и посвящённых линейной алгебре и её применению в разработке игр. С оригинальными статьями можно ознакомиться тут: часть 1, часть 2, часть 3 и часть 4. Я не стал публиковать переводы отдельными топиками, а объединил все статьи в одну. Думаю, что так будет удобнее воспринимать материал и работать с ним. Итак приступим.
Читать дальше →
Total votes 314: ↑296 and ↓18 +278
Comments 61

Продвинутые анимации с requestAnimationFrame

Reading time 3 min
Views 66K
JavaScript *
Translation
Если вы никогда не писали код для выполнения анимаций, то вы можете дальше не читать :)

Что такое requestAnimationFrame?


Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL

Зачем я должен это использовать?


Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.
Читать дальше →
Total votes 27: ↑25 and ↓2 +23
Comments 36

CSS 3 Timing Functions и с чем их едят

Reading time 15 min
Views 95K
Website development *CSS *HTML *
Translation


Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!


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

Полетели!
Total votes 77: ↑74 and ↓3 +71
Comments 8

Martin Fowler — GUI Architectures. Часть 2

Reading time 9 min
Views 29K
Programming *Smalltalk *
Всем привет еще раз. Это опять я. Внутри хабраката перевод еще одного параграфа статьи Мартина Фаулера.

На этот раз затронута тема MVC. Фаулер весьма популярно про него написал. Я постарался популярно перевести:) Теперь можно понять, почему все носятся с MVC, как с писанной торбой. И, кстати, Фаулер прав — очень много где и много кто воспринимают MVC по-своему. Сам Фаулер пишет про оригинальный MVC, который работал на платформе Smalltalk. Очень познавательно.

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

Следующую часть перевода напишу, когда разозлюсь и возьму себя в руки.
Прочитать про MVC.
Total votes 17: ↑16 and ↓1 +15
Comments 19

JSDuck — генератор документации

Reading time 6 min
Views 19K
JavaScript *ExtJS/Sencha *
Sandbox
Документирование является неотъемлемой частью хорошего кода и проекта в целом. Хорошие разработчики тратят много времени на поддержку документации, но в дальнейшем это окупается с лихвой: экономит время на поддержке кода, его расширении и исправлении багов, позволяет сократить время на погружение в проект новых разработчиков и т.д. Так же, хорошо документированный код неявно стимулирует разработчика к применению стандартов кодирования.
Читать дальше →
Total votes 18: ↑18 and ↓0 +18
Comments 4

PhpStorm — повышаем производительность (клавиатурные сокращения). Часть 1

Reading time 4 min
Views 207K
Website development *PHP *
Tutorial
Translation
imagePhpStorm — повышаем производительность (плагины и темы оформления). Часть 2

У всех нас есть любимые IDE или редакторы в которых мы пишем код. Для меня это PhpStorm, и потребовалось некоторое время, чтобы освоить все клавиатурные сокращения и ускорить свой рабочий процесс. В этой статье я поделюсь с вами некоторыми сочетания клавиш и советами, которые возьмут на себя часть рутинной работы, если вы тоже делаете свою работу в этой IDE. Эта статья была частично вдохновлена этим Reddit тредом, и я буду упомянать и демонстрировать некоторые трюки найденные там.

Обратите внимание, что я разрабатываю на Linux в Vagrant, размещенном в Windows, я буду использовать клавишу CTRL вместо CMD. Если вы работаете в OS X, замените CTRL на CMD.

Клавиатурные сокращения и хаки


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

(осторожно, много gif изображений)
Давайте посмотрим, чем мы можем воспользоваться
Total votes 77: ↑68 and ↓9 +59
Comments 58

CMS будущего

Reading time 14 min
Views 76K
Студия дизайна Genue corporate blog Web design *Interfaces *
Translation

Покончим с устаревшим подходом к контенту


На протяжении всей истории интернета мы работали с контентом двумя способами:
  1. Создавали «один шаблон на все случаи жизни»
  2. Создавали для каждого случая свой уникальный шаблон

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

image
Читать дальше →
Total votes 68: ↑58 and ↓10 +48
Comments 73

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity