Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

270,37
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Простой разбор URL с помощью изоморфного Javascript

Время на прочтение4 мин
Охват и читатели66K
Во многих веб-приложениях требуется разбор URL, такой как извлечение доменного имени, имплиментация REST API или поиск пути к файлам изображений. Типичная структура URL показана на рисунке ниже:


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

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №150 (2 — 8 марта 2015)

Время на прочтение7 мин
Охват и читатели38K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.


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

Как я делал свое первое расшырение на Chrome

Время на прочтение3 мин
Охват и читатели762
Добрый день.
Сегодня я расскажу как я делал расшырение на Chrome.
Суть расшырения:
Вертикальная панель слева на каждом сайте чтоб прокрутиться вверх, как в вк, при повторном клике снова вниз.
Интересно? Читай дальше!

Супер-куки на основе HSTS отследят вас даже в приватном режиме

Время на прочтение2 мин
Охват и читатели32K
Уже несколько лет все браузеры предлагают настройки для приватного браузинга. В приватном режиме они могут не сохранять куки, историю страниц и временные файлы. Люди, ценящие приватность, полагаются на эту возможность. Но недавно был предложен ещё один способ отследить пользователя даже и в этом случае, если тот не предпримет особых мер.

Ирония в том, что работе этой системы отслеживания способствует механизм под названием HTTP Strict Transport Security. Он нужен для того, чтобы сайты могли убедиться, что пользователь работает с их серверами только по протоколу HTTPS. Если сервер добавляет в заголовки соответствующий флаг, то по правилам HSTS все соединения с сервером должны быть зашифрованы. Таким образом пользователя защищают от различных возможных атак.
Читать дальше →

Большая подборка ссылок о галереях и всем, что с ними связанно

Время на прочтение3 мин
Охват и читатели26K
Дадли Стори, автор «Pro CSS3 Animation», представил подборку своих статей с сайта demosthenes.info о галереях на сайтах и всем, что с ними связано. Решения используют HTML, CSS и PHP в различных комбинациях, текст статей на английском языке. В начале каждой статьи представлена демонстрация эффекта, о котором говорит автор.
Читать дальше →

Некоторые тонкости работы с Github и NPM — со вкусом ES6

Время на прочтение10 мин
Охват и читатели21K
Здравствуйте, меня зовут Александр, и я пишу велосипеды по выходным программист.



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

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

Текстовый чат для сайта

Время на прочтение3 мин
Охват и читатели26K
image

Хочу поделиться опытом создания текстового чата на основе nginx-push-stream-module модуля Nginx, PHP и Javascript. Этот модуль функционирует по принципу long polling и может быть использован как для обмена мгновенными сообщениями между пользователями, так и для системы push–уведомлений.
Читать дальше →

Angular 2: Построенный на TypeScript

Время на прочтение2 мин
Охват и читатели51K
Мы рады представить результат долгомесячного партнерства с командой Angular.

Это партнерство было очень продуктивным и одарило нас полезным опытом, а так же в рамках этого сотрудничества, мы рады объявить что Angular 2 с сего момента будет построен на TypeScript. Мы с нетерпением ожидаем того что-бы увидеть, что будут способны делать люди с этими новыми инструментами и продолжать работу с командой Angular для того что бы улучшить аспекты использования продукта, разработчиками Angular.
Подробности

SummaryJS, выпуск 4

Время на прочтение3 мин
Охват и читатели7.9K
Приветствую вас, любители и профессионалы JavaScript.

В прошлом выпуске проводилось 2 опроса. В первом было решено, что новый выпуск большинству удобнее получать в пятницу. Сделано. Второй вопрос был про открытие ссылок в новом табе. К сожалению, я тогда не знал, что на Хабре они запрещены. Но надеюсь, что вам в данном случае поможет Cmd + клик на Маке или Ctrl + клик на остальных системах.

В этом выпуске было какое-то гигантское количество инструментов. Наслаждайтесь.

Видео и подкасты


Glen Maddern: A GIF odyssey
Using React to record JSON videos
JS Jabber #149: Passenger Enterprise with Node.js
FiveJS #65
Читать дальше →

Web-технологии глазами С++ программиста

Время на прочтение5 мин
Охват и читатели57K
Год назад знакомые попросили сделать меня сайт с динамическим контентом. Тогда о Web я знал чуть больше чем ничего, но попробовать было интересно.

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

Надеюсь будет интересно Web разработчикам посмотреть на потуги С++ника, ну а С++ разработчикам узнать для себя что-то новое.

Что там у тебя...

Приручаем JavaScript или очередной велосипед для frontend-приложений

