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

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

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

Туториал по Jade для начинающих

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


Jade — это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js. Проще говоря, Jade — это именно то средство, которое предоставляет вам возможность написания разметки совершенно по новому, с целым рядом преимуществ по сравнению с обычным HTML.
Читать дальше →
Всего голосов 34: ↑27 и ↓7 +20
Комментарии 74

Pomp — метафреймворк для парсинга сайтов

Время на прочтение 3 мин
Количество просмотров 16K
С поддержкой asyncio и вдохновленный Scrapy.

Зачем еще один?


В первую очередь как инструмент для сбора данных, применяемый в моем хобби проекте, который не давил бы своей мощью, сложностью и наследием. И да, кто же будет сознательно начинать что-то новое на python2.x?

В итоге появилось идея сделать простой фреймворк для современной экосистемы python3.x, но такой же элегантный как Scrapy.

Под катом обзорная статья о Pomp в стиле FAQ.
Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Комментарии 15

Верстка для самых маленьких. Верстаем страницу по БЭМу

Время на прочтение 14 мин
Количество просмотров 386K
Недавно хабраюзер Mirantus написал статью «Как сверстать веб-страницу», в которой рассказывал о том, как же сверстать веб-страничку. В его статье было подробно рассмотрено, как выделить отдельные элементы из заданного шаблона, подобрать шрифты и т.п. Однако его подход к написанию, собственно, веб-страницы мне показался не очень хорошим, о чем я написал в комментариях.

В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

  • BEM
  • Собственно пример — как сверстать страницу

Читать дальше →
Всего голосов 154: ↑133 и ↓21 +112
Комментарии 172

Как выбрать фреймворк для frontend-разработки

Время на прочтение 6 мин
Количество просмотров 116K
Предлагаю вашему вниманию перевод статьи How To Pick a Frontend Web Framework c сайта top.fse.guru.

Привет, приятель!

Ниже ты найдешь большой список компоновки инструментов и фреймворков. Не волнуйся! Ты можешь выбрать один, в котором точно уверен, или проигнорировать все и придумать свой вариант.

Данная статья предназначена для того, что бы помочь тебе узнать и упорядочить список инструментов которые используются в сфере frontend-разработки. А так же, это неплохой список, из которого ты можешь выбрать то, что тебе придется по душе.
Читать дальше →
Всего голосов 44: ↑32 и ↓12 +20
Комментарии 62

Практикум AngularJS — разработка административной панели

Время на прочтение 12 мин
Количество просмотров 137K
При создании сайтов часто возникает задача создания админки для редактирования контента. Задача, в общем, тривиальная, но сделать удобную админку не так-то просто.

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

Всем известный jQuery-плагин tablesorter с tablesorterPager-ом и менее известный, но гораздо более функциональный DataTables хороши, но обладают некоторыми недостатками. Главный из них — сложность динамического добавления новых строк в таблицу (после добавления строки в таблицу, новая строка потеряется при следующем вызове сортировки). tablesorter вообще не даёт средств для добавления строки в свой кэш, DataTables предоставляет широкое и функциональное API для управления внутренним представлением таблицы, но это API довольно многословно и не очень гибко.

Хочу предоставить общественности реализацию админки на относительно новой javascript-фреймворке AngularJS. Будет создана страничка для редактирования списка вопросов, разбитых по категориям и отвечающим. В статье нет сравнения с другими подобными фреймворками, но нет и простого повторения официальной документации, я постараюсь поделиться своим опытом в использовании фреймворка и расскажу о нескольких интересных приёмах работы с ним.

Сразу приведу, что получится в итоге (кликабельно):


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

AngularJS — фреймворк для динамических веб-приложений от Google

Время на прочтение 6 мин
Количество просмотров 138K
AngularJS создан для тех разработчиков, которые считают, что декларативный стиль лучше подходит для создания UI, а императивный — для написания бизнес-логики.

Дзен Angular


  • Хорошо отделять манипуляцию DOM-ом от логики работы приложения. Это существенно улучшает тестируемость кода.
  • Хорошо считать, что автоматизированное тестирование приложения настолько же важно, насколько и написание самого приложения. Тестируемость очень сильно зависит от того, как структурирован код.
  • Хорошо отделять разработку клиентской части от серверной. Это позволяет вести разработку параллельно и улучшает повторное использование на обеих сторонах.
  • Хорошо, когда фреймворк ведет разработчика по всему циклу разработки приложения: от проектирования UI через написание бизнес-логики к тестированию.
  • Хорошо, когда распространенные задачи становятся тривиальными, а сложные — упрощаются.


AngularJS представляет собой комплексный фреймворк. В стандартной поставке он предоставляет следующие возможности:
  • Все, что вам нужно для создания CRUD-приложений: data-binding, базовые директивы для шаблонов, валидация форм, роутинг, deep linking, повторное использование компонентов, dependency injection, инструменты для взаимодействия с серверными (RESTful) источниками данных.
  • Все, что вам нужно для тестирования: средства для модульного тестирование, end-to-end тестирования, mock-и.
  • Шаблон типового приложения, включающего в себя структуру каталогов и тестовые скрипты.


AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.

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

Коллекция практических советов и заметок по вёрстке

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

CSS Refresher


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

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


Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание


  1. Позиционирование (position)
  2. Отображение элемента в документе (display)
  3. Плавающие элементы (float)
  4. CSS селекторы
  5. Эффективные селекторы
  6. Переотрисовка и перерасчет
  7. CSS3 свойства
  8. CSS3 медиа-запросы
  9. Адаптивный web-дизайн
  10. CSS3 переходы
  11. CSS3 анимации
  12. Масштабируемая векторная графика (SVG)
  13. CSS спрайты
  14. Вертикальное выравнивание
  15. Известные проблемы

Читать дальше →
Всего голосов 40: ↑37 и ↓3 +34
Комментарии 33

Создание веб-сайта. Курс молодого бойца

Время на прочтение 24 мин
Количество просмотров 810K
Как-то меня попросили провести небольшой семинар в лицее, где я когда-то учился, по созданию веб-сайта. В процессе написания речи я подумал, что она может вылиться в материал, который, возможно, будет полезен многим начинающим в области веб-дизайна, вёрстки веб-страниц и пр. Я не претендую на истину в первой инстанции и всё изложенное носит чисто личностный взгляд на работу с дизайном и кодом. Статья даёт поверхностный взгляд на понятия и средства, которые, на мой взгляд, могут стать неплохим стартом для того, кто готов идти дальше.
Читать дальше →
Всего голосов 86: ↑77 и ↓9 +68
Комментарии 46

Зачем нужны plain-text письма, и как их нужно делать: 6 советов

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


В последние годы маркетологи многих компаний пристрастились к использованию HTML при создании своих почтовых рассылок. При этом многие специалисты забывают, что простые текстовые письма иногда могут работать даже лучше красиво сверстанных шаблонов. Сегодня мы поговорим о плюсах использования plain-text писем, а также рассмотрим несколько советов экспертов, которые помогут избежать ошибок при работе с этим инструментом.
Читать дальше →
Всего голосов 35: ↑29 и ↓6 +23
Комментарии 16

Как составить свой скрипт продаж. Как обойти секретаря

Время на прочтение 9 мин
Количество просмотров 16K
image
Именно в этом отделе продаж всё начиналось.

Обширный гид по телефонным продажам для b2b, часть 3 из 4.
В этой части: я расскажу, как сформировать хороший скрипт продаж для себя, а также какие хитрости использовать, чтобы обойти секретаря и связаться непосредственно с руководителем. Ссылки на предыдущие части указаны вначале статьи.
Читать дальше →
Всего голосов 11: ↑10 и ↓1 +9
Комментарии 5

Drupal 8. Обучающие материалы и не только

Время на прочтение 5 мин
Количество просмотров 37K
Друзья, вы мне, конечно [1] [2], не поверите, но вышел Drupal 8. В последнее время поступает достаточно много вопросов на тему того, что почитать, посмотреть, послушать для изучения восьмерки. Очень многие чувствуют себя не вполне уверенно и задаются вопросами: переходить на неё или не переходить, жив Drupal или нет, и всем прочим.

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

image

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

Генерируем PDF-файлы в веб-проекте: программа wkhtmltopdf

Время на прочтение 4 мин
Количество просмотров 34K
При работе над веб-проектом иногда возникает необходимость генерировать PDF-файлы с большими таблицами: прайс-листы на тысячи позиций. Нашлись разные библиотеки для генерации PDF-файла из PHP-скрипта:

• FPDF
• MPDF — основанная на FPDF библиотека, позволяющая генерировать pdf-файл из любого html-кода
• DOMPDF
• TCPDF

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

Дальнейший поиск помог найти программу wkhtmltopdf. Сайт программы: http://wkhtmltopdf.org.
Читать дальше →
Всего голосов 15: ↑10 и ↓5 +5
Комментарии 31

Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов

Время на прочтение 14 мин
Количество просмотров 21K
Предлагаю вашему вниманию перевод статьи «Responsive Upscaling: Large-Screen E-Commerce Design» автора Christian Holst.

