Статические пререндеры для React/Angular/Vue вебсайтов

Решил протестировать различные решения для генерации статического пре-рендера aka «static cache» для новомодных SPA вебсайтов.

Если кратко и по делу

Платные решения типа «Mega SEO for Your SPA» — унылое гавно. Кому-то может и подойдет, но будет дорого и точно так же как у 1005000 других сайтов.

Проще всего сделано в react-snap — установил через npm, добавил «postbuild» скрипт и все как-то работает. Кстати, странное название для продукта если учесть что никакого отношения к React он не имеет и может билдить снапшеты к любому JS проекту.

Готовый пример

Вот результат на примере внутренней старницы SPA на моем сайте Sea Battle by KARPOLAN. Если загляните в консоль, то увидите несколько ошибок…

Основные проблемы на cейчас

  • Ренедр с помощью реального браузера, даже в инкогнито режиме, содержит код уже «исполненых» скриптов аналитики и рекламы.
  • Ренедр с помошью Headless браузера тоже не спасает, более того там прописвается localhost для многих параметров 🙂
  • Веб-сервер надо более тщательно настраивать, чтобы SPA продолжало работать автономно, а не таскало файлы с сервера каждый раз.

Заключение

Open Source «из коробки» ничего не гарантирует да и работает через пень-колоду… Даже react-snap глючит если задать «homepage» в package.json

P.S. В общем угробил очередную субботу 🙂

Крестики-Нолики на React JS

Что-то меня на приздниках пробило на по-программить. Раз такое дело, вот еще одна «поделка» и немного кода на JavaScript + React:

Играть в Крестики-Нолики прямо в браузере

Исходные коды игры Крестики-Нолики на JavaScript + React

Cо временем добавлю «всякой крастоты»: индикаторов, преключатель режимов PvP, PvE, Demo Mode и т.д.

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

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

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

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

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

Идея на миллиард: Codename «Gone Fishing»

Примерно год назад я решил сделать «боле оцфрованным» такое хобби как рыбалка.

Идея в 2х словах на этом видео:

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

Так же написал технические задания, разбил на таски и попытался найти подрядчиков или партнеров на изготовление прототипов…

В общем пытался построить продукт и компанию по правильному, с customer development и по lean методике.

Краткий отчет за первый год: НЕ СДЕЛАНО НИЧЕГО!

Вывод простой: Хотите что-то сделать? Ищите деньги и нанимайте людей. Даже закрывшись от всего мира на полгода, вряд ли что-то нафигачите самостоятельно 😦

Читать «Идея на миллиард: Codename «Gone Fishing»» далее

Отвечу на любой вопрос. Скидка 100% :)

Ну точнее почти на любой вопрос, я ж не все знаю и не все можно публично рассказывать…

Но по бизнесу, программированию, маркетингу, продажам, PR и т.д. с удовольствием отвечу в комментариях.

P.S. Да, это за одно и «перекличка» читающих этот блог 🙂

Изобретаю лисапеды

В этот раз на PHP:

<?php $y = (date("Y") - 2004 - 1); $m = date("m"); if (($m > 8) || (($m == 8) && (date("j") >= 20))) $y += 1; echo $y; ?>

Это я возраст Кристины вывожу скриптом на сайте, чтобы не менять текст каждый год 🙂

Разворачивание веб сайтов, современный вариант

В эпоху клаудов и сайто-конструкторов напридумывали много всякого… Для изучения всего этого зоопарка провел ряд экспериментов с разными подходами и на разных серверных системах.

Пожалуй остановлюсь на вот таком подходе для разворачивания веб-сайтов:

  1. Делаем репозиторий .git, например на Bitbucket.
  2. Заливаем в него скелетон сайта, скрипты, CMS если надо.
  3. Делаем виртуальный хостинг или создаем сайт на Microsoft Azure.
  4. Клонируем .git к себе на хостинг.
  5. Через браузер (на крайний случай удаленный доступ) до-настраиваем скрипты, базы и CMS.

В случае автоматического апдейта CMS или изменения контента пользователями, переодически делаем git push с сервера, через консоль. Для этого лучше сделать отдельный аккаунт на Bitbucket и прописать в него SSH ключ от пользовтаеля на сервере.

Вроде и просто, и секьюрно, и даже есть бекап, да еще с контролем версий и изменений

Про Hardware проекты из Украины

Навеяно повальным увлечением hardware-поделками ака «стартап для Kickstarter» ©

Напоминаю что $1 тому кто придумал, $10 тому кто сделал, $100 тому кто продал. Но учтите, что продажа обязательна! Иначе никто ничего не получит 🙂

Но отсюда следует и другое: если на изготовление/производство ушло 10х то заработать больше 100х проблематично…

В общем, изучайте чужой опыт и учитесь на их ошибках!

Смотреть раз:

Смотреть два:

Смотреть три:

Можно еще это посмотреть:

Будут вопросы — пишите в каментах. Я устал по 20 раз рассказывать и убеждать что главное дойти до магазинов, а не «сделать из гавна пулю» ©

Скоро IDCEE 2014

Зарегистрировался на каонференцию IDCEE 2014 как пресса, от Продажного блога имени Карполана, а так же как участник Social Entrepreneurship Hackathon c идей 3D Printer Hub

P.S. Похоже это будет последняя конференция в Украине с названием IDCEE, в будщем году рулить будут уже Итальянцы.

Система автоматизации обмена валют AObmen (1995 год)

AObmen я писал в 1995-1996 годах, когда подрабатывал на фирме по обмену валют. Это был мой первый большой проект, его даже подавали на лицензирование в Нац Банк! Сейчас без слез на код смотреть сложно, но из песени слов не выбросишь. А псевдографика в текстовом режиме 80×25 чего стоит! 🙂

Исходные коды для Turbo Pascal 7.0 with Turbo Vision