Pull to refresh
13
0
Евгений @Teadon

User

Send message

Пособие по webpack

Reading time 8 min
Views 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:

Читать дальше →
Total votes 42: ↑41 and ↓1 +40
Comments 13

Руководство по работе с Redux

Reading time 80 min
Views 283K
Сегодня Redux — это одно из наиболее интересных явлений мира JavaScript. Он выделяется из сотни библиотек и фреймворков тем, что грамотно решает множество разных вопросов путем введения простой и предсказуемой модели состояний, уклоне на функциональное программирование и неизменяемые данные, предоставления компактного API. Что ещё нужно для счастья? Redux — библиотека очень маленькая, и выучить её API не сложно. Но у многих людей происходит своеобразный разрыв шаблона — небольшое количество компонентов и добровольные ограничения чистых функций и неизменяемых данных могут показаться неоправданным принуждением. Каким именно образом работать в таких условиях?

В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!
Читать дальше →
Total votes 65: ↑59 and ↓6 +53
Comments 51

Этажи: 3D-навигация на WebGL в 2gis.ru

Reading time 11 min
Views 29K


В 2014 году 2ГИС выпустил Этажи — это фича, позволяющая посмотреть схему этажей здания и найти на ней нужную организацию. Долгое время она существовала только в мобильных приложениях 2ГИС. Теперь эта возможность появилась и в онлайн-версии.

Этажи для веба сделаны на технологии WebGL: они полностью трёхмерные, их можно крутить и приближать. Это первый проект компании, сделанный на этой технологии, и мы хотели бы поделиться опытом реализации.
Читать дальше →
Total votes 47: ↑46 and ↓1 +45
Comments 23

Несколько дельных советов по CSS

Reading time 4 min
Views 55K

CSS Protips

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

От переводчика

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



Cодержание


  1. Используем псевдо-класс :not для задания рамки навигации
  2. Добавляем межстрочный интервал элементу body
  3. Центрируем по вертикали все что угодно
  4. Правильно разделяем запятыми элементы списков
  5. Отрицательный порядковый номер в nth-child
  6. Используем SVG-логотипы
  7. Аксиоматический CSS
  8. Максимальная высота у CSS-слайдера
  9. Наследуем box-sizing
  10. Одинаковая ширина ячейки таблицы
  11. Динамические внешние отступы при помощи flexbox
  12. Используем селектор атрибутов пустых ссылок
  13. Стили по умолчанию для обычных ссылок
Читать дальше →
Total votes 26: ↑21 and ↓5 +16
Comments 28

Лучшие бесплатные коллекции векторных иконок

Reading time 2 min
Views 332K
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

Responsive Icons (100 иконок, PSD, AI, EPS, SVG)


Responsive Icons

Читать дальше →
Total votes 91: ↑82 and ↓9 +73
Comments 23

Управление серверами VDS Selectel через Ansible

Reading time 4 min
Views 9.3K


Проект VDS Selectel был запущен всего полгода назад, и сейчас он очень активно развивается. Интенсивное развитие во многом стало возможным благодаря сообществу: огромный вклад в развитие сервиса вносят пользователи, которые создают библиотеки для работы с API и делятся ими с широкой аудиторией на GitHub.

Со своей стороны мы хотели бы предложить сообществу еще один полезный инструмент: модуль для системы управления конфигурациями Ansible, с помощью которого можно развертывать виртуальную инфраструктуру на базе VDS Selectel.
Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Comments 7

Принципы дизайна страниц оплаты для интернет-магазинов

Reading time 14 min
Views 21K
Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.


Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

Основной вопрос заключается в том, почему пользователи так часто и массово покидают свою корзину, не закончив оформление заказа? Причина заключена в какой-то фундаментальной ошибке дизайнеров, создающих интернет-магазины? А быть может есть какие-то формальные правила, которые усложняют жизнь простым пользователям и мешают им покупать продукты? Существует ли какая-то возможность улучшить ситуацию и повысить конверсию электронных магазинов?
Читать дальше →
Total votes 174: ↑168 and ↓6 +162
Comments 58

Принципы дизайна веб-форм для мобильных устройств

Reading time 10 min
Views 14K
Представляю вашему вниманию перевод статьи "Mobile Form Design Strategies" от Chui Chui Tan. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания UX Booth.


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

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

Читать дальше →
Total votes 112: ↑110 and ↓2 +108
Comments 12

Большой обзор красивых многоуровневых меню с codepen

Reading time 4 min
Views 194K


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

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
Читать дальше →
Total votes 22: ↑19 and ↓3 +16
Comments 33

Сравнение css-фреймворков/библиотек на живом примере. Часть 1

Reading time 5 min
Views 36K
сравнение css-фреймворков на примере

Пролог


В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.

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

Читать дальше →
Total votes 12: ↑8 and ↓4 +4
Comments 26

Сравнение аудитории Хабрахабра, Гиктаймса и Мегамозга

Reading time 10 min
Views 34K
Привет, Хабр!
Год назад я писал статью о том, кто и как подписан на Хабрахабр в соцсети Вконтакте. Буквально в первых же комментариях к тому посту было выражено пожелание увидеть разницу между подписчиками Geektimes и собственно Хабра. Прошел всего год и я, поборов свою лень, это желание исполняю.

На самом деле у моей медлительности были и объективные причины – в январе запустился Мегамозг, и стало очевидным, что сравнение надо делать по всем трем сайтам. А для этого необходимо было подождать хотя бы полгода с момента окончательного разделения Хабра.

В этой статье не будет очередных статистических выкладок о том, в какой день недели пост на Хабре получает наилучший рейтинг, а в какой собирает мало комментов — про это уже все сказано задолго до меня. Зато под катом мы попытаемся понять, как отличаются аудитории «хабровых» пабликов по различным параметрам (от пола до отношения к вредным привычкам), и есть ли связь между поведением пользователей в VK и на самих сайтах.


Читать дальше →
Total votes 47: ↑41 and ↓6 +35
Comments 121

«Стратегия голубого океана». Книга за 15 минут

Reading time 13 min
Views 165K
image

После публикации нашего первого поста нас поздравили с выходом в «алый океан» рвущих друг друга на части конкурентов (акул бизнеса?).



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


Итак…


Читать дальше →
Total votes 16: ↑16 and ↓0 +16
Comments 7

Облачные IDE для веб-программистов

Reading time 8 min
Views 73K


Здравствуйте, уважаемые коллеги и друзья! Меня зовут Евгений, в начале данной статьи я расскажу Вам о 4-ех облачных IDE для веб-разработчиков, а потом о новой online среде разработки, цель которой объединить возможности самых мощных IDE (например: webstorm), простой дизайн Sublime Text и новые решения.
Читать дальше →
Total votes 49: ↑35 and ↓14 +21
Comments 98

Information

Rating
Does not participate
Location
Россия
Registered
Activity