Тестовое задание на React JS

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

Список ресторанов с разными вариантами фильтров и отображений.

Вот наваял Поиск с Сортировкой Ресторанов на React JS. Может еще чего-то добавлю со временем, Debug Info там интересный получилося.

Исходники выложил на GitHub, может кому-то полезно будет… Хотя писал я это за один день, так что не факт что стоит копировать мои решения не задумываясь 🙂

WordPress on Staging + Static HTML on Production

Железобетонно-рабочего решения для «WordPress on Staging + Static HTML on Production» на данный момент нет 😦

Появился целый набор платных сервисов которые пытаются колдовать с таким решением, но делают пока это с переменным успехом…

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

Самым надежным на данный момент выглядит следующий подход:

  1. Устанавливаем WP в папку на отдельном секретном саб-домене.
  2. Настраиваем WP чтобы работал от корня (иначе относительные ссылки будут глючить)
  3. В корне сайта, в под-папках, раскладываем материалы которые не имеют отношения к WordPress (статические страницы, PDF, ZIP и прочие файлы).
  4. В WordPress делаем страничку с агрегацией ссылок на все НЕ WordPress ресурсы вашего сайта (ссылку на такую страничку надо хотя бы одну).
  5. Создаем все страницы и посты сайта прямо в админке WordPress.
  6. Экспортируем контент в ZIP архив. Можно с помощью плагина Simply Static, можно внешней утилитой типа Website Downloader . Желательно перед экспортом отключить всякие кеш-плагины, минифаеры файлов, и прочие «улучшатели» контента.
  7. Заливаем ZIP с архивом сайта на хостинг основного домена и распаковываем его прямо в корень. Можно использовать S3 bucket или GitHub pages чтобы «сэкономить».
  8. «Отключаем» WordPress на секретном субдомене. Можно временно заменять Database криденшелы в wp-config.php, переводить сайт в доступ по паролю, остановить MySQL сервис и т.д. Я просто выключаю виртуалку с инстансом WordPress.

Все! С этого момента счастливо живем без спама, попыток взлома и прочего WordPress дурдома.

Если надо будет что-то добавить или изменить на сайте: «включаем» WordPress и повторяем все действия с пункта №5 и до конца.

P.S. Если у вас сильно отличается мобильная и десктопная версии сайта, лучше делать 2 разных экспорта статического контента. Один для мобильной темы, второй раз для полноразмерной. Редиректить пользователя на подходящий веб-сайт придется уже на основном хостинге.

Усьо будет JavaScript ©

Все состоявшиеся программисты не довольны…

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

Привыкайте к новой реальности — осваивайте JavaScript 🙂

Как определять Internet Explorer версии 10 и выше

В Microsoft жгут напалмом! Начиная с 10й версии Internet Explorer они отключили поддержку сonditional сomments вида:

<!--[if IE]> ... <![endif]-->

В общем пришлось перелопатить весь интернет и даже написать статью: Как определять Internet Explorer версии от 5й до 11й.

CSS @font-face без указания имени файла

Если вы купили web тему со кастомным шрифтом в виде CSS @font-face, но этот фонт не поддерживает Cyrilic или как-то криво отображается на разных устройствах, то вместо покупки похожего шрифта, проще всего заменить левый font на что-то стандартное: Arial, Times New Roman, Impact и т.д.

Я около часа гуглил и читал спецификации стандартов CSS/HTML чтобы разобраться как же можно задать @font-face без загрузки файла. Оказывается есть возможность задавать параметр @font-face.src: не только как url() но и через директиву local() !

Вот реальный пример из WordPress темы Tank которую я купил для сайта Привет Танкистам, а потом оказалось что фонт geometric_slabserif_703 для русского языка тупо не существует 😦

@font-face {
    font-family: 'webfontregular';
    src: url('geometric_slabserif_703_bold_condensed_bt-webfont.eot');
    src: url('geometric_slabserif_703_bold_condensed_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.woff') format('woff'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.ttf') format('truetype'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

А вот так я переопределил @font-face темы под виртуальным названием webfontregular на стандартный шрифт Arial:

@font-face {
    font-family: 'webfontregular';
    src: local('Arial');
    font-weight: normal;
    font-style: normal;
}

В общем @font-face src: local(‘Font Name’) рулит! А в стандартах описано слабо…

Что делать в жизни дальше?

За последний год в Ынтернет я:

  • Создавал сайты и лендинг-пейджи (много, бессмысленно и беспощадно)
  • Заводил сотни социальных аккаунтов во всевозможных соц.сетях, половину названий вы даже не знаете 🙂
  • Знакомил людей между собой и приглашал на всякие мероприятия и конференции. В общем SMM как сейчас говорят.
  • Создавал виртуальных персонажей в соц.сетях. Ну это реально для некоторых бизнес-процессов необходимо!
  • Много копался с клауд сервисами и делал разные бизнес решения на основе Google Apps, Dropbox и прочего.
  • Монтировал много видео и делал много фотографий. Хотя с фотками теперь легче, их Саша делает.
  • Занимался SEO и барыжил ссылками. Ну еще немножко программы продавал 🙂

За последний год в офлайне я:

  • Работал со стартаперами, инвесторами, менторами и прочим «шоу-бизнесом».
  • Посещал тематические конференции, ивенты и собеседования. Активно знакомил людей между собой.
  • Много снимал видео. Разного и всякого. Стал «миллионником» на YouTube, или это уже онлайн? 🙂
  • Вернулся к авиамоделизму и электронике. Хотя серьезных достижение пока нет.
  • Чинил кучу техники для друзей и знакомых. Немного паял новых устройств.
  • Так и не доделал ни мебель, ни «умный дом» 😦

За последний год я программировал на:

  • PHP (чистый, под WordPress и немного Drupal)
  • Delphi — под Windows и потуги под MacOS.
  • C# — пробовал освоить WinRT и Win Mobile.
  • С — под микроконтроллеры, но там мелочь.
  • HTML+CSS+JavaScript — ну это так вообще почти каждый день что-то. Скоро на HTML разговаривать буду.

К чему это я все? Во всем перечисленном я профессионал, но меня это все задолбало и надоело! Хочу чего-то нового, полезного и интересного. Желательно еще чтобы и деньги приносило 🙂

Какие будут идеи и предложения?

Как заставить Internet Explorer 8 (и более старые) нормально отображать HTML5 сайты

Если сайт/документ делаешь полностью сам, то можно конечно психануть и сделать верстку в формате XHTML 1.0 или даже HTML 3.2 🙂

Но чаще приходится иметь дело с чужими темами, плагинами, скриптами… А там уже 2й год мода пошла делать все на HTML5 c header, article, section и прочими новыми тагами.

За последний месяц у меня спрашивали как решить такую проблему минимум 3 раза. Ну раз такое дело, опишу решение в блоге и всех буду отсылать сюда 🙂

Полностью функциональность HTML5 получить конечно не получится, но чтобы сайт хотя бы выглядел пристойно достаточно добавить вот такой код в head страницы:

...

<!--[if lt IE 9]>
	
		document.createElement('header'); document.createElement('footer'); document.createElement('nav'); 
		document.createElement('article'); document.createElement('section'); document.createElement('aside');	
	
	<style type="text/css">header, footer, nav, article, section, aside {display: block;}</style>
<![endif]-->
</head>

Если используете еще какие-то теги, просто добавьте их в скрипт и стиль. И главное не меняйте формат комментариев! Вся магия в [if] … [endif] 🙂