Представители КРОК, Traffic Inspector, WebMoney Transfer и Softline рассказали, что принес 2015-й год в сферу веб-разработки. Эксперты перечислили важнейшие события индустрии и отметили основные тренды уходящего года.

Ключевые события и тренды

2015-й – это год утверждения стандарта HTTP/2 (предыдущая версия протокола была принята в 1999). Это год массового перехода на стандарт HTML-5 с устаревшего Flash, который уже не поддерживается большинством современных браузеров. Это год появления WebAssembly, который в дальнейшем позволит перенести требовательные к производительности приложения в Web, что по мнению Сергея Дорогина, ведущего инженера-разработчика Департамента информационных технологий компании КРОК, означает “начало нового мира”.

Большинство тенденций уходящего года в сфере веб-дизайна, связаны с ростом популярности гаджетов и распространением мобильного интернета. Среди них такие как использование адаптивной верстки вместо создания отдельной мобильной версии сайта. Один из основных трендов – минималистичный дизайн, заданный Apple, помимо этого эксперты пророчат долгоиграющую популярность материальному дизайну от Google.
Читать дальше →

Привет, Хабр! Как мы и обещали, выкладываем фото и видео-отчёт с прошедшего ивента. Воронежские GDG продолжают традицию и уже четвертый год подряд проводят DevFest, чтобы обсудить самое важное и актуальное в Google-мире. В этом году конференцию посетили более 500 участников, что почти вдвое больше, чем в прошлом. Ну а организаторами, как обычно, выступили DataArt и ВГУ.

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

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

В одном своём проекте на Yii2 мне захотелось совместить Adjacency List и Nested Sets. Причём так, чтобы в случае отключения поведения Nested Sets, функционал оставался полностью работоспособен. Затем я понял, что Nested Sets мне не нужен, т. к. в базе всё равно приходилось хранить полный путь, поэтому на замену я решил применить Materialized Path. Имеющийся на GitHub Behavior (matperez/yii2-materialized-path) был недостаточно функционален, поэтому пришлось написать свой, а так как я недавно уже писал свои поведения для Adjacency List и Nested Intervals, я решил, почему бы не сделать набор таких поведений с единым API, и возможностью произвольно подключать их к модели одновременно, используя преимущество каждого.

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

Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб-технологий, но до этого момента никак не доходили руки. Сегодня мы создадим небольшое ToDo-приложение и используем для этого JavaScript-фреймворк AngularJs в связке с гугловским Material Design’ом. Код готового приложения доступен на Github.

Первым делом необходимо установить Electron:

npm install electron-prebuilt -g

Затем перейдем к созданию самого проекта. Для этого, например, можно воспользоваться генератором от Yeoman, либо создать файлы вручную. Так как нам нужно создать всего лишь несколько файлов, мы выберем второй вариант. Создадим новую папку и добавим в нее три файла: app.js, main.js и index.html.

Начнем с первого файла app.js. В нем мы инициализируем наше electron-приложение, укажем опций для окна, название, иконки и прочее. Здесь можно взять за основу код с странички документации и дополнять его по необходимости:

[js]

var app = require(‘app’); // Module to control application life.

var BrowserWindow = require(‘browser-window’); // Module to create native browser window.

// Keep a global reference of the window object, if you don’t, the window will

// be closed automatically when the JavaScript object is GCed.

var mainWindow = null;

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

