Pull to refresh
26
0
Владимир Гребнев @ImKremen

User

Send message

AngularJS — Вы уверены, что знаете как работает ng-if?

Reading time5 min
Views44K

Не так давно я уже писал про поведение ng-if директивы, но тогда я столкнулся с проверкой условия, но сегодня возникла другая проблема.

В проекте достаточно много таких элементов как tooltip, popover, modal windows и так далее. Думаю, все вы понимаете, что это за элементы и рассказывать про них я не буду. Для многих из них используется абсолютное позиционирование. Если бы мы не использовали кастомные директивы, то проблем бы не было — все модальные окна лежали бы в конце body и показывались бы когда нужно. Но так, как все эти элементы объявлены как директивы, возникает проблема с позиционированием, так как у директивы может быть родитель с относительным позиционированием и так далее.

<div style="position: relative; overflow:hidden">
  <button ng-click="visible = true">Greeting</button>

  <modal visible="visible">
      Hello, Habr!
  </modal>
</div>

Читать дальше →

AngularJS. Организация данных

Reading time6 min
Views33K
По мере того как растет приложение, представление данных в виде набора JSON объектов становится все менее удобным. В этой статье я расскажу про способ организации работы с данными в своих приложениях.

Начнем с простого примера. Создадим страницу с информацией о книге. Контроллер:
Читать дальше →

Дэн Саффер — Микровзаимодействия (Microinteractions). Конспект книги

Reading time21 min
Views39K
Microinteractions book cover«Детали — это не детали. Они создают дизайн.» — Чарльз Имз.

Успех цифровых продуктов определяется мелочами. Книга «Микровзаимодействия» Дэна Саффера научит вас проектировать эффективные функциональные элементы. А этот подробный конспект поможет лучше запомнить прочитанное или даже заменит англоязычный оригинал.

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

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

Читать дальше →

Maxmertkit. Идеальный css-фреймворк

Reading time29 min
Views48K


Всю документацию на английском языке вы сможете прочесть на maxmert.com.

Требования и задачи


При создании версии 1.0 мне пришлось пересмотреть основные требования к фреймворку:

  • Возможность легко добавить/удалить размер или тему. Json-файл с прописанными темами и размерами для каждого виджета. Таким образом можно конфигурировать фреймворк исправляя json-файл.
  • Модульность. При отключении или добавлении любого виджета фреймворк должен стабильно работать (привет bootstrap).
  • Особое именование классов для избежания переопределения пользовательских классов.
  • Javascript компоненты без jQuery (но с возможностью его использования, если он подключен).


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

Осторожно! Трафик.
Читать дальше →

Вкладки (страницы) на одной странице на html/css с помощью :target

Reading time2 min
Views147K
Рассмотрим один из вариантов создания нескольких страниц или вкладок (в том числе вложенных) на html и css без скриптов, списков и таблиц, на одной html странице. Только дивы, только хардкор. Подходит для небольших портфолио и элементов интерфейса. Не будьте буратинами используя это везде подряд.
Суть:

image
Читать дальше →

ReactJS in a nutshell. Часть 1

Reading time12 min
Views28K

Добрый день, уважаемые читатели.


В последнее время на Хабре всё чаще упоминается такой замечательный фреймворк, как React.js. Я работаю с ним уже 4 месяца, поэтому решил поделиться опытом использования. Решено было сделать небольшую серию статей, которые должны стать максимально кратким полным руководством по фреймворку. Это моя первая публикация на Хабре, поэтому прошу не судить слишком строго. Моя главная задача – рассказать о подходах и практиках, второстепенная – узнать у людей, использовавших React, как они работают с ним и как они решали те или иные кейсы. Ну и, конечно, расширить сообщество фреймворка. Начало я оформил в виде небольшого конспекта-шпаргалки. А дальше только практика.

Читать дальше →

Визуализация «В Контакте»: Скажи мне, кто твой друг?

Reading time2 min
Views146K
Привет, Хабралюди!

У меня есть хобби. Я ночами (в нерабочее время) пишу библиотеку укладки графов: vivagraph.js. Хотел поделиться с вами, узнать что думаете. Визуализировал я сеть друзей своих на «В Контакте» с использованием WebGL. Но лучше один раз увидеть, чем читать, верно?



Это мои друзья. Каждая точка — человек, целый мир, с которым так или иначе мне повезло встретиться. Линия между точками обозначает дружбу. По этой сети можно, правда, сказать многое о человеке.

