4
3 Comments

Web developers - help me give you what you want!

Hi my name is Stellan, I've been developing different kinds of products over the years.

When it comes to web and frontend I have found that the best way to build good stuff is by looking at how others have done it, though with web I think this is something that often is harder than it looks because of the requirements that's present on a website, like css frameworks and stuff, but also not being able to completely isolate the thing you like without the special css selectors used etc.

So to help with that I have built a chrome extension that allows you to grab a html element and it's children and include only the css needed to reproduce that element - and this allows you to see everything only relevant only to this element as well as exporting it to use for your own projects.

When I started building this it was at first just something I planned on using myself and it's current state is super-useful though it could use some cleaning of the css and stuff like that.

The thing I would want your help on is this

Is there someone here besides me that would find an extension like this useful?
And if there is, is there features to it that you would consider invaluable?

for example..

A page builder for the components you saved?

component export formats like vue, svelte, react?

tailwindcss export?

And ----

Would you pay for a extension like this?

Would you like the components you saved to be stored in a backend as well or just the browsers local storage?

If there is any interest in this I'm happy to talk to you about it in this thread or anywhere really if you prefer something else! :)

Hope to hear from you!

  1. 3

    I was looking for something like this recently.

    I identified several product landing pages that I liked, and I wanted to reproduce certain web components and animations from those landing pages and modify them for my purposes. For example,

    • I liked that when I scrolled down the page, some of the web components flew into place from the side in an animated way, and I wanted to reproduce that.
    • I liked some parallax effects and wanted to reproduce that.
    • I liked the Material Design styling on some form fields and wanted to create a similar form field.
    • I liked the grid-like CSS layout and wanted to borrow that, since I am not very good with CSS.

    I would want the components exported in React.

    I encountered some problems though:
    -In a lot of cases, it was easier to build the components myself than to try to grab the html / css from the page. Often the HTML components had an unknown number of layers (e.g., div inside a div inside a div). Understanding a parsing that was a pain. Regarding CSS sometimes the styles were applied inline vs. in a separate sheet vs in classes, and that made it difficult to copy css from a page. All of this made it easier to build from scratch or to look for something similar that was open source on codepen.
    -These were mostly for personal projects that I wouldn't pay for.

    1. 1

      In a lot of cases, it was easier to build the components myself than to try to grab the html / css from the page.

      This +1000!

      The nested divs which you might or might not need, old elements which are not using flexbox yet or just badly written code. They all contribute to it often being quicker to simply rewrite simple UI elements from scratch and just copying the visuals.

      You might be able to target people which are relatively new to web development though. To them rewriting stuff will be considerably harder than to somebody who already has some experience under their belt.

      For me personally it might be helpful to pick colors and margins like Adobe XD enable me to. That said, I'm not sure if or how much I'd be willing to pay for that. As a developer I can still rely on the good-old devtools to give me colors and margins.

  2. 1

    This is Arafat. I am super excited to share EZYTOR with the amazing PH community 💥💥💥.

    Ezytor is an online editor for Developers with a simple, intuitive drag & drop feature and ready-made themes you don’t need to code. Save tons of time, choose one of our great Themes, and build a stunning website in just a few minutes. Try EZYTOR.com

    Resources:

    ❤️ 5 Full Business Covered Themes (Bootstrap, Tailwind)
    ❤️ 150+ Pre-made Templates (Bootstrap, Tailwind)
    ❤️ 500+ Pre-made Sections (Bootstrap, Tailwind)

    Upcoming Features:

    *** Text Edit
    *** Image Edit
    *** Global Style change

    *** 1000+ Templates

    Road Map: https://trello.com/b/bHNP5dbc/ez...

    We are uploading new themes every week.
    Check Our Road Map

    Any feedback/suggestions will be more than welcome.

    Use the code "PH10OFF" for 10% discount.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 16 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments