Отново опит да съживя своята блогърска кариера. Модерно е да си ютубер, но моето лице е правено за блог.
Само, че Google ми се сърди, че сайта е много бавен. Все едно съм му обещал да стана шампион на “0.5 секунди зареждане при интернет от Марс”. Но понеже съм в добро настроение реших да му угодя.
Първото нещо, което направих е да раздвижа малко версията на PHP, която беше на сървъра. От съображение за сигурност няма да кажа коя е в момента, но мога да кажа, че PHP 7.3 дава крилаа!
Lighthouse-а обаче не отлепи от 0-та за Performance.
Набих всичко в кеша на Redis-а в жаление да мина по тънката лайсна, но не мърда и не мърда. #тегавина.
Lighthouse-а поне се опитва да дава акъл и ми каза, че хубаво би било да пусна сайта да работи с http2. И това му дадох! Трудно, защото то лесно да слушаш джендърите от Силициева/Силиконова долина “а-у http2 е де пута мадре”, ама не казват защо всеки туториал показва едно и също, ти го правиш и пак тъпия devtools показва http/1.1. Добре, че има и друг балъци като мен и са го написали “mod_http2 не мели брашно с mpm_prefork” и трябва да се спре. Но то пък PHP ползва prefork-а … Както и да е – направих му всичко, разбреших му http2, но Lighthouse-а продължва – нула, та нула!
От баба обаче знам, че снимките са големия враг на бързото зареждане. В един по-добър свят сигурно щях да вдигна един SageMaker и да обуча един модел от кой ъгъл се гледат тия снимки, така че само него да показвам, за да пестя килобайти, ама нали коронавируса чука на портите, затова направих най-мерзкото нещо на този свят … Само заради него си заслужавам 14 дни карантина! Отворих Marketplace-a на WordPress и си свалих … хех … плъгин.
И явно Google стана по-благосклонен към мен като видя колко ниско съм готов да падна и ми вдигна рейтинга от 0 та чак до 71.
Та сега въоръжен с благословията на “чичко Гугъл”, мисля да наблегна малко над статиите за Magento 2. Щото на нашите честоти такива липсват.
Наскоро бивш мой клиент (от времето, когато бях freelancer) се свърза с мен във връзка с проблем на сайта, по който работех. Понеже все още не са намерили разработчик, а пък имало по-голям проблем и ме помоли да погледна. Оказа се, че някой е обновил plugin на техния wordpress сайт и с това всички промени, които бях правил, за да се постигне желания резултат от клиента, са изчезнали.
Не че съм барникал по оригиналния код на plugin-а. Винаги използвам правилните hook-ве и понякога съм се изумявал какви трикове използвам само и само, за да запазя възможността за безпроблемно обновление. В случая създателя на plugin-а е направил изцяло нова версия и новата версия вече не беше съвместима със старата и всички филтри и действия бяха други. Дори темплейт езика, който използваха, беше сменен.
Първият съвет към клиента беше или да върнат старата версия на plugin-а или да инвестират малко пари и да използват новата (по-добрия вариант) и да изградят промените отново.
Вторият съвет (и причината да напиша тази статия) беше да се направят следните промени в сайта като цяло:
1. Да се инсталира plugin-a User Role Editor, с който да се забранят възможностите за обновяване на plugin-и и theme-и.
2. Обновленията винаги да стават през инстанцията на разработчика, да се тестват и тогава качват на production.
3. Да инсталира plugin-а User Activity Log, с който да се следи кой, какво и кога прави. Дори да използват един потребителски акаунт, поне да има лог на времето.
WordPress, с неговия подход да е лесна за употреба платформа, реално създава доста проблеми.
Комбинацията от Magento и PHPStorm може би е доста популярна сред колегите, които се занимават с Magento, но ако сложим и Vagrant в микса, таргет зоната на този пост може би е много малка. Все пак ще изложа няколко стъпки как да вържем xdebug, за да ни помага при разследването на проблем.
Моят обичаен начин на работа е:
Ubuntu като host операционна система
Серия от vagrant управлявани виртуални машини (пак с ubuntu)
PHP Storm за IDE
Първо трябва да се инсталира xdebug на виртуалната машина
След това отваряме php.ini за редация с вашия любим vim редактор.
Добавяме най-долу следния ред (може и да е различен при вас, затова вижте добре какво е “изплюл” инсталацията на xdebug)
zend_extension=/usr/lib/php/20131226/xdebug.so
Запишете файл и рестартирайте apache. Ако имате phpinfo файл, проверете дали xdebug разширението е видимо. Ако всичко е ОК, продължете напред. Ако не е, тук се разделяме с вас.
Пак отваряме php.ini и добавяме следните редове под този със zend_extension
Това ще зададе най-важните настройки на xdebug, а именно че е разрешен за ползване (remote_enable), ip адреса на който да търсим връзка с него, а също и port-а. Някъде тук започвайте да стискате палци да нямате firewall, който да забранява такива връзки.
Записваме и рестатираме apache. Уверете се, че съществуващите сайтове на виртуалната машина все още работят.
Следващите стъпки са вече в PHP Storm като целта е да го настроим така че да прави връзка към xdebug на vagrant машината.
Отворете проекта, който искате да debug-вате.
Изберете Run -> Edit configurations, a след това добавете нова “PHP Remote Debug” конфигурация. Кръстете я както желаете, аз обикновено избирам същото име като проекта, защото в повечето случаи на една виртуална машина имам само един проект и няма да шервам debug връзката с други проекти. Ако вие мислите да споделята връзката, то тогава е хубаво да изберете по-общо име.
След това трябва да избере сървър, което ще отвори поредния popup прозорец. Не се плашете. Въведете име на сървъра и същите IP и PORT, който по-рано записахме в xdebug конфигурацията в php.ini. На мен ми отне повече време, отколкото съм готов да споделя, докато разбера че IP-то е на xdebug сесията, а не на виртуалната машина.
Изберете mapping-а между файловете на хост машината и тези на сървъра. Реално, ако използвате vagrant и shared volumes, файловете са едни и същи, но в контекста PHP Storm, за него са различни.
File/Directory би трябвало да е попълнено по подразбиране, като само в “Absolute path on the server” има нужда от попълване. Попълнете пълния път до проекта на виртуалната машина. Би трябвало да е нещо като “/var/www/html” или “/var/www/vhosts/some-site.com”. Натиснете ENTER, за да се запише. Звучи малоумно, но не е толкова интуитивно и няколко пъти php storm ми изтрива стойността.
Това е конфигурацията на сървъра на debug конфигурацията. Натискате OK, за да запишете. Би трябвало да се окажете на предния popup. Въведете session_name за име на Ide key (session id). Това е необходимо,за да може да пускате и спирате debug сесията през browser-а. OK, OK, save.
(Пред)Последно!
Ако за първи път правите връзка между PHP Storm и PHP Remote Debug, трябва да кажете на PHP Storm да “слуша” за debug връзка като цяло. Това става от File -> Settings -> Language & Frameworks > PHP -> Debug. В десния панел трябва да има секция “Pre-configuration”, в която точка 3 трябва цъкнете на “Start listening”. ОК.
Ииии последно!
Трябва да си добавите разширение за Chrome, с което да пускате и спирате xdebug сесията от страна на browser-а. Това става посредством Xdebug helper. Ако не ми вярвате, че не е refaral, просто го потърсете в магазина на chrome. Инсталирате го и ще се появи една хлебарка в горния десен ъгъл. Не я пръскайте с Raid, че може да си повредите екрана. Отворете сайта, който искате да debug-вате и след това изберете сивата хлебарка и от нея цъкенете debug.
Ако все още не сте се отказали, вече е време за debug-ване.
За да валидирате, че всичко ви е ОК, намерете функция, която знаете че на 100% ще се извика при refresh на страницата. В index.php или в някой controller. В случая на Magento, може да отворите app/code/Mage/Catalog/controllers/ProductController.php и viewAction метода.
Цъкате с левия бутон на toolbar, където са номерата на редовете и срещу дефиницията на $categoryId. Ще се появи една червена точка. Казва се breakpoint.
Отворете която и да било продуктова страница в Magento.
Magic!
Това е 🙂 Няма да продължавам с обяснение как се debug-ва, защото и аз толкова знам. Ако искате да спрете debug сесията, натиснете зеления триъгълник и премахнете breakpoint-а като го натиснете, все едно е хлебарката.
I always wanted to start and finish mine personal web project. Up until 9 months I still wasn’t. No, I’m not pregnant nor I gave birth recently. I started a WordPress theme project with a friend of mine and now, finally, we launched it. I feel awesome and uplifted – to start something, to put a lot of work and a lot of sleepless nights in it … it is something to live for. I guess you might say it something like having a baby … shits are still there, only the smell is gone.
Now I more excited to go on with that project than ever. Why? Not because I’m hopping to earn big money or something like that. I want to learn. Having a personal project, a project that has future, a project that somebody wants to use it, and pay for it, is something to look forward to. But you can’t except just to find a designer, write down some code and everything to be in the right place. No, you have to put a lot of work on, you have to plan it properly, you have to manage your day job so the job is now suffering from your sleepiness or that you are tired. So … you learn how to do all of this.
Github
One of the best things I learned is how to use Github and its features. I can honestly say: I love labels. So simple, and yet so powerful. Mark something as bug, or as a question to your team mate, or that something will be done in the future, is a customer request, a note to yourself or even a story. Small things matters.
Github of course is not just a label maker. It is a powerful tool. You can manage your project, write down documentation, keep track on where your teammates are, synchronise your work and more. I never had a good project management system so far – nor for my personal projects neither in my previous jobs. In my current one we are using JIRA but of course this is an overkill for small project like a WordPress theme. After pocking around in GIthub I realise that project management is nothing more than notes and keeping tracks of them. So we are back to the label making.
Verbal communications.
Since we are using so much of Skype and emails these days we started working mainly with them to communicate and keep the project going on. Wrong! Just wrong. It is far better way to understand each other if you call each other a couple of times a week, give each other a quick summary of where everybody is, and where everybody is going to. Just like in a daily. I don’t have metrics to show them to you but it was a real boost to my productivity as soon as we started doing these calls. I realise that I can’t call my friend and say: “Oh, I haven’t done anything for the past few days.” It is just now me. It is easy to write it in an email – it is casual, there is no fear of the non verbal response. You can always make up an excuse of why you did nothing. In order to overcome this small fear of mine … I just sat on my ass and worked.
The power of giving back.
I use a lot of open-source projects. A lot! But I never contribute to one. I want but it seams that the projects I’m using are either managed by far smart guys than me and I have nothing to give them or I don’t want to just because. Sure I pushed some bug fixes here and there but I’m not sure if someone even gave a fuck about that.
With that project I had an idea which helped me to fulfil that dream. After we submitted the team to the guys at Envanto we were soft rejected. One of the reasons for that was that we don’t use placeholders for our images. We used actual images which we bought from some stock site but we don’t have the right to resell them. So we had to replace all of the demo content images with images from placehold.it. A task that is not that easy. I don’t really know how the other guys in Themeforest are doing this but replacing dozens of images in an XML file is not my dream job. So I decided to create a small piece of code that will automate our job. And so I did. And this is how https://github.com/denchev/Wordpress-to-placehold.it was born. And the best part of it is that 2 or 3 guys forked it. I know it is not a major thing but I’m happy about it.
There are many technical stuff I learned about WordPress and WordPress themes during the last 9 months which I’m not going to share right now. Most of them are well known to someone who works with WP for long time, the others are complicated to some extend. I’m not going to share these knowledge not that I want to keep it to myself but because I want to be sure I’ll give back something that means something and not just another WordPress theme tutorial.
Well that was something that I wanted to “say” for quite sometime but I wanted to be a released author before making any conclusions.
If you want you can do a quick look at our theme Estetico Premium Real Estate WP Theme please do it and I’ll be happy if you drop some comment how to improve the theme … because as I said … I want to learn.
Last night I spent some time with the guys from West London Hack Night and I enjoyed it a lot. That night’s topic of choice was “Brainfuck interpreter“. Unfortunately there wasn’t a PHP team so I had to be a part of the JavaScript team and … we failed to deliver. But to be honest the main reason was that we spent much time trying to understand how Brainfuck works.
Well … after a couple of hours today I created a working interpreter but with PHP. It will be an easy job to do it as JavaScript but I see no reason for that – there are plenty of JavaScript implementations out there (and PHP, and any other language).
Anyway, if you have some questions or even better – suggestions how to make it better, please put a comment or just clone the repo and push, push, push 🙂
After more than 4 months of late night hours I’m really pleased to see my (and my partner’s) work finally on Themeforest.
We’ve been working really hard to create this premium real estate HTML template and we are focusing on moving to the next phase now – fully functional, cutting edge and out of the box properties/estates manager in a form of a WordPress theme. We know that there are some really good competitors but we will try “to make waves” 🙂
Нещо ме обвзе безсъние и реших да пусна XAMPP на служебния си лаптоп и да разцъкам няколко неща на PHP, които отдавна отлагам. Би трябвало да е много проста задача – свалям XAMPP, натискам Next, пускам контролния панел и пускам Apache и MySQL. Почти! Нещо беше заело порт 80. Често срещан проблем и в повечето ситуации това е Skype. За първи път обаче се оказа, че не е от него. Хммм …
netstat -ano
Ахаа … PID 4 … Я да видим какво ще стане ако го прекратя този процес … Лоша идея (не го правете, освен ако не обичате Blue Screen of Death)
Следващата логична стъпка в решаването на проблема беше да “Google-на” проблема. Потенциалните решения на проблема се оказаха доста: Windows Remote Management, SQL Server, Web Deployment Agent Service. За съжаление спирането на тези услуги (services) не постигна желания от мен резултат, а именно освобождаването на порт 80.
За късмет намерих каквото ми трябваше в този сайт: http://superuser.com/a/443523/205528
Следната команда показва списък с услугите/приложенията, които използват и/или зависят от HTTP протокола.
net stop HTTP
Алелуя! Много полезно! Кой би предположил, че Print Spooler?! ще заеме порт 80, но се оказа че го прави.
Работата ми като уеб разработчик е свързана с постоянна смяна на browser-и. Всеки сайт, всеки компонент, всяка промяна, трябва да се тества на няколко browser-а и няколко устройства. Винаги обаче се започва с конкретен browser, който дава най-голяма увереност на разработчика, че ще се справи бързо с основния проблем, а тестовете на останалите ще са само за леко пипване (пхах …). Повечето колеги работят или с Firefox или с Google Chrome. Аз съм работил много и с Firefox, и с Chrome през различни периоди, но през последните две години отрочето на Google ми е неизменна част от ежедневната работа, а и забавление. Няколкото причини, поради които го предпочитам пред Firefox са:
1. Показва процентите при ъплоуд на файлове.
Много полезно свойство. Дребно е, но разбираш колко процента от файлове са качени.
2. Не блокира останалите табове при HTTP authentication.
Ако Firefox бъде рестартиран поради някаква причина и след това се отвори отново и се заредят всички последно отворени табове, ако в някой от тях случайно има нужда от HTTP authentication, Firefox не дава възможност да избереш някой от другите активни табове. Какво става ако паролата за този сайт е записана на пощата, която е на друг таб? Трябва да прекратя текущата authentication сесия, да намеря паролата и едва тогава да се върна и презаредя страницата. Chrome дава свободно възможност да се ровичка в други табове през това време.
3. Не изисква рестартиране след инсталация на плъгин.
Не го разбирам това. 18 версии по-късно, Firefox все още изисква целия browser да се рестартира при инсталация на Add-on. Защо? Може би има някакво логично обяснение, но след като Chrome няма нужда от рестарт, значи не е невъзможно да се направи.
4. Chrome има интегрирани development инструменти.
Още една от големите мистерии на Firefox за мен. Firebug е уникално приложение. То беше и основната причина Firefox да дръпне толкова много – всички уеб разработчици го използваха, оптимизираха сайтовете първо за Firefox, а след това за останалите и респективно повече хора започнаха да използват Firefox, защото сайтовете изглеждат най-добре там. И въпреки това, Firebug си остана външно приложение, което се инсталира допълнително. Safari, Chrome, Opera, дори Internet Explorer предлгат инструменти за разработване по подразбиране.
5. Не ми се губят addon-и след неочакван рестарт.
Може само на мен да се случва това, но няколко пъти след неочакван рестарт на Firefox (спиране на ток) след пускането му отново част от plugin-ите ми да ги няма. Най-вече Firebug.
6. Инкогнито в нов прозорец.
Любимата функция на всички порноманиаци – инкогнито. Каквото се случва в private browsing mode, остава в private browsing mode. Много удобно е да се отваря в изцяло нов прозорец, за да не пречи на нормалните действия през това време. Отваряш, свърваш (ъхъм…) си работата и го затваряш. Firefox продължават да имат проблем в това отношение, тъй като при тях текущата сесия се записва и се затваря, за да се отвори само private browsing-а. Много често обаче аз направо “бия хикса” и това, че предната сесия ми е била записана, вече няма значение – няма я.
7. Превеждане на чуждоезикови страници.
Въпреки че повечето сайтове, които ползвам са на български или английски, понякога се налага да използвам и сайтове, които са на език, който не разбирам. Понякога тези сайтове имат превод и на английски, но понякога нямат (вътрешно фирмена система за поръчка на билети за германски събития). Тогава много удобно, само с две натискания на мишката, мога да разбера какво се крие зад думите “Auch in diesem Jarr …”.
8. Синхронизация между устройства.
Firefox няма как да предложат алтернатива на това, тъй като това е строго специфично за Chrome и най-вече Google. С навлизането на Android и наличието на Chrome на все повече платформи, логично беше да има и възможност за синхронизация на историята, bookmarks и текущите отворени сесии.
9. Голямо поле за изписване на адрес + auto suggestions.
Интерфейсът на Chrome е по-удобен за мен. Има огромен address bar, където бутоните и останалите интерфейсни компоненти са редуцирани до минимум. Много интелигентно са внедрили възможност за търсене директно в полето за писане на адреси, като така премахват нуждата от допълнително поле, както е във Firefox (мисля, че auto suggestion-а беше въпрос на избор от настройките на Firefox).
10. По-бързо движение със стандартите.
Преди да се появи Chrome на хоризонта и да въведе шест седмичните цикли на пускане на нова версия, Firefox и Internet Explorer правеха големи обновления “once in a blue moon”. Това бавеше внедряването и използването на новите уеб стандарти.
—
Въпреки тези си недостатъци, Firefox си остава страхотен browser. Той има няколко неща, които Chrome има какво да наваксва – smooth scrolling, smooth fonts, dom tab, Chrome не се справя много плавно с движещите се елементи.
Дали ще е Chrome или Firefox, Coca-Cola или Pepsi, Android или iOS, Левски или ЦСКА, всеки човека има своите предпочитания и в края на деня, важното е да му е удобно и приятно с избора, който е направил.
След като преди няколко седмици занесох лаптопа си на ремонт реших, че ще е хубаво и да направя едно прочистване на диска и започна всичко на чисто. Инсталирах си любимия Windows 7 и Ubuntu. Разбира се, Ubuntu не хареса wireless картата ми … тогава си спомних какви мъки бяха предния път (преди години), за да успея да подкарам този модул. След няколко опита да го подкарам се отказах.
Днес обаче реших да правя няколко теста на Ubuntu-тото си и искам – не искам, трябваше да подкарам картата. Иначе трябваше да си купя 100 метра кабел 🙂
Предполагам, че за linux гурутата следните стъпки ще се сторят смешни, а може би и излишни, но аз никога не съм се смятал за такъв и затова ще (си) напиша едно ръководство, за да може следващия път като ми се наложи, да има откъде да прочета.
Пичът е написал много точно какво трябва да се направи, за да се заобиколи тази грешка, но аз ще го копирам тук също така. Такъв ценен ресурс не бива да се губи.
След това довършвате инсталацията на картата с: make; sudo make install; sudo depmod; sudo modprobe wl
Дайте малко време на Ubuntu да се освести от “шока” и би трябвало да се виждат наличните wireless мрежи.
Ако някой от горните линкове не работи или не е актуален, може да свалите копие на нужните файлове от моя блог. Архивът включва source кода за 32/64 битови версии, README файла, а също и двата patch файла.
P.S. Бележка до мене си: Благодаря ти, Маруш от 12 януари 2013 година, че не те е домързяло, за да напишеш това ръководство.
Това винаги ме е мъчило! Как ли пробвах – CTRL + V, с десен бутон на мишката … не става. И ако трябваше да използвам git bash и да използвам текст/адрес, всичко се пишеш на ръка. Можете да си представите колко е досадно и колко грешки могат да се получат така.
Съвсем случайно открих, че ако се копира текст и се натисне … Insert, текста ще се “paste” в конзолата 🙂
