На днях Google анонсировал выход новой платформы, позволяющей разработчикам создавать приложения, работающие внутри Google Docs и расширяющие базовый функционал Google Docs редактора.
Разберемся что это, как это работает и напишем небольшое приложение которое позволит нам переводить текст документа не выходя из Google Docs.
Читать полностью »
Рубрика «javascript» - 454
Google Docs Add-on. Расширяем возможности редактора Google Docs
2014-03-14 в 9:43, admin, рубрики: Google, google apps script, javascript, Веб-разработка, метки: Google, google apps script, javascriptJavascript: фрактал отсоса
2014-03-13 в 21:01, admin, рубрики: javascript, nodejs, веб-дизайн, Веб-разработка, Программирование, метки: javascript, nodejsКогда-то давно мне попалась статья про недостатки PHP. И мне показалось, что Javascript в чем-то похож на PHP, и даже в большей мере достоин называться фракталом плохого дизайна. Ведь все беды PHP изначально произрастали из его узкой предметной направленности. Javascript же, не обладая столь обширной стандартной библиотекой, несмотря на долгую привязанность к работе исключительно в браузере, все же больше походил ан язык общего назначения. В нем просто не было такой повальной ориентированности на работу с текстом как в PHP. И эта породило минимализм в дизайне языка. И этот минимализм породил проблемы.
Когда я пытался решить проблемы минимализма при помощи библиотек, это порождало новые проблемы — с библиотеками. Когда я пытался решить проблемы с библиотеками, это порождало проблемы с программистами. Когда я выслушивал достаточно о своей тупости от программистов, я принимался глубже изучать язык. И новые проблемы открывались передо мной. В итоге, с ростом опыта, я пришел к необходимости использовать те инструменты, которые дает экосистема Javascript. И они тоже создавали новые проблемы, решая старые. И все это напоминает даже не фрактал, а какой-то уродливый лабиринт плохого дизайна, из которого нельзя выбраться.
За годы программирования я столкнулся со многими языками, и у всех у них есть проблемы. Но все эти языки объединяет то, что можно навскидку перечислить их основные проблемы. В случае Javascript все по-другому — я не могу перечислить все то, что не так с этим языком. Я просто не знаю, с чего начать, мне кажется, что я что-то упущу, недоскажу, не смогу объять необъятное. Но я хотя бы попробую, хотя бы ради спокойствия тех, кто чувствуют то же самое.
Читать полностью »
Скачивать музыку и видео с ВК средствами браузера Chrome, используя свое расширение
2014-03-13 в 10:28, admin, рубрики: chrome extensions, Google Chrome, javascript, Вконтакте, метки: chrome extensions, Google Chrome, javascript, ВконтактеДобрый день, уважаемые читатели. Сегодня хочу поделиться с Вами кодами на Javascript для возможности перекачивания музыки и видео с ВК своими ручками на свой персональный компьютер. Ведь нетрудно себе представить, как записал клевый клип и музыку, потом закачал их туда, но на твоем компьютере все это добро куда то пропало… Что ж, не беда! Мы выкачаем то, что мы закачали туда обратно. Главное, что нам это наш браузер, да сайт позволяют, осталось пораскинуть мозгами.
Для начала нам надо распарсить аудиофайлы… Итак, возьмемся за класс «area clear_fix» и будем пихать в массив то, что принадлежит к классу «play_new». Сначала присвоим в массиве стили, чтобы отловить положение элементов на странице (в последующем для отображения кнопочек рядышком). Потом получим ссылки из input и имя будущего файла из тега b. Потом нужно будет присваивать новым ссылочкам, которые мы будем создавать атрибут download.
function audio(){
var main_div=document.getElementsByClassName("area clear_fix");
for(var i=0;i<main_div.length;i++){
if(main_div[i].parentNode.firstChild.href){
main_div[i].parentNode.firstChild.style.top=main_div[i].getElementsByClassName('play_new')[0].offsetTop+"px";
continue;
}
var _mp3_=main_div[i].getElementsByTagName("input")[0].value.split(",")[0];
var _b_=main_div[i].getElementsByTagName("b")[0];
var _top_=document.getElementById(main_div[0].parentNode.id.replace('audio','play')).offsetTop+"px";
var _t_=main_div[i].getElementsByClassName('play_new')[0].offsetTop+"px";
var span=main_div[i].getElementsByTagName('span')[0];
var ispan=span.innerHTML;
if(span.children[0]){
var ispan=span.children[0].innerHTML;
}
var _a_=document.createElement("a");
//_a_.href=""+_mp3_+"&name="+_b_.children[0].innerHTML+"-"+ispan;
_a_.href = _mp3_.substring(0, _mp3_.indexOf('.mp3') + 4);
_a_.download=trim(_b_.children[0].innerHTML+"-"+ispan)+".mp3";
_a_.title='Скачать '+_b_.children[0].innerHTML+"-"+ispan;
_a_.draggable="true";
_a_.innerHTML='<span style="cursor:copy;padding:6px;width:16px;height:16px;background-color:#5F7D9D;color:#fff;border-radius:2px;"><img src="http://st0.vk.me/images/icons/darr.gif" /></span>';
_a_.style.zIndex="10";
_a_.style.left="30px";
_a_.style.top=_t_;
_a_.style.position="absolute";
main_div[i].parentNode.insertBefore(_a_,main_div[i].parentNode.firstChild);
_b_.style.paddingLeft="27px";
}
}
Тут как бы понятно должно быть, все… ну а чтобы отрезать всякий мусор после расширения файла мы применили:
_a_.href = _mp3_.substring(0, _mp3_.indexOf('.mp3') + 4);
В общем уже можно это запустить таким образом через интервал, конечно же если мы находимся на том самом сайте:
setInterval(function(){
if(window.location.href.indexOf('vk.com')>1) {
if(document.getElementsByClassName("area clear_fix").length!=0){
audio();
} } },1000);
Хорошо. Одна функция готова. Пора поведать и о том как скачать видеофайлы…
AngularJS и ReactJS или как сделать ваше приложение быстрее
2014-03-12 в 22:47, admin, рубрики: AngularJS, javascript, React, метки: AngularJS, javascript, ReactСовременный мир программирования, а особенно веб и javascript уже давно не тот и имеет очень большое колличество инструментов для той или иной задачи. В сегодняшнем посте я хотел бы рассказать как скрестить мощь AngularJS и молниеносность отображения view – Facebook React.
Всем известно, что когда мы генерируем коллекцию во view через Angular, то каждый элемент этой коллекции становится observable. Я конечно понимаю и знаю что есть определенный набор библиотек и решений как это обойти, но сегодня речь не об этом. Что же дает нам React? Ну одно из его преимуществ, это jsx синтаксис, который есть не что иным как html в javascript. Также есть возможность создавать reusable компоненты, наследовать их и использовать всю мощь что позволяет делать эта библиотека. Что же приступим.
Читать полностью »
Планируете писать приложение на AngularJS? Пишите через ASS
2014-03-12 в 9:21, admin, рубрики: AngularJS, best practices, javascript, архитектура, Веб-разработка, метки: AngularJS, best practices, архитектура
Самые непристойные и отвратительные наши поступки, выходящие за всякие нормы морали и принципов, обычно начианаются со слов «А почему бы и нет?».
В данном посте я затрону вопросы проектирования приложения на AngularJS, философии, его архитектуры, сборки, пройдусь по разным полезным библиотекам и готовым архитектурным шаблонам. В довершение устрою небольшую Angular+Require.js+Grunt+Yeoman оргию, которую я назвал Angular-Super-Seed или чуть более скромно ASS-генератор.
Так что, если вы планируете писать приложение на Angular, то почему бы и нет?
Мотивация
- «Поступай с людьми так, как хотел бы, чтобы поступили с тобой». Вдруг кому-то пригодится
- Узнать что-нибудь новенькое как о себе, так и о разработке в комментариях.
- Попиарить свой генератор приложения ASS.
Завершен перевод книги Эдди Османи «Паттерны для масштабируемых JavaScript-приложений»
2014-03-12 в 8:57, admin, рубрики: javascript, Анализ и проектирование систем, архитектура, книга, книга на русском, проектирование, Проектирование и рефакторинг, метки: javascript, архитектура, книга, книга на русском, проектирование
Ура! Мы закончили работу над переводом замечательной книги об архитектуре JavaScript-приложения. Работать над переводом было очень приятно — мы получили около 40 пулл-реквестов от совершенно незнакомых нам людей, которые помогли исправить множество опечаток, неточностей и различных багов на сайте! Ссылка на наш перевод упоминалась в курсе «Фронтенд-разработка», читаемом во втором семестре Технопарка Mail.ru, а также в некоторых независимых подкастах.
Оптимизируем Gruntfile
2014-03-11 в 20:14, admin, рубрики: grunt, javascript, node.js, Веб-разработкаВведение
Если Grunt — новое для вас слово, то вы можете сначала ознакомиться со статьей Криса Койерса «Grunt для людей, кто думает, что такие вещи как Grunt уродливы и тяжелы». После введения от Криса, у вас будет свой собственный Grunt проект и вы уже попробуете на вкус все возможности, которые Grunt нам предоставляет.
В этой статье мы сосредоточимся не на том, какие многочисленные плагины для Grunt стоит добавить к вашему проекту, а на процессе создания самой сборки. Вы получите практические навыки по следующим аспектам работы с Grunt:
- Как сохранить ваш Gruntfile аккуратным и опрятным
- Как сильно улучшить время вашей сборки
- Как быть постоянно в курсе состояния сборки
Псевдобот для «турболайкера» на базе imacros
2014-03-11 в 16:37, admin, рубрики: javascript, Социальные сети и сообщества, метки: автоматизация, соц.сетиalert («Hallow_HabraWorld»)Эта статья не про очередного бота для очередной лайковой биржи. Это, скорее, история о том как я, не имея ни малейшего понятия о скриптах и языках программирования, Начал осваивать это не вспаханное поле. А что из этого вышло узнаете под катом.Читать полностью »
Разделяй и властвуй или как сделать ваше приложение структурированным
2014-03-10 в 20:07, admin, рубрики: AngularJS, javascript, метки: AngularJS, javascript Как говорится в древней пословице – сколько людей столько и стилей написания кода. В сегодняшней статье я хотел бы расскрыть все особенности правильной настройки структуры AngularJS.
Как в любом приложении у нас должна быть точка входа, начальная точка откуда будет стартовать наше приложение. За частую я использую просто app. В этом файле, который не плохо было бы назвать main.js мы напишем такой код:
Читать полностью »
