WebCraft - ремесло веб разработки
6.41K subscribers
1.67K photos
251 videos
2 files
218 links
Интересуешься php , js , css , html , Laravel , Vue ? Этот канал для тебя

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/web_craft
Download Telegram
Материалы из этого канала дают на платных курсах

Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое

👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!
Упрощение работы с Eloquent

ObservedBy наблюдает за изменениями модели. Автоматически выполняет действия при изменениях.

use AppObserversFlightObserver;

class Flight extends Model
{
use HasFactory;

#[ObservedBy(FlightObserver::class)]
protected $observed;

// ...
}


ScopedBy влияет на область видимости модели. Фильтрует запросы к модели.

use AppScopesActiveScope;

class Flight extends Model
{
use HasFactory;

#[ScopedBy(ActiveScope::class)]
protected $scoped;

// ...
}


Пример использования:

// Наблюдатель для модели `Flight`

class FlightObserver
{
public function created(Flight $flight)
{
// ...
}

// ...
}

// Область видимости для модели Flight
class ActiveScope
{
public function apply(Builder $builder, Model $model)
{
$builder->where('status', 'active');
}
}

$flights = Flight::all(); // Будут отображаться только активные рейсы

// ...


👉 @web_craft | #laravel
Обработка ошибок с Promise.allSettled()

Promise.allSettled() – это метод, который принимает iterable (массив, строка, map) промисов и возвращает новый промис.

Чем он отличается от Promise.all()?

Promise.all() ждет, пока все промисы в iterable будут выполнены, и только потом разрешается.
Promise.allSettled() ждет, пока все промисы в iterable будут завершены (выполнены или отклонены), и независимо от их статуса разрешается.

Пример:
const p1 = Promise.resolve(1);
const p2 = Promise.reject('error');
const p3 = new Promise((resolve) => {
setTimeout(() => resolve(3), 1000);
});

Promise.allSettled([p1, p2, p3]).then((results) => {
console.log(results);
// [{ status: 'fulfilled', value: 1 },
// { status: 'rejected', reason: 'error' },
// { status: 'fulfilled', value: 3 }]
});


👉 @web_craft | #frontend
Создание поддерживаемых PHP-приложений: чрезмерное или недостаточное проектирование

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

👉 @web_craft | #php
Как создать простое веб-приложение JavaScript с возможностью расширения

Статья рассказывает, как создать простое веб-приложение на JavaScript, используя различные инструменты и библиотеки. Автор показывает, как начать с базового сервера на node:http и постепенно добавлять функциональность, такую как шаблонизация, базы данных, веб-сокеты, CSS-фреймворки, TypeScript и другие. Также объясняется, как развернуть приложение на fly.io и сделать его глобально доступным.


👉 @web_craft | #frontend
Хостинг статичных Laravel-приложений

Эта статья о том, как размещать приложения Laravel статически, используя Vercel и Laravel Vapor. Автор объясняет преимущества статического хостинга, такие как скорость, безопасность и масштабируемость, а также демонстрирует шаги, необходимые для настройки и развертывания приложения Laravel на этих платформах.

👉 @web_craft | #laravel
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированные цветы на CSS

Пример анимации цветов на CSS.

👉 @web_craft | #frontend
Автоматическое хеширование значений модели Laravel

Статья рассказывает, как автоматически хэшировать значения полей модели Laravel с помощью каста hashed. Каст hashed позволяет безопасно хранить конфиденциальные данные, такие как пароли, в базе данных. Автор статьи объясняет, как использовать каст hashed вместо ручного хэширования с помощью функции Hash::make. Также в статье приводятся примеры кода и тестов для демонстрации работы каста.

👉 @web_craft | #laravel
This media is not supported in your browser
VIEW IN TELEGRAM
Apple Vision Pro Menu UI

Анимированное меню Vision Pro на CSS.

👉 @web_craft | #frontend
Работа с отношениями в Laravel

Что делает метод Model::hasOneThrough()?

👉 @web_craft | #laravel
Назначение метода Array.prototype.flat

Что делает Array.prototype.flat?

👉 @web_craft | #frontend
Работа с моделями Laravel

findOrFail(): Ищет модель в базе данных по ID. Если модель не найдена, генерирует ModelNotFoundException.

Пример:

$user = User::findOrFail(1);

firstOrNew(): Ищет модель в базе данных по заданным атрибутам. Если модель не найдена, создает новую.

Пример:

$user = User::firstOrNew(['email' => 'johndoe@example.com']);

updateOrCreate(): Ищет модель в базе данных по заданным атрибутам. Если модель найдена, обновляет ее. Если модель не найдена, создает новую.

Пример:

$user = User::updateOrCreate(['email' => 'johndoe@example.com'], ['name' => 'John Doe']);

👉 @web_craft | #laravel
Ищем новичков во фронтенд-разработке и вёрстке сайтов.

Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.

Такой опыт можно получить на бесплатном практикуме 16-22 марта с поддержкой от опытных кураторов на каждом этапе.

👉 Приходи на бесплатное обучение и зови с собой друзей

Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
Использование defer для повышения производительности

Атрибут defer может повысить производительность страницы, позволяя браузеру:

1) Продолжать обработку страницы, пока загружается JavaScript.
2) Загружать скрипт в фоновом режиме, не блокируя отрисовку контента.
3) Запускать скрипт только после построения DOM-дерева, гарантируя, что все элементы HTML будут доступны.

Пример использования:

<script src="script.js" defer></script>

Примечание:

1) Скрипты, помеченные defer, будут выполняться в том порядке, в котором они появляются в HTML-коде.
2) Событие DOMContentLoaded не будет срабатывать, пока не будут выполнены все отложенные скрипты.
3) Не все скрипты подходят для использования defer. Скрипты, которые должны выполняться как можно скорее, например, для инициализации критически важных функций, не должны быть помечены defer.

👉 @web_craft | #frontend
ИИ для PHP: Автоматизация модульного тестирования с помощью помощника ИИ

Статья рассказывает о том, как можно использовать AI Assistant в PhpStorm для автоматизации написания юнит-тестов для PHP-кода.

👉 @web_craft | #php