StackDev.ru

небольшое демо) буду признателен за любые совет по улучшению/функционалу)

Друзья, всем привет!

Недавно удалось “набросать” 1ю версию инструмента, который в перспективе будет помогать мне создавать разные виды контента для разных проектов.

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

Итак, на первом этапе я сделал небольшое приложение, которое работает по следующему алгоритму:

1) Принимает на вход список названий любых мест (например ресторанов итд)
2) Записывает эти заведения в базу данных и присваивает уникальный id (согласно действующей модели данных)
3) Обогащает объект данных для каждого заведения уникальным ID yandex карт а также названием
4) Обогащает объект данных для каждого заведения списком отзывов из yandex карт (на данном этапе примерно 50 отзывов для каждого заведения), а также другими данными (адрес, координаты итд)

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

Результат анализа - сжатый текст в формате Markdown, который легко добавлять на страницы действующего проекта.

Таким образом, я могу быстро и легко получать “живой” контент на любом языке.

Следующий этап - создание контента на базе статей.

Также есть много технических моментов, которые планирую “допилить”, чтобы сделать приложение более удобным.

Ниже записал небольшое видео с демонстрацией текущей работы приложения.
Что думаете?)

Хороших всем выходных!

Друзья, всем доброе утро!

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

Тексты от ChatGPT

Таким образом, я начал свои эксперименты по созданию контента с помощью моделей OpenAI (GPT-4 и GPT-3.5).

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

Другие модели ИИ

Также я выяснил, что есть ряд альтернативных моделей AI, которые не уступают моделям OpenAI при генерации текста (в том числе на русском языке) и их можно развертывать локально:

1) Llama-3 Instruct от Facebook, о которой слышал много хорошего (круче чем ChatGPT-3 Turbo и отлично понимает русский язык).

2) Недавно появилась PHI-3 от Microsoft

3) Alibaba недавно выпустила несколько мультиязычных моделей, которые могут оказаться круче той же Llama.

4) Mistral Instruct - отлично подходит для генерации текстового контента и хорошо понимает русский язык.

Использование ИИ в проекте

Чуть позже встанет вопрос о том, как использовать ИИ через API в моем проекте. Здесь есть несколько вариантов:

1) Использовать API ChaGPT напрямую, либо через один из сервисов посредников (если доступ требуется из России)

2) Арендовать облачный сервер с предустановленной моделью (та же llama-3)

3) Развернуть собственный сервер с видеокартой и установленной моделью (отдельная история с покупкой сервера и видеокарты, установкой модели + создания API)

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

Очень важными во всей этой истории остается качество статей + вовлеченность пользователя. Никому не интересно читать длинный безликий текст.

Именно поэтому я решил, что статьи, полученные шагом ранее нужно разбавлять (обогащать) какой-то актуальной информацией (например использовать отзывы пользователей из открытых источников).

В следующем посте расскажу более подробно о процессе “добычи” этих данных и преобразовании этих новых данных в контент.

А у вас есть опыт использования ИИ для генерации контента? Делитесь в комментариях - всем будет интересно!🔥

Друзья, всем привет!

Я давно не выходил на связь)

Что случилось?

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

В таких случаях очень помогает переключаться на какие-то новые вещи.

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

В начале года, искал что-то, на что можно временно переключить свое внимание.

У меня есть один очень старый контентный проект на английском языке о Москве. Это такой небольшой пет-проект, который представляет собой набор статических страниц о ресторанах, достопримечательностях итд.

Сейчас все написано на NextJS (до этого использовал Gatsby). Проект висит на бесплатном хостинге. Из затрат - оплата Домена 1 раз в год. Базы данных никакой нет - весь контент хранится в виде markdown файлов.

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

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

Дальше пытаюсь побыстрее разместить баннер. Проект старый) Все написано на коленке на скорую руку. Разбираюсь во всем сплетении кода и плачу😱. Размещаю баннер и выкатываю на хостинг.

Получение “легких” денег меня очень обрадовало. Принимаю решение привести проект в божеский вид и переписываю все на NextJS.

Все работает быстро и выглядит намного лучше.

Но дальше встает вопрос с контентом: Как автоматизировать создание качественного контента?

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

Расскажу об этом более детально в следующем посте!

Всем привет!
Только что выложил короткое видео, где рассказываю как можно быстро выделять и работать с элементами DOM дерева напрямую из консоли браузера (Google Chrome).

