[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"summary-css-hack-enlarges-next-slide-in-google-slides-pres-summary":3,"summaries-facets-categories":344,"summary-related-css-hack-enlarges-next-slide-in-google-slides-pres-summary":3929},{"id":4,"title":5,"ai":6,"body":13,"categories":321,"created_at":323,"date_modified":323,"description":38,"extension":324,"faq":323,"featured":325,"kicker_label":323,"meta":326,"navigation":327,"path":328,"published_at":329,"question":323,"scraped_at":323,"seo":330,"sitemap":331,"source_id":332,"source_name":333,"source_type":334,"source_url":335,"stem":336,"tags":337,"thumbnail_url":323,"tldr":341,"tweet":323,"unknown_tags":342,"__hash__":343},"summaries\u002Fsummaries\u002Fcss-hack-enlarges-next-slide-in-google-slides-pres-summary.md","CSS Hack Enlarges Next Slide in Google Slides Presenter View",{"provider":7,"model":8,"input_tokens":9,"output_tokens":10,"processing_time_ms":11,"cost_usd":12},"openrouter","x-ai\u002Fgrok-4.1-fast",3827,948,5652,0.0012169,{"type":14,"value":15,"toc":316},"minimark",[16,21,25,29,32,302,305,309,312],[17,18,20],"h2",{"id":19},"presenter-views-tiny-preview-problem","Presenter View's Tiny Preview Problem",[22,23,24],"p",{},"In Google Slides presenter mode, the side panel displays the next slide as a tiny, hard-to-see thumbnail alongside speaker notes. This CSS targets specific classes to enlarge the preview panel to 400px wide and 300px tall, repositions notes, and hides the previous slide thumbnail for cleaner focus.",[17,26,28],{"id":27},"core-css-overrides","Core CSS Overrides",[22,30,31],{},"Apply these !important rules to override Google Slides styles:",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-css shiki shiki-themes github-light github-dark",".punch-viewer-speakernotes-side-panel {\n  width: 400px !important;\n}\n.punch-viewer-speakernotes-text-body-scrollable {\n  left: 435px !important;\n}\n.punch-viewer-speakernotes-page,\n.punch-viewer-speakernotes-page svg {\n  width: 400px !important;\n  height: 300px !important;\n  min-width: 400px !important;\n  min-height: 300px !important;\n}\n.punch-viewer-speakernotes-page-iframe {\n  width: 400px !important;\n  height: 300px !important;\n  min-width: 400px !important;\n  min-height: 300px !important;\n}\n.punch-viewer-speakernotes-page-previous {\n  display: none;\n}\n","css","",[40,41,42,55,78,84,92,109,114,123,134,149,166,182,198,203,211,226,241,256,271,276,284,297],"code",{"__ignoreMap":38},[43,44,47,51],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sScJk",".punch-viewer-speakernotes-side-panel",[43,52,54],{"class":53},"sVt8B"," {\n",[43,56,58,62,65,68,72,75],{"class":45,"line":57},2,[43,59,61],{"class":60},"sj4cs","  width",[43,63,64],{"class":53},": ",[43,66,67],{"class":60},"400",[43,69,71],{"class":70},"szBVR","px",[43,73,74],{"class":70}," !important",[43,76,77],{"class":53},";\n",[43,79,81],{"class":45,"line":80},3,[43,82,83],{"class":53},"}\n",[43,85,87,90],{"class":45,"line":86},4,[43,88,89],{"class":49},".punch-viewer-speakernotes-text-body-scrollable",[43,91,54],{"class":53},[43,93,95,98,100,103,105,107],{"class":45,"line":94},5,[43,96,97],{"class":60},"  left",[43,99,64],{"class":53},[43,101,102],{"class":60},"435",[43,104,71],{"class":70},[43,106,74],{"class":70},[43,108,77],{"class":53},[43,110,112],{"class":45,"line":111},6,[43,113,83],{"class":53},[43,115,117,120],{"class":45,"line":116},7,[43,118,119],{"class":49},".punch-viewer-speakernotes-page",[43,121,122],{"class":53},",\n",[43,124,126,128,132],{"class":45,"line":125},8,[43,127,119],{"class":49},[43,129,131],{"class":130},"s9eBZ"," svg",[43,133,54],{"class":53},[43,135,137,139,141,143,145,147],{"class":45,"line":136},9,[43,138,61],{"class":60},[43,140,64],{"class":53},[43,142,67],{"class":60},[43,144,71],{"class":70},[43,146,74],{"class":70},[43,148,77],{"class":53},[43,150,152,155,157,160,162,164],{"class":45,"line":151},10,[43,153,154],{"class":60},"  height",[43,156,64],{"class":53},[43,158,159],{"class":60},"300",[43,161,71],{"class":70},[43,163,74],{"class":70},[43,165,77],{"class":53},[43,167,169,172,174,176,178,180],{"class":45,"line":168},11,[43,170,171],{"class":60},"  min-width",[43,173,64],{"class":53},[43,175,67],{"class":60},[43,177,71],{"class":70},[43,179,74],{"class":70},[43,181,77],{"class":53},[43,183,185,188,190,192,194,196],{"class":45,"line":184},12,[43,186,187],{"class":60},"  min-height",[43,189,64],{"class":53},[43,191,159],{"class":60},[43,193,71],{"class":70},[43,195,74],{"class":70},[43,197,77],{"class":53},[43,199,201],{"class":45,"line":200},13,[43,202,83],{"class":53},[43,204,206,209],{"class":45,"line":205},14,[43,207,208],{"class":49},".punch-viewer-speakernotes-page-iframe",[43,210,54],{"class":53},[43,212,214,216,218,220,222,224],{"class":45,"line":213},15,[43,215,61],{"class":60},[43,217,64],{"class":53},[43,219,67],{"class":60},[43,221,71],{"class":70},[43,223,74],{"class":70},[43,225,77],{"class":53},[43,227,229,231,233,235,237,239],{"class":45,"line":228},16,[43,230,154],{"class":60},[43,232,64],{"class":53},[43,234,159],{"class":60},[43,236,71],{"class":70},[43,238,74],{"class":70},[43,240,77],{"class":53},[43,242,244,246,248,250,252,254],{"class":45,"line":243},17,[43,245,171],{"class":60},[43,247,64],{"class":53},[43,249,67],{"class":60},[43,251,71],{"class":70},[43,253,74],{"class":70},[43,255,77],{"class":53},[43,257,259,261,263,265,267,269],{"class":45,"line":258},18,[43,260,187],{"class":60},[43,262,64],{"class":53},[43,264,159],{"class":60},[43,266,71],{"class":70},[43,268,74],{"class":70},[43,270,77],{"class":53},[43,272,274],{"class":45,"line":273},19,[43,275,83],{"class":53},[43,277,279,282],{"class":45,"line":278},20,[43,280,281],{"class":49},".punch-viewer-speakernotes-page-previous",[43,283,54],{"class":53},[43,285,287,290,292,295],{"class":45,"line":286},21,[43,288,289],{"class":60},"  display",[43,291,64],{"class":53},[43,293,294],{"class":60},"none",[43,296,77],{"class":53},[43,298,300],{"class":45,"line":299},22,[43,301,83],{"class":53},[22,303,304],{},"These set the panel width to 400px, shift notes 435px right, scale slide previews (including SVGs and iframes) to 400x300px with min sizes enforced, and remove the prior slide.",[17,306,308],{"id":307},"quick-implementation-with-stylish","Quick Implementation with Stylish",[22,310,311],{},"Use the Stylish browser extension to inject this CSS directly into Google Slides presenter view (docs.google.com\u002Fpresentation). Karpathy shared this in 2016, confirming it works via Stylish—no dev tools needed.",[313,314,315],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":38,"searchDepth":57,"depth":57,"links":317},[318,319,320],{"id":19,"depth":57,"text":20},{"id":27,"depth":57,"text":28},{"id":307,"depth":57,"text":308},[322],"Design & Frontend",null,"md",false,{},true,"\u002Fsummaries\u002Fcss-hack-enlarges-next-slide-in-google-slides-pres-summary","2026-04-08 21:21:20",{"title":5,"description":38},{"loc":328},"61859c754d34ddd7","Andrej Karpathy Gists","article","https:\u002F\u002Funknown","summaries\u002Fcss-hack-enlarges-next-slide-in-google-slides-pres-summary",[338,339,340],"frontend","ui-ux","coding","Google Slides presenter mode shows a tiny next-slide preview; inject this CSS via Stylish to resize it to 400x300px for easy viewing.",[],"mWRTMY78V_B2LkvFM1c32F7EO6fgkVVbSWYpnmTdWiM",[345,348,351,354,357,360,362,364,366,368,370,372,375,377,379,381,383,385,387,389,391,393,395,398,400,402,405,407,409,412,414,416,418,420,422,424,426,428,430,432,434,436,438,440,442,444,446,448,450,452,454,456,458,460,462,464,466,468,470,472,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,656,658,660,662,664,666,669,671,673,675,677,679,681,683,685,687,689,691,693,695,697,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735,737,739,741,743,745,747,749,751,753,755,757,759,761,763,765,767,769,771,773,775,777,779,781,783,785,787,789,791,793,795,797,799,801,803,805,807,809,811,813,815,817,819,821,823,825,827,829,831,833,835,837,839,841,843,845,847,849,851,853,855,857,859,861,863,865,867,869,871,873,875,877,879,881,883,885,887,889,891,893,895,897,899,901,903,905,907,909,911,913,915,917,919,921,923,925,927,929,931,933,935,937,939,941,943,945,947,949,951,953,955,957,959,961,963,965,967,969,971,973,975,977,979,981,983,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097,1099,1101,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631,1633,1635,1637,1639,1641,1643,1645,1647,1649,1651,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727,1729,1731,1733,1735,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755,1757,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915,1917,1919,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939,1941,1943,1945,1947,1949,1951,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085,2087,2089,2091,2093,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145,2147,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223,2225,2227,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261,2263,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293,2295,2297,2299,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341,2343,2345,2347,2349,2351,2353,2355,2357,2359,2361,2363,2365,2367,2369,2371,2373,2375,2377,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401,2403,2405,2407,2409,2411,2413,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501,2503,2505,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541,2543,2545,2547,2549,2551,2553,2555,2557,2559,2561,2563,2565,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683,2685,2687,2689,2691,2693,2695,2697,2699,2701,2703,2705,2707,2709,2711,2713,2715,2717,2719,2721,2723,2725,2727,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751,2753,2755,2757,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787,2789,2791,2793,2795,2797,2799,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843,2845,2847,2849,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889,2891,2893,2895,2897,2899,2901,2903,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923,2925,2927,2929,2931,2933,2935,2937,2939,2941,2943,2945,2947,2949,2951,2953,2955,2957,2959,2961,2963,2965,2967,2969,2971,2973,2975,2977,2979,2981,2983,2985,2987,2989,2991,2993,2995,2997,2999,3001,3003,3005,3007,3009,3011,3013,3015,3017,3019,3021,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053,3055,3057,3059,3061,3063,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3103,3105,3107,3109,3111,3113,3115,3117,3119,3121,3123,3125,3127,3129,3131,3133,3135,3137,3139,3141,3143,3145,3147,3149,3151,3153,3155,3157,3159,3161,3163,3165,3167,3169,3171,3173,3175,3177,3179,3181,3183,3185,3187,3189,3191,3193,3195,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215,3217,3219,3221,3223,3225,3227,3229,3231,3233,3235,3237,3239,3241,3243,3245,3247,3249,3251,3253,3255,3257,3259,3261,3263,3265,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319,3321,3323,3325,3327,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371,3373,3375,3377,3379,3381,3383,3385,3387,3389,3391,3393,3395,3397,3399,3401,3403,3405,3407,3409,3411,3413,3415,3417,3419,3421,3423,3425,3427,3429,3431,3433,3435,3437,3439,3441,3443,3445,3447,3449,3451,3453,3455,3457,3459,3461,3463,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483,3485,3487,3489,3491,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515,3517,3519,3521,3523,3525,3527,3529,3531,3533,3535,3537,3539,3541,3543,3545,3547,3549,3551,3553,3555,3557,3559,3561,3563,3565,3567,3569,3571,3573,3575,3577,3579,3581,3583,3585,3587,3589,3591,3593,3595,3597,3599,3601,3603,3605,3607,3609,3611,3613,3615,3617,3619,3621,3623,3625,3627,3629,3631,3633,3635,3637,3639,3641,3643,3645,3647,3649,3651,3653,3655,3657,3659,3661,3663,3665,3667,3669,3671,3673,3675,3677,3679,3681,3683,3685,3687,3689,3691,3693,3695,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715,3717,3719,3721,3723,3725,3727,3729,3731,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753,3755,3757,3759,3761,3763,3765,3767,3769,3771,3773,3775,3777,3779,3781,3783,3785,3787,3789,3791,3793,3795,3797,3799,3801,3803,3805,3807,3809,3811,3813,3815,3817,3819,3821,3823,3825,3827,3829,3831,3833,3835,3837,3839,3841,3843,3845,3847,3849,3851,3853,3855,3857,3859,3861,3863,3865,3867,3869,3871,3873,3875,3877,3879,3881,3883,3885,3887,3889,3891,3893,3895,3897,3899,3901,3903,3905,3907,3909,3911,3913,3915,3917,3919,3921,3923,3925,3927],{"categories":346},[347],"Developer Productivity",{"categories":349},[350],"Business & SaaS",{"categories":352},[353],"AI & LLMs",{"categories":355},[356],"AI Automation",{"categories":358},[359],"Product Strategy",{"categories":361},[353],{"categories":363},[347],{"categories":365},[350],{"categories":367},[],{"categories":369},[353],{"categories":371},[],{"categories":373},[374],"AI News & Trends",{"categories":376},[356],{"categories":378},[374],{"categories":380},[356],{"categories":382},[356],{"categories":384},[353],{"categories":386},[353],{"categories":388},[374],{"categories":390},[353],{"categories":392},[],{"categories":394},[322],{"categories":396},[397],"Data Science & Visualization",{"categories":399},[374],{"categories":401},[],{"categories":403},[404],"Software Engineering",{"categories":406},[353],{"categories":408},[356],{"categories":410},[411],"Marketing & Growth",{"categories":413},[353],{"categories":415},[356],{"categories":417},[],{"categories":419},[],{"categories":421},[322],{"categories":423},[356],{"categories":425},[347],{"categories":427},[322],{"categories":429},[353],{"categories":431},[356],{"categories":433},[374],{"categories":435},[],{"categories":437},[],{"categories":439},[356],{"categories":441},[404],{"categories":443},[],{"categories":445},[350],{"categories":447},[],{"categories":449},[],{"categories":451},[356],{"categories":453},[356],{"categories":455},[353],{"categories":457},[],{"categories":459},[404],{"categories":461},[],{"categories":463},[],{"categories":465},[],{"categories":467},[353],{"categories":469},[411],{"categories":471},[322],{"categories":473},[322],{"categories":475},[353],{"categories":477},[356],{"categories":479},[353],{"categories":481},[353],{"categories":483},[356],{"categories":485},[356],{"categories":487},[397],{"categories":489},[374],{"categories":491},[356],{"categories":493},[411],{"categories":495},[356],{"categories":497},[359],{"categories":499},[],{"categories":501},[356],{"categories":503},[],{"categories":505},[356],{"categories":507},[404],{"categories":509},[322],{"categories":511},[353],{"categories":513},[],{"categories":515},[],{"categories":517},[356],{"categories":519},[],{"categories":521},[353],{"categories":523},[],{"categories":525},[347],{"categories":527},[404],{"categories":529},[350],{"categories":531},[374],{"categories":533},[353],{"categories":535},[],{"categories":537},[353],{"categories":539},[],{"categories":541},[404],{"categories":543},[397],{"categories":545},[],{"categories":547},[353],{"categories":549},[322],{"categories":551},[],{"categories":553},[322],{"categories":555},[356],{"categories":557},[],{"categories":559},[356],{"categories":561},[374],{"categories":563},[350],{"categories":565},[353],{"categories":567},[],{"categories":569},[356],{"categories":571},[353],{"categories":573},[359],{"categories":575},[],{"categories":577},[353],{"categories":579},[356],{"categories":581},[356],{"categories":583},[],{"categories":585},[397],{"categories":587},[353],{"categories":589},[],{"categories":591},[347],{"categories":593},[350],{"categories":595},[353],{"categories":597},[356],{"categories":599},[404],{"categories":601},[353],{"categories":603},[],{"categories":605},[],{"categories":607},[353],{"categories":609},[],{"categories":611},[322],{"categories":613},[],{"categories":615},[353],{"categories":617},[],{"categories":619},[356],{"categories":621},[353],{"categories":623},[322],{"categories":625},[],{"categories":627},[353],{"categories":629},[353],{"categories":631},[350],{"categories":633},[356],{"categories":635},[353],{"categories":637},[322],{"categories":639},[356],{"categories":641},[],{"categories":643},[],{"categories":645},[374],{"categories":647},[],{"categories":649},[353],{"categories":651},[350,411],{"categories":653},[],{"categories":655},[353],{"categories":657},[],{"categories":659},[],{"categories":661},[353],{"categories":663},[],{"categories":665},[353],{"categories":667},[668],"DevOps & Cloud",{"categories":670},[],{"categories":672},[374],{"categories":674},[322],{"categories":676},[],{"categories":678},[374],{"categories":680},[374],{"categories":682},[353],{"categories":684},[411],{"categories":686},[],{"categories":688},[350],{"categories":690},[],{"categories":692},[353,668],{"categories":694},[353],{"categories":696},[353],{"categories":698},[356],{"categories":700},[353,404],{"categories":702},[397],{"categories":704},[353],{"categories":706},[411],{"categories":708},[356],{"categories":710},[356],{"categories":712},[],{"categories":714},[356],{"categories":716},[353,350],{"categories":718},[],{"categories":720},[322],{"categories":722},[322],{"categories":724},[],{"categories":726},[],{"categories":728},[374],{"categories":730},[],{"categories":732},[347],{"categories":734},[404],{"categories":736},[353],{"categories":738},[322],{"categories":740},[356],{"categories":742},[404],{"categories":744},[374],{"categories":746},[322],{"categories":748},[],{"categories":750},[353],{"categories":752},[353],{"categories":754},[353],{"categories":756},[374],{"categories":758},[347],{"categories":760},[353],{"categories":762},[356],{"categories":764},[668],{"categories":766},[322],{"categories":768},[356],{"categories":770},[],{"categories":772},[],{"categories":774},[322],{"categories":776},[374],{"categories":778},[397],{"categories":780},[],{"categories":782},[353],{"categories":784},[353],{"categories":786},[350],{"categories":788},[353],{"categories":790},[353],{"categories":792},[374],{"categories":794},[],{"categories":796},[356],{"categories":798},[404],{"categories":800},[],{"categories":802},[353],{"categories":804},[353],{"categories":806},[356],{"categories":808},[],{"categories":810},[],{"categories":812},[353],{"categories":814},[],{"categories":816},[350],{"categories":818},[356],{"categories":820},[],{"categories":822},[347],{"categories":824},[353],{"categories":826},[350],{"categories":828},[374],{"categories":830},[],{"categories":832},[],{"categories":834},[],{"categories":836},[374],{"categories":838},[374],{"categories":840},[],{"categories":842},[],{"categories":844},[350],{"categories":846},[],{"categories":848},[],{"categories":850},[347],{"categories":852},[],{"categories":854},[411],{"categories":856},[356],{"categories":858},[350],{"categories":860},[356],{"categories":862},[404],{"categories":864},[],{"categories":866},[359],{"categories":868},[322],{"categories":870},[404],{"categories":872},[353],{"categories":874},[356],{"categories":876},[350],{"categories":878},[353],{"categories":880},[],{"categories":882},[],{"categories":884},[404],{"categories":886},[397],{"categories":888},[359],{"categories":890},[356],{"categories":892},[353],{"categories":894},[],{"categories":896},[668],{"categories":898},[],{"categories":900},[356],{"categories":902},[],{"categories":904},[],{"categories":906},[353],{"categories":908},[322],{"categories":910},[411],{"categories":912},[356],{"categories":914},[],{"categories":916},[347],{"categories":918},[],{"categories":920},[374],{"categories":922},[353,668],{"categories":924},[374],{"categories":926},[353],{"categories":928},[350],{"categories":930},[353],{"categories":932},[],{"categories":934},[350],{"categories":936},[],{"categories":938},[404],{"categories":940},[322],{"categories":942},[374],{"categories":944},[397],{"categories":946},[347],{"categories":948},[353],{"categories":950},[404],{"categories":952},[],{"categories":954},[],{"categories":956},[359],{"categories":958},[],{"categories":960},[353],{"categories":962},[],{"categories":964},[322],{"categories":966},[322],{"categories":968},[322],{"categories":970},[],{"categories":972},[],{"categories":974},[374],{"categories":976},[356],{"categories":978},[353],{"categories":980},[353],{"categories":982},[353],{"categories":984},[350],{"categories":986},[353],{"categories":988},[],{"categories":990},[404],{"categories":992},[404],{"categories":994},[350],{"categories":996},[],{"categories":998},[353],{"categories":1000},[353],{"categories":1002},[350],{"categories":1004},[374],{"categories":1006},[411],{"categories":1008},[356],{"categories":1010},[],{"categories":1012},[322],{"categories":1014},[],{"categories":1016},[353],{"categories":1018},[],{"categories":1020},[350],{"categories":1022},[356],{"categories":1024},[],{"categories":1026},[668],{"categories":1028},[397],{"categories":1030},[404],{"categories":1032},[411],{"categories":1034},[404],{"categories":1036},[356],{"categories":1038},[],{"categories":1040},[],{"categories":1042},[356],{"categories":1044},[347],{"categories":1046},[356],{"categories":1048},[359],{"categories":1050},[350],{"categories":1052},[],{"categories":1054},[353],{"categories":1056},[359],{"categories":1058},[353],{"categories":1060},[353],{"categories":1062},[411],{"categories":1064},[322],{"categories":1066},[356],{"categories":1068},[],{"categories":1070},[],{"categories":1072},[668],{"categories":1074},[404],{"categories":1076},[],{"categories":1078},[356],{"categories":1080},[353],{"categories":1082},[322,353],{"categories":1084},[347],{"categories":1086},[],{"categories":1088},[353],{"categories":1090},[347],{"categories":1092},[322],{"categories":1094},[356],{"categories":1096},[404],{"categories":1098},[],{"categories":1100},[353],{"categories":1102},[],{"categories":1104},[347],{"categories":1106},[],{"categories":1108},[356],{"categories":1110},[359],{"categories":1112},[353],{"categories":1114},[353],{"categories":1116},[322],{"categories":1118},[356],{"categories":1120},[668],{"categories":1122},[322],{"categories":1124},[356],{"categories":1126},[353],{"categories":1128},[353],{"categories":1130},[353],{"categories":1132},[374],{"categories":1134},[],{"categories":1136},[359],{"categories":1138},[356],{"categories":1140},[322],{"categories":1142},[356],{"categories":1144},[404],{"categories":1146},[322],{"categories":1148},[356],{"categories":1150},[374],{"categories":1152},[],{"categories":1154},[353],{"categories":1156},[322],{"categories":1158},[353],{"categories":1160},[347],{"categories":1162},[374],{"categories":1164},[353],{"categories":1166},[411],{"categories":1168},[353],{"categories":1170},[353],{"categories":1172},[356],{"categories":1174},[356],{"categories":1176},[353],{"categories":1178},[356],{"categories":1180},[322],{"categories":1182},[353],{"categories":1184},[],{"categories":1186},[],{"categories":1188},[404],{"categories":1190},[],{"categories":1192},[347],{"categories":1194},[668],{"categories":1196},[],{"categories":1198},[347],{"categories":1200},[350],{"categories":1202},[411],{"categories":1204},[],{"categories":1206},[350],{"categories":1208},[],{"categories":1210},[],{"categories":1212},[],{"categories":1214},[],{"categories":1216},[],{"categories":1218},[353],{"categories":1220},[356],{"categories":1222},[668],{"categories":1224},[347],{"categories":1226},[353],{"categories":1228},[404],{"categories":1230},[359],{"categories":1232},[353],{"categories":1234},[411],{"categories":1236},[353],{"categories":1238},[353],{"categories":1240},[353],{"categories":1242},[353,347],{"categories":1244},[404],{"categories":1246},[404],{"categories":1248},[322],{"categories":1250},[353],{"categories":1252},[],{"categories":1254},[],{"categories":1256},[],{"categories":1258},[404],{"categories":1260},[397],{"categories":1262},[374],{"categories":1264},[322],{"categories":1266},[],{"categories":1268},[353],{"categories":1270},[353],{"categories":1272},[],{"categories":1274},[],{"categories":1276},[356],{"categories":1278},[353],{"categories":1280},[350],{"categories":1282},[],{"categories":1284},[347],{"categories":1286},[353],{"categories":1288},[347],{"categories":1290},[353],{"categories":1292},[404],{"categories":1294},[411],{"categories":1296},[353,322],{"categories":1298},[374],{"categories":1300},[322],{"categories":1302},[],{"categories":1304},[668],{"categories":1306},[322],{"categories":1308},[356],{"categories":1310},[],{"categories":1312},[],{"categories":1314},[],{"categories":1316},[],{"categories":1318},[404],{"categories":1320},[356],{"categories":1322},[356],{"categories":1324},[668],{"categories":1326},[353],{"categories":1328},[353],{"categories":1330},[353],{"categories":1332},[],{"categories":1334},[322],{"categories":1336},[],{"categories":1338},[],{"categories":1340},[356],{"categories":1342},[],{"categories":1344},[],{"categories":1346},[411],{"categories":1348},[411],{"categories":1350},[356],{"categories":1352},[],{"categories":1354},[353],{"categories":1356},[353],{"categories":1358},[404],{"categories":1360},[322],{"categories":1362},[322],{"categories":1364},[356],{"categories":1366},[347],{"categories":1368},[353],{"categories":1370},[322],{"categories":1372},[322],{"categories":1374},[356],{"categories":1376},[356],{"categories":1378},[353],{"categories":1380},[],{"categories":1382},[],{"categories":1384},[353],{"categories":1386},[356],{"categories":1388},[374],{"categories":1390},[404],{"categories":1392},[347],{"categories":1394},[353],{"categories":1396},[],{"categories":1398},[356],{"categories":1400},[356],{"categories":1402},[],{"categories":1404},[347],{"categories":1406},[353],{"categories":1408},[347],{"categories":1410},[347],{"categories":1412},[],{"categories":1414},[],{"categories":1416},[356],{"categories":1418},[356],{"categories":1420},[353],{"categories":1422},[353],{"categories":1424},[374],{"categories":1426},[397],{"categories":1428},[359],{"categories":1430},[374],{"categories":1432},[322],{"categories":1434},[],{"categories":1436},[374],{"categories":1438},[],{"categories":1440},[],{"categories":1442},[],{"categories":1444},[],{"categories":1446},[404],{"categories":1448},[397],{"categories":1450},[],{"categories":1452},[353],{"categories":1454},[353],{"categories":1456},[397],{"categories":1458},[404],{"categories":1460},[],{"categories":1462},[],{"categories":1464},[356],{"categories":1466},[374],{"categories":1468},[374],{"categories":1470},[356],{"categories":1472},[347],{"categories":1474},[353,668],{"categories":1476},[],{"categories":1478},[322],{"categories":1480},[347],{"categories":1482},[356],{"categories":1484},[322],{"categories":1486},[],{"categories":1488},[356],{"categories":1490},[356],{"categories":1492},[353],{"categories":1494},[411],{"categories":1496},[404],{"categories":1498},[322],{"categories":1500},[],{"categories":1502},[356],{"categories":1504},[353],{"categories":1506},[356],{"categories":1508},[356],{"categories":1510},[356],{"categories":1512},[411],{"categories":1514},[356],{"categories":1516},[353],{"categories":1518},[],{"categories":1520},[411],{"categories":1522},[374],{"categories":1524},[356],{"categories":1526},[],{"categories":1528},[],{"categories":1530},[353],{"categories":1532},[356],{"categories":1534},[374],{"categories":1536},[356],{"categories":1538},[],{"categories":1540},[],{"categories":1542},[],{"categories":1544},[356],{"categories":1546},[],{"categories":1548},[],{"categories":1550},[397],{"categories":1552},[353],{"categories":1554},[397],{"categories":1556},[374],{"categories":1558},[353],{"categories":1560},[353],{"categories":1562},[356],{"categories":1564},[353],{"categories":1566},[],{"categories":1568},[],{"categories":1570},[668],{"categories":1572},[],{"categories":1574},[],{"categories":1576},[347],{"categories":1578},[],{"categories":1580},[],{"categories":1582},[],{"categories":1584},[],{"categories":1586},[404],{"categories":1588},[374],{"categories":1590},[411],{"categories":1592},[350],{"categories":1594},[353],{"categories":1596},[353],{"categories":1598},[350],{"categories":1600},[],{"categories":1602},[322],{"categories":1604},[356],{"categories":1606},[350],{"categories":1608},[353],{"categories":1610},[353],{"categories":1612},[347],{"categories":1614},[],{"categories":1616},[347],{"categories":1618},[353],{"categories":1620},[411],{"categories":1622},[356],{"categories":1624},[374],{"categories":1626},[350],{"categories":1628},[353],{"categories":1630},[356],{"categories":1632},[],{"categories":1634},[353],{"categories":1636},[347],{"categories":1638},[353],{"categories":1640},[],{"categories":1642},[374],{"categories":1644},[353],{"categories":1646},[],{"categories":1648},[350],{"categories":1650},[353],{"categories":1652},[],{"categories":1654},[],{"categories":1656},[],{"categories":1658},[353],{"categories":1660},[],{"categories":1662},[668],{"categories":1664},[353],{"categories":1666},[],{"categories":1668},[353],{"categories":1670},[353],{"categories":1672},[353],{"categories":1674},[353,668],{"categories":1676},[353],{"categories":1678},[353],{"categories":1680},[322],{"categories":1682},[356],{"categories":1684},[],{"categories":1686},[356],{"categories":1688},[353],{"categories":1690},[353],{"categories":1692},[353],{"categories":1694},[347],{"categories":1696},[347],{"categories":1698},[404],{"categories":1700},[322],{"categories":1702},[356],{"categories":1704},[],{"categories":1706},[353],{"categories":1708},[374],{"categories":1710},[353],{"categories":1712},[350],{"categories":1714},[],{"categories":1716},[668],{"categories":1718},[322],{"categories":1720},[322],{"categories":1722},[356],{"categories":1724},[374],{"categories":1726},[356],{"categories":1728},[353],{"categories":1730},[],{"categories":1732},[353],{"categories":1734},[],{"categories":1736},[],{"categories":1738},[353],{"categories":1740},[353],{"categories":1742},[353],{"categories":1744},[356],{"categories":1746},[353],{"categories":1748},[],{"categories":1750},[397],{"categories":1752},[356],{"categories":1754},[],{"categories":1756},[],{"categories":1758},[353],{"categories":1760},[374],{"categories":1762},[],{"categories":1764},[322],{"categories":1766},[668],{"categories":1768},[374],{"categories":1770},[404],{"categories":1772},[404],{"categories":1774},[374],{"categories":1776},[374],{"categories":1778},[668],{"categories":1780},[],{"categories":1782},[374],{"categories":1784},[353],{"categories":1786},[347],{"categories":1788},[374],{"categories":1790},[],{"categories":1792},[397],{"categories":1794},[374],{"categories":1796},[404],{"categories":1798},[374],{"categories":1800},[668],{"categories":1802},[353],{"categories":1804},[353],{"categories":1806},[],{"categories":1808},[350],{"categories":1810},[],{"categories":1812},[],{"categories":1814},[353],{"categories":1816},[353],{"categories":1818},[353],{"categories":1820},[353],{"categories":1822},[],{"categories":1824},[397],{"categories":1826},[347],{"categories":1828},[],{"categories":1830},[353],{"categories":1832},[353],{"categories":1834},[668],{"categories":1836},[668],{"categories":1838},[],{"categories":1840},[356],{"categories":1842},[374],{"categories":1844},[374],{"categories":1846},[353],{"categories":1848},[356],{"categories":1850},[],{"categories":1852},[322],{"categories":1854},[353],{"categories":1856},[353],{"categories":1858},[],{"categories":1860},[],{"categories":1862},[668],{"categories":1864},[353],{"categories":1866},[404],{"categories":1868},[350],{"categories":1870},[353],{"categories":1872},[],{"categories":1874},[356],{"categories":1876},[347],{"categories":1878},[347],{"categories":1880},[],{"categories":1882},[353],{"categories":1884},[322],{"categories":1886},[356],{"categories":1888},[],{"categories":1890},[353],{"categories":1892},[353],{"categories":1894},[356],{"categories":1896},[],{"categories":1898},[356],{"categories":1900},[404],{"categories":1902},[],{"categories":1904},[353],{"categories":1906},[],{"categories":1908},[353],{"categories":1910},[],{"categories":1912},[353],{"categories":1914},[353],{"categories":1916},[],{"categories":1918},[353],{"categories":1920},[374],{"categories":1922},[353],{"categories":1924},[353],{"categories":1926},[347],{"categories":1928},[353],{"categories":1930},[374],{"categories":1932},[356],{"categories":1934},[],{"categories":1936},[353],{"categories":1938},[411],{"categories":1940},[],{"categories":1942},[],{"categories":1944},[],{"categories":1946},[347],{"categories":1948},[374],{"categories":1950},[356],{"categories":1952},[353],{"categories":1954},[322],{"categories":1956},[356],{"categories":1958},[],{"categories":1960},[356],{"categories":1962},[],{"categories":1964},[353],{"categories":1966},[356],{"categories":1968},[353],{"categories":1970},[],{"categories":1972},[353],{"categories":1974},[353],{"categories":1976},[374],{"categories":1978},[322],{"categories":1980},[356],{"categories":1982},[322],{"categories":1984},[350],{"categories":1986},[],{"categories":1988},[],{"categories":1990},[353],{"categories":1992},[347],{"categories":1994},[374],{"categories":1996},[],{"categories":1998},[],{"categories":2000},[404],{"categories":2002},[322],{"categories":2004},[],{"categories":2006},[353],{"categories":2008},[],{"categories":2010},[411],{"categories":2012},[353],{"categories":2014},[668],{"categories":2016},[404],{"categories":2018},[],{"categories":2020},[356],{"categories":2022},[353],{"categories":2024},[356],{"categories":2026},[356],{"categories":2028},[353],{"categories":2030},[],{"categories":2032},[347],{"categories":2034},[353],{"categories":2036},[350],{"categories":2038},[404],{"categories":2040},[322],{"categories":2042},[],{"categories":2044},[],{"categories":2046},[],{"categories":2048},[356],{"categories":2050},[322],{"categories":2052},[374],{"categories":2054},[353],{"categories":2056},[374],{"categories":2058},[322],{"categories":2060},[],{"categories":2062},[322],{"categories":2064},[374],{"categories":2066},[350],{"categories":2068},[353],{"categories":2070},[374],{"categories":2072},[411],{"categories":2074},[],{"categories":2076},[],{"categories":2078},[397],{"categories":2080},[353,404],{"categories":2082},[374],{"categories":2084},[353],{"categories":2086},[356],{"categories":2088},[356],{"categories":2090},[353],{"categories":2092},[],{"categories":2094},[404],{"categories":2096},[353],{"categories":2098},[397],{"categories":2100},[356],{"categories":2102},[411],{"categories":2104},[668],{"categories":2106},[],{"categories":2108},[347],{"categories":2110},[356],{"categories":2112},[356],{"categories":2114},[404],{"categories":2116},[353],{"categories":2118},[353],{"categories":2120},[],{"categories":2122},[],{"categories":2124},[],{"categories":2126},[668],{"categories":2128},[374],{"categories":2130},[353],{"categories":2132},[353],{"categories":2134},[353],{"categories":2136},[],{"categories":2138},[397],{"categories":2140},[350],{"categories":2142},[],{"categories":2144},[356],{"categories":2146},[668],{"categories":2148},[],{"categories":2150},[322],{"categories":2152},[322],{"categories":2154},[],{"categories":2156},[404],{"categories":2158},[322],{"categories":2160},[353],{"categories":2162},[],{"categories":2164},[374],{"categories":2166},[353],{"categories":2168},[322],{"categories":2170},[356],{"categories":2172},[374],{"categories":2174},[],{"categories":2176},[356],{"categories":2178},[322],{"categories":2180},[353],{"categories":2182},[],{"categories":2184},[353],{"categories":2186},[353],{"categories":2188},[668],{"categories":2190},[374],{"categories":2192},[397],{"categories":2194},[397],{"categories":2196},[],{"categories":2198},[],{"categories":2200},[],{"categories":2202},[356],{"categories":2204},[404],{"categories":2206},[404],{"categories":2208},[],{"categories":2210},[],{"categories":2212},[353],{"categories":2214},[],{"categories":2216},[356],{"categories":2218},[353],{"categories":2220},[],{"categories":2222},[353],{"categories":2224},[350],{"categories":2226},[353],{"categories":2228},[411],{"categories":2230},[356],{"categories":2232},[353],{"categories":2234},[404],{"categories":2236},[374],{"categories":2238},[356],{"categories":2240},[],{"categories":2242},[374],{"categories":2244},[356],{"categories":2246},[356],{"categories":2248},[],{"categories":2250},[350],{"categories":2252},[356],{"categories":2254},[],{"categories":2256},[353],{"categories":2258},[347],{"categories":2260},[374],{"categories":2262},[668],{"categories":2264},[356],{"categories":2266},[356],{"categories":2268},[347],{"categories":2270},[353],{"categories":2272},[],{"categories":2274},[],{"categories":2276},[322],{"categories":2278},[353,350],{"categories":2280},[],{"categories":2282},[347],{"categories":2284},[397],{"categories":2286},[353],{"categories":2288},[404],{"categories":2290},[353],{"categories":2292},[356],{"categories":2294},[353],{"categories":2296},[353],{"categories":2298},[374],{"categories":2300},[356],{"categories":2302},[],{"categories":2304},[],{"categories":2306},[356],{"categories":2308},[353],{"categories":2310},[668],{"categories":2312},[],{"categories":2314},[353],{"categories":2316},[356],{"categories":2318},[],{"categories":2320},[353],{"categories":2322},[411],{"categories":2324},[397],{"categories":2326},[356],{"categories":2328},[353],{"categories":2330},[668],{"categories":2332},[],{"categories":2334},[353],{"categories":2336},[411],{"categories":2338},[322],{"categories":2340},[353],{"categories":2342},[],{"categories":2344},[411],{"categories":2346},[374],{"categories":2348},[353],{"categories":2350},[353],{"categories":2352},[347],{"categories":2354},[],{"categories":2356},[],{"categories":2358},[322],{"categories":2360},[353],{"categories":2362},[397],{"categories":2364},[411],{"categories":2366},[411],{"categories":2368},[374],{"categories":2370},[],{"categories":2372},[],{"categories":2374},[353],{"categories":2376},[],{"categories":2378},[353,404],{"categories":2380},[374],{"categories":2382},[356],{"categories":2384},[404],{"categories":2386},[353],{"categories":2388},[347],{"categories":2390},[],{"categories":2392},[],{"categories":2394},[347],{"categories":2396},[411],{"categories":2398},[353],{"categories":2400},[],{"categories":2402},[322,353],{"categories":2404},[668],{"categories":2406},[347],{"categories":2408},[],{"categories":2410},[350],{"categories":2412},[350],{"categories":2414},[353],{"categories":2416},[404],{"categories":2418},[356],{"categories":2420},[374],{"categories":2422},[411],{"categories":2424},[322],{"categories":2426},[353],{"categories":2428},[353],{"categories":2430},[353],{"categories":2432},[347],{"categories":2434},[353],{"categories":2436},[356],{"categories":2438},[374],{"categories":2440},[],{"categories":2442},[],{"categories":2444},[397],{"categories":2446},[404],{"categories":2448},[353],{"categories":2450},[322],{"categories":2452},[397],{"categories":2454},[353],{"categories":2456},[353],{"categories":2458},[356],{"categories":2460},[356],{"categories":2462},[353,350],{"categories":2464},[],{"categories":2466},[322],{"categories":2468},[],{"categories":2470},[353],{"categories":2472},[374],{"categories":2474},[347],{"categories":2476},[347],{"categories":2478},[356],{"categories":2480},[353],{"categories":2482},[350],{"categories":2484},[404],{"categories":2486},[411],{"categories":2488},[],{"categories":2490},[374],{"categories":2492},[353],{"categories":2494},[353],{"categories":2496},[374],{"categories":2498},[404],{"categories":2500},[353],{"categories":2502},[356],{"categories":2504},[374],{"categories":2506},[353],{"categories":2508},[322],{"categories":2510},[353],{"categories":2512},[353],{"categories":2514},[668],{"categories":2516},[359],{"categories":2518},[356],{"categories":2520},[353],{"categories":2522},[374],{"categories":2524},[356],{"categories":2526},[411],{"categories":2528},[353],{"categories":2530},[],{"categories":2532},[353],{"categories":2534},[],{"categories":2536},[],{"categories":2538},[],{"categories":2540},[350],{"categories":2542},[353],{"categories":2544},[356],{"categories":2546},[374],{"categories":2548},[374],{"categories":2550},[374],{"categories":2552},[374],{"categories":2554},[],{"categories":2556},[347],{"categories":2558},[356],{"categories":2560},[374],{"categories":2562},[347],{"categories":2564},[356],{"categories":2566},[353],{"categories":2568},[353,356],{"categories":2570},[356],{"categories":2572},[668],{"categories":2574},[374],{"categories":2576},[374],{"categories":2578},[356],{"categories":2580},[353],{"categories":2582},[],{"categories":2584},[374],{"categories":2586},[411],{"categories":2588},[347],{"categories":2590},[353],{"categories":2592},[353],{"categories":2594},[],{"categories":2596},[404],{"categories":2598},[],{"categories":2600},[347],{"categories":2602},[356],{"categories":2604},[374],{"categories":2606},[353],{"categories":2608},[374],{"categories":2610},[347],{"categories":2612},[374],{"categories":2614},[374],{"categories":2616},[],{"categories":2618},[350],{"categories":2620},[356],{"categories":2622},[374],{"categories":2624},[374],{"categories":2626},[374],{"categories":2628},[374],{"categories":2630},[374],{"categories":2632},[374],{"categories":2634},[374],{"categories":2636},[374],{"categories":2638},[374],{"categories":2640},[374],{"categories":2642},[397],{"categories":2644},[347],{"categories":2646},[353],{"categories":2648},[353],{"categories":2650},[],{"categories":2652},[353,347],{"categories":2654},[],{"categories":2656},[356],{"categories":2658},[374],{"categories":2660},[356],{"categories":2662},[353],{"categories":2664},[353],{"categories":2666},[353],{"categories":2668},[353],{"categories":2670},[353],{"categories":2672},[356],{"categories":2674},[350],{"categories":2676},[322],{"categories":2678},[374],{"categories":2680},[353],{"categories":2682},[],{"categories":2684},[],{"categories":2686},[356],{"categories":2688},[322],{"categories":2690},[353],{"categories":2692},[],{"categories":2694},[],{"categories":2696},[411],{"categories":2698},[353],{"categories":2700},[],{"categories":2702},[],{"categories":2704},[347],{"categories":2706},[350],{"categories":2708},[353],{"categories":2710},[350],{"categories":2712},[322],{"categories":2714},[],{"categories":2716},[374],{"categories":2718},[],{"categories":2720},[322],{"categories":2722},[353],{"categories":2724},[411],{"categories":2726},[],{"categories":2728},[411],{"categories":2730},[],{"categories":2732},[],{"categories":2734},[356],{"categories":2736},[],{"categories":2738},[350],{"categories":2740},[347],{"categories":2742},[322],{"categories":2744},[404],{"categories":2746},[],{"categories":2748},[],{"categories":2750},[353],{"categories":2752},[347],{"categories":2754},[411],{"categories":2756},[],{"categories":2758},[356],{"categories":2760},[356],{"categories":2762},[374],{"categories":2764},[353],{"categories":2766},[356],{"categories":2768},[353],{"categories":2770},[356],{"categories":2772},[353],{"categories":2774},[359],{"categories":2776},[374],{"categories":2778},[],{"categories":2780},[411],{"categories":2782},[404],{"categories":2784},[356],{"categories":2786},[],{"categories":2788},[353],{"categories":2790},[356],{"categories":2792},[350],{"categories":2794},[347],{"categories":2796},[353],{"categories":2798},[322],{"categories":2800},[404],{"categories":2802},[404],{"categories":2804},[353],{"categories":2806},[397],{"categories":2808},[353],{"categories":2810},[356],{"categories":2812},[350],{"categories":2814},[356],{"categories":2816},[353],{"categories":2818},[353],{"categories":2820},[356],{"categories":2822},[374],{"categories":2824},[],{"categories":2826},[347],{"categories":2828},[353],{"categories":2830},[356],{"categories":2832},[353],{"categories":2834},[353],{"categories":2836},[],{"categories":2838},[322],{"categories":2840},[350],{"categories":2842},[374],{"categories":2844},[353],{"categories":2846},[353],{"categories":2848},[322],{"categories":2850},[411],{"categories":2852},[397],{"categories":2854},[353],{"categories":2856},[374],{"categories":2858},[353],{"categories":2860},[356],{"categories":2862},[668],{"categories":2864},[353],{"categories":2866},[356],{"categories":2868},[397],{"categories":2870},[],{"categories":2872},[356],{"categories":2874},[404],{"categories":2876},[322],{"categories":2878},[353],{"categories":2880},[347],{"categories":2882},[350],{"categories":2884},[404],{"categories":2886},[],{"categories":2888},[356],{"categories":2890},[353],{"categories":2892},[],{"categories":2894},[374],{"categories":2896},[],{"categories":2898},[374],{"categories":2900},[353],{"categories":2902},[356],{"categories":2904},[356],{"categories":2906},[356],{"categories":2908},[],{"categories":2910},[],{"categories":2912},[353],{"categories":2914},[353],{"categories":2916},[],{"categories":2918},[322],{"categories":2920},[356],{"categories":2922},[411],{"categories":2924},[347],{"categories":2926},[],{"categories":2928},[],{"categories":2930},[374],{"categories":2932},[404],{"categories":2934},[353],{"categories":2936},[353],{"categories":2938},[353],{"categories":2940},[404],{"categories":2942},[374],{"categories":2944},[322],{"categories":2946},[353],{"categories":2948},[353],{"categories":2950},[353],{"categories":2952},[374],{"categories":2954},[353],{"categories":2956},[374],{"categories":2958},[356],{"categories":2960},[356],{"categories":2962},[404],{"categories":2964},[356],{"categories":2966},[353],{"categories":2968},[404],{"categories":2970},[322],{"categories":2972},[],{"categories":2974},[356],{"categories":2976},[],{"categories":2978},[],{"categories":2980},[],{"categories":2982},[350],{"categories":2984},[353],{"categories":2986},[356],{"categories":2988},[347],{"categories":2990},[356],{"categories":2992},[411],{"categories":2994},[],{"categories":2996},[356],{"categories":2998},[],{"categories":3000},[347],{"categories":3002},[356],{"categories":3004},[],{"categories":3006},[356],{"categories":3008},[353],{"categories":3010},[374],{"categories":3012},[353],{"categories":3014},[356],{"categories":3016},[374],{"categories":3018},[356],{"categories":3020},[404],{"categories":3022},[322],{"categories":3024},[347],{"categories":3026},[],{"categories":3028},[356],{"categories":3030},[322],{"categories":3032},[668],{"categories":3034},[374],{"categories":3036},[353],{"categories":3038},[322],{"categories":3040},[347],{"categories":3042},[],{"categories":3044},[356],{"categories":3046},[356],{"categories":3048},[353],{"categories":3050},[],{"categories":3052},[356],{"categories":3054},[359],{"categories":3056},[374],{"categories":3058},[356],{"categories":3060},[350],{"categories":3062},[],{"categories":3064},[353],{"categories":3066},[359],{"categories":3068},[353],{"categories":3070},[356],{"categories":3072},[374],{"categories":3074},[347],{"categories":3076},[668],{"categories":3078},[353],{"categories":3080},[353],{"categories":3082},[353],{"categories":3084},[374],{"categories":3086},[350],{"categories":3088},[353],{"categories":3090},[322],{"categories":3092},[374],{"categories":3094},[668],{"categories":3096},[353],{"categories":3098},[],{"categories":3100},[],{"categories":3102},[668],{"categories":3104},[397],{"categories":3106},[356],{"categories":3108},[356],{"categories":3110},[374],{"categories":3112},[353],{"categories":3114},[347],{"categories":3116},[322],{"categories":3118},[356],{"categories":3120},[353],{"categories":3122},[411],{"categories":3124},[353],{"categories":3126},[356],{"categories":3128},[],{"categories":3130},[353],{"categories":3132},[353],{"categories":3134},[374],{"categories":3136},[347],{"categories":3138},[],{"categories":3140},[353],{"categories":3142},[353],{"categories":3144},[404],{"categories":3146},[322],{"categories":3148},[353,356],{"categories":3150},[411,350],{"categories":3152},[353],{"categories":3154},[],{"categories":3156},[356],{"categories":3158},[],{"categories":3160},[404],{"categories":3162},[353],{"categories":3164},[374],{"categories":3166},[],{"categories":3168},[356],{"categories":3170},[],{"categories":3172},[322],{"categories":3174},[356],{"categories":3176},[347],{"categories":3178},[356],{"categories":3180},[353],{"categories":3182},[668],{"categories":3184},[411],{"categories":3186},[350],{"categories":3188},[350],{"categories":3190},[347],{"categories":3192},[347],{"categories":3194},[353],{"categories":3196},[356],{"categories":3198},[353],{"categories":3200},[353],{"categories":3202},[347],{"categories":3204},[353],{"categories":3206},[411],{"categories":3208},[374],{"categories":3210},[353],{"categories":3212},[356],{"categories":3214},[353],{"categories":3216},[],{"categories":3218},[404],{"categories":3220},[],{"categories":3222},[356],{"categories":3224},[347],{"categories":3226},[],{"categories":3228},[668],{"categories":3230},[353],{"categories":3232},[],{"categories":3234},[374],{"categories":3236},[356],{"categories":3238},[404],{"categories":3240},[353],{"categories":3242},[356],{"categories":3244},[404],{"categories":3246},[356],{"categories":3248},[374],{"categories":3250},[347],{"categories":3252},[374],{"categories":3254},[404],{"categories":3256},[353],{"categories":3258},[322],{"categories":3260},[353],{"categories":3262},[353],{"categories":3264},[353],{"categories":3266},[353],{"categories":3268},[356],{"categories":3270},[353],{"categories":3272},[356],{"categories":3274},[353],{"categories":3276},[347],{"categories":3278},[353],{"categories":3280},[356],{"categories":3282},[322],{"categories":3284},[347],{"categories":3286},[356],{"categories":3288},[322],{"categories":3290},[],{"categories":3292},[353],{"categories":3294},[353],{"categories":3296},[404],{"categories":3298},[],{"categories":3300},[356],{"categories":3302},[411],{"categories":3304},[353],{"categories":3306},[374],{"categories":3308},[411],{"categories":3310},[356],{"categories":3312},[350],{"categories":3314},[350],{"categories":3316},[353],{"categories":3318},[347],{"categories":3320},[],{"categories":3322},[353],{"categories":3324},[],{"categories":3326},[347],{"categories":3328},[353],{"categories":3330},[356],{"categories":3332},[356],{"categories":3334},[],{"categories":3336},[404],{"categories":3338},[404],{"categories":3340},[411],{"categories":3342},[322],{"categories":3344},[],{"categories":3346},[353],{"categories":3348},[347],{"categories":3350},[353],{"categories":3352},[404],{"categories":3354},[347],{"categories":3356},[374],{"categories":3358},[374],{"categories":3360},[],{"categories":3362},[374],{"categories":3364},[356],{"categories":3366},[322],{"categories":3368},[397],{"categories":3370},[353],{"categories":3372},[],{"categories":3374},[374],{"categories":3376},[404],{"categories":3378},[350],{"categories":3380},[353],{"categories":3382},[347],{"categories":3384},[668],{"categories":3386},[347],{"categories":3388},[],{"categories":3390},[],{"categories":3392},[374],{"categories":3394},[],{"categories":3396},[356],{"categories":3398},[356],{"categories":3400},[356],{"categories":3402},[],{"categories":3404},[353],{"categories":3406},[],{"categories":3408},[374],{"categories":3410},[347],{"categories":3412},[322],{"categories":3414},[353],{"categories":3416},[374],{"categories":3418},[374],{"categories":3420},[],{"categories":3422},[374],{"categories":3424},[347],{"categories":3426},[353],{"categories":3428},[],{"categories":3430},[356],{"categories":3432},[356],{"categories":3434},[347],{"categories":3436},[],{"categories":3438},[],{"categories":3440},[],{"categories":3442},[322],{"categories":3444},[356],{"categories":3446},[353],{"categories":3448},[],{"categories":3450},[],{"categories":3452},[],{"categories":3454},[322],{"categories":3456},[],{"categories":3458},[347],{"categories":3460},[],{"categories":3462},[],{"categories":3464},[322],{"categories":3466},[353],{"categories":3468},[374],{"categories":3470},[],{"categories":3472},[411],{"categories":3474},[374],{"categories":3476},[411],{"categories":3478},[353],{"categories":3480},[],{"categories":3482},[],{"categories":3484},[356],{"categories":3486},[],{"categories":3488},[],{"categories":3490},[356],{"categories":3492},[353],{"categories":3494},[],{"categories":3496},[356],{"categories":3498},[374],{"categories":3500},[411],{"categories":3502},[397],{"categories":3504},[356],{"categories":3506},[356],{"categories":3508},[],{"categories":3510},[],{"categories":3512},[],{"categories":3514},[374],{"categories":3516},[],{"categories":3518},[],{"categories":3520},[322],{"categories":3522},[347],{"categories":3524},[],{"categories":3526},[350],{"categories":3528},[411],{"categories":3530},[353],{"categories":3532},[404],{"categories":3534},[347],{"categories":3536},[397],{"categories":3538},[350],{"categories":3540},[404],{"categories":3542},[],{"categories":3544},[],{"categories":3546},[356],{"categories":3548},[347],{"categories":3550},[322],{"categories":3552},[347],{"categories":3554},[356],{"categories":3556},[668],{"categories":3558},[356],{"categories":3560},[],{"categories":3562},[353],{"categories":3564},[374],{"categories":3566},[404],{"categories":3568},[],{"categories":3570},[322],{"categories":3572},[374],{"categories":3574},[347],{"categories":3576},[356],{"categories":3578},[353],{"categories":3580},[350],{"categories":3582},[356,668],{"categories":3584},[356],{"categories":3586},[404],{"categories":3588},[353],{"categories":3590},[397],{"categories":3592},[411],{"categories":3594},[356],{"categories":3596},[],{"categories":3598},[356],{"categories":3600},[353],{"categories":3602},[350],{"categories":3604},[],{"categories":3606},[],{"categories":3608},[353],{"categories":3610},[397],{"categories":3612},[353],{"categories":3614},[],{"categories":3616},[374],{"categories":3618},[],{"categories":3620},[374],{"categories":3622},[404],{"categories":3624},[356],{"categories":3626},[353],{"categories":3628},[411],{"categories":3630},[404],{"categories":3632},[],{"categories":3634},[374],{"categories":3636},[353],{"categories":3638},[],{"categories":3640},[353],{"categories":3642},[356],{"categories":3644},[353],{"categories":3646},[356],{"categories":3648},[353],{"categories":3650},[353],{"categories":3652},[353],{"categories":3654},[353],{"categories":3656},[350],{"categories":3658},[],{"categories":3660},[359],{"categories":3662},[374],{"categories":3664},[353],{"categories":3666},[],{"categories":3668},[404],{"categories":3670},[353],{"categories":3672},[353],{"categories":3674},[356],{"categories":3676},[374],{"categories":3678},[353],{"categories":3680},[353],{"categories":3682},[350],{"categories":3684},[356],{"categories":3686},[322],{"categories":3688},[],{"categories":3690},[397],{"categories":3692},[353],{"categories":3694},[],{"categories":3696},[374],{"categories":3698},[411],{"categories":3700},[],{"categories":3702},[],{"categories":3704},[374],{"categories":3706},[374],{"categories":3708},[411],{"categories":3710},[347],{"categories":3712},[356],{"categories":3714},[356],{"categories":3716},[353],{"categories":3718},[350],{"categories":3720},[],{"categories":3722},[],{"categories":3724},[374],{"categories":3726},[397],{"categories":3728},[404],{"categories":3730},[356],{"categories":3732},[322],{"categories":3734},[397],{"categories":3736},[397],{"categories":3738},[],{"categories":3740},[374],{"categories":3742},[353],{"categories":3744},[353],{"categories":3746},[404],{"categories":3748},[],{"categories":3750},[374],{"categories":3752},[374],{"categories":3754},[374],{"categories":3756},[],{"categories":3758},[356],{"categories":3760},[353],{"categories":3762},[],{"categories":3764},[347],{"categories":3766},[350],{"categories":3768},[],{"categories":3770},[353],{"categories":3772},[353],{"categories":3774},[],{"categories":3776},[404],{"categories":3778},[],{"categories":3780},[],{"categories":3782},[],{"categories":3784},[],{"categories":3786},[353],{"categories":3788},[374],{"categories":3790},[],{"categories":3792},[],{"categories":3794},[353],{"categories":3796},[353],{"categories":3798},[353],{"categories":3800},[397],{"categories":3802},[353],{"categories":3804},[397],{"categories":3806},[],{"categories":3808},[397],{"categories":3810},[397],{"categories":3812},[668],{"categories":3814},[356],{"categories":3816},[404],{"categories":3818},[],{"categories":3820},[],{"categories":3822},[397],{"categories":3824},[404],{"categories":3826},[404],{"categories":3828},[404],{"categories":3830},[],{"categories":3832},[347],{"categories":3834},[404],{"categories":3836},[404],{"categories":3838},[347],{"categories":3840},[404],{"categories":3842},[350],{"categories":3844},[404],{"categories":3846},[404],{"categories":3848},[404],{"categories":3850},[397],{"categories":3852},[374],{"categories":3854},[374],{"categories":3856},[353],{"categories":3858},[404],{"categories":3860},[397],{"categories":3862},[668],{"categories":3864},[397],{"categories":3866},[397],{"categories":3868},[397],{"categories":3870},[],{"categories":3872},[350],{"categories":3874},[],{"categories":3876},[668],{"categories":3878},[404],{"categories":3880},[404],{"categories":3882},[404],{"categories":3884},[356],{"categories":3886},[374,350],{"categories":3888},[397],{"categories":3890},[],{"categories":3892},[],{"categories":3894},[397],{"categories":3896},[],{"categories":3898},[397],{"categories":3900},[374],{"categories":3902},[356],{"categories":3904},[],{"categories":3906},[404],{"categories":3908},[353],{"categories":3910},[322],{"categories":3912},[],{"categories":3914},[353],{"categories":3916},[],{"categories":3918},[374],{"categories":3920},[347],{"categories":3922},[397],{"categories":3924},[],{"categories":3926},[404],{"categories":3928},[374],[3930,4034,4834,4983],{"id":3931,"title":3932,"ai":3933,"body":3938,"categories":4012,"created_at":323,"date_modified":323,"description":38,"extension":324,"faq":323,"featured":325,"kicker_label":323,"meta":4013,"navigation":327,"path":4018,"published_at":4019,"question":323,"scraped_at":4020,"seo":4021,"sitemap":4022,"source_id":4023,"source_name":4024,"source_type":4025,"source_url":4026,"stem":4027,"tags":4028,"thumbnail_url":4029,"tldr":4030,"tweet":4031,"unknown_tags":4032,"__hash__":4033},"summaries\u002Fsummaries\u002F25679c45178c4987-css-experts-google-basics-new-features-eat-js-s-lu-summary.md","CSS Experts Google Basics, New Features Eat JS's Lunch",{"provider":7,"model":8,"input_tokens":3934,"output_tokens":3935,"processing_time_ms":3936,"cost_usd":3937},6356,1202,16067,0.00184955,{"type":14,"value":3939,"toc":4007},[3940,3944,3981,3985,4000,4004],[17,3941,3943],{"id":3942},"everyday-css-lookups-that-trip-experts","Everyday CSS Lookups That Trip Experts",[22,3945,3946,3947,3950,3951,3954,3955,3954,3958,3954,3961,3964,3965,3968,3969,3972,3973,3976,3977,3980],{},"CSS veterans like panelists Lyra, Juan, and Chris still Google fundamentals they \"should know by heart.\" Examples include ",[40,3948,3949],{},"list-style-type"," for list markers (e.g., bullet shapes), view transition pseudo-elements (",[40,3952,3953],{},"::view-transition",", ",[40,3956,3957],{},"::view-transition-group",[40,3959,3960],{},"::view-transition-old",[40,3962,3963],{},"::view-transition-new"," with class or ident names), and ",[40,3966,3967],{},"background-attachment: local"," to prevent backgrounds from scrolling with content. They even reference their own articles for tricks like transitioning to ",[40,3970,3971],{},"auto"," height. Anchor positioning variants stump them too: ",[40,3974,3975],{},"position: anchor()"," vs. ",[40,3978,3979],{},"position-try-options",". These lookups highlight that CSS's growing complexity means no one memorizes everything—use references for precision in production.",[17,3982,3984],{"id":3983},"css-vs-js-favor-declarative-styling-over-imperative-logic","CSS vs. JS: Favor Declarative Styling Over Imperative Logic",[22,3986,3987,3988,3991,3992,3995,3996,3999],{},"Draw the line at what's declarative and simpler: CSS for styling states like hover, focus, or scroll position; JS only for non-stylable functionality. CSS now imports JS concepts—functions (",[40,3989,3990],{},"calc()",", custom properties), anchor positioning for tooltips (handles overflow\u002Fclipping without viewport detection), view transitions for page changes, and popover\u002Fdialog via ",[40,3993,3994],{},"\u003Cdetails>",". Scroll-driven animations eliminate JS scroll listeners setting custom properties; use native scroll progress for relativity-based effects. Active\u002Ffocus-visible states cover clicks\u002Ftabs without event handlers. Trade-off: New CSS shines in greenfield code but may conflict with legacy JS-heavy codebases. Result: Less code, free state handling (e.g., no ",[40,3997,3998],{},"if"," blocks for appear\u002Fdisappear), faster performance.",[17,4001,4003],{"id":4002},"new-css-tools-reshaping-traditional-approaches","New CSS Tools Reshaping Traditional Approaches",[22,4005,4006],{},"Panelists regret lacking modern features during past projects like CSS Clicker or co-host. Anchor positioning powers popovers affecting external elements; scroll-triggered animations (experimental) enable viewport-relative state changes without JS. View transitions simplify complex naming for smooth swaps. Browser interop is the hurdle—staggered releases demand CanIUse checks, unlike IE era. Pipeline feels endless: expect more JS-to-CSS migrations (e.g., carousels via CSS). Approach: Prototype with latest tools first; fallback to JS if unsupported. Outcome: Rethink patterns—e.g., no more manual tooltip shifts—unlocking powerful, maintainable UIs.",{"title":38,"searchDepth":57,"depth":57,"links":4008},[4009,4010,4011],{"id":3942,"depth":57,"text":3943},{"id":3983,"depth":57,"text":3984},{"id":4002,"depth":57,"text":4003},[322],{"content_references":4014,"triage":4015},[],{"relevance":86,"novelty":80,"quality":86,"actionability":80,"composite":4016,"reasoning":4017},3.6,"Category: Design & Frontend. The article discusses the evolving role of CSS in frontend development, highlighting practical CSS features that can replace JavaScript for certain functionalities, which addresses the audience's interest in design systems and UI\u002FUX craft. It provides specific examples of CSS properties and their applications, making it somewhat actionable, though it lacks a step-by-step guide.","\u002Fsummaries\u002F25679c45178c4987-css-experts-google-basics-new-features-eat-js-s-lu-summary","2026-05-11 09:24:04","2026-05-11 15:01:39",{"title":3932,"description":38},{"loc":4018},"25679c45178c4987","Smashing Magazine","video","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=AESmy7-_AYI","summaries\u002F25679c45178c4987-css-experts-google-basics-new-features-eat-js-s-lu-summary",[338,339,340],"https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FAESmy7-_AYI\u002Fhqdefault.jpg","Even CSS pros look up list-style-type and view transition pseudo-elements; declarative CSS like anchor positioning and scroll-driven animations handles states JS once owned, reducing code and complexity.","Casual live panel at Smashing Meets Style Sheets where host Geoff Graham chats with CSS experts Lyra, Juan, and Chris about routine lookups (like list-style-type or view transitions), the CSS-JS divide for styling vs. state, and hype for scroll-driven animations.",[],"bv7dzGHtMthxBpx5jHZdLDJTL25F58uWAM0q9QY2M6E",{"id":4035,"title":4036,"ai":4037,"body":4042,"categories":4806,"created_at":323,"date_modified":323,"description":38,"extension":324,"faq":323,"featured":325,"kicker_label":323,"meta":4807,"navigation":327,"path":4821,"published_at":4019,"question":323,"scraped_at":4822,"seo":4823,"sitemap":4824,"source_id":4825,"source_name":4024,"source_type":4025,"source_url":4826,"stem":4827,"tags":4828,"thumbnail_url":4829,"tldr":4830,"tweet":4831,"unknown_tags":4832,"__hash__":4833},"summaries\u002Fsummaries\u002F608f50a1bfbb83d4-css-in-n-out-animating-display-none-with-3-2-1-pat-summary.md","CSS In-N-Out: Animating display:none with 3-2-1 Pattern",{"provider":7,"model":8,"input_tokens":4038,"output_tokens":4039,"processing_time_ms":4040,"cost_usd":4041},8555,2684,29436,0.00276215,{"type":14,"value":4043,"toc":4798},[4044,4048,4083,4096,4100,4103,4140,4146,4152,4353,4361,4367,4370,4374,4382,4414,4430,4520,4526,4534,4538,4549,4552,4667,4670,4681,4685,4704,4707,4728,4731,4736,4740,4795],[17,4045,4047],{"id":4046},"unlocking-displaynone-animations-in-pure-css","Unlocking display:none Animations in Pure CSS",[22,4049,4050,4051,4054,4055,4058,4059,4062,4063,4066,4067,4070,4071,4074,4075,4078,4079,4082],{},"Animating elements from ",[40,4052,4053],{},"display: none"," to ",[40,4056,4057],{},"display: block"," was historically impossible without JavaScript hacks. Chris Coyier demonstrates how new CSS features—",[40,4060,4061],{},"transition-behavior: allow-discrete"," and ",[40,4064,4065],{},"@starting-style","—make it feasible today, especially for native elements like ",[40,4068,4069],{},"\u003Cdialog>"," and popovers. The core challenge: discrete properties like ",[40,4072,4073],{},"display"," don't interpolate (no in-between states like ",[40,4076,4077],{},"display: 50%","), so browsers snap them instantly. ",[40,4080,4081],{},"allow-discrete"," delays the flip until transition end, enabling smooth opacity, translate, or scale effects during the change.",[22,4084,4085,4086,4062,4088,4091,4092,4095],{},"Tradeoffs are real: keywords like ",[40,4087,4081],{},[40,4089,4090],{},"overlay"," feel arbitrary and hard to remember. Source order matters critically—misplace styles and specificity breaks everything. No JS needed, but debugging requires precise setup. Results: production-ready fades, slides, and rotations without hacks, outperforming old checkbox or ",[40,4093,4094],{},":target"," tricks.",[17,4097,4099],{"id":4098},"the-3-2-1-styling-pattern-source-order-is-king","The 3-2-1 Styling Pattern: Source Order Is King",[22,4101,4102],{},"Coyier introduces a \"3-2-1\" authoring model for reliable in-out animations:",[4104,4105,4106,4118,4127],"ol",{},[4107,4108,4109,4113,4114,4117],"li",{},[4110,4111,4112],"strong",{},"State 3: On-the-way-out styles"," (e.g., ",[40,4115,4116],{},"dialogue:not([open])"," or equivalent)—applied during close transition.",[4107,4119,4120,4113,4123,4126],{},[4110,4121,4122],{},"State 2: Open styles",[40,4124,4125],{},"dialogue:open",")—final visible state.",[4107,4128,4129,4132,4133,4135,4136,4139],{},[4110,4130,4131],{},"State 1: On-the-way-in styles"," (",[40,4134,4065],{}," for ",[40,4137,4138],{},":open",")—initial render state before first paint.",[22,4141,4142,4143,4145],{},"Write in reverse order (3-2-1) due to CSS cascade: ",[40,4144,4065],{}," has low specificity, so it must follow open styles to override. Users experience 1-2-3, but authoring 3-2-1 prevents footguns.",[22,4147,4148,4149,4151],{},"Example for fade + slide on ",[40,4150,4069],{},":",[33,4153,4155],{"className":35,"code":4154,"language":37,"meta":38,"style":38},"\u002F* State 3: Out styles *\u002F\ndialogue:not([open]) {\n  transform: translateX(100%);\n  opacity: 0;\n  transition: all 0.3s;\n}\n\n\u002F* State 2: Open *\u002F\ndialogue:open {\n  transform: translateX(0);\n  opacity: 1;\n  transition: opacity 0.3s, transform 0.3s, display;\n  transition-behavior: allow-discrete display;\n}\n\n\u002F* State 1: In styles (overrides open for first render) *\u002F\n@starting-style { dialogue:open { opacity: 0; transform: translateX(-100%); } }\n",[40,4156,4157,4163,4180,4202,4214,4232,4236,4241,4246,4251,4265,4276,4298,4306,4310,4314,4319],{"__ignoreMap":38},[43,4158,4159],{"class":45,"line":46},[43,4160,4162],{"class":4161},"sJ8bj","\u002F* State 3: Out styles *\u002F\n",[43,4164,4165,4168,4171,4174,4177],{"class":45,"line":57},[43,4166,4167],{"class":53},"dialogue",[43,4169,4170],{"class":49},":not",[43,4172,4173],{"class":53},"([",[43,4175,4176],{"class":49},"open",[43,4178,4179],{"class":53},"]) {\n",[43,4181,4182,4185,4187,4190,4193,4196,4199],{"class":45,"line":80},[43,4183,4184],{"class":60},"  transform",[43,4186,64],{"class":53},[43,4188,4189],{"class":60},"translateX",[43,4191,4192],{"class":53},"(",[43,4194,4195],{"class":60},"100",[43,4197,4198],{"class":70},"%",[43,4200,4201],{"class":53},");\n",[43,4203,4204,4207,4209,4212],{"class":45,"line":86},[43,4205,4206],{"class":60},"  opacity",[43,4208,64],{"class":53},[43,4210,4211],{"class":60},"0",[43,4213,77],{"class":53},[43,4215,4216,4219,4221,4224,4227,4230],{"class":45,"line":94},[43,4217,4218],{"class":60},"  transition",[43,4220,64],{"class":53},[43,4222,4223],{"class":60},"all",[43,4225,4226],{"class":60}," 0.3",[43,4228,4229],{"class":70},"s",[43,4231,77],{"class":53},[43,4233,4234],{"class":45,"line":111},[43,4235,83],{"class":53},[43,4237,4238],{"class":45,"line":116},[43,4239,4240],{"emptyLinePlaceholder":327},"\n",[43,4242,4243],{"class":45,"line":125},[43,4244,4245],{"class":4161},"\u002F* State 2: Open *\u002F\n",[43,4247,4248],{"class":45,"line":136},[43,4249,4250],{"class":53},"dialogue:open {\n",[43,4252,4253,4255,4257,4259,4261,4263],{"class":45,"line":151},[43,4254,4184],{"class":60},[43,4256,64],{"class":53},[43,4258,4189],{"class":60},[43,4260,4192],{"class":53},[43,4262,4211],{"class":60},[43,4264,4201],{"class":53},[43,4266,4267,4269,4271,4274],{"class":45,"line":168},[43,4268,4206],{"class":60},[43,4270,64],{"class":53},[43,4272,4273],{"class":60},"1",[43,4275,77],{"class":53},[43,4277,4278,4280,4283,4286,4288,4291,4293,4295],{"class":45,"line":184},[43,4279,4218],{"class":60},[43,4281,4282],{"class":53},": opacity ",[43,4284,4285],{"class":60},"0.3",[43,4287,4229],{"class":70},[43,4289,4290],{"class":53},", transform ",[43,4292,4285],{"class":60},[43,4294,4229],{"class":70},[43,4296,4297],{"class":53},", display;\n",[43,4299,4300,4303],{"class":45,"line":200},[43,4301,4302],{"class":60},"  transition-behavior",[43,4304,4305],{"class":53},": allow-discrete display;\n",[43,4307,4308],{"class":45,"line":205},[43,4309,83],{"class":53},[43,4311,4312],{"class":45,"line":213},[43,4313,4240],{"emptyLinePlaceholder":327},[43,4315,4316],{"class":45,"line":228},[43,4317,4318],{"class":4161},"\u002F* State 1: In styles (overrides open for first render) *\u002F\n",[43,4320,4321,4323,4326,4329,4331,4333,4336,4339,4341,4343,4345,4348,4350],{"class":45,"line":243},[43,4322,4065],{"class":70},[43,4324,4325],{"class":53}," { dialogue:open { ",[43,4327,4328],{"class":60},"opacity",[43,4330,64],{"class":53},[43,4332,4211],{"class":60},[43,4334,4335],{"class":53},"; ",[43,4337,4338],{"class":60},"transform",[43,4340,64],{"class":53},[43,4342,4189],{"class":60},[43,4344,4192],{"class":53},[43,4346,4347],{"class":60},"-100",[43,4349,4198],{"class":70},[43,4351,4352],{"class":53},"); } }\n",[22,4354,4355,4356,64,4358,4360],{},"This slides in from left, out to right—mismatched motions feel satisfying. Scale to any animatable property (opacity, transform, background). Fails without ",[40,4357,4081],{},[40,4359,4073],{}," flips upfront, snapping instantly.",[4362,4363,4364],"blockquote",{},[22,4365,4366],{},"\"The order though does matter because starting style... has no specificity... it's better to always put them after your open styles because they need to override your open styles.\" — Chris Coyier, explaining why 3-2-1 prevents cascade breakage (key to avoiding subtle bugs).",[22,4368,4369],{},"Dave Rupert's \"minimum viable design system\" pen struggled here: wrong order broke half the animations, underscoring real-world pitfalls.",[17,4371,4373],{"id":4372},"native-dialogues-top-layer-magic-without-z-index-wars","Native Dialogues: Top-Layer Magic Without Z-Index Wars",[22,4375,4376,4378,4379,4381],{},[40,4377,4069],{}," defaults to ",[40,4380,4053],{}," when closed—perfect for in-out demos. Perks:",[4383,4384,4385,4395,4401],"ul",{},[4107,4386,4387,4390,4391,4394],{},[4110,4388,4389],{},"Top layer",": Renders above everything, no ",[40,4392,4393],{},"z-index"," fights or DOM positioning.",[4107,4396,4397,4400],{},[4110,4398,4399],{},"Free focus trapping",": No custom JS.",[4107,4402,4403,64,4406,4409,4410,4413],{},[4110,4404,4405],{},"HTML-only control",[40,4407,4408],{},"\u003Cbutton popovertarget=\"id\">"," or ",[40,4411,4412],{},"dialog.showModal()",".",[22,4415,4416,4417,4419,4420,4422,4423,4426,4427,4429],{},"From closed (",[40,4418,4053],{},", inaccessible) to open: animate via ",[40,4421,4138],{}," pseudo-class. Backdrop (",[40,4424,4425],{},"::backdrop",") fades separately but follows same 3-2-1 + ",[40,4428,4090],{}," keyword on parent:",[33,4431,4433],{"className":35,"code":4432,"language":37,"meta":38,"style":38},"dialogue::backdrop {\n  background: linear-gradient(45deg, #333, #666);\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n\n\u002F* On parent *\u002F\ntransition-behavior: allow-discrete display overlay;\n",[40,4434,4435,4443,4473,4483,4495,4499,4503,4508],{"__ignoreMap":38},[43,4436,4437,4439,4441],{"class":45,"line":46},[43,4438,4167],{"class":53},[43,4440,4425],{"class":49},[43,4442,54],{"class":53},[43,4444,4445,4448,4450,4453,4455,4458,4461,4463,4466,4468,4471],{"class":45,"line":57},[43,4446,4447],{"class":60},"  background",[43,4449,64],{"class":53},[43,4451,4452],{"class":60},"linear-gradient",[43,4454,4192],{"class":53},[43,4456,4457],{"class":60},"45",[43,4459,4460],{"class":70},"deg",[43,4462,3954],{"class":53},[43,4464,4465],{"class":60},"#333",[43,4467,3954],{"class":53},[43,4469,4470],{"class":60},"#666",[43,4472,4201],{"class":53},[43,4474,4475,4477,4479,4481],{"class":45,"line":80},[43,4476,4206],{"class":60},[43,4478,64],{"class":53},[43,4480,4273],{"class":60},[43,4482,77],{"class":53},[43,4484,4485,4487,4489,4491,4493],{"class":45,"line":86},[43,4486,4218],{"class":60},[43,4488,4282],{"class":53},[43,4490,4285],{"class":60},[43,4492,4229],{"class":70},[43,4494,77],{"class":53},[43,4496,4497],{"class":45,"line":94},[43,4498,83],{"class":53},[43,4500,4501],{"class":45,"line":111},[43,4502,4240],{"emptyLinePlaceholder":327},[43,4504,4505],{"class":45,"line":116},[43,4506,4507],{"class":4161},"\u002F* On parent *\u002F\n",[43,4509,4510,4513,4515,4517],{"class":45,"line":125},[43,4511,4512],{"class":130},"transition-behavior",[43,4514,64],{"class":53},[43,4516,4081],{"class":130},[43,4518,4519],{"class":53}," display overlay;\n",[22,4521,4522,4523,4525],{},"Without ",[40,4524,4090],{},", backdrop snaps. CSSWG discussed removing it—fingers crossed. Demo: Full modal with diagonal gradient backdrop, sliding content, Grammarly popup interruption for realism.",[4362,4527,4528],{},[22,4529,4530,4531,4533],{},"\"Imagine if all those CSS crimes could use dialogue and popovers... the possibilities are much stronger.\" — Coyier on ditching checkbox hacks and ",[40,4532,3994],{}," for native APIs (highlights migration path from hacks).",[17,4535,4537],{"id":4536},"popovers-attribute-driven-crime-worthy-flexibility","Popovers: Attribute-Driven, Crime-Worthy Flexibility",[22,4539,4540,4541,4544,4545,4548],{},"Popovers mirror dialogues but use ",[40,4542,4543],{},"popover"," attribute + ",[40,4546,4547],{},"popovertarget"," for invokers. No DOM structure needed—elements anywhere communicate via IDs. Ideal for tooltips, menus.",[22,4550,4551],{},"Same 3-2-1 applies, plus anchor positioning (implied anchor from invoker). Example: Inline notebook tooltip rotates in:",[33,4553,4555],{"className":35,"code":4554,"language":37,"meta":38,"style":38},"\u002F* Similar 3-2-1 with rotate *\u002F\n[popover]:not([open]) { transform: rotate(-10deg); }\n[popover][open] { transform: rotate(2deg); }\n@starting-style { [popover][open] { transform: rotate(-90deg); opacity: 0; } }\n",[40,4556,4557,4562,4598,4627],{"__ignoreMap":38},[43,4558,4559],{"class":45,"line":46},[43,4560,4561],{"class":4161},"\u002F* Similar 3-2-1 with rotate *\u002F\n",[43,4563,4564,4567,4569,4572,4574,4576,4578,4581,4583,4585,4588,4590,4593,4595],{"class":45,"line":57},[43,4565,4566],{"class":53},"[",[43,4568,4543],{"class":49},[43,4570,4571],{"class":53},"]",[43,4573,4170],{"class":49},[43,4575,4173],{"class":53},[43,4577,4176],{"class":49},[43,4579,4580],{"class":53},"]) { ",[43,4582,4338],{"class":60},[43,4584,64],{"class":53},[43,4586,4587],{"class":60},"rotate",[43,4589,4192],{"class":53},[43,4591,4592],{"class":60},"-10",[43,4594,4460],{"class":70},[43,4596,4597],{"class":53},"); }\n",[43,4599,4600,4602,4604,4607,4609,4612,4614,4616,4618,4620,4623,4625],{"class":45,"line":80},[43,4601,4566],{"class":53},[43,4603,4543],{"class":49},[43,4605,4606],{"class":53},"][",[43,4608,4176],{"class":49},[43,4610,4611],{"class":53},"] { ",[43,4613,4338],{"class":60},[43,4615,64],{"class":53},[43,4617,4587],{"class":60},[43,4619,4192],{"class":53},[43,4621,4622],{"class":60},"2",[43,4624,4460],{"class":70},[43,4626,4597],{"class":53},[43,4628,4629,4631,4634,4636,4638,4640,4642,4644,4646,4648,4650,4653,4655,4658,4660,4662,4664],{"class":45,"line":86},[43,4630,4065],{"class":70},[43,4632,4633],{"class":53}," { [",[43,4635,4543],{"class":49},[43,4637,4606],{"class":53},[43,4639,4176],{"class":49},[43,4641,4611],{"class":53},[43,4643,4338],{"class":60},[43,4645,64],{"class":53},[43,4647,4587],{"class":60},[43,4649,4192],{"class":53},[43,4651,4652],{"class":60},"-90",[43,4654,4460],{"class":70},[43,4656,4657],{"class":53},"); ",[43,4659,4328],{"class":60},[43,4661,64],{"class":53},[43,4663,4211],{"class":60},[43,4665,4666],{"class":53},"; } }\n",[22,4668,4669],{},"Click-away closes. Tradeoff: Slightly different UA styles vs. dialogues (see Coyier's post, linked in slides). Anchor positioning auto-handles placement.",[4362,4671,4672],{},[22,4673,4674,4675,4409,4677,4680],{},"\"This has no such restrictions crime away crime it up.\" — On popovers' loose coupling beating ",[40,4676,3994],{},[40,4678,4679],{},"+"," selectors (fun nod to hacky patterns).",[17,4682,4684],{"id":4683},"backdrop-and-edge-cases-keywords-you-must-memorize","Backdrop and Edge Cases: Keywords You Must Memorize",[22,4686,4687,4688,4691,4692,4696,4697,4699,4700,4703],{},"Backdrops need ",[40,4689,4690],{},"transition-behavior: allow-discrete display overlay"," on ",[4693,4694,4695],"em",{},"parent",", not ",[40,4698,4425],{}," itself. Animate opacity\u002Fbackground there too. No ",[40,4701,4702],{},"transition: all","—specify properties explicitly.",[22,4705,4706],{},"Edge learnings:",[4383,4708,4709,4715,4725],{},[4107,4710,4711,4712,4714],{},"First render uses ",[40,4713,4065],{},"—prevents instant snap to open state.",[4107,4716,4717,4718,4721,4722,4724],{},"Works for custom divs too (add\u002Fremove ",[40,4719,4720],{},".open"," class toggling ",[40,4723,4073],{},").",[4107,4726,4727],{},"Source order trips up even pros (Rupert's pen).",[22,4729,4730],{},"Full demo pen: Clean fonts, custom dialog styling, left-in\u002Fright-out slide, gradient backdrop.",[4362,4732,4733],{},[22,4734,4735],{},"\"There's a lot to get wrong... it's cool that we can do it... I want you to understand it all.\" — Summing the quirky but powerful API (candid on complexity vs. value).",[17,4737,4739],{"id":4738},"key-takeaways","Key Takeaways",[4383,4741,4742,4748,4754,4759,4768,4774,4780,4783,4792],{},[4107,4743,4744,4745,4747],{},"Always use 3-2-1 source order: out styles > open > ",[40,4746,4065],{}," in, to beat specificity.",[4107,4749,4750,4753],{},[40,4751,4752],{},"transition-behavior: allow-discrete display"," delays discrete flips—essential for no-JS.",[4107,4755,4756,4758],{},[40,4757,4069],{}," and popovers handle modals\u002Ftooltips natively; migrate from hacks.",[4107,4760,4761,4762,4764,4765,4767],{},"Backdrops: ",[40,4763,4090],{}," keyword on parent + ",[40,4766,4425],{}," opacity\u002Fgradients.",[4107,4769,4770,4771,4773],{},"Test first render: ",[40,4772,4065],{}," ensures in-animation starts faded\u002Foff-screen.",[4107,4775,4776,4777,4779],{},"Specify transitions explicitly; add ",[40,4778,4090],{}," for top-layer backdrops.",[4107,4781,4782],{},"Mismatch in\u002Fout motions (e.g., left-in, right-out) for polish.",[4107,4784,4785,4786,4788,4789,4791],{},"Bookmark pens\u002Fslides—",[40,4787,4081],{},"\u002F",[40,4790,4090],{}," are forgettable but mandatory.",[4107,4793,4794],{},"No z-index\u002FDOM fights: top-layer FTW for overlays.",[313,4796,4797],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":38,"searchDepth":57,"depth":57,"links":4799},[4800,4801,4802,4803,4804,4805],{"id":4046,"depth":57,"text":4047},{"id":4098,"depth":57,"text":4099},{"id":4372,"depth":57,"text":4373},{"id":4536,"depth":57,"text":4537},{"id":4683,"depth":57,"text":4684},{"id":4738,"depth":57,"text":4739},[322],{"content_references":4808,"triage":4818},[4809,4814],{"type":4810,"title":4811,"author":4812,"context":4813},"podcast","Shop Talk Show","Chris Coyier, Dave Rupert","mentioned",{"type":4815,"title":4816,"author":4817,"context":4813},"other","Minimum Viable Design System","Dave Rupert",{"relevance":80,"novelty":80,"quality":86,"actionability":86,"composite":4819,"reasoning":4820},3.45,"Category: Design & Frontend. The article provides practical insights into CSS animations, specifically addressing a common challenge in frontend development. It introduces a new CSS feature and a structured approach (3-2-1 pattern) that can be directly applied to improve UI\u002FUX design, making it actionable for developers.","\u002Fsummaries\u002F608f50a1bfbb83d4-css-in-n-out-animating-display-none-with-3-2-1-pat-summary","2026-05-11 15:01:32",{"title":4036,"description":38},{"loc":4821},"608f50a1bfbb83d4","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=hIH1GKAMN5w","summaries\u002F608f50a1bfbb83d4-css-in-n-out-animating-display-none-with-3-2-1-pat-summary",[338,339,340],"https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FhIH1GKAMN5w\u002Fhqdefault.jpg","Pure CSS animations for elements entering\u002Fexiting DOM (e.g., dialogues from display:none) use transition-behavior: allow-discrete, @starting-style, and 3-2-1 source order: out styles first, then open, then in styles last.","Chris Coyier conference talk demoing CSS animations for elements entering\u002Fexiting view (e.g., \u003Cdialog> modals), covering `transition-behavior: allow-discrete` on `display` and `@starting-style` for opacity fades.",[],"Ozm3ShHib0JMe9UPK_e3YZjegwoGiaVza0UZuxmKMt8",{"id":4835,"title":4836,"ai":4837,"body":4842,"categories":4951,"created_at":323,"date_modified":323,"description":38,"extension":324,"faq":323,"featured":325,"kicker_label":323,"meta":4952,"navigation":327,"path":4970,"published_at":4971,"question":323,"scraped_at":4972,"seo":4973,"sitemap":4974,"source_id":4975,"source_name":4976,"source_type":334,"source_url":4977,"stem":4978,"tags":4979,"thumbnail_url":323,"tldr":4980,"tweet":323,"unknown_tags":4981,"__hash__":4982},"summaries\u002Fsummaries\u002F3b252568320b08d5-css-grid-scrollers-auto-grids-adaptive-layouts-summary.md","CSS Grid: Scrollers, Auto-Grids, Adaptive Layouts",{"provider":7,"model":8,"input_tokens":4838,"output_tokens":4839,"processing_time_ms":4840,"cost_usd":4841},9124,2221,22116,0.0029128,{"type":14,"value":4843,"toc":4945},[4844,4848,4875,4879,4897,4901,4919,4923,4930],[17,4845,4847],{"id":4846},"horizontal-overflow-scrollers-with-grid-and-snap","Horizontal Overflow Scrollers with Grid and Snap",[22,4849,4850,4851,4854,4855,4858,4859,4862,4863,4866,4867,4870,4871,4874],{},"Create touch-friendly horizontal card scrollers using CSS Grid's ",[40,4852,4853],{},"grid-auto-flow: column"," to stack items vertically into columns, paired with ",[40,4856,4857],{},"grid-auto-columns: 300px"," for uniform width and ",[40,4860,4861],{},"gap: 1rem",". Add ",[40,4864,4865],{},"overflow-x: scroll"," to enable scrolling without page reflow. Enhance usability with ",[40,4868,4869],{},"scroll-snap-type: x mandatory"," on the container and ",[40,4872,4873],{},"scroll-snap-align: center"," on children (* selector via nesting)—snaps cards to center on scroll, eliminating awkward shift-scrolling on desktop. Mandatory snaps aggressively for precise alignment; avoid proximity for scrollers as it allows leeway. Trade-off: Feels like scrolljacking if overused on full sections, but perfect for compact galleries.",[17,4876,4878],{"id":4877},"non-overflowing-auto-fit-grids","Non-Overflowing Auto-Fit Grids",[22,4880,4881,4882,4885,4886,64,4889,4892,4893,4896],{},"Responsive card grids overflow on narrow viewports when using ",[40,4883,4884],{},"repeat(auto-fit, minmax(200px, 1fr))","—minimums like 400px total force horizontal scroll. Fix by nesting ",[40,4887,4888],{},"min()",[40,4890,4891],{},"repeat(auto-fit, minmax(min(300px, 100%), 1fr))",". Below 300px container width, grids collapse to 100% (full-width single column); above, they expand to 300px min with fr growth. Memory trick: auto-fit\u002Ffill → minmax → min(ideal-px, 100%), 1fr. Use CSS var ",[40,4894,4895],{},"--min-card-size: 300px"," for reuse. Auto-fit collapses empty tracks (vs. auto-fill's fixed count)—no difference here, but default to fit. Result: Intrinsic, fluid layouts that scale from mobile stack to desktop multi-column without breakpoints.",[17,4898,4900],{"id":4899},"adaptive-sidebars-via-container-queries","Adaptive Sidebars via Container Queries",[22,4902,4903,4904,4907,4908,4911,4912,4409,4915,4918],{},"Media queries fail for sidebars that shrink on wide viewports (e.g., narrow sidebar → full-width → narrow again). Use container queries: Set parent ",[40,4905,4906],{},"container-type: inline-size",", then ",[40,4909,4910],{},"@container (width > 500px) { .promo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } }",". Stacks vertically below 500px (narrow contexts); grids to 3 columns above. Declare on closest ancestor (e.g., ",[40,4913,4914],{},"aside",[40,4916,4917],{},"section","). Support is strong outside legacy browsers. Solves viewport-agnostic adaptation—far simpler than breakpoint juggling.",[17,4920,4922],{"id":4921},"polish-with-scooped-corners-and-scroll-driven-animations","Polish with Scooped Corners and Scroll-Driven Animations",[22,4924,4925,4926,4929],{},"Elevate cards: ",[40,4927,4928],{},"border-radius: 16px; border-color: white; corner-shape: scoop","—scoops corners progressively (falls back to radius). New property; also supports squircle\u002Fbevel\u002Finset for ticket-like promos.",[22,4931,4932,4933,4936,4937,4940,4941,4944],{},"Supercharge scrollers: ",[40,4934,4935],{},"@keyframes scroller { 0%, 100% { opacity: 0.5; scale: 0.5; } 35%, 65% { opacity: 1; scale: 1; } }"," on snapped children, with ",[40,4938,4939],{},"animation: scroller linear both; animation-timeline: scroll(x)",". Fades\u002Fscales edge items low-opacity\u002Fsmall, centers active card at full size—driven by horizontal scroll progress, no duration needed. ",[40,4942,4943],{},"both"," fills animation ends. Makes scrollers feel premium and satisfying.",{"title":38,"searchDepth":57,"depth":57,"links":4946},[4947,4948,4949,4950],{"id":4846,"depth":57,"text":4847},{"id":4877,"depth":57,"text":4878},{"id":4899,"depth":57,"text":4900},{"id":4921,"depth":57,"text":4922},[322],{"content_references":4953,"triage":4967},[4954,4958,4961,4964],{"type":4955,"title":4956,"url":4957,"context":4813},"tool","Code from this video","https:\u002F\u002Fcodepen.io\u002Feditor\u002Fkevinpowell\u002Fpen\u002F019dab2d-dfd3-7988-86c5-69986ea33e4c",{"type":4815,"title":4959,"url":4960,"context":4813},"Understanding CSS corner-shape and the power of the superellipse","https:\u002F\u002Ffrontendmasters.com\u002Fblog\u002Funderstanding-css-corner-shape-and-the-power-of-the-superellipse\u002F",{"type":4815,"title":4962,"url":4963,"context":4813},"The difference between auto-fit and auto-fill","https:\u002F\u002Fyoutu.be\u002FOZ6qKoq7RJU",{"type":4815,"title":4965,"url":4966,"context":4813},"More on scroll-driven animations","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=UmzFk68Bwdk",{"relevance":86,"novelty":80,"quality":86,"actionability":86,"composite":4968,"reasoning":4969},3.8,"Category: Design & Frontend. The article provides practical techniques for implementing CSS Grid layouts, addressing specific pain points like horizontal scrolling and responsive design, which are relevant to the target audience. It includes actionable code snippets and explanations that developers can apply directly to their projects.","\u002Fsummaries\u002F3b252568320b08d5-css-grid-scrollers-auto-grids-adaptive-layouts-summary","2026-04-29 13:00:49","2026-05-03 16:58:49",{"title":4836,"description":38},{"loc":4970},"2b203a4b2e111123","Kevin Powell","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=R1kiLX-Z-Io","summaries\u002F3b252568320b08d5-css-grid-scrollers-auto-grids-adaptive-layouts-summary",[338,339,340],"Build horizontal scrollers with grid-auto-flow: column + snap; prevent auto-grid overflow via minmax(min(300px, 100%), 1fr); adapt sidebars using container queries at 500px width.",[],"bJbD6crrxBNEXOG726vUBAmCKXLaY3Wp-8DcZ4f-AEg",{"id":4984,"title":4985,"ai":4986,"body":4990,"categories":5192,"created_at":323,"date_modified":323,"description":38,"extension":324,"faq":323,"featured":325,"kicker_label":323,"meta":5193,"navigation":327,"path":5198,"published_at":5199,"question":323,"scraped_at":5200,"seo":5201,"sitemap":5202,"source_id":5203,"source_name":5204,"source_type":334,"source_url":5205,"stem":5206,"tags":5207,"thumbnail_url":323,"tldr":5208,"tweet":323,"unknown_tags":5209,"__hash__":5210},"summaries\u002Fsummaries\u002F85dd0b7471805afa-10-fresh-css-html-apis-for-smarter-layouts-and-eff-summary.md","10 Fresh CSS\u002FHTML APIs for Smarter Layouts and Effects",{"provider":7,"model":8,"input_tokens":4987,"output_tokens":4839,"processing_time_ms":4988,"cost_usd":4989},8960,21644,0.00287985,{"type":14,"value":4991,"toc":5185},[4992,4996,5014,5024,5027,5031,5042,5045,5069,5072,5075,5079,5093,5100,5109,5116,5119,5122,5126,5129,5132,5134],[17,4993,4995],{"id":4994},"native-masonry-and-layout-fixes-end-hacky-workarounds","Native Masonry and Layout Fixes End Hacky Workarounds",[22,4997,4998,4999,5002,5003,5006,5007,4062,5010,5013],{},"Scott Tolinsky kicks off with the Grid Lines API (",[40,5000,5001],{},"display: grid-lines","), calling it the \"best possible thing\" for Pinterest-style masonry layouts. Unlike CSS columns, which snake vertically, or imperfect grid ",[40,5004,5005],{},"pack-fit"," hacks requiring fixed heights, this fills items left-to-right (or customizable directions) using familiar ",[40,5008,5009],{},"grid-template-columns",[40,5011,5012],{},"gap",". Wes Bos agrees it's dead simple—no new learning curve—and opens creative doors beyond photo grids, like shuffling footer links. Available now in Safari 26.4, behind flags in Chrome\u002FFirefox.",[22,5015,5016,5017,4062,5020,5023],{},"Multi-column CSS gets usable fixes with ",[40,5018,5019],{},"column-wrap",[40,5021,5022],{},"column-height",". Previously, specifying columns forced horizontal overflow; now excess text wraps to new rows. Ideal for unbroken paragraphs (vs. segmented divs in flexbox). Scott notes he avoided multi-column before, but these tweaks make it viable. Sticky positioning now works per-axis (Chrome 148), perfect for horizontal-scroll tables in tournaments or conferences—tables notoriously tough on mobile.",[22,5025,5026],{},"Wes and Scott lament MDN demos' shortcomings, pushing for better examples to showcase these evolutions.",[17,5028,5030],{"id":5029},"html-in-canvas-unlocks-next-gen-accessible-ui-effects","HTML-in-Canvas Unlocks Next-Gen, Accessible UI Effects",[22,5032,5033,5034,5037,5038,5041],{},"Wes geeks out over the experimental HTML-in-Canvas API (Chrome flag), letting you nest regular HTML inside ",[40,5035,5036],{},"\u003Ccanvas>"," and paint it via JS APIs like ",[40,5039,5040],{},"requestDrawing()",". Solves canvas's HTML-drawing limits and accessibility woes—no more custom input code or SVG hacks.",[22,5043,5044],{},"Demos steal the show:",[4383,5046,5047,5050,5053,5056,5059,5066],{},[4107,5048,5049],{},"Pixelated, editable form inputs.",[4107,5051,5052],{},"Magnifying glass distorting live text.",[4107,5054,5055],{},"Frosted glass: mouse \"wipes\" blur from underlying content, random each load.",[4107,5057,5058],{},"Matt Rothenberg's form: glowing focus borders track inputs; submit scan-line stretches\u002Fblurs content off-page.",[4107,5060,5061,5062,5065],{},"Jelly slider: pure ",[40,5063,5064],{},"\u003Cinput>"," with wobbly canvas effects.",[4107,5067,5068],{},"Jake Archibald's CRT curve on editable HTML.",[22,5070,5071],{},"Scott calls it a \"powerhouse,\" preserving DOM interactivity\u002Faccessibility. Wes ties it to unfulfilled Houdini dreams, enabling shaders, warps, and pixel control—like iOS volume sliders pushing content. He plans more demos; both hope it ships despite experimental status.",[22,5073,5074],{},"\"The world has opened up to me,\" Wes says of discovering it. \"You can put most HTML inside of a canvas element and then apply any shaders or whatever things that you want.\"",[17,5076,5078],{"id":5077},"scoped-and-dynamic-styling-boosts-maintainability","Scoped and Dynamic Styling Boosts Maintainability",[22,5080,5081,5082,4062,5085,5088,5089,5092],{},"Name-only container queries (Firefox 149, Chrome\u002FSafari 148\u002F26.4) scope CSS via ",[40,5083,5084],{},"container-name: sidebar",[40,5086,5087],{},"@container sidebar {}","—no size\u002Fstyle queries needed. Scott spotted it via Chris Coyier; Wes praises it over ",[40,5090,5091],{},"@scope","'s clunky feel, combining scoping with queries (style queries incoming). Baked-in, class-free alternative to scoping hacks.",[22,5094,5095,5096,5099],{},"CSS ",[40,5097,5098],{},"random(0, 10, 2)"," generates even numbers between bounds—Wes's favorite for avoiding JS vars, seeded randoms for SSR, or manual card rotations. Safari-only for now.",[22,5101,5102,4062,5105,5108],{},[40,5103,5104],{},"::search-text",[40,5106,5107],{},"::search-text:current"," style browser find-in-page highlights, including the active match. Scott loves theming beyond default yellow; Wes gripes about lazy-loaded sites (e.g., Twitter) not re-highlighting—calls for DOM-change awareness.",[22,5110,5111,5112,5115],{},"Safari axed haptic feedback workarounds (checkbox ",[40,5113,5114],{},"switch"," toggles), enforcing user-gesture rules like popups\u002Faudio. Frustrates Wes\u002FScott, who see native apps abusing it.",[22,5117,5118],{},"Border shapes improve; element-scoped view transitions enable cleaner animations.",[22,5120,5121],{},"\"Every time I need randomness in CSS, I have to go into my view layer... This is a straight-up CSS API,\" Wes explains.",[17,5123,5125],{"id":5124},"trade-offs-hype-vs-practical-power-in-a-tailwind-world","Trade-offs: Hype vs. Practical Power in a Tailwind World",[22,5127,5128],{},"Hosts critique AI obsession and Tailwind dominance sidelining CSS innovation—none of these in Tailwind yet. Scott: \"There's so much cool stuff added to CSS that is super powerful.\" Wes: \"CSS that doesn't get the props that it needs.\" They urge playing with flags, linking syntax.fm\u002F996 for demos\u002Fposts (e.g., WebKit on grid-lines).",[22,5130,5131],{},"\"Can it like get any more simple than that? It is really super cool. That's it. There's nothing to learn here,\" Scott on grid-lines.",[17,5133,4739],{"id":4738},[4383,5135,5136,5142,5145,5156,5163,5169,5179,5182],{},[4107,5137,5138,5139,5141],{},"Use ",[40,5140,5001],{}," today in Safari for effortless masonry—no more column hacks or fixed heights.",[4107,5143,5144],{},"Experiment with HTML-in-canvas (Chrome flag) for canvas effects on live, accessible DOM elements like inputs.",[4107,5146,5147,5148,5151,5152,5155],{},"Scope styles natively with name-only container queries: ",[40,5149,5150],{},"container-name"," + ",[40,5153,5154],{},"@container"," beats class bloat.",[4107,5157,5158,5159,5162],{},"Generate CSS randomness with ",[40,5160,5161],{},"random()"," to skip JS for rotations, avoiding SSR seeding headaches.",[4107,5164,5165,5166,5168],{},"Style ",[40,5167,5107],{}," for branded find-in-page; push sites to handle lazy-load re-highlights.",[4107,5170,5171,5172,5175,5176,5178],{},"Leverage bi-directional ",[40,5173,5174],{},"sticky"," for complex tables; multi-column ",[40,5177,5019],{}," for paragraph flows.",[4107,5180,5181],{},"Check flags in Chrome\u002FFirefox\u002FSafari 26.4+; ignore Tailwind gaps—pure CSS ships faster.",[4107,5183,5184],{},"Build demos like frosted glass or CRT curves to prototype next-gen UIs without accessibility loss.",{"title":38,"searchDepth":57,"depth":57,"links":5186},[5187,5188,5189,5190,5191],{"id":4994,"depth":57,"text":4995},{"id":5029,"depth":57,"text":5030},{"id":5077,"depth":57,"text":5078},{"id":5124,"depth":57,"text":5125},{"id":4738,"depth":57,"text":4739},[322],{"content_references":5194,"triage":5195},[],{"relevance":80,"novelty":80,"quality":86,"actionability":80,"composite":5196,"reasoning":5197},3.25,"Category: Design & Frontend. The article discusses new CSS and HTML APIs that enhance frontend development, addressing practical UI challenges. While it provides some innovative features, it lacks detailed implementation guidance for developers to act on immediately.","\u002Fsummaries\u002F85dd0b7471805afa-10-fresh-css-html-apis-for-smarter-layouts-and-eff-summary","2026-04-15 11:01:38","2026-04-19 01:20:19",{"title":4985,"description":38},{"loc":5198},"85dd0b7471805afa","AI Summaries (evaluation playlist)","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=unqPqGeJMck","summaries\u002F85dd0b7471805afa-10-fresh-css-html-apis-for-smarter-layouts-and-eff-summary",[338,339,340],"Wes Bos and Scott Tolinski unpack new CSS features like native masonry grids, HTML-in-canvas for accessible effects, and scoped queries, solving longstanding UI pain points with simple, powerful APIs.",[],"9R4No6sjuVav_QF9MMSi3Godi3vnbcWZ3-JnfKVZL0g"]