HNHacker News
TopNewBestAskShowJobs

chrisvxd

266 karma · joined January 2, 2015

submissionscomments
chrisvxd··on Show HN: Puck – Open-source visual editor for React
Puck is focused on providing a solution for non technical folk to build on-brand web pages with their team’s existing React components. This enables them to build web pages with guard rails that respect their brand guidelines.

Plasmic is a no-code tool for building websites and applications from scratch. A great solution for a different problem.

chrisvxd··on Show HN: Puck – Open-source visual editor for React
You can certainly configure it to work with GraphQL if you need to. See this adaptor for an example on how to integrate with external data sources: https://github.com/measuredco/puck/tree/main/packages/adapto...
chrisvxd··on Show HN: Puck – Open-source visual editor for React
It’s probably a cliche but yes, we’ve been thinking about this.
chrisvxd··on Show HN: Puck – Open-source visual editor for React
It actually could be interesting to add tiptap for collaboration!
chrisvxd··on Show HN: Puck – Open-source visual editor for React
Thanks! It’s possibly I’m misunderstanding, but I believe Puck is a different problem space to the other solutions you’ve mentioned -

Puck enables content teams to produce web pages using existing React components produced by their React developers in a fixed and predictable manor that keeps them within the brand guidelines.

You can’t inject arbitrary blocks and can only interact with components that are defined by your developers.

You can render fully fledged pages or even, in theory, applications.

Regarding content, Puck supports inline editing or pulling in data via an API adaptor (such as from a headless CMS).

We don’t have a rich text field type currently, but I’m not opposed to adding it. (Internally, we’ve added a markdown component to enable some basic formatting and longer form content: https://github.com/measuredco/measuredco-site/blob/02fc908b8...)

chrisvxd··on Show HN: Puck – Open-source visual editor for React
Framer is a design tool, but Puck is a content tool. We're focused on allowing content teams to create pages using existing on-brand components. Like a WYSIWYG with guard-rails.

We built it because we couldn't find something that would let our clients' content teams produce content for their sites without 1) either going off-brand or 2) pestering their devs for layout changes.

chrisvxd··on Show HN: Puck – Open-source visual editor for React
This comment made my day. Thank you
chrisvxd··on Show HN: Puck – Open-source visual editor for React
It pretty much supports anything that React supports, but it's not possible to pass callback props in directly via Puck's authoring form.

However, you might be able to either wrap your component inside the `render` function and define your callback there, or use context to pass in a function from higher up the tree.

If you share your use case, I might be be able to help you out.

chrisvxd··on Show HN: Puck – Open-source visual editor for React
Sorry I got the wrong end of the stick. Please see my other reply to your comment.
chrisvxd··on Show HN: Puck – Open-source visual editor for React
+1 what Scott said

Multi-column layouts are incoming very soon

And Puck does support either server or client rendering

chrisvxd··on Show HN: Puck – Open-source visual editor for React
This might be a better example, actually: https://github.com/measuredco/puck/tree/main/packages/adapto...
chrisvxd··on Show HN: Puck – Open-source visual editor for React
We don't natively support templating strings, but since it's rendered by React, you can always add that when integrating Puck.

However you can use an adaptor if you need to pull data in via a third party API: https://github.com/measuredco/puck/tree/main/packages/adapto...

chrisvxd··on Show HN: Puck – Open-source visual editor for React
You can use adaptors for this. Adaptors let you request a third party API via the `adaptor` field type.

Docs are limited, but there's a reference data shape here: https://github.com/measuredco/puck#adaptor

Example implementation here: https://github.com/measuredco/puck/blob/main/packages/adapto...

Example usage here: https://github.com/measuredco/puck/blob/main/apps/demo/app/c...

You can either use it for a specific prop (i.e. `name`) or spread the result of the API call across your entire component (use the magic `_data` prop).

chrisvxd··on Show HN: Puck – Open-source visual editor for React
I just re-read your comment and realised I didn't answer it first time around.

The best way to handle this is in the render function you pass to Puck, which can continue to support the old prop (`description`) and map into the new prop (`subtitle`), even if it's not provided by the author.

We don't have a system for migrating props in the actual data yet, but it's something we could look into.

chrisvxd··on Show HN: Puck – Open-source visual editor for React
Yeah, similar!
chrisvxd··on Show HN: Puck – Open-source visual editor for React
We let the user decide how they want to store the data via the `onSave` and `onChange` callback props you provide to the `<Puck>` component. So you would likely save to your own database in the callback.

The data shape is detailed here: https://github.com/measuredco/puck#data

chrisvxd··on Show HN: Puck – Open-source visual editor for React
Yup that's the one. Also recommend checking out [dnd-kit](https://dndkit.com), which we may migrate to at a later date.
chrisvxd··on Show HN: Puck – Open-source visual editor for React
It's such a common problem, I'm amazed there aren't more solutions out there.

A sound data model really helps things out. I'd go API-first.

