Обновить
256K+

JavaScript *

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

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

Готовим многопоточность с core.async

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


Всё больше набирает популярность паттерн использования каналов при создании
многопоточных приложений. Идея не нова, ее дизайн заложен ещё в далёком 1978 году
в виде CSP.Наиболее известная реализация сейчас повсеместно используется в Golang.


Мы же в статье рассмотрим реализацию CSP в core.async для Clojure, если интересно, добро пожаловать под кат.


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

RailsClub 2016: интервью с Zach Briggs

Время на прочтение7 мин
Охват и читатели3K
Юхуу! Неделя до конференции RailsClub 2016. Все наши гости (включая Матца, да) совсем скоро прилетят в Москву. А мы готовим 600 пакетов раздатки, 600 ланчбоксов с обедами, несчетное количество чая и кофе, маффинов и пирожков, вовсю репетируем доклады со спикерами.

Еще можно успеть заскочить в последний вагон и поучаствовать в главном Ruby событии года в России.

Купить билет и зарезервировать себе местечко в зале можно на Railsclub.ru

image Сегодня мы хотим показать вам интервью с Zach Briggs, спикером предстоящей конференции.

Он из Чикаго, работает в TableXI, выступал с докладами и воркшопами на RailsConf, CodeMash, Barcelona Ruby Conf, KalamazooX и многих других конференциях.

Вот тезисы предстоящего доклада:

JavaScript for Rails Devs

JavaScript на фронтенеде сегодня — это болото баззвородов, плохих абстракций и неоправданно сложных инструментов. К счастью для нас, есть простые техники, которые мы можем использовать, чтобы не сгинуть в этой пучине и построить динамичный и современный интерфейс, который помогает людям решать проблемы.

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

Мы считаем, что это стоит знать! Под катом ответы Зака на наши вопросы о технологиях и жизни. Как обычно, публикуем ответы в оригинале и нашем вольном переводе.
Читать дальше →

Promises 101

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

Перевод первой части отличной статьи про промисы. Базовые приемы создания и управления промисами.


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


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

Антикейлоггер «для параноика» в Safari

Время на прочтение12 мин
Охват и читатели7.6K
Доброе время суток, мой дорогой параноик! Конечно же ты наслышан о всяческих скрытых утилитах, призванных наглым образом слямзить твои сокровенные данные (пароли, контактные данные, данные кредиток и т.п.) посредством считывания буфера обмена, а также нажатий клавиш на программно-аппаратном уровне, при их вводе в браузере. Одним из вариантов минимизации рисков является использование виртуальной клавиатуры.


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

Использование ES6 генераторов на примере koa.js

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

Автор: Александр Трищенко, Senior Front-end Developer, DataArt

Содержание:
• Итераторы. Генераторы.
• Использование генераторов (Redux, Koa)
• Зачем нам использовать koa.js
• Будущее. Async Await и koa.js 2.x

Генераторы — новая спецификация, новая возможность, которую мы можем использовать в ECMAScript 6. Статью я начну с рассказа об итераторах, без которых понять генераторы не получится, расскажу непосредственно про спецификацию и о том, что такое генераторы вообще, про их использование в реальных кейсах. Рассмотрим два примера: React + Redux как фронтненд-случай и koa.js в качестве бэкенда. Затем подробнее остановлюсь на koa.js, будущем JavaScript, на асинхронных функциях и koa.js 2.
Читать дальше →

Как мы всех на юх послали (ну или продолжение истории про шаблонизотор)

Время на прочтение8 мин
Охват и читатели13K
Вообще я очень любвеобильный человек, особенно в плане различных плюшек. Но что-то во мне переворачивается, как только это вот (еще секунду назад мне искренне симпатичное) обретает ореол святости и становится предметом преклонения. В этот самый момент мой внутренний голос (да я слышу голоса) строго так мне говорит – «пойдем-ка мы отсюда!».

И такая вот хрень довольно часто происходит в нашем непростом, безумном, но весьма веселом мире технологий. В моем конкретном случае – в мире веб-разработки.

Позавчера был JQ. Ну полезная ей богу вещица. Но стали появляться специалисты искренне считающие, что JQ – это часть JavaScript и что без оного привязка событий к узлам вовсе невозможна (шепот в зале: потомушта там какие-то проблемы с кроссбраузерностью, цссс). И стали возводиться церкви с храмами, и стал JQ с икон на нас грешных смотреть, и книги писались с названием «Программируем JQuery» (JQ «программируем», Карл!).
Читать дальше →

node-direct — один NodeJS сервер на несколько сайтов

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

tl;dr


С node-direct можно заливать серверные .js файлы и обращаться к ним так же, как к .php скриптам: example.com/foo.srv.js.


  1. Установка.


    npm install -g node-direct

  2. Конфигурация nginx.


    location ~ \.srv\.js$ {
            root <path_to_website_files>;
            proxy_pass http://localhost:<port>;
            proxy_set_header X-Requested-File-Path $document_root$uri;
    }

  3. Запуск.


    node-direct --port=<port>

  4. Скрипт foo.srv.js, где req и res созданы сервером express.


    module.exports = function(req, res) {
            const someModule = require('some-module');
            res.send('Hello world!');
    }


Введение


Когда NodeJS стал более-менее популярным, мне было нелегко осознать, что с ним всё не так просто, как с PHP. Используя последний, можно было создать .php файл, залить его на сервер, обратиться по адресу example.com/путь/имяфайла.php и радоваться. Такая простота развертывания скриптов служила одной из причин, почему "пых" стал таким популярным.


В свою очередь, NodeJS, независимо от сложности приложения, заставляет очень многие вещи делать руками.


  • Гоняй каждое приложение на собственном порту
  • Определи роуты самостоятельно
  • Настрой деплой
  • Убедись, что приложение работает и после перезагрузки сервера
  • Не забудь сделать так, чтоб при изменении файлов, NodeJS сервер перезагружался
Читать дальше →

Событие при изменении размеров блочного элемента — resize

Время на прочтение1 мин
Охват и читатели15K
Иногда нужно отслеживать поведение блочного элемента и при изменении его размеров запускать дополнительный код. Актуально при адаптивной вёрстке или подгрузке контента через AJAX, когда размеры блочного элемента заранее не известны. Например у меня адаптивная вёрстка, нужно чтобы при уменьшении ширины окна некоторые пункты основного горизонтального меню перемещались в дополнительное вертикальное меню, которое открывается при наведении мышкой. В моём случае учитываются border, padding, scrollbar и content блочного элемента, но вы можете изменить код исходя из ваших задач.
Читать дальше →

Видео докладов с митапа MoscowJS в Badoo

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


24-го сентября в Badoo прошел MoscowJS Meetup. Настало время выложить видео докладов.

Познавательного Вам просмотра!
Читать дальше →

Инструментарий для front-end разработки под Linux

Время на прочтение6 мин
Охват и читатели26K
Доброго времени суток, господа девелоперы! В этой статье я расскажу, как сделать разработку под Linux действительно комфортной и удобной, чтобы она приносила только боль удовольствие.

Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!

Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end'ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.

Краткое содержание


  1. Выбор браузера
  2. Установка расширений для Firefox
  3. Выбор текстового редактора
  4. Необходимые расширения для Sublime Text 3
  5. Дополнительные инструменты и оптимизация системы
Читать дальше →

Создаем игру для WebGL с помощью Unity 5 и JavaScript

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


Unity – это кроссплатформенный игровой движок, позволяющий создавать игры для ПК, консолей, мобильный устройств и веб-сайтов. Последняя версия движка (Unity 5) имеет возможность экспорта в WebGL, благодаря чему разработчики могут без труда публиковать свои игры в вебе. Как следует из названия, данный экспортер использует WebGL – JavaScript API для рендеринга интерактивной компьютерной 3D графики, а также asm.js – подмножество JavaScript, которое было разработано компанией Mozilla и преподносилось как «язык ассемблера для веба». Больше информации о Asm.js и WebGL для Unity и Unreal Engine доступно здесь.

В этом уроке я хочу показать, как настроить работу с Unity. А также продемонстрирую, как создать простую игру на Unity с помощью JavaScript и выполнить ее экспорт для веба.
Читать дальше →

Сериализация данных или диалектика общения: простая сериализация

Время на прочтение13 мин
Охват и читатели16K
image Доброго времени суток, уважаемые. В данной статье мы рассмотрим наиболее популярные форматы сериализации данных и проведем с ними небольшое тестирование. Это первая статья на тему сериализации данных и в ней мы рассмотрим простые сериализаторы, которые не требуют от разработчика больших изменений в коде для их интеграции.

Рано или поздно, но вы, как и наша компания, можете столкнуться с ситуацией, когда количество используемых в вашем продукте сервисов, резко возрастает, да и все они к тому же оказываются очень «говорливыми». Произошло ли это из-за перехода на «хайповую» нынче микросервисную архитектуру или вы просто получили пачку заказов на небольшие доработки и реализовали их кучкой сервисов — неважно. Важно то, что начиная с этого момента, ваш продукт обзавелся двумя новыми проблемами — что делать с увеличившимся количеством данных, гоняемых между отдельными сервисами, и как не допустить хаоса при разработке и поддержке такого количества сервисов. Немного поясню про вторую проблему: когда количество ваших сервисов вырастает до сотни или более, их уже не может разрабатывать и сопровождать одна команда разработчиков, следовательно, вы раздаете пачки сервисов разным командам. И тут главное, чтобы все эти команды использовали один формат для своих RPC, иначе вы столкнетесь с такими классическими проблемами, когда одна команда не может поддерживать сервисы другой или просто два сервиса не стыкуются между собой без обильного уплотнения места стыка костылями. Но об этом мы поговорим в отдельной статье, а сегодня мы обратим внимание на первую проблему возросших данных и подумаем, что мы можем с этим сделать. А делать нам в силу нашей православной лени ничего не хочется, а хочется добавить пару строчек в общий код и получить сразу профит. С этого мы и начнем в данной статье, а именно — рассмотрим сериализаторы, встраивание которых не требует больших изменений в нашем прекрасном RPC.
Читать дальше →

Понятие песочницы при разработке расширений для браузера Google Chrome

Время на прочтение5 мин
Охват и читатели8.5K
За 5 лет разработки расширений для браузера Google Chrome накопился некоторый опыт, которым хотелось бы поделиться в цикле статей и, по возможности, пояснить некоторые тонкости, подводные камни, а также описать как были удачно применены современные фронтенд-технологии.
Читать дальше →

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

Разбор задач первого этапа отбора в школу программистов HeadHunter 2016

Время на прочтение9 мин
Охват и читатели21K
В сентябре 2016 прошел очередной ежегодный отбор молодых специалистов, студентов и выпускников инженерных и математических специальностей в школу программистов HeadHunter.

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

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

Matreshka.js 2 — самый простой фреймворк во Вселенной

Время на прочтение8 мин
Охват и читатели18K
Matreshka.js заполняет образовавшуюся за последние годы пропасть между джуном и сеньором

Вышла beta второй версии фреймворка Matreshka.js. Релиз выйдет через неделю (плюс пара дней) после последнего патча, отчет начинается с выходом этого поста. Версию можно считать стабильной, а статус beta — чистой формальностю, так как проект достаточно долго и без серьезных изменений пребывал в статусе prealpha/alpha и проверялся в реальных проектах.



» Репозиторий
» Сайт


Позиционирование фреймворка


Вместо наивного "JavaScript фреймворк для всех", Matreshka.js теперь позиционируется, как "Простой фреймворк для джунов". Позвольте мне, вместо дублирования текста с сайта, разместить ссылку на текст, объясняющий этот момент более детально.


Общие изменения


  • Фреймворк был переписан с нуля, с использованием ECMAScript 2015 и некоторых элементов синтаксиса, еще не вошедших в финальную спецификацию.
  • Все примеры так же переписаны на новый JavaScript.
  • Устранены все потенциальные утечки памяти.
  • Добавлена возможность импортировать только необходимые функции и классы. В документации к каждому статичному методу и классу указан и адрес модуля.

const bindNode = require('matreshka/bindnode');
bindNode(object, key, node);

  • Все сопроводительные материалы так же обновились: статьи, роутер, и пр.
  • Документация собирается с помощью Webpack и самописного плагина, который очень быстро генерирует HTML файлы из JSDoc и GFM.

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

Легкий способ потерять клиентов или почему не следует использовать Google CDN

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

Если вы разрабатываете веб-приложения и ссылаетесь на популярные JavaScript-библиотеки и шрифты, эта статья будет вам определенно полезна.

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

ES6 const это не про иммутабельность

Время на прочтение2 мин
Охват и читатели12K
Определение const вводит в заблуждение, которое должно быть развеяно:

const создаёт иммутабельную ссылку на объект, но это не значит, что значение нельзя будет изменить — нет, это значение может быть изменено. Следующий код не будет являться ошибкой:

const foo = {};
foo.bar = 42;
console.log(foo.bar);
// → 42

const arr = [0, 20, 30];
arr[0] = 10;
console.log(arr);
// → [10, 20, 30]
Читать дальше →

Javascript-путешествие с шестью символами

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


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


Если добавить строку к чему-то, то он допустит, что мы хотим получить текст, поэтому сконвертирует все в строку.


Если мы добавляем префикс "плюс" или "минус", то он допустит, что нам нужно числовое представление и сконвертирует строку в число, если сможет.


Если мы отрицаем что-то, то он сконвертирует это в булево значение.


Мы можем использовать эти особенности языка и создать немного магии со всего-лишь шестью символами: [,],(,),! и +. Если вы читаете это на десктопе, то можете открыть консоль в вашем браузере (developer tools, например) и запускать код. Просто копируйте любой код из примеров ниже в консоль, и он должен исполнится и вернуть true.


Давайте начнем с простого. Вот главные правила:


  1. Префикс ! конвертирует в Boolean
  2. Префикс + конвертирует в Number
  3. Добавление [] конвертирует String

Вот они в действии:


![] === false
+[] === 0
[]+[] === ""
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №231 (3 — 9 октября 2016)

Время на прочтение5 мин
Охват и читатели19K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

DBGlass — Open-Source кросс-платформенный PostgreSQL GUI клиент

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

Всем привет! Только что выложили бету DBGlass PostgreSQL GUI клиент. Стандартные функции клиента — просмотр и редактирование данных.


К сожалению мы не являемся специалистами в области баз данных и PostgreSQL, явно упустили важный функционал или особенности работы базы. Будем рады фидбэку или пулл реквестам.


Для тех, кто не знаком с интерфейсом гитхаба, скачать бинарники можно тут.