JavaScript *

Привет, Хабр!

Сегодня небольшим, но полезным туториалом с нами поделится Дмитрий Кабаков, Senior фронтенд-разработчик DataArt.

В современном «гугломире» все большую важность набирает социальная составляющая сайта. Но обычные социальные виджеты/коды не всегда почти никогда не вписываются в оформление сайта.

Что же делать? Нужно оформлять!

Для туториала вам понадобится:

• jQuery-плагин sharrre;
• иконки FontAwesome;
• знания HTML/CSS3;
• минут 10 вашего времени

Перевод статьи «Stop Using React for EVERYTHING!», опубликованной на сайте medium.com.

Итак, вы освоили React. А еще добавили интеграцию с ES6. Окей, вы хороши в разбиении вашего кода на компоненты. К тому же вы… стоп. Нам пофиг.

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

ReactJS — это Чариза́рд (покемон такой). Это огнедышащий дракон в мире джаваскрипта. Он мощный, он быстрый, он ослепительный, и умные программисты тащятся от него.

В статье рассмотрим как написать на ES6 составляющие части AngularJs приложения, затем собрать с помощью Browserify и Babel на основе небольшого приложения, которое вы можете скачать с github и поиграться.

Года два­-три назад я случайно узнал о интересном лаунчере для android ­ chameleon launcher. Купил и какое­-то время даже успешно использовал, пока создатель не потерял к нему интерес.

Привлекло меня в этом лаунчере то, что он позволял превратить домашний экран планшета в информационное табло — тут и rss­ленты, и twitter, и погода и т. д. Всё смотрится красиво и удобно, а место на экране не расходуется зря (а его на экране всегда мало). Кроме того, он позволял писать свои собственные виджеты на js.

Но создатель потерял интерес к своему творению (в своё время он собирал на него деньги через kickstarter) и сначала виджеты перестали работать (они используют сервер для работы), появились баги, которые не фиксились. В итоге недавно приложение и вовсе было удалено из Play Market.

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

Основной экран:

Пролог.

"Ежели Вы вежливы,
То говорите: "Здрасти".
А ежли Вам ответят: "Нет",
Сдерживайте страсти!" (с)

Однажды… когда в очередной раз, выполняя рутинную работу, Ты будешь, теряя время, вспоминать: в каком из вариантов проекта и по какой причине были внесены изменения в расчеты, оформление или текст… о Пользователь — знай, что для тебя настало время борьбы со Страстями за Структурирование! Структурирование, или стратегия организации разрозненной информации, упирается в возможности и способности конкретного человека, продуктивность которого всецело зависит от тех инструментов которыми он пользуется для этих целей, будь то блокнот или АСУ.

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

Добро пожаловать под Cut (осторожно — трафик, картинки)

Привет!

Отгремели фанфары, прошел звон в ушах от истязаний «евангелистов», модников в сфере фронтенд разработки. Кто-то ушел на sprockets, кто-то пустился во все тяжкие и стал писать свои велосипеды или расширять функционал gulp или grunt. Но статей по поводу популярных инструментов автоматизации процесса сборки – стало существенно меньше и это факт! Пора бы заполнить освободившееся пространство чем-то существенно иным.

Уверен многие слышали о webpack. Кто-то подумал «он слишком много на себя берет» и не стал дочитывать даже вводную статью на оффициальном сайте проекта. Некоторые решили попробовать, но столкнувшись с небольшим количеством примеров настройки — отверг инструмент решив подождать пару лет. Но в целом, разговоров «вокруг» ходит масса. В этой статье — хочу развенчать некоторые сомнения. Может быть, кто-то заинтересуется и перейдет на «светлую сторону». Вообщем желающие под кат.

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

Со списками множественного выбора на Ангуляре всегда было неважно. Существующие решения либо обертки над jQuery-плагином, либо выглядят как не пойми что, либо просто корявы. И у всех естественно особое уникальное АПИ, как будто пользователям делать больше нечего как вникать в ход мыслей разработчиков каждого плагина. Меня такое положение дел не устроило, поэтому написал свой велосипед. Спустя год он дозрел до публикации.

Та-дам! (и забавная история вконце)

Привет, Хабр! В этой статье я сравню четыре открытых движка визуализации кристаллических структур в формате CIF (Crystallographic Information File), популярном в кристаллохимии и материаловедении. Речь пойдёт о современном JavaScript (включая транскомпиляцию Java и C в JavaScript), о кристаллохимии и физике твёрдого тела. Мы телепортируемся из мира Шрёдингера и Ландау в мир Бернерса-Ли и Джобса, а затем обратно. Итак, поехали.

В стремлении к быстрому сайту многие разработчики упускают один важный момент: клиентскую (фронтендную) точку отказа (frontend SPOF – single point of failure). Причем, почти все инструменты тестирования скорости загрузки сайта также не выявят потенциальных проблем.

Решил создать модуль (C/C++ Addons) для NW.js для работы с Рутокенами и поделиться с сообществом кодом, а так же пригласить вас поучаствовать в этом Open source проекте.

