Pull to refresh
14
0
Курганов Александр @akurganow

Frontend

Send message

Грабли mongoose

Reading time4 min
Views59K
Хакер — человек, который наступает на грабли, которые спрятаны в сарай и закрыты на замок

Mongoose — самый популярный модуль для работы с mongodb на javascript. Примеры на сайте позволяют достаточно быстро и успешно начать его использовать, однако mongoose имеет ряд неожиданных особенностей, которые могут заставить программиста начать выдирать волосы на голове. Именно об этих особенностях я и собираюсь рассказать.
Читать дальше →

Как сверстать интерактивные вкладки в email-письме

Reading time9 min
Views17K


В нашем блоге мы уже неоднократно рассказывали о создании интерактивных email-рассылок с помощью CSS и HTML. Сегодня мы представляем вашему вниманию адаптированный перевод заметки Джастина Ку о том, как сверстать интерактивные вкладки, которые будут работать в почтовых программах iOS, Android и популярных веб-приложениях.
Читать дальше →

Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA

Reading time7 min
Views34K
Как известно, HTML5 имеет расширенные возможности семантической вёрстки. Он позволяет обернуть отдельные логические блоки страницы в специально предназначенные для них блочные теги, какие как header, main, footer и другие. Ну а улучшение структурной и семантической вёрстки, как правило, автоматически способствует повышению уровня accessibility web-интерфейса для пользователей программ экранного доступа, потому что они добавляют элементы страницы, по которым возможно осуществлять навигацию и быстро перемещаться между блоками контента.

В принципе, дополнительная разметка для обеспечения accessibility реализуется через отдельную технологию WAI-ARIA, однако и стандартные семантические структуры HTML5 современными браузерами и современными программами экранного доступа воспринимаются как соответствующие атрибуты ARIA для вспомогательных технологий. Проще говоря, это означает, что в теории следующие два варианта вёрстки с точки зрения программ чтения экрана аналогичны::
Читать дальше →

Очередной умный дом, в трех частях. Часть третья, пользовательско-интерфейсная

Reading time4 min
Views46K
Итак, подошло время рассказать и показать как это все управляется. Как я уже говорил во второй части, после нескольких итераций — все остановилось на HTML + JS. Писать отдельное приложение под Android я не планировал, но жизнь, как обычно, внесла некоторые коррективы.

Ссылки на первые две части:

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

10 самых распространённых ошибок при программировании на JavaScript

Reading time10 min
Views156K


Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

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

Что нужно знать, чтобы хорошо рисовать?

Reading time5 min
Views268K


Давид Ревуа — прекрасный художник, работающий со свободным программным обеспечением, постоянный член сообществ Krita Foundation и Blender Institute, концепт-художник анимационных проектов Gooseberry Open Movie Project, Mango Open Movie Project (Tears of Steel) и Durian Open Movie Project (Sintel). В этой статье он делится с начинающими художниками списком знаний, которые необходимо приобрести, чтобы работы получались реалистичными. Он обращает внимание, что для рисования «в цифре» следует обзавестись теми же навыками, что и в традиционной технике. Итак, приобщимся к его опыту.
Читать дальше →

ECMAScript 6 Promises

Reading time5 min
Views52K
На Хабре уже встречались статьи о замечательной технологии Promises, которая в будущем станет частью стандарта ECMAScript 6, однако, в этих статьях не было подробного описания, почему же они так полезны и в чем таки их преимущества. Дабы заполнить этот пробел, я решил написать эту статью.
Читать дальше →

Продвинутый Gulp и Browserify: интересные трюки

Reading time9 min
Views42K
Пару недель назад я начал цикл о том, как делал некоммерческий музыкальный проект (первый пост есть в «я пиарюсь», не буду ставить ссылок), но, к сожалению, в первой же статье увлекся, и вместо того, чтобы рассказывать о том, как делал конкретно его, начал вспоминать эффективные трюки из других проектов. Видимо, именно это вкупе с прописанным акцентом на сам проект привело к тому, что за мной и постом прилетело НЛО.

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

Поэтому я постарался убрать все упоминания проекта и повторно публикую (с доработками и правками) статью, которую по сути никто еще не видел. Если вы фанат grunt — почитайте хотя бы вторую часть: то, что вы не любите gulp, не значит, что вы не любите browserify.

Краткое содержание:
  1. Простой способ обработки ошибок;
  2. Универсальная структура для хранения исходных файлов;
  3. Объединение нескольких потоков (например, скомпилированный coffee и js) в один;
  4. Создание потока из текста;
  5. создание собственных плагинов для Browserify;
  6. создание плагинов из плагинов Gulp для Browserify.

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

Продвинутое использование объектов в JavaScript

Reading time15 min
Views50K
Этот пост выходит за рамки повседневного использования объектов в JavaScript. Основы работы с объектами по большей части так же просты, как использование JSON-нотации. Тем не менее, JavaScript дает возможность использовать тонкий инструментарий, с помощью которого можно создавать объекты некоторыми интересными и полезными способами и который теперь доступен в последних версиях современных браузеров.
Читать дальше →

Смотрим MKV на Apple TV из Plex

Reading time5 min
Views218K
Всем привет!

Продолжая цикл Apple-related статей, сегодня хочу поделиться удивительным способом, как можно заставить приставку Apple TV полюбить распространённую ныне матрёшку (MKV) и предоставить ей возможность комфортабельного воспроизведения на большом экране.
Читать дальше →

