Pull to refresh

Приглашаем на IT-митап МойОфис #1 в Калининграде

МойОфис corporate blog JavaScript *ReactJS *Community management *IT-companies

Привет, Хабр! В ближайшую пятницу, 24 июня, мы проведем первый в Калининграде оффлайн-митап МойОфис для разработчиков. Приглашаем хабрасообщество поучаствовать в этом событии!

На митапе эксперты из команды разработки МойОфис выступят с докладами о JavaScript и не только. В профессиональном кругу обсудим библиотеки Polymer и React, систему Nx, а также плюсы и минусы FullStack фреймворков на примере Meteor.JS. Материалы будут интересны как frontend-, так и backend-разработчикам. И это лишь первая половина вечера — далее гости мероприятия узнают о методах оптимизации рабочих процессов в IT и получат наши эксклюзивные инсайты о work-life balance. В том числе о воплощении подхода, который позволяет не просто много зарабатывать, но и иметь достаточно свободного времени для семьи, друзей и увлечений. После митапа мы продолжим общение: все желающие специалисты смогут присоединиться к нашей беседе в неформальной обстановке гастро-паба.

IT-митап МойОфис #1 стартует в Калининграде 24 июня, в 18:30, в Центре коммуникации "Резаниум". Мероприятие бесплатное, регистрация доступна по ссылке. Полную программу митапа читайте под катом.

Программа митапа
Total votes 18: ↑18 and ↓0 +18
Views 284
Comments 0

Web Components — это единственное светлое будущее веба. Смиритесь

Website development *JavaScript *HTML *