Drag and drop is a PITA. Specifically multi-column layouts, which require nested dropzones and a bunch of "intuitive" UX. A good library can help here, but not do everything (we're using react-beautiful-dnd which is a bit out of date - dnd-kit might have been a better shout). This hasn't landed in our main branch yet, but you can see it under the nested-dropzones branch (https://github.com/measuredco/puck/tree/nested-dropzones).

If you could write React wrappers for your Vue components, you could potentially leverage Puck directly. That would save a lot of time. And even if not, you might be able to fork it or reuse the data model.

Happy to give you more pointers. If you want to DM, I'm @chrisvxd on Twitter/GitHub and here's my LinkedIn: https://linkedin.com/in/chrisvilla/

chrisvxd··on Show HN: Puck – Open-source visual editor for React
Hey, thanks for the feedback! We're still figuring out the wording and will take this on board.
chrisvxd··on Pfizer Covid vaccine approved for use next week in UK
My understanding is that they've been carrying out a rolling evaluation that has been going on for the duration of the trials, which has helped accelerate the normal process.

Having said that, I believe the EMA (EU) also carried out a rolling evaluation, so I'm not sure what the differences are there.

chrisvxd··on Show HN: I made an API to generate social media images
Thanks!

Something like that could definitely be possible, although it would require a fair bit of work. You can build custom HTML templates for OG IMPACT under the Pro tier, which supports JS.

You could have the template accept the origin URL as a query param, download the page and then do any AI processing using related libraries / APIs. The risk is that this could be quite a heavy template, which could cause timeouts on social media platforms.

Feel free to play around with this using the Editor: http://ogimpacteditor.netlify.com

chrisvxd··on Show HN: I made an API to generate social media images
Sure they can if they'd like to. The public API can either be placed directly in your meta tag, or requested as a GET API via a backend.

What would be the reason for using your own CDN?

chrisvxd··on Show HN: I made an API to generate social media images
This is awesome. Let me know how you get on with it!
chrisvxd··on Show HN: WordCloud API – Generate beautiful wordclouds from any URL
Hey HN peeps!

Today, we're excited to be launching WordCloud, an API that allows you to easily generate stylish preview images from any webpage or text.

It provides a hosted API for stylecloud and wordcloud, by minimaxir and amueller respectively. stylecloud was shared with HN a few weeks ago.

The majority of any revenue generated from this API for the original OSS developers. If this is you, please get in touch to setup payouts and answer any questions you may have.

Thanks,

Chris,

chrisvxd··on Show HN: Puppet Master – Headless Chrome as a service
Hi HN!

If you run any kind of automation with a browser, you know how difficult it can be to get screenshots that look like they would in a real browser.

Puppet Master is a simple REST API to allow you to grab screenshots and PDFs of any web page, rendered in real Chrome. It’s totally free to try!

It’s built on top of Headless chrome, but because it’s a REST API, using it is as simple as calling a URL, making it perfect if you're unable to run Headless Chrome in your environment. It also scales infinitely because it’s built on top of a serverless architecture, and the pricing scales with your usage.

Puppet Master has been built on top of saasify.sh, a platform we’re building to make it easy to turn your open source software into a fully functional SaaS product. We all love open source, and believe that open source developers should be able to make an income from their valuable projects!

All feedback warmly welcomed!

chrisvxd··on Show HN: I built a jobs board to find the best paying tech contracts
Thanks for the pointers!

* Great idea re searching - I did actually have the URL updating, but I had some problems when switching to [react-instantsearch](react-instantsearch/package.json) with the state getting reset, so I temporarily removed it.

* Job posting will absolutely be automated. I just haven't had time to build that yet.

chrisvxd··on Show HN: I built a jobs board to find the best paying tech contracts
Thanks dude!
chrisvxd··on Show HN: I built a jobs board to find the best paying tech contracts
Thanks! UK based for now, yeah, but I plan on adding support for the US next.

I'm aggregating the jobs, although my only source is currently reed.co.uk (they have a nice API!)

chrisvxd··on Show HN: I built a jobs board to find the best paying tech contracts
Howdy HN!

I built this jobs board for myself and my contractor buddies after getting tired of being offered below market rate.

The idea is simple - aggregate contract jobs and analyse their rates against the market so that it's easy to see if they're well paid or not.

It's very much an MVP, so all feedback/questions/ideas welcome.

Chris

---

Update, stack info:

- React, nextjs

- Firebase Cloud Firestore

- Algolia (with react-instantsearch <3)

- Heroku

chrisvxd··on SourceForge Acquisition and Future Plans
Almost all the comments here seem to be comparing SourceForge to GitHub, but (pre-DevShare) I always liked sourceforge as a consumer site, which is clearly not GitHub's area. Sure, there were some dev-orientated projects, but what made it great for me was the huge library of free, opensource and ACCESSIBLE consumer-facing software, like GIMP.

Then again, this is HN.

← PreviousPage 2 of 3Next →