Smart KM Link A820

Reading time2 min
Views9K
Часто приходится работать за ноутом и ПК одновременно — не весь софт есть и там и там, не весь софт на ноуте работает достаточно быстро, часто нужно прервать работу и ехать на встречу.

Работая таким образом, я, как наверное и многие, периодически пытаюсь мышкой компа что-то щелкнуть на ноуте или передвинуть мышу с ноута на соседний монитор. Особенно это знакомо тем, у кого больше одного монитора на столе.
Теперь это возможно!
Такую штуку я ждал давно

5 популярных JavaScript-хаков

Reading time4 min
Views67K
Существует несколько JavaScript-хаков, которыми постоянно пользуются опытные программисты. Они не совсем очевидны, особенно для новичков. Эти хаки используют возможности языка, имеющие некоторые побочные эффекты. В этой статье я объясню, как работают 5 таких распространённых хаков.
Читать дальше →

Выравниваем блок по центру страницы

Reading time5 min
Views994K
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Читать далее

GitHub's CSS

Reading time7 min
Views15K
[Прим. перев.]: предлагаю вашему вниманию перевод статьи Марка Отто, разработчика GitHub, бывшего разработчика Twitter, создателя самого известного CSS фреймворка Bootstrap. В этой статье он рассказывает о внутреннем устройстве CSS проектов GitHub.


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

Несколько фактов


Обзор нашего текущего состояния CSS:

  • В качестве препроцессора мы используем SCSS.
  • У нас есть более 100 отдельных исходных файлов стилей, которые мы компилируем перед выкаткой в продашн.
  • Исходники компилируются в 2 отдельных CSS файла (чтобы избежать проблемы с максимальным количеством селекторов для IE<10).
  • Эти 2 файла весят в сумме около 90 kb.
  • Мы не используюм какую-нибудь особенную «CSS архитектуру».
  • Для определения размера мы выбрали пиксели, но все же у нас есть немного «em-ов».
  • Мы используем Normalize.css, смешанный с несколькими нашими собственными стилями для сброса свойств.

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

Малоиспользуемые, но от этого не менее прекрасные возможности LESS

Reading time5 min
Views35K
Данный пост навеян коментарием уважаемого хабраюзера SerafimArts о том, что LESS много чего не умеет. Хочется развеять эти крамольные заявления и заодно показать, каким прекрасным может быть LESS, если правильно его готовить.

Примечание: некоторые примеры «из жизни» в данной статье предоставлены для тех людей, кто по каким-то причинам (вплоть до религиозных) не использует Autoprefixer.

Примечание 2: для всего, что написано ниже используется последняя версия LESS, потому что нет вообще ни одной причины её не использовать.



Слияния


Они же объединения, они же мерджи (Merge). Используются, если вам нужно что-нибудь присоединить через пробел или через запятую. Транзишны, трасформы, множественные бэкграунды, тени (простите за русское слово: бокс-шадоуы звучит как-то неласково) ликуют. Лучше всего за меня скажут примеры.
Смотреть примеры

Визитки 2.0: Добавим немного NFC-магии

Reading time8 min
Views86K
Визитные карточки – такая же привычная часть бизнеса, как и электронная почта или телефон. Многие уже давно предрекают им смерть в связи с «прогрессом» QR-кодов, соцсетей и передачи файлов, но они до сих пор живее всех живых. Мы пока не можем обойтись без бумажных карточек для передачи контактных данных нашим клиентам и партнёрам. QR-коды не стали популярными, так как требовали установки дополнительных приложений, хорошего освещения и были слишком громоздкими для хранения всех нужных данных. В соцсетях зарегистрированы не все и хранить там персональные данные порой непозволительная роскошь. А передача файлов с помощью различных технологий типа AirDrop, Alljoyn или Beam, будем честны, пока недостаточно удобна и широко распространена.

И всё-таки есть способ добавить немного магии в ваши бумажные визитки и быстро передать ваши контактные данные прямо в записную книжку телефона партнёра. Я говорю об NFC.

Собственно, с бумажными визитками понятно, что делать: сканируем и распознаем с помощью ABBYY Business Card Reader и сохраняем в контакты. Но вот для того, чтобы добавить визиткам «айтишность» и некоторый шарм, нужно что-нибудь дополнительное. В этой роли отлично сыграет NFC-метка.

Узнать больше

Dalek.js — простое функциональное тестирование веб-приложений

Reading time2 min
Views23K
Вы знаете, что такое Selenium и/или PhantomJS? И с чем их едят? Тогда, возможно, вам будет интересен проект Dalek.js — кроссбраузерная утилита для тестирования веб-приложений.

Dalek.js позволяет писать тесты, которые ходят по веб-страничкам, щелкают ссылки, заполняют формы, отправляют данные и делают скриншоты. То же самое и даже больше делают тесты, написанные с использованием Selenium'а или Phantom.js, в чем подвох?

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

Руководство по WebKit-атрибуту srcset в тэге img

Reading time3 min
Views48K
Свободный движок WebKit теперь поддерживает srcset атрибут изображений, IMG элементов (официальная спецификация от W3C). Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей. Также важно отметить о наличие изящного решения для браузеров, которые еще не поддерживают данный функционал.

Обратите внимание, в необходимости использовать последние ночные сборки WebKit.

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

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity