Pull to refresh
14
0
Алексей Козулин @jinxal

User

Send message

Самые нужные плагины для Gulp

Reading time6 min
Views162K


Это пост можно сказать является дубликатом моей предыдущей подборки “Самые нужные плагины для Grunt”. Дело в том, что спустя много часов поиска я не нашел крутых плагинов для Gulp, которых нет для Grunt за исключением пары весьма специфичных утилит. Всё как раз наоборот, но проигнорировать множество пользователей Gulp я не мог. Все недостающие плагины я выделил, потому что Gulp умеет использовать их из Grunt, как и Grunt из Gulp.

Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.

У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Gulp. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Gulp найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.

А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.
Читать дальше →
Total votes 54: ↑46 and ↓8+38
Comments30

Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса

Reading time29 min
Views107K
На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.

БЭМ упрощает разработку сайтов, которые нужно быстро создавать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться.



В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.

На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.
Читать дальше →
Total votes 96: ↑79 and ↓17+62
Comments37

300 потрясающих бесплатных сервисов

Reading time11 min
Views1.6M


Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly.com Domain: Конструктор веб-сайтов.
  • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
  • Withoomph: Мгновенное создание логотипов (англ.).
  • Hipster Logo Generator: Генератор хипстерских логотипов.
  • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
  • Invoice to me: Бесплатный генератор счета.
  • Free Invoice Generator: Альтернативный бесплатный генератор счета.
  • Slimvoice: Невероятно простой счет.

Читать дальше →
Total votes 341: ↑325 and ↓16+309
Comments107

Основы создания 2D персонажа в Unity 3D 4.3. Часть 3: прыжки (и падения)

Reading time8 min
Views155K
Часть 1: заготовка персонажа и анимация покоя
Часть 2: бегущий персонаж
Часть 3: прыжки (и падения)

Всем привет. Продолжаем серию уроков по созданию 2D персонажа. В предыдущих двух частях мы сделали персонажа, который может находиться в двух состояниях: покой и бег вправо-влево. Возможно, для очень простой игры этого будет достаточно. Но мы не будем останавливаться на достигнутом и сегодня научим нашего персонажа прыгать.
Читать дальше →
Total votes 38: ↑34 and ↓4+30
Comments16

10 сайтов для поиска работы в Европе

Reading time2 min
Views325K
Поиск работы – задача не из простых, особенно в текущих неблагоприятных экономических условиях. Европейский ресурс Tech.eu в честь запуска своего сервиса по поиску работы подготовил список из десяти сайтов, которые помогут вам подыскать себе место под европейским солнцем, если вы, по какой-либо причине, желаете уехать на заработки в ЕС.
Завожу трактор
Total votes 26: ↑23 and ↓3+20
Comments35

Суперсилы Chrome DevTools

Reading time6 min
Views70K


Я работаю в команде Онлайн. Мы делаем веб-версию справочника 2ГИС. Это долгоживущий активно развивающийся проект, в котором JavaScript используется как основной язык как на клиенте, так и на сервере.

Важное место в работе занимают инструменты анализа и отладки приложения. Популярные JavaScript фреймворки как правило обладают собственным инструментарием, заточенным под конкретную идеологию. Наша ситуация осложняется тем, что под капотом Онлайна гудит фреймворк собственного производства — Slot — также находящийся в стадии активной доработки.

В этой статье я расскажу, как мы используем стандартные браузерные инструменты разработчика для эффективной отладки и исследования. Эти рецепты направлены в первую очередь на изучение приложения снаружи-внутрь, поэтому подойдут для любого проекта.
Читать дальше →
Total votes 83: ↑78 and ↓5+73
Comments13

Семь принципов создания современных веб-приложений

Reading time19 min
Views188K
Эта статья основана на моей презентации с конференции BrazilJS в августе 2014 года. Она базируется на идеях, о которых я писал в блоге недавно, в основном, в связи с UX и производительностью.

Я хочу представить 7 действенных принципов для веб-сайтов, которые хотят применить JavaScript для управления UI. Эти принципы являются результатом моей работы как веб-дизайнера, но также как давнего пользователя WWW.

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

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

  • Должен ли JavaScript использоваться как замена функциям браузера: история, навигация, рендеринг?
  • Умирает ли бэкенд? Нужно ли вообще рендерить HTML?
  • Правда ли, что будущее за приложениями на одной странице (Single Page Applications, SPA)?
  • Должен ли JS генерировать страницы на веб-сайте и рендерить страницы в веб-приложениях?
  • Нужно ли использовать техники вроде PJAX или TurboLinks?
  • Каково точное отличие между веб-сайтом и веб-приложением? Должно ли остаться что-то одно?
