Как любое ремесло, разработка требует практики. Много практики. Например 4к строк кода за 4 дня.

Так что если есть реальная цель стать разработчиком - хватит тупо смотреть видосики. Пиши код 🫵

@onecode_blog

Молодой, но перспективный пакет для подсветки кода с рендерингом на сервере.

- HTML
- CSS
- PHP
- Blade

- JS (todo)
- SQL (todo)
- JSON (todo)

https://github.com/tempestphp/highlight

The Internet OS

Операционная система, которую можно развернуть на сервере и пользоваться онлайн.

Демо: https://puter.com/

Репа: https://github.com/HeyPuter/puter

@onecode_blog

На макбуке есть комбинация клавиш Cmd+Shif+4, которая позволяет сделать скрин экрана.

После этого изображение появляется в углу экрана, откуда его можно сразу перетащить для отправки, например в телеграм.

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

Единственное, что меня немного напрягало - это то, что изображение в углу экрана висит НЕ долго - несколько секунд, поэтому не всегда успевал его отправить до того, как оно пропадёт (сохранится на рабочий стол).

Недавно загуглил как можно изменить время нахождения скрина в углу экрана. Стандартной настройки нет, но можно изменить этот параметр через терминал:

defaults write com.apple.screencaptureui "thumbnailExpiration" -float 20

Можно заменить 20 на нужное количество секунд. После выполнения команды, возможно, надо перезагрузить комп.

@onecode_blog

Laravel Context

Новая функция Laravel позволяет добавлять информация в контекст запроса.

Основная идея в том, чтобы при получении нового входящего запроса, мы могли добавить любые данные в контекст этого запроса. Например создать Middleware, в котором добавляем в контекст запроса UUID (уникальный идентификатор запроса), данные пользователя (ID), язык запроса и тд - всё, что захочется.

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

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

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

Дока: https://laravel.com/docs/11.x/context

Подпишись: @onecode_blog

Клод AI

Еще один ИИ, который круто пишет код и вообще помогает по любым вопросам.

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

Единственное, что для регистрации нужен номер телефона и НЕ уверен, что подойдёт российский. Ну и походу опять нужен VPN.

У меня на Шри-Ланке есть местная симка, поэтому зарегался без проблем. Платный тариф НЕ покупал, хотя на нём модель еще круче.

Сайт: https://claude.ai

Рекомендую привыкать пользоваться искусственными ассистентами, парни 👍

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

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

Хочется использовать привычную реляционную базу данных, например PostgreSQL.

Есть несколько вариантов хранить деверья в реляционной базе. Каждый имеет свои плюсы и минусы. Выбор зависит от размера данных и типа операций - чего больше чтения или записи.

На мой взгляд наиболее прикольный вариант использовать расширении ltree для PosgreSQL, написанное кстати российскими ребятами.

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

https://www.postgresql.org/docs/current/ltree.html

Подпишись: @onecode_blog

Решил напомнить, что у нас есть закрытый VIP-канал в телеге, где проходят курсы на разные темы по Laravel 🤘 Новый урок каждые 2-3 дня.

Текущее содержание канала на скрине. Все уроки записаны мной с подробным объяснением и практикой из личного опыта.

Сейчас идёт курс на тему аутентификации - регистрация, вход, восстановление пароля, кабинет и профиль пользователя, безопасность и тд. Ближайшие уроки в этом курсе:

- Подтверждение email после регистрации
- Подтверждение телефона по SMS
- Вход через внешние сервисы
- Отдельный вход в админку
- Обеспечение безопасности
- Ограничение попыток
- Подключение капчи
- Двухфакторная аутентификация
- Аутентификация API

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

Дальше будет курс по очередям в Laravel, но мы проводим голосование в VIP-канале на тему следующих курсов, поэтому план может измениться. Решать вам.

Стоимость доступа в VIP-канал символическая - всего 990 рублей в месяц с возможностью отписаться в любой момент. Там освободилось несколько мест, поэтому есть шанс вписаться.

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

Короче, если интересно и понимаешь, что твоё развитие - это самое главное, то залетай к нам:

Оформить подписку 👈

Через специального телеграм-бота оформишь подписку и попадёшь в VIP-канал.

До связи! 🤙

Livewire позволяет сделать навигацию по сайту (переход по ссылкам) БЕЗ перезагрузки страницы.

Получается эффект одностраничного приложения (SPA). Нужно просто указать для ссылок атрибут wire:navigate, как на скрине.

Накидал небольшой проект и скажу вам - это охрененно! Переходы по страницам работают очень быстро, как будто фронтенд реально написан на Vue или React.

При этом НЕ написал ни строчки на JS - просто подключил Livewire и добавил атрибут для ссылок - всё.

Работает очень просто - Livewire перехватывает клик по ссылке и вместе перехода, отправляет Ajax-запрос на этот роут и заменяет тело страницы данными из ответа. То есть мы имеем серверный рендеринг (SSR).

