Create accountLogin

Recent searches

No recent searches

Search options

Not available on mastodon.cc.
mastodon.cc is one of the many independent Mastodon servers you can use to participate in the fediverse.
Mastodon for Art

Administered by:

Server stats:

68
active users

mastodon.cc: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.6

#code

27 posts10 participants0 posts today
Public
Ana Tudor 🐯

Because someone just hearted this decade old @codepen.io #3D demo, I gave it a quick 2025 remake using ✳️ modern #CSS features ✳️ - grid instead of `position: absolute`, CSS variables to avoid setting multiple properties in Sass loops, `color-mix()` and more!

codepen.io/thebabydino/pen/NNx

Based on a GIF by @sasj, originally CSS-ed 9+ years ago live on CodePen in 10 minutes and 50 lines of SCSS. Now the code is even more compact.

GIF
#cssTransform#code#coding
Continued thread
Public
Ana Tudor 🐯

If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.

How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?

The visual result showing four lines of text, middle aligned, each with its own semitransparent background and padding. The padding on each line leads to intersection, and where we have intersection, the semi-transparent background becomes more opaque. The CSS producing this is: ``` p > span { padding: .25em; border-radius: 5px; background: rgb(0 0 0/ var(--a, .7)); color: #fff; /* add lateral padding + border-radius to each line */ box-decoration-break: clone } ```
#CSS#SVG#filter
Public *
Sebastian Büttrich @ ITU

"we find that participants who had access to an #AI assistant based on #OpenAI's codex-davinci-002 model wrote significantly less secure code than those without access. Additionally, participants with access to an AI assistant were more likely to believe they wrote #secure #code than those without access to the AI assistant. "

arxiv.org/abs/2211.03622

#thereIsNoAI in #security

arXiv logo
arXiv.orgDo Users Write More Insecure Code with AI Assistants?We conduct the first large-scale user study examining how users interact with an AI Code assistant to solve a variety of security related tasks across different programming languages. Overall, we find that participants who had access to an AI assistant based on OpenAI's codex-davinci-002 model wrote significantly less secure code than those without access. Additionally, participants with access to an AI assistant were more likely to believe they wrote secure code than those without access to the AI assistant. Furthermore, we find that participants who trusted the AI less and engaged more with the language and format of their prompts (e.g. re-phrasing, adjusting temperature) provided code with fewer security vulnerabilities. Finally, in order to better inform the design of future AI-based Code assistants, we provide an in-depth analysis of participants' language and interaction behavior, as well as release our user interface as an instrument to conduct similar studies in the future.
Continued thread
Public
Ana Tudor 🐯

Safari supports the `filter()` function, which allows us to apply a filter to just the `border-image-source`. It's not ideal, as we still need to have the image link twice, once in the `src` attribute and once in a custom property set on the same `img`. Oh, well... at least it doesn't require any extra elements, just the `img` suffices.

@codepen demo, but remember, it only works in Safari codepen.io/thebabydino/pen/XWx

The CSS (Safari only): ``` img { /* allocate border space */ border: solid .5em; /* border gradient from `src` atribute of `<img>` */ /* src() not yet implemented anywhere */ /* attr() just implemented by Chrome */ border-image: /* huge blur on img src for gradient-like result */ /* filter() only implemented by Safari */ filter(var(--src), blur(99px)) 10%; /* create transparent gap to border */ padding: .5em } ``` The Pug: ``` - let my_img = 'my-cool-image.jpg'; img(src=my_img style=`--src: url(${my_img})`) ```
Visual result: images surrounded by a gap then by a gradient border using a palette obtained from the image.
#CSS#filter#cssFilter
ExploreLive feeds
About