Delicious

Delicious

10231 bookmarks
Custom sorting
Grainy Gradients
Grainy Gradients
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
·frontendmasters.com·
Grainy Gradients
Magic UI
Magic UI
Beautiful UI components and templates to make your landing page look stunning.
·magicui.design·
Magic UI
toolwind/anchors: Anchors for Tailwind CSS provides a simple API for working with CSS anchor positioning, enabling flexible, declarative positioning relative to custom anchors.
toolwind/anchors: Anchors for Tailwind CSS provides a simple API for working with CSS anchor positioning, enabling flexible, declarative positioning relative to custom anchors.
Anchors for Tailwind CSS provides a simple API for working with CSS anchor positioning, enabling flexible, declarative positioning relative to custom anchors. - toolwind/anchors
·github.com·
toolwind/anchors: Anchors for Tailwind CSS provides a simple API for working with CSS anchor positioning, enabling flexible, declarative positioning relative to custom anchors.
Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine
Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine
In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API.
·smashingmagazine.com·
Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine
Image Editor | Figma
Image Editor | Figma
📺 Demo video on YouTube 💡 Features: Manipulate an image with many different color adjustments and filtersSave and load your own presetsPlugin takes and keeps the original resolution of the image.Changes tracking 🎨 Color adjustments: BrightnessContrastHueChannelsExposureGammaVibranceTintCurvesSof...
·figma.com·
Image Editor | Figma
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