Search
Write a publication
Pull to refresh
0
Лангольф Александр @langolfread⁠-⁠only

User

Send message

Онлайн редактор для Bootstrap— LayoutIt

Reading time1 min
Views102K
Twitter Bootstrap становится всё популярнее и популярнее, многие используют его в своих проектах, думаю еще больше людей используют для прототипирования интерфейсов. Я не исключение. И вот сегодня утром наткнулся на интересный сервис — LayoutIt. По сути LayoutIt — это онлайн редактор для создания интерфейсов с использованием Bootstrap. Редактор представляет собой Drag & Drop интерфейс.

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

jRIApp — новый HTML5 фреймворк для создания интернет бизнес приложений

Reading time8 min
Views13K
jRIApp — ещё один HTML5 фреймворк, созданный для разработки Web приложений, которые по своей функциональности мало чем уступают desktop приложениям.

Основное отличие от уже существующих фреймворков типа angularJS или emberJS, это наличие интегрированного с фреймворком сервиса данных, а также использование MVVM дизайн-архитектуры вместо наиболее распространенного в фреймворках такого типа MVC дизайна.
В общих чертах его можно охарактеризовать как HTML5 Фреймворк реализующий привязку к данным, имеющий инфраструктуру для декларативного прикрепления логики к HTML элементам, имеющий классы для работы с данными (DbContext, DbSet) и имеющий реализованную серверную часть дата сервисов.

Клиентская часть фреймворка написана на javascript (сейчас в разработке typescript версия), а серверная часть на C#.

Этот фреймворк опубликован на GitHub под MIT лицензией. Он включает демо-приложение написанное с использованием ASP.NET MVC4 и содержит документацию по его использованию.
Читать дальше →

Тест на фиттспригодность

Reading time11 min
Views67K
Статье 14 лет. Но, что удивительно, перевода этой классики на Хабре нет. Значит, будет.

Итак, вы называете себя «проектировщиком интерфейсов»? Если не сможете на все вопросы ответить быстро и обоснованно — вон из профессии!

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

А если вы не знаете, что такое «закон Фиттса», просто пройдите тест, не подсматривая в ответы. Это прояснит, какими стереотипами вы руководствовались. В ответах — подробный разбор задействованных принципов, и вы можете сравнить свои стереотипы с моими ответами. И не пугайтесь плохих результатов: большинство людей, даже давно знакомых с компьютерами, в первый раз проходит тест очень плохо. Зато во второй раз ответы получаются правильные, и большинство считает эту статью самой ценной на моём сайте: одно её прочтение улучшит все интерфейсы, спроектированные в дальнейшем.

Эти вопросы предполагают, что всё экранное пространство под вашим полным контролем. Просто представьте себе, что вы главный дизайнер в Microsoft или Apple.
Читать дальше →

Управление front-end проектом с помощью NPM

Reading time3 min
Views21K
Недавно я задался вопросом поиска инструментария для разработки мобильных приложений на html/css. Из требований были: доступность, легковесность, простота настройки. Выбор пал на встроенный Node менеджер NPM. NPM содержит
инструментарий для базовых тасков типа install и запуска пользовательских скриптов. Также NPM не такой громоздкий, как Grunt и не требует адаптации модулей под себя, т.к. запускает модули с командной строки.

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

Манипулирование URL'ами в JavaScript

Reading time2 min
Views71K
Из года в год, сталкиваюсь с одной и той же проблемой. Как добавить, изменить или удалить параметр к некоторому адресу в строковом виде. Быстро и грязно это можно делать с помощью, например, регулярных выражений или найти каке-то готовое решение. Зачастую также может потребоваться, к примеру, подменить путь в адресе или изменить протокол с HTTP на HTTPS и т.д.

В целом, это хочется делать просто и понятно. При этом хочется разумного компромиса. Я встречал некоторые библиотеки, которые дают мощный функционал, но при этом по объему — десятки килобайт JavaScript кода. Несколько десятков килобайт, чтобы, например, подменить параметр в QueryString? Эх…
Читать дальше →

Создание npm-пакета

Reading time2 min
Views65K


Типичная ситуация — в проекте существует некий модуль. Модуль развивается, становится самостоятельным элементом и копируется в другой проект. Потом еще один проект. И еще.
В каждом проекте модуль обновляется и улучшается, и, в какой-то момент, становится не понятно, где актуальная версия. Да ладно, «не понятно где актуальная версия»! Вполне возможно, что в каждом проекте у модуля будут свои модификации, в которые будет достаточно сложно привести в порядок для использования в следующем проекте.
Вполне можно ограничиться созданием отдельного репозитория для модуля, например на GitHub или Bitbucket. Но добавлять репозиторий как субмодуль для GIT — это путь к приключениям.
Но можно пойти дальше, и создать на основе такого модуля npm-пакет. Работать с такими пакетами очень просто. Установить npm-пакет можно с помощью команды npm install, а обновить с помощью npm update.
Подробности

Дайджест интересных новостей и материалов из мира айти за последнюю неделю №53 (13 — 19 апреля 2013)

Reading time8 min
Views33K
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


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

Кроссплатформенная разработка на Adobe Air: частный случай

Reading time3 min
Views27K
Сегодня нам бы хотелось немного рассказать о частном случае применения технологии flash в версии Adobe Flash CS6 + Adobe Air SDK 3.5 для разработки iOS/Adnroid приложения, описанного в нашем предыдущем посте.
image
Читать дальше →

Foundation 4

Reading time1 min
Views47K


Месяц назад вышла четвертая версия фреймворка Foundation от компании Zurb, достойной альтернативы Twitter Bootsrap.
В данной версии делался упор на мобильные устройства. В компании считают, что дизайнеры должны ориентироваться в своей работе в первую очередь на мобильные устройства, а после уже на декстопы.
Читать дальше →

DVelum — платформа разработки на PHP + ExtJS4 Выпуск версии 0.9

Reading time6 min
Views12K
Основная цель проекта — создание удобной RAD-платформы разработки web-приложений, интерфейсов управления базами данных, CRM-систем, автоматизированных рабочих мест. Функционал платформы максимально автоматизирует рутинные процессы разработки, освобождая пространство для творческой самореализации.

В прошлом году мы уже знакомили вас с платформой DVelum в публикации «DVelum – платформа разработки на PHP + ExtJS4».

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

CRUD-приложение на Ext JS и Ruby on Rails за 7 минут

Reading time5 min
Views22K
Это обновленная версия устаревшего поста.

Этот пост покажет вам простые шаги по созданию менеджера задач TODO с использованием Ext JS, Ruby on Rails и Netzke. Это займет у вас приблизительно 7 минут, и если вам заранее любопытно, стоит ли оно того, загляните прямиком в секцию «Обсуждаем результаты» (кстати, самую большую). Наша цель заключается в создании веб-приложения которое позволит нам добавлять, редактировать и удалять задачи TODO, так же как и помечать их как завершенные. В дополнение к этому вы сможете сортировать задачи, делать поиск по ним, редактировать несколько задач одновременно — и это еще не все. Если хотите, засекайте время на секундомере — и давайте приступим.



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

Захабренный договор на разработку сайта, дизайна, софта. Версия 1.1

Reading time18 min
Views246K
На сайте немало постов о том, какие условия нужно включать в договор на создание сайтов и программ (краткий список ниже), но нет договора в формате, который можно взять за основу для составления своего договора. Мы изучили условия из постов (спасибо авторам), подумали над ними, переработали и учли в предлагаемой на ваш суд форме договора. Так что договор пока можно считать частично «захабренным».


Договор авторского заказа

Сравнение Angular, Backbone, CanJS и Ember

Reading time7 min
Views95K
(Дата публикации оригинала — 12.04.2013)
Выбор JavaScript MVC фреймворка — тяжёлая работа. Нужно учесть много факторов, и число вариантов выбора может быть огромно. Достаточно взглянуть на проект ToDoMVC (о нем по-русски).

Я работал с 4 фреймворками: Angular, Backbone, CanJS и Ember. Поэтому решил сделать сравнение, чтобы помочь вам решить, какой из них использовать. Я выделю несколько факторов, которые вы можете использовать при выборе. Каждый фактор будет иметь оценку от 1 до 5 (больше — лучше). Я старался быть беспристрастным, но, конечно, оценки основаны на личном опыте.


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

Как сократить количество написаного кода при ajax запросах? И ассинхронная отправка файлов

Reading time4 min
Views16K
Итак ajax запросы, всё просто, все привыкли их уже писать, но всё же как можно сократить количество написанного кода.
jquery.async.js

Сразу пример:
<form action="/" jasync>
	<input type="submit" />
</form>
форма отправляется ассинхронно

<input type="file" href="/" multiple jasync />
<div type="file" href="/" multiple jasync>Выберите файл</div>
<div href="/" jasync dropfile>Перетащите файлы и они отправятся на сервер</div>
файлы загружаюся асинхронно

