notes.chiubaca.com | Fleeting Notes

21・04・24

A few problems porting an existing next.js to cloudflare pages, works locally, but getting a cryptic error along the lines of :

Application error: a server-side exception has occurred (see the server logs for more information).Digest: 2354650810

Cloudflare logs reveal the following error:

"Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

lots people seeing this error pop in various forms, one thread thats seem related… https://github.com/cloudflare/workers-sdk/issues/2514

20・04・24

# cloudflare

Big reason to move off Vercel to Cloudflare Page. free tier can be used for commercial use: https://community.cloudflare.com/t/cloudflare-pages-for-commercial-use/306890/2
nice guide to work with nextjs and cloudflare pages https://logsnag.com/blog/deploying-nextjs-13-app-dir-to-cloudflare-pages

Thank you Netlify. You’ve been amazing over the years. But Cloudflare pricing, reliability and general future outlook can’t be denied. The migration of my projects to Cloudflare has begun. notes.chiubaca.com and chiubaca.com have been ported over seamlessly.

08・04・24

# musings

Thinking about calmness and this blog

I love the idea of a calm company

07・04・24

# cloudflare

So many great announcements from cloudflare https://blog.cloudflare.com/pages-workers-integrations-monorepos-nextjs-wrangler#improved-nextjs-support-for-pages

Mono repo support, this will make moving chiubaca-mono to cloudflare way more straightforward!
Next.js support on Pages! need to evaluate this over SST but there are two promising ways to move off Vercel

02・04・24

# vscode

vs code customLabels for tabs coming soon. useful in next.js now every file is called page.tsx https://www.linkedin.com/posts/wesbos_i-am-so-happy-this-is-being-implemented-ugcPost-7176578095288647680-_KWX?utm_source=share&utm_medium=member_desktop

23・03・24

# serverless

Keep thinking about this Netlify horror story.

Considering :

23・03・24

# printful

high level steps for getting a mockup via their rest API

Get all products: https://api.printful.com/products e.g we’re interested in stickers:

{
"id": 505,

"main_category_id": 202,

"type": "STICKER",

"description": "These glossy stickers are designed just for you. Give your favorite items, like a notepad, laptop, or phone case an extra glow and personal touch. \n\n• Film type: MPI 3000 Gloss HOP (EU), Promotional Monomeric PVC (US)\n• 0.12″ (0.3 cm) white sticker border \n• Glossy finish\n• Fast and easy application\n• 2–3 year durability\n• Indoor use\n• Blank product sourced from Japan\n\nDon't forget to clean the surface before applying the stickers.",

"type_name": "Kiss Cut Sticker Sheet",
}

Use id505 to make the next request: https://api.printful.com/products/505

This returns full Printful stock, variants and other useful details about this product. Most importantly keep notes of the variant IDs, eg "id": 12917.

Use the product id again to get printfiles for this product: https://api.printful.com/mockup-generator/printfiles/505

e.g response:

{
  "code": 200,
  "result": {
    "product_id": 505,
    "available_placements": {
      "default": "Print file",
      "background": "Background"
    },
    "printfiles": [
      {
        "printfile_id": 256,
        "width": 1750,
        "height": 2482,
        "dpi": 300,
        "fill_mode": "fit",
        "can_rotate": false
      },
      {
        "printfile_id": 259,
        "width": 1822,
        "height": 2554,
        "dpi": 300,
        "fill_mode": "cover",
        "can_rotate": false
      }
    ],
    "variant_printfiles": [
      {
        "variant_id": 12917,
        "placements": {
          "default": 256,
          "background": 259
        }
      }
    ],
    "option_groups": [
      "Flat",
      "Holiday season",
      "Lifestyle",
      "Lifestyle 2",
      "Lifestyle 3",
      "Lifestyle 4",
      "Spring/summer vibes",
      "Valentine's Day",
      "template"
    ],
    "options": [
      "Background",
      "Christmas",
      "Christmas 2",
      "Front",
      "Spring/Summer",
      "Spring/Summer 2",
      "Valentine's Day",
      "Valentine's Day 2"
    ]
  },
  "extra": []
}

we’re now ready to form a mockup generator request: https://api.printful.com/mockup-generator/create-task/505

This is a POST request which need a body with a payload like:

{
  "variant_ids": [
    12917,
  ],
  "format": "jpg",
  "files": [
    {
      "placement": "default",
      "image_url": "https://clever-stork-292.convex.cloud/api/storage/9fdcfdeb-ee06-47a2-83ff-01184c939d0d",
      "position": {
        "area_width": 1800,
        "area_height": 1800,
        "width": 1800,
        "height": 1800,
        "top": 0,
        "left": 0
      }
    },
  ]
}

this will return a task that can be polled at an interval:

{
  "code": 200,
  "result": {
    "task_key": "gt-645099290",
    "status": "pending"
  },
  "extra": []
}

https://api.printful.com/mockup-generator/task?task_key= + {task_key}

TODO:

figure out out to automate placing an order:

https://api.printful.com/orders POST w/ works:

{
  "external_id": "sticker-2-4235234213",
  "shipping": "STANDARD",
  "recipient": {
    "name": "John Smith",
    "company": "John Smith Inc",
    "address1": "19749 Dearborn St",
    "address2": "string",
    "city": "Chatsworth",
    "state_code": "CA",
    "state_name": "California",
    "country_code": "US",
    "country_name": "United States",
    "zip": "91311",
    "phone": "string",
    "email": "[email protected]",
    "tax_number": "123.456.789-10"
  },
  "items": [
    {
      "id": 1,
      "external_id": "sticker-item-2",
      "variant_id": 1,
      "quantity": 1,
      "price": "13.00",
      "retail_price": "13.00",
      "name": "Kiss Cut Sticker Sheet",
      "product": {
        "variant_id": 12917,
        "product_id": 505,
        "image": "https://printful-upload.s3-accelerate.amazonaws.com/tmp/71dbbab32afaf7a761f7a28b91ac9268/kiss-cut-sticker-sheet-white-front-6600501f5d2c0.png",
        "name": "Kiss Cut Sticker Sheet"
      },
      "files": [
        {
          "type": "default",
          "url": "https://printful-upload.s3-accelerate.amazonaws.com/tmp/71dbbab32afaf7a761f7a28b91ac9268/kiss-cut-sticker-sheet-white-front-6600501f5d2c0.png",
          "options": [
            {
              "id": "template_type",
              "value": "native"
            }
          ],
          "filename": "shirt1.png",
          "visible": true,
          "position": {
            "area_width": 18,
            "area_height": 2400,
            "width": 1800,
            "height": 1800,
            "top": 300,
            "left": 0,
            "limit_to_print_area": true
          }
        }
      ],
      "options": [
        {
          "id": "OptionKey",
          "value": "OptionValue"
        }
      ],
      "sku": null,
      "discontinued": true,
      "out_of_stock": true
    }
  ],
  "retail_costs": {
    "currency": "USD",
    "subtotal": "10.00",
    "discount": "0.00",
    "shipping": "5.00",
    "tax": "0.00"
  },
  "gift": {
    "subject": "To John",
    "message": "Have a nice day"
  },
  "packing_slip": {
    "email": "[email protected]",
    "phone": "+371 28888888",
    "message": "Message on packing slip",
    "logo_url": "http://www.your-domain.com/packing-logo.png",
    "store_name": "Your store name",
    "custom_order_id": "kkk2344lm"
  }
}

21・03・24

# stripe

Being going deep into Stripe, Stripe.js and Stripe elements. The killer feature of Stripe appears to be Stripe elements to let you embedded checkout element anywhere on your website to build custom checkout flows. LemonSqueezy on the other hand only seems to have the Hosted and Overlay flows. Once they have a similar product to elements it could be a real Stripe killer.

https://docs.lemonsqueezy.com/help/checkout/checkout-overlay

17・03・24

# app-idea

Stripe docs are great, especially how when you scroll and parts of the code gets highlighted. Stripe uses https://markdoc.dev/ behind the scenes. Something similar could be created with https://expressive-code.com .

15・03・24

# react # webdev

AbortController is a web standard for aborting requests via a signal.

This is quite important in React 18 due to the double firing of useEffects in dev mode. We probably want to cancel redundant request when components mount and re-mount.


useEffect(() => {
  
// Setup our abortController
const abortController = new AbortController();

const getAsyncData = async () => {

  try {
  
    const res = await fetch(`/api/some-data?query=${queryParam}`, {
      method: 'POST',
      signal: abortController.signal,
    });
  
  
    const json = await res.json();  
    const clientSecret = json.clientSecret;
    
    setStripeState({ state: 'success', clientSecret });
  
  } catch (e) {
  
    if (!abortController.signal.aborted) {
    
      setStripeState({
        state: 'error',
        message: 'Unknown error',
      });
    
    }
  
  }

};

// if the component unmounts or he queryParam changes we can cancel the fetch request like this:
return () => {
  abortController.abort();  
};

}, [queryParam]);

11・03・24

# dev-journal

Third week into the new job. Some new tech to get my head around.
- https://www.optimizely.com/
- https://mswjs.io/

27・02・24

# nvm # volta # node

https://volta.sh/ is a better nvm alternative. it detects the node version in your project if engines has been configured in your package.json .

"engines": {
  "node": "18.x"
},

25・02・24

# electricdb

excited about ElectricSQL - Sync for modern apps (electric-sql.com)

24・02・24

# programming

grep.app | code search search for coding examples in github repos.

Integrated the same demo from SDXL Lightning - by fal.ai (fastsdxl.ai) into sticker-ai project and it’s amazing?! real time image generation is a game changer in terms of UX for projects that are generating images from text.

23・02・24

# dev-journal # ai

real time image generation by FalAI incredible SDXL Lightning - by fal.ai (fastsdxl.ai) . Possibly need to pivot to using this over open AI because it is just SOO much faster!
- Docs on how to integrate with Vercel/Next.js Nextjs - fal docs
- Example next app router demo -fal-js/apps/demo-nextjs-app-router at main · fal-ai/fal-js (github.com)
- Looks like the live demo site is built using next js too and all open source : fal-ai/sdxl-lightning-demo-app: A demo application using fal.realtime and the lightning fast SDXL API provided by fal (github.com)

excellent directory of tailwind animations animation.ibelick - Tailwind CSS animation gallery

22・02・24

# dev-journal # ai

progress with sticker-ai, payments linked to lemonsqeezy, convex linked to open-ai. ui all linked up to convex. auth linked up to clerk. This is the fastest i’ve every built!

20・02・24

# convex # dev-journal

Using convex to build sticker-ai and it’s a lot of fun! Getting into the weeds of how convex works is interesting. Its patterns and principles makes it a delight to work with. Things I like about it so far:

all convex logic lives in /convex
- logic is clearly separated into queries, mutations, actions
everything is strongly typed
the auto generated api is awesome

things that are confusing:

convex actions sort of make React Server Actions redundant
Are you even supposed to run convex actions in React actions? context object seems to get lost.
i guess working offline is out the question?

17・02・24

# ai # openai # musings

Reading resources on openai.com, so much good stuff:

Prompt engineering - OpenAI API
OpenAI Cookbook
- What’s new with DALL·E-3? | OpenAI Cookbook
  
  ( shit lol, this was my whole idea)

convert bitmap to svg -Potrace (sourceforge.net)

16・02・24

# postgres # mongodb

Turn your Postgres into MongoDB FerretDB

Replicate.com is such an amazing platform to using and training AI models. So exciting exploring around and tinkering with fine tunings and existing models. Questions I have though..
- When to fine tune?
- When to use the model as is?
- How to adapt an existing model to produce consistent outputs
Open AI also has the ability to fine tune…

14・02・24

# ai

GPT4All from nomic ai lets your run models locally hassle free

got access to Fly GPUs · Fly , this makes serverless AI possible.

12・02・24

# webdev

dont use yarn isaacs on X: “Should I make all my packages refuse to install under yarn v1? Seriously considering this. https://t.co/p3suVN7Xog” / X (twitter.com)

09・02・24

# dev-journal # career # contracting

Researching more into contracting life and what it entails.

Points from Guide to software engineering contracting in UK (codedeepdives.com)

easy demand anywhere between 400 - 500 pounds a day
work can range between 6 weeks to 6 months
the feeling of job security is subjective
set up a IR35 i.e a ltd company!
get an accountant!
getting a mortgage becomes more complex but there are specialist brokers out there for this
get a business bank account! e.g (www.tide.co) or Starline. Monzo also looks good.

Other things i dont understand yet.

best way to define work with a employer
handling timelines

Notes from GPT-4

Certainly! As a software engineer contractor, organizing your work effectively with clients is crucial for successful project delivery. Here are some essential tips to help you stay on track and maintain a positive client relationship:

Clear Communication:
- Establish open and transparent communication channels with your client. Regularly update them on progress, challenges, and any changes.
- Use tools like project management software to track tasks, deadlines, and milestones. This ensures everyone is on the same page.
Detailed Requirements Gathering:
- Invest time in understanding the client’s requirements thoroughly. Ask questions, clarify doubts, and document everything.
- Create a detailed scope document that outlines project goals, features, and deliverables.
Agree on Milestones and Deadlines:
- Break down the project into smaller milestones. Define clear deadlines for each milestone.
- Regularly review progress and adjust timelines if needed.
Contract and Legal Aspects:
- Have a well-defined contract that covers terms, payment schedules, intellectual property rights, and confidentiality.
- Include provisions for change requests and scope adjustments.
Regular Work Reports:
- Provide work reports at agreed intervals (e.g., weekly or biweekly). These reports should detail completed tasks, upcoming work, and any issues encountered.
- Allow the client time to review and approve or provide feedback on the work 1.
Risk Management:
- Identify potential risks early on. Discuss them with the client and propose mitigation strategies.
- Be prepared for unexpected challenges and have contingency plans in place.
Quality Assurance and Testing:
- Ensure thorough testing of your code. Deliver high-quality work that meets the client’s expectations.
- Involve the client in user acceptance testing (UAT) to validate functionality.
Documentation:
- Maintain clear and concise documentation. This includes code comments, user manuals, and technical guides.
- Document any design decisions, assumptions, and rationale.
Feedback and Iteration:
- Encourage client feedback throughout the process. Be open to making necessary adjustments.
- Iterate based on feedback to improve the final product.
Professionalism and Boundaries:
- Set professional boundaries. Clearly define working hours, response times, and availability.
- Maintain a positive and respectful attitude even during challenging situations.

Remember, every client is unique, so adapt these principles to suit the specific project and client dynamics. Building strong client relationships will lead to repeat business and referrals in the long run! 🌟

Learn more

1arc.dev 2teamwork.com 3bamboogroup.eu 4geeksforgeeks.org 5careerkarma.com 6computer.org 7en.wikipedia.org 8ryrob.com 9fsb.org.uk 10thedevbazaar.com 11zeroin.me 12indeed.com+10 more

Paperwork templates: Free Contract Templates and Agreements (Word or PDF) | Signaturely

05・02・24

# dev-journal

Some time to work on some OSS contributions for counterscale.

02・02・24

# dev-journal

Excited about counterscale: Scalable web analytics you run yourself on Cloudflare (github.com)

01・02・24

# health # psoriasis

Mahonia aquifolium - can supress inflammation and slow down growth of skin cells

Indigo naturalis - also known as qing dai, is a traditional Chinese herbal medicine

Aloe vera - antibacterial and anti-inflammatory properties. They may help soothe the skin and fight bacteria that could cause infections.

Herbs for psoriasis: Which herbal remedies are best? (medicalnewstoday.com)

31・01・24

# css

height: 100vh is not that great becasue content will get chopped off by mobile phone bottoms bars. I’ve got around this this with:

html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

However 100svh should also solve this problem too

Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, … (terluinwebdesign.nl)

30・01・24

# css # webdev

It’s amazing to see best tooling and libraries transcend into standard web APIs. In musical OSM I have been able to drop Sass for vanilla css with zero code changes

29・01・24

# app-idea

28・01・24

# dev-journal

- Revived Musical OSM by proxing requests from planet-osm via netlify edge function and works beautifully again. Also too the op to simplify the code massively .

22・01・24

# react # ui

possibly the best drawer component i’ve seen…

emilkowalski/vaul: An unstyled drawer component for React. (github.com)

19・01・24

# gis # ai

A GPT trained on geoscience code papers. Could it helper write geospatial queries?GS

geobrain-ai/geogalactica: A Larger foundation language model in Geoscience. Code and datasets for paper “GeoGalactica: A Scientific Large Language Model in Geoscience” with arXiv:2401.00434 (github.com)

18・01・24

# ai # gis

Looking into installing Stable Diffusion locally and steps seem to have gotten easier two main options right now that offer a nice GUI over SD is :

Comfy UI looks more powerful but AUTOMATIC1111 seems to be an easier install. Trying the latter for now.

The Top 11 Open GeoParquet Datasets: Making big geospatial data easy - Matt Forrest - Modern GIS and Geospatial Ideas and Guides

15・01・24

# netlify # serverless # node

Not used Netlify functions in a while and it’s improved a lot! Including first class support for TypeScript.

I was able to build a proxy server to append additional headers to a image response very quickly. ArrayBuffers and Blobs still confuse me quite a bit in Node.js land.

14・01・24

# auth # authjs # css

Kind of shame there is no auth-js example for Astro yet, but looks like it’s planned)

css challenge. would like to try and building an icon to scroll to top .
- it should only appear when your scrolling up
- it should get gett bigger but stop getting bigger after it gets to certain size
- no js

10・01・24

# musings

we fall down

we learn

we stand up

08・01・24

# markdown # programming

syntax-tree/unist-util-visit: utility to visit nodes (github.com) is a handy utility to recursively walk a syntax tree.

07・01・24

# git # markdown # astro

Learning more about Git Submodules) . Its meant to be used to link git repo together if they’re dependencies of each other.

Add a submodule to an existing git repo is as straight forward as this command

git submodule add https://github.com/chaconinc/DbConnector

This seems perfect for chiubaca-monorepo where I need to link it to my notes repo. The last piece of the puzzle is if I can get a sync working between that repo and my astro codebase. I have not been successful with symbolic links on windows.

Astro.js has a built in mechnism to manipulate markdown via rehype plugins. These are functions that manipulate markdown AST which makes it straightforward to build your own ones. I’m doing this in chiubaca-mono to convert my obsidian image and markdown reference so paths are corrected when published to my Astro websites.

03・01・24

# programming

Building UIs with nested segments may not need to be built using recursion.

https://ratfactor.com/cards/fake-trees

02・01・24

# webdev

Reading up on how webmentions work. I didn’t realise it is a w3c spec. Getting started with Webmentions ‍♂️ [2022 Tutorial] (daily-dev-tips.com)

Reading Perfectionism and Procrastination: How They’re Connected and What to Do About It – Solving Procrastination reminded me of 2023-10-20.

01・01・24

# musings

Happy new year!

Feeling optimistic that this is the year one of side-projects can turn into a real side-hustle.

31・12・23

# dev-journal

v2 of chiubaca.com and notes.chiubaca.com is live all styled up! Still a few minor issues and features i’d like to get in place but its 90% there. I’m ready to write more in 2024!

some sort of commenting system
web mentions
rss feed
links working in in the breadcrumb nav
improve code reuse

30・12・23

# dev-journal # obsidian # astro

Very happy with the work I’ve done in consolidating a bunch of code for my websites on *chiubaca.com into a single nx mono-repo at https://github.com/chiubaca/chiubaca-monorepo . My favourite aspect is that both notes.chiubaca.com and chiubaca.com are driven 100% my notes in this obsidian vault. This is made possible because both obsidian and Astro.js treat yaml frontmatter as first class citizens within their products so the I can do almost anything I want in terms of data manipulation as long as I have consistent frontmatter across all my notes. A big write up of this is needed
Configure Cloudflare DNS to Work with Netlify (stevepolito.design)

29・12・23

# github

GitHub fine-grained personal access tokens play nicely with Tokens(classic) which is nice. So no code refactoring required if you’re using https://github.com/octokit/octokit.js.

Invoke GitHub actions manfully with workflow_dispatch

name: Create Empty Daily Note
on:
  # run workflow every morning at 6AM
  schedule:
    - cron: "0 6 * * *"
  # run this workflow manually from the github Actions tab
  workflow_dispatch:

28・12・23

# journal

Big shift on unifying *.chiubaca.com sites over to [chiubaca/chiubaca-monorepo (github.com)](https://github.com/chiubaca/chiubaca-monorepo. Solidifying a lot of my knowledge around setting up NX , Astro and general web tooling. Need to write a big write up how how I’ve totally over engineered this whole setup.

21・12・23

# 3d # gltf # dev-journal

Loading GLTFs in Mapbox w/ three.js is pretty dang performant! might not be necessary to use these solution like Cesium and Esri i3s. Need to improve my understanding of GLTFs in the new year.

03・12・23

# journal

Lets get back to journaling! starting a new job has naturally been crazy! Things I want to write about:

coming up with business ideas
separating my obsession with tools with solving real life problems
my experience working at different sized companies