Революция в адаптивном дизайне не за горами (если уже не случилась!), и даже не смотря на то, что интернет-магазины не взялись на адаптивный дизайн столь же агрессивно, как другие индустрии, все же это становится популярным.

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

  1. Только 18% из 50 ведущих американских интернет-магазинов, которые мы тестировали ранее, в этом году адаптировали свой дизайн под большие экраны (в то время как у 94% этих сайтов дизайн адаптирован под мобильные устройства).
  2. Почти три четверти электронных продаж все ещё совершаются на ПК, а не на мобильных устройствах (смотрите здесь, здесь и здесь).
  3. Около трети этих пользователей приходят с экранов шире 1350 пикселей (смотрите здесь, здесь и здесь). (Примечание: Разумеется, есть разница между шириной экрана и шириной браузерного окна — реальное число пользователей с браузером указанной ширины будет ниже. Мы рекомендуем вам отслеживать размеры браузерного окна в вашей веб-статистике для более полной картины того, насколько значителен этот сегмент для вашего сайта.
Читать дальше →
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 2

15 тривиальных фактов о правильной работе с протоколом HTTP

Время на прочтение 7 мин
Количество просмотров 231K
Внимание! Реклама! Пост оплачен Капитаном Очевидность!

Ниже под катом вы найдёте 15 пунктов, описывающих правильную организацию ресурсов, доступных по протоколу HTTP — веб-сайтов, «ручек» бэкенда, API и прочая. «Правильный» здесь означает «соответствующий рекомендациям и спецификациям». Большая часть ниженаписанного почти дословно переведена из официальных стандартов, рекомендаций и best practices от IETF и W3C.



Вы не найдёте здесь абсолютно ничего неочевидного. Нет, серьёзно, каждый веб-разработчик теоретически эти 15 пунктов должен освоить где-то в районе junior developer-а и/или второго-третьего курса университета.

Однако на практике оказывается, что великое множество веб-разработчиков эти азы таки не усвоило. Читаешь документацию к иным API и рыдаешь. Уверен, что каждый читатель таки найдёт в этом списке что-то новое для себя.
Читать дальше →
Всего голосов 191: ↑186 и ↓5 +181
Комментарии 120

10 правил хорошего тона при описании багов

Время на прочтение 6 мин
Количество просмотров 194K
Здравствуйте, меня зовут Наталья, я инженер по тестированию компании Docsvision.
Иногда, когда я просматриваю ошибки, записанные новенькими (а иногда и старенькими) тестировщиками, рука машинально тянется к лицу. В голове возникает только одна мысль:



«Что? Что я сейчас прочитала?»

В интернете много информации о том, ЧТО обязательно должно присутствовать в баг-репорте. А я решила поделиться с вами своими мыслями о том, КАК нужно писать баг-репорт, чтобы было понятно, о чём вы пишете.
В первую очередь, я писала это для инженеров по тестированию и инженеров технической поддержки, которые передают нам баги, присланные заказчиками. Также моя статья может помочь сформировать описание возникшей проблемы при обращении пользователя в техподдержку: корректное описание позволяет без дополнительных вопросов быстрее обработать инцидент.
Вообще её может быть полезно почитать всем членам команды разработки ПО, которые фиксируют своё общение в багтрекинговой системе.
Читать дальше →
Всего голосов 56: ↑36 и ↓20 +16
Комментарии 65

Адаптивные сайты, или Как добиться благосклонности Google

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


В конце июня в Москве прошла конференция Bitrix Summer Fest, на которой было представлено много интересных и полезных докладов. Чтобы этот кладезь мудрости не пропадал, мы будем публиковать в нашем блоге материалы по выступлениям с конференции. И начать мы решили с доклада Антона Герасимюка, посвящённого оптимизации скорости загрузки страниц.

21 апреля Google поменял алгоритм ранжирования поисковой выдачи для мобильных устройств. Многие владельцы сайтов и администраторы получили письма, в которых сообщалось, что «ваш сайт не оптимизирован под мобильные устройства». И после 21 апреля на всех сайтах, которые перестали удовлетворять новым критериями, стал падать поисковый трафик с Google.
Читать дальше →
Всего голосов 25: ↑22 и ↓3 +19
Комментарии 28

Дайджест интересных материалов из мира Drupal #11

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

Это одиннадцатый выпуск Drupal-дайджеста на хабре. Мы собираем полезные статьи и свежие новости из мира Drupal и делимся с вами раз в месяц.



По-русски


Наша любимая рубрика — друпал в рунете.

  1. «Вставка изображений в CKEditor» — подход, который использует @xandeadx, постоянный участник нашего дайджеста.
  2. silrage написал на хабр, как можно использовать Rules, один из столпов друпала, для ограничения доступа к материалу. И хотя поначалу Rules может показаться сложным и громоздким решением, впоследствии изучение этого инструмента окупится сполна.
  3. Автор блога tlito.ru изучает друпал в прямом эфире, записывая свои наблюдения в блог. Вот пара заметок для примера: блокирование пользователей по IP, перемещение модулей в папку sites/all/modules.
  4. Андрей Малеев написал подробно о токенах: зачем нужны, как использовать и расширять.
  5. Разработчики dru.io ведут всю разработку сайта сообщества открыто на гитхабе и делятся своим опытом с нами. Александр Дубовской про то, как деплоить Views без Features.
  6. Там же Chi анонсировал легкий генератор кода для Drupal.
  7. И последнее с Dru.io на сегодня: Drupal foreign key на уровне БД.
  8. Вышла вторая часть большого сравнения производительности MySQL и PostgeSQL. Как всегда в таких вопросах, однозначного ответа нет. Автор, похоже, остановился на постгрес.

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

Лучшие выступления на конференции ПрофсоUX

Время на прочтение 10 мин
Количество просмотров 5.8K
В течение года проходит довольно много всевозможных IT-конференций, и чтобы выбрать для себя интересные доклады, специалистам нужно потратить немало времени. Мы решили помочь со своей стороны и сделали подборку самых любопытных выступлений с прошедшей в Санкт-Петербурге конференции ПрофсоUX. Это было мероприятие для UX-проектировщиков и всех, кто интересуется темой UX и Usability.
Читать дальше →
Всего голосов 15: ↑14 и ↓1 +13
Комментарии 3

По-настоящему адаптивные письма. Часть первая

Время на прочтение 6 мин
Количество просмотров 21K
Написание данного поста навеяно недавней поистине шикарной работой, Niсole Merlin. Во многом ее методика верстки схожа с моей и мне радостно от того, что это направление развивается теперь и на западе. Чем же этот способ так хорош? Все очень просто. Не нужно объяснять как важно адаптировать под мобильные платформы сверстанные письма для того, чтобы они были прочтены. Читать простыни на телефоне мало кто будет. Что же все это время делал западный разработчик? Он верстал табличной версткой с элементами блочности, затем причесывал этот код медиазапросами для поддержки мобильников. Чем этот подход ущербен? А тем, что ни на андроиде, ни на яблоке медиазапросы не поддерживаются следующими почтовыми клиентами: Gmail, Yandex, Mail.ru. По большому счету западные коллеги могли бы и наплевать на яндекс с мейлом, но вот Gmail как ни крути первый среди почтовиков.



Для Nicole Merlin это стало очевидно и она разработала свою методику, которая основывается на резиновой верстке с минимальным использованием медиазапросов(progressive enhancement) и это работает! Но немного не так как хотелось бы нам в России. Вся резиновость автора держится на inline-block элементах и оперированием max-width. Но вот беда-то, наши ребята из яндекса и мейла max-width не поддерживают. Сначала я расскажу об отличиях моего подхода от приемов Nicole, а затем плавно перейду к своим мыслям и примерам кода, которые стоит использовать при подготовке писем.
Читать дальше →
Всего голосов 14: ↑11 и ↓3 +8
Комментарии 8

Прелести интерфейса на частично перекрывающихся слоях

Время на прочтение 5 мин
Количество просмотров 23K
Сегодня я расскажу как и зачем мы построили интерфейс нового сервиса Вирусдай на перекрывающихся слоях, как это сказалось на UX и как мы сформулировали принцип «Looks like an app. Works like an app».



За время, прошедшее с 2012 года мы несколько раз модернизировали как сам сервис, так и его интерфейс. Однако, всему однажды приходится сказать «прощай» и идти дальше. Настал момент, когда ни архитектура, ни интерфейс сервиса уже не отвечали нашим запросам. Нам предстояло превратить простой антивирус для сайтов в нечто большее – в целый набор связанных и удобных инструментов для лечения и защиты сайтов. Назревало только одно решение – делать новый сервис «с нуля». Архитектура, технологии, сценарии, интерфейсы – все должно было быть абсолютно новым. Нашей главной целью было достижение максимального уровня комфорта для пользователя при работе с новым сервисом.

Основной задачей нашего отдела стало создание максимально удобного и понятного UI. Итак, весной 2014 года мы приступили к работе над абсолютно новым интерфейсом сервиса и я расскажу вам как все происходило.
Читать дальше →
Всего голосов 22: ↑19 и ↓3 +16
Комментарии 21

Информация

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