Вчера вышла [весьма достойная статья про Web Components, и я понял, что не могу не поделиться тем опытом, что я накопил за последние восемь месяцев. Я не буду рассказывать о том, как работать с Веб Компонентами, я расскажу, почему. Поэтому тем, кто не знает об этом стеке технологий, стоит прочитать статью по ссылке выше.
Дело в том, что в июне вышла первая стабильная версия моей библиотеки CornerJS. Начавшись как автономная реализация директив из AngularJS, она постепенно превратилась в более простой — как в использовании, так и в реализации — аналог (неточный, да, я знаю) Пользовательских Элементов из спецификации Веба Компонентов.

Я прошел через большое количество узких мест, а сейчас эта библиотека используется в нескольких больших и не очень проектах в реальных условиях.

Это замечательная, на мой взгляд, в реализации библиотека — я действительно считал ее основным инструментом в разработке, и в последнем проекте (видеопортале) она оказалась важнее jQuery: от него я мог бы отказаться, а от нее нет.

Но я, как человек, внедривший ее в нашу команду, и отказываюсь от нее — мы переходим на Mozilla X-tags для IE9+ сайтов и Polymer для IE10+ сайтов. К счастью, на моей памяти у нас был всего один или два проекта IE8+.

И в этом посте я расскажу, почему веб-компоненты — это не просто будущее веба. А единственное будущее веба.

Читать дальше →
Total votes 91: ↑72 and ↓19 +53
Views 57K
Comments 23

Используете ли вы Веб Компоненты?

Website development *JavaScript *HTML *
Друзья, просто небольшой опрос, чтобы понять — имеет ли смысл рассказывать об этой теме, и на каком уровне рассказывать.
Если у вас есть опыт использования Веб Компонентов или только Пользовательских Элементов — пожалуйста, расскажите об этом в комментариях.
Буду очень благодарен ответам.
Total votes 24: ↑14 and ↓10 +4
Views 6.2K
Comments 9

Создаем тег Markdown с помощью Polymer/Web Components

Website development *CSS *JavaScript *
Translation
Tutorial
К сожалению довольно сложно найти хорошие материалы по web-components на русском языке, поэтому мы с filipovskii_off решили перевести эту небольшую статью от Rob Dodson.

Эх… Markdown… Отличная штука! Я, честно говоря, не писал бы этот пост, если бы не Markdown. Много раз я пытался начать блог, но каждый раз находил процесс написания слишком ограниченным, как в GUI так и в HTML режиме WordPress. Markdown всё изменил для меня. По-моему, нам давно пора сделать его полноценной частью инструментария разработчика.
Сегодня я покажу вам, как создать тег Markdown с помощью Polymer, Web Components фреймворка от Google.

Github


Если хотите следить за ходом создания тега, хватайте код с Github.
Читать дальше →
Total votes 14: ↑14 and ↓0 +14
Views 10K
Comments 8

Выпущен WebStorm 9 EAP v.2 — что добавили на этот раз?

JetBrains corporate blog Website development *JavaScript *
WebStorm давно стал рабочим инструментом для многих, кто пишет на JavaScript. И мы рады, что постоянное развитие технологий и рост запросов пользователей позволяют нам все время добавлять новые фичи в него.

Замечание для тех, кто еще не использовал EAP'ы: EAP — это early access preview, полностью бесплатная, полнофункциональная, со сроком жизни 30 дней. Потом ее надо заменить на следующий EAP, купить релиз или смириться с ее превращением в тыкву (это — законные способы эксплуатации, нелегальные мы тут перечислять не будем). EAP — это еще «нестабильная» версия, и это означает, что некоторые функции в ней могут работать неидеально, хотя в целом она достаточно близка к релизу по функциональности и качеству.


Мы еще дописываем некоторые фичи, которые появятся в следующих EAP-ах WebStorm, и сегодня мы расскажем о том, что уже можно пощупать руками. А это:
  • обновленный Live Edit: теперь при любом изменении в коде приложения под Node.js позволяет автоматически обновлять приложение;
  • поддержка фреймворка Meteor;
  • поддержка системы сборки Gulp;
  • трассировщик Spy-js для Node.js;
  • интеграция с PhoneGap/Cordova;
  • шаблоны (Postfix templates) для JavaScript;
  • улучшенная поддержка библиотеки Polymer;
  • усовершенствованный плагин Editorconfig.

WebStorm 9 EAP можно уже скачать на нашем сайте.
Рассмотрим это все
поподробнее
Total votes 38: ↑36 and ↓2 +34
Views 19K
Comments 71

В одной упряжке Polymer’ы, Dart и Firebase

JavaScript *NoSQL *Dart *
Sandbox
Недавно появилась информация о том, что Google приобрел облачный сервис Firebase. На хабре информации о Firebase не особо много, а сервис выглядит очень интересно, как минимум для быстрого прототипирования или использования в качестве буфера для активных данных.

FireBase — это облачная NoSQL БД для real-time приложений. То есть, ваши данные хранятся в облаке, которое готово почти к любым нагрузкам. Ваши данные моментально обновляются на всех клиентах, которые подключены к FireBase и подписаны на информацию об обновлениях. Совершенно отпадает необходимость строить сложную систему с использованием веб-сокетов для обмена данными между сервером и клиентами в реальном времени. Вы просто подключаете JS-файл на страницу и настраиваете CallBack на события изменения данных. Все – дальше FireBase будет самостоятельно следить за данными и отдавать их пользователям. Причем, происходит это почти мгновенно! А еще с FireBase можно создавать веб-приложения, для которых вообще не потребуется собственный сервер. При этом для небольших сервисов использование FireBase совершенно бесплатно. Кроме этого, Firebase предоставляет установку прав доступа к частям данных на базе JS-выражений, транзакции (в отличие от MongoDB) и имеет встроенный функционал авторизации пользователей по электронной почте и паролю, а также авторизации с помощью сторонних поставщиков (OAuth), таких как Facebook, Twitter, GitHub, и Google.

image


Взглянув, как это работает, появилось желание переписать тьюториал на Dart.
Читать дальше →
Total votes 7: ↑5 and ↓2 +3
Views 8.6K
Comments 5

Polymer: транскрипт видео с Google I\O

Google Developers corporate blog Website development *JavaScript *Development of mobile applications *
Polymer — это специальная библиотека для создания и использования веб-компонентов, а веб-компонент можно определить, как выделенный и независимых HTML код, включающий шаблоны, стили и сопутствующую js-логику. Кстати, недавно на Хабре была интересная статья Веб-компоненты в реализации Polymer от Google о том, что же такое Polymer и чем он может быть полезен.
image
На самом деле, задача Polymer не только упростить создание сайтов, Polymer должен помочь создавать веб-приложения, способные без дополнительного вмешательства функционировать на различных устройствах: от десктопов и мобильных платформ до телевизоров. Polymer можно назвать воплощением Material Design'а для веба.

И специально для тех, кто интересуется будущим веб и вообще приложений (да-да, эти миры очень тесно связаны! И, если вдуматься, то Polymer связывает их еще больше) мы подготовили профессиональный транскрипт видео докладов с Google I\O:

Читать дальше →
Total votes 16: ↑16 and ↓0 +16
Views 14K
Comments 10

Приглашаем на GDG DevFest Воронеж 2014

Google Developers corporate blog Website development *Development of mobile applications *
Поклонники Google, разработчики и энтузиасты, ждем вас на третьей ежегодной конференции GDG DevFest Воронеж 2014, которая пройдет 13 и 14 декабря (не путать с GDG DevFest Omsk).



Выступления экспертов, доклады о самых животрепещущих в Google-мире вопросах, общение с единомышленниками, море веселья и заряд положительных эмоций на грядущий год — все это ждет вас на GDG DevFest. Поговорим о Wearables, Google Glass, Polymer, Android-разработке, браузерах, Material Design и многом-многом другом.
О GDG DevFest
Total votes 12: ↑8 and ↓4 +4
Views 2.5K
Comments 1

Тренды JavaScript на 2015 год

Microsoft corporate blog Website development *JavaScript *TypeScript *


Всем привет! Мы как-то задумали сделать легкий вводный курс на тему JavaScript и разработки приложений (он, кстати, скоро будет опубликован): и, пока я собирал материалы к нему, как-то само собой выяснилось, что есть довольно много вещей, которые, так сказать, находятся на переднем крае развития JavaScript. Отсюда родилась идея сделать отдельную обзорную статью в жанре «X трендов на год Y по технологии Z».

Многие из тех, вещей, которые я буду описывать, можно попробовать в той или иной степени уже сегодня (собственно, иначе я бы говорил о космическом будущем, а не о трендах). В этом есть несомненный плюс: если у вас будет свободное время (а на праздниках его обычно много), вам будет чем заняться. Да и, в целом, хорошо начинать новый год с расширения своих горизонтов!
Читать дальше →
Total votes 108: ↑88 and ↓20 +68
Views 112K
Comments 76

Возможна ли жизнь без шаблонизатора?

CMS *Website development *HTML *
Tutorial
Правильный ответ — да, легко!

Практически всегда описывая устройство CleverStyle CMS у кого-то возникал вопрос, а как же настраивать внешний вид, ведь нет никаких шаблонов.
Нужно признаться, я немного лукавил, говоря, что внешний вид можно изменить с помощью CSS. Изменить-то можно, но не кардинально.
Шаблонизатора как не было, так и нет, и даже не планируется. Вместо этого для генерации простого HTML используется BananaHTML, а сам интерфейс ложится на плечи веб-компонентов и Polymer в частности.
Читать дальше →
Total votes 18: ↑10 and ↓8 +2
Views 10K
Comments 5

Видео докладов с GDG DevFest Воронеж 2014

DataArt corporate blog Website development *Development for Android *
Привет, Хабр.

Хотели посетить конференцию GDG DevFest Воронеж 2014, но почему-то не смогли? Специально для вас мы приготовили видео выступлений всех спикеров.

Посмотреть фотоотчет и клип о конференции можно здесь. А отчет с конференции можно прочитать в нашем корпоративном блоге.

Надеемся, вам понравится!
Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Views 3.2K
Comments 3

Как мы делаем лэндинги

Ecoisme corporate blog Website development *Development of mobile applications *HTML *
Tutorial
Настало время поприветствовать Хабрахабр от имени стартапа Ecoisme!

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

Сегодня расскажем о том, как делаем лэндинги (посадочные страницы).
Мы используем те вещи, которые большинство разработчиков пока не используют, но которые здорово облегчают жизнь нам и могут облегчить другим.
Поехали
Total votes 32: ↑18 and ↓14 +4
Views 13K
Comments 18

Теневой DOM (Shady DOM)

Website development *


На Google I/O нам был представлен Polymer 1.0. Это новый релиз инструмента, который включает ряд особенностей и нововведении. Пожалуй начать стоит именно с Shady DOM.

Зачем нам еще один DOM?


Инкапсуляция является основой веб-компонентов.

Целью веб-компонентов является предоставление пользователю простого интерфейса для отображения сложных элементов, реализация которых скрыта.

Браузеры часто используют инкапсуляцию. Например, элементы <select> и <video>, отображаются используя не доступный для нас DOM, о котором знает только браузер.
Читать дальше →
Total votes 23: ↑19 and ↓4 +15
Views 24K
Comments 23

Понятно и просто про веб-компоненты и Polymer

DataArt corporate blog Website development *CSS *JavaScript *HTML *
Tutorial


Кто я

Я — Александр Кашеверов. По образованию — магистр радиофизики. По профессии — веб-разработчик, работаю в компании DataArt с 2011 года, с 2009 увлекаюсь IT и веб-технологиями.

О чем статья, коротко

Рассмотрим, что такое веб-компоненты и polymer. Немного поразмышляем на тему развития веба. Посмотрим на технические детали, примеры, поддержку браузерами, тестирование. Коротко, понятно, по делу. С картинками.

Вступление

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

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

Для уменьшения головной боли хорошо бы, если в контексте веб:

  • CSS не пересекался.
  • Области видимости JS не пересекались.
  • HTML был понятным и читаемым, никаких лишних элементов.

Читать дальше →
Total votes 25: ↑22 and ↓3 +19
Views 47K
Comments 14

Cобрать лучшее из двух миров — фреймворков и CMS (часть 3)

CMS *Website development *PHP *
Прошло уже много времени с выхода второй статьи (часть 1, часть 2), а тут как раз есть что рассказать, так как вышел первый релиз третьей версии системы.

Вкратце об изменениях


Третья версия понемногу двигается в направлении микроядерной архитектуры. Это значит что код ядра всё так же достаточно сильно связан (хотя немного меньше чем до этого), некоторые второстепенные фичи были попросту удалены и появилось больше точек соприкосновения, где разработчик может при необходимости вклиниться в работу системы если он того желает.

На стороне сервера был проведен масштабный рефакторинг нацеленный на простоту и качество кода, что за последние пол года вылилось в повышение оценки Scrutinizer с 5.4 или что-то около того до текущих 7.74/10, что уже совсем неплохо.
На стороне клиента произошла революция, Polymer 0.5.x был обновлен до Polymer 1.x и все компоненты были соответственно переписаны, ещё был полностью выпилен UI фреймворк и некоторые другие изменения.
Подробнее обо всём под катом
Total votes 16: ↑13 and ↓3 +10
Views 22K
Comments 35

Chrome дополнение PushAll возвращает возможности центра оповещений и дополняет его

PushAll corporate blog Google Chrome Browser extensions Browsers
Многие наверное видели область уведомлений в Chrome? Мы ранее писали, что Chrome её убрал.



При этом все сервисы, использующие push-уведомления, получили ряд проблем.
  • Если вы используете Web Push, то у вас есть возможность закрепить оповещение на экране. И пользователь может либо закрыть оповещение, либо нажать на него. То есть если он занят, то он скорее всего закроет, даже если бы он хотел прочесть материал
  • Если вы используете дополнение для Chrome, тогда Rich Notification исчезает через несколько секунд в небытие.


Мы сделали раздел пропущенных оповещений, в котором собираются те оповещения, которые исчезли, и те которые не были доставлены (например если у вас были заблокированы порты)



Ссылка на обновленное расширение
Читать дальше →
Total votes 6: ↑1 and ↓5 -4
Views 5K
Comments 3

Релиз CleverStyle Framework 4

CMS *Website development *PHP *
Как-то не получалось писать более одной статьи от начала новой ветки (часть 1, часть 2, часть 3), но вот опять есть чего интересного рассказать, ведь вышел первый релиз серии 4.х.

Вкратце обо всём


Первое что хотелось бы сказать — проект был переименован из CleverStyle CMS в CleverStyle Framework. Наконец-то! Больше не будет путаницы между названием и содержимым.

Если серия 2.х началась с существенных изменений на стороне сервера, а 3.х с сопоставимых изменений на клиенте, то 4.х приносит улучшения везде.

На сервере существенно увеличена скорость работы, при том что это full-stack фреймворк, используя HTTP сервер основанный на ReactPHP можно получить скорость генерации страницы НИЖЕ 1мс, быстрее стала генерация HTML в типичных сценариях.
Так же добавилась удобная поддержка вложенных структур в файлах переводов, добавилась поддержка SQLite, PostgreSQL, поддержка работы в качестве PSR7 Middleware (инициализация из PSR7-совместимого request объекта и выдача результата в PSR7-совместимый response объект) и связанные с этим удобные абстракции в самом ядре.

На фронтенде повсеместно используется RequireJS, ряд библиотек, безусловно загружающихся на фронтенде, теперь загружаются только когда непосредственно нужно, добавлены оптимизации для быстрой отрисовки первого кадра (first paint).

На стыке backend и frontend оптимизации построения кэша статики (CSS/JS/HTML), HTTP/2 Server push, Link: <preload> и много другого.

В целом система выглядит как хороший гибридный (не чисто микроядерный, но и не жирный такой) full-stack php фреймворк.

Как всегда, не обошлось без улучшения метрик кода, например, оценки Scrutinizer:)
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Views 6.4K
Comments 51

Изменения в CleverStyle Framework 5

CMS *Website development *PHP *
Некоторое время назад вышел первый релиз ветки 5.x, а потом несколько меньших патч-версий, так что опять есть чего рассказать.

Предыдущие изменения: часть 1, часть 2, часть 3, часть 4.

Комментарии под предыдущей статьей и в чатиках были весьма полезными, отдельное спасибо fesor, который хоть и не согласен, но предоставляет конструктивную критику, которая имеет позитивные последствия.

Множество изменений сделали систему быстрее, легче и удобнее чем когда-либо до этого. В статье кратко об основных изменениях, их причинах и последствиях.
Читать дальше →
Total votes 17: ↑15 and ↓2 +13
Views 5.1K
Comments 14

Система сборки фронтенда в CleverStyle Framework или почему вам может быть не нужна кастомная

CMS *Website development *PHP *

CleverStyle Framework всячески помогает разработчику не только на сервере, но и на фронтенде. Я об этом несколько раз упоминал в прошлых статьях, но никогда не вдавался в подробности того, как именно всё устроено под капотом.


Данная статья будет погружением в подробности работы со статикой для фронтенда, начиная от того как определяются файлы нужные на странице и заканчивая оптимизациями доставки статики вроде HTTP/2 Server Push. Не забудем и о том, почему с использованием CleverStyle Framework можно обойтись без кастомной системы сборки и как при желании интегрировать такую систему сборки в процессы фреймворка.


Данная статья специально упускает из внимания интеграцию Bower/NPM и RequireJS, это будет тема отдельной статьи в недалеком будущем.

Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Views 3.6K
Comments 13

Пишем GraphQL API сервер на Yii2 с клиентом на Polymer + Apollo. Часть 2. Клиент

PHP *JavaScript *Yii *API *
Tutorial

Часть 1. Сервер
Часть 2. Клиент
Часть 3. Мутации
Часть 4. Валидация. Выводы


Для реализации UI рассмотрим пример написания веб-клиента для нашего GraphQL-сервера. И коли уж мы решили не следовать старым добрым традициям, то и в UI этого делать, конечно же, не будем и напишем его на кастомных веб-компонентах с использованием замечательной библиотеки Polymer.


Почему для подключения к GraphQL-серверу была выбрана библиотека Apollo сказать сложно, так как аналогов для работы с GraphQL я не встречал. Изначально библиотека, как и вся ее документация заточена под React, а вся информация об интеграции с Polymer ограничивается лишь ссылкой на компонент в разделе Integrations. Таким образом, если вы работаете с React, вам и карты в руки. Все примеры, твики и хуки именно для него.

Читать дальше →
Total votes 10: ↑9 and ↓1 +8
Views 6K
Comments 0
1