Web Development

This Friday, 2023-08-25, a vendor is randomly choosing winners to receive a free ticket to a September conference hosted by London Web Standards.

Entry is by replying to this post on Mastodon.

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

Some frontend developers know the BEM methodology as a naming convention for CSS and they create a disgusting #webcomponents. I've explain the essence of BEM and shown the benefits for your frontend projects.

Feel free to share it with a people who tells you "i use CSS-modules, so i no needs a BEM"

The web is fucked and there’s nothing we can do about it. Kev Quirk looks back fondly at Web 1.0.

Hey there!
As promised @[email protected] @[email protected] I'm posting now (new account btw), thanks for the encouragement! :)

I made a very simple web app as an exercise, since I'm pretty much new to JavaScript frameworks. I got the idea from a post that was ciphered with ROT-1 [1]

fjhiupofojof QBSJT OZD UPLZP UBJQFJ

⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⠛⠛⠛⠋⠉⠈⠉⠉⠉⠉⠛⠻⢿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⡿⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⢿⣿⣿⣿⣿
⣿⣿⣿⣿⡏⣀⠀⠀⠀⠀⠀⠀⠀⣀⣤⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿
⣿⣿⣿⢏⣴⣿⣷⠀⠀⠀⠀⠀⢾⣿⣿⣿⣿⣿⣿⡆⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿
⣿⣿⣟⣾⣿⡟⠁⠀⠀⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣷⢢⠀⠀⠀⠀⠀⠀⠀⢸⣿
⣿⣿⣿⣿⣟⠀⡴⠄⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⣿
⣿⣿⣿⠟⠻⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠶⢴⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⣿
⣿⣁⡀⠀⠀⢰⢠⣦⠀⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⣿⣿⣿⣿⡄⠀⣴⣶⣿⡄⣿
⣿⡋⠀⠀⠀⠎⢸⣿⡆⠀⠀⠀⠀⠀⠀⣴⣿⣿⣿⣿⣿⣿⣿⠗⢘⣿⣟⠛⠿⣼
⣿⣿⠋⢀⡌⢰⣿⡿⢿⡀⠀⠀⠀⠀⠀⠙⠿⣿⣿⣿⣿⣿⡇⠀⢸⣿⣿⣧⢀⣼
⣿⣿⣷⢻⠄⠘⠛⠋⠛⠃⠀⠀⠀⠀⠀⢿⣧⠈⠉⠙⠛⠋⠀⠀⠀⣿⣿⣿⣿⣿
⣿⣿⣧⠀⠈⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠟⠀⠀⠀⠀⢀⢃⠀⠀⢸⣿⣿⣿⣿
⣿⣿⡿⠀⠴⢗⣠⣤⣴⡶⠶⠖⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡸⠀⣿⣿⣿⣿
⣿⣿⣿⡀⢠⣾⣿⠏⠀⠠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠛⠉⠀⣿⣿⣿⣿
⣿⣿⣿⣧⠈⢹⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿
⣿⣿⣿⣿⡄⠈⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣾⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣦⣄⣀⣀⣀⣀⠀⠀⠀⠀⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡄⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠙⣿⣿⡟⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠇⠀⠁⠀⠀⠹⣿⠃⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⡿⠛⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⢐⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⠿⠛⠉⠉⠁⠀⢻⣿⡇⠀⠀⠀⠀⠀⠀⢀⠈⣿⣿⡿⠉⠛⠛⠛⠉⠉
⣿⡿⠋⠁⠀⠀⢀⣀⣠⡴⣸⣿⣇⡄⠀⠀⠀⠀⢀⡿⠄⠙⠛⠀⣀⣠⣤⣤⠄⠀

About SolidJS, I'm really liking how signals work, at first it seemed a little strange to use them, but they're actually pretty comfortable and you can do neat things with them, I finished the first prototype in less than a day in fact, the real hard thing was CSS instead lol. I had digged myself into a hole of weird rules so I ended up rewriting most of the CSS in the end and that took a fair bit more time, then came the logo design... oof T . T

Let me know if you find anything, uhh, peculiar ;)

Here's the code: https://codeberg.org/quazar-omega/unslide

[1] Facebook post, sorry couldn't find a privacy respecting frontend for Facebook :/

What I want to do:
Deploy brochure site(s) with minimal (or no) cost.

Stack:
Nuxt, Sanity, Cloudflare Pages.

Problem:
$0.00 challenge (maybe I just don't want to pay)

Requirements:

• Trim trailing slash on all routes
• Server-side form sanitation/validation (optional)

Solution 1: Nitro server...
No problem with route middleware, I just don't know this will translate to function/worker usage. Can someone even DoS my site and exhaust 100k allowance? Is it 1 per request? Will crazy convoluted validation logic effect credit used?

Solution 2: Static generation...
I don't know how to use _redirect to trim trailing slash on all routes. The docs do not show any example using wildcard (splat) follow by slash.

Senpai of the Edge, please enlighten me.

Is it ok to post personal projects regardless of size?
What I mean is, if we can post, does it have to be something actually good and useful, or can it be little toy projects as well?

SOLVED: by @[email protected] using columns property

TL;DR: I want to achieve this behavior for the menu layout, but all I can get is this; note the different menu options order.

Two days ago I asked for help for implementing the current behavior without hardcoding the menu height for each resolution step, and there were two suggestions to try display: grid. It looked promising and after reading some documentation I was able to get something very close to what I'm looking for.

The only difference being that I want the chapters to be sorted vertically (as in the current version), but what I got sorts the chapters horizontally.

Here it is (what I think is) the relevant code:

#menu ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

Sorry, I don't have the display: grid version online.

I did a quick search for display grid multiple columns vertical sort and saw this StackOverflow post: CSS Grid vertical columns with infinite rows which, if I understand correctly, says it's not possible. But I'm pretty sure I'm not understanding it correctly.

Any help will be welcome, thanks!

EDIT: I also tried grid-audto-flow: column (as suggested here) but it just renders a single row. Probably because I'm missing something...

#menu ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

EDIT-2: I was told that for grid-audto-flow: column to work I need to specify the numbers of columns. If I understand correctly, then that doesn't really help. The original issue is that I need to edit the CSS file every time a new chapter is added. Which would be the same if I have to hardcode the number of rows.

I mean, it's a bit cleaner to hardcode the number of rows than the height in pixels, but I was looking for a solution that doesn't require magic numbers in the CSS.

I used to do Wordpress development and the short of it is, it wasn't profitable enough to be sustainable for me. These days, web development is more of a side gig for me and I'm no longer using Wordpress. I don't necessarily need to make a full-time income with it and I'm certainly not looking for high pressure, high stakes projects, but I was wondering where the best opportunities are for freelancers these days and what would be best skills/technologies to learn for those sorts of jobs?

Also, as a more specific side question, are things like Hugo and Jekyll much in demand these days as far as freelance goes?

I've been working on a neat little tool to create background textures/patterns in SVG. It has some presets, but also gives you full manual control of the settings. You can then copy the generated code output for use on your project.

Let me know what you think or if you find this useful!

I'm probably late to thinking this, and plenty of smarter people will have seen this, but I was just watching a video on Google's proposal which read out Mozilla's position on it, and noticed something that I haven't heard mentioned. As it says, it's designed to help detect and prevent 'non-human traffic', which would likely harm assistive technologies, testing, archiving and search engines. All of which Google is involved in.

If they're an attesting body, which presumably they would be, they could just say that their indexing crawler is legitimate traffic and get all the data, while other search engines not accepted (yet) by an attesting body wouldn't be able to. So search engines will be locked down to only what exists now. And AI training currently requires scraping large amounts of the internet, which they won't be able to do. So this could also help create a moat for Google Bard, that their earlier memo said didn't exist, to outstrip open-source models, just due to access to data.

I've heard people complain that this is an attempt to monopolise the browser market, but they practically already have done that, and I haven't heard anyone mention this. If all I've said is accurate and I haven't misunderstood something, this could allow them to monopolise (or at least oligopolise) everything that requires access to widespread internet data - basically everything they do.

I'm not new to programming, but I am somewhat new to web development and I'm trying to figure out the most preferred way of taking a standalone header from one html document and adding it to other html documents without code duplication. If possible I want to do this with Javascript so I can learn with more basic tools before expanding further.

I've researched this a fair bit, but the advice is a bit confusing since it either seems out of date or possibly not the most secure way of handling things. Is there a preferred way of doing something like this?

Hi, I'm an old webdev who is rusty in CSS; I learn about calc() recently and never really learnt display: flex properly.

I made some webs with a responsive menu layout (relevant CSS code posted on bottom). I tried using flex but I still had to do one ugly hack: I have the menu heights for the different resolutions hardcoded and I have to update them manually every time a new chapter is added. It's not a big deal, but I would like to know if there is a proper way to do this.

Some alternatives I've thought about:

• The new round(), but it's too new and not supported by most browsers.
• JavaScript

... but I feel like there must be a clean CSS-only way to achieve this.

Thanks!

Relevant CSS code (link to full stylesheet in case I missed something).

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 624px; /* =27x23+3 | 23 = 91/4 */
  margin: 0;
  padding: 16px 16px 4px 16px;
  vertical-align: top;
}
@media screen and (max-width: 1000px) {
  ul {
    height: 840px; /* =27x31+3 | 31 = 91/3 */
  }
}
@media screen and (max-width: 582px) {
  ul {
    height: 1245px; /* =27x46+3 | 46 = 91/2 */
  }
}
@media screen and (max-width: 400px) {
  ul {
    height: auto;
  }
}
  ul li {
    list-style-type: none;
    margin: 2px 16px 2px 4px;
    font-size: 120%;
  }
  ul li a {
    display: inline-block;
    background-color: #3fa79e;
    color: #d2e7e2;
    text-decoration: none;
    padding: 2px 8px;
    border: solid 1px #d2e7e2;
  }
    ul li a:first-child {
      width: 106px;
      margin-right: -3px;
    }
    ul li a:hover {
      background-color: #144c48;
      color: #fff;
      border: solid 1px #fff;
    }

