В статье описываю подход к созданию удобного инструмента на Javascript для онлайн-редактирования текстов. В качестве примера создал прототип для редактирования статей на Хабре (описан ниже). С его помощью сейчас и вношу изменения в данную статью.
Передо мной встала задача выбора онлайн-редактора для текстов на сайте. Самым очевидным решением оказался бы один из WYSIWYG редакторов. Но этот вариант мне не понравился по нескольким причинам. Во-первых, многие уязвимости популярных CMS систем связаны именно с WYSIWYG редакторами. Во-вторых, после публикации текст часто будет отличаться от того, что было в редакторе. В-третьих, подобные редакторы сложно расширить для поддержки новых тэгов и элементов. Поэтому остановился на WYSIWYM редакторе.
Сейчас работаю над новым PHP-скриптом, который будет бэкапить не только базу данных, но и все файлы сайта.
Изначально планировалось использовать один из распространённых форматов архивов. В данном случае, первое, что приходит в голову — ZIP и TAR. Для них есть множество готовых классов, а расширение ZIP даже входит в стандартную поставку PHP. Но изучив спецификации форматов, а также опробовал готовые решения, склонился к изобретению своего велосипеда.
Просьба «велосипедохейтеров» воздержаться от комментариев в стиле «хватит нам велосипедов». В конце концов, без создания «велосипедов» не было бы ни Google, ни Google Chrome, ни Facebook, ни WinRAR и 7-Zip.
Первый вариант — купить на них стройматериалов и мороженого. Как подсказывает практика, достаточно здравый, потому что мороженое вкусное, а стройматериалы последние годы дорожают. Но это не вклад, а способ потратить деньги. Второй вариант — сходить в банк и отдать деньги на год. Проблема, очевидно, в том, что вы получите в конце года столько же, с учётом инфляции. Есть ещё куча вариантов, и все они более-менее известны и понятны.
Но хочется именно инвестировать. 30 тысяч рублей, то есть натурально смешную сумму для любого проекта, но вполне конкретные для вас лично деньги. И это возможно.
В этот понедельник я расскажу о мышке, помогающей избежать туннельного синдрома. Поехали!
Под катом — медицинский ликбез о причинах возникновения туннельного синдрома, о том, как его избежать, и конечно, обзор вертикальной мышки.
TL;DR
Эта обзорная статья. Такое себе "краткое содержание предыдущих серий". Она будет полезна для новичков, или тех, кто не следил за отраслью в последнее время. Для новичков это будет первый шаг во "Вселенную JavaScript", бывалые смогут освежить свои знания.
У JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
Изначально Автор хотел написать функциональный язык. Но менеджеры хотели получить, «обычный» объектно-ориентированный. И чтобы было легко искать разработчиков для новоиспеченного языка синтаксис решили сделать похожим на Java и даже название сделали похожим.
Но на этом история не заканчивается. Java, JavaScript это торговые марки Sun (а теперь Oracle). Microsoft не мог воспользоваться именем JavaScript (Netcape и Sun дружили против Microsoft). В результате Microsoft решил сделать реверс инжиниринг JavaScript и назвал его JScript. Сделали реверс инжиниринг, и сделали его настолько хорошо, что даже содрали все баги в реализации. Позже решили сделать стандарт и назвали его ECMAScript.
Как сделать простейший редактор самому, причем не будет никакой теории, только практика. Предупреждаю, для многих эта часть покажется простой и очевидной, так как текст ориентирован, можно сказать, на себя, в прошлом (нет, я не путешествую во времени :));
Описание работы очень легкого редактора «Suit Up» (оригинальный объем кода: 5.97KB (1.87KB gzipped), минимизированный: 3.35KB (1.37KB gzipped) на момент написания статьи, не считая спрайта и стилей).
Не так давно, а, точнее, года два назад, в кругу разработчиков, с которыми я имел честь общаться (почти все — новички), каждый, кому поступила задача поставить WYSIWYG, ставили монстрообразный TinyMCE. Этот редактор считался почему-то стандартом у многих веб разработчиков, хотя, мало кому нужны были то большое количество функций, которые предлагались программистам. Тут тебе и то и это. Наверно, таким образом, новички пытались сказать клиенту «смотри, мы тебе на сайт запилили Ворд».
Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.
Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.
Простейший редактор
Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:
Любите читать хелпы? А писать? Думаю, что 99% из вас ответят “НЕТ”.
Но от создания справки никуда не денешься, ведь справка является обязательным средством общения с пользователем. А чтобы создание хелпов не оказалось чем-то сложным, неуправляемым и непонятным, необходимо построить чёткий и отлаженный процесс.
В этой статье я бы хотел поделиться нашим опытом и описать процесс создания справочной документации, который мы используем в Alconost.
Так уж сложилось, что последние несколько лет я занимал самые разнообразные руководящие должности в полудюжине компаний, занимающихся разработкой программного обеспечения разного рода. Довелось побывать и тимлидом, и менеджером проекта, и группы проектов, руководителем отдела и руководителем технического направления; подопечных бывало от двух до ста пятидесяти человек, да и размеры компании варьировались от трёх до двухсот тысяч работников. Неизменным оставалось только одно: чисто управленческая работа, постепенный и окончательный отход от технических задач.
А сейчас, в период между Рождеством и Новым Годом, когда особенно обострена склонность к углублённой рефлексии, приходит понимание того, что, знай я некоторые «инсайдерские» подробности управленческой деятельности заранее – сделал бы совсем другой выбор лет эдак семь назад.
Вот поэтому и родился этот немного хаотичный и очень разнокалиберный список моментов, которые очень хотелось бы передать куда-то обратно, примерно в 2005 год – дайте знать, если кто-то вдруг уже научился это делать! А пока, может быть кто-то найдёт некоторые из перечисленных ниже пунктов не до конца очевидными, или даже полезными для себя; было бы приятно осознавать, что удалось помочь кому-то сделать более осознанный выбор профессии – или просто о чём-нибудь важном задуматься.
Вот на днях решил, что на страницу регистрации в срочном порядке нужно ставить капчу, боты на столько обнаглели, что без неё там хорошо себя чувствуют и зовут ещё больше ботов.
По запросу в поисковике «Скрипт капчи», выпадает столько готовых вариантов — что грех жаловаться, но все они мне не подходят — одни слишком страшные, другие через-чур мудренные.
Решено! Делаем капчу своими руками. Тема конечно избита, но процессом работы поделюсь.
От капчи я жду в первую очередь эргономику, сайт у меня цветастый и капча должна быть соответствующей.
На белом фоне рисовать цифры не по мне, поэтому делаем прямоугольник и заполняем его разными закорючками.
Размер фона в 3 раза больше чем размер будующей капчи т.к. в процессе генерации картинки, этот фон будет рандомно менять своё положение — делая каждую капчу уникальной.
В связи с неожиданным успехом совершенно ненаучной публикации о создании фонов за достаточно краткий отрезок времени, и вследствие неожиданного интереса хабрчан к изобразительному искусству я решил продолжить небольшие, но я надеюсь, увлекательные истории посвященные тому, как можно сделать что-либо просто, и тому из чего это простое состоит.
Сказанное выше означает, что данный материал, как и большинство материалов, которые я планирую публиковать далее, будут, интересны как начинающим, так и вовсе незнакомым с графикой людям, как база на будущее. Довольно развязная манера излагать теорию, неуместные шутки и истории из жизни художников помогут сделать эту публикацию полезной и для тех, кто просто хочет отдохнуть, попутно впитывая новую информацию.
У тех матерых спецов, которые рано или поздно всенепременно явятся сюда, чтобы линчевать меня (хотя бы за подобную манеру изложения и отношение к предмету), — я заранее прошу прощения. Каюсь, грешен, но ничего с собой поделать не могу, и графоманию эту намерен и дальше продвигать в массы.
Партия реверансов сделана, тылы прикрыты, паноптикум можно считать открытым.
Уверен, что голая теория вам нужна не более чем собаке пятая лапа. Признаюсь также, что все разы, когда я сталкивался с голой теорией, заканчивались крепким сном. Когда-то давно, когда я только начинал изучать первый пакет трехмерного моделирования, купив пару толстенных книг и проигнорировав при этом известное положение о том, что важен совсем не размер, со мной начали приключаться удивительные вещи. На первых же страницах. Я засыпал. Позорно. В тех позах, в которых меня застигала чертова книга. Везде. Даже в метро.
Я не хочу того же для вас. Хочу, чтобы история была интересной, а посему – долой нудную теорию, долой правила, лекторский тон и никому не нужный апломб. Никаких графиков, таблиц и сравнений. Только эмоции и веселье, по возможности, наподобие этой работы. Один из артов которые я изготовил во время компании в поддержку финансирования разработки игры Wasteland 2.
Что же останется в статье, если убрать особливо техническую информацию, — спросите вы?
Не люблю гонку версий, своей бессмысленностью отдаленно напоминающую гонку вооружений. Не успели как следует довести до ума текущую версию — выпускают новую, с новыми багами, уязвимостями и «особенностями». Для таких как я — любителей стабильных и проверенных решений для корпоративной среды, да и для себя тоже — у команды Мозилы есть сборка типа ESR: в течение длительного времени для нее выходят обновления, устраняющие ошибки и уязвимости, сама же major версия браузера не обновляется! Вот ссылка на страницу оф.сайта, откуда можно скачать эту замечательную ESR-версию (достигается путем не слишком очевидных ходов), также, ESR можно скачать с официального FTP ftp.mozilla.org/pub/firefox/releases/latest-esr/
Только что вышла давно мной ожидавшаяся 17-я ESR версия (предыдущая была только 10-я). В связи с этим событием решил написать подробное руководство по оптимизации нашего (не)любимого браузера — с разбором всех параметров, что каждый из них делает и откуда он получен.
Данная технология в свое время являлась чьим-то ноу-хау, но сейчас по прошествии нескольких лет решительно невозможно разобраться, кто является ее автором. Не смотря на то, что к ее использованию я пришел самостоятельно — не возьму на себя наглость утверждать, что именно я являюсь ее автором. Точно такими же авторами окажутся еще десятки, если не сотни людей, так как хорошие мысли, как правило, приходят во множество голов одновременно.
Перед тем как начать я хотел бы сделать акцент на двух положениях: Первое. Мы исходим из того что читатель знаком с такими пакетами как 3D Studio MAX (либо любым другим пакетом трехмерного моделирования) и Photoshop (или любым его аналогом). В данном конкретном случае я собираюсь использовать терминологию этих двух пакетов. Однако, не смотря на это те же самые принципы можно использовать, пользуясь любым другим софтом.
Второе. В своей работе я всегда исхожу из одной простой истины: простота – залог успеха. И если первое положение предельно ясно, то второе я хотел бы раскрыть несколько шире. Начав, как это ни печально, именно с теории.
Я весьма относительный технарь и многие вещи, доступные другим технарям для меня — темный лес. Не смотря на это я считаю, что мастеру достаточно иметь один-два любимых инструмента, чтобы делать шедевры, а посредственности в свою очередь не хватит и чемодана этих инструментов, ибо за внешним лоском, эффектами и хитринками не будет, не души, не профессионализма.
Хочу также отметить, что я не причисляю себя к мастерам, которые делают шедевры. Данное примечание я делаю для тех злых людей, которые говорят (или скажут после публикации), что я заносчив, что меня занесло под небеса, и тех кто вместо того чтобы работать предпочитает злословить словно ябедник Кийр из моей любимой книги Оскара Лутса «Весна».
С преамбулами покончено перейдем к сути.
Я утверждаю и не беспочвенно, что хороший фон можно и нужно создавать не за неделю, не за пять дней и даже не за три. Чтобы сделать хорошую картинку для казуальной игры, без разницы i-spy это, match-3 или аркада, достаточно 48 часов. Разумеется, при условии того, что человек занимается работой, а не просиживанием штанов.
Недавно мы проводили исследование: «На каких CMS сделаны топ 100 сайтов рунета по посещаемости?»: часть 1 и часть 2. В этом исследовании так же была небольшая аналитика полученных результатов. Сегодня мы хотим продолжить то исследование еще одним, на этот раз мы решили проанализировать на каких коробочных CMS сделаны крупнейшие интернет-магазины рунета.
Можно ли при сегодняшнем уровне развития вычислительной техники решить задачу генерации литературно осмысленного текста? Мне кажется возможно, по крайней мере на уровне алгоритмо-теоретического описания. А при чем тут Курочка ряба и Звездные войны?
Это наша 4-ая по счету работа. Делали мы ее примерно полгода. Это приличный срок, и за это время у нас накопилось достаточно материала, которым мы хотели бы поделиться.
Итак, с чего все начиналось?
Конечно, с идеи. Вообще, описывать процесс создания идеи довольно сложно, так что будем считать, что она появилась сама по себе. И, вдохновившись, мы начали работу.
Весь этап работы над мультфильмом официально можно разделить на несколько этапов:
Привет, жители и гости хабра.
Хочу поделиться с вами одним интересным инструментом. Наша команда разрабатывала его в ходе проекта, о котором я еще расскажу. Пиксельный человек на КДПВ — результат его работы.
Мы не поленились посидеть с калькулятором и подсчитали приблизительное количество возможных изображений. Получили число чуть более сорока миллионов. Поэтому каждый может подобрать что-то на свой вкус. Картинок хватит на всех!
Итак, встречайте, 8biticon.com. Бесплатный, открытый и простой в использовании генератор аватарок.
Под катом история, описание и немного технической информации.
Доброго времени суток, хабражители!
Мне очень нравятся барочные элементы. В очередной раз встретив подобный узор на одном из сайтов, представил, как бы он чудесно смотрелся в анимации, картинка бы ожила. Тем более с приходом html5 оживление должно стать гораздо проще в реализации. Но как по точкам нарисовать кривую? Тут как раз кстати вспомнилась кривая Безье!
На уроках векторной графики я люто ненавидел кривые Безье. Принцип ее работы казался магическим, непостижимым и, как бы не сказать грубее, нелогичным. Складывалось ощущение, что сама кривая не знает как извернуться, и как наглый котяра растягивалась как ей удобнее, а не как мне надо.
На самом деле, как всегда, надо было лишь уделить немного времени теории. Все оказалось просто и довольно интересно. В итоге получилась реализация кривых на яваскрипте с использованием canvas.
Кому интересно как строится эта извилистая бестия добро пожаловать под кат!
Сегодня World Wide Web Consortium (W3C) объявили о том, что спецификации HTML5 и Canvas2D наконец завершены. Это означает, что разработчики теперь имеют “стабильный фундамент для разработки”, отмечает W3C.
Тем не менее, для того чтобы HTML5 стал полноправным стандартом W3C, необходимо осуществить ещё несколько шагов, но это, по большей части, просто формальность. Консорциум предполагает, что процесс стандартизации будет завершен к середине 2014 года. Сегодня, однако, наиболее важно то, что функции HTML5 уже сейчас обеспечивают стабильные спецификации, на которые разработчики могут ориентироваться.
Перед нами стояла задача сверстать универсальную кнопку только на HTML и CSS, не имеющую фиксированного размера по ширине, которая в дефолтном состоянии отображает только иконку, а при наведении будет показываться текст внутри неё.
Недавно, для шлифовки морфологического словаря, способного (предположительно) генерировать все возможные формы слова из инфинитива — мне понадобился достаточно объемный частотный словарь русского языка. Частотный словарь — вещь очень простая, слова в нем упорядочены по частоте, с которой они встречаются в анализируемом тексте.
Сейчас работаю над новым PHP-скриптом, который будет бэкапить не только базу данных, но и все файлы сайта.
У JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
Привет, жители и гости хабра.
