Delicious

Delicious

10513 bookmarks
Custom sorting
Obra Icons
Obra Icons
A simple, consistent set of icons, perfect for user interfaces.
·icons.obra.studio·
Obra Icons
Free online vector editor & procedural design tool
Free online vector editor & procedural design tool
Open source free software. A vector graphics creativity suite with a clean, intuitive interface. Opens instantly (no signup) and runs locally in a browser. Exports SVG, PNG, JPG.
·graphite.rs·
Free online vector editor & procedural design tool
Configure a Contact Form Email Server with Resend for Your Website
Configure a Contact Form Email Server with Resend for Your Website
This tutorial covers how to hook up your front-end contact form to a back-end email server using Resend. You can apply the concepts discussed in this post to any front-end or back-end framework. If you're using a form provider like FormSpree or FormSubmit and want to move away from them, then this blog post is for you.
import { Elysia, t } from "elysia"; import { cors } from "@elysiajs/cors"; import { Resend } from "resend"; import { EmailTemplate } from "./email-templates/message"; import winston, { format } from "winston"; const { errors, printf, combine, colorize, timestamp } = format; // logger for server logs export const logger = winston.createLogger({ level: "info", }); logger.add( new winston.transports.Console({ format: combine( errors({ stack: true }), colorize({ all: true }), timestamp(), printf( ({ level, message, timestamp, stack }) => `[${timestamp}]:${level}: ${message}${stack ? `\n\n${stack}` : ""}`, ), ), }), ); const resend = new Resend(Bun.env.RESEND_API_KEY); const serverPort = Bun.env.SERVER_PORT || 3000; // creating Elysia instance new Elysia() .use( cors({ methods: ["POST"], origin: [ Bun.env.NODE_ENV === "production" ? Bun.env.ALLOWED_ORIGIN : "localhost:4321", ], }), ) .post( "/send-email", async (context) => { const { name, email, message } = context.body; try { // the part where we are sending emails const { error } = await resend.emails.send({ from: `${name} <${Bun.env.EMAIL_TO}>`, to: [Bun.env.EMAIL_TO], subject: `New Message Received From ${name}`, react: EmailTemplate({ name, email, message }), }); // error sending email, send back error status and message if (error) { return context.error((error as any).statusCode, error); } logger.info("New email received"); return new Response(JSON.stringify({ message: "Success" }), { headers: { "content-type": "application/json", }, }); } catch (error) { // catch error and log it, respond to user if (error instanceof Error) { logger.error(error.message, error); } return context.error("Internal Server Error", error); } }, { // body must be of three properties: name, email, and message // validation happens as a middleware body: t.Object({ name: t.String({ minLength: 3, error: "Name must be at least 3 characters", }), email: t.String({ format: "email", error: "Invalid email format", }), message: t.String({ minLength: 1, maxLength: 1024, error: "Message should be at least 10 characters and max of 1024 characters", }), }), // any errors that happens during validation will be logged error: ({ path, body, request: { method, headers }, error, code }) => { const errorMessage = `method=${method} path=${path} error=${ error.message } body=${JSON.stringify(body)} userAgent=${headers.get("user-agent")}`; logger.error(errorMessage); return error; }, }, ) // if any errors happen on the server itself, log the errors .onError(({ path, request: { method, headers }, error }) => { const errorMessage = `method=${method} path=${path} userAgent=${headers.get( "user-agent", )}`; logger.error(errorMessage, error); return error; }) .listen(serverPort, () => { logger.info(`Server starting on PORT: ${serverPort}`); });
·billyle.dev·
Configure a Contact Form Email Server with Resend for Your Website
Implementing Edge-Side Rendering (ESR) in Nuxt 3+ for Enhanced Performance - Michael Hoffmann | Michael Hoffmann - Senior Frontend Developer (Freelancer) from Munich, Germany with focus on Vue.js
Implementing Edge-Side Rendering (ESR) in Nuxt 3+ for Enhanced Performance - Michael Hoffmann | Michael Hoffmann - Senior Frontend Developer (Freelancer) from Munich, Germany with focus on Vue.js
Discover how Edge-Side Rendering (ESR) can be employed in Nuxt 3++ applications to improve performance by rendering content at the edge, closer to the end-user.
·mokkapps.de·
Implementing Edge-Side Rendering (ESR) in Nuxt 3+ for Enhanced Performance - Michael Hoffmann | Michael Hoffmann - Senior Frontend Developer (Freelancer) from Munich, Germany with focus on Vue.js
Cap — Modern, Open-source PoW CAPTCHA for JavaScript
Cap — Modern, Open-source PoW CAPTCHA for JavaScript
Cap.js is a fast, privacy-friendly proof-of-work CAPTCHA alternative to reCAPTCHA and hCaptcha. Zero dependencies, developer-friendly, and effective against spam, DDoS, and automation.
·capjs.js.org·
Cap — Modern, Open-source PoW CAPTCHA for JavaScript
everywhere.tools
everywhere.tools
Collection of open-source tools for designers & creatives
·everywhere.tools·
everywhere.tools
WebTUI
WebTUI
Modular CSS Library that brings the beauty of Terminal UIs to the browser
·webtui.ironclad.sh·
WebTUI
Open Graph Generator | Web Code Tools
Open Graph Generator | Web Code Tools
Free award-winning Open Graph generator. Attract more visitors to your website when it’s shared on Facebook, Pinterest and LinkedIn.
·webcode.tools·
Open Graph Generator | Web Code Tools
AI Color Match: Free Image Color Transfer Tool
AI Color Match: Free Image Color Transfer Tool
Color-grade in one-click. Instantly apply the color and tone of any image to your own. Download your edit as a .jpg or preset, or LUT for free.
·colormatch.polarr.com·
AI Color Match: Free Image Color Transfer Tool
First adventures in View Transitions
First adventures in View Transitions
Until recently I had taken only the most cursory look at View Transitions. Now they are in Safari too, and therefore viable across multiple platforms, I wanted to understand them a little more and start making use of them in production. I imagine I am where most working front-end devs are at this point; aware...
·benfrain.com·
First adventures in View Transitions
OpenFreeMap Quick Start Guide
OpenFreeMap Quick Start Guide
OpenFreeMap – Open-Source Map Hosting lets you display custom maps on your website and apps for free.
·openfreemap.org·
OpenFreeMap Quick Start Guide
VERT.sh — Free, fast, and awesome file convert
VERT.sh — Free, fast, and awesome file convert
With VERT you can quickly convert any image, video and audio file. No ads, no tracking, open source, and all processing (other than video) is done on your device.
·vert.sh·
VERT.sh — Free, fast, and awesome file convert
Basecoat
Basecoat
A components library built with Tailwind CSS that works with any web stack.
·basecoatui.com·
Basecoat
How to Generate Open Graph (OG) Images in Astro — Moriz von Langa
How to Generate Open Graph (OG) Images in Astro — Moriz von Langa
Learn how to generate dynamic Open Graph (OG) images for your Astro-powered page using Satori and Sharp. From setting up custom fonts to handling frontmatter images in both dev and production—this guide covers it all. Make your shared links look stunning!
·mvlanga.com·
How to Generate Open Graph (OG) Images in Astro — Moriz von Langa
Note #22
Note #22
A collection of notes and ideas
·lloydatkinson.net·
Note #22