I have been trying to import this sqlite database into mysql or postgresql database. But had been failing. Can anyone help me with this?

Hi all :)

I'm putting together a web app for a small music festival, and part of what I want to do is add photos from the various events that we hold. At the moment, they're being posted to Facebook, but I'd prefer to have something separate from that.

My thinking is to make a slideshow of lower resolution photos for the web app, and keep the full sized versions on Facebook so that people can download or share them. Even doing this is going to eventually bloat the app though.

The other problem we have is that there's no budget for storage, so I need to make it for free if that's possible.

Does anyone have any better idea than a lower resolution slideshow please?

I'm looking to switch into a tech job in the future, and I'm wondering if web development could be a good choice. Ideally, I'd like an interesting job with a good work-life balance, and I would even be willing to take a pay cut later in my career in order to have more free time. I'm hoping to get some insight into the profession. I have three questions:

1. Is it hard to find a position in web development with good work-life balance

2. I’m considering getting a bachelors in computer science from WGU. Is it worth it or is the self taught route better?

3. Does anyone have any experience in the program?

Will accessibility tools that rely on automating input to the browser cause it to become untrusted? Will it affect extensions? The spec does currently specify a carveout for browser modifications and extensions, but those can make automating interactions with a website trivial. So, either the spec is useless or restrictions will eventually be applied there too.

I am finally going to join the '90s and set up a blog. The audience is mostly students to show how the academic stuff blends with real world professional practice. I'm an adjunct so I have a foot in both worlds.

I have my domain names (parked for years) and free webhosting through my university - but the university doesn't provide any development tools. All of the recommended tools I've run across (weebly, wix, webflow etc.) either want to host the page, manage the domain name, or require a fee to link the page to my host. I'm simply looking for a low cost site builder where I can edit my files and move them to my webspace.

Any recommendations for a WSYWIG style editor? I'd be happy to not have to learn any actual coding, but will if I have to.

The last time I did any of this I was manually tagging static pages in notepad (lol).