Web Development

CSS Grid support has been widely available since March 2017 in all major browsers. Yet, here we are in 2024, and I still see few people using the grid template areas feature.

It’s no surprise that many avoid template areas as making sense of the grid is challenging enough. In this interactive article, I aim to shed light on this feature and, hopefully, convince you to use it more often. Once you see the simplicity and power of template areas, you may reach for them much more frequently.

Hi,

I've read quite few articles about Flask Vs quart.

But the one that I found do not go deep.. :/ (and are big adept of copy/past ...)

So, beside the extra features (ASGI, HTTP/2, WebSockets..)

I'm wondering if async/await in this context give a real boost of performance ?

When a client connect to a worker I don't think that while await, will allow another client to use the same work ? or am I wrong ?

Do you have any metric ? Or if you switched from Flask to Quart di you noticed a gain ? lost ?

Thanks.

Hi,

I'm looking for some inspiration to create a website.

Do you have a "crush" :) for a website (design speaking)

Or do you know some website that list great visual feature or website ?

Thanks.

For some years now, I have been using Laravel Homestead to quickly build up a virtual machine with all I needed installed. But it seems to not quite get the love it needs, and I'm wondering if folks have moved on to a different environment or tool for their development.

Hey everyone!

I wanted to share a little side project I’ve been working on: a Planet Zoo Animal Picker. It’s a simple tool designed to help you choose a random animal for your Planet Zoo game.

I know there are already tools out there, and mine isn't necessarily better, but it's something I created and I’m proud of it. It's just a fun little project I wanted to share with the community.

It's written in Vue/Quasar, src

Feel free to check it out, and for anyone that plays the game: Happy zookeeping! 🦁🐘

Feel free to tweak the two custom properties in the css pane to explore the different mosaic patterns that are generated.

Hi,

You might be aware that if a DNS request point your nginx server.

and this later do not have a server rule for it , nginx will server anyway the first server found in your config file, WTF !

So I've found https://stackoverflow.com/a/23281442

server {
  listen       80 default_server;
  server_name  everythingelse;

  error_page 404 /404.html;

  # Everything is a 404
  location / {
    return 404; #return the code 404
  }

  # link the code to the file
  location = /404.html {
    #EDIT this line to make it match the folder where there is your errors page
    #Dont forget to create 404.html in this folder
    root  /var/www/nginx/errors/;
  }
}

But this is not working !

I made one of my domain pointing to this nginx server, and he still server another site aka server For httpS for http nothing appear..

Thanks.

I currently use Cloudflare's DNS with disabled proxy and I want to ditch Cloudflare completely now (for known reasons).

I found the desec.io service and it’s looking pretty good to me. What are your thoughts about this site? Would you recommend it? Any other recommendations?

Copied from linked post:

I'm very happy to announce the release of htmx 2.0. This release ends support for Internet Explorer and tightens up some
defaults, but does not change most of the core functionality or the core API of the library.

Note that we are not marking 2.0 as latest in NPM
because we do not want to force-upgrade users who are relying on non-versioned CDN URLs for htmx. Instead, 1.x will
remain latest and the 2.0 line will remain next until Jan 1, 2025. The website, however, will reference 2.0.

Major Changes

• All extensions have been moved out of the core repository to their own repo
  and website: https://extensions.htmx.org. They are now all versioned individually and can be developed outside of
  the normal (slow) htmx release cadence.

  • Most 1.x extensions will work with 2.x, however the SSE extension did have a break and must be upgraded.
  • The older extensions remain in the /dist/ext directory so as to not break the URLs of CDNs like unpkg, but please
    move to the new extension URLs going forward

• We removed the deprecated hx-sse and hx-ws attributes in favor of the extensions, which were available and
  recommended in 1.x.

• HTTP DELETE requests now use parameters, rather than form encoded bodies, for their payload (This is in accordance w/ the spec.)

• We now provide specific files in /dist for the various JavaScript module styles:

  • ESM Modules: /dist/htmx.esm.js
  • AMD Modules: /dist/htmx.amd.js
  • CJS Modules: /dist/htmx.cjs.js
  • The /dist/htmx.js file continues to be browser-loadable

• The hx-on attribute, with its special syntax, has been removed in favor of the less-hacky hx-on: syntax.

Minor Changes

• We made some default changes:
  • htmx.config.scrollBehavior was changed to 'instant' from 'smooth'
  • As mentioned previously, DELETE requests now use query parameters, rather than a form-encoded body. This can
    be reverted by setting htmx.methodsThatUseUrlParams to the value ['get'],
  • htmx.config.selfRequestsOnly now defaults to true rather than false

Features

Not much, really:

• The selectAndSwap() internal API method was replaced with the public (and much better) swap() method
• Web Component support has been improved dramatically
• And the biggest feature of this release: the website now supports dark mode! (Thanks @pokonski!)

A complete upgrade guide can be found here:

htmx 1.x -> 2.x Migration Guide

If you require IE compatibility, the 1.x will continue to be supported for the foreseeable future.

chat.positive-intentions.com

github.com/positive-intentions/chat

I'm excited to share with you an instant messaging application I've been working on that might interest you. This is a chat app designed to work within your browser, with a focus on browser-based security and decentralization.

What makes this app unique is that it doesn't rely on messaging servers to function. Instead, it works based on your browser's javascript capabilities.

Here are some features of the app:

• Encrypted messaging: Your messages are encrypted, making them more secure.
• File sharing: Easily share files using WebRTC technology and QR codes.
• Voice and video calls: Connect with others through voice and video calls.
• Shared virtual space: Explore a shared mixed-reality space.
• Image board: Browse and share images in a scrollable format.

Your security is a top priority. Here's how the app keeps you safe:

• Decentralized authentication: No central server is required for login, making it harder for anyone to gain unauthorized access.
• Unique IDs: Your ID is cryptographically random, adding an extra layer of security.
• End-to-end encryption: Your messages are encrypted from your device to the recipient's device, ensuring only you and the recipient can read them.
• Local data storage: Your data is stored only on your device, not on any external servers.
• Self-hostable: You have the option to host the app on your own server if you prefer.

A decentralized infrastructure has many unique challenges and this is a unique approach. Ive taken previous feedback and made updates. Its important to note, the app is an unstable proof-of-concept and a work-in-progress. Its important to understand at this early stage in the project, there will be breaking changes. It is not ready to replace any existing apps or services. While the app is aiming to be an encrypted and secure chat system, the project is not mature enough to have been reviewed by security professionals and should not be considered encrypted or secure. it is provided for testing/review/feedback purposes.

Looking forward to hearing your thoughts!

The live app

About the app

Even more about the app

Docs

Subreddit

This is really cool, however I still wait for Firefox to support it.

I was wondering if there was a Web Application where I can work on Android App Development. Think of it like if vscode was only built for Android Development, and how cool it would be to develop android apps directly into your browser, just like vscode.dev.

Now, I was thinking of using vscode.dev and installing Gradle and Kotlin packages from the marketplace, but I was wondering if there was another alternative instead of using a Microsoft Product.

Likewise, I'm on an Xbox One where I can only use the Browser, can't install anything.

Say you have HTML similar to the following:

<div style="background-image: url('https://some.domain/image')"></div>

and you want to extract https://some.domain/image using XPath. With XPath 2.0, you can select the URL with something like

select-before(select-after(//div/@style, "backgound-image: url("), ")")

but, when using XPath 1.0, this fails — I think it's due to nested functions not being supported in XPath 1.0, but I have been unable to find documentation to confirm that. Is there a way to accomplish this using XPath 1.0?

Results of the State of HTML 2023 Survey are out.

Single HTML element + CSS only

1. Inhale for 4 seconds
2. Hold for 4 seconds
3. Exhale for 4 seconds
4. Hold for 4 seconds

And repeat

Inspired by: https://quietkit.com/box-breathing/

Note: The current Safari version has a bugged linear() implementation that has been fixed in the upcoming version.

Do we need live reload feature in bunders? Couldn't we just use this extension for Visual Studio Code or simular features and extensions in other IDEs which will execute a custom command of your choice when you save a file with a certain file extension in your IDE?

https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave

This extensions allows you to customize the commands to execute in saving a file in your global VSCode settings and in the VSCode workspace settings .vscode/settings.json, allowing others to use the same configuration in group projects.

Lightning CSS does not have a live reload feature and the live reload feature in Rollup cannot handle watching many files, however using this extension in VSCode, will not watch files but run the npm run dev:css or npm run dev:js command when saving a css or js file without watching for files to change.

One downside I see with this is when working on a project with others who are using different IDEs that do not support this feature. Besides that, is there any downsides to this approach?

I have been building several react components as libraries to use as part of a bigger idea.

While writing up documentation I realised the examples I provided were Stories I had created for Storybook to test the look of the components.

The storybook MDX documentation seems to provide a nice way to document your stories.

But I am hitting an issue, ideally I would like the Storybook Sidebar/view to be embedded into my page layout (for consistency) or failing that themed to use the same colours/icons/etc..

The documentation seems out of date with Storybook 8 using a different structure and while I have tried to populate a ThemeVar object it seems several of the fields need specific unspecified input.

Has anyone done anything like this before and how well did it work for you?

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

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.15.0 major release version of the websurfx project which was released on the 25th of March.

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, ddotthomas and evanyang1 who have been invaluable to the project. Also, Websurfx would not have been possible without alamin655 and xffxff early involvement.

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.15.0 introduces the new ranking algorithm for search results on the search page which ranks the results based on the relevancy to the user's search query.

Changelog

The changelog of all the changes can be found here:

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

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 ✨.

Hi,

I'm confuse about those mandatory legal notices that governments impose for websites..

Before going further I invite you to read:
A Declaration of the Independence of Cyberspace
and
Discourse on Voluntary Servitude[^1] \

From all the articles^2 that I read about the mandatory notice to display for website none of them reference the URL of their claim !! / of the legal text !! WTF[^links]

Internet is by essence world wide, and when reading all those legal requirement it's seem that you should display notices for EVERY country !

it's seem also that if you own a private website, just for your own or family use, like for example a web file hosting services. (NextCloud etc..) You should comply with the same requirement that are asked for company ! again... WTF !

Also I don't understand, why make mandatory those notices...(beside the scam (money) ) , I'll come back to this below.

• If you want to buy something off a website, and this later do not mentions any legal address , contact info and so on, the responsibility to buy or not should be only yours. (For example, will you buy a yogurt in the supermarket if there were no brand, contact info on the packing or bill ?)
• if the state want to ~~censor~~ "regulate" a website on the old internet[^OI] there is plenty of way to know who is the author or at the very least where is it hosted..
• if a website use/distribute a copyrighted© elements. The right holder can do/contact in the following order:
  • check the website for contact (if any)
  • check the DNS record
  • check the hosting
  • contact the owner of the IP (IP are leased by company../ ISP )

So there is no sense to ask everyone that extra heavy burden. The only advantage is for law firm (and those cookies related firm) that make a profit out of it. I heard in my entourage peoples that had pay thousandth of $$ to generate those text, keep up to date etc.. even for small website.

• If you think those legal notice are a good thing please do not hesitate to motivate your answer.
• If you have any good links about it, feel free to share.
• What are you doing your self on website of customer and/or for your private websites ?
• if you know a Lemmy community worth to share this post, step forward.

Thanks...

[^1]:https://en.wikipedia.org/wiki/Discourse_on_Voluntary_Servitude
https://archive.org/details/0000-00-00-00-etienne-de-la-boetie-00_202201/1548-00-00_Discourse%20on%20Voluntary%20Servitude_1942_org/mode/2up \

https://www.websitepolicies.com/blog/legal-requirements-for-websites [^OI]:The one that you are using now with the domains scam. A future internet might be using TOR or GNU Name System

[^links]: if you have those links feel free to share !