Tim Farnam

As an adjective or a noun? Front-end framework on the front end

In this video we build a landing page from scratch just using plain HTML and CSS in the Hot Page website builder.Check out the finished page: https://hot.pag... Build a custom landing page from scratch part 1

I did some youtube videos where i build a landing page in 4 parts. most of them are good
www.youtube.com/watch?v=pkG...

Today I'm going to build an image gallery where images zoom when you hover them with the mouse and you can open them in a lightbox to see them in more detail. Image Lightbox Web Component

At 10am (in 5 minutes) I will be streaming a web page build with image galleries and lightboxes using native HTML web components: www.youtube.com/live/cq4aa0...

Hot Page Hot Page is a web site builder based on open standards. Write HTML, CSS and JavaScript in a drag-and-drop page builder with live preview and visual tools.

You should try Hot Page hot.page We are trying to make something like webflow but all of CSS just works with no abstractions. it's fixing exactly this problem

Want to create a sticky header in Hot Page? Do it like GOD intended: “position: sticky; top: 0;” It’ll be stickier than the inside of a burnt marshmallow.

Link, please

Today I am going to build a photo gallery with captions that scroll over fixed position images. This is a technique that's become a staple of some image-heav... Caption Scroll Over Fixed Position Images in CSS

I'm going to stream some Web Component and CSS magic today. Starts in about 10 minutes
www.youtube.com/watch?v=_aL...

Split Flap

“As an ode to the train stations of my childhood, I bring you a skeuomorph split-flap web component.”

fx.hot.page/split-flap #webanimation

Buttons

This code library is growing. We have three library panes built and like 50 left ha library.hot.page/buttons

Hot Buttons, No Issues. We just released the button library for Hot Page. 50 very fresh designs

Wait how can we de-platform social networks?

Learn how to use web components on Hot Page with Microsoft's web component framework, Fluent UI.The page I built is published! https://playground.hot.page/fl... How to use Fluent UI on Hot Page

I published a video where I use native HTML custom elements (aka web components) on Hot Page
www.youtube.com/watch?v=AZf...

I will forge a complete web page out of thin air using Hot Page Build a Totally Custom Landing Page from Scratch

I am livestreaming live at 10am Mexico City time "How to build a landing page on Hot Page" (live)
www.youtube.com/watch?v=sQ8...

Screenshot of a web interface for a skeuomorphic split-flap text animation component. A text box shows the message “This is fun O’ Clock!” with a button labeled Update Text. Below, the animated split-flap currently displays “THIS IS FUN OV CLOCKV” in white letters on black flip panels.

Something fun today: Split Flap is an ode to the old train station signs that had the flipping characters. Created by ‪@hotpage.bsky.social‬.
Fair warning: it’s fun, but might trigger motion sickness so, use with caution.

fx.hot.page/split-flap

I will blah blah Building the Hot Page Library

I'm doing a livestream building stuff building stuff on Hot Page
www.youtube.com/watch?v=vpl...

We want YOU to play around with web components! Edit the "demonic demo" here: hotpage.dev/playground/f... Hot Page is just HTML elements. Custom elements are just HTML elements 🤯

675: Building Hot Page with Tim Farnam Tim Farnam stops by to talk with Chris and Dave about his new project, Hot Page, and why and how he started building it after working in print and web news.

Exciting episode of @shoptalkshow.com this week. We had Tim Farnam creator of @hotpage.bsky.social, a drag n' drop site builder with a focus on semantic HTML. It's also powered by #webcomponents.

🎧: shoptalkshow.com/675/
📺: www.youtube.com/watch?v=njxL...

Tim Farnam stops by to talk with Chris and Dave about his new project, Hot Page, and why and how he started building it after working in print and web news.L... 675: Building Hot Page with Tim Farnam

Hot Page was featured on a very huge and important podcast:
www.youtube.com/watch?v=njx... Web Components and inline styles in your face, baby! BIG shout out to the greats @chriscoyier.net and @davatron5000.bsky.social

Burnout, the chatbot for Hot Page, is running our social media. Sometimes I wonder if i should have delegated this job to someone who loathes me so much. They certainly know where to hit me

Hot Page is the only drag-and-drop website builder where you get full control over the code you're writing. Build with the same tools that professionals use: real HTML, CSS and JavaScript.

Well it's visible in CSS which is where I need it. In JS you would have to do `.matches()` but you should probably be listening to events anyway. I give it 6 months before devtools starts showing these to us

HTML attributes vs DOM properties They're completely different, but often coupled.

Interesting point! When you say client do you mean the developer using the component? sounds like maybe we just need better devtools that surface these states. I tend to agree with @jakearchibald.com that attributes should be used for configuration, not state jakearchibald.com/2024/attribu...

HotFX Form Submit HTML forms using JavaScript with this standalone web component. Use the <hotfx-form> custom element and style different form states with CSS.

The full demo for my component which wraps an HTML <form> element is here: fx.hot.page/form

Then use them in your styles like this:

Add the states like this:

Add custom element internals in the `constructor()`:

I recently built my first web component with custom state sets. This stuff is really handy folks! It let's you write styles for a component based on what's happening inside using pseudo classes. Here's how it works

HotFX HotFX is a collection of HTML custom elements for common UI patterns and special effects

This is part of my open source project HotFX which is a collection of standalone custom elements written in vanilla JS: fx.hot.page/

Counter An HTML custom element that animates a number from zero to a given value. Watch and feel the satisfaction as the numbers grow in front of your eyes.

Read more on my blog post: fx.hot.page/counter

I just released another open-source web component that animates a number from zero to N. It's only 1k when gziped and has no dependencies!