Такой подход бывает полезным, когда нужно быстро исследовать/протестировать какие-то элементы на странице.

Консоль разработчика — это один из полезных инструментов доступных нам в браузере.

===
Момент, про который не удалось рассказать в этом коротком видео :

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

Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0; предыдущий, выбранный до него, как $1 и т.д. (максимум 4 последних элемента)

Видео: https://youtube.com/shorts/2hO-HNtrmJM?feature=share

Всем привет!
Выложил небольшое видео, где рассказываю о новом CSS свойстве field-sizing.

Если кратко, то используя field-sizing со значением content, мы можем легко подстраивать ширину полей нашей формы под количество символов в содержимом поля.

https://youtube.com/shorts/x_46j05nXgI?si=cgEIKAzTcEOehix1

Друзья, всем привет!
Последний месяц не успевал записывать новый контент из-за большого количества работы😭

Начинаю менять эту практику.
Записал небольшое видео о том, как же легко стало создавать модальные окна, используя относительно новый HTML элемент <dialog> и его JS методы .

https://youtube.com/shorts/iprxJNwXPwc?feature=share

Друзья, всем привет!
На канале новое видео.
Разбираемся как использовать Дженерики (Generics) в Typescript.

Как обычно, постарался все сделать просто и без воды)

https://youtu.be/k16Hgi753XQ

Все привет!

Какое-то время назад выложил на канал короткое видео, где показываю как использую библиотеку Styled Components в своих проектах.

Видео уже собрало более 70 тысяч просмотров и большое количество комментариев.

Многие комментарии касались использования глобальных стилей CSS с библиотекой Styled Components.

Решил записать еще одно короткое видео как раз на эту тему.

Используя библиотеку Styled Components, все общие стили CSS находятся в одном компоненте.

Данный компонент "оборачивает" все наше приложение (как с Redux). Таким образом, всем компонентам приложения доступны Глобальные стили CSS, а также переменные нашей "темы".

Видео: https://youtube.com/shorts/eCwIGvIb6ao

Всем привет!

Записал короткое видео про одну из фич браузера Google Chrome под названием CSS Overview.

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

https://youtube.com/shorts/hJu5ZWgG-uo

Всем привет!

Только что опубликовал новое видео, в котором мы разбираемся для чего нужны и как работают функции Debounce и Throttle в JavaScript.

Мы напишем с нуля обе функции и отобразим результат работы Debounce и Throttle на нашей странице.

Debounce - откладывает вызов функции с запросом, пока не пройдет заданный промежуток времени после последнего вызова.

Один из самых частых примеров использования Debounce - это уменьшение количества запросов на сервер при наборе текста пользователем в форме поиска.

С другой стороны, Throttle постоянно вызывает нужную функцию, пропуская некоторые вызовы с определенной периодичностью.

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

Видео: https://youtu.be/3IYQM0b48nU

Файлы для работы: https://github.com/VasilyMur/JS-Debounce-Throttle

Всем привет!

Выпускаю очередное короткое видео об использовании алиасов импорта в React.

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

То есть вместо такой записи:
import Component from '../../../components/Component';

Мы сможем использовать алиас (@):
import Component from '@/components/Component';

Видео: https://youtube.com/shorts/xoPm6wc9ilo?feature=share

Всем привет!

Только что выпустил небольшое экспериментальное видео (в формате shorts), где показываю как использую библиотеку Styled Components в приложении React.

Видео: https://youtube.com/shorts/jOb2kCxdsnE

Всем привет!

Только что опубликовал на канале новое видео.

Будем учиться создавать табы (вкладки) на чистом JavaScript.

Для решения этой задачи мы будем работать с DOM деревом, чтобы динамически менять значения атрибутов HTML элементов.

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

Видео: https://youtu.be/Tg4qhQMwAf0
Файлы: https://github.com/VasilyMur/Tabs-JavaScript

Друзья, всем привет!

Наконец публикую новое видео, в котором мы изучим 4 новых метода массивов JavaScript (в рамках редакции ES2023) - with, toSorted, toReversed, toSpliced.

Главное преимущество этих методов заключается в том, что они не мутируют исходный массив.

Видео: https://youtu.be/SB5CkeZUwX0?si=MKZ7N8IsT65a_58F

Файлы: https://github.com/VasilyMur/ES2023-array-methods