Как построить свою сеть?

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

Reading time15 min
Views105K


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


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

Полетели!

Делегирование событий в AngularJS. Попытка разобраться

Reading time2 min
Views14K
Евгений Гришковец, спектакль 'Как я съел собаку'Гришковец как бы говорит нам «А давайте разберемся»

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

$('ul').on('click', 'li', function(){ // обработчик ....

не совсем приемлем в декларативном AngularJS. Собственно, последовал совет использовать свою директиву, решающую проблему делегирования. На самом деле, на ум мне ничего толкового не пришло, и я решил погуглить, наткнулся на такой вариант: создаем директиву, которую необходимо установить на родительский для группы нужных нам элементов узел, который регистрирует слушателя.
Вот демо.
А вот 2 интересующие нас части кода:
html
<ul bn-delegate="li a | selectFriend( friend )">
 
        <li ng-repeat="friend in friends">
 
            <!-- Delegate target. -->
            <a href="#">{{ friend.name }}</a>
            <!-- Delegate target. -->
 
        </li>
 
    </ul>


//js
                    element.on(
                        "click.bnDelegate",
                        selector,
                        function( event ) {
 
                            // Prevent the default behavior - this is
                            // not a "real" link.
                            event.preventDefault();
 
                            // Find the scope most local to the target
                            // of the click event.
                            var localScope = $( event.target ).scope();
 
                            // Invoke the expression in the local scope
                            // context to make sure we adhere to the
                            // proper scope chain prototypal inheritance.
                            localScope.$apply(
                                function() {
 
                                    expressionHandler( localScope );
 
                                }
                            );
 
                        }
                    );


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

Введение в D3

Reading time6 min
Views140K

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

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

Читать дальше →

Условная загрузка для адаптивного веб-дизайна

Reading time4 min
Views20K
Пол Хаммонд (Paul Hammond) написал большую статью под названием «Ускорь свой сайт с применением отложенной загрузки контента» (Speed Up Your Site with Delayed Content). В своем материале он изложил технику для погрузки части содержимого, такого как изображения аватаров профилей пользователя в комментариях, после первоначальной загрузки страницы, что дает хороший прирост производительности при загрузке страницы.

Есть и другие ситуации, когда отложенная загрузка контента может быть применена, например в адаптивном веб-дизайне.

Читать дальше →

Готовим IndexedDB

Reading time7 min
Views81K


На Хабре уже рассказывали про IndexedDB — стандарт хранения больших структурированных данных на клиенте. Но это было давно и API сильно изменился. Несмотря на это в поиске статья всплывает одной из первых и вводит в заблуждение многих, кто начинает пытатся работать с этой технологией. Поэтому я решил написать новую статью с информацией об актуальном API.
Читать дальше →

Расширение и компоновка директив

Reading time4 min
Views18K
Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.

Хорошо написанная директива должна
  • решать одну задачу
  • легко расширяться
  • не конфликтовать с другими директивами


Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)

image

<input ng-model="user.password"
       ng-minlength="6"
       form-password
       form-error="Не менее 6 символов">


Сколько директив используется?
Читать дальше →

Директивы в AngularJS

Reading time7 min
Views83K
Директивы — это ключевая особенность AngularJS. С помощью директив можно добавлять новое поведение существующим HTML элементам, можно создавать новые компоненты. Примерами директив, добавляющих новое поведения для существующих HTML элементов, могут служить input, select, textarea в связке с ngModel, required и т.п. Перечисленные директивы в основном связаны с валидацией форм в AngularJS. Но тема валидации заслуживает отдельной статьи.

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

Если вы разрабатываете приложение на AngularJS и не создаете директивы, то это уже само по себе немного настораживает. Либо ваше приложение достаточно простое и уложилось в стандартные возможности AngularJS, либо, скорее всего, что-то не так с архитектурой вашего приложения. А если у вас при этом есть работа с DOM-ом в контроллерах или сервисах, то вам однозначно надо разбираться с темой создания директив, т.к. манипуляций с DOM-ом не должно быть нигде, кроме директив.

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

Читать дальше →

HTML по стандартам

Reading time10 min
Views125K
Привет Хабр!

image Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.
Читать дальше →

AngularJS — разделение приложения на модули и загрузка компонентов с помощью RequireJS

Reading time4 min
Views34K
Использование AngularJS в паре с RequireJS — достаточно популярный подход к разработке веб приложений в последнее время. И один из основных вопросов — структура приложения. Существует достаточно известный seed для такого приложения tnajdek/angular-requirejs-seed, но мне это не походит, так как при увеличении функционала приложения — данная структура просто будет засоряться кучей файлов, не будет никакого логического разделения скриптов и достаточно сложно будет их менеджить.

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

Планируете писать приложение на AngularJS? Пост вам в помощь

Reading time6 min
Views38K
Самые непристойные и отвратительные наши поступки, выходящие за всякие нормы морали и принципов, обычно начианаются со слов «А почему бы и нет?».

В данном посте я затрону вопросы проектирования приложения на AngularJS, философии, его архитектуры, сборки, пройдусь по разным полезным библиотекам и готовым архитектурным шаблонам. В довершение устрою небольшую Angular+Require.js+Grunt+Yeoman оргию, которую я назвал Angular-Super-Seed или чуть более скромно ASS-генератор.

Так что, если вы планируете писать приложение на Angular, то почему бы и нет?

Мотивация


  • «Поступай с людьми так, как хотел бы, чтобы поступили с тобой». Вдруг кому-то пригодится
  • Узнать что-нибудь новенькое как о себе, так и о разработке в комментариях.
  • Попиарить свой генератор приложения ASS.

Читать дальше →

LocalForage: кроссбраузерное локальное хранилище от Mozilla

Reading time5 min
Views19K
Уже довольно давно у веб-приложений появилась возможность хранить часть данных или файлов локально. Можно даже кешировать MP3-файлы. Браузеры научились хранить немалые объёмы данных. Тем не менее, пока что технологии локального хранения сильно фрагментированы.

localStorage предоставляет лишь самые базовые функции, это хранилище довольно медленно и не умеет хранить блобы. IndexedDB и WebSQL асинхронны, быстры и поддерживают большие объемы данных, но их API довольно запутан. Кроме того, ни IndexedDB, ни WebSQL не поддерживаются всеми основными браузерами, и, похоже, в ближайшем будущем эта ситуация не изменится.

Если вам нужно писать веб-приложение с оффлайн-режимом, и вы не знаете, с чего начать, то эта статься для вас. Если вы уже пытались работать с локальными хранилищами, и у вас от этого голова пошла кругом — статья и для вас тоже. Мы в Mozilla написали библиотеку localForage, которая значительно облегчает задачу хранения локальных данных в любом браузере.

Почувствовать на своей шкуре все сложности работы с локальным хранилищем мне помогла разработка around — HTML5-клиента для Foursquare. Хотя в этой статье я рассказываю, как использовать localForage, возможно кто-то предпочтёт изучить реальные примеры работы с ней.

localForage — очень простая библиотека JavaScript, которая использует API, похожий на API localStorage, с теми же самыми базовыми методами get, set, remove, clear и length, но имеет ещё несколько важных улучшений:

  • асинхронный API с колбэками;
  • драйвера IndexedDB, WebSQL и localStorage (самый подходящий драйвер выбирается автоматически в зависимости от возможностей браузера);
  • поддержка блобов и произвольных форматов данных, так что можно хранить изображения, файлы и так далее;
  • поддержка обещаний ECMAScript 6.

Использование IndexedDB и WebSQL позволяет хранить намного больше данных, чем localStorage. Неблокирующий асинхронный API делает приложение более быстрым и отзывчивым, так как основной поток приложения не подвисает во время выполнения вызовов get/set. Поддержка обещаний позволяет писать чистый код без спагетти из колбэков. Конечно, если вы любите колбэки, можно использовать и их.
Хватит болтовни, покажите, как это работает!

Анонимный Дед Мороз 2014. Пост хвастовства новогодними подарками

Reading time1 min
Views58K

Привет, %username%


Хабра-АДМ 2014 набирает обороты. Уже более 100 человек отправили подарки. И, что очень круто, 3 уже получили.

А это значит, что наступила пора показать всем, что вам прислал ваш Дедушка Мороз.

С НАСТУПАЮЩИМ НОВЫМ 2014 ГОДОМ!

UPD: Ссылка для обращения к новогодним эльфам.

Information

Rating
Does not participate
Location
Днепр, Днепропетровская обл., Украина
Date of birth
Registered
Activity