Суть идеи в том, чтобы можно было использовать все возможности Рутокена в NW приложении с помощью чистого и понятного JavaScript, а также этот модуль может быть использован в Node.JS или io.js.

API RutokenJS

• CKR initialize()
• bool isInitialize()
• CKR finalize()
• object countSlot()
• object getLibInfo()
• object getSlotInfo(int slot)
• object getTokenInfo(int slot)
• object getMechanismList(int slot)
• object getObjectList()
• CKR login(int slot, string pin)
• CKR loguot()
• object random(int size)
• CKR initToken(int slot)
• CKR openSession()
• CKR closeSession()
• CKR closeAllSessions()
• object getSessionInfo()
• CKR getOperationState()
• CKR setOperationState()

Для тех, кто еще не запустил конвейер по производству веб-приложений, я покажу, насколько это просто и быстро.
Именно для скорости я взял «скоростную» связку webix+databoom.

С помощью webix мы будем разрабатывать наш фронт-энд, а databoom послужит бэк-эндом.

Что в итоге должно получиться? Приложеньице, с помощью которого два (или более?) пользователя смогут обмениваться информацией не подкармливая свою паранойю.

Набор элементов следующий:

• Текстовое поле для сообщения
• Поле для псевдонима
• Кнопка отправки сообщения
• Сам список сообщений
• Дополнительные опции

В качестве улучшения UX/UI я часто сижу и думаю, что можно было бы улучшить в приложении, чтобы пользователю было чуточку веселее пользоваться им.

Как-то раз я заметил интересную анимацию placeholder'a в нативном Desktop приложении Telegram. Подумал, что будет интересным способом использовать такое и в своих проектах.

Предисловие

Какое-то время назад я стал постепенно отказываться от jQuery в пользу нативного javascript. Это связано с тем, что поддержка старых браузеров перестала быть приоритетной и на первое место вышла скорость загрузки страницы. Я не смог найти минималистичный модуль вкладок с простой html разметкой – поэтому решил написать свой.

Демо, Исходный код на Github

HTML разметка

<div class="tabs">
	<div class="tabs__toggle tabs__toggle_active">Вкладка 1</div>
	<div class="tabs__toggle">Вкладка 2</div>
	<div class="tabs__tab">
		Содержимое первой вкладки
	</div>
	<div class="tabs__tab">
		Содержимое второй вкладки
	</div>
</div>

Если на одной странице нужно разместить несколько групп вкладок нужно просто разделить их в разные блоки '.tabs'. Расположение внутренних блоков влияет только на порядок их вывода. Вкладке по умолчанию следует добавить класс 'tabs__toggle_active'.

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

Недавно я написал ряд заметок, так или иначе касавшихся работе с букмарклетами в браузерах, и почти в каждой упомянул о какой-то проблеме с IE, высказывая надежду, что придёт MS Edge и всё исправит.

Поэтому не смог пропустить появление виртуальных машин с Windows 10 и решил проверить, как теперь обстоят дела с коллекцией досадного опыта.

На машине оказалась версия MS Edge 11.00.10240.16397 от 7.22.2015 (по версии файла), она же 20.10240.16384.0 (по информации в настройках браузера)…

Привет Хабр! Мы продолжаем рассказывать, как Webix и databoom могут использоваться для быстрой разработки прототипов приложений. В предыдущем скринкасте мы показали, как Webix datagrid работает с удаленными данными на сервере databoom.

Сегодня мы попробуем разработать прототип приложения, которое отображает дерево отделов компании и для каждого отдела справа в таблице показывается список сотрудников с возможностью добавления, редактирования и удаления как сотрудников, так и отделов.

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



Спасибо за внимание, готовы ответить на ваши вопросы в комментариях.
Исходный код рассмотренного примера: codepen.io/vladislav2/pen/KpYpJw?editors=001

В популярной платформе для быстрого создания веб-приложений скоро появится официальная поддержка SQL. Ранее разработчики неоднократно отказывались это делать, мотивируя тем, что SQL не вписывается в философию проекта. Однако, настойчивость сообщества сделала своё дело и уже сейчас вы можете попробовать предварительную реализацию поддержки SQL в Meteor. Все подробности — под катом!

Всего десять лет назад значительная часть frontend-разработки представляла собой верстку макетов в Photoshop и борьбу с кроссбраузерной несовместимостью. Кажется, что это было вчера. А сегодня frontend — одно из самых динамично развивающихся направлений, в котором инструменты и практики меняются каждые полгода, а разработчикам еще есть куда привносить удачные подходы и решения из других областей. Как я уже неоднократно писал, конференции — это не способ узнать что-то новое. Это способ поговорить с интересными людьми на интересные темы. В ближайшую субботу организаторы FUNC предоставляют поистине уникальную возможность пообщаться с лидерами frontend-сообществ из разных стран. Конференция пройдет в стенах крупной ивент-площадки в офисе Mail.Ru, с огромными залами и вкусным кофе. План мероприятия под катом, участие бесплатное, но регистраций осталось не так много. Присоединяйтесь!

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