Читать дальше →
Total votes 108: ↑99 and ↓9+90
Comments33

Используем Google Voice Search в своем приложении .NET

Reading time3 min
Views130K


Функция распознавания речи с некоторого времени доступна в браузере Google Chrome. Посмотреть как это выглядит можно, например, здесь.

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

Как это часто бывает, все уже сделано за нас в этой статье. Все оказывается очень просто, необходимо сделать POST запрос на адрес www.google.com/speech-api/v1/recognize со звуковыми данными в формате FLAC или Speex. Реализуем демонстрацию распознавания WAVE-файлов с помощью C#.

Читать далее
Total votes 80: ↑72 and ↓8+64
Comments25

Хабрахабр: немного статистики и альтернативный топ топиков

Reading time2 min
Views1.4K
Я заметил, что текущий топ хабрахабра содержит малое количество полезных материалов. Вообще, как оценивают материал? Люди ставлят плюс/минус, потому что:
  1. Хотят поощрить автора за написание хороших топиков
  2. Хотят отблагодарить автора за написание сиюминутной новости/интересной картинки
  3. Хотят выплеснуть свое настроение на чужом топике
Вполне очевидно, что такая система голосования не всегда будет поощрять хорошие топики и не всегда в топе будут только хорошие и полезные статьи.
Но у каждой статьи есть еще два иных показателя: количество человек, занесших статью в избранное (коротко — фавориты) и количество комментариев. Очевидно, что первый показатель определяет полезность статьи, а второй — насколько тема затронула умы хабралюдей.
Мне показалось, что альтернативные варианты топа будут очень интересны остальным людям. Вообще, было бы хорошо, если бы такую фичу сделали, разработчики, но…

Итак, я проанализировал 72% топиков хабра (остальные были закрыты/недоступны/удалены) и составил альтернативный топ. Под катом парочка рисунков и ссылки на страницы альтернативного топа.
Читать дальше →
Total votes 146: ↑126 and ↓20+106
Comments36

Переезд IT-шника в Германию: от А до Я

Reading time20 min
Views99K
Привет.

Germany Blue CardВ этом посте я хочу подробно рассказать о моём опыте переезда на работу PHP-разработчиком в Германию — от момента, когда есть просто желание переехать, но не знаешь что и как делать, до момента, когда уже переехал, вселился в квартиру и получил вид на жительство. Кроме того, в конце поста я приведу немного полезной информации и ссылок по переезду в некоторые другие страны.

Ещё с универа я понимал, что в Украине ловить нечего и надо валить. В течение нескольких лет я исследовал вопрос эмиграции: читал блоги, форумы, сообщества, общался с друзьями и знакомыми, которые могли мне рассказать что-то новое и, естественно, за это время, учитывая и сам переезд, у меня накопился определённый багаж информации, которым и хочется поделиться.

Итак, если вы имеете IT-шное образование и вам интересна идея сваливания из печальной пост-совковой реальности, прошу под кат.
Читать дальше →
Total votes 211: ↑189 and ↓22+167
Comments163

Что, где, куда: обзор туристических блогосервисов

Reading time9 min
Views6.2K
Лето уже в самом разгаре, но в отпуска успели выбраться далеко не все. Информации море, и сориентироваться с ходу в ней может быть нелегко.

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

В обзор попали:

turometr.ru/
tourbina.ru/
tourout.ru/
flagatrip.ru/
geoid.ru/
tripster.ru/
venividi.ru/
yapiligrim.ru/

Читать дальше →
Total votes 79: ↑62 and ↓17+45
Comments44

Как правильно покупать товары на Ebay

Reading time5 min
Views183K
image
Тема Ebay в связи с его русификацией становится очень актуальной, поэтому решил поделиться с хабрасообществом несколькими советами из области как правильно покупать товары на Ebay, чтобы не нарватся на мошенников и сделать правильную покупку. Большая часть описанного основана на личном опыте.
Читаем далее
Total votes 187: ↑166 and ↓21+145
Comments100

Продвижение интернет-магазина в поисковиках

