Рубрика «javascript» - 508

Пример, как нарисовать красивые 3D облака используя CSS 3D Transformations

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

Для нетерпеливых: То, что получится в итоге

Вступление

В этой статье, автор попытаеся рассказать и показать как создать красивые 3D облака используя CSS3 Transformations. Автор так-же считает, что иметь базовое понятие о том, как работают эти самые CSS 3 Transformations не будет лишним. Ссылка на туториал здесь

Данный туториал разбит на несколько простых шагов. Каждый шаг основан на коде из предыдущего и содержит ссылки на примеры.

  • Создаем мир и камеру
  • Добавляем объекты в мир
  • Добавляем спрайты к облакам
  • Магия
  • Пролог

Поооеехааали!

Читать полностью »

Egghead.io — проект, созданный Джоном Линдвистом (John Lindquist), цель которого создание видео курсов. Как утверждает автор, он никогда не был доволен существующими реализациями сайтов с видео уроками. Поэтому главной его задачей стало применение лучших практик для организации и подачи обучающих видео материалов в сети.
Пока сам ресурс находится в стадии доработки и нуждается в качественном дизайне. Но уже сейчас доступен первый курс видео туториалов по AngularJS.
Проект получил множество хороших отзывов сообщества, также был упомянут в рассылке javascript weekly и на странице javascript в google+.
Читать полностью »

Предисловие

Переключаемые вкладки, аккордеоны и прочие переключатели — всё это обычное явление в современном интернете.
Есть также большое число графических JS библиотек и фраймворков, в том числе реализующих данный функционал, перечислять даже не имеет смысла.
Ниже отличия от (и отсюда же преимущества над) широко известными
Читать полностью »

в 10:20, , рубрики: javascript, node.js, yaml, метки: , ,

Для любителей красивых конфигов — вышел JS-YAML 2.0.0, с новыми плюшками:

  • ОЧЕНЬ высокая скорость (за счет полной переделки архитектуры)
  • Добавлена возможность не только читать, но и записывать YAML-файлы
  • Поддержка спецификаций YAML 1.1 проапгрейжена до YAML 1.2

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

Читать полностью »

Изометрический сапёр на LibCanvas (html5)
Этот топик будет отличаться от предыдущего топика Классический сапёр на html5 и LibCanvas. Его даже, скорее, можно назвать продолжением. И первая часть содержала пошаговую и детальную инструкцию, как заставить работать игрушку, то в этой части будет пару интересных приёмов, как её «оказуалить».

Играть в изометрический «Сапёр»


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

  • Изометрическая проекция
  • Оптимизация скорости отрисовки через грязный хак
  • Спрайтовые анимации
  • Draggable слои
  • Оптимизация обработчика мыши согласно особенностей приложения

Читать полностью »

Необходимо к проекту подключить Google Chrome Frame. Проект полностью на Canvas, огромные полотна. Всё отлично, он всё подхватывает, если бы не одна проблема. <canvas> работает ровно до того момента, пока его площадь не перевалит за 216. То, есть, скажем, холст размером 256*256 — работает без малейших нареканий. Стоит поставить размер 257*256 — отрисовка не происходит или происходит только один раз.

Проверял на IE7 и IE8.

Вот ссылка для теста: theshock.github.com/trash/chrome-frame-fail.html

Вот пример того, как оно выглядит в IE8:
Google Chrome Frame и большой Canvas

Читать полностью »

Это позволяет избежать CSRF/XSRF-атак (подделки межсайтовых запросов).

Рассмотрим следующий пример: допустим у Google есть URL вида http://gmail.com/json?action=inbox, который возвращает 50 первых сообщений вашего почтового ящика в формате JSON. Злоумышленник, чей сайт находятся на другом домене, не может выполнить AJAX запрос, обратившись по данному URL, чтобы получить данные, ввиду same origin policy (правило ограничения домена). Но ничто не мешает злоумышленнику включить вышеуказанный URL на свою страницу с помощью тега <script>.
Читать полностью »

Классический сапёр на html5 и LibCanvas

В этой статье я пошагово расскажу, как писать самый обычный, классический сапёр при помощи Html5 Canvas, AtomJS, и тайлового движка LibCanvas.
Читать полностью »

Между регулярными выражениями в JavaScript и регулярными выражениями PCRE (употребляющимися в Perl и в PHP) есть ряд различий, главнейшим из которых, вероятно, является отсутствие lookbehind (ретроспективной проверки) в JavaScript.

Естественной задачею программистов, раздражённых этими различиями, является внедрение PCRE в JavaScript.

На движке Node к концу нынешнего января Брайан Уайт (Brian White) решил эту задачу, создав модуль node-pcre, служащий обёрткою вокруг движка PCRE.

Этому можно порадоваться, и порадуемся.

Однако node-pcre,Читать полностью »

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

  • Предоставляет возможность js разработчикам быстро и бесплатно разместить все статические файлы своего проекта на общедоступный CDN хостинг.
  • Предоставляет возможность вебмастерам загружать все файлы (javascript/css/images) которые использует какой либо плагин или библиотека с быстрого CDN хостинга, сняв тем самым нагрузку на собственный сервер.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js