Максимально технический пост с вопросом в конце

Итак, последние 2 недели работал над самым интересным в этом проекте — расчёт рационов. Вчера закончил и возник один вопрос, на который я не знаю ответ. Вероятно из-за отсутствия опыта в работе с такими проектами.

Для понимания о чём речь, картинку страницы скину в комментарии.

Сейчас, когда нажимаю на переключатель, на сервер идёт запрос по API и вносит нужный изменения в БД. Но мне как-то нужно пересчитать данные в таблице и показать изменения пользователю.

Вариант один.
Уровень сложности 1/10:
🔳⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️
Самый простой вариант. После получения успешного ответа от сервера, обновлять страницу сайта. Тем самым будут подтягиваться новые обновлённые данные. Постоянный дерганья страницы не принесёт удовольствия от пользования приложением. Я встречал такие варианты и от этого становилось грустно.

Вариант два.
Уровень сложности 4/10:
🔳🔳🔳🔳⬜️⬜️⬜️⬜️⬜️⬜️
Возвращать JSON всей вкладки рациона и вставлять в нужное место с обновлёнными данными. Уже лучше, нет перегрузки страницы, всё работает. Но меня смущает то, что придётся работать с большим JSON, не уверен, что сервер скажет спасибо за это. Ещё смущает, что для добавления одного корма в рацион, мне придётся дёргать остальные корма из рациона и затрагивать ту часть таблицы, которая остаётся неизменной. Слишком много действий на сервере, при переключении на сайте одного чекбокса.

Вариант три.
Уровень сложности 8/10:
🔳🔳🔳🔳🔳🔳🔳🔳⬜️⬜️
Самый сложный вариант, который пришёл мне в голову. Получать от сервера только те данные, которые необходимо обновить на сайте после переключения чекбокса или изменения веса. Придётся дописывать каждый эндпоинт, чтоб возвращал только нужные данные, потом придумать как вставить обновлённые данные в нужные ячейки таблицы.

Пример 1: После внесения корма в рацион, мне нужно пересчитать всю строку «Итого в рационе» и «Отклонение от нормы».
Пример 2: После изменения веса корма, нужно пересчитать все показатели этого корма под новый вес, пересчитать всю строку «Итого в рационе» и «Отклонение от нормы».
Пример 3: При удалении корма, нужно убрать корм из рациона, по идее вернуть новый список всех кормов с новой индексацией, пересчитать «Итого в рационе» и «Отклонение от нормы».

Итого, кто-то уже реализовывал подобное? Как обновляли данные в таблице? Напишите в комментариях или мне в личку @vadimfominov. Всем спасибо 🤎

Про последнюю задачу

Сделал уже давно, сейчас тестируют. Нашел время поделиться, как всё реализовал.

В общем, самые часто используемые переключатели и поля для ввода обновляю без перегрузки страницы. Написал на JS. Это позволяет быстро считать и не ждать пока обновится страница после каждого чиха.

Форму с данными питомца — обновляю на сервере по кнопке и перезагружаю страницу чтоб показать изменения пользователю. Добавил для неё кнопку, явно видно, что нужно обновить форму по кнопке. Здесь не делал авто обновление без перегрузки страницы, так как дополнительно пришлось бы обновлять и 90% таблицы, а это месяц работы.

В комментах предлагали несколько вариантов, что-то я взял от варианта @Lord_Farquaaaad и что-то по рекомендациям Станислава @Gzassh. Спасибо всем, кто откликнулся

Про SVG иконки на сайте

Встретил в проекте SVG иконку, которую загрузили как обычную картинку, через тег IMG. Задумался, почему я так не делаю.

Я использую PHP функцию, которая возвращает HTML код иконки и вот почему:
1) не нужно делать дополнительный запрос к серверу, как с вариантом через тег IMG
2) в коде на странице не висит SVGшный мусор, как если вставлять код сразу на страницу
3) аккуратно можно использовать несколько раз
4) иногда, одна иконка нужна в разных цветах. Это решается путём передачи в функцию нужного цвета

Про неправильную почту отправителя в заявке

Как из этого: noreply@unverified.beget.ru, noreply@unverified.beget.ru
Сделал это: НАЗВАНИЕ КОМПАНИИ mail@web-domen.ru

В общем, приходят заявки, но почта и имя отправителя не те.
Форма — плагин Contact Form 7, там всё правильно указано.

Никогда с такой проблемой не сталкивался, но нашел простое решение. Код оставлю в комментах.

Про поиск работы и скам

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

Такие сообщения встречаются по 3-5 раз в неделю. За этим я слежу уже год и вот почему одни не могут найти работу, а вторых постоянно кидают после перевода предоплаты.

Обратите внимание на свои аккаунты или аккаунты исполнителей:
1) нет своей фотографии в профиле или стоит фото из 2010 года в шакальном качестве
2) нет имени, обычно какой-то ник, смайлы или что-то из спецсимволов
3) в описании профиля ничего не указано или статус из ВК
4) нет своего закреплённого ТГ канала или ссылки на портфолио

Если ищешь работу и хоть один пункт про тебя — исправь это.

Если ищешь исполнителя и у него чего-то не хватает — задумайся 5 раз, прежде чем переводить деньги.

Пример: Надежда делает карточки для Wildberries и Ozon, она создала канал и добавила туда друзей и родственников. Этого вполне хватает, чтоб показать свои навыки, работы и получать заказы.
Посмотрите сами, что делает: @nadzeya_krDesigner

Как я сделал новую страницу по макету и всё переделал

Следующий большой этап в проекте — написать форму, в которой 20-30 полей и по этим данным создать PDF документ.

В начале это выглядело как блок с шестью вкладками и в каждой вкладке 5-15 полей для ввода. Я всё перенёс из макета на сайт и это было ужасно. Слишком много всего в одном месте: вкладки, поля для ввода, в которых не хватает места чтоб вписать весь текст, сама конструкция создания страницы — сложная. Захотелось переделать.

Убрал табы и сделал всё одним списком. Показал основные разделы, а для быстрой навигации добавил сайдбар. Созвонился с заказчиком — утвердили.

Начал делать функционал.
1) Есть просто поля ввода, с ними проблем нет, всё просто.
2) Дальше идёт выпадающий список с владельцами питомцев. Идея такая: выбрал владельца и все его данные и данные его питомца записывать в форму. Немного сложнее, чем поле для ввода.
3) Выпадающий список, но уже с рационами. При выборе рациона, нужно достать из него все продукты, привести к нужному формату и записать в определённые поля для ввода.
4) Ещё один выпадающий список, но нужно собрать совсем другие данные и визуально показать их пользователю в виде таблицы.
5) 2 переключателя и графики к ним, которые создаются на основе данных о питомцев.

Задача со звёздочкой оказалась написать функционал, которые соберёт всю эту информацию, создаст страницу на сайте и всё это сохранит в ней. Потребовалось 5 часов на эту работу. Потом за 1 час написал функционал для обновления имеющейся информации на странице документа.

Пока на этом этапе — создаю страницу для будущего документа.

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

Про манипуляции в общении

1) от клиентов:
— Когда ещё до начала работы говорят, какой же я хороший специалист и им очень повезло со мной работать.
— Специалисту твоего уровня, не составит труда сделать это бесплатно / быстро / сверх условий?
— Можете сейчас сделать скидку, а мы вас порекомендуем своим знакомым
— Мы вам обязательно ещё заплатим, просто сейчас нет денег
— Что-то из нового. В начале рассказываю про функционал, который им обязательно нужен на сайте. Обычно это что-то масштабное, типо Авито или Валдберрис к примеру, но в конце добавляют, что это должен быть MVP.

2) от исполнителей:
— Войдите в положение. У меня только ваш заказ, можете сейчас скинуть деньги, я обязательно всё выполню, просто сейчас: комуналку нужно оплатить, платёж по кредиту, ребенок болеет и нужны деньги на лекарства.

Напишите в комментариях, с чем вы сами сталкивались?

Сегодня 34

Год был интересным. В предвкушении большого кайфа от следующего...

«Съесть слона по кусочкам»

В каждой книге по тайм-менеджменту про это пишут. Это база. Но что странно, пока сам не начал дробить большие проекты на мелкие задачи, про слона из книги даже не вспоминал. Прихожу к тому, что учусь на своих ошибках, а не по советам умных людей из книг.

Свой следующий большой этап работы я откладывал и делал кое-как первые три дня. Не знал с чего лучше начать, с какой стороны подойти. Сперва хотел переключиться на разработку личного кабинета, там всё просто и понятно. В какой-то момент поймал себя на мысли, что это уже было. С этими таблицами и расчётами или ещё раньше, когда начинал проект. Сел, разбил максимально подробно весь этап на понятные и маленькие задачи. Получилось 87 штук.

