☕️ '${Вронтенд}'
Open in Telegram
Пишу фронтенд, пишу про фронтенд. Публикую ваши интересные материалы по фронту, писать @catanix 👩🏼💻
Show more332
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
Самая худшая Ui либа для Vue - Buefy!
Уже неделю горит с buefy и того, что это достаточно массовый продукт при всех своих недостатках, а они на самом деле критичные.
Банальное обновление либы может привести к тому, что у вас сломается все приложение, а документации к старой версии вы ВНИМАНИЕ! не найдете..
Кстати еще версии могут различаться набором достаточно важных CSS классов, пропсов или слотов, а обратной совместимости нет))0
В лучшем случае будет хоть какая-то инфорация на их гитхабе, а в худшем придется лезть в исходники компонентов.
При том что есть рассово-верный Vuetify мне совсем не понятно зачем и почему юзают Buefy. Не надо так.
Какие киты вы юзаете во вью для всяких кабинетиков/панелей?
#Vue #VueJs #Buefy #Vuetify #Ui #Uikit
Я очень не люблю, когда идет работа с данными из компонента, запросики, стора, все только непосредственно из пейджи (не важно вуй то, реакт или еще что).
Иногда легаси код содержит явные проблемы в архитектуре из-за которых нам приходится городить костыли и не так давно, я нашел очевидное с точки зрения JS и например реакта решение, но не совсем очевидное для Vue.
Вы вот знали что когда мы делаем $emit, то в объекте можно передать коллбек чтобы по выполнению, ну на пример промиса в родителе, изменить стейт в дочке?
Child:
this.$emit('emitPatentsFunc', {
data: "test data",
callback: () => {
this.isThisWorks = true;
}
});
Parent:
emitPatentsFunc(obj) {
this.makeSomeShit(obj.data).then(() => {
obj.callback();
});
}
И ведь действительно, обычная практика для react, а на вью увидел и попробовал впервые.
Писать вот так вот сразу, наверное плохая практика, но если вам хочется обойтись без refs, то вполне себе можно.Nginx reverse proxy часть 2.
Создаем конфиг и начинаем его редачить:
cd /etc/nginx/sites-available
nano reverse-proxy.conf
server {
listen 80;
listen [::]:80;
access_log /var/log/nginx/reverse-access.log;
error_log /var/log/nginx/reverse-error.log;
location / {
root /var/www/app/static/;
}
location /api {
proxy_pass http://127.0.0.1:1234;
}
}
Копируем конфиг файл из:
/etc/nginx/sites-available
в:
/etc/nginx/sites-enabled
или создаем на него ссылку.
ln -s /etc/nginx/sites-available/reverse-proxy.conf /etc/nginx/sites-enabled/reverse-proxy.confПерезагружаем nginx:
sudo systemctl reload nginxВсе! Теперь при запросе по адресу ***/api - запрос проксируется на http://127.0.0.1:1234 (ваш условный бекенд), а по пути на "/" мы раздаем на пример ssr фронт или статику.
Nginx reverse proxy часть 1.
Есть такая базовая проблема, когда фронт и бэк лежат рядом на одном сервере&
При этом 80 порт свободный у нас один (если ты не знаешь почему 80 и вообще что за штука эти порты - земля тебе пухом братишка).
Как заставить их работать вместе без явного указания порта? Nginx reverse proxy!
В чате фронтендеров на пару тысяч человек, только человек 5-10 ответили о том, как они деплоят свои приложения рядом с бэком и вообще написали о том, что фронт должен хотя бы понимать что есть nginx и как его настроить.
Для начала установим nginx и приготовимся редачить конфиги, продолжение в следующем посте..
Ставь лайк если пиксель перфект для лохов 👍🏻
Или когда верстайло позаботился об UX
Lite Deploy node js приложения на сервере (vps/vds) с помощью PM2. Part 3 - послесловие.
В довесок докину привлекательных фич и команд, которые могут вам помочь, ну на случай если вы охуенно ленивый и не хотите лезть в доку (на самом деле просто хочу показать что штука действительно заслушивает внимания):
// запускать приложение можно с ключем имени, если он не был указан, его всегда можно посмотреть через pm2 status
// список операций доступных для процесса:
$ pm2 restart app_name
$ pm2 reload app_name
$ pm2 stop app_name
$ pm2 delete app_name
// мониторинг приложений:
// консольная версия
$ pm2 monit
// веб версия
$ pm2 plus
Таким образом без задней мысли, с минимальными навыками можно запустить почти любое приложение на впске. Кстати PM2 плевать что кушать, будь то ваш большой и длинный питон, нода, бинарник или какая-нибудь рубя.Lite Deploy node js приложения на сервере (vps/vds) с помощью PM2. Part 2 - первый запуск и вперед в бой!
Deploy с PM2 максимально прост: подключаемся по ssh, клонируем наш проект с гита, ставим зависимости и тестируем запуск ручками (я надеюсь вы умеете в базовые команды *nix и гит, если нет, то как говорится: земля тебе пухом, братишка). Если все успешно отрабатывает, то можно ставить PM2.
Все делается буквально 3мя строчками:
// установка самого process manager'а $ npm install pm2@latest -g *** // запуск вашего приложения (очевидный ваш файл вместо index.js) $ pm2 start index.js *** // статус запущенных приложений на PM2 и небольшая статистика $ pm2 statusКстати некоторые используют его для продакшна, а вообще обратитесь к девопсам..👾
Lite Deploy node js приложения на сервере (vps/vds) с помощью PM2. Part 1 - предисловие.
Очень часто встречаю людей, которые имея внушительный опыт и знания, да даже работая на должности в компаниях попросту не знают как выгрузить их код в бой.
PM2 - интересный, простой и удобный process manager, который поддерживает работу вашего приложения, перезапускает его если оно падает, сохраняет логи и выдает всю статистику.
Да, для статики у нас есть всякие шаред-хостинги (кстати предпочитаю не использовать их вообще), nginx и ко, да и вообще куча способов, но в этой серии постов покажу наверное самый простой.
Не баян, а классика, или доклад который должен посмотреть любой погромист
https://www.youtube.com/watch?v=igWSGO52Ibg
А помнит кто-нибудь такой формат рекламы как pop-up?
Еще в детстве, я читал книгу Алекса Эклсера про веб разработку и seo, еще в далеком 2007, он писал о том, что это плохо, но жили мы с этим кажется до 2013-2014 года.
Причем попап, который не закрывается пока ты не перейдешь на рекламируемый ресурс - это были еще ягодки.
В те времена у вас мог отработать скрипт на какой-нибудь открытой вкладке, открыть новую вкладку, где на полной громкости, какой-нибудь голос начал бы вам впаривать что-нибудь уровня возбуждающей жвачки.
А если попытаться закрыть это окно, то тут же сыпались алерты с предложением остаться на странице и пр.
Частенько такая реклама заставляла подпрыгнуть на стуле, интересное было время 👾
Важно ли время сборки проекта? Насколько важны эти 1-2 минуты разницы, когда у нас будет проходить пайплайн? Webpack vs Vite vs Parcel vs..
Наткнулся на статью о том, как мержить мультидайменшнал (многомерные) массивы и это неверотяно плохо.
В примере на приводят массив:
const myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];И далее 5 способов сделать его "плоским", т.е. превратить в:
[1, 2, 3, 4, 5, 6, 7, 8, 9]Вот только многомерный массив - это не только массив как в случае myArray, но и на пример массив вида:
[1,2,3,[4,5,6,[7,8,[9,10]]],11]И при таком раскладе, ни один из способов статьи не решает задачку от слова совсем. Самый очевидный способ на мой взгляд почему-то не попал в подборку, пикрил.
Уже давно люди экспериментируют и пишут на том же JS генераторы стихов/поэм или текстов.
Но как вам такая идея: написать ИИ, который будет генерировать гачимиксы? Почти все реплики из гачи - есть в сети, сделать из них словарь не проблема. Тоже самое касается и песен, текста к которым ищутся достаточно просто.
Вопрос только в том, как это сделать так, чтобы трек по итогу был еще и смешной :}
Таким простым способом можно проксировать запросы для обхода CORS, во время разработки с использованием webpack.
Способ не новый, но когда была необходимость почему-то даже не вспомнил о нем.
Anime memes - это плагин, который подходит к любой софтине жидбрейнс, что он делает, догадаетесь сами.
А еще есть плагин Nyan Progress Bar которые на все лоадеры добавляет анимацию нян-кэт!
UPD!
Vscode anime exts:
- Rainbow Fart Waifu
- Waifuwu
Как тебе такое, Илон Маск!?
Тред упоротых плагинов/аддонов объявляю открытым.
