patwasalinguist Posts - Answer Overflow

patwasalinguist

Explore posts from servers

•Created by patwasalinguist on 5/1/2024 in #front-end

Does Safari on OSX support CSS nesting?

It seems to pass all the tests at https://codepen.io/bramus/pen/oNdrypM But everything is yellow in this test:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Does your browser support CSS Nesting?</title>
  <link rel="icon" type="image/png" href="#">
</head>
<body>
<h1>Does your browser support CSS Nesting?</h1>
<div>
  this should be yellow
  <p>this should be light blue</p>
</div>
<style>
div {
  background: lemonchiffon;
  p {
    background: lightblue;
  }
}
</style>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Does your browser support CSS Nesting?</title>
  <link rel="icon" type="image/png" href="#">
</head>
<body>
<h1>Does your browser support CSS Nesting?</h1>
<div>
  this should be yellow
  <p>this should be light blue</p>
</div>
<style>
div {
  background: lemonchiffon;
  p {
    background: lightblue;
  }
}
</style>
</body>
</html>

12 replies

KPCKevin Powell - Community

•Created by patwasalinguist on 4/26/2024 in #front-end

Is there a way to test for css nesting support?

I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make sense to make a non-nested version until browser support is wider. I would like to do something like:

@supports (nesting){
  .nested {
    .selector {
      color:red;
    }
  }
}

@supports (nesting){
  .nested {
    .selector {
      color:red;
    }
  }
}

Obviously nesting won’t work there, is there some way to do the equivalent?

10 replies

KPCKevin Powell - Community

•Created by patwasalinguist on 4/24/2024 in #front-end

Is this how @apply works in tailwind?

I'm not a tailwind person but I recall seeing somewhere that there it has something called @apply, which might be something I have been wishing were possible in css for a long time. Namely, I would like to be able to say:

.primary-heading {
  color:maroon;
  font-family: sans;
  text-shadow: 1px -1px 1px black;
}

.some-heading {
  @apply(.primary-heading);
}

.primary-heading {
  color:maroon;
  font-family: sans;
  text-shadow: 1px -1px 1px black;
}

.some-heading {
  @apply(.primary-heading);
}

Another way to think about this is that i would like to be able to put multiple properties in a css variable, but of course that’s not possible. Does @apply work that way in tailwind?

35 replies

KPCKevin Powell - Community

•Created by patwasalinguist on 3/26/2024 in #front-end

Is CSS nesting ready for production?

caniuse.com says it is supported across all major browsers, is that enough to start using it in production? https://caniuse.com/css-nesting

18 replies

DDeno

•Created by patwasalinguist on 8/29/2023 in #help

Deno KV: Should I expect 'value too large' errors inserting a JSON file with kv.set?

I was trying out kv and quickly ran into something I found surprising;

let kv = await Deno.openKv('omg.db')

let hieroglyphsJSON = await Deno.readTextFile('./hieroglyphs.json')
let hieroglyphs = JSON.parse(hieroglyphsJSON)

kv.set(["hieroglyphs"], hieroglyphs)

let kv = await Deno.openKv('omg.db')

let hieroglyphsJSON = await Deno.readTextFile('./hieroglyphs.json')
let hieroglyphs = JSON.parse(hieroglyphsJSON)

kv.set(["hieroglyphs"], hieroglyphs)

hieroglyphs.json is not huge (360K), and yet I get this error:

$ deno run --unstable --allow-write --allow-read kv.js
error: Uncaught (in promise) TypeError: value too large (max 65536 bytes)
kv.set(["hieroglyphs"], hieroglyphs)
   ^
    at Kv.set (ext:deno_kv/01_db.ts:87:41)
    at file:///Users/me/kv.js:8:4
    at eventLoopTick (ext:core/01_core.js:183:11)

$ deno run --unstable --allow-write --allow-read kv.js
error: Uncaught (in promise) TypeError: value too large (max 65536 bytes)
kv.set(["hieroglyphs"], hieroglyphs)
   ^
    at Kv.set (ext:deno_kv/01_db.ts:87:41)
    at file:///Users/me/kv.js:8:4
    at eventLoopTick (ext:core/01_core.js:183:11)

I feel like I’m missing something obvious; am I trying to do something kv wasn’t designed for? TIA

6 replies

DDeno

•Created by patwasalinguist on 5/29/2023 in #help

Possible to deploy the chat example to deno deploy?

I would like to try running this demo on deno deploy: https://deno.com/manual@v1.34.0/examples/chat_app However, I have seen somewhere that deploy doesn't suport websockets. Is this currently the case? Is it possbile to run this with deploy? thanks

10 replies

DDeno

•Created by patwasalinguist on 5/12/2023 in #help

Checking for circular module dependencies?

Hi, I’m wondering if there is some way to detect whether there are circular dependencies in a set of modules. Ideally, it might look something like this:

let detectCircularDependencies = fileNames => { … } 

// then i'd call

detectCircularDependencies('./a.js', './b.js', './c.js')
Circular dependency found: a.js > b.js > c.js > a.js

let detectCircularDependencies = fileNames => { … } 

// then i'd call

detectCircularDependencies('./a.js', './b.js', './c.js')
Circular dependency found: a.js > b.js > c.js > a.js

Or something like that.

1 replies

DDeno

•Created by patwasalinguist on 5/9/2023 in #help

Is inspecting import.meta.url a reliable way to distinguish browser and deno contexts?

I have been trying to figure out a good pattern to import JSON that will work whether called in deno or the browser. This is what I was thinking:

let data

if(import.meta.url.startsWith('file')){ // we’re in deno
  let jsonstring = await Deno.readTextFile('delete.json')
  data = JSON.parse(jsonstring)  
} else if(import.meta.url.startsWith('http')){ // we’re in the browser
  let response = await fetch('delete.json')
  data = await response.json()
}

export {data}

let data

if(import.meta.url.startsWith('file')){ // we’re in deno
  let jsonstring = await Deno.readTextFile('delete.json')
  data = JSON.parse(jsonstring)  
} else if(import.meta.url.startsWith('http')){ // we’re in the browser
  let response = await fetch('delete.json')
  data = await response.json()
}

export {data}

I would welcome advice as to whether this is a good approach to this problem. thanks 🙏

11 replies

Gaming

Programming