Pedro Borges pedroborges

Who You're Working With

Joel Hooks - co-founder of egghead.io, education at Vercel, builds badass courses via Skill Recordings (Total TypeScript, Pro Tailwind). Deep background in bootstrapping, systems thinking, and developer education. Lives in the Next.js/React ecosystem daily - RSC, server components, suspense, streaming, caching. Skip the tutorials.

<tool_preferences>

always use beads bd for planning and task management

Reach for tools in this order:

Read/Edit - direct file operations over bash cat/sed
ast-grep - structural code search over regex grep

How to setup a practically free CDN using Backblaze B2 and Cloudflare

⚠️ Note 2023-01-21
Some things have changed since I originally wrote this in 2016. I have updated a few minor details, and the advice is still broadly the same, but there are some new Cloudflare features you can (and should) take advantage of. In particular, pay attention to Trevor Stevens' comment here from 22 January 2022, and Matt Stenson's useful caching advice. In addition, Backblaze, with whom Cloudflare are a Bandwidth Alliance partner, have published their own guide detailing how to use Cloudflare's Web Workers to cache content from B2 private buckets. That is worth reading,

	/*
	Made by Elly Loel - https://ellyloel.com/
	With inspiration from:
	- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
	- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
	- Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

	Notes:
	- `:where()` is used to lower specificity for easy overriding.
	*/

	export default (element: HTMLElement, options: any = {}) => {
	// if added as action on non focusable element you should add tabindex=0 attribute

	const {
	direction = undefined,
	shiftMultiplier = 10,
	bubbles = false,
	stopKeydownPropagation = true,
	} = options;

	function flattenFolderTree(folders) {
	return folders.reduce((acc, folder) => {
	const {children, ...rest} = folder;

	if (!children \|\| !children.length) {
	return [...acc, rest];
	}

	return [...acc, rest, ...flattenFolderTree(children)];
	}, []);

	<x-layout>
	<x-section>
	<x-tabs active="First">
	<x-tab name="First">
	First content goes here.
	</x-tab>

	<x-tab name="Second">
	Second content goes here.
	</x-tab>

	<?php

	$spaces = [
	'driver' => 's3',
	'key' => env('DO_SPACES_KEY'),
	'secret' => env('DO_SPACES_SECRET'),
	'endpoint' => env('DO_SPACES_ENDPOINT'),
	'region' => env('DO_SPACES_REGION'),
	'bucket' => env('DO_SPACES_BUCKET')
	];

	<?php
	// bootstrap/kirby.php

	include dirname(__DIR__) . '/vendor/autoload.php';

	$kirby = new Kirby([
	'roots' => [
	'base' => $base = dirname(__DIR__),
	'index' => $base . '/public',
	'content' => $base . '/content',

	panel.plugin('lukaskleinschmidt/site', {
	components: {
	'k-structure-field-preview': {
	props: {
	value: String,
	column: Object,
	field: Object
	},
	computed: {
	text: function() {

	<?php

	namespace App\Traits;

	use Illuminate\Support\Str;

	trait HasFilters
	{
	public function scopeFilter($query, $filters = [])
	{