Author | Lightnews

John Siciliano @johnsicili.bsky.social · Aug 29

This post is being authored in Sanity and sent to Bluesky using Sanity Functions.

John Siciliano @johnsicili.bsky.social · Jul 20

Figma just made adding a glass effect super easy.

It looks nice and lots of designers will be using it.

Add effect > glass > play with params 🫰

1 2

John Siciliano @johnsicili.bsky.social · Jun 12

Just overrode the Monokai theme background and not sure why I didn’t do this 10 years ago

1

John Siciliano @johnsicili.bsky.social · Feb 28

DRY (don’t repeat yourself) is a core development principle.

Hardcode an email in 3 places on a site, and human error will strike if you need to update it. Plus, it just takes more work.

Now you can define reusable data on the Global Root. Think phone numbers, emails, CMS API info, etc.

Webstudio @webstudio.is · Feb 28

Want to reuse an email 📧, phone number, or CMS connection data throughout your site??

Now you can with Global Data Variables!

🌎 Define reusable data globally
📦 Access the variables anywhere… including inside Slots!
👌 Maintain consistency
🫰 Easier CMS setup!

Demos below 😉

2

John Siciliano @johnsicili.bsky.social · Feb 15

Official Webstudio sections library coming soon!

- Built with Craft
- One-click insert
- Auto-adapts to your design system on insert
- Quality > quantity
- Accessible and SEO’d

Talk soon 😉

3

John Siciliano @johnsicili.bsky.social · Jan 25

A 36.55% boost in conversions… I’ll take it! 🔥

The title experiment was a success.

“Custom frontend without custom code” converts at 7.45% 🤯

1

John Siciliano @johnsicili.bsky.social · Jan 22

Just tested a new feature on Webstudio 🔥🔥🔥

Talk soon 😉

1 3

John Siciliano @johnsicili.bsky.social · Jan 20

Starting an A/B test for our homepage title.

It’s been extremely challenging to ideate these, specifically balancing clarity, SEO, punchiness, target audience, and unique value proposition.

1

John Siciliano @johnsicili.bsky.social · Jan 9

These CSS interactions were fun to make and strengthened the marketing messages, making them more impactful than static ones.

Made entirely with Webstudio UI features. 🚫 No code was written.

Webstudio @webstudio.is · Jan 8

Made in Webstudio without writing code

“Other platforms are stuck in 2015”…

2

John Siciliano @johnsicili.bsky.social · Dec 27

👉 Advanced styles

- Pointer events none so you can hover over the globe and it registers as hovering over the stats
- Calcs to use a consistent offset and move things around
- Using --ease-squish-3 from Open Props
- The only custom CSS was keyframes for the live indicator

John Siciliano @johnsicili.bsky.social · Dec 27

👉 The data gets into KV via a Worker Schedule that runs once per day.

To achieve extremely high perf, I made a cron job that fetches data from 4 different sources (Cloudflare, Discord, GitHub, and Supabase).

Most sources require multiple fetches to get the required data.

1 1

John Siciliano @johnsicili.bsky.social · Dec 27

👉 The API was custom-built using a tiny Cloudflare Worker.

It responds to GET requests by fetching a single key-value pair from Cloudflare KV.

It takes 40-50ms ⚡️

1

John Siciliano @johnsicili.bsky.social · Dec 27

👉 Webstudio Resources are used to fetch the data from an API.

I pasted in the API URL, it gets the data, and then I connect or bind that data to my text blocks.

1 1

John Siciliano @johnsicili.bsky.social · Dec 27

Every SaaS website needs this live stats section.

I’ll show you how I built it.

It involves Webstudio Resources, Cloudflare Workers, and advanced styles.

Details 👇

Webstudio @webstudio.is · Dec 27

Check out these stats!

💻 Over 100k projects
🤝 Over 50k users
❤️ Almost 4k Discord users
🌎 Serving terabytes of data per month

Webstudio is built to scale.

1 4

John Siciliano @johnsicili.bsky.social · Dec 17

Updating my template starter kit with these styles 🙂

John Siciliano @johnsicili.bsky.social · Dec 16

What do you do when implementing a Figma design that has images that go to the edge of the design and then are cut off? How should this be handled on larger screens?

I personally export the non-clipped image and on larger screens show the full image outside of the container.

John Siciliano @johnsicili.bsky.social · Dec 13

I’ve found that AI (or my prompts?) haven’t been reliable with colors, which is why 1. I try to do as much without AI as possible, and 2. there is manual intervention. TBD how to move forward, though the current process is still faster than manually doing it all.

John Siciliano @johnsicili.bsky.social · Dec 13

Figma to WS update: Color vars!

1 Feed it CSS from Figma
2 Suggest the Open Props color groups
3 AI maps colors to palette variables (—gray-12)
4 Human intervention lets you customize the mappings
5 AI maps the color vars to semantic vars by interpreting their usage from the CSS

1

John Siciliano @johnsicili.bsky.social · Dec 12

New AI SaaS template coming soon 🔥

John Siciliano @johnsicili.bsky.social · Dec 11

I’m using Preview mode 5x more with the new shortcut…

⌘ + Shift + D

All with the left hand.

This shortcut is for toggling to Design mode, but if you’re already in it, it’ll take you to Preview.

John Siciliano @johnsicili.bsky.social · Dec 10

😅 More to come! Credit goes to @oleg.id

2

John Siciliano @johnsicili.bsky.social · Dec 10

We just announced a huge feature with AI Santa.

Took one minute and we scrapped our previous launch idea that took over a day and didn’t turn out great.

Thanks for the assist @synthesia.io 😅

Webstudio @webstudio.is · Dec 10

The best Christmas gift you could ask for...

1 1 1

John Siciliano @johnsicili.bsky.social · Dec 7

Webstudio Tip: Use the Expression Editor for conditional plural formatting.

Example: Display "1 template" or "6 templates" dynamically with this expression:

`${total} template${+total == 1 ? '' : 's'}`

John Siciliano @johnsicili.bsky.social · Dec 6

Woah, I just learned that if you hold option while taking a screenshot, it grows outwards from the center point.

This makes it a lot easier to take a screenshot with the desired focal point in the middle.

John Siciliano @johnsicili.bsky.social · Dec 5

New SaaS template coming soon to the Webstudio Marketplace.

Includes 7 pages