Существует такая категория сайтов, которые мы обычно называем «вау-сайтами». Они не предназначены для непосредственного потребления контента, а скорее производят впечатление на посетителя. Эти сайты обычно уникальны в своем дизайне, содержат экспериментальные решения для взаимодействия с пользователем, ломают стереотипы и изобилуют разными анимациями. Особый интерес представляют различные трюки с SVG и анимации, основанные на большом количестве частиц, о которых и пойдет речь в этой статье.



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

Доброе время суток, хабровчане!

Надеюсь среди Вас найдутся такие же любители делать формочки как и я.
Дело в том, что я всегда был приверженцем дружелюбных интерфейсов. Меня расстраивали приложения, которые мало ориентированны на пользователей, такое особенно бывает в корпоративной разработке. И зачастую клиентские приложения написанные на Java это черные окошки, а к приложениям c GUI относятся со скептицизмом.

Ранее, на Swing или AWT все было очень печально, да наверное и до появления JavaFX 8 написание анонимных классов превращалось в спаггети код. Но с появлением лямбда-выражений все изменилось, код стал проще, понятней, красивее. Использовать JavaFX в своих проектах стало одним удовольствием.

Вот и возникла у меня мысль связать лучший инструмент для Java Spring Framework и удобный в наше время инструмент для создания GUI JavaFX, это даст нам использовать все возможности Spring`а в клиентском десктопном приложении. Собрав всю информацию воеидно, которую я искал по просторам сети, я решил поделиться ей. Прежде всего хочу отметить, что статья предназначена больше для новичков, поэтому некоторые подробности для многих могут оказаться слишком банальными и простыми, но я не хочу их опускать, чтобы не терять целостность статьи.



Жду конструктивной критики по свои решениям.

Кому интересно, прошу под кат.

Предисловие

Трудно переоценить значение компьютерного моделирования в современном мире. Давным давно канули в Лету времена, когда траектории выведения спутников на околоземную орбиту вычислялись толпой девушек-расчетчиц с «Феликсами» наперевес (была такая вычислительная машина). Сегодня скромных размеров ящик около вашего рабочего стола решает все мыслимые и немыслимые задачи. Но есть одно «но».



Состояние инженерного образования, не знаю, как там в столицах, а здесь, на периферии, выглядит в контексте данного вопроса удручающе. Винить тут стоит подход к преподаванию в вузах таких дисциплин как «Численные методы решения инженерных задач на ЭВМ», «Математическое моделирование в %нужное впишите сами%» и прочих. Эта беда инженерного образования вытекает из того факта, что в курсах, подобным перечисленным, порой напрочь отрублены междисциплинарные связи. У обучаемого не складывается в голове цепочка: фундаментальная теория -> практическое применение -> инструмент решения задачи.

У меня давно зрела мысль написать цикл, в котором будет разобрано по полочкам всё то, что мы называем современным математическим моделированием. Но сделать это просто и доступно для тех, кто только начинает познавать эту необъятную дисциплину современной науки. Что из этого выйдет, неизвестно, но тех кому стало интересно я приглашаю под кат.

О существовании SVG знают все, кто занимается фронтендом. Этой технологии уже не один год, про нее уже не раз писали на хабре. Но есть один момент. Частенько на разных ресурсах, в том числе и на тостере, начинающие задают вопросы о создании определенного семейства анимаций на сайте и получают довольно странные ответы от “бывалых” разработчиков. Возникает ощущение, что в такие моменты все думают в контексте HTML+CSS+JS и просто забывают о существовании SVG, предлагая все рисовать на canvas и попутно давая обещания дать тому, кто это придумал, клавиатурой по голове. Но этот путь (рисование на canvas) зачастую слишком сложен относительно решаемой задачи. В предыдущей статье мы обсуждали идеи создания частичных вау-эффектов, а в этой поговорим о масках и посмотрим пару анимаций, которые с их помощью можно сделать.

Sublime Text 3 — кроссплатформенный текстовый редактор.

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

Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.

1. Установка программы и контроль за дополнениями (Package Control)

1. Устанавливаем Sublime Text 3. Тут всё просто — качаем и запускаем.
   

Теперь нажимаем ctrl/⌘+shift+p или в меню (Tool > Command Palette).

Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.

Когда язык программирования используют миллионы человек, кажется, что о нём должно быть предостаточно сайтов, в том числе русскоязычных. Однако, если набрать в поисковике «новости Java», результаты оказываются примерно такими:



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

Поэтому, во-первых, мы сейчас перезапустили сайт JUG.ru, чтобы исправить это. А во-вторых, раз русскоязычные регулярно обновляемые ресурсы в дефиците, вспомнили, какие есть англоязычные, и делимся результатами с Хабром. Разумеется, в текст вошло далеко не всё возможное, и будем только рады дополнениям в комментариях.

Добрый день.
Меня зовут Головач Иван, я руковожу небольшой образовательной компанией и преподаю сам:

1. Java Core
2. Junior Java Developer: Servlet API, JDBC, Maven, JUnit, Mockito, Log4J, основы Spring/SpringMVC, основы JPA/Hibernate, шаблоны/архитектуры MVC/IoC/DAO.
3. Multicore programming in Java.

Также я веду курс «Scala for Java Developers» на платформе для онлайн-образования udemy.com (аналог Coursera/EdX).

В следствии этого у меня скопилось значительно количество ссылок на видео на русском языке по Java как моего авторства, так и моих коллег.

(GolovachCourses.com)

Здесь собраны несколько вариантов записи моего курса Java Core.
Модуль #1 (Procedural Java):
Набор июль 2013: #1, #2, #3, #4
Набор апрель 2013: #1, #2, #3, #4
Набор февраль 2013: #1, #2, #3, #4
Набор январь 2013: #1, #2, #3, #4
Набор октябрь 2012: #1, #2, #3, #4.

Введение

Надеюсь что мы с вами набрались достаточно опыта, чтобы смоделировать что-нибудь более серьезное, чем полет камня. Предлагаю такую задачу

Пушка, стреляющая сферическими ядрами сообщает им начальную скорость 400 м/с. Определить траекторию полета снаряда при стрельбе под углом в 35 градусов к горизонту. Поле силы тяжести считать однородным, кривизной Земли пренебречь.

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

Начало

А началось все с того, что вызывает меня генеральный к себе, и говорит: «Вот видишь телефон? Хочу чтобы там была кнопка, я на нее нажимаю, и у меня в ноутбуке кино включается. Нажимаю другую – музыка играет.» И еще чего-то много наговорил, уж не помню. «Задача понятна? Выполняй!» Вот уж не знаю, с чего такая потребность у него возникла. То ли звезды не под тем углом встали, то ли сон какой приснился. Короче, не поймешь этих богатых… Ну да ладно.

Поначалу полез рыться в Гугл в поисках подходящей программы, а потом подумал – а какого черта? Напишу сам. Тем более, что задача не показалась сложной, да и “зов кода” уже давал о себе знать (этакая профессиональная it-ломка). Вот и решил соединить Windows и Android собственными силами.

Всем доброго!

У нас на этой неделе практически юбилей — стартует пятая группа "Разработчик Java", а это значит, что мы снова делимся всякими полезностями.

Поехали.

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

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

Давно прошли те дни, когда для иконок в вебе использовались картинки и CSS-спрайты. С развитием веб-шрифтов номером 1 для отображения иконок на сайтах стали иконочные шрифты.

Шрифты — векторные, так что вам не нужно беспокоиться о разрешении экрана. Для них можно использовать те же CSS-свойства, что и для текста. В результате вы имеете полный контроль над их размером, цветом и стилем. Вы можете добавлять к ним эффекты, трансформировать или декорировать их. Например, повернуть (rotate), подчеркнуть (underline) или добавить тень (text-shadow).

Иконочные шрифты не идеальны, поэтому все большее число людей предпочитает использовать встроенные SVG-изображения. На CSS Tricks есть статья, где описаны моменты, в которых иконочные шрифты уступают SVG-элементам: резкость, позиционирование, сбои кросс-доменной загрузки, особенности браузеров и блокировщики рекламы. Сейчас вы можете обойти большинство этих проблем, что, в целом, делает использование иконочных шрифтов безопасным.

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

TL;DR: этот пост позволяет вникнуть в то, как и почему. Если вы хотите понять весь процесс, читайте дальше. В противном случае вы можете посмотреть окончательный код на CodePen.

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

Также здесь мы рассмотрим метод, как получить поведенческую информацию от пользователей используя только HTML и CSS.

Возможно, после прочтения поста, вам покажется что я "изобрел колесо". Так и есть, методы описанные в этом посте не новы, и используют спецификации которые поддерживают практически все браузеры.

Так или иначе, эта информация поможет вам понять один нестандартный метод отслеживания поведения пользователей, который на данный момент нельзя "отключить" (в настройках) или заблокировать (плагинами вроде AdBlock или Ghostery).

Мы подготовили для вас новый сет задач и вопросов, задаваемых на собеседованиях в ведущих IT-компаниях.



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

[Дым на КДПВ несколько сложнее получаемого в туториале.]

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

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

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

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

В этом посте будет описан процесс разработки онлайн игры на чистом javascript и WebGL (без фреймворков и движков). Будут рассмотрены некоторые алгоритмы, техники рендеринга, искусственный интеллект ботов и сетевая игра. Проект является полностью опенсорсным, в конце поста будет ссылка на репозиторий.

Доброго времени суток, друзья. Сейчас я постараюсь вам показать как можно написать игру Змейка. Конечно, не самым быстрым способом и не самым маленьким в плане количества строк кода, но по-моему самым понятным для начинающих разработчиков, как я. Статья написана для людей, желающих чуть-чуть познакомиться с элементом canvas и его простыми методами для работы с 2D графикой.

Напишем змейку в «старом» виде, без особо красивой графики — в виде кубиков. Но это только упростит понимание разработки. Ну что же, поехали!

Список лучших инструментов для web-анимации. SVG/CSS/Canvas/DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.

Репозиторий: github.com/sergey-pimenov/awesome-web-animation
Страница-каталог: awesome-web-animation.netlify.app

В будущем список будет дополнен книгами и видео-курсами по web-анимации. Если вы заметите, что какого-то стоящего инструмента не присутствует — пожалуйста, напишите об этом и я добавлю его.

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

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

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

Что самое удивительное, в университетах пока не спешат переводить программы обучения в русло параллельных вычислений! При этом сегодня нужно постараться, чтобы найти компьютер с одним ядром. В моем родном Carleton University курсы по параллельным вычислениям не входят в обязательную программу Bachelor of Computer Science, и доступны лишь для тех, кто прошел основные курсы первых трех лет. На том же уровне находятся курсы по распределенным вычислениям, и некоторых могут сбить с толку.

В этой статье, разделенной на несколько частей, я в общих чертах объясню архитектуру современных версий Direct3D(10-11), а также покажу, как с помощью этого API нарисовать вот такую вот сцену кораллового рифа, основным достоинством которой является простая в реализации, но красивая и относительно убедительно выглядящая вода:

Привет, дорогой читатель!

Сегодня мы продолжим изучение графического конвейера, и я расскажу о таких замечательных вещах, как Compute Shader и Geometry Shader на примере создания системы на 1000000+ частиц, которые в свою очередь являются не точками, а квадратами (billboard quads) и имеют свою текстуру. Другими словами, мы выведем 2000000+ текстурированных треугольников при FPS > 100 (на бюджетной видеокарте GeForce 550 Ti).