Coder Social home page Coder Social logo

Comments (11)

vatterspun avatar vatterspun commented on June 7, 2024 1

Thank you very much for your interest and posting the first issue! This means a lot to me (:

I think you might be on to something important with this project. I found NOT having this functionality appear as part of my process bothered me after having it. That's a good sign.

Anyway, I gave this some more thought and I think the color similarity isn't going to be crucial to operations until you get into the 20+ terms. For example, here's a look at PDFXChange with similar functionality:

image

You'll notice that "open" kind of jumps out at you when it's highlighted in purple a dozen times.

As a result, seeing these color highlights lets me see variety and duplication, which is one of the reasons I'm keen on software like Mark My . I realize that's not the primary use case, but it's what made me suggest the feature.

from mark-my-search.

vatterspun avatar vatterspun commented on June 7, 2024 1

I tested on Firefox 103.0 and had great results.

Slight transparency / Enhanced highlight style

Both of those changes look great -- well done

A secondary striped style for highlights has been added, doubling the number of unique highlights from 7 to 14

I will say that the striped style definitely works and it calls out the colors, but it does diminish readability somewhat. Maybe if they were a little dimmer?

image

tried to make the style more dynamic so that it works in a wider variety of cases.

I tested with DuckDuckGo dark mode it looks great:

image

from mark-my-search.

ator-dev avatar ator-dev commented on June 7, 2024

Thank you very much for your interest and posting the first issue! This means a lot to me (:

Highlights are partially transparent to try to make them a bit prettier (in some cases). It looks like on Reddit the exact string match of your search is automatically given a white background, so this shows through a bit and makes the highlighting look weird.

Personally I'm not too sure about the style of the highlights, and they haven't really changed since the first version except to change the default colours. For example, should they have no transparency or have less on light mode sites, should the font colour/style be adjusted for better visibility, and should highlights be forced into a particular background size or style like with rounded corners? In case you haven't noticed, the highlight backgrounds can vary a lot across sites although the colours are always the same.

If you have any thoughts on this that would be really helpful, and I'll try some things out when I've got the chance as well.

from mark-my-search.

ator-dev avatar ator-dev commented on June 7, 2024

I think I've seen PDFXChange's feature mentioned before, and I really like the clarity (and of course consistency) shown in your screenshot. Forcing the height of highlight backgrounds to be the same is probably dangerous in case of disrupting the page layout, but subtle borders and corners would work well without any conflicts. Currently there are only 7 colours before they are repeated which isn't great, so perhaps styles like gradients or stripes could be added for large numbers of search terms?

seeing these color highlights lets me see variety and duplication

Actually this was one of the main use cases I had in mind, and of course there are many possible others that I might not have considered. Definitely a priority is seeing how usage varies across a page at a glance (e.g. to see where is most useful or if the page is not relevant enough), which is why I'm looking to put a lot more work into the scrollbar view where overlapping markers currently hide each other.

from mark-my-search.

ator-dev avatar ator-dev commented on June 7, 2024

Just to let you know by the way, I won't be working on this for about 2 weeks because of exams, which is also why progress has slowed down lately. I'm very interested in continuing to refine and support the project in my free time though, so feedback like this is invaluable.

from mark-my-search.

vatterspun avatar vatterspun commented on June 7, 2024

slowed down lately

Hey thanks for the update, no worries.

from mark-my-search.

ator-dev avatar ator-dev commented on June 7, 2024

@vatterspun I have just updated Mark My Search on the Firefox listing with version 1.1.2 which implements many of the discussed features. When you have the time, would you mind trying it out please to check if your problems in this issue were addressed?

Changes from this issue:

  • Slight transparency and more saturation for term buttons in order to improve their look on dark- and light-themed websites
  • Enhanced highlight style for better readability, taking inspiration from PDFXChange
  • A secondary striped style for highlights has been added, doubling the number of unique highlights from 7 to 14

I have not made the extension work to detect a dark or light theme, but tried to make the style more dynamic so that it works in a wider variety of cases. This is to retain consistency as much as possible. The new highlight borders give distinction on light backgrounds but don't show up much on dark ones, which is also where they are less needed as the colours stand out anyway.

from mark-my-search.

ator-dev avatar ator-dev commented on June 7, 2024

Thank you again for testing! I'm pleased it was what you had in mind and improved the experience.

Maybe if they were a little dimmer?

I agree with this, they're often a bit hard to read - I'll try dimming them as well as other adjustments. I'll also get around to adding a tertiary style (probably just stripes in the other direction) and maybe other options.

I also notice from your screenshots that the re-search icon (second from the left) has turned into an ugly circle, which is because my implementation only works well with my specific font (oops). This will be replaced with an SVG.

from mark-my-search.

vatterspun avatar vatterspun commented on June 7, 2024

I agree with this, they're often a bit hard to read - I'll try dimming them as well as other adjustments

Sounds good, I'll leave this issue open for the time being. Or however you prefer to manage your Github issues.

... the re-search icon (second from the left) has turned into an ugly circle, which is because my implementation only works well with my specific font (oops). This will be replaced with an SVG.

Excellent, glad I included that.

from mark-my-search.

vatterspun avatar vatterspun commented on June 7, 2024

Sidenote: it didn't escape my notice that the gray box ("selectivism" in the image below) appears for terms that don't actually show up in the document below. I thought this was a bug until I played around with it.

image

Great add.

from mark-my-search.

ator-dev avatar ator-dev commented on June 7, 2024

Sorry for not responding to your recent comments. I immediately started working on some enhancements based on your feedback, and it took longer than expected since I got caught up in fixing other features.

The striped style has (hopefully) been improved, and there are now several rotations in case the user wants 35 terms for some reason. All icons are now SVGs, scaling works properly, and UI style has been adjusted for consistency - this should mean that the extension looks great on any platform.

I thought this was a bug until I played around with it.
Great add.

Thank you, glad it's useful! I'm closing this issue for now because I don't know how to make its intention clear, but feel free to reopen if you think it needs fixing (alternatively, could be included in the intro / onboarding?)

from mark-my-search.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.