Как стать автором
Обновить
0
0
kalita @kalita

Пользователь

Отправить сообщение

Список лучших инструментов для web-анимации

Время на прочтение5 мин
Количество просмотров48K
image

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

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

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

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

Читать дальше →
Всего голосов 28: ↑25 и ↓3+22
Комментарии17

Tarantool: как сэкономить миллион долларов на базе данных на высоконагруженном проекте

Время на прочтение12 мин
Количество просмотров38K

Аникин Денис (danikin, Mail.Ru)


Денис Аникин

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

Базы данных – это хранилище, более структурированное, чем файл, и обладающее рядом некоторых фич, которых у файла нет.



Там можно делать запросы, там есть транзакции, индексирование, таблицы, устойчивые, более-менее надежные хранилища. На самом деле, базы данных – это более удобно, чем файлы.
Всего голосов 71: ↑66 и ↓5+61
Комментарии56

Дайджест свежих материалов из мира фронтенда за последнюю неделю №227 (4 — 11 сентября 2016)

Время на прочтение6 мин
Количество просмотров17K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Читать дальше →
Всего голосов 32: ↑29 и ↓3+26
Комментарии0

Пособие по webpack

Время на прочтение8 мин
Количество просмотров347K


Давайте сначала разберемся, зачем нужен вебпак (webpack), и какие проблемы он пытается решить, а потом научимся работать с ним. Webpack позволяет избавиться от bower и gulp/grunt в приложении, и заменить их одним инструментом. Вместо bower'а для установки и управления клиентскими зависимостями, можно использовать стандартный Node Package Manager (npm) для установки и управления всеми фронтэнд-зависимостями. Вебпак также может выполнять большинство задач grunt/gulp'а.


Bower это пакетный менеджер для клиентской части. Его можно использовать для поиска, установки, удаления компонентов на JavaScript, HTML и CSS. GruntJS это JavaScript-утилита командной строки, помогающая разработчикам автоматизировать повторяющиеся задачи. Можно считать его JavaScript-альтернативой Make или Ant. Он занимается задачами вроде минификации, компиляции, юнит-тестирования, линтинга и пр.

Допустим, мы пишем простую страницу профиля пользователя в веб-приложении. Там используется jQuery и библиотеки underscore. Один из способов — включить оба файла в HTML:

Читать дальше →
Всего голосов 42: ↑41 и ↓1+40
Комментарии13

10 особенностей Webpack

Время на прочтение8 мин
Количество просмотров78K
Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.

Читать дальше →
Всего голосов 51: ↑48 и ↓3+45
Комментарии52

Что нужно сделать перед тем, как выложить код открытого программного обеспечения

Время на прочтение3 мин
Количество просмотров28K
Выложить проект с открытым программным кодом – это больше, чем выложить код в Интернете.

Интерес к программным продуктам с открытым исходным кодом растёт последние 10 лет. Linux стоит и в стиральных машинах, и в боевых дронах. Большинство программистов не могут представить свою жизнь без широкого ассортимента бесплатных и открытых инструментов в своем распоряжении.

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

Чем вы можете помочь своему проекту, чтобы его заметили?

Читать дальше →
Всего голосов 60: ↑56 и ↓4+52
Комментарии36

Async/Await в javascript. Взгляд со стороны

Время на прочтение6 мин
Количество просмотров137K


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

Первое что хочется развеять, это распространенное заблуждение о том, что async/await — это фича ES7.

По моему мнению, использование терминов ES6 и ES7 само по себе не очень верное и может ввести разработчиков в заблуждение. После удачного релиза спецификации ES2015, называемой ES6, у многих людей сложилось ошибочное мнение, что все в нее не вошло и заполифилено через babel — это фичи ES7. Это не так. Вот список того что появится с релизом спецификации ES2016. Как видите он не такой большой и async/await в нем никак не значится.

Я хочу, чтобы мы говорили правильно. И говоря о той, или иной фиче, ссылались на конкретную спецификацию в рамках которой она описана и реализована, а не мифические ES6, ES7 … ESN.
Читать дальше →
Всего голосов 37: ↑34 и ↓3+31
Комментарии53