<a href="/" jasync data="year=2013&month=5" class="send">отправить данные</a>
данные отправляется ассинхронно

И тут у многих наверное возник вопрос, как обрабатывать полученные данные, если форма не валидна зачем её отправлять, а если я хочу ещё отправить дополнительные параметры?
Читать дальше →

А сколько «весят» страницы твоего сайта?

Reading time4 min
Views71K
image
У многих из нас хороший, скоростной интернет. Поэтому многие вебмастера не задумываются над тем, сколько должен весить сайт. Однако, я часто сталкиваюсь с тем, что в моём распоряжении слабый интернет. Таким примером является то, что живя на достаточном расстоянии от города М, у нас нет 4G, а скорость 3G я совсем не замечаю на своём телефоне. Скорее всего, статья ничего нового вам не раскроет, просто посмотрим сколько «весят» главные страницы популярных сайтов, а так же попытаемся выяснить приемлимые цифры.

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

Хорошая беседа о борьбе с прокрастинацией

Reading time1 min
Views61K
Давно знаком и являюсь поклонником Яны Франк (ака Миумау в ЖЖ — www.miumau.lj.ru). Был на ее встрече позавчера, записал всю встречу на видео. Что мне понравилось: много дельных советов о борьбе с творческим кризисом, прокрастинацией в личном развитии и астенизацией. Все эти подходы применимы не только среди «художников», или тех чьи профессии считаются «творческими», но и вообще среди людей, которые хотят получать удовольствие от работы.

Вначале пару минут вступления-хождения.

Автопрефиксер — окончательное решение проблемы префиксов в CSS

Reading time4 min
Views58K
Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:
a {
    transition: transform 1s
}


Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):
a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}


Эта утилита работает во время выкладки сайта на сервера (и на машине программиста во время разработки), так что не заметна для клиентов и не требует какой-то поддержки от браузеров.

Проблема


К сожалению текущие инструменты плохо решают задачу:
  • Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
  • В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
  • Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
  • Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
  • Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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

Возвращаем приватность или большой брат следит за мной на стандартных настройках. Часть 3. Настраиваем «Фейсбук» и «Вконтакте»

Reading time4 min
Views132K
В первой части мы говорили об общих настройках для всех браузеров, вскользь прошлись по паролям, шифрованию и бекапе, а также несколько усложнили жизнь «Гуглу».

Во второй части мы увидели, сколько статистики собирают на нас даже без использования сторонних (third-party) «куки»-файлов и рассказали о пользе и настройке VPN простым языком.

Сегодня поговорим о приватности в социальных сетях, благо даже в комментариях были прецеденты. Однако пока небольшое отступление.

Судя по комментариям, некоторые из вас считают, что простым людям это не нужно. Но вот, например, недавняя дискуссия на «Реддите», в которой показано, как то, откуда вы, сколько времени ищите билеты и также социальные предпочтения, влияет на цену билетов, которая показывается вам в форме покупки.
I bought a return flights to the Philippines a few days ago, just checked it with incognito mode….180$ cheaper!

I F… KNEW IT! I kept refreshing when I was buying airplane tickets and that f…er kept going up when I hit the refresh button. It eventually went up by $100 extra dollars!

I had been searching for a specific itinerary for a few weeks, just checking on prices. I saw this on the front page and decided to try it out. $400 DIFFERENCE!!!!

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


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

Bootstrap-wysiwyg: крошечный текстовый редактор

Reading time2 min
Views105K



Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.
Читать дальше →

Хроники LinguaLeo: как мы сделали «Диалоги на английском» с Node.js и DynamoDB

Reading time5 min
Views37K


Пользователи LinguaLeo начинают изучать английский язык в Джунглях — хранилище тысяч материалов разного уровня сложности, формата и тематик; шаг за шагом учатся слышать и понимать речь носителей языка и расширять словарный запас. Кому нужна грамматика — идут в Курсы. Словарный запас пополняется не только из Джунглей, при добавлении незнакомых слов в Личный словарь, но и с помощью подготовленных Наборов слов, доступных для индивидуального изучения. В разделе Общение можно вести Диалоги на английском, чтобы практиковать язык с другими пользователями LinguaLeo в режиме real-time, выбирая темы для общения. Общение только на английском!

Для создания Диалогов на английском мы использовали Node.js, DynamoDB (все на AWS). Сейчас поделимся нашим опытом.
Читать дальше →

Information

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