develNotes

/*айтишные заметки*/

27.12.2014

С новым годом! И немного анимации с помощью HTML5 Canvas.

 

Хочу привести простой пример использования возможностей рисования и анимации с помощью HTML5. Собственно, то, что получится в итоге, вы можете наблюдать чуть выше (разумеется, если вы не отключили JavaScript). Для того, что бы получить такой результат -  будем использовать элемент canvas, который включен в спецификацию HTML5, и предназначен для рисования.

Первым делом нужно создать страницу и поместить на нее элемент canvas: 

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <script>
  </script>
 </body>
</html>

По умолчанию, размер области для рисования элемента canvas - 300px x 150px. Поскольку нам хватит и меньше - задаем размер 200px x 200px.  Теперь нужно написать скрипт, который будет рисовать нашу новогоднюю елку. Соответственно, весь дальнейший код добавим в тег <script> на только что созданной странице. Начнем с рисования самой елки:

Теги: html5 web javascript     Далее

10.02.2016

Сжатие JS и CSS с помощью Maven

Чем меньше размер загружаемых скриптов и css файлов - тем лучше. Для того чтобы сжать файлы, можно пользоваться разными утилитами и плагинами, в зависимости от используемой технологии/среды разработки. Я хочу привести пример того, как можно использовать Maven для сжатия CSS/JS файлов. Я предполагаю ситуацию, в которой у вас есть веб-приложение, которое выкладывается на сервер в виде WAR архива. Понятно, что для ведения разработки сжатые файлы не подходят, но сжимать отдельно каждый файл до сборки продакшн версии проекта - решение не особо удобное. Поэтому хотелось бы сделать так, чтобы при сборке приложения CSS/JS файлы автоматически сжимались. Здесь отлично подойдет Maven с его профилями и плагинами!

На всякий случай отмечу, что я использовал Maven 3.0.4, со сборкой проекта в Eclipse Mars. Для решения задачи я использую два плагина: minify-maven-plugin и maven-war-plugin. Первый сжимает указанные в pom файлы, а второй перезаписывает их в WAR архиве. Таким образом получается, что больше не нужно держать две версии всех скриптов - аля file.js и file.min.js, аналогично и с CSS. Это избавляет от головной боли! Просто при разработке используются несжатые версии файлов, а при сборке продакшн версии проекта файлы сжимаются и перезаписываются в WAR архиве.

Теги: javascript web javaEE     Далее

17.07.2016

Spring Security 4 и AngularJS. Аутентификация в AJAX веб-приложении.

Spring Framework можно назвать стандартом де-факто в мире Java. Еще бы, ведь некоторые концепции, реализованные в этом фреймворке повлияли на саму спецификацию JavaEE. Spring Security является дочерним проектом Spring, и предоставляет средства аутентификации и авторизации для Java/JavaEE приложений. С другой стороны, в мире фронтенда победил JavaScript и фреймворки, позволяющие создавать SPA веб-приложения - AngularJS, ReactJS, BackboneJS и другие. Я хочу привести пример, как можно успешно использовать Spring Security 4 совместно с Angular. В этом примере мы напишем REST бекенд, используя Spring MVC. Также мы реализуем аутентификацию и авторизацию с помощью Spring Security, в то время как на фронтенде будет использоваться AngularJS. 

В целом, пример больше всего ориентирован на backend составляющую. Используя описанный принцип, можно аналогично использовать какой-нибудь другой фреймфорк для фронтенда (например Angular 2). Итак, нашей целью будет создать веб-приложение с несколькими разделами - открытый раздел и два защищенных раздела, в которые имеет доступ только авторизованный пользователь. Все должно работать через AJAX и должна быть функция "запомнить меня".

В примере будет использоваться Java 8, Tomcat 8, Spring 4.3, Spring Security 4.1, AngularJS 1.4.9. В конце поста вы можете найти ссылку на полный код проекта.