Pull to refresh
5
0
web_xaser @webxaser

User

Send message

Список полезных инструментов для CSS разработчика

Reading time8 min
Views71K
Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.


Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.
Читать дальше →
Total votes 179: ↑170 and ↓9+161
Comments65

Как накормить мозг программиста… или feed your brain

Reading time12 min
Views371K

Введение


Из всех наслаждений, отпущенных человеку в жизни,
самое изысканное — шевелить мозгами.
(Борис Акунин)


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

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

В данной публикации мы рассмотрим, как правильно питаться для жизнеобеспечения мозга и как его разогнать ноотропами (в случае аврала необходимости).
Читать дальше →
Total votes 213: ↑163 and ↓50+113
Comments145

Несколько интересностей и полезностей для веб-разработчика #28

Reading time5 min
Views47K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

roBrowser



roBrowser — open source клон клиента достаточно популярной MMORPG игры Ragnarok Online в браузере. Проект разрабатывается по последним стандартам W3C — WebGL, HTML5, File API, Javascript, Threads… Небольшой ролик с демонстрацией игры:


Читать дальше →
Total votes 65: ↑64 and ↓1+63
Comments14

Я нашёл ошибку в браузере!

Reading time1 min
Views36K


Наш коллега по браузерному фронту Пол Льюис aka @aerotwist из Google, видимо, порядком устал от неправильных багрепортов и опубликовал сегодня блок-схему, показывающую как это делать правильно. Я не удержался и решил перевести. С одной стороны, схема довольно очевидна для тех, кто хоть раз занимался тестированием, с другой — никогда не бывает лишним напомнить или показать схему тем, кто не в курсе.
Под катом полная картинка и ссылки на трекеры
Total votes 91: ↑71 and ↓20+51
Comments77

CSS GuideLines, часть 1. Синтаксис и форматирование

Reading time8 min
Views43K


Введение


CSS не идеален. Поначалу кажется, что он прост в освоении, но работая над реальным проектом вы столкнетесь со многими проблемами. Мы не можем изменить то, как работает CSS, но мы можем изменить тот код, который мы пишем.
Читать дальше →
Total votes 37: ↑22 and ↓15+7
Comments36

Параллакс на чистом CSS

Reading time4 min
Views168K
В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.

Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью requestAnimationFrame. Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?
Читать дальше →
Total votes 59: ↑54 and ↓5+49
Comments48

Полезные сниппеты на HTML5

Reading time4 min
Views84K
Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.

Автозаполнение в текстовых полях


Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!
<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Читать дальше →
Total votes 73: ↑59 and ↓14+45
Comments27

Стилизация HTML5 плейсхолдера с помощью CSS

Reading time2 min
Views138K
В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.
Читать дальше →
Total votes 85: ↑76 and ↓9+67
Comments56

10 самых распространённых ошибок при программировании на JavaScript

Reading time10 min
Views155K


Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

На первый взгляд, этот язык может показаться довольно простым. Встраивание в веб-страницу базового функционала JavaScript — это не проблема для любого опытного разработчика, даже если он ранее не сталкивался с этим языком. Однако это обманчивое впечатление, поскольку JavaScript гораздо сложнее, мощнее и чувствительнее к нюансам, чем кажется поначалу. Немало тонкостей в этом языке приводит к большому количеству распространённых ошибок. Сегодня мы рассмотрим некоторые из них. На эти ошибки нужно обратить особое внимание, если вы хотите отлично программировать на JavaScript.
Читать дальше →
Total votes 205: ↑176 and ↓29+147
Comments127

Превращаем Chromebook в полноценный рабочий ноутбук

Reading time3 min
Views181K
image

Я думаю многие слышали о Хромбуках, ноутбуках от Google с предустановленой ChomeOS, но немногие ими пользуются из-за ограничености ChromeOS. Кому нужен ноутбук с одним лишь браузером?

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

Интересно? Тогда добро пожаловать под кат.
Читать дальше →
Total votes 88: ↑84 and ↓4+80
Comments48

Гаджеты, которые вы хотели взять в отпуск

Reading time6 min
Views35K


Июнь близится к концу, а это значит, что лето-каникулы-отпуск в самом разгаре, что бы там ни показывал термометр. По этому поводу мы уже публиковали подборку мобильных приложений, которые могут быть полезны путешественникам и просто отдыхающим на природе. Но приложения приложениями, а на свете есть немало интересных гаджетов помимо смартфонов и планшетов, которые могут украсить собой хороший отдых. Смотрите нашу подборку гаджетов для отпуска и активного отдыха.
Читать дальше →
Total votes 100: ↑68 and ↓32+36
Comments60

Десктоп на ладони

Reading time4 min
Views98K
Российская компания ЗАО «Сетевые Технологии» и её отделение на Тайване «Communication Technology» Ltd. на грядущей выставке Computex 2014, проходящей с 3-го по 7-ое июня в Тайбэе, представляет три миникомпьютера на основе платформ Cedar Trail — Atom N2000, Chief River — 3rd gen Core i3/i5/i7 и Shark Bay — 4th gen Core i3/i5/i7.


Читать дальше →
Total votes 152: ↑148 and ↓4+144
Comments230

Использование MultiSSID в жизни

Reading time3 min
Views44K
Постановка задачи.

WiFi в офисе сейчас обычное явление. Никого этим не удивишь. Скорее удивляет, когда его нет. У нас не было. Просто особой необходимости не было. Сотрудники сидят на местах, никто ни куда не «мигрирует». Но всё когда-то меняется. Появилось у начальника желание получить WiFi. Посидели, обсудили, получилось вот такое ТЗ:
  • для начальника и сотрудников доступ к локальным ресурсам и интернет в любое время суток.
  • для гостей начальника – доступ в интернет всегда.
  • для обычных посетителей – гостевая зона только в рабочее время.
  • расходы на оборудование минимизировать.

Читать дальше →
Total votes 27: ↑22 and ↓5+17
Comments53

О начинающих разработчиках и принципах работы с ними

Reading time7 min
Views141K
image

За последние десять лет через меня прошло много начинающих разработчиков. Да и чего греха таить, я тоже когда-то был начинающим разработчиком. За это время я получил тысячи вопросов а-ля “как стать разработчиком”, а также просьб взять людей к себе на практику. К сожалению, даже под чутким руководством более опытных специалистов, далеко не каждому хватает сил и мотивации перейти на качественно новый уровень. Статистика — вещь упрямая: количество “пытающихся” и “достигающих успеха” распределяется согласно принципу Парето, т.е. 20/80, где из десяти человек максимум двоим удается пройти первоначальное испытание. Остальные отваливаются по дороге или процесс обучения у них растягивается на долгие годы. И все же, каким должен быть начинающих разработчик, какими навыками и знаниями он должен обладать? Об этом и пойдет речь в статье.

Читать дальше →
Total votes 149: ↑103 and ↓46+57
Comments160

Сложный и противоречивый мир синтаксиса микроразметки. Почему стандартов так много? Опыт Яндекса

Reading time7 min
Views52K
Сегодня в продолжение наших рассказов о семантической разметке я хочу рассказать о её синтаксисе. То, почему он такой, а не иной, часто определяется историческими причинами, а иногда — ещё и комично. Поэтому мы попробовали здесь всё систематизировать и объяснить.

Сначала пару слов, чтобы все понимали, что есть что. Под микроразметкой в целом (или семантической разметкой) мы подразумеваем разметку страницы с дополнительными тегами и атрибутами в тегах, которые указывают поисковым роботам на то, о чем написано на странице.

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

Стандартов синтаксиса, как и словарей, несколько. В этой статье мы и разберем на практических примерах наиболее распространенные:
  • Microdata — Микроданные (словарь Schema.org чаще всего встречается именно в этом синтаксисе);
  • Microformats.org — Микроформаты (напоминаем, что это объединенный стандарт синтаксиса и словаря);
  • RDFa и RDFa Lite (в упрощенном виде RDFa рекомендуется создателями словаря Open Graph. Также встречается с другими словарями, например, со словарем Dublin Core или Data Vocabulary);
  • JSON-LD — расширение JSON.

Чтобы понять, почему для решения одной задачи было разработано много разных стандартов, обратимся к истории развития синтаксиса:

Once upon a time В 2004 году разработчики из W3C создали стандарт, который, по их мнению, подходил для «представления всего в мире». Так появился синтаксис RDFa (Resourse Description Framework in attributes), который позволяет однозначно транслировать HTML-разметку с семантическими данными в RDF.
Универсальный стандарт придумывали больше одного раза...
Total votes 93: ↑87 and ↓6+81
Comments34

Конспект по веб-безопасности

Reading time3 min
Views65K
Простите, но накипело.
Много шишек уже набито на тему безопасности сайтов. Молодые специалисты, окончившие ВУЗы, хоть и умеют программировать, но в вопросе безопасности сайта наступают на одни и те же грабли.

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


Итак, каким должен быть безопасный сайт?

Читать дальше →
Total votes 120: ↑104 and ↓16+88
Comments163

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

Reading time20 min
Views314K
Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

Требования должны были быть такие, что соблюсти их легче, создавая качественную вёрстку, а не говнокод. Я составлял такой чек-лист в течении полутора лет. За последние полгода в него не добавилось ничего. Значит самое главное учтено.

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:
  • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
  • 2015/08/10: актуализирован список исключений для CSSLint
  • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
  • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
  • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
  • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
  • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
  • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
  • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
  • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.
Total votes 335: ↑318 and ↓17+301
Comments244

Знакомство с SVG-графикой

Reading time3 min
Views301K
Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.



Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.
Читать дальше →
Total votes 80: ↑75 and ↓5+70
Comments97

Простым языком об HTTP

Reading time9 min
Views1.4M
Вашему вниманию предлагается описание основных аспектов протокола HTTP — сетевого протокола, с начала 90-х и по сей день позволяющего вашему браузеру загружать веб-страницы. Данная статья написана для тех, кто только начинает работать с компьютерными сетями и заниматься разработкой сетевых приложений, и кому пока что сложно самостоятельно читать официальные спецификации.

HTTP — широко распространённый протокол передачи данных, изначально предназначенный для передачи гипертекстовых документов (то есть документов, которые могут содержать ссылки, позволяющие организовать переход к другим документам).

Аббревиатура HTTP расшифровывается как HyperText Transfer Protocol, «протокол передачи гипертекста». В соответствии со спецификацией OSI, HTTP является протоколом прикладного (верхнего, 7-го) уровня. Актуальная на данный момент версия протокола, HTTP 1.1, описана в спецификации RFC 2616.

Протокол HTTP предполагает использование клиент-серверной структуры передачи данных. Клиентское приложение формирует запрос и отправляет его на сервер, после чего серверное программное обеспечение обрабатывает данный запрос, формирует ответ и передаёт его обратно клиенту. После этого клиентское приложение может продолжить отправлять другие запросы, которые будут обработаны аналогичным образом.

Задача, которая традиционно решается с помощью протокола HTTP — обмен данными между пользовательским приложением, осуществляющим доступ к веб-ресурсам (обычно это веб-браузер) и веб-сервером. На данный момент именно благодаря протоколу HTTP обеспечивается работа Всемирной паутины.
Читать дальше →
Total votes 94: ↑82 and ↓12+70
Comments35

Information

Rating
Does not participate
Registered
Activity

Specialization

Backend Developer, Frontend Developer
Middle
Web development
JavaScript
PHP