app.on(‘ready’, function() {

// Create the browser window.

mainWindow = new BrowserWindow({width: 800, height: 600, resizable: false});

// and load the index.html of the app.

mainWindow.loadUrl(‘file://’ + __dirname + ‘/index.html’);

// Open the devtools.

mainWindow.openDevTools();

// Emitted when the window is closed.

mainWindow.on(‘closed’, function() {

// Dereference the window object, usually you would store windows

// in an array if your app supports multi windows, this is the time

// when you should delete the corresponding element.

mainWindow = null;

});

});

[/js]

Теперь создадим index.html в котором будет находиться внешний вид нашего приложения. Для начала просто поместим в него строку текста “Hello world” и для проверки запустим наше приложение с помощью команды:

electron app.js

Теперь скачаем необходимые нам библиотеки – AngularJs, Angular Material, а так же веб-шрифт с иконками Material Icons. Для этого можем воспользоваться менеджером пакетов npm:

npm install angular
npm install angular-material

После того как пакеты скачались их необходимо подключить в index.html. Для работы Angular Material потребуются еще две библиотеки Anuglar Animate и Angular Aria, если скачиваете скрипты вручную, то не забудьте и о этих скриптах.

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

[html]

<!DOCTYPE html>

<!– Web Font with Material Icons –> <!– Toolbar with title –>

–

[/html]

Теперь перейдем к основной части нашего списка дел к javascript-логике и для этого откроем третий файл main.js. Здесь мы для начала инициализируем angular-приложение todoApp с модулем ngMaterial, создадим контроллер AppCtrl и инициализируем несколько массивов с объектами. В первый из них поместим три объекта для навигаций с двумя полями: название пункта меню и текстовое название иконки (список всех иконок Material Icons). Во втором массиве мы будем хранить наши задачи и для этого нам так же потребуется два поля: название задачи и статус (сделано или нет). В итоге у меня получилось так:

[js]

var app = angular.module(‘todoApp’, [‘ngMaterial’]);

app.controller(‘AppCtrl’, [‘$scope’, function($scope){

$scope.options = {

name: ‘My Todo List’,

show: ‘All tasks’

};

$scope.navigationBarItems = [

{‘title’: ‘All tasks’, ‘icon’: ‘list’},

{‘title’: ‘Todo’, ‘icon’: ‘assignment’},

{‘title’: ‘Done’, ‘icon’: ‘done’}

];

$scope.myTasks = [

{‘title’: ‘Learn AngularJs’, ‘done’: false},

{‘title’: ‘Create first app with Electron’, ‘done’: true}

];

$scope.setContent = function (content) {

$scope.options.show = content;

};

}]);

[/js]

Запустим наше приложением и посмотрим, как оно выглядит и что оно уже умеет.

electron app.js

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

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

Для этого добавим код Fab-кнопки в index.html:

[html]

add

[/html]

Вернемся к файлу main.js и первым делом пропишем две необходимые нам зависимости $mdDialog и $mdToast для всплывающих оповещений:

[js]

app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast) {…}

[/js]

Теперь создадим новую функцию, которая будет открывать новый диалог по нажатию на fab-кнопку:

[js]

$scope.showAdd = function(ev) {

$mdDialog.show({

controller: AddDialogCtrl,

template: ‘ <form name="userForm"> New Task </form> <div class="md-actions" layout="row"> Cancel Add task </div>’,

targetEvent: ev,

})

.then(function(task) {

$scope.addTask(task);

$mdToast.showSimple(‘Task “’ + task + ‘” was added!’);

});

};

[/js]

Как видите, функция show от $mdDialog принимает html-шаблон с диалогом, а так же новый контроллер, который мы сейчас и создадим:

[js]

function AddDialogCtrl($scope, $mdDialog) {

$scope.hide = function() {

$mdDialog.hide();

};

$scope.cancel = function() {

$mdDialog.cancel();

};

$scope.add = function(task) {

$mdDialog.hide(task);

};

};

[/js]

И конечно же, не забываем добавить функцию addTask(), которая будет добавлять нашу новую задачу в общий массив на первую позицию:

[js]

$scope.addTask = function (task) {

$scope.myTasks.unshift({

‘title’: task,

‘done’: false

});

};

[/js]

В итоге, у меня main.js выглядит следующим образом:

[js]

var app = angular.module(‘todoApp’, [‘ngMaterial’]);

app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast){

$scope.options = {

name: ‘My Todo List’,

show: ‘All tasks’

};

$scope.navigationBarItems = [

{‘title’: ‘All tasks’, ‘icon’: ‘list’},

{‘title’: ‘Todo’, ‘icon’: ‘assignment’},

{‘title’: ‘Done’, ‘icon’: ‘done’}

];

$scope.myTasks = [

{‘title’: ‘Learn AngularJs’, ‘done’: false},

{‘title’: ‘Create first app with Electron’, ‘done’: true}

];

$scope.setContent = function (content) {

$scope.options.show = content;

};

$scope.addTask = function (task) {

$scope.myTasks.unshift({

‘title’: task,

‘done’: false

});

};

$scope.showAdd = function(ev) {

$mdDialog.show({

controller: AddDialogCtrl,

template: ‘ <form name="userForm"> New Task </form> <div class="md-actions" layout="row"> Cancel Add task </div>’,

targetEvent: ev,

})

.then(function(task) {

$scope.addTask(task);

$mdToast.showSimple(‘Task “’ + task + ‘” was added!’);

});

};

}]);

function AddDialogCtrl($scope, $mdDialog) {

$scope.hide = function() {

$mdDialog.hide();

};

$scope.cancel = function() {

$mdDialog.cancel();

};

$scope.add = function(task) {

$mdDialog.hide(task);

};

};

[/js]

На этом пока что все, экспериментируй, расширяйте возможности

Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб-технологий, но до этого момента никак не доходили руки. Сегодня мы создадим небольшое ToDo-приложение и используем для этого JavaScript-фреймворк AngularJs в связке с гугловским Material Design’ом. Код готового […]