LukyVj

🧠 CSS Day 2025 — Summary

🎤 Talks & Highlights

💡 Adam Argyle

• Advanced scrolling techniques: carousels, scroll affordances, scroll-driven animations.
• Scrollbar demos aligned with box padding.

LukyVj

const upperCase = {
  A: [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1,
    1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0,
    0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0,
    0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0,
  ],
  B: [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1,
    1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0,

LukyVj

function getQueryPattern(query, flags = "i") {  
  const pattern = new RegExp(  
    `(${query  
    .trim() // Trim leading and ending whitespace 
    .toLowerCase() // convert to lower case
    .split(" ") // Split on spaces for multiple commands 
    .map((token) => `^${token}`) // Map over the resulting array and create Regex_  
    .join("|")})`, // Join those expressions with an OR | 
    flags  
  );\n  

LukyVj

var cloudinary = require("cloudinary");
var fetch = require("node-fetch");
var fs = require("fs");
require("dotenv").config();

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
});

LukyVj

https://itty.bitty.site/#okta/data:text/html;charset=utf-8;base64,PHN0eWxlPiogew0KICBib3gtc2l6aW5nOiBib3JkZXItYm94Ow0KfQ0KDQpib2R5IHsNCiAgZm9udC1mYW1pbHk6IGFyaWFsLCBzYW5zLXNlcmlmOw0KICBmb250LXNpemU6IDIwcHg7DQogIG1hcmdpbjogMDsNCiAgcGFkZGluZzogMjBweDsNCn0NCg0KLmNvbnRhaW5lciB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQp9DQoNCi50b3Agew0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGRpc3BsYXk6IGZsZXg7DQp9DQoNCi5pbnB1dC1jb250YWluZXIgew0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGZsZXg6IDE7DQp9DQoNCi5zZWFyY2gtYnV0dG9uIHsNCiAgYWxpZ24tc2VsZjogc3RyZXRjaDsNCiAgZGlzcGxheTogZmxleDsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogIHdpZHRoOiAyLjRlbTsNCiAgZm9udC1zaXplOiAxLjZlbTsNCiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRlbigjMDA3NEQ5LCA1JSk7DQogIGNvbG9yOiB3aGl0ZTsNCiAgY3Vyc29yOiBwb2ludGVyOw0KICB0ZXh0LXNoYWRvdzogMCAycHggNnB4IHJnYmEoMCwgMCwgMCwgMC4yKTsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAtNnB4IDEycHggLThweCByZ2JhKDAsIDAsIDAsIDAuMiksIGluc2V0IDAgNnB4IDEycHggLThweCByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMik7DQogIA0KICAmOmhvdmVyIH

LukyVj

&:after
  content: ''
  display: block
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0
  background: linear-gradient(to bottom, transparent calc(50% - 1px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 1px))

LukyVj

let style = document.createElement('style');
style.innerHTML = '[debug="true"] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; } [debug="true"] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.4); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } [debug="true"] *:before, [debug="true"] *:after { outline: 1px solid red; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.4); left: 40px; } [debug="true"] section, [debug="true"] div.hero { -webkit-transform: rotateY(16deg) scale(0.8) translateX(15%) skewY(-6deg); transform: rotateY(16deg) scale(0.8) translateX(15%) skewY(-6deg); } @media (min-width: 1600px) { [debug="true"] section, [debug="true"] div.hero { -webkit-transform: rotateY(16deg) scale(0.6) translateX(15%) skewY(-6deg); transform: rotateY(16deg) scale(0.6) translateX(15%) skewY(-6deg); } } [debug="true"] section p { left: 80

LukyVj

@mixin diagonal($rotation, $background, $height, $pos: after)
  &:#{$pos}
    content: ''
    display: block
    position: absolute
    width: 100%
    height: $height
    background: #{$background}
    transform: skewY($rotation)

LukyVj

[debug="true"] {
  outline: 1px solid lime;
  outline-offset: -1px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 600px;
          perspective: 600px;
}
[debug="true"] * {
  outline: 1px solid lime;

LukyVj

function outOfViewport(colorWrapper, colorTag, colorClass) {
  var w = document.body.offsetWidth,
  it = document.querySelectorAll('*');
  for ( i in it) {
    if( it[i].offsetWidth > w ) {
      console.log(
        `%c [` +
        `%c` + it[i].tagName +
        `%c.`+ it[i].classList +
        `%c]`+