Время на прочтение3 мин
Охват и читатели9.4K
На «Хабре» всё чаще и чаще появляются статьи про разработку фронтенда на JavaScript. Рассматриваются тяжёлые библиотеки от Google и Facebook, не прекращаются холивары на тему какой фреймворк лучше использовать. Но не задумывались ли вы, что все эти фреймворки невозможны или абсолютно нелепы на других языках программирования? По моему субъективному мнению, это всё от того, что во главе угла DOM модель — HTML-тег, а не компонент. Но вернёмся к JavaScript.
Читать дальше →

Разработка javascript приложений на базе Rx.js и React.js (RxReact)

Время на прочтение10 мин
Охват и читатели40K
rxreactlogo

React.js позволяет очень эффективно и быстро работать с DOM-ом, активно развивается и с каждым днем набирает все больше популярности. Недавно открыл для себя концепцию реактивного программирования, в частности, не менее популярную библиотеку Rx.js. Данная библиотека выводит на новый уровень работу с событиями и асинхронным кодом, которого в UI логике javascript приложений предостаточно. Пришла идея объединить мощь данных библиотек в одно целое и посмотреть что из этого выйдет. В этой статье вы узнаете о том как удалось подружить Rx.js и React.js.
Читать дальше →

Ресайз картинок в браузере. Все очень плохо

Время на прочтение10 мин
Охват и читатели105K
Если вы когда-нибудь сталкивались с задачей ресайза картинок в браузере, то вы наверное знаете, что это очень просто. В любом современном браузере есть такой элемент, как холст (<canvas>). На него можно нанести изображение нужных размеров. Пять строчек кода и картинка готова:

function resize(img, w, h) {
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  canvas.getContext('2d').drawImage(img, 0, 0, w, h);
  return canvas;
}

Из холста картинку можно сохранить в JPEG и, например, отправить на сервер. Можно было на этом закончить статью, но сперва давайте взглянем на результат. Если вы поставите рядом такой холст и обычный элемент <img>, в который загружена та же картинка (исходник, 4 Мб), то вы увидите разницу.

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

Ближайшие события

RSConf: Обзор и видеоматериалы фронтенд-конференции в Минске

Время на прочтение9 мин
Охват и читатели9.7K
image

The Rolling Scopes — минское сообщество фронтенд/javascript разработчиков. Мы занимаемся проведением митапов, воркшопов и Q&A сессий. А в этом году доросли до уровня, не побоюсь сказать этого слова, международной конференции. Наше 20-е мероприятие получилось помасштабнее остальных. В связи с этим непременно хочется поделиться деталями проведения, атмосферой и, конечно же, материалами.
Читать дальше →

DuoCode: транслируем C# в JavaScript

Время на прочтение10 мин
Охват и читатели26K
Есть такой язык программирования, который называется C#. И есть очень много разработчиков, которым он очень нравится. А ещё есть такой язык программирования, который называется JavaScript. Как-то так сложилось, что он нравится далеко не всем C#-разработчикам. А теперь представьте ситуацию: есть заядлый C#-разработчик. Он очень любит C#, все-все проекты на нём пишет. Но судьба распорядилась так, что ему понадобилось написать клиентское веб-приложение. Знаете, такое, чтобы пользователю не нужно было себе ничего скачивать и устанавливать, чтобы он мог просто открыть любой браузер в любой операционной системе на любом устройстве — а приложение уже там. И вот тут у нашего лирического героя возникла проблема: вроде бы JavaScript идеально подходит для этой задачи, но вот писать на нём отчего-то не очень хочется. К счастью, в современном мире существует много языков, которые транслируются в JavaScript (всякие TypeScript, CoffeScript и тысячи других). Но наш разработчик оказался очень упрямым: он упорно не хочет изменять своему любимому C# с «вражескими» технологиями.

К счастью для него, счастливое будущее уже практически наступило. Есть такой проект, который называется DuoCode. Он умеет транслировать C#-код в JavaScript. Пока он в состоянии beta, но у него уже весьма неплохо получается: поддерживаются нововведения C# 6.0, Generic-типы, Reflection, структуры и LINQ, а отлаживать итоговый JavaScript можно на исходном C#. Давайте посмотрим внимательнее, что же представляет из себя продукт.

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

Использование npm для глобальной установки приложений, наделённых GUI и основанных на nw.js

Время на прочтение4 мин
Охват и читатели20K
Команда «npm install» в менеджере пакетов npm чаще всего употребляется для локальной установки зависимостей некоторого модуля, совершаемой в его подкаталоге «/node_modules».

Однако возможен и запуск этой команды с ключом «-g» (от слóва «global»). Он обеспечивает установку указанного ей пакета в некоторое глобальное (то есть общее для всей системы) место. Кроме того, в PATH (для последующего запуска из любого желаемого каталога) оказывается прописанною та команда, которая была указана в свойстве «"bin"» в файле package.json у установленного пакета.

Таким общим местом, согласно документации, под Windows служит подкаталог «/node_modules» в каталоге установки Node. В остальных же системах таким общим местом чаще всего оказывается каталог «/usr/local/lib/node_modules» (тогда как Node там устанавливается в каталог «/usr/local/bin»).

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

  • Команда «npm install jshint -g» обеспечивает появление в PATH команды «jshint», служащей для запуска JSHint.
     
  • Команда «npm install browserify -g» обеспечивает появление в PATH команды «browserify», служащей для запуска Browserify.
     
  • Команда «npm install less -g» обеспечивает появление в PATH команды «lessc», служащей для запуска Less.js.

Однако на CLI (на командной строке) свет клином не сошёлся — и читателям Хабрахабра должно уж вполне быть известно, что приложение на языке JavaScript, употребляющее API Node.js, можно снабдить и GUI (графическим интерфейсом пользователя), сочинённым на языках HTML и CSS. Для этого придётся и запускать такое приложение вместо Node на том движке, который до прошлого года назывался node-webkit, а в нынешнем (2015) году оказался 14 января переименованным в nw.js.

Ваши GUI-приложения также могут глобально быть установлены в системе из npm-пакета при помощи npm. Давайте поговорим об этом.

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

Telephone Directory

Время на прочтение5 мин
Охват и читатели62K

Телефонный справочник для Active Directory




Для тех, кто статью читать не захочет, сразу репозиторий на github.

А остальных под катом ждёт бессвязная и бессмысленная история о том, как я дошёл до жизни такой, при помощи node-webkit, написал приложение, которого джва года ждал.
итак...

Как JavaScript Grid работает с протоколом OData

Время на прочтение4 мин
Охват и читатели8.6K
В прошлой статье мы упоминали, что:
В настоящее время существует большое количество библиотек, поддерживающих протокол OData, и каждый день появляются новые. В частности, с OData работают такие JavaScript библиотеки, как Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo, JayData, Breeze.js, datajs, ODataJS, angular-odata, и т.д.

Многие из этих библиотек существенно упрощают разработку сложных приложений благодаря стандарту OData. Например, достаточно грид контролу указать URL к серверу OData и все остальное он сделает сам: пэйджинг, сортировку, добавление- модификацию-удаление записей, фильтрацию данных, группировку и т.д.

Мы подготовили примеры того, как гриды работают с OData.

Основные запросы грида к серверу:
  • Получить общее количество записей, удовлетворяющих некоторому условию.
  • Получить выборку из общего набора записей для показа на одной странице.
  • Получить весь набор записей.
  • Отсортировать записи по одному или нескольким полям.
  • Отфильтровать записи по некоторому набору условий.
  • Добавить новую запись.
  • Модифицировать запись.
  • Удалить запись.
  • Batch update – добавление, изменение и удаление группы записей.

Рассмотрим детальнее основные запросы на примере
Читать дальше →

Используем время простоя веб-приложения для фоновых задач

Время на прочтение4 мин
Охват и читатели14K
Я люблю, когда мои приложения бегут со скоростью 60 fps, даже на мобильных устройствах. А еще я люблю сохранять состояние моего приложения, например, открытые окошки или введенный текст в localstorage и метаданных пользователя (если он зарегистрирован), чтобы, закрыв его, работу с ним можно было бы продолжить позже с того же места, в том числе и на другом устройстве.

Это все прекрасно, вот только сегодня я столкнулся с одной проблемой. Дело в том, что есть у меня одно боковое меню, offcanvas, и его состояние (открыто/закрыто) я тоже бы хотел сохранить в браузере и учетной записи пользователя. Вот только запись в localstorage и AJAX реквест на обновление в БД асинхронны и они все время норовят запускаться прямо во время сложной анимации, крадя у меня пару-другую фреймов, что особенно заметно на мобильных устройствах. Очевидно, мне бы хотелось, чтобы данные сохранялись после того, как анимация завершится, а не в критичный момент моего приложения, но как?
Читать дальше →

Ещё один пост о сборке front-end проекта

Время на прочтение15 мин
Охват и читатели87K
Js app starter

Я потратил прилично времени на структуризацию и автоматизацию сборки фронта. Задача это интересная и стоит того, чтобы о ней рассказать.

Что умеет делать сборщик:
  • Собирать front-end проект для development & production окружений.
  • Собирать по несколько js/css бандлов на проект.
  • Использовать стиль CommonJS модулей в браузере.
  • Использовать ES6-синтаксис.
  • Спрайты, картинки и многое другое.

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