I saw the creator of this course sharing it on LinkedIn and figured others might want to give it a shot! I've had very good experience with Udemy courses in the past, they are extremely comprehensive and well made.

cross-posted from: https://lemmy.world/post/2692134

SOLVED: by @g6d3np81@kbin.social 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.

cross-posted from: https://lemmy.world/post/2566953

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'm getting Cloudflare's JavaScript-based screening page when trying to hit tinyurl.com with curl and extract the real link. Anyone know if this has been going on for a while?

So I figured I'd try my hand at a bit of CSS to create a typing effect. I started from this one, but I wanted to expand it to multi-line, so I did. Turns out there's a lot of manual timing work, so it's tedious to change. But with a little JS... I made a generator—make some for yourself!

TLDR: explain how to rebuild x.ai to me, like I'm a 5 year old.

Hi everyone, I'd like to improve my Web dev skills and am looking for advice on how to get started and make it work. So my idea is to recreate this website as it currently is x.ai for starters (including the animated background). And later on, build up my personal website on that style. I simply want to use it as a base for following websites. I want to start by the mobile first approach.

How do I start? Should I try building it from scratch by hand (html,css,js) or rather use a framework (I had Gatsby in mind)? What is the best practices to make this a sustainable and reusable project?

Please bear with me, I can do figma quite confidently but I have little to no skills in web development yet. So if there is any word of advice for a beginner, I'll be grateful! Thanks!

CSS now supports color spaces that allow us to access colors outside of the sRGB gamut. This means that you can support HD (high definition) displays, using colors from HD gamuts. This support comes with new functions to make better use of color on the web.

We already have a number of functions that allow us to access colors within the sRGB gamut—rgb(), hsl(), and hwb(). Now supported in browsers is the color() function, a normalized way to access colors within any RGB color space.

You can see some examples in the following CSS:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

I'm working on a website (https://www.go2lemmy.com), which, with just a few clicks, would allow a user to automatically modify all their old comments & posts on reddit to be ads for lemmy. It's using oauth. Anyways, the backend code is pretty much finished, I just suck ass at design, so if anyone wants to work on it with me, you can add me on Discord: indictevolution

Should only take an hour or two I imagine for the design, not much to the site at all.

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

Is this a growing product market? Will this lower the barrier to entry for less technical communities, much like the wave of turn-key WordPress hosting solutions did for the general public starting in the mid 2000s?

Looks like there are instance options for Mastodon, Lemmy, but not yet Kbin:

• https://elest.io/open-source/mastodon
• https://elest.io/open-source/lemmy
• ?

Does anyone know of similar competitors to Elestio in this sub-market?

Postman has released an API performance testing feature

Hello,

In Angular 15, there was a deprecation of class-based Guards and Resolvers, which has sparked discussions regarding this decision. The deprecation of these interfaces is seen as a regression that goes against established software engineering practices. Some argue that there wasn't sufficient discussion on the topic.

Deprecated: Class-based Route guards are deprecated in favor of functional guards. An injectable class can be used as a functional guard using the inject function: canActivate: [() => inject(myGuard).canActivate()]

Deprecated: Class-based Route resolvers are deprecated in favor of functional resolvers. An injectable class can be used as a functional guard using the inject function: resolve: {'user': () => inject(UserResolver).resolve()}.

This move doesn't seem right and I started an issue here https://github.com/angular/angular/issues/50234 and there's also discussion about this here https://github.com/angular/angular/pull/47924.

To raise awareness and gather feedback from the community, I ask everyone to engage on the discussion.

Thank you.