guivr

to install, just run `npx ohmydashboard`

it currently integrates with: - Stripe - Gumroad - RevenueCat

lmk if you need more integrations! (or feel free to open PRs)

In the field of personalized image generation, the ability to create images preserving concepts has significantly improved. Creating an image that naturally integrates multiple concepts in a cohesive and visually appealing composition can indeed be challenging. This paper introduces "InstantFamily," an approach that employs a novel masked cross-attention mechanism and a multimodal embedding stack to achieve zero-shot multi-ID image generation. Our method effectively preserves ID as it utilizes global and local features from a pre-trained face recognition model integrated with text conditions. Additionally, our masked cross-attention mechanism enables the precise control of multi-ID and composition in the generated images. We demonstrate the effectiveness of InstantFamily through experiments showing its dominance in generating images with multi-ID, while resolving well-known multi-ID generation problems. Additionally, our model achieves state-of-the-art performance in both single-ID and multi-ID preservation. Furthermore, our model exhibits remarkable scalability with a greater number of ID preservation than it was originally trained with.

Good point. Indeed looks like only a few have. I'll try to add focus styles to all of them in the future. Thanks!

Thanks, merek. Happy it was helpful to you :D

Thanks swyx <3

Nice, yes, I plan to add "copy to react" feature soon. Will let you know when it's ready

Thanks for the heads up

No JS, all made with pure CSS :D (you can copy the code to see how it works)

Thanks @rrishi!!

Awesome, thanks for buying it! I'm glad it's useful to you

Thanks a lot @dmje, really appreciate all your support!

Yess, it's on the roadmap! :D

Hi, it's not a cash-grab, been working on it for almost 4 years now, just trying to make something useful that helps people save time.

Thanks a lot for the support, @sbm15!

Thankss :)

Hi! You could still use the extension to quickly inspect things, to understand how other websites are designed, or you could also use on your own website when debugging CSS or making fast edits (it's possible to edit the CSS with the extension).

Hi, @lelandfe, there's an answer for that on our FAQ:

* How is this better than "Computed Styles"? > When you copy CSS from “Computed Styles”, aside from the declarations being longhand and bloated, it transforms all measurement units such as %, em, rem in pixels (px). This could break your website on mobile devices.

"Computed Styles" also don’t give you pseudo-classes, pseudo-elements, media queries, and keyframes styles, and don't copy multiple elements at once. CSS Scan does, and it gives you the original units and everything you need effortlessly.

Thanks a lot for adding the data! Haha. The thumbs down is just a way to represent "No" via emoji, I think it could be confusing / inconsistent to change them according to specific data points like "Shark", but I definitely understand that there can be a problem with it. I'll think about it. Thanks for the feedback!

sorry, this is happening sometimes (still need to figure out what's causing this annoying bug), especially when opening the Filters. could you try again pls? here's the map link: https://beachnearby.com/map?ref=hn thxx

It's ~90% copied from their CSS, I had to make a few adjustments sometimes. I used my own tool (CSS Scan - https://getcssscan.com) to copy the CSS.

The only buttons made from inspiration were the ones from the macOS Big Sur (number 10, 11, and 12).

Also, a few buttons used JS to change styles according to the cursor and I had to remove this part.

Hi HN!

One of the reasons I created CSS Scan was because I'm always interested in knowing how some websites make their box-shadow.

So I made this collection of my favorite box-shadow on the internet, and I'll be adding new shadows to the list every time I see some new ones.

"CSS box-shadow examples by CSS Scan" is a curated collection of 82 free beautiful CSS box-shadow.

Bookmark it (keep it on your favorites) and use it whenever you need it for your projects! All you have to do is click on a box you like, and it'll copy its CSS box-shadow rule.

And if you have any ideas or suggestions, I'm all ears.

Thanks all!

Launch Tweet: https://twitter.com/gvrizzo/status/1303958972022403072

Thanks, glad you liked it!

Dear Hacker News,

Creator here, happy to answer any questions :)

As a webdeveloper, I always caught myself having to open Dev Tools when curious about some box-shadow, border-radius or any other rule of an element I liked on the web.

And when you use the Dev Tools to inspect, if the element matches many CSS selectors, you might need to scroll a lot to figure out how it is styled and which rules aren’t being overwritten. And if by any reason you want to copy the styles, it’s a pain. Alternatively, you can use the Computed Styles tab - but then you’ll get all the rules in longhand form, which is bloated and it converts all units to pixel, ignoring %, em, calc(), etc and completely breaking responsiveness.

So I built CSS Scan. With it, wherever you hover your mouse over, you instantly get the clean, computed (but responsive) CSS of that element, and you can copy all its rules with a single click.

CSS Scan is particularly useful for:

  - Discovering how your favorite websites are styled;
  - Debugging your own code;
  - Moving your codebase;
  - Copying specific elements from frameworks/themes/templates to use them without importing huge CSS files.

How does it works, technically?

This isn't as simple as doing something like `el.getComputedStyle`.

As you may already know, this one doesn't read :hover styles (while CSS Scan does) and returns a lot of rules that are only for the browser rendering purposes. Even if you filter it, you'll still get the measuring units only in pixels, whereas with CSS Scan, you get the original unit used (rem, em, % or px), because it gets the CSS through a different way. I’m going to explain it below.

CSS Scan does an XMLHttpRequest for all the stylesheets loaded and add them into an iframe (because of CORS), then check if the current element selector matches the CSS selector, one by one; then checks each selector specificity, rearrange, clean, sort alphabetically and finally caches the processed and optimized CSS with `nano-memoize` for speed.

The extension optimizes all the final CSS with the use of 3 libraries together:

  - CSSO;
  - Shrthnd (I've made some local changes on this one to add more shorthand rules support);
  - PostCSS.

Since the first version, which was launched 9 months ago, I’ve implemented new features, bug fixes, and general improvements:

  + Code syntax highlighting
  + Show rendered font
  + Show element dimensions
  + Option to pin the box
  + Shortcuts (Lots of people asked)
  + Option to move the UI buttons to the bottom
  + Option to pause the scanner
  + Option to truncate classes names
  + Show :hover styles separated
  + Copy :hover styles merged or separated
  + Traverse the element and scan the parent
  + Identifies when elements are being overlapped
  + Now it works on iframes!
  + More shorthand rules support
  + i18n: Chinese (simplified and traditional) and Portuguese
  + Redesign UI and landing page

SPECIAL: I’m also giving you an exclusive HN mates 25% discount limited for the first 10 sales from here. To use it, buy it from this URL: https://gum.co/cssscan/hn-mates :)

P.S.: Please keep in mind that this extension is only for use cases when you want to have an overall vision of the styles; it's far from being a full alternative to Inspect Element.

P.S. 2: The first version took me precisely 50 hours and 17 minutes to develop. I recorded all the development and made a nice speed video! You can check it at https://www.youtube.com/watch?v=OtsNNXpXcYs

Nice!

The first update happened today. More to come :)

Hey! I have good news! Just updated the app. Now you can copy the selector name! If you use Chrome, the extension will update itself. On Firefox, I'll implement auto-update functionality tomorrow. More updates to come!

Yes, there'll be updates in the next week. It'll not be my main project but it's in my plan to launch some updates

Not identical, just similar. getComputedStyle gets the default styling of the browser too, and also some properties that are used just for rendering.

Besides that, you'd have to use the console for each element you want. With CSS Scan you just have to hover it.

Glad you liked it! Thanks :)

Thanks andre! :) The sales went pretty well! I'll share some stats on my twitter @gvrizzo tomorrow. Also already shared some numbers on a reply here.

Thanks! It grabs the current media query only :)