Пишем фоновый процесс на Apache Cordova

Время на прочтение7 мин
Количество просмотров25K

Два года назад я увлекся мобильной разработкой под Android. Тогда я писал простенькие приложения для парсинга веб-сайтов. Программный код писался на Java. Это очень мощный язык, но для написания простых легковесных приложений, не выполняющих сложных задач, его объектно-ориентированная парадигма показалась мне не слишком кстати. В то время я только начинал знакомиться с JavaScript. Изначально он привлек меня своей простотой, затем я стал открывать в нем все большие и большие возможности. Я был знаком с HTML5 и CSS3, удовольствия ради создавал симпатичные веб-страницы.

Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии13

Plotti.co: самый простой микросервис для мониторинга графиков в реальном времени

Время на прочтение2 мин
Количество просмотров18K
Привет, хабравчанин!

В этой заметке речь пойдет о Plotti.co — адски простом в использовании инструменте, который делает ровно одну вещь, но делает её быстро и хорошо. Речь пойдет об онлайн-рисовании графиков и их обновлении в реальном времени.

Создание живых графиков на лету, как мне кажется, не является той задачей, для решения которой нужно сперва прочесть 10 страниц документации, заплатить за подписку по $20 в месяц, а иногда — и то, и другое сразу. Так нельзя. Не в 2016 году.

image

В Plotti.co клиентская часть — это SVG-изображение, которое подписывается по EventSource на источник данных от сервера, и обновляет график в соответствии с ними. Интегрируется она в страницу элементарно:

<object data="http://plotti.co/U0N5G5FQigwC/plot.svg" type="image/svg+xml"></object>


Да, это всё. Здесь U0N5G5FQigwC — это хеш картинки. Чтобы картинка обновилась во всех браузерах, в которых она сейчас открыта, необходимо просто послать GET-запрос по соответствующему адресу. Например,

wget "http://plotti.co/U0N5G5FQigwC?d=1.5,3.6,7.8mbps" -O /dev/null


Читать дальше →
Всего голосов 32: ↑30 и ↓2+28
Комментарии15

Freenote – набор из 500 иконок для Keynote

Время на прочтение1 мин
Количество просмотров14K
image
Как вы пользуетесь иконками в keynote? Мало кто может похвастаться тем, что делает это без труда: иконки приходится либо качать в картинках и нудно обтравливать, либо можно скачать PNG (цвет которых невозможно поменять, и которые нельзя нормально отмасштабировать). Ну либо можно совсем заморочиться и при помощи специальных программ перегонять иконки по одной в закрытый векторный формат Keynote.

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

Страница проекта >

Скачать freenote можно тут.

Спасибо за внимание!
Всего голосов 8: ↑8 и ↓0+8
Комментарии1

PHP библиотека для интеграции с API Новой Почты

Время на прочтение8 мин
Количество просмотров30K
Привет друзья.
Хочу поделиться PHP библиотекой (SDK) для интеграции с API 2 Новой Почты (НП). Но сначала несколько слов о Новой Почте.
Новая Почта является лидером экспресс-доставки и перевозки грузов по всей Украине. В Новой Почте много услуг, что делает ее лидером на украинском рынке перевозок. Склады есть во всех городах Украины, очень быстрая курьерская служба. Основные услуги, которые компания надает: доставка и возврат грузов в розничных сетях; доставка паллетированного груза; обратная доставка,; наложенный платёж за товар; вызов машины; хранение груза; упаковка груза, доставка груза по городу и прочее. Для упрощения создание ТТН можно использовать API компании, что даст возможность оптимизировать создания ТТН.

Возможности которые дает SDK:
  • Работа с адресами
  • Работа со справочниками
  • Работа с контрагентами
  • Методы для получения печатных форм документов
  • Работа с реестрами экспресс-накладных
  • Работа с экспресс-накладными:
    • создавать экспресс-накладные
    • редактировать данные в созданных экспресс-накладные (до передачи отправления)
    • удалять/отменять созданные экспресс-накладные (до передачи отправления)
    • загружать списки документов используя фильтры
    • отслеживать статусы отправления



Читать дальше →
Всего голосов 23: ↑17 и ↓6+11
Комментарии17

Релиз FastNetMon 1.1.2 открытого решения для мониторинга DoS/DDoS атак

Время на прочтение3 мин
Количество просмотров27K
За прошедшие почти 10 месяцев с релиза 1.0.0 была очень большая работа по улучшению программы.

Из основных изменений стоит отметить следующие:
  • Возможность выявлять самые популярные виды атак: syn_flood, icmp_flood, udp_flood, ip_fragmentation_flood
  • Добавление поддержки протокола Netflow, поддерживаются 5, 9 и 10 (IPFIX) версии
  • Добавление поддержки протокола sFLOW v5, который поддерживается большинством современных сетевых коммутаторов
  • Добавлена поддержка использования netmap (поддерживаются Linux и FreeBSD, для Linux предоставляется специальная версия драйвера ixgbe: github.com/pavel-odintsov/ixgbe-linux-netmap) для захвата пакетов. Данный режим обеспечивает наивысшую производительность захвата трафика наряду с PF_RING ZC.
  • Добавлена поддержка PF_RING ZC (к сожалению, этот режим требует отдельной лицензии на библиотеку PF_RING)


Читать дальше →
Всего голосов 30: ↑29 и ↓1+28
Комментарии25

Webix 2.4. Дверь в лето

Время на прочтение2 мин
Количество просмотров15K
Webix logo

Лето набирает силу, и разработчики Webix позаботились о том, чтобы вам было чем себя занять в отпуске или на каникулах. Не так давно в их блоге появился пост о новой, за номером 2.4, версии фреймворка. Новые фичи, обновления, длинный список багфиксов. Очень увлекательно! Давайте посмотрим подробнее, что для нас приготовили.

К слову говоря, если вы слышите это название впервые и вообще не понимаете, о чем речь, здесь доступен мой небольшой Webix-туториал.
Читать дальше →
Всего голосов 14: ↑12 и ↓2+10
Комментарии11

Шпаргалка по mongodb: e-commerce, миграция, часто применяемые операции и немного о транзакциях

Время на прочтение40 мин
Количество просмотров67K

Этот пост — небольшая шпаргалка по mongodb и немного длинных запросов с парой рецептов. Иногда бывает удобно когда какие-то мелочи собраны в одном месте, надеюсь, каждый, кто интересуется mongodb, найдет для себя что-то полезное.


Не хотелось бы, чтобы пост воспринимался в ключе холиваров на тему SQL vs. NOSQL И так понятно что везде есть свои плюсы и минусы, в данном случае это просто где-то немного справки, где-то немного примеров из того, с чем приходилось сталкиваться. Примеры на mongo shell и на python.


  1. Миграция в на новые версии в mongodb
  2. Запросы сравнения и логические
  3. Полнотекстовый поиск в Mongodb, regexp, индексы и пр.
  4. Атомарные операторы (модифицирующие данные )
  5. Немного о транзакциях в Mongodb
  6. Агрегационный фреймворк и JOIN-ы в Mongodb
  7. Примеры
  8. Небольшая песочница на Python

Читать дальше
Всего голосов 47: ↑42 и ↓5+37
Комментарии14

Маршрутизация по наименьшей стоимости (LCR) в Asterisk

Время на прочтение2 мин
Количество просмотров12K
Тема актуальная. Для меня как для корпоративного телефониста лет пять-десять назад всегда была задача настроить функцию ARS на Panasonic TDA100/200/600 или LCR на LG LDK100/300. В общем, сделать так чтобы подешевле звонить было. Но времена меняются, и сейчас у многих компаний используется Asterisk, а я уже не настраиваю УПАТС Panasonic, LG и прочие.