Лично мне очень заходит эта тема из-за её простоты, удобства и скорости разработки. Оптимальный вариант для ремесленника.

Плюс к этому админка Filament, которая работает на Livewire, тоже имеет такую функцию. Достаточно просто вызвать метод ->spa() и админка будет работать без перезагрузки страницы. Кайф!

https://livewire.laravel.com/docs/navigate

Подпишись: @onecode_blog

Мне всегда нравился эффект, который даёт SPA. Когда страница НЕ перезагружается в бразуере полностью через редиректы - это даёт намного более приятные ощущения от пользования сайтом.

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

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

Мне реально так нравится эта тема, поэтому, чтобы НЕ быть голословным решил поддержать Калеба - разработчик Livewire и AlpineJS.

У него есть скринкасты по Livewire за 15$ в месяц. Сами видео уроки мне НЕ нужны, потому что всё умею сам, но хочется его поддержать.

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

Сегодня выходной, сразу мозг заработал и хочется много всего написать 😆

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

К слову про Калеба (разработчик Livewire и AlpineJS) - пару лет назад покупал у него курс по использованию редактора кода, где он показывал свои настройки и горячие клавиши. Многое взял для себя от него. Скоро начнем свой курс в VIP-канале на эту тему!

Потом покупал у него доступ к библиотеке компонентов для AlpineJS. По факту НЕ пользовался, но было интересно посмотреть что там есть и как работает. Сегодня вот оформил подписку на его скринкасты.

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

Можно перечислять и дальше, но факт в том, что благодаря в том числе этим инструментам и инвестициям, сегодня имею тот результат, который имею. Искренне считаю, что чем больше отдаёшь - тем больше получаешь!

Возможно прозвучит НЕ приятно, но периодически удивляюсь, как люди сомневаются оформить подписку на VIP-канал OneCode или нет? Получить мой личный опыт на русском языке с понятными объяснениями, обратной связью и доступом к исходному коду.

Че тут думать? Если хочешь быстрее развиваться, перенимать чужой опыт и двигаться вперёд, то конечно ответ ДА - офрмлять. Лично я всегда так делал, делаю и буду делать.

Всего 990 рублей в месяц! Мы сегодня только позавтракали в кафе на 5000 рублей 😁 Если у тебя нет 1000 рублей в месяц или тебе нужно всё взвесить, чтобы потратить косарь, то задумайся о своей жизни - как ты до этого докатился? Значит давно пора поднимать задницу и работать еще усерднее в правильном направлении с правильными людьми.

Короче, парни, держим фокус на своём развитии и мышлении - это основа всего.

Как получить значения CSS-свойств из JavaScript?

Мой кейс: на страницу нужно вывести график (chart.js), при этом в графике нужно использовать фирменные цвета проекта. Но не хранить же цвета в JS, ведь они уже указаны в CSS проекта.

Хочу получать их оттуда, чтобы при редактировании цветов в CSS у меня автоматом менялись цвета в графике на JS.

Для начала посмотрим на глобальную функцию getComputedStyle, которая позволяет получить значения CSS-свойств любого элемента на странице:

const button = document.querySelector('.btn');
const styles = getComputedStyle(button);
styles.backgroundColor; // #2c7be5
styles.width; // 123px

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

Это легко сделать, испольльзуя CSS-переменные, которые вообще давно пора использовать во всех проектах, потому что это офигенная штука.

При использовании CSS-переменных, мы объявляем в них глобальные значения, такие как цвета, которые дальше переиспользуем в вёрстке. При этом мы объявляем такие переменные для корневого элемента (html) вот так:

:root {
  --color-primary: #2c7be5;
  --color-success: #00d97e;
  --color-danger: #e63757;
}

После этого можем использовать их при вёрстке:

.btn-primary {
    background-color: var(--color-primary);
}

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

Теперь, используя функцию getComputedStyle мы можем получать значения этих переменных от корневого элемента (html) вот так:

const html = document.documentElement;
const styles = getComputedStyle(html);
styles.getPropertyValue('--color-primary'); // #2c7be5
styles.getPropertyValue('--color-success'); // #00d97e
styles.getPropertyValue('--color-danger'); // #e63757

В итоге мы имеем цвета для нашего графика.

Подпишись: @onecode_blog 👈

ChatGPT без регистрации

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

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

https://openai.com/blog/start-using-chatgpt-instantly

Подпишись: @onecode_blog 👈

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

Мы делаем это через книги - наш Книжный клуб, где я выкладываю конспекты прочитанного материала. Шаг за шагом, без напряга.

Очень интересная и полезная история, а канал даёт энергию на это дело, потому что иначе кажется, что нет времени.

Джун: я не знаю, как сделать задачу.
Миддл: я знаю, как сделать задачу.
Синьёр: я знаю, как не делать задачу.

Хорошей пятницы и выходных!

@onecode_blog