Друзья, всем привет!

На дворе лето и хорошая погода, поэтому душа требует новизны и экспериментов😀
Решил протестировать новый формат видео.

Недавно с одним приятелем обсуждали вопросы, связанные с продвижением по “карьерной лестнице” (что делать, куда двигаться итд). Один из вопросов был связан с перспективой повышения размера дохода🔥 .

Основной посыл - доход (зарплата) должен постоянно повышаться (желательно каждый год), чтобы покрывать инфляцию + создавать дополнительную мотивацию за успешную работу в течение года.

В этом видео делюсь соображениями касательно доступных нам вариантов повысить свою зарплату.

Буду также рад услышать Ваше мнение относительно выводов в видео а также формата видео)

Видео: https://youtu.be/hINtMm-vtTg

Друзья, всем привет!

Сегодня подготовил для вас небольшой воскресный JS workout🔥

Разбираем и решаем 6 задачек на чистом JavaScript (желательно не раньше чем через 40 минут после неплотного, легкого завтрака😁).

Видео: https://youtu.be/498UIks8UOk
Файлы: https://github.com/VasilyMur/js-workout-6-coding-tasks

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

Последний год работаю в компании в команде, которая с нуля создает корпоративное приложение для поиска автомобильных запчастей. Пишем продукт на React + Redux + Typescript + бэкенд на c#. Готовимся “задеплоить” MVP приложения в Августе.

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

Не буду вдаваться в детали обоснования…. Решение принято и встал вопрос - что делать с командой проекта:)
К слову, наша команда - единственная в компании, где используется React (все остальные используют Vue).

Мне предложили 2 варианта - перейти на Vue (никогда с ним не работал) либо уйти в backend на node + PostgreSQL (опыта с этой базой нет никакого). Нужно отдать должное - коллеги понимают, что мне потребуется больше времени во всем разобраться).

Я делаю бэкенд для своих небольших проектов - но в больших корпоративных проектах всегда выступал в роли Frontend.

В Общем я решил, что хочу попробовать силы в бэкенде…
Вот сижу - читаю документацию PostgreSQL, изучаю как работает в связке c node, смотрю видео на youtube. Посмотрим куда это приведет)

Друзья, всем привет.

Только что опубликовал очередной мини проект по изучению "ванильного" JavaScript.

В этом видео мы создадим таймер обратного отсчета времени (c установкой времени по клику и через форму).

В рамках проекта будем использовать возможности объекта Date, функцию setInterval, обработчики событий и др.

Видео: https://youtu.be/q_dH_YBnAxU
Файлы проекта: https://github.com/VasilyMur/JS-workout-3-timer

Друзья всем привет!

Хотел написать пару слов про недавние обновления платформы StackDev.

В течение последних нескольких месяцев удалось полностью переписать front + back платформы.

Это отнимало почти все свободное время, поэтому контента на канале выходило мало.

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

Первая версия проекта была написана “впопыхах” и, например, не использовала Redux, так как небольшие “pet проекты” вполне могут обойтись использованием того же “React Context”.

Frontend

Технологический стек проекта со стороны frontend - это NextJS, в основном из-за server side рендеринга, который мы получаем здесь из коробки (нужен для индексации публичных страниц в поиске).

Далее, под капотом используется React вместе с Redux и Typescript. Для стилей использую Styled Components.

Backend

С точки зрения бэкенда - проект использует NodeJS + серверный фреймворк под названием Express.

В качестве базы данных используется MongoDB с библиотекой Mongoose (кстати создана она теми же ребятами, кто создал NextJS).

Модели данных в базе данных также пришлось переработать и расширить (больше данных для лучшей статистики и учета).

Авторизация

Отдельная тема - авторизация. В первой версии проекта использовал пакет под названием Passport JS (авторизация под node.js - по сессиям). В новой версии перешел на авторизацию по JWT токену.

Тарифы

С точки зрения пользователей - решил расширить набор тарифов и добавил подписку на весь контент. Теперь есть возможность получить доступ ко всему контенту Stackdev на 6 и 12 месяцев.

Первые пару дней после "выкатывания" новой версии проекта - оказались "горячими". Выскочили "косяки", которые приходилось оперативно исправлять)

Теперь надеюсь, наконец, сфокусироваться на создании контента и продолжить развитие проекта!

Спасибо за внимание!