Found 10569 bookmarks
Newest
Oklchroma - OKLCH Color Pattern Generator
Oklchroma - OKLCH Color Pattern Generator
Create harmonious color patterns with Oklchroma, a powerful OKLCH-based color scale generator for designers and developers.
·oklchroma.utilitybend.com·
Oklchroma - OKLCH Color Pattern Generator
Making a Masonry Layout That Works Today | CSS-Tricks
Making a Masonry Layout That Works Today | CSS-Tricks
I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.
·css-tricks.com·
Making a Masonry Layout That Works Today | CSS-Tricks
WCAG in Plain English - AAArdvark
WCAG in Plain English - AAArdvark
A plain-language guide to WCAG accessibility standards. Friendly explanations that make accessibility easier to understand, one criterion at a time.
·aaardvarkaccessibility.com·
WCAG in Plain English - AAArdvark
Tooooools.app
Tooooools.app
Apply lo-fi effects to your images and videos: dithering, halftone, gradients, patterns and more. Free, no sign-up required.
·tooooools.app·
Tooooools.app
A Primer on Focus Trapping | CSS-Tricks
A Primer on Focus Trapping | CSS-Tricks
Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly because of the numerous parts to you got to manage.
·css-tricks.com·
A Primer on Focus Trapping | CSS-Tricks
Stacked Transforms
Stacked Transforms
A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.
·frontendmasters.com·
Stacked Transforms
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