Reading time4 min
Views16K
Предлагаем вашему вниманию 7 основных шагов, которые нужно предпринять для того, чтобы получить поток покупателей для вашего магазина из поисковых систем.

Шаги касаются как оптимизации сайта магазина, так и внешних факторов.

Шаг 1. Оптимизируем ссылки


Необходимо закрывать от индексации ненужные для поисковиков страницы:
  1. корзина интернет-магазина
  2. страница регистрации и входа в бэкофис магазина
  3. другие служебные страницы

Закрывать их можно лучше всего путём добавления к ссылкам на эти страницы параметра: rel=''nofollow''
Читать дальше →
Total votes 13: ↑7 and ↓6+1
Comments13

Руководство по установке и настройке OpenVPN

Reading time34 min
Views1.5M



Когда у нас появились сотрудники, работающие удаленно, пришлось думать над тем, как обеспечить им защищенный доступ к нашим хостинговым серверам, виртуальным выделенным серверам разработчиков Virtual Dedicated Server (VDS), сайтам обеспечения и сопровождения разработки и к другим ресурсам.



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



Выход нашелся довольно быстро — это использование технологии виртуальных частных сетей Virtual Private Network (VPN) и ее свободной реализации OpenVPN. Эта реализация доступна практически для всех распространенных платформ, в том числе для планшетов и смартфонов. История развития OpenVPN насчитывает уже 12 лет (компания OpenVPN Technologies, Inc. была создана Francis Dinha и James Yona в 2002 году), так что это надежное и проверенное временем решение.



В нашей компании сеть VPN позволила предоставить защищенный доступ сотрудников к VDS, играющей роль сервера OpenVPN. И уже для фиксированного IP этого сервера был разрешен доступ к другим ресурсам компании. Попутно на сервере OpenVPN был установлен прокси Squid, что решило все проблемы доступа сотрудников с динамическими IP к защищенным ресурсам компании.



Теме OpenVPN посвящены многочисленные статьи и сообщения на форумах. Тем не менее, нужную информацию мне пришлось собирать по частям из разных мест. Попутно приходилось разбираться с многочисленными терминами и технологиями. В качестве серверов OpenVPN были использованы VDS на базе FreeBSD и Debian Linux, в качестве клиентов — рабочие станции FreeBSD, Debian Linux, Ubuntu и Microsoft Windows.



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


Читать дальше →
Total votes 128: ↑115 and ↓13+102
Comments97

Собеседование на должность JavaScript разработчика

Reading time4 min
Views287K


Недавно прочитал неплохой пост на тему поиска работы QA и подумал, что похожий пост был бы полезен для JavaScript разработчиков. В конечном счёте, веб движется вперед семимильными шагами, и соискателей на позицию JavaScript программиста хоть отбавляй (разумеется, хороших всегда меньше).
Читать дальше →
Total votes 126: ↑115 and ↓11+104
Comments313

Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах

Reading time2 min
Views92K


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

Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!
Вперед!
Total votes 143: ↑122 and ↓21+101
Comments75

Wi-Fi сети: проникновение и защита. 3) WPA. OpenCL/CUDA. Статистика подбора

Reading time24 min
Views362K


Баста карапузики, кончилися танцы.

В предыдущей части мы детально рассмотрели «читерские» приёмы обхода «защит» (скрытие SSID, MAC-фильтрация) и защит (WPS) беспроводных сетей. И хотя работает это в половине случаев, а иногда и чаще — когда-то игры заканчиваются и приходится браться за тяжёлую артиллерию. Вот тут-то между вашей личной жизнью и взломщиком и оказывается самое слабое звено: пароль от WPA-сети.

В статье будет показан перехват рукопожатия клиент-точка доступа, перебор паролей как с помощью ЦП, так и ГП, а кроме этого — сводная статистика по скоростям на обычных одиночных системах, кластерах EC2 и данные по разным типам современных GPU. Почти все они подкреплены моими собственным опытом.

К концу статьи вы поймёте, почему ленивый 20-значный пароль из букв a-z на пару солнц более стоек, чем зубодробительный 8-значный, даже использующий все 256 значений диапазона.

Оглавление:
1) Матчасть
2) Kali. Скрытие SSID. MAC-фильтрация. WPS
3) WPA. OpenCL/CUDA. Статистика подбора
По традиции, под катом ещё 15 страниц
Total votes 168: ↑167 and ↓1+166
Comments57

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity