en
Feedback
☕️ '${Вронтенд}'

☕️ '${Вронтенд}'

Open in Telegram

Пишу фронтенд, пишу про фронтенд. Публикую ваши интересные материалы по фронту, писать @catanix 👩🏼‍💻

Show more
332
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
Самая худшая Ui либа для Vue - Buefy! Уже неделю горит с buefy и того, что это достаточно массовый продукт при всех своих нед
Самая худшая Ui либа для Vue - Buefy! Уже неделю горит с buefy и того, что это достаточно массовый продукт при всех своих недостатках, а они на самом деле критичные. Банальное обновление либы может привести к тому, что у вас сломается все приложение, а документации к старой версии вы ВНИМАНИЕ! не найдете.. Кстати еще версии могут различаться набором достаточно важных CSS классов, пропсов или слотов, а обратной совместимости нет))0 В лучшем случае будет хоть какая-то инфорация на их гитхабе, а в худшем придется лезть в исходники компонентов. При том что есть рассово-верный Vuetify мне совсем не понятно зачем и почему юзают Buefy. Не надо так. Какие киты вы юзаете во вью для всяких кабинетиков/панелей? #Vue #VueJs #Buefy #Vuetify #Ui #Uikit

Интерактивный курс по комбинациям клавиш в intellij (Webstorm/Phpstorm). Тык!
Интерактивный курс по комбинациям клавиш в intellij (Webstorm/Phpstorm). Тык!

Я очень не люблю, когда идет работа с данными из компонента, запросики, стора, все только непосредственно из пейджи (не важно
Я очень не люблю, когда идет работа с данными из компонента, запросики, стора, все только непосредственно из пейджи (не важно вуй то, реакт или еще что). Иногда легаси код содержит явные проблемы в архитектуре из-за которых нам приходится городить костыли и не так давно, я нашел очевидное с точки зрения 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 se
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 порт св
Nginx reverse proxy часть 1. Есть такая базовая проблема, когда фронт и бэк лежат рядом на одном сервере& При этом 80 порт свободный у нас один (если ты не знаешь почему 80 и вообще что за штука эти порты - земля тебе пухом братишка). Как заставить их работать вместе без явного указания порта? Nginx reverse proxy! В чате фронтендеров на пару тысяч человек, только человек 5-10 ответили о том, как они деплоят свои приложения рядом с бэком и вообще написали о том, что фронт должен хотя бы понимать что есть nginx и как его настроить. Для начала установим nginx и приготовимся редачить конфиги, продолжение в следующем посте..

Ставь лайк если пиксель перфект для лохов 👍🏻 Или когда верстайло позаботился об UX
Ставь лайк если пиксель перфект для лохов 👍🏻 Или когда верстайло позаботился об UX

Lite Deploy node js приложения на сервере (vps/vds) с помощью PM2. Part 3 - послесловие. В довесок докину привлекательных фич
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 максим
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 - предисловие. Очень часто встречаю людей, которые
Lite Deploy node js приложения на сервере (vps/vds) с помощью PM2. Part 1 - предисловие. Очень часто встречаю людей, которые имея внушительный опыт и знания, да даже работая на должности в компаниях попросту не знают как выгрузить их код в бой. PM2 - интересный, простой и удобный process manager, который поддерживает работу вашего приложения, перезапускает его если оно падает, сохраняет логи и выдает всю статистику. Да, для статики у нас есть всякие шаред-хостинги (кстати предпочитаю не использовать их вообще), nginx и ко, да и вообще куча способов, но в этой серии постов покажу наверное самый простой.

Не баян, а классика, или доклад который должен посмотреть любой погромист https://www.youtube.com/watch?v=igWSGO52Ibg

Полезная ссыл_очка, регулярки на все случаи жизни: https://rgxp.ru/
Полезная ссыл_очка, регулярки на все случаи жизни: https://rgxp.ru/

А помнит кто-нибудь такой формат рекламы как pop-up? Еще в детстве, я читал книгу Алекса Эклсера про веб разработку и seo, ещ
А помнит кто-нибудь такой формат рекламы как pop-up? Еще в детстве, я читал книгу Алекса Эклсера про веб разработку и seo, еще в далеком 2007, он писал о том, что это плохо, но жили мы с этим кажется до 2013-2014 года. Причем попап, который не закрывается пока ты не перейдешь на рекламируемый ресурс - это были еще ягодки. В те времена у вас мог отработать скрипт на какой-нибудь открытой вкладке, открыть новую вкладку, где на полной громкости, какой-нибудь голос начал бы вам впаривать что-нибудь уровня возбуждающей жвачки. А если попытаться закрыть это окно, то тут же сыпались алерты с предложением остаться на странице и пр. Частенько такая реклама заставляла подпрыгнуть на стуле, интересное было время 👾

Важно ли время сборки проекта? Насколько важны эти 1-2 минуты разницы, когда у нас будет проходить пайплайн? Webpack vs Vite vs Parcel vs..
Anonymous voting

Наткнулся на статью о том, как мержить мультидайменшнал (многомерные) массивы и это неверотяно плохо. В примере на приводят м
Наткнулся на статью о том, как мержить мультидайменшнал (многомерные) массивы и это неверотяно плохо. В примере на приводят массив:
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 генераторы стихов/поэм или текстов. Но как вам такая идея: написать ИИ,
Уже давно люди экспериментируют и пишут на том же JS генераторы стихов/поэм или текстов. Но как вам такая идея: написать ИИ, который будет генерировать гачимиксы? Почти все реплики из гачи - есть в сети, сделать из них словарь не проблема. Тоже самое касается и песен, текста к которым ищутся достаточно просто. Вопрос только в том, как это сделать так, чтобы трек по итогу был еще и смешной :}

Таким простым способом можно проксировать запросы для обхода CORS, во время разработки с использованием webpack. Способ не но
Таким простым способом можно проксировать запросы для обхода CORS, во время разработки с использованием webpack. Способ не новый, но когда была необходимость почему-то даже не вспомнил о нем.

Anime memes - это плагин, который подходит к любой софтине жидбрейнс, что он делает, догадаетесь сами. А еще есть плагин Nyan Progress Bar которые на все лоадеры добавляет анимацию нян-кэт! UPD! Vscode anime exts: - Rainbow Fart Waifu - Waifuwu Как тебе такое, Илон Маск!? Тред упоротых плагинов/аддонов объявляю открытым.