Первый раз мне понадобилось гораздо больше времени, чтоб отловить крупную задачу. Кажется, что все они обычные, не стоит тратить время на дробление, просто бери и делай. Сейчас на это ушло три дня. Надеюсь, что следующий раз такие задачи буду видеть сразу и не страдать хернёй.

Набросайте огня 👇

‼️Ищем WordPress разработчика во фриланс команду.

Базовый набор для работы:
— HTML, CSS (Flexbox и Grid CSS, будет плюсом SCSS)
— JS (в том числе jQuery), PHP
— умение интегрировать вёрстку в WordPress с применением ACF полей, в том числе интернет-магазины на базе WooCommerce.
— опыт работы с мультиязычными, мультирегиональными сайтами, API интеграциями
— знание Ajax, API запросов.

Будет плюсом, если работали с 1С Битрикс.

Не откликайтесь, если хотя бы 1 из 4 пунктов из этого поста про вас: https://t.me/wordpress_by/669

Оплата сдельная по часам, либо по фиксированной сумме за задачу:
- 1000р/час для джунов, по навыкам есть только три первых пункта требований,
- 1500р/час если по навыкам есть всё, что описано выше.

Условия:
- удалённая работа, гибкий график.
- работа в таск-менеджере, видеосозвоны по необходимости, в том числе и с клиентами.
- оплата по договору с самозанятыми/ИП.
- команда с взаимоподдержкой.

Предпочтительно полный фриланс.

Писать в ЛС: @vadimfominov

Отвечу всем после 15.00

Запускаю точку по ремонту велосипедов

Мне нравится кататься на велосипеде, особенно по периметру своего города. Получается заезд на 3 часа и 40км. Прошло 2 года с момента покупки и у меня перестали работать тормоза. Так как руки у меня растут из нужного места, то я полез разбираться с ними сам.

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

В общем, развернул мастерскую по ремонту велосипедов у себя перед домом, начал крутить. Сын рядом бегает, даю ему помогать. За 40 минут получилось разобраться с мелкими деталями тормозов. Поставил всё на место, начал тестировать. 

В начале просто на месте понажимал ручку тормоза, изменений нет. Потом немного проехался и нажимал тормоз — результата ноль. Забил хер на задние тормоза, буду аккуратно тормозить передним колесом, пока они работают.

Покопавшись в интернете, нашел вариант: нужно залить что-то типо тормозной жидкости. Только пока не понял куда, сколько и какой именно. Вот такая история с не счастливым концом 😁

У кого был опыт ремонта велосипедов? Только не из детстве, там одна проблема была — цепь слетала.

Какого хера functions.php абсолютно пустой??

Я хорошо умею читать код на PHP или JS. Обычно делаю сайты или функционал к ним с нуля, практически без плагинов или готовых решений. С плагином WooCommerce я не работал последние 2 года. Сегодня прилетела простая задача: нужно возле скидочной цены показать сколько процентов скидка. К примеру, цена товара — 1000р, а по скидке будет за 800р, значит возле 800 нужно показать -20%.

На первый взгляд, очень простая задача. DeepSeek сразу показал код-решение, который я добавил в functions.php и пошёл готовить себе кофе, так как задача практически закрыта. Когда пришёл обратно и сел за комп, я был «удивлён» от происходящего.

Сайт прилёг отдохнуть. Моя вина? Не знаю, но решать её точно мне. Открыл бегет — лучший хостинг из тех 14, с которыми я работал. Нашел файл, в который я добавил свой код и «удивился» во второй раз. Он. Сука. Был. Пустой. Какого хера?? Подумал я и полез скачивать вчерашний бэкап. 

Сайт запустил в течении 10 минут. Обновил PHP код и проверил его работу на сайте. 
По-моему, всё работает отлично — подумал я. 
«Хер там» — сказал вариативный товар. 
Нарисовалась следующая проблема, о которой я не знал — при выборе вариаций, новые цены подтягиваются через Ajax и перезаписывают мои проценты. 

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

Уже прошло полтора часа, а пятиминутная задача не сдвинулась с места. ПЗДЦ

Мне не хотелось погружаться так глубоко с этой «простой» задачей. И тут я придумал банально простое решение: мне не нужно считать процент на бэке, искать все возможные комбинации для товаров, чтоб всё учесть. Мне достаточно посчитать процент на фронте, когда обе цены уже пришли с сервера и доступны. Примерно за 10 минут я написал нужную функцию, дёргаю её при первой загрузки страницы и при выборе вариаций. Всё прекрасно заработало.

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

Набросайте огня под постом 👇

JQuery всё.

С 2020 года я создаю сайты на Wordpress. Ещё раньше начал изучать, что такое верстка. jQuery нужен был чтоб открыть попап, сделать табы, аккордеон или слайдер через Slick slider.

Про оптимизацию я тогда не думал. Главное, что сайт работает — это уже успех. В какой-то момент просто работающего сайта стало мало и я начал интересоваться, как сделать его не только работающим, но и быстрым. jQuery — одна из проблем, которая всегда появлялась в рекомендациях по улучшению скорости работы. Чтоб её решить, нужно освоить новый язык — Javascript. Но изучать я его не хотел, для меня он был непонятным и сложным. Погружаться в изучение не планировал. Меня пугало обращение к элементу, дальше я уже не лез, считая «раз к элементу так сложно обратиться, то дальше будет ещё хуже». 

Для примера, вот создание переменной в jQuery и в JS:
const editButton = $(‘#edit-button’);
const editButton = document.getElementById('edit-button');

Всё изменилось, когда в сети запустили истории про ГПТ. Он легко смог переводить мой jQuery в JS. Так началось моё изучение этого языка программирования. По началу я разбирал код, который переводил мне ГПТ. Смотрел как и что написано, сравнивал со своим аналогом на jQuery. Потом что-то писал сам на JS, что-то сложное для меня писал на jQuery и давал ГПТ перевести на JS. Этот период длился не долго, я даже не заметил, как перестал это делать. Начал писать свой код на JS, а если не знал какой метод использовать, то уточнял у ГПТ какой метод сделает то, что мне нужно. К примеру: какой метод найдёт нужного родителя или как проверить, что у элемента уже есть определённый класс.

В общем, так я и перешел от jQuery к Javascript. Теперь это не большой и страшный зверь.

Ещё один важный элемент для оптимизации сайта — это уметь читать Network в браузере и разобраться с картинками.
Помогите решить, какой следующий пост написать. 

🤎 Про работу с Network (Сеть) в браузере
👍 Про отложенную загрузку картинок на сайте

Про отложенную загрузку картинок на сайте

Есть достаточно плагинов, которые делаю отложенную загрузку картинок, будет ещё один. Моим клиентам и мне не понравилось, что все они с одним минусом — картинки загружаются в момент появления их на экране. К примеру, зашел я на сайт, страница загрузилась на 100%, потом начинаю скроллить чуть ниже и вместо галерее я вижу пустоту на секунду и потом по очереди подгружаются картинки. В принципе, так работает ленивая загрузка картинок. Они начинают загружаться только тогда, когда появляются в зоне видимости. Это бесит. Вроде как сайт полностью загрузился и всё должно работать, но картинки продолжают подгружаться.

Я начал разбираться, как это исправить. Своё решение упаковал в плагин.

WP Lazy Load Images — плагин, для отложенной загрузки изображений на сайте. Он начинает загружать картинки не в моменте появления их в зоне видимости, а заранее, за 1 экран до зоны видимости. Таким образом, при первой загрузки страницы я не загружаю одновременно все картинки на странице, только с первого и второго экрана. При скролле страницы у меня картинки начинают загружаться на шаг вперёд и пользователь визуально не видит загрузку картинок в моменте.

❗️❗️Важное замечание. Плагин работает только с картинками, которые загружаются через the_content и Гутенберг блоки. Если тему писать при помощи HTML + PHP + ACF, то для картинок атрибут src нужно заменить на data-src и всё будет работать.

Плагин доступен только для подписчиков канала, можно забрать в боте: @wordpress_by_bot

Набросайте огня 👇

Первый сплав на байдарках: как мы едва не перевернулись, но всё равно получили кайф

Мы никогда раньше не сплавлялись всей семьёй — ни опыта, ни особой подготовки, ни 10 часов просмотра видосов на ютубе на эту тему. Решили попробовать: река спокойная, ширина 3-6 метров, глубина 40-150 см, течение спокойное — вроде бы ничего сложного. Но, как оказалось, даже на такой воде можно получить порцию адреналина.

Сплав длился три часа — это большой плюс и не сравнимо с аттракционами в парках по 5-10 минут. Атмосфера шикарная: солнце, вода блестит, птицы поют, бабочки и стрекозы летают, иногда рыбу обгоняли. Но даже при такой атмосфере, случались адреналиновые моменты.

Разок мы боком заплыли на берег, я уже мысленно представил, как мы все переворачиваемся в воду вместе с вещами. Чудом удержались. Потом трижды застревали — байдарка упиралась в какие-то коряги, и приходилось толкать её, сидя в ней же. Через 2 часа сыну надоело сидеть и он ехал стоя, где это возможно.

Еды взяли очень мало — думали, три часа, чего уж там. Но через 40 минут печеньки закончились и хотелось чего-то ещё. Хорошо, другие сплавщики подкармливали ребёнка: кто-то дал яблоко, кто-то печеньку. Люди на воде — самые добрые, кажется.

После финиша ещё полтора часа ждали остальных — наша группа растянулась по всей реке. Кто-то обгонял, кто-то не спешил — каждый плыл в своём темпе. А мы с сыном всё это время бросали камни с дороги в деревья, смеялись и вспоминали, как прошёл сплав.

Однозначно советую. Еды берите больше.
Теперь сын просит повторить. Наверное, так и рождаются семейные традиции.

А у вас были сплавы с детьми? Как прошло?

Про работу с Network (Сеть) в браузере

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

Проблемы, которые он помогает решить:
1) Отслеживать что отправляется на сервер и что приходит в ответ.
2) Ненужные CSS и JS файлы, которые добавляет WordPress и влияют на скорость загрузки страниц.
3) Неоптимальная загрузка изображений. Все картинки грузятся сразу, даже те, которые не видны сразу.
4) Низкая скорость загрузки страниц сайта.

Fetch/XHR — для отладки API, форм и AJAX-запросов.
Можно отслеживать что отправляю на сервер и что получаю в ответ.

CSS/JS — показывает, какие CSS/JS файлы загрузились на странице.
Если сайт на Wordpress, то по умолчанию он подключает 5-10 лишних файлов. Про другие CMS не знаю, сказать нечего. К примеру — это файл стилей Гутенберг блоков. Вы можете не использовать эти блоки, но стили к ним он загрузит.
❗️ДЛЯ ТИЛЬДЫ. Можно увидеть, когда вы подключаете два раза jQuery к сайту.

Img — показывает какие картинки загрузились на странице.
Она показывает все загруженные картинки на странице. Зная это, можно настроить отложенные картинки.
Ещё здесь видно, какая картинка очень много весит и её стоит оптимизировать.
❗️ДЛЯ ТИЛЬДЫ. Можно увидеть, какие картинки с отложенной загрузкой, а какие нет.

Font — показывает какие шрифты загрузились на странице.
Полезно для тех, кто использует 10+ шрифтов на сайте. Все они загружаются здесь и влияют на скорость загрузки страницы.
❗️ДЛЯ ДИЗАЙНЕРОВ. Здесь можно посмотреть какие шрифты используются на сайте и скачать их себе. Просто кликните 2 раза по нему и потом ctrl (cmd) + s — сохранить.

Набросайте огня, если всё понятно 👇

Английский за год: что изменилось

В школе и универе у меня были уроки английского, но я их успешно прослушал. В итоге получил классическое "London is the capital of Great Britain" и пара фраз из школьной программы. В августе 2024 года решил начать изучать. Не для работы, не для переезда — просто захотелось. Нашел YouTube-канал «Английский язык по плейлистам», у него есть один плейлист из 300 видео.

Каждое утро по 30-40 минут: грамматика, слова, простые диалоги.

И вот спустя год я поймал себя на мысли: "Так ведь мой сын точно так же учился говорить!"

Сначала Миша знал только "мама", "папа", "баба" — это как мои школьные "hello", "my name is", "goodbye". Потом он начал лепить фразы из двух слов: "дай сок", "хочу гулять" — а я тем временем научился выдавать что-то вроде "I want coffee" или "How much is it?" (и гордился собой, как будто сдал TOEFL).

Сейчас:
— Понимаю 60-70% письменного английского (комменты в YouTube)
— Пишу фразы из 3 - 7 слов (иногда с ошибками, но ИИ меня понимает и показывает где ошибся).
— Говорю предложениями, но… сначала придумываю их на русском, перевожу в голове и только потом могу сказать.

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

Что ещё интересное заметил. Например, слово understand — я больше не перевожу его на русский. Услышал в фильме — сразу понимаю о чём речь. Таких слов и фраз мало, но они есть.

Планы:
— Продолжаю заниматься по видео из плэйлиста
— Читать и разбирать комменты в YouTube
— Смотреть марвеловские фильмы на английском.
— Найти варианты тренировать речь

Кто прокачал иностранный язык после школы? Что можете посоветовать?