В Астериске, всем известно, вся маршрутизация делается в диалплане. Но если у оператора много направлений и цена на каждое из них различна, то в диалплане получаются портянки на несколько страниц. Решения разные: кто-то разбивает по разным файлам диалплана, использует макросы, кто-то подключает к работе БД, кто-то выносит на отдельный сервис.

Я хочу поделиться своим решением: вынести поиск оператора с наименьшей стоимостью заданного направления в стороннее приложение на node.js, с которым Астериск взаимодействует посредством AGI.


Читать дальше →
Всего голосов 12: ↑12 и ↓0+12
Комментарии10

Загрузка и хранение фотографий в Web приложениях

Время на прочтение4 мин
Количество просмотров114K

Почему это важно?


На современных web сайтах объем картинок может составлять от 30% до 70% всего размера страницы. Например, объем изображений на Хабре обычно составляет несколько мегабайт.

размер фоток на странице

Большинство изображений в Web'e — это фотографии. Профильные фото в соц. сетях, альбом с телефона, профессиональные снимки и т.п. Правильная стратегия и инструменты для работы с фотографиями позволят сделать сайт быстрым для посетителей.
Читать дальше →
Всего голосов 35: ↑31 и ↓4+27
Комментарии83

Лекции Технопарка. 3 семестр. Проектирование высоконагруженных систем

Время на прочтение3 мин
Количество просмотров73K


И снова в эфире наша постоянная рубрика «Лекции Технопарка». На этот раз предлагаем вам ознакомиться с материалами курса «Проектирование высоконагруженных систем». Цель курса — получение студентами навыков проектирования высокоэффективных программных систем.
Читать дальше →
Всего голосов 56: ↑53 и ↓3+50
Комментарии5

Приятная сборка frontend проекта

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

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

UPD (13 марта 2015): Заменил несколько плагинов на более актуальные + решил проблему с импортом CSS файлов внутрь SCSS

Читать дальше →
Всего голосов 61: ↑53 и ↓8+45
Комментарии119

Подробно о внутренней кухне AngularJS

Время на прочтение9 мин
Количество просмотров48K
У фреймворка AngularJS есть несколько интересных решений в коде. Сегодня мы рассмотрим два из них – как работают области видимости и директивы.

Первое, чему обучают всех в AngularJS – директивы должны взаимодействовать с DOM. А больше всего новичка запутывает процесс взаимодействия между областями видимости, директивами и контроллерами. В этой статье мы рассмотрим подробности работы областей видимости и жизненный цикл Angular-приложения.

Если в следующей картинке вам что-то непонятно – эта статья для вас.

image

(В статье рассматривается AngularJS 1.3.0)
Читать дальше →
Всего голосов 38: ↑33 и ↓5+28
Комментарии4

Konva.js — HTML5 2d canvas framework

Время на прочтение5 мин
Количество просмотров56K
image

Приветствую. Представляю сообществу проект Konva.js.

Konva.js — это фреймворк, который позволяет работать c canvas 2d в объектном стиле с поддержкой событий.

Кратко список особенностей выглядит так:
  1. Объектное API
  2. Вложенные объекты и «всплытие» событий
  3. Поддержка нескольких слоёв (нескольких canvas элементов)
  4. Кэширование объектов
  5. Поддержка анимаций
  6. Настраиваемый drag&drop
  7. Фильтры
  8. Готовые к использованию объекты, включая прямоугольник, круг, изображение, текст, линия, SVG путь, ..
  9. Простое создание собственных фигур
  10. Событийная архитектура, которая позволяет разработчикам подписываться на события изменений аттрибутов, отрисовки, и так далее
  11. Сериализация и десериализация
  12. Продвинутый поиск с помощью селекторов stage.get('#foo') и layer.get('.bar')
  13. Десктоп и мобильные события
  14. Встроенная подержка HDPI устройств
  15. и еще много разного


Далее подробней рассмотрим возможности фреймворка с примерами кода.
Читать дальше →
Всего голосов 36: ↑33 и ↓3+30
Комментарии37
1
23 ...

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность