51
17
52
7
53
12
submitted 1 month ago by mina86@lemmy.wtf to c/webdev@programming.dev

I come with a seemingly simple question: should outbound links be styled differently than intra-site links? For example, the way Wikipedia does it with an icon after the text of the link. Do users care? Did anyone done any research on that?

I’m thinking of situations where you might have a sentence like ‘I’ve written about this before, and recent events around ACME corporation only made me entrenched in my opinion.’ where ‘written about this before’ would be a link to another page on the website and ‘recent events around ACME corporation’ would be link to external site.

54
21
55
3
56
5
57
11
58
4
submitted 1 month ago by cm0002@toast.ooo to c/webdev@programming.dev
59
55
60
10
submitted 1 month ago* (last edited 1 month ago) by comfy@lemmy.ml to c/webdev@programming.dev

I want to build a small site which acts as a broad, searchable FAQ for a certain topic.

Consider I have the FAQ:

What is the approximate mass of Earth?

It's 5.9722 × 10^24 kilograms, wow!

I want the user to have a chance at finding this FAQ by asking How heavy is our planet

Looking at this basically, the two similar questions have only one shared word, "is", which is an extremely common word. So using something really simple like word comparison or even stemming/lemmatization alone won't help.

On the very other end of the spectrum, a search engine's AI feature can interpret this effectively, rephrase the question and give a similar answer. So, what strategies are are in-between these two extremes?

  1. A few people will be adding questions to the site regularly.

  2. If possible, no external services, just self-hosting on an affordable server.

  3. Simpler and lighter solutions are preferred.

Are any of the features in OpenSearch (ElasticSearch/Lucene fork) able to do this? Is it overkill?

Since the site will have new questions to match regularly, will a solution require the repeated, wasteful retraining of NLP models to to create weights? Or is training so efficient for small-scale text datasets that it's responsible and reasonable to do on a cheap low-end server?


edit: Just spitballing here, I could try a solution which does the bulk work at insert-time rather than runtime, by asking a general pre-trained language model to rephrase the question many different ways, or generate keywords, then use those responses to generate tags for a basic keyword search to match. This would avoid making a heavy search function or retraining any model on the server.

Example result:

GPT-4o mini

Here’s a list of synonyms for the keywords in "What is the approximate mass of Earth?" formatted as an array of strings:

json

[
  "weight",
  "heaviness",
  "bulk",
  "load",
  "volume",
  "estimated",
  "rough",
  "approximal",
  "near",
  "close to",
  "planet Earth",
  "the globe",
  "the world",
  "Terra",
  "our planet"
]

61
9
62
8
63
12
(css-doodle.com)
submitted 1 month ago by cm0002@mander.xyz to c/webdev@programming.dev
64
2
65
48

Pay per crawl is a new feature to allow content creators to charge AI crawlers for access to their content.

Pay per crawl grants domain owners full control over their monetization strategy. They can define a flat, per-request price across their entire site. Publishers will then have three distinct options for a crawler:

  1. Allow: Grant the crawler free access to content.
  2. Charge: Require payment at the configured, domain-wide price.
  3. Block: Deny access entirely, with no option to pay.

Although this is old news, I still found it interesting. Also, I like the "AI Labyrinth" feature of Cloudflare to block AI bots.

66
3
Updates and Bot Wars (marisabel.nl)
67
7

By leveraging WebRTC for direct browser-to-browser communication, it eliminates the middleman entirely. Users simply share a unique URL to establish an encrypted, private channel. This approach effectively bypasses corporate data harvesting and provides a lightweight, disposable communication method for those prioritizing digital sovereignty.

Features include:

  • P2P
  • End to end encryption
  • Forward secrecy
  • Post-quantum cryptography
  • Multimedia
  • Large file transfer
  • Video calls
  • No registration
  • No installation
  • No database
  • TURN server

*** The project is experimental and far from finished. It's presented for testing, feedback and demo purposes only (USE RESPONSIBLY!). ***

This project isnt finished enough to compare to simplex, briar, signal, etc... This is intended to introduce a new paradigm in client-side managed secure cryptography. Allowing users to send securely encrypted messages; no cloud, no trace.

Technical breakdown: https://positive-intentions.com/blog/p2p-messaging-technical-breakdown

Demo: https://p2p.positive-intentions.com/iframe.html?globals=&id=demo-p2p-messaging--p-2-p-messaging&viewMode=story

68
21
69
6
The Browser Hates Surprises (frontendmasters.com)
70
29
71
9
72
10
Nice Select (nerdy.dev)
73
14
74
8
Websurfx 1.24.36 release (programming.dev)

cross-posted from: https://programming.dev/post/45042331

Hello again!!

Sorry for the big delay in the announcements. I know it has been a long time I have not made any announcements but I will try my best next time this doesn't happen again.

So, through the medium of this post I would like to share with you all the v1.24.36 major release version of the websurfx project which was released on the 26th of January.

If you are new, and you don't know what is websurfx then I would suggest taking a look at my previous post here:

https://programming.dev/post/2678496

Which covers in depth about what the project is and why it exists.

Credits

Before I share with you the changelog, what this release version means and a preview on what we are planning to work on for the next major release v2.0.0. I would first like to thank all our contributors and maintainers because of whom this was all possible. Specially I would like to thank spencerjibz, MickLesk and SchweGELBin who have been invaluable to the project. Also, Websurfx would not have been possible without alamin655 and xffxff early involvement.

thanks Thanks 💖 to all the people involved in the project

Now, let's dive straight into what this release version actually means.

What does this release version means

This new release version v1.24.36 updates the hybrid caching api to take advantage of the two layer caching solution which eliminates the round trip time delay of fetching the same results from the cache.

Changelog

The changelog of all the changes can be found here:

https://github.com/neon-mmd/websurfx/releases/tag/v1.24.36

Preview of the goals for the next major release

  • Different levels of privacy to choose from with the help of rust's conditional compiling features (In progress).
  • Even more engines will be supported.
  • Categories would be added to search results like images, news, etc.
  • More themes will be provided by default
  • More animations for the websurfx frontend will be supported.
  • Multi language support would be added.
  • I2p and tor support will be provided.
  • Reduce animations would be added for those who don't want animations and effects on the frontend.
  • And lots more ✨.

Call To Action

If you love our project and want to see it move ahead and progress in the direction you want, then we would suggest contributing at our project

75
16
submitted 2 months ago* (last edited 2 months ago) by WrenHavoc@lemmy.dbzer0.com to c/webdev@programming.dev

Edit: I managed to get it working by using :has and nesting css classes!

body:has(#theme-toggle:checked) {
  background-color: #eff1f5;
  .content {
    color: #4c4f69;
  }
  .header {
    color: #8839ef
  }
  .nav {
    background-color: #dce0e8;
    color: #4c4f69;
  }
}

I'm making a website for my school's robotics team and I'm trying to create a dark theme toggle but it's just not working. I'm trying to avoid javascript and I've seen this kind of thing done with only css and html before so I know it's possible. any advice?

repo: https://github.com/WrenHavoc/JudgeMent-Call-Website

edit: currently my code looks something like this:

#theme-toggle:checked ~ body {
  background-color: #eff1f5;
  color: #fff;
}

#theme-toggle:checked ~ html {
  background-color: #eff1f5;
}

#theme-toggle:checked ~ .content {
  background-color: #eff1f5;
}

the button itself is a checkbox that has display set to none and the label set as an svg so when you click the icon, it gets checked.

<input style="display: none;" type="checkbox" id="theme-toggle">
                <label for="theme-toggle" class="theme-button">
                    <img class="theme-button-svg" src="./icons/half-moon.svg">
                </label>

I used a similar strategy when making the menu for the site so I know it should work

.menu {
  position:absolute;
  margin:0%;
  right:20px;
  top:20px;
}

.menu-button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 2; /* above menu */
}

.menu-button span {
  display: block;
  height: 4px;
  background-color: #cba6f7;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-items {
  top: 30px;
  right: -20px;
  width: 200px;
  background-color: #181825;
  position: absolute;
  display: none;
}

.menu-items li {
  margin: 20px 0;
}

.menu-items a {
  text-decoration: none;
  color: #cba6f7;
  font-size: 18px;
  padding:5px;
}

.menu-items a:hover {
  text-decoration: none;
  background-color: #cba6f7;
  color: #181825;
  font-size: 18px;
}

.menu-selected {
  text-decoration: underline;
  text-decoration-color: #cdd6f4;
  text-decoration-thickness: 3px;
}

.menu-selected:hover {
  text-decoration-color: #181825;
}

#menu:checked ~ .menu-items {
  display: inline;
}

#menu:checked + .menu-button span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 7.5px);
}
#menu:checked + .menu-button span:nth-child(2) {
  opacity: 0;
}
#menu:checked + .menu-button span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -7.5px);
}
<input style="display: none;" type="checkbox" id="menu">
                <label for="menu" class="menu-button">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
view more: ‹ prev next ›

Web Development

5578 readers
19 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 2 years ago
MODERATORS