Введение

это сборник мыслей о разработке программ собранный разработчиком с мозгом груга

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

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

разработчиков с большим мозгом много, некоторым страница не понравится, скривят кислая рожа

Ещё больше-больше ДУМАЮТ, что они разработчики с большим мозгом и им она тоже не понравится

(груг раньше думал груг с большим мозгом, но потом всё понял)

это ладно!

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

Что такое GDPR?

Это новое регулирование в ЕС, которое вступает в силу 25 мая 2018 и содержит новые правила, касающиеся персональных данных лиц, находящихся в ЕС.

GDPR касается персональных данных всех лиц, находящихся на территории ЕС.

CANVAS шаг за шагом:

1. Основы
2. Изображения
3. Понг
4. Пятнашки

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

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

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

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

История с left-pad пробрала JavaScript-сообщество до самых костей. В то время как разбухший код продолжает замедлять наши сайты, сажать наши батареи и делать наш npm install медленным, многие разработчики решили сами провести тщательный аудит зависимостей, которые они привносят в свои проекты. Настало время, чтобы мы как сообщество встали и сказали: «Хватит!» Это сообщество принадлежит всем нам, а не только горстке JavaScript-разработчиков с шикарными длинными волосами.

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

Недавно я уже писал статью о том, как можно достаточно удобно валидировать формы в React с помощью компонента Formsy-React. Сегодня я бы хотел рассказать о подходе, который использовал для интернационализации разрабатываемого приложения. Как бонус, используемая библиотека добавляет возможность плюрализации, что является весьма полезной фишкой при разработке многоязычного приложения. Если интересно, прошу под кат!

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

Здорово было бы найти способ заставить компьютер сэкономить вам время и решить проблемы, о которых я сказал выше… И именно тут на помощь приходит процедурная генерация!

Microsoft уже несколько лет раздаёт бесплатные виртуальные машины с Windows XP, Vista и 7 для тестирования веб-сайтов на старых версиях браузера Internet Explorer.

Все образы укомплектованы соответствующей версией IE и апдейтами безопасности. Для XP установлены апдейты до октября 2012 года, для остальных — до марта 2011 года. В остальном — это чистая свежая инсталляция Windows без особенных модификаций. Образы в формате VHD можно загрузить в Microsoft Virtual PC или другой пакет виртуализации. Самораспаковывающиеся архивы RAR для удобства скачивания разбиты на части по 700 МБ.

Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).

Буквально пару абзацев я уделю внимание особенностям взаимодействия этой библиотеки с фреймворком Yii, остальное же в полной мере универсально и будет интересно всем, кто использует или планирует использовать эту библиотеку.

Если вы уже хорошо знакомы с Purifier, то можете смело начинать читать отсюда

Немного о HTML Purifier

Если вы не слышали о такой прекрасной библиотеке (а поиск на Хабре говорит о не такой уж большой популярности) как HTML Purifier, то советую обязательно к ней присмотреться, особенно если ваши пользователи генерируют контент в html формате. Это может быть рядовой пользователь, модератор или даже администратор.
Что же делает эта библиотека?
Согласно конфигурации она очищает любой html код от всех вредоносных, невалидных, запрещенных (вашей конфигурацией) частей кода, в том числе отдельные атрибуты.

Цель этой публикации — объяснить веб-мастерам основные причины по которым их сайты может, мягко говоря, недолюбливать Google. Также предлагается система диагностики попал ли сайт под санкции Google или нет.

Мой сайт под фильтром Google? Как узнать под каким? Просел сайт в выдаче, в чём причина? Падают позиции и нет посещаемости, в чём дело?

Именно с таким названием вы увидите темы на большинстве известных SEO-форумах и на Справочном форуме для веб-мастеров Google.

Сразу отметим, что вместо слова «фильтры» в таких ситуациях уместнее употреблять слово «алгоритмы».

На самом деле причина проблем с сайтом может быть не связана с мерами воздействия Google.

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM'е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…

Друзья мои! Время от времени каждый из нас сталкивается с ситуацией, когда, попав на новый для себя сайт, приходится хорошенько поразмыслить минуту-другую, чтобы понять, как там все устроено. Примерно в таком же положении можно оказаться, обнаружив радикальные (или не очень) перемены во внешнем облике любимых сайтов, будь то last.fm или Кинопоиск. Существуют разные способы примирить пользователей с новым дизайном: от постепенного знакомства с привнесенными новшествами («Попробуйте бета-версию обновленного сайта прямо сейчас!») до создания пошагового гайда по новым возможностям. О последнем варианте мы сегодня и поговорим.

Ни для кого не секрет, что VK API возвращает за один запрос к методу groups.getMembers не более 1 000 участников. В одну секунду вы можете получить максимум 3 000 участников, так как установлено ограничение на количество запросов в секунду до 3. Эту проблему решает метод execute, с помощью которого вы можете получить более 100 000 участников за одну секунду и до 25 000 участников за один запрос. В этой статье я расскажу Вам, как я это реализовал.

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

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

Обратили внимание, что доля поискового трафика Яндекса на Кабанчике значительно меньше, нежели доля Google. Т.е. значительно меньше, чем среднее соотношение трафика Yandex/Google по рынку.

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

Общие отличия Google от Yandex

• Возраст сайта больше важен для Yandex.
• Продвигаться по НЧ намного легче в Яндексе. Для этого достаточно писать качественный уникальный контент. В Google без ссылок на страницу продвигать НЧ тяжко. Для СЧ и НЧ Яндексу нужны трастовые доноры.
• Скорость индексации сайта в Яндекса в разы медленнее, нежели у Google: 8-10 дней против 1-2.
• Частое обновления контента влияет на траст в Google. Яндекс любит старые уникальные тексты.
• По ВЧ запросам в ТОПе Яндекса можно видеть в основном главные страницы сайтов. В Google — чаще внутренние страницы.
• На одной странице поиска Google может находится 5 ссылок с одного сайта. в Яндексе — только одна страница.
• На Яндекс легче влиять с помощью поведенческих факторов, нежели на Google.
• Google далеко не всегда обращает внимание на запрет к индексации в robots.txt.
• Скорость загрузки страниц более важна для Google. Он не пускает в ТОП медленные сайты. Для Яндекса скорость загрузки сайта не так важна.
• Яндекс больше любит поддомены для региональных запросов. Т.е. для продвижения в другом городе лучше использовать домен gorod.site.com/…
• Для Яндекса имеет большое значение нахождение сайта в Яндекс.Каталоге.

Внутренняя оптимизация

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

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

Демо материалы лежат здесь.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:

<div class="effect>
  <img src="img/ef1.jpg" alt="Effect #1" />
  <div class="caption">
    <h4>Title is Here</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

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

К чему мы приходим:
— Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
— Улучшение семантики через именование классов и сокращение участков кода
— Частичная поддержка the Bat! Хотя Николь на него забила.
— Полная поддержка всех мобильных почтовых клиентов
— Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.

Компания Google вышла на новый уровень в продвижении своего детища — Material Design. Выпущена версия 1.0.0 open-source проекта Material Design Lite.