JavaScript *

В прошлом посте было о том, как я писал игру для конкурса js13kGames, цель которого — уместить свою поделку на стеке открытых web-технологий в 13 килобайт.

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

Демо, где можно позапускать ракеты и заценить пару примеров кода

Во время своего доклада на второй день конференции Build 2014 евангелисты Microsoft Стивен Гуггенхаймер и Джон Шевчук рассказали о реализации поддержки Babylon.js для Oculus Rift. Одним из ключевых пунктов их демонстрации было упоминание разработанной нами технологии имитации линз:


Я также присутствовал на докладе Фрэнка Оливье и Бена Констебля на тему использования графики в IE с применением Babylon.js.

Эти доклады напомнили мне об одном вопросе, который мне часто задают в отношении Babylon.js: «Что вы подразумеваете под шейдерами?» Я решил посвятить этому вопросу целую статью с целью объяснить принцип работы шейдеров и привести несколько примеров их основных типов.

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

Сергей Аверин ( XEK )

Изначально я хотел сделать доклад про сравнение фреймворков, но потом подумал, что закидают помидорами, поэтому доклад — просто адский троллинг, как водится у меня. И он, скорее, не про HighLoad, а про менеджерскую задачу, которая стоит над всем этим делом, включая фронтенд.

Про что же, все-таки, получился доклад? Доклад про то, как выбирали новый фреймворк, почему выбирали, и какие задачи решали.

Всем привет! Эта статья будет полезна тем, кто устал использовать constants в Redux (частично показано на превью выше). Под катом я покажу очередной возможный велосипед и как на нем кататься.

Приветствую друзья! Меня зовут Антон, я развиваю сайт ux.pub посвященный графическому редактору Sketch. Очень часто мне на почту приходят вопросы о тонкостях разработки плагинов для Sketch. Я не разработчик и не специалист в создании плагинов, поэтому я решил сделать перевод самого подробного руководства по созданию плагинов от Mike Mariano.

Часть 1  — С чего начать?

Вы хотите начать писать Sketch-плагины и не знаете, с чего начать? Продолжайте читать, так как этот пост как раз для вас!

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

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

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

Как и раньше, библиотека OpenSource и распространяется по лицензии MIT, так что берите, используйте и, вообще, далайте что хотите без каких-либо ограничений.

» Перевод статьи Detecting PhantomJS Based Visitors | Неплохое обсуждение статьи на Hacker News

Статья старая, помидорами не кидайтесь — лучше делитесь опытом в комментариях.

В наши дни во многих инцидентах по безопасности используется автоматизация (со стороны злоумышленников). Web-scraping, повторное использование паролей, click-fraud — все это совершается злоумышленниками в попытках (зачастую успешных) замаскироваться под обычного пользователя, то есть по сути выглядеть для сервера как броузер обычного пользователя. Как владелец сайта, вы наверно хотите быть уверены в том что обслуживаете людей а не бездушные железки, а как поставщик сервиса вы наверно хотите еще и доступ дать к своему контенту через api, а не через тяжелый и глючный web-интерфейс.

Борис Каплуновский (BSKaplou)

Я довольно долго работал над докладом и старался сделать его настолько противоречивым, насколько это возможно. И сразу начну с противоречия – я в корне не согласен с тем, что веб-компонентами можно пользоваться. Уже поднимался вопрос о 300 Кбайтах, я глубоко уверен, что 300 Кбайт для страницы Javascripta – недопустимо много.

Сегодня я расскажу о довольно глубоком путешествии во фронтенд. Началось это путешествие тогда, когда я обнаружил, что фронтенд aviasales.ru тормозит, и надо что-то делать. Это путешествие началось года полтора-два назад, и вещи, о которых я буду рассказывать, – это сжатое повествование того, что я узнал.

Самым критичным, на мой взгляд, в производительности фронтенд-приложений является рендеринг. Все мы знаем, что работа с DOM – это такая вещь, которую нужно стараться избегать. Чем больше вы делаете вызовов к DOM API, тем медленнее работает ваше приложение.

Вы задумывались над тем, что если в конструкторе и методах использовать не this, а переменную, то после минификации экономия байтов начнётся уже с четвёртого this?

// просто сравните длину строк
this.this.this.this.
var s=this;s.s.s.s.

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

Игра почти готова, осталось всего-то пару дней не спать...

James Kyle как-то раз взял и написал пост про структуры данных, добавив их реализацию на JavaScript. А я взял и перевёл.

Дисклеймер: в посте много ascii-графики. Не стоит его читать с мобильного устройства — вас разочарует форматирование текста.

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

Все начал с того что я решил написать изоморфный CMS для одного из моих проектов с использованием следующих технологий:

• React — для постройки UI
• Express — в качестве сервера
• MongoDb + Mongoose — noSQL база данных
• graphQL — основной API для взаимодействия с базой данных
• Apollo-Client — коннектор для удобного вызова запросов и мутаций через graphQL
• webpack — для сборки проекта и разделения клиентского и серверного кода

Упрощенная архитектура выглядит следующим образом:

__root
1 |__client
2 |__public
3 |__middleware
4 |__server

1. React-компоненты
2. Бандл клиентского кода и остальные публичные файлы
3. Mongoose: схемы, дополнительные методы и graphQL: типы, класс с запросами, класс с мутациями, схема
4. Бандл серверного кода вместе с express сервером

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

Добрый день, дорогие Хабравчане! Сегодня решил рассказать вам о нашем опыте создания бота для Telegram на Node.js практически без опыта серверной разработки и на добровольных началах. Сразу оговорюсь: у меня за спиной чуть больше четырех лет разработки под iOS, у остальных членов команды тоже был опыт разработки от одного до шести лет в смежных областях. Для большинства из нас это был первый случай использования Node.js в сравнительно большом проекте. Как мы это сделали, зачем мы это сделали, почему фриланс-биржа и как она отличается от классических моделей, какие у нас были проблемы и как мы с ними боролись – под катом!

I. Предыстория

Я много лет использую UltraEdit как редактор на самые разные случаи жизни. Одна из основных причин — быстрая работа с гигабайтными файлами без загрузки их в память. Для программирования на JavaScript он тоже достаточно удобен, вот только с одним существенным недостатком: автодополнение в нём основывается на достаточно бедном, жёстко заданном списке ключевых слов и глобальных переменных, вдобавок отстающем от развития языка. Как-то я задался вопросом, можно ли пополнить этот список полным перечнем всех готовых свойств и методов, какие только можно ввести в контексте Node.js и Web API (браузера). Где бы такой список можно раздобыть? Мне приходили в голову такие варианты:

1. Готовый перечень, кем-то составляемый и обновляемый для всеобщего пользования, вроде библиотеки globals, но полнее.

   
   

2. Парсинг документации (спецификация ECMAScript, сайты MDN и Node.js и т.п.), вручную или программно.

   
   
3. Получение списка метапрограммированием.

Привет Хабр! В данной статье я хочу рассказать о том, как реализовать авторизацию с помощью социальных сетей в одностраничном приложении на примере Backbonejs + Express.

В начале этого года мы в HeadHunter начали проект, нацеленный на автоматизацию различных HR-процессов у компаний-клиентов. Архитектурой этого проекта на фронте выбрали React-Redux стек.

За 9 месяцев он вырос из небольшого приложения для тестирования сотрудников в многомодульный проект, который сегодня называется “Оценка талантов”. По мере его роста мы сталкивались с вопросами:

• хранения стейта, его нормализации;
• построения масштабируемой архитектуры проекта, удобной иерархии — как в структуре, так и в бизнес-логике.

Это проявлялось в изменении подхода к построению компонентов, архитектуры редьюсеров.

Давайте поговорим о том, как мы развивали проект и какие решения принимали. Некоторые из них могут оказаться “холиварными”, а другие, напротив, “классикой” в построении большого проекта на redux. Надеюсь, что описанные ниже практики помогут вам при построении react-redux приложений, а живые примеры помогут разобраться, как работает тот или иной подход.

Про библиотеку Ontodia

Для начала имеет смысл остановиться на том, что же такое Ontodia и что такое СУБД Caché. Пожалуй, начнем с пока что менее известного продукта — Ontodia. Ontodia — это результат совместного проекта международной лаборатории ISST Университета ИТМО и компании VISmart, занимающейся разработкой программного обеспечения в области семантического веба (semantic web). Сервис Ontodia изначально был веб приложением, предназначенным для визуализации исключительно связанных данных (linked data) и онтологий. Мы создали этот сервис, потому что не сумели найти простых, доступных и эффективных инструментов понятной визуализации связанных данных семантического веба.

В данном материале речь пойдет о широко известной CRM-системе c открытым исходным кодом – SuiteCRM. Открытость системы дает безграничные возможности для кастомизации, и, как пример, будет рассмотрен процесс создания динамически подгружаемых справочников из БД с использованием jQuery библиотеки select2.

Select2 может работать как со статическими наборами вариантов выбора, так и получать данные от внешних источников, имеет широко настраиваемые форматы отображения с использованием картинок и т.д. Формат данных представлен в виде JSON, поэтому наша задача разработать такой EntryPoint, чтобы на выходе получилась нужная структура JSON.

В основе SuiteCRM заложена модель MVC, и все действия предполагают обращение к action контроллера. Бывает, что необходимо отступить от стандартного подхода MVC, так как использование обычного MVC-подхода может быть затруднено или просто не нужно.