[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"summary-922586b5fe14306a-smart-layout-patterns-with-modern-css-summary":3,"summaries-facets-categories":186,"summary-related-922586b5fe14306a-smart-layout-patterns-with-modern-css-summary":4811},{"id":4,"title":5,"ai":6,"body":13,"categories":145,"created_at":147,"date_modified":147,"description":136,"extension":148,"faq":147,"featured":149,"kicker_label":147,"meta":150,"navigation":165,"path":166,"published_at":167,"question":147,"scraped_at":168,"seo":169,"sitemap":170,"source_id":171,"source_name":172,"source_type":173,"source_url":174,"stem":175,"tags":176,"thumbnail_url":181,"tldr":182,"tweet":183,"unknown_tags":184,"__hash__":185},"summaries\u002Fsummaries\u002F922586b5fe14306a-smart-layout-patterns-with-modern-css-summary.md","Smart Layout Patterns with Modern CSS",{"provider":7,"model":8,"input_tokens":9,"output_tokens":10,"processing_time_ms":11,"cost_usd":12},"openrouter","google\u002Fgemini-3.1-flash-lite",11155,985,5248,0.00426625,{"type":14,"value":15,"toc":135},"minimark",[16,21,25,29,41,45,48,65,69,76,80,117,121],[17,18,20],"h2",{"id":19},"the-shift-from-viewport-centric-to-container-aware-design","The Shift from Viewport-Centric to Container-Aware Design",[22,23,24],"p",{},"Traditional media queries rely on the viewport size, which often leads to brittle layouts when components are reused in different contexts (e.g., a card that works in a main content area but breaks in a sidebar). Container queries solve this by allowing components to query their own parent container's size. This enables \"intrinsic\" design patterns where components adapt based on the space they are actually allocated, rather than the device width.",[17,26,28],{"id":27},"moving-beyond-magic-numbers","Moving Beyond Magic Numbers",[22,30,31,32,36,37,40],{},"One of the primary pain points in CSS layout is the reliance on \"magic numbers\"—hardcoded pixel breakpoints that break when padding, font sizes, or layout structures change. By using container queries combined with ",[33,34,35],"code",{},"calc()"," or relative units like ",[33,38,39],{},"ch"," (character width), developers can create \"content-first\" breakpoints. These breakpoints trigger based on the component's internal needs (e.g., when a column reaches a minimum readable width) rather than arbitrary viewport widths. This ensures that if a component's font size or padding changes, the layout adapts automatically without requiring manual adjustments to global breakpoints.",[17,42,44],{"id":43},"advanced-patterns-container-inception-and-style-queries","Advanced Patterns: Container Inception and Style Queries",[22,46,47],{},"Beyond basic size queries, modern CSS allows for more sophisticated logic:",[49,50,51,59],"ul",{},[52,53,54,58],"li",{},[55,56,57],"strong",{},"Container Inception:"," By nesting containers, components can detect the state of their ancestors. This allows for complex behaviors, such as an image shrinking only when its parent container reaches a specific size, regardless of where that parent lives on the page.",[52,60,61,64],{},[55,62,63],{},"Style Queries:"," These allow developers to change styles based on the value of a custom property (CSS variable) applied to a container. This is a powerful tool for theming and conditional layout logic. For example, a component can change its layout direction (row vs. column) based on a custom property, allowing for highly reusable components that behave differently depending on their context or assigned theme.",[17,66,68],{"id":67},"why-adoption-has-lagged","Why Adoption Has Lagged",[22,70,71,72,75],{},"Despite their power, adoption of container queries remains lower than features like ",[33,73,74],{},":has()",". This is largely because developers have spent nearly two decades perfecting media query workflows. The transition requires a mental shift: instead of asking \"How wide is the screen?\", developers must ask \"How much space does this component have?\" The initial learning curve and the lack of obvious use cases in existing, stable codebases have contributed to this slow uptake, but the benefits for component-based architecture are significant.",[17,77,79],{"id":78},"key-takeaways","Key Takeaways",[49,81,82,88,96,105,111],{},[52,83,84,87],{},[55,85,86],{},"Stop relying on viewport-based media queries"," for component-level layout decisions; use container queries to make components truly portable.",[52,89,90,95],{},[55,91,92,93],{},"Use relative units like ",[33,94,39],{}," for breakpoints to ensure layouts remain readable regardless of font size changes.",[52,97,98,104],{},[55,99,100,101,103],{},"Leverage ",[33,102,35],{}," within container queries"," to account for gaps and padding, creating precise, math-driven breakpoints that don't break when the parent layout changes.",[52,106,107,110],{},[55,108,109],{},"Use container naming"," to target specific parent elements, enabling complex \"container inception\" patterns where components react to their specific context.",[52,112,113,116],{},[55,114,115],{},"Adopt style queries"," for theming and conditional logic, allowing components to change appearance based on custom property values rather than just adding modifier classes.",[17,118,120],{"id":119},"notable-quotes","Notable Quotes",[49,122,123,126,129,132],{},[52,124,125],{},"\"The browser knows with a media query, it's looking at the viewport. With a container query, it doesn't know what the containers could be. Anything could be a container. We have to define them.\"",[52,127,128],{},"\"I had a realization that we have been using container queries wrong... they're not the same feature at the end of the day, the goal is similar. But it's a really different feature with different capabilities.\"",[52,130,131],{},"\"This allows us to create content-first breakpoints... it actually sees the font size that is of that container. And that might not seem like a big deal. But this allows us to create content-first breakpoints.\"",[52,133,134],{},"\"I'm conditionally applying this layout change based on where this item lives as well as conditions within that specific item that are coming into play.\"",{"title":136,"searchDepth":137,"depth":137,"links":138},"",2,[139,140,141,142,143,144],{"id":19,"depth":137,"text":20},{"id":27,"depth":137,"text":28},{"id":43,"depth":137,"text":44},{"id":67,"depth":137,"text":68},{"id":78,"depth":137,"text":79},{"id":119,"depth":137,"text":120},[146],"Design & Frontend",null,"md",false,{"content_references":151,"triage":160},[152,157],{"type":153,"title":154,"url":155,"context":156},"tool","webstatus.dev","https:\u002F\u002Fwebstatus.dev\u002F","mentioned",{"type":153,"title":158,"url":159,"context":156},"CodePen","https:\u002F\u002Fcodepen.io\u002F",{"relevance":161,"novelty":162,"quality":161,"actionability":161,"composite":163,"reasoning":164},4,3,3.8,"Category: Design & Frontend. The article discusses modern CSS techniques that directly address the pain point of brittle layouts in responsive design, which is relevant for developers building AI-powered products with a focus on UI\u002FUX. It provides actionable insights on using container queries and style queries to create adaptable layouts, making it practical for the audience.",true,"\u002Fsummaries\u002F922586b5fe14306a-smart-layout-patterns-with-modern-css-summary","2026-06-11 19:20:25","2026-06-12 12:56:37",{"title":5,"description":136},{"loc":166},"922586b5fe14306a","Smashing Magazine","video","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=4IBXIFe2CKA","summaries\u002F922586b5fe14306a-smart-layout-patterns-with-modern-css-summary",[177,178,179,180],"frontend","css","web-development","responsive-design","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F4IBXIFe2CKA\u002Fhqdefault.jpg","Modern CSS container queries and style queries offer a more robust, component-aware alternative to traditional media queries, enabling truly intrinsic and responsive layouts that adapt to their parent containers rather than just the viewport.","This is a conference talk where Kevin Powell explains why developers have been slow to adopt container queries: they’ve been trying to use them as direct replacements for media queries rather than as tools for building intrinsic, component-based layouts. He demonstrates how to use container queries with `calc()` to eliminate \"magic number\" breakpoints in responsive grids.",[178,179,180],"ecrU-Il5n9b96Dhol67JQlSW5bEYg5of-9jeVTtKdUk",[187,190,193,196,199,202,204,206,208,210,212,214,216,218,221,223,225,227,229,231,233,235,237,239,241,243,245,247,249,252,254,256,258,260,262,265,267,269,271,274,276,278,280,282,284,286,288,290,292,294,296,299,301,303,305,307,309,311,313,315,317,319,321,323,325,327,329,331,333,335,337,339,341,343,345,347,349,351,353,355,357,359,361,363,365,367,369,371,373,375,377,379,381,383,385,387,389,391,393,395,397,399,401,403,405,407,409,411,413,415,417,419,421,423,425,427,429,431,433,435,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465,467,469,471,473,475,477,479,481,483,485,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653,655,657,659,661,663,665,667,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,3929,3931,3933,3935,3937,3939,3941,3943,3945,3947,3949,3951,3953,3955,3957,3959,3961,3963,3965,3967,3969,3971,3973,3975,3977,3979,3981,3983,3985,3987,3989,3991,3993,3995,3997,3999,4001,4003,4005,4007,4009,4011,4013,4015,4017,4019,4021,4023,4025,4027,4029,4031,4033,4035,4037,4039,4041,4043,4045,4047,4049,4051,4053,4055,4057,4059,4061,4063,4065,4067,4069,4071,4073,4075,4077,4079,4081,4083,4085,4087,4089,4091,4093,4095,4097,4099,4101,4103,4105,4107,4109,4111,4113,4115,4117,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143,4145,4147,4149,4151,4153,4155,4157,4159,4161,4163,4165,4167,4169,4171,4173,4175,4177,4179,4181,4183,4185,4187,4189,4191,4193,4195,4197,4199,4201,4203,4205,4207,4209,4211,4213,4215,4217,4219,4221,4223,4225,4227,4229,4231,4233,4235,4237,4239,4241,4243,4245,4247,4249,4251,4253,4255,4257,4259,4261,4263,4265,4267,4269,4271,4273,4275,4277,4279,4281,4283,4285,4287,4289,4291,4293,4295,4297,4299,4301,4303,4305,4307,4309,4311,4313,4315,4317,4319,4321,4323,4325,4327,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347,4349,4351,4353,4355,4357,4359,4361,4363,4365,4367,4369,4371,4373,4375,4377,4379,4381,4383,4385,4387,4389,4391,4393,4395,4397,4399,4401,4403,4405,4407,4409,4411,4413,4415,4417,4419,4421,4423,4425,4427,4429,4431,4433,4435,4437,4439,4441,4443,4445,4447,4449,4451,4453,4455,4457,4459,4461,4463,4465,4467,4469,4471,4473,4475,4477,4479,4481,4483,4485,4487,4489,4491,4493,4495,4497,4499,4501,4503,4505,4507,4509,4511,4513,4515,4517,4519,4521,4523,4525,4527,4529,4531,4533,4535,4537,4539,4541,4543,4545,4547,4549,4551,4553,4555,4557,4559,4561,4563,4565,4567,4569,4571,4573,4575,4577,4579,4581,4583,4585,4587,4589,4591,4593,4595,4597,4599,4601,4603,4605,4607,4609,4611,4613,4615,4617,4619,4621,4623,4625,4627,4629,4631,4633,4635,4637,4639,4641,4643,4645,4647,4649,4651,4653,4655,4657,4659,4661,4663,4665,4667,4669,4671,4673,4675,4677,4679,4681,4683,4685,4687,4689,4691,4693,4695,4697,4699,4701,4703,4705,4707,4709,4711,4713,4715,4717,4719,4721,4723,4725,4727,4729,4731,4733,4735,4737,4739,4741,4743,4745,4747,4749,4751,4753,4755,4757,4759,4761,4763,4765,4767,4769,4771,4773,4775,4777,4779,4781,4783,4785,4787,4789,4791,4793,4795,4797,4799,4801,4803,4805,4807,4809],{"categories":188},[189],"Developer Productivity",{"categories":191},[192],"Business & SaaS",{"categories":194},[195],"AI & LLMs",{"categories":197},[198],"AI Automation",{"categories":200},[201],"Product Strategy",{"categories":203},[195],{"categories":205},[189],{"categories":207},[195],{"categories":209},[192],{"categories":211},[],{"categories":213},[195],{"categories":215},[198],{"categories":217},[],{"categories":219},[220],"AI News & Trends",{"categories":222},[198],{"categories":224},[198],{"categories":226},[220],{"categories":228},[198],{"categories":230},[198],{"categories":232},[198],{"categories":234},[195],{"categories":236},[195],{"categories":238},[195],{"categories":240},[220],{"categories":242},[195],{"categories":244},[195],{"categories":246},[],{"categories":248},[146],{"categories":250},[251],"Data Science & Visualization",{"categories":253},[220],{"categories":255},[195],{"categories":257},[],{"categories":259},[195],{"categories":261},[198],{"categories":263},[264],"Software Engineering",{"categories":266},[195],{"categories":268},[198],{"categories":270},[195],{"categories":272},[273],"Marketing & Growth",{"categories":275},[146],{"categories":277},[195],{"categories":279},[198],{"categories":281},[],{"categories":283},[],{"categories":285},[146],{"categories":287},[198],{"categories":289},[189],{"categories":291},[264],{"categories":293},[146],{"categories":295},[195],{"categories":297},[298],"DevOps & Cloud",{"categories":300},[198],{"categories":302},[220],{"categories":304},[195],{"categories":306},[],{"categories":308},[],{"categories":310},[198],{"categories":312},[264],{"categories":314},[],{"categories":316},[192],{"categories":318},[],{"categories":320},[],{"categories":322},[195],{"categories":324},[198],{"categories":326},[195],{"categories":328},[195],{"categories":330},[198],{"categories":332},[195],{"categories":334},[195],{"categories":336},[195],{"categories":338},[],{"categories":340},[264],{"categories":342},[],{"categories":344},[],{"categories":346},[264],{"categories":348},[],{"categories":350},[264],{"categories":352},[195],{"categories":354},[195],{"categories":356},[273],{"categories":358},[146],{"categories":360},[146],{"categories":362},[195],{"categories":364},[264],{"categories":366},[198],{"categories":368},[264],{"categories":370},[195],{"categories":372},[195],{"categories":374},[198],{"categories":376},[198],{"categories":378},[251],{"categories":380},[220],{"categories":382},[198],{"categories":384},[198],{"categories":386},[273],{"categories":388},[198],{"categories":390},[201],{"categories":392},[264],{"categories":394},[],{"categories":396},[198],{"categories":398},[],{"categories":400},[198],{"categories":402},[195],{"categories":404},[264],{"categories":406},[298],{"categories":408},[146],{"categories":410},[195],{"categories":412},[],{"categories":414},[264],{"categories":416},[195],{"categories":418},[],{"categories":420},[198],{"categories":422},[],{"categories":424},[195],{"categories":426},[],{"categories":428},[189],{"categories":430},[264],{"categories":432},[192],{"categories":434},[195],{"categories":436},[195],{"categories":438},[220],{"categories":440},[195],{"categories":442},[],{"categories":444},[195],{"categories":446},[],{"categories":448},[264],{"categories":450},[251],{"categories":452},[],{"categories":454},[195],{"categories":456},[146],{"categories":458},[],{"categories":460},[146],{"categories":462},[198],{"categories":464},[],{"categories":466},[195],{"categories":468},[195],{"categories":470},[198],{"categories":472},[220],{"categories":474},[192],{"categories":476},[195],{"categories":478},[],{"categories":480},[264],{"categories":482},[198],{"categories":484},[195],{"categories":486},[201],{"categories":488},[],{"categories":490},[195],{"categories":492},[201],{"categories":494},[198],{"categories":496},[195],{"categories":498},[198],{"categories":500},[],{"categories":502},[251],{"categories":504},[195],{"categories":506},[],{"categories":508},[189],{"categories":510},[195],{"categories":512},[192],{"categories":514},[195],{"categories":516},[198],{"categories":518},[195],{"categories":520},[195],{"categories":522},[264],{"categories":524},[195],{"categories":526},[],{"categories":528},[],{"categories":530},[195],{"categories":532},[195],{"categories":534},[],{"categories":536},[146],{"categories":538},[],{"categories":540},[195],{"categories":542},[],{"categories":544},[198],{"categories":546},[195],{"categories":548},[146],{"categories":550},[],{"categories":552},[195],{"categories":554},[195],{"categories":556},[192],{"categories":558},[198],{"categories":560},[195],{"categories":562},[195],{"categories":564},[146],{"categories":566},[198],{"categories":568},[],{"categories":570},[198],{"categories":572},[],{"categories":574},[220],{"categories":576},[],{"categories":578},[195],{"categories":580},[192,273],{"categories":582},[],{"categories":584},[195],{"categories":586},[198],{"categories":588},[],{"categories":590},[],{"categories":592},[146],{"categories":594},[195],{"categories":596},[],{"categories":598},[195],{"categories":600},[298],{"categories":602},[],{"categories":604},[220],{"categories":606},[146],{"categories":608},[],{"categories":610},[220],{"categories":612},[195],{"categories":614},[198],{"categories":616},[220],{"categories":618},[195],{"categories":620},[273],{"categories":622},[],{"categories":624},[192],{"categories":626},[264],{"categories":628},[195],{"categories":630},[198],{"categories":632},[],{"categories":634},[195,298],{"categories":636},[195],{"categories":638},[195],{"categories":640},[195],{"categories":642},[198],{"categories":644},[195,264],{"categories":646},[251],{"categories":648},[195],{"categories":650},[264],{"categories":652},[273],{"categories":654},[198],{"categories":656},[195],{"categories":658},[198],{"categories":660},[],{"categories":662},[198],{"categories":664},[195],{"categories":666},[195,192],{"categories":668},[192],{"categories":670},[],{"categories":672},[146],{"categories":674},[146],{"categories":676},[],{"categories":678},[],{"categories":680},[220],{"categories":682},[],{"categories":684},[189],{"categories":686},[195],{"categories":688},[264],{"categories":690},[195],{"categories":692},[146],{"categories":694},[198],{"categories":696},[264],{"categories":698},[220],{"categories":700},[146],{"categories":702},[],{"categories":704},[195],{"categories":706},[195],{"categories":708},[195],{"categories":710},[195],{"categories":712},[195],{"categories":714},[195],{"categories":716},[220],{"categories":718},[189],{"categories":720},[195],{"categories":722},[198],{"categories":724},[298],{"categories":726},[146],{"categories":728},[195],{"categories":730},[198],{"categories":732},[],{"categories":734},[],{"categories":736},[146],{"categories":738},[220],{"categories":740},[251],{"categories":742},[],{"categories":744},[195],{"categories":746},[195],{"categories":748},[192],{"categories":750},[195],{"categories":752},[195],{"categories":754},[195],{"categories":756},[220],{"categories":758},[146],{"categories":760},[],{"categories":762},[198],{"categories":764},[264],{"categories":766},[],{"categories":768},[195],{"categories":770},[195],{"categories":772},[198],{"categories":774},[264],{"categories":776},[195],{"categories":778},[],{"categories":780},[],{"categories":782},[195],{"categories":784},[],{"categories":786},[201],{"categories":788},[192],{"categories":790},[198],{"categories":792},[198],{"categories":794},[],{"categories":796},[189],{"categories":798},[195],{"categories":800},[192],{"categories":802},[220],{"categories":804},[189],{"categories":806},[],{"categories":808},[195],{"categories":810},[],{"categories":812},[],{"categories":814},[220],{"categories":816},[220],{"categories":818},[],{"categories":820},[146],{"categories":822},[264],{"categories":824},[],{"categories":826},[192],{"categories":828},[],{"categories":830},[],{"categories":832},[189],{"categories":834},[251],{"categories":836},[],{"categories":838},[273],{"categories":840},[198],{"categories":842},[192],{"categories":844},[198],{"categories":846},[264],{"categories":848},[],{"categories":850},[201],{"categories":852},[146],{"categories":854},[264],{"categories":856},[195],{"categories":858},[198],{"categories":860},[192],{"categories":862},[195],{"categories":864},[],{"categories":866},[],{"categories":868},[264],{"categories":870},[251],{"categories":872},[201],{"categories":874},[195],{"categories":876},[198],{"categories":878},[195],{"categories":880},[],{"categories":882},[220],{"categories":884},[298],{"categories":886},[],{"categories":888},[198],{"categories":890},[],{"categories":892},[189],{"categories":894},[],{"categories":896},[195],{"categories":898},[195],{"categories":900},[146],{"categories":902},[273],{"categories":904},[264],{"categories":906},[198],{"categories":908},[],{"categories":910},[264],{"categories":912},[189],{"categories":914},[],{"categories":916},[220],{"categories":918},[195,298],{"categories":920},[195],{"categories":922},[220],{"categories":924},[195],{"categories":926},[195],{"categories":928},[192],{"categories":930},[195],{"categories":932},[],{"categories":934},[195],{"categories":936},[192],{"categories":938},[195],{"categories":940},[],{"categories":942},[198],{"categories":944},[264],{"categories":946},[146],{"categories":948},[220],{"categories":950},[251],{"categories":952},[195],{"categories":954},[189],{"categories":956},[195],{"categories":958},[198],{"categories":960},[264],{"categories":962},[],{"categories":964},[],{"categories":966},[198],{"categories":968},[201],{"categories":970},[],{"categories":972},[195],{"categories":974},[],{"categories":976},[146],{"categories":978},[198],{"categories":980},[264],{"categories":982},[146],{"categories":984},[195],{"categories":986},[146],{"categories":988},[],{"categories":990},[],{"categories":992},[220],{"categories":994},[198],{"categories":996},[198],{"categories":998},[195],{"categories":1000},[195],{"categories":1002},[195],{"categories":1004},[192],{"categories":1006},[195],{"categories":1008},[],{"categories":1010},[264],{"categories":1012},[264],{"categories":1014},[192],{"categories":1016},[],{"categories":1018},[195],{"categories":1020},[195],{"categories":1022},[198],{"categories":1024},[189],{"categories":1026},[192],{"categories":1028},[220],{"categories":1030},[198],{"categories":1032},[273],{"categories":1034},[195],{"categories":1036},[198],{"categories":1038},[],{"categories":1040},[146],{"categories":1042},[],{"categories":1044},[195],{"categories":1046},[195],{"categories":1048},[],{"categories":1050},[192],{"categories":1052},[198],{"categories":1054},[],{"categories":1056},[195],{"categories":1058},[298],{"categories":1060},[251],{"categories":1062},[264],{"categories":1064},[273],{"categories":1066},[195],{"categories":1068},[146],{"categories":1070},[195],{"categories":1072},[264],{"categories":1074},[198],{"categories":1076},[],{"categories":1078},[],{"categories":1080},[198],{"categories":1082},[189],{"categories":1084},[198],{"categories":1086},[201],{"categories":1088},[192],{"categories":1090},[],{"categories":1092},[195],{"categories":1094},[201],{"categories":1096},[195],{"categories":1098},[195],{"categories":1100},[195],{"categories":1102},[195],{"categories":1104},[273],{"categories":1106},[195],{"categories":1108},[195],{"categories":1110},[195],{"categories":1112},[146],{"categories":1114},[198],{"categories":1116},[],{"categories":1118},[],{"categories":1120},[298],{"categories":1122},[264],{"categories":1124},[],{"categories":1126},[198],{"categories":1128},[195],{"categories":1130},[146,195],{"categories":1132},[189],{"categories":1134},[],{"categories":1136},[195],{"categories":1138},[189],{"categories":1140},[146],{"categories":1142},[198],{"categories":1144},[264],{"categories":1146},[],{"categories":1148},[195],{"categories":1150},[],{"categories":1152},[],{"categories":1154},[195],{"categories":1156},[189],{"categories":1158},[195],{"categories":1160},[],{"categories":1162},[198],{"categories":1164},[201],{"categories":1166},[195],{"categories":1168},[195],{"categories":1170},[195],{"categories":1172},[146],{"categories":1174},[198],{"categories":1176},[298],{"categories":1178},[146],{"categories":1180},[192],{"categories":1182},[198],{"categories":1184},[195],{"categories":1186},[195],{"categories":1188},[195],{"categories":1190},[198],{"categories":1192},[264],{"categories":1194},[195],{"categories":1196},[201],{"categories":1198},[],{"categories":1200},[220],{"categories":1202},[],{"categories":1204},[201],{"categories":1206},[198],{"categories":1208},[146],{"categories":1210},[195],{"categories":1212},[195],{"categories":1214},[198],{"categories":1216},[264],{"categories":1218},[146],{"categories":1220},[198],{"categories":1222},[220],{"categories":1224},[],{"categories":1226},[195],{"categories":1228},[],{"categories":1230},[195],{"categories":1232},[195],{"categories":1234},[146],{"categories":1236},[195],{"categories":1238},[189],{"categories":1240},[220],{"categories":1242},[195],{"categories":1244},[195],{"categories":1246},[273],{"categories":1248},[195],{"categories":1250},[195],{"categories":1252},[198],{"categories":1254},[198],{"categories":1256},[195],{"categories":1258},[198],{"categories":1260},[198],{"categories":1262},[195],{"categories":1264},[195],{"categories":1266},[198],{"categories":1268},[146],{"categories":1270},[195],{"categories":1272},[195],{"categories":1274},[],{"categories":1276},[],{"categories":1278},[264],{"categories":1280},[],{"categories":1282},[189],{"categories":1284},[298],{"categories":1286},[195],{"categories":1288},[],{"categories":1290},[189],{"categories":1292},[192],{"categories":1294},[195],{"categories":1296},[273],{"categories":1298},[],{"categories":1300},[192],{"categories":1302},[],{"categories":1304},[195],{"categories":1306},[264],{"categories":1308},[],{"categories":1310},[],{"categories":1312},[],{"categories":1314},[],{"categories":1316},[195],{"categories":1318},[198],{"categories":1320},[298],{"categories":1322},[195],{"categories":1324},[189],{"categories":1326},[264],{"categories":1328},[195],{"categories":1330},[195],{"categories":1332},[264],{"categories":1334},[201],{"categories":1336},[195],{"categories":1338},[273],{"categories":1340},[192],{"categories":1342},[195],{"categories":1344},[195],{"categories":1346},[195],{"categories":1348},[195],{"categories":1350},[195,189],{"categories":1352},[264],{"categories":1354},[264],{"categories":1356},[146],{"categories":1358},[198],{"categories":1360},[195],{"categories":1362},[195],{"categories":1364},[],{"categories":1366},[],{"categories":1368},[195],{"categories":1370},[],{"categories":1372},[264],{"categories":1374},[251],{"categories":1376},[220],{"categories":1378},[146],{"categories":1380},[195],{"categories":1382},[264],{"categories":1384},[],{"categories":1386},[195],{"categories":1388},[195],{"categories":1390},[],{"categories":1392},[198],{"categories":1394},[195],{"categories":1396},[195],{"categories":1398},[],{"categories":1400},[198],{"categories":1402},[195],{"categories":1404},[192],{"categories":1406},[],{"categories":1408},[189],{"categories":1410},[195],{"categories":1412},[189],{"categories":1414},[195],{"categories":1416},[264],{"categories":1418},[273],{"categories":1420},[198],{"categories":1422},[198],{"categories":1424},[195,146],{"categories":1426},[220],{"categories":1428},[195],{"categories":1430},[146],{"categories":1432},[],{"categories":1434},[264],{"categories":1436},[298],{"categories":1438},[146],{"categories":1440},[264],{"categories":1442},[195],{"categories":1444},[195],{"categories":1446},[198],{"categories":1448},[],{"categories":1450},[],{"categories":1452},[],{"categories":1454},[],{"categories":1456},[264],{"categories":1458},[195],{"categories":1460},[198],{"categories":1462},[198],{"categories":1464},[298],{"categories":1466},[195],{"categories":1468},[195],{"categories":1470},[195],{"categories":1472},[198],{"categories":1474},[195],{"categories":1476},[195],{"categories":1478},[],{"categories":1480},[146],{"categories":1482},[264],{"categories":1484},[],{"categories":1486},[],{"categories":1488},[198],{"categories":1490},[],{"categories":1492},[],{"categories":1494},[273],{"categories":1496},[273],{"categories":1498},[198],{"categories":1500},[264],{"categories":1502},[],{"categories":1504},[195],{"categories":1506},[195],{"categories":1508},[264],{"categories":1510},[146],{"categories":1512},[146],{"categories":1514},[195],{"categories":1516},[198],{"categories":1518},[189],{"categories":1520},[195],{"categories":1522},[195],{"categories":1524},[146],{"categories":1526},[146],{"categories":1528},[198],{"categories":1530},[198],{"categories":1532},[195],{"categories":1534},[],{"categories":1536},[195],{"categories":1538},[],{"categories":1540},[195],{"categories":1542},[198],{"categories":1544},[220],{"categories":1546},[264],{"categories":1548},[195],{"categories":1550},[264],{"categories":1552},[189],{"categories":1554},[195],{"categories":1556},[],{"categories":1558},[198],{"categories":1560},[198],{"categories":1562},[],{"categories":1564},[195],{"categories":1566},[189],{"categories":1568},[195],{"categories":1570},[189],{"categories":1572},[189],{"categories":1574},[],{"categories":1576},[264],{"categories":1578},[],{"categories":1580},[198],{"categories":1582},[220],{"categories":1584},[195],{"categories":1586},[198],{"categories":1588},[195],{"categories":1590},[198],{"categories":1592},[195],{"categories":1594},[220],{"categories":1596},[251],{"categories":1598},[195],{"categories":1600},[201],{"categories":1602},[220],{"categories":1604},[146],{"categories":1606},[],{"categories":1608},[],{"categories":1610},[195],{"categories":1612},[220],{"categories":1614},[],{"categories":1616},[],{"categories":1618},[],{"categories":1620},[195],{"categories":1622},[],{"categories":1624},[264],{"categories":1626},[264],{"categories":1628},[251],{"categories":1630},[],{"categories":1632},[195],{"categories":1634},[195],{"categories":1636},[251],{"categories":1638},[264],{"categories":1640},[],{"categories":1642},[],{"categories":1644},[198],{"categories":1646},[198],{"categories":1648},[264],{"categories":1650},[198],{"categories":1652},[220],{"categories":1654},[220],{"categories":1656},[198],{"categories":1658},[198],{"categories":1660},[189],{"categories":1662},[195,298],{"categories":1664},[],{"categories":1666},[146],{"categories":1668},[264],{"categories":1670},[189],{"categories":1672},[195],{"categories":1674},[198],{"categories":1676},[146],{"categories":1678},[],{"categories":1680},[198],{"categories":1682},[198],{"categories":1684},[198],{"categories":1686},[195],{"categories":1688},[273],{"categories":1690},[195],{"categories":1692},[264],{"categories":1694},[146],{"categories":1696},[195],{"categories":1698},[],{"categories":1700},[198],{"categories":1702},[146],{"categories":1704},[195],{"categories":1706},[198],{"categories":1708},[198],{"categories":1710},[198],{"categories":1712},[273],{"categories":1714},[251],{"categories":1716},[195],{"categories":1718},[198],{"categories":1720},[195],{"categories":1722},[],{"categories":1724},[273],{"categories":1726},[220],{"categories":1728},[264],{"categories":1730},[195],{"categories":1732},[198],{"categories":1734},[],{"categories":1736},[],{"categories":1738},[195],{"categories":1740},[198],{"categories":1742},[195],{"categories":1744},[220],{"categories":1746},[195],{"categories":1748},[198],{"categories":1750},[198],{"categories":1752},[],{"categories":1754},[195],{"categories":1756},[],{"categories":1758},[],{"categories":1760},[195],{"categories":1762},[198],{"categories":1764},[],{"categories":1766},[],{"categories":1768},[251],{"categories":1770},[195],{"categories":1772},[251],{"categories":1774},[220],{"categories":1776},[195],{"categories":1778},[195],{"categories":1780},[198],{"categories":1782},[195],{"categories":1784},[198],{"categories":1786},[],{"categories":1788},[],{"categories":1790},[195],{"categories":1792},[298],{"categories":1794},[195],{"categories":1796},[],{"categories":1798},[],{"categories":1800},[189],{"categories":1802},[],{"categories":1804},[],{"categories":1806},[195],{"categories":1808},[],{"categories":1810},[],{"categories":1812},[264],{"categories":1814},[220],{"categories":1816},[273],{"categories":1818},[192],{"categories":1820},[195],{"categories":1822},[195],{"categories":1824},[192],{"categories":1826},[],{"categories":1828},[146],{"categories":1830},[198],{"categories":1832},[192],{"categories":1834},[195],{"categories":1836},[195],{"categories":1838},[189],{"categories":1840},[195],{"categories":1842},[],{"categories":1844},[189],{"categories":1846},[195],{"categories":1848},[273],{"categories":1850},[198],{"categories":1852},[220],{"categories":1854},[195],{"categories":1856},[192],{"categories":1858},[195],{"categories":1860},[195],{"categories":1862},[198],{"categories":1864},[],{"categories":1866},[195],{"categories":1868},[264],{"categories":1870},[189],{"categories":1872},[195],{"categories":1874},[195],{"categories":1876},[],{"categories":1878},[220],{"categories":1880},[195],{"categories":1882},[195],{"categories":1884},[],{"categories":1886},[192],{"categories":1888},[192],{"categories":1890},[195],{"categories":1892},[201],{"categories":1894},[195],{"categories":1896},[195],{"categories":1898},[],{"categories":1900},[264],{"categories":1902},[195],{"categories":1904},[],{"categories":1906},[],{"categories":1908},[195],{"categories":1910},[220],{"categories":1912},[],{"categories":1914},[298],{"categories":1916},[195],{"categories":1918},[195],{"categories":1920},[],{"categories":1922},[195],{"categories":1924},[264],{"categories":1926},[195],{"categories":1928},[195],{"categories":1930},[195,298],{"categories":1932},[195],{"categories":1934},[195],{"categories":1936},[146],{"categories":1938},[198],{"categories":1940},[],{"categories":1942},[198],{"categories":1944},[198],{"categories":1946},[195],{"categories":1948},[195],{"categories":1950},[195],{"categories":1952},[195],{"categories":1954},[189],{"categories":1956},[251],{"categories":1958},[189],{"categories":1960},[264],{"categories":1962},[146],{"categories":1964},[198],{"categories":1966},[195],{"categories":1968},[],{"categories":1970},[195],{"categories":1972},[220],{"categories":1974},[195],{"categories":1976},[198],{"categories":1978},[195],{"categories":1980},[195],{"categories":1982},[192],{"categories":1984},[],{"categories":1986},[298],{"categories":1988},[146],{"categories":1990},[146],{"categories":1992},[264],{"categories":1994},[198],{"categories":1996},[195],{"categories":1998},[192],{"categories":2000},[220],{"categories":2002},[146],{"categories":2004},[198],{"categories":2006},[195],{"categories":2008},[],{"categories":2010},[195],{"categories":2012},[195],{"categories":2014},[],{"categories":2016},[],{"categories":2018},[195],{"categories":2020},[195],{"categories":2022},[195],{"categories":2024},[195],{"categories":2026},[198],{"categories":2028},[195],{"categories":2030},[195],{"categories":2032},[],{"categories":2034},[251],{"categories":2036},[195],{"categories":2038},[198],{"categories":2040},[],{"categories":2042},[],{"categories":2044},[195],{"categories":2046},[195],{"categories":2048},[195],{"categories":2050},[220],{"categories":2052},[],{"categories":2054},[146],{"categories":2056},[195],{"categories":2058},[298],{"categories":2060},[220],{"categories":2062},[264],{"categories":2064},[264],{"categories":2066},[220],{"categories":2068},[220],{"categories":2070},[298],{"categories":2072},[],{"categories":2074},[220],{"categories":2076},[195],{"categories":2078},[189],{"categories":2080},[195],{"categories":2082},[220],{"categories":2084},[],{"categories":2086},[195],{"categories":2088},[264],{"categories":2090},[251],{"categories":2092},[195],{"categories":2094},[220],{"categories":2096},[195],{"categories":2098},[264],{"categories":2100},[198],{"categories":2102},[220],{"categories":2104},[198],{"categories":2106},[298],{"categories":2108},[198],{"categories":2110},[195],{"categories":2112},[195],{"categories":2114},[195],{"categories":2116},[],{"categories":2118},[192],{"categories":2120},[],{"categories":2122},[],{"categories":2124},[195],{"categories":2126},[198],{"categories":2128},[195],{"categories":2130},[195],{"categories":2132},[195],{"categories":2134},[195],{"categories":2136},[],{"categories":2138},[251],{"categories":2140},[189],{"categories":2142},[198],{"categories":2144},[146],{"categories":2146},[],{"categories":2148},[195],{"categories":2150},[264],{"categories":2152},[195],{"categories":2154},[298],{"categories":2156},[298],{"categories":2158},[],{"categories":2160},[198],{"categories":2162},[220],{"categories":2164},[220],{"categories":2166},[195],{"categories":2168},[198],{"categories":2170},[],{"categories":2172},[146],{"categories":2174},[195],{"categories":2176},[195],{"categories":2178},[],{"categories":2180},[195],{"categories":2182},[],{"categories":2184},[195],{"categories":2186},[264],{"categories":2188},[298],{"categories":2190},[195],{"categories":2192},[264],{"categories":2194},[192],{"categories":2196},[195],{"categories":2198},[],{"categories":2200},[198],{"categories":2202},[189],{"categories":2204},[189],{"categories":2206},[],{"categories":2208},[195],{"categories":2210},[195],{"categories":2212},[195],{"categories":2214},[264],{"categories":2216},[146],{"categories":2218},[195],{"categories":2220},[198],{"categories":2222},[],{"categories":2224},[195],{"categories":2226},[195],{"categories":2228},[198],{"categories":2230},[],{"categories":2232},[198],{"categories":2234},[195],{"categories":2236},[198],{"categories":2238},[198],{"categories":2240},[264],{"categories":2242},[],{"categories":2244},[195],{"categories":2246},[198],{"categories":2248},[192],{"categories":2250},[195],{"categories":2252},[],{"categories":2254},[195],{"categories":2256},[],{"categories":2258},[195],{"categories":2260},[195],{"categories":2262},[],{"categories":2264},[195],{"categories":2266},[195],{"categories":2268},[220],{"categories":2270},[195],{"categories":2272},[195],{"categories":2274},[189],{"categories":2276},[195],{"categories":2278},[251],{"categories":2280},[220],{"categories":2282},[198],{"categories":2284},[],{"categories":2286},[195],{"categories":2288},[146],{"categories":2290},[273],{"categories":2292},[195],{"categories":2294},[198],{"categories":2296},[],{"categories":2298},[],{"categories":2300},[],{"categories":2302},[189],{"categories":2304},[220],{"categories":2306},[198],{"categories":2308},[195],{"categories":2310},[195],{"categories":2312},[195],{"categories":2314},[146],{"categories":2316},[198],{"categories":2318},[],{"categories":2320},[198],{"categories":2322},[198],{"categories":2324},[],{"categories":2326},[195],{"categories":2328},[198],{"categories":2330},[195],{"categories":2332},[],{"categories":2334},[195],{"categories":2336},[195],{"categories":2338},[220],{"categories":2340},[146],{"categories":2342},[198],{"categories":2344},[146],{"categories":2346},[198],{"categories":2348},[192],{"categories":2350},[],{"categories":2352},[],{"categories":2354},[195],{"categories":2356},[189],{"categories":2358},[220],{"categories":2360},[],{"categories":2362},[146],{"categories":2364},[],{"categories":2366},[264],{"categories":2368},[264],{"categories":2370},[146],{"categories":2372},[264],{"categories":2374},[195],{"categories":2376},[],{"categories":2378},[195],{"categories":2380},[195],{"categories":2382},[],{"categories":2384},[273],{"categories":2386},[195],{"categories":2388},[298],{"categories":2390},[264],{"categories":2392},[],{"categories":2394},[198],{"categories":2396},[195],{"categories":2398},[189],{"categories":2400},[198],{"categories":2402},[198],{"categories":2404},[195],{"categories":2406},[195],{"categories":2408},[],{"categories":2410},[189],{"categories":2412},[195],{"categories":2414},[192],{"categories":2416},[264],{"categories":2418},[146],{"categories":2420},[],{"categories":2422},[],{"categories":2424},[],{"categories":2426},[198],{"categories":2428},[264],{"categories":2430},[146],{"categories":2432},[220],{"categories":2434},[195],{"categories":2436},[220],{"categories":2438},[198],{"categories":2440},[146],{"categories":2442},[195],{"categories":2444},[],{"categories":2446},[195],{"categories":2448},[146],{"categories":2450},[220],{"categories":2452},[192],{"categories":2454},[264],{"categories":2456},[195],{"categories":2458},[220],{"categories":2460},[273],{"categories":2462},[],{"categories":2464},[],{"categories":2466},[251],{"categories":2468},[195,264],{"categories":2470},[220],{"categories":2472},[195],{"categories":2474},[195],{"categories":2476},[198],{"categories":2478},[195],{"categories":2480},[198],{"categories":2482},[195],{"categories":2484},[195],{"categories":2486},[],{"categories":2488},[264],{"categories":2490},[195],{"categories":2492},[251],{"categories":2494},[198],{"categories":2496},[273],{"categories":2498},[298],{"categories":2500},[],{"categories":2502},[195],{"categories":2504},[198],{"categories":2506},[189],{"categories":2508},[198],{"categories":2510},[198],{"categories":2512},[201],{"categories":2514},[264],{"categories":2516},[195],{"categories":2518},[195],{"categories":2520},[],{"categories":2522},[],{"categories":2524},[],{"categories":2526},[298],{"categories":2528},[195],{"categories":2530},[220],{"categories":2532},[195],{"categories":2534},[195],{"categories":2536},[195],{"categories":2538},[],{"categories":2540},[251],{"categories":2542},[192],{"categories":2544},[198],{"categories":2546},[],{"categories":2548},[195],{"categories":2550},[198],{"categories":2552},[195],{"categories":2554},[298],{"categories":2556},[],{"categories":2558},[146],{"categories":2560},[146],{"categories":2562},[],{"categories":2564},[264],{"categories":2566},[195],{"categories":2568},[146],{"categories":2570},[195],{"categories":2572},[192],{"categories":2574},[],{"categories":2576},[220],{"categories":2578},[195],{"categories":2580},[195],{"categories":2582},[146],{"categories":2584},[198],{"categories":2586},[220],{"categories":2588},[],{"categories":2590},[198],{"categories":2592},[198],{"categories":2594},[146],{"categories":2596},[195],{"categories":2598},[],{"categories":2600},[195],{"categories":2602},[195],{"categories":2604},[298],{"categories":2606},[220],{"categories":2608},[251],{"categories":2610},[251],{"categories":2612},[],{"categories":2614},[],{"categories":2616},[],{"categories":2618},[198],{"categories":2620},[198],{"categories":2622},[264],{"categories":2624},[264],{"categories":2626},[195],{"categories":2628},[195],{"categories":2630},[195],{"categories":2632},[195],{"categories":2634},[198],{"categories":2636},[],{"categories":2638},[],{"categories":2640},[195],{"categories":2642},[],{"categories":2644},[195],{"categories":2646},[198],{"categories":2648},[146],{"categories":2650},[195],{"categories":2652},[195],{"categories":2654},[],{"categories":2656},[201],{"categories":2658},[195],{"categories":2660},[146],{"categories":2662},[195],{"categories":2664},[192],{"categories":2666},[195],{"categories":2668},[273],{"categories":2670},[198],{"categories":2672},[195],{"categories":2674},[195],{"categories":2676},[198],{"categories":2678},[195],{"categories":2680},[264],{"categories":2682},[],{"categories":2684},[220],{"categories":2686},[198],{"categories":2688},[],{"categories":2690},[220],{"categories":2692},[198],{"categories":2694},[198],{"categories":2696},[195],{"categories":2698},[198],{"categories":2700},[],{"categories":2702},[192],{"categories":2704},[198],{"categories":2706},[],{"categories":2708},[264],{"categories":2710},[195],{"categories":2712},[189],{"categories":2714},[220],{"categories":2716},[298],{"categories":2718},[198],{"categories":2720},[195],{"categories":2722},[198],{"categories":2724},[189],{"categories":2726},[],{"categories":2728},[195],{"categories":2730},[],{"categories":2732},[],{"categories":2734},[146],{"categories":2736},[195,192],{"categories":2738},[198],{"categories":2740},[195],{"categories":2742},[],{"categories":2744},[189],{"categories":2746},[251],{"categories":2748},[195],{"categories":2750},[264],{"categories":2752},[195],{"categories":2754},[198],{"categories":2756},[195],{"categories":2758},[195],{"categories":2760},[195],{"categories":2762},[220],{"categories":2764},[198],{"categories":2766},[195],{"categories":2768},[],{"categories":2770},[],{"categories":2772},[198],{"categories":2774},[195],{"categories":2776},[298],{"categories":2778},[],{"categories":2780},[195],{"categories":2782},[198],{"categories":2784},[198],{"categories":2786},[],{"categories":2788},[198],{"categories":2790},[195],{"categories":2792},[273],{"categories":2794},[195],{"categories":2796},[251],{"categories":2798},[198],{"categories":2800},[195],{"categories":2802},[298],{"categories":2804},[],{"categories":2806},[195],{"categories":2808},[273],{"categories":2810},[146],{"categories":2812},[195],{"categories":2814},[195],{"categories":2816},[],{"categories":2818},[273],{"categories":2820},[220],{"categories":2822},[195],{"categories":2824},[195],{"categories":2826},[189],{"categories":2828},[195],{"categories":2830},[],{"categories":2832},[],{"categories":2834},[146],{"categories":2836},[195],{"categories":2838},[251],{"categories":2840},[273],{"categories":2842},[198],{"categories":2844},[273],{"categories":2846},[220],{"categories":2848},[],{"categories":2850},[195],{"categories":2852},[],{"categories":2854},[195],{"categories":2856},[198],{"categories":2858},[195],{"categories":2860},[195],{"categories":2862},[],{"categories":2864},[195,264],{"categories":2866},[220],{"categories":2868},[198],{"categories":2870},[264],{"categories":2872},[195],{"categories":2874},[189],{"categories":2876},[],{"categories":2878},[],{"categories":2880},[198],{"categories":2882},[195],{"categories":2884},[264],{"categories":2886},[189],{"categories":2888},[264],{"categories":2890},[264],{"categories":2892},[195],{"categories":2894},[273],{"categories":2896},[195],{"categories":2898},[264],{"categories":2900},[],{"categories":2902},[146,195],{"categories":2904},[298],{"categories":2906},[189],{"categories":2908},[],{"categories":2910},[195],{"categories":2912},[192],{"categories":2914},[192],{"categories":2916},[195],{"categories":2918},[195],{"categories":2920},[195],{"categories":2922},[264],{"categories":2924},[198],{"categories":2926},[220],{"categories":2928},[273],{"categories":2930},[146],{"categories":2932},[195],{"categories":2934},[195],{"categories":2936},[195],{"categories":2938},[195],{"categories":2940},[189],{"categories":2942},[195],{"categories":2944},[198],{"categories":2946},[198],{"categories":2948},[220],{"categories":2950},[264],{"categories":2952},[],{"categories":2954},[],{"categories":2956},[251],{"categories":2958},[264],{"categories":2960},[195],{"categories":2962},[146],{"categories":2964},[195],{"categories":2966},[195],{"categories":2968},[195],{"categories":2970},[251],{"categories":2972},[195],{"categories":2974},[195],{"categories":2976},[195],{"categories":2978},[198],{"categories":2980},[198],{"categories":2982},[195,192],{"categories":2984},[],{"categories":2986},[146],{"categories":2988},[],{"categories":2990},[195],{"categories":2992},[220],{"categories":2994},[189],{"categories":2996},[189],{"categories":2998},[198],{"categories":3000},[198],{"categories":3002},[198],{"categories":3004},[195],{"categories":3006},[195],{"categories":3008},[192],{"categories":3010},[264],{"categories":3012},[273],{"categories":3014},[195],{"categories":3016},[],{"categories":3018},[220],{"categories":3020},[195],{"categories":3022},[195],{"categories":3024},[195],{"categories":3026},[195],{"categories":3028},[195],{"categories":3030},[264],{"categories":3032},[220],{"categories":3034},[264],{"categories":3036},[264],{"categories":3038},[195],{"categories":3040},[195],{"categories":3042},[195],{"categories":3044},[198],{"categories":3046},[220],{"categories":3048},[195],{"categories":3050},[198],{"categories":3052},[195],{"categories":3054},[195],{"categories":3056},[146],{"categories":3058},[195],{"categories":3060},[195],{"categories":3062},[298],{"categories":3064},[195],{"categories":3066},[201],{"categories":3068},[198],{"categories":3070},[195],{"categories":3072},[195],{"categories":3074},[220],{"categories":3076},[195],{"categories":3078},[198],{"categories":3080},[273],{"categories":3082},[195],{"categories":3084},[195],{"categories":3086},[192],{"categories":3088},[195],{"categories":3090},[],{"categories":3092},[195],{"categories":3094},[195],{"categories":3096},[],{"categories":3098},[],{"categories":3100},[],{"categories":3102},[192],{"categories":3104},[195],{"categories":3106},[198],{"categories":3108},[220],{"categories":3110},[220],{"categories":3112},[220],{"categories":3114},[220],{"categories":3116},[],{"categories":3118},[189],{"categories":3120},[198],{"categories":3122},[220],{"categories":3124},[195],{"categories":3126},[189],{"categories":3128},[198],{"categories":3130},[195],{"categories":3132},[195,198],{"categories":3134},[198],{"categories":3136},[298],{"categories":3138},[220],{"categories":3140},[198],{"categories":3142},[220],{"categories":3144},[198],{"categories":3146},[195],{"categories":3148},[],{"categories":3150},[220],{"categories":3152},[273],{"categories":3154},[189],{"categories":3156},[195],{"categories":3158},[195],{"categories":3160},[],{"categories":3162},[264],{"categories":3164},[],{"categories":3166},[189],{"categories":3168},[198],{"categories":3170},[220],{"categories":3172},[195],{"categories":3174},[220],{"categories":3176},[189],{"categories":3178},[220],{"categories":3180},[220],{"categories":3182},[],{"categories":3184},[192],{"categories":3186},[198],{"categories":3188},[220],{"categories":3190},[220],{"categories":3192},[220],{"categories":3194},[220],{"categories":3196},[220],{"categories":3198},[220],{"categories":3200},[220],{"categories":3202},[220],{"categories":3204},[220],{"categories":3206},[220],{"categories":3208},[251],{"categories":3210},[189],{"categories":3212},[195],{"categories":3214},[195],{"categories":3216},[198],{"categories":3218},[198],{"categories":3220},[],{"categories":3222},[195,189],{"categories":3224},[],{"categories":3226},[198],{"categories":3228},[220],{"categories":3230},[198],{"categories":3232},[195],{"categories":3234},[195],{"categories":3236},[195],{"categories":3238},[195],{"categories":3240},[195],{"categories":3242},[198],{"categories":3244},[192],{"categories":3246},[198],{"categories":3248},[],{"categories":3250},[146],{"categories":3252},[220],{"categories":3254},[195],{"categories":3256},[],{"categories":3258},[],{"categories":3260},[198],{"categories":3262},[146],{"categories":3264},[195],{"categories":3266},[],{"categories":3268},[195],{"categories":3270},[],{"categories":3272},[273],{"categories":3274},[195],{"categories":3276},[],{"categories":3278},[],{"categories":3280},[220],{"categories":3282},[189],{"categories":3284},[195],{"categories":3286},[192],{"categories":3288},[195],{"categories":3290},[195],{"categories":3292},[195],{"categories":3294},[192],{"categories":3296},[146],{"categories":3298},[],{"categories":3300},[195],{"categories":3302},[220],{"categories":3304},[],{"categories":3306},[146],{"categories":3308},[195],{"categories":3310},[273],{"categories":3312},[195],{"categories":3314},[298],{"categories":3316},[],{"categories":3318},[273],{"categories":3320},[],{"categories":3322},[195],{"categories":3324},[],{"categories":3326},[198],{"categories":3328},[264],{"categories":3330},[],{"categories":3332},[192],{"categories":3334},[189],{"categories":3336},[198],{"categories":3338},[146],{"categories":3340},[264],{"categories":3342},[],{"categories":3344},[],{"categories":3346},[195],{"categories":3348},[189],{"categories":3350},[195],{"categories":3352},[273],{"categories":3354},[],{"categories":3356},[198],{"categories":3358},[198],{"categories":3360},[198],{"categories":3362},[220],{"categories":3364},[264],{"categories":3366},[195],{"categories":3368},[198],{"categories":3370},[201],{"categories":3372},[195],{"categories":3374},[198],{"categories":3376},[195],{"categories":3378},[201],{"categories":3380},[273],{"categories":3382},[220],{"categories":3384},[],{"categories":3386},[273],{"categories":3388},[],{"categories":3390},[264],{"categories":3392},[198],{"categories":3394},[],{"categories":3396},[195],{"categories":3398},[195],{"categories":3400},[198],{"categories":3402},[192],{"categories":3404},[189],{"categories":3406},[195],{"categories":3408},[146],{"categories":3410},[264],{"categories":3412},[264],{"categories":3414},[195],{"categories":3416},[251],{"categories":3418},[198],{"categories":3420},[195],{"categories":3422},[198],{"categories":3424},[195],{"categories":3426},[192],{"categories":3428},[146],{"categories":3430},[264],{"categories":3432},[198],{"categories":3434},[195],{"categories":3436},[195],{"categories":3438},[198],{"categories":3440},[195],{"categories":3442},[220],{"categories":3444},[],{"categories":3446},[189],{"categories":3448},[195],{"categories":3450},[195],{"categories":3452},[195],{"categories":3454},[198],{"categories":3456},[195],{"categories":3458},[195],{"categories":3460},[],{"categories":3462},[195],{"categories":3464},[146],{"categories":3466},[192],{"categories":3468},[220],{"categories":3470},[198],{"categories":3472},[195],{"categories":3474},[195],{"categories":3476},[146],{"categories":3478},[198],{"categories":3480},[195],{"categories":3482},[273],{"categories":3484},[251],{"categories":3486},[195],{"categories":3488},[195],{"categories":3490},[220],{"categories":3492},[195],{"categories":3494},[198],{"categories":3496},[298],{"categories":3498},[195],{"categories":3500},[198],{"categories":3502},[251],{"categories":3504},[],{"categories":3506},[198],{"categories":3508},[264],{"categories":3510},[146],{"categories":3512},[195],{"categories":3514},[189],{"categories":3516},[264],{"categories":3518},[192],{"categories":3520},[264],{"categories":3522},[195],{"categories":3524},[],{"categories":3526},[198],{"categories":3528},[198],{"categories":3530},[195],{"categories":3532},[251],{"categories":3534},[],{"categories":3536},[220],{"categories":3538},[],{"categories":3540},[220],{"categories":3542},[195],{"categories":3544},[195],{"categories":3546},[198],{"categories":3548},[198],{"categories":3550},[198],{"categories":3552},[],{"categories":3554},[220],{"categories":3556},[195],{"categories":3558},[],{"categories":3560},[195],{"categories":3562},[195],{"categories":3564},[],{"categories":3566},[146],{"categories":3568},[264],{"categories":3570},[198],{"categories":3572},[195],{"categories":3574},[195],{"categories":3576},[273],{"categories":3578},[195],{"categories":3580},[195],{"categories":3582},[189],{"categories":3584},[],{"categories":3586},[195],{"categories":3588},[],{"categories":3590},[189],{"categories":3592},[220],{"categories":3594},[264],{"categories":3596},[195],{"categories":3598},[195],{"categories":3600},[195],{"categories":3602},[264],{"categories":3604},[220],{"categories":3606},[146],{"categories":3608},[195],{"categories":3610},[195],{"categories":3612},[195],{"categories":3614},[220],{"categories":3616},[146],{"categories":3618},[195],{"categories":3620},[220],{"categories":3622},[146],{"categories":3624},[220],{"categories":3626},[198],{"categories":3628},[198],{"categories":3630},[198],{"categories":3632},[264],{"categories":3634},[220],{"categories":3636},[198],{"categories":3638},[198],{"categories":3640},[195],{"categories":3642},[264],{"categories":3644},[146],{"categories":3646},[195],{"categories":3648},[],{"categories":3650},[198],{"categories":3652},[],{"categories":3654},[],{"categories":3656},[],{"categories":3658},[192],{"categories":3660},[198],{"categories":3662},[195],{"categories":3664},[198],{"categories":3666},[189],{"categories":3668},[198],{"categories":3670},[273],{"categories":3672},[198],{"categories":3674},[],{"categories":3676},[198],{"categories":3678},[],{"categories":3680},[189],{"categories":3682},[198],{"categories":3684},[],{"categories":3686},[198],{"categories":3688},[195],{"categories":3690},[195],{"categories":3692},[220],{"categories":3694},[195],{"categories":3696},[198],{"categories":3698},[195],{"categories":3700},[195],{"categories":3702},[220],{"categories":3704},[198],{"categories":3706},[264],{"categories":3708},[146],{"categories":3710},[189],{"categories":3712},[],{"categories":3714},[198],{"categories":3716},[146],{"categories":3718},[298],{"categories":3720},[220],{"categories":3722},[195],{"categories":3724},[146],{"categories":3726},[195],{"categories":3728},[189],{"categories":3730},[],{"categories":3732},[198],{"categories":3734},[195],{"categories":3736},[195],{"categories":3738},[198],{"categories":3740},[195],{"categories":3742},[146],{"categories":3744},[],{"categories":3746},[198],{"categories":3748},[201],{"categories":3750},[220],{"categories":3752},[198],{"categories":3754},[192],{"categories":3756},[],{"categories":3758},[195],{"categories":3760},[201],{"categories":3762},[195],{"categories":3764},[198],{"categories":3766},[220],{"categories":3768},[189],{"categories":3770},[298],{"categories":3772},[195],{"categories":3774},[195],{"categories":3776},[195],{"categories":3778},[220],{"categories":3780},[192],{"categories":3782},[195],{"categories":3784},[146],{"categories":3786},[220],{"categories":3788},[298],{"categories":3790},[195],{"categories":3792},[],{"categories":3794},[],{"categories":3796},[195],{"categories":3798},[298],{"categories":3800},[251],{"categories":3802},[198],{"categories":3804},[198],{"categories":3806},[220],{"categories":3808},[195],{"categories":3810},[189],{"categories":3812},[195],{"categories":3814},[146],{"categories":3816},[198],{"categories":3818},[198],{"categories":3820},[195],{"categories":3822},[273],{"categories":3824},[195],{"categories":3826},[198],{"categories":3828},[],{"categories":3830},[195],{"categories":3832},[195],{"categories":3834},[195],{"categories":3836},[220],{"categories":3838},[189],{"categories":3840},[],{"categories":3842},[195],{"categories":3844},[195],{"categories":3846},[264],{"categories":3848},[146],{"categories":3850},[195],{"categories":3852},[195,198],{"categories":3854},[273,192],{"categories":3856},[195],{"categories":3858},[195],{"categories":3860},[],{"categories":3862},[198],{"categories":3864},[],{"categories":3866},[264],{"categories":3868},[195],{"categories":3870},[],{"categories":3872},[195],{"categories":3874},[220],{"categories":3876},[195],{"categories":3878},[],{"categories":3880},[198],{"categories":3882},[195],{"categories":3884},[],{"categories":3886},[146],{"categories":3888},[195],{"categories":3890},[198],{"categories":3892},[195],{"categories":3894},[189],{"categories":3896},[198],{"categories":3898},[195],{"categories":3900},[],{"categories":3902},[298],{"categories":3904},[273],{"categories":3906},[192],{"categories":3908},[192],{"categories":3910},[195],{"categories":3912},[189],{"categories":3914},[189],{"categories":3916},[195],{"categories":3918},[198],{"categories":3920},[195],{"categories":3922},[195],{"categories":3924},[264],{"categories":3926},[189],{"categories":3928},[195],{"categories":3930},[273],{"categories":3932},[220],{"categories":3934},[195],{"categories":3936},[195],{"categories":3938},[198],{"categories":3940},[195],{"categories":3942},[],{"categories":3944},[264],{"categories":3946},[],{"categories":3948},[264],{"categories":3950},[198],{"categories":3952},[189],{"categories":3954},[],{"categories":3956},[298],{"categories":3958},[195],{"categories":3960},[264],{"categories":3962},[],{"categories":3964},[220],{"categories":3966},[198],{"categories":3968},[264],{"categories":3970},[195],{"categories":3972},[198],{"categories":3974},[264],{"categories":3976},[198],{"categories":3978},[220],{"categories":3980},[189],{"categories":3982},[220],{"categories":3984},[264],{"categories":3986},[195],{"categories":3988},[146],{"categories":3990},[195],{"categories":3992},[195],{"categories":3994},[195],{"categories":3996},[195],{"categories":3998},[195],{"categories":4000},[198],{"categories":4002},[195],{"categories":4004},[198],{"categories":4006},[195],{"categories":4008},[189],{"categories":4010},[195],{"categories":4012},[198],{"categories":4014},[146],{"categories":4016},[198],{"categories":4018},[198],{"categories":4020},[189],{"categories":4022},[198],{"categories":4024},[146],{"categories":4026},[],{"categories":4028},[195],{"categories":4030},[251],{"categories":4032},[195],{"categories":4034},[195],{"categories":4036},[264],{"categories":4038},[],{"categories":4040},[198],{"categories":4042},[273],{"categories":4044},[195],{"categories":4046},[220],{"categories":4048},[273],{"categories":4050},[198],{"categories":4052},[192],{"categories":4054},[192],{"categories":4056},[195],{"categories":4058},[195],{"categories":4060},[195],{"categories":4062},[189],{"categories":4064},[],{"categories":4066},[195],{"categories":4068},[198],{"categories":4070},[198],{"categories":4072},[195],{"categories":4074},[264],{"categories":4076},[],{"categories":4078},[189],{"categories":4080},[195],{"categories":4082},[195],{"categories":4084},[198],{"categories":4086},[198],{"categories":4088},[],{"categories":4090},[264],{"categories":4092},[264],{"categories":4094},[273],{"categories":4096},[146],{"categories":4098},[],{"categories":4100},[195],{"categories":4102},[198],{"categories":4104},[189],{"categories":4106},[195],{"categories":4108},[264],{"categories":4110},[189],{"categories":4112},[220],{"categories":4114},[220],{"categories":4116},[],{"categories":4118},[220],{"categories":4120},[198],{"categories":4122},[146],{"categories":4124},[251],{"categories":4126},[195],{"categories":4128},[],{"categories":4130},[220],{"categories":4132},[264],{"categories":4134},[195],{"categories":4136},[192],{"categories":4138},[195],{"categories":4140},[189],{"categories":4142},[298],{"categories":4144},[189],{"categories":4146},[],{"categories":4148},[],{"categories":4150},[198],{"categories":4152},[220],{"categories":4154},[],{"categories":4156},[198],{"categories":4158},[198],{"categories":4160},[198],{"categories":4162},[],{"categories":4164},[195],{"categories":4166},[],{"categories":4168},[220],{"categories":4170},[189],{"categories":4172},[146],{"categories":4174},[195],{"categories":4176},[220],{"categories":4178},[195],{"categories":4180},[220],{"categories":4182},[],{"categories":4184},[220],{"categories":4186},[189],{"categories":4188},[198],{"categories":4190},[195],{"categories":4192},[],{"categories":4194},[264],{"categories":4196},[198],{"categories":4198},[201],{"categories":4200},[198],{"categories":4202},[189],{"categories":4204},[],{"categories":4206},[],{"categories":4208},[],{"categories":4210},[146],{"categories":4212},[198],{"categories":4214},[195],{"categories":4216},[195],{"categories":4218},[],{"categories":4220},[],{"categories":4222},[],{"categories":4224},[146],{"categories":4226},[],{"categories":4228},[198],{"categories":4230},[195],{"categories":4232},[189],{"categories":4234},[],{"categories":4236},[],{"categories":4238},[146],{"categories":4240},[195],{"categories":4242},[220],{"categories":4244},[],{"categories":4246},[273],{"categories":4248},[220],{"categories":4250},[273],{"categories":4252},[251],{"categories":4254},[195],{"categories":4256},[195],{"categories":4258},[],{"categories":4260},[],{"categories":4262},[198],{"categories":4264},[],{"categories":4266},[195],{"categories":4268},[],{"categories":4270},[198],{"categories":4272},[195],{"categories":4274},[],{"categories":4276},[198],{"categories":4278},[195],{"categories":4280},[220],{"categories":4282},[195],{"categories":4284},[273],{"categories":4286},[195],{"categories":4288},[195],{"categories":4290},[251],{"categories":4292},[198],{"categories":4294},[198],{"categories":4296},[],{"categories":4298},[],{"categories":4300},[195],{"categories":4302},[],{"categories":4304},[220],{"categories":4306},[],{"categories":4308},[],{"categories":4310},[146],{"categories":4312},[189],{"categories":4314},[],{"categories":4316},[192],{"categories":4318},[273],{"categories":4320},[195],{"categories":4322},[264],{"categories":4324},[189],{"categories":4326},[251],{"categories":4328},[192],{"categories":4330},[264],{"categories":4332},[264],{"categories":4334},[],{"categories":4336},[195],{"categories":4338},[],{"categories":4340},[198],{"categories":4342},[189],{"categories":4344},[146],{"categories":4346},[189],{"categories":4348},[198],{"categories":4350},[298],{"categories":4352},[195],{"categories":4354},[195],{"categories":4356},[189],{"categories":4358},[198],{"categories":4360},[],{"categories":4362},[195],{"categories":4364},[264],{"categories":4366},[220],{"categories":4368},[264],{"categories":4370},[195],{"categories":4372},[],{"categories":4374},[146],{"categories":4376},[220],{"categories":4378},[189],{"categories":4380},[198],{"categories":4382},[195],{"categories":4384},[198],{"categories":4386},[195],{"categories":4388},[192],{"categories":4390},[198],{"categories":4392},[198,298],{"categories":4394},[198],{"categories":4396},[264],{"categories":4398},[195],{"categories":4400},[195],{"categories":4402},[251],{"categories":4404},[198],{"categories":4406},[273],{"categories":4408},[198],{"categories":4410},[192],{"categories":4412},[],{"categories":4414},[198],{"categories":4416},[195],{"categories":4418},[192],{"categories":4420},[],{"categories":4422},[],{"categories":4424},[195],{"categories":4426},[251],{"categories":4428},[273],{"categories":4430},[195],{"categories":4432},[195],{"categories":4434},[198],{"categories":4436},[],{"categories":4438},[220],{"categories":4440},[],{"categories":4442},[220],{"categories":4444},[264],{"categories":4446},[189],{"categories":4448},[264],{"categories":4450},[195],{"categories":4452},[198],{"categories":4454},[195],{"categories":4456},[195],{"categories":4458},[273],{"categories":4460},[264],{"categories":4462},[],{"categories":4464},[220],{"categories":4466},[195],{"categories":4468},[],{"categories":4470},[195],{"categories":4472},[195],{"categories":4474},[195],{"categories":4476},[198],{"categories":4478},[195],{"categories":4480},[201],{"categories":4482},[198],{"categories":4484},[195],{"categories":4486},[195],{"categories":4488},[195],{"categories":4490},[195],{"categories":4492},[192],{"categories":4494},[],{"categories":4496},[201],{"categories":4498},[220],{"categories":4500},[198],{"categories":4502},[195],{"categories":4504},[264],{"categories":4506},[],{"categories":4508},[264],{"categories":4510},[264],{"categories":4512},[264],{"categories":4514},[195],{"categories":4516},[195],{"categories":4518},[264],{"categories":4520},[195],{"categories":4522},[198],{"categories":4524},[220],{"categories":4526},[195],{"categories":4528},[195],{"categories":4530},[195],{"categories":4532},[192],{"categories":4534},[195],{"categories":4536},[198],{"categories":4538},[146],{"categories":4540},[],{"categories":4542},[251],{"categories":4544},[198],{"categories":4546},[195],{"categories":4548},[],{"categories":4550},[195],{"categories":4552},[195],{"categories":4554},[220],{"categories":4556},[195],{"categories":4558},[198],{"categories":4560},[273],{"categories":4562},[],{"categories":4564},[],{"categories":4566},[220],{"categories":4568},[220],{"categories":4570},[195],{"categories":4572},[273],{"categories":4574},[195],{"categories":4576},[189],{"categories":4578},[198],{"categories":4580},[195],{"categories":4582},[198],{"categories":4584},[198],{"categories":4586},[195],{"categories":4588},[192],{"categories":4590},[],{"categories":4592},[251],{"categories":4594},[],{"categories":4596},[220],{"categories":4598},[195],{"categories":4600},[251],{"categories":4602},[195],{"categories":4604},[264],{"categories":4606},[264],{"categories":4608},[264],{"categories":4610},[198],{"categories":4612},[198],{"categories":4614},[146],{"categories":4616},[251],{"categories":4618},[251],{"categories":4620},[],{"categories":4622},[220],{"categories":4624},[195],{"categories":4626},[195],{"categories":4628},[264],{"categories":4630},[],{"categories":4632},[220],{"categories":4634},[220],{"categories":4636},[220],{"categories":4638},[],{"categories":4640},[198],{"categories":4642},[195],{"categories":4644},[],{"categories":4646},[189],{"categories":4648},[192],{"categories":4650},[],{"categories":4652},[195],{"categories":4654},[195],{"categories":4656},[],{"categories":4658},[264],{"categories":4660},[],{"categories":4662},[],{"categories":4664},[],{"categories":4666},[],{"categories":4668},[195],{"categories":4670},[220],{"categories":4672},[],{"categories":4674},[],{"categories":4676},[195],{"categories":4678},[195],{"categories":4680},[195],{"categories":4682},[251],{"categories":4684},[195],{"categories":4686},[251],{"categories":4688},[],{"categories":4690},[251],{"categories":4692},[251],{"categories":4694},[298],{"categories":4696},[198],{"categories":4698},[264],{"categories":4700},[],{"categories":4702},[],{"categories":4704},[251],{"categories":4706},[264],{"categories":4708},[264],{"categories":4710},[264],{"categories":4712},[],{"categories":4714},[189],{"categories":4716},[264],{"categories":4718},[264],{"categories":4720},[189],{"categories":4722},[264],{"categories":4724},[192],{"categories":4726},[264],{"categories":4728},[264],{"categories":4730},[264],{"categories":4732},[251],{"categories":4734},[220],{"categories":4736},[220],{"categories":4738},[195],{"categories":4740},[264],{"categories":4742},[251],{"categories":4744},[298],{"categories":4746},[251],{"categories":4748},[251],{"categories":4750},[251],{"categories":4752},[],{"categories":4754},[192],{"categories":4756},[],{"categories":4758},[298],{"categories":4760},[264],{"categories":4762},[264],{"categories":4764},[264],{"categories":4766},[198],{"categories":4768},[220,192],{"categories":4770},[251],{"categories":4772},[],{"categories":4774},[],{"categories":4776},[251],{"categories":4778},[],{"categories":4780},[251],{"categories":4782},[220],{"categories":4784},[198],{"categories":4786},[],{"categories":4788},[264],{"categories":4790},[195],{"categories":4792},[146],{"categories":4794},[],{"categories":4796},[195],{"categories":4798},[],{"categories":4800},[220],{"categories":4802},[189],{"categories":4804},[251],{"categories":4806},[],{"categories":4808},[264],{"categories":4810},[220],[4812,4929,5001,5516],{"id":4813,"title":4814,"ai":4815,"body":4820,"categories":4900,"created_at":147,"date_modified":147,"description":136,"extension":148,"faq":147,"featured":149,"kicker_label":147,"meta":4901,"navigation":165,"path":4914,"published_at":4915,"question":147,"scraped_at":4916,"seo":4917,"sitemap":4918,"source_id":4919,"source_name":4909,"source_type":173,"source_url":4920,"stem":4921,"tags":4922,"thumbnail_url":4924,"tldr":4925,"tweet":4926,"unknown_tags":4927,"__hash__":4928},"summaries\u002Fsummaries\u002F594be57fe39bd228-three-essential-css-layout-primitives-summary.md","Three Essential CSS Layout Primitives",{"provider":7,"model":8,"input_tokens":4816,"output_tokens":4817,"processing_time_ms":4818,"cost_usd":4819},7726,568,3294,0.0027835,{"type":14,"value":4821,"toc":4895},[4822,4826,4845,4849,4864,4868],[17,4823,4825],{"id":4824},"the-stack-managing-vertical-spacing","The Stack: Managing Vertical Spacing",[22,4827,4828,4829,4832,4833,4836,4837,4840,4841,4844],{},"The Stack pattern is the preferred way to handle vertical spacing between elements in a column. While CSS Grid can be used, it often introduces \"mystery spacing\" issues when parent containers have auto-heights. By using ",[33,4830,4831],{},"display: flex"," with ",[33,4834,4835],{},"flex-direction: column"," and a ",[33,4838,4839],{},"gap"," property, you gain better control over alignment. Powell recommends using an undefined custom property (e.g., ",[33,4842,4843],{},"--stack-gap",") with a fallback value, allowing developers to easily override spacing on specific components without altering the global layout.",[17,4846,4848],{"id":4847},"prose-typography-driven-flow","Prose: Typography-Driven Flow",[22,4850,4851,4852,4855,4856,4859,4860,4863],{},"For running text (like articles), consistent spacing is often undesirable because it ignores typographic hierarchy. The Prose pattern uses the \"lobotomized owl\" selector (",[33,4853,4854],{},"* + *",") to apply ",[33,4857,4858],{},"margin-block-start"," to elements. By using ",[33,4861,4862],{},"1em"," as the spacing unit, the margin scales proportionally with the font size of the element itself. This ensures that headings stay closer to the content they introduce, adhering to standard design principles of proximity and hierarchy.",[17,4865,4867],{"id":4866},"the-pile-layering-elements-with-grid","The Pile: Layering Elements with Grid",[22,4869,4870,4871,4874,4875,4878,4879,4882,4883,4886,4887,4890,4891,4894],{},"The Pile pattern uses CSS Grid to stack elements on top of one another by assigning them the same ",[33,4872,4873],{},"grid-area",". This is a cleaner alternative to absolute positioning. Because it operates within a grid context, you can use ",[33,4876,4877],{},"z-index"," to control stacking order and ",[33,4880,4881],{},"align-self"," or ",[33,4884,4885],{},"justify-self"," to position specific children within the pile (e.g., placing a notification badge on an avatar or positioning text over an image). Powell emphasizes that ",[33,4888,4889],{},"place-items: center"," is the key to centering layered content, while ",[33,4892,4893],{},"place-content"," should be avoided as it controls the grid container itself rather than the items inside.",{"title":136,"searchDepth":137,"depth":137,"links":4896},[4897,4898,4899],{"id":4824,"depth":137,"text":4825},{"id":4847,"depth":137,"text":4848},{"id":4866,"depth":137,"text":4867},[146],{"content_references":4902,"triage":4912},[4903,4906],{"type":153,"title":4904,"url":4905,"context":156},"Tailwind CSS","https:\u002F\u002Ftailwindcss.com\u002F",{"type":4907,"title":4908,"author":4909,"url":4910,"context":4911},"other","CSS Demystified","Kevin Powell","https:\u002F\u002Fcssdemystified.com","recommended",{"relevance":161,"novelty":162,"quality":161,"actionability":161,"composite":163,"reasoning":4913},"Category: Design & Frontend. The article provides practical CSS layout patterns that directly address the needs of frontend developers, particularly in managing layout effectively. It offers specific techniques like using flexbox and grid with customizable spacing, which can be immediately applied in design systems.","\u002Fsummaries\u002F594be57fe39bd228-three-essential-css-layout-primitives-summary","2026-06-03 20:04:53","2026-06-06 16:09:55",{"title":4814,"description":136},{"loc":4914},"594be57fe39bd228","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=CU8Plk-53RU","summaries\u002F594be57fe39bd228-three-essential-css-layout-primitives-summary",[177,4923,178,179],"design-systems","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FCU8Plk-53RU\u002Fhqdefault.jpg","Kevin Powell shares three reusable CSS patterns—Stack, Prose, and Pile—that simplify layout management by using flexbox and grid primitives with customizable spacing variables.","A technical walkthrough of three CSS layout primitives—the \"stack,\" \"prose,\" and \"pile\"—that rely on Flexbox and Grid to manage spacing and element layering. The video focuses on using CSS custom properties to make these patterns reusable and adjustable across different components.",[178,179],"Hty3YdzrofUBENbvcXJUMeS8TeFijVgrzRcTBXZXr8w",{"id":4930,"title":4931,"ai":4932,"body":4937,"categories":4981,"created_at":147,"date_modified":147,"description":136,"extension":148,"faq":147,"featured":149,"kicker_label":147,"meta":4982,"navigation":165,"path":4987,"published_at":4988,"question":147,"scraped_at":4989,"seo":4990,"sitemap":4991,"source_id":4992,"source_name":172,"source_type":173,"source_url":4993,"stem":4994,"tags":4995,"thumbnail_url":147,"tldr":4997,"tweet":4998,"unknown_tags":4999,"__hash__":5000},"summaries\u002Fsummaries\u002Fcef05f71fca49beb-solving-element-anchoring-with-the-css-anchor-posi-summary.md","Solving Element Anchoring with the CSS Anchor Positioning API",{"provider":7,"model":8,"input_tokens":4933,"output_tokens":4934,"processing_time_ms":4935,"cost_usd":4936},3683,382,2516,0.00149375,{"type":14,"value":4938,"toc":4977},[4939,4943,4962,4966],[17,4940,4942],{"id":4941},"the-failure-of-traditional-absolute-positioning","The Failure of Traditional Absolute Positioning",[22,4944,4945,4946,4949,4950,4953,4954,4957,4958,4961],{},"Developers have historically relied on ",[33,4947,4948],{},"position: absolute"," combined with ",[33,4951,4952],{},"top",", ",[33,4955,4956],{},"left",", or ",[33,4959,4960],{},"transform: translate"," to attach UI elements like tooltips, popovers, or menus to specific trigger elements. This approach is fundamentally fragile because it assumes a static relationship between the anchor and the target. When the anchor element changes size, moves due to layout shifts, or is nested deep within a complex DOM structure, these manual coordinate calculations fail. The target element becomes detached or misaligned, requiring constant, brittle updates to the CSS or JavaScript to maintain the intended visual connection.",[17,4963,4965],{"id":4964},"native-anchoring-as-a-declarative-solution","Native Anchoring as a Declarative Solution",[22,4967,4968,4969,4972,4973,4976],{},"The CSS Anchor Positioning API introduces a native, browser-level solution to this problem by defining two distinct roles: the ",[55,4970,4971],{},"anchor"," (the trigger element) and the ",[55,4974,4975],{},"target"," (the element to be positioned relative to the anchor). Instead of manually calculating offsets, developers can declaratively link these elements. The browser handles the complex geometry of the viewport, ensuring that the target remains attached to the anchor regardless of layout changes, window resizing, or DOM nesting. This shift moves the burden of coordinate management from the developer to the browser engine, resulting in more resilient and maintainable UI components that adapt automatically to dynamic content.",{"title":136,"searchDepth":137,"depth":137,"links":4978},[4979,4980],{"id":4941,"depth":137,"text":4942},{"id":4964,"depth":137,"text":4965},[146],{"content_references":4983,"triage":4984},[],{"relevance":162,"novelty":162,"quality":161,"actionability":162,"composite":4985,"reasoning":4986},3.25,"Category: Design & Frontend. The article discusses the CSS Anchor Positioning API, which is relevant to frontend development and UI\u002FUX design. It provides insights into a new approach to positioning elements, which could help developers improve their UI components, but lacks specific implementation examples that would enhance actionability.","\u002Fsummaries\u002Fcef05f71fca49beb-solving-element-anchoring-with-the-css-anchor-posi-summary","2026-05-15 10:01:03","2026-05-21 03:00:17",{"title":4931,"description":136},{"loc":4987},"cef05f71fca49beb","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=fCjryd5ZgBU","summaries\u002Fcef05f71fca49beb-solving-element-anchoring-with-the-css-anchor-posi-summary",[177,4996,178],"ui-ux","The CSS Anchor Positioning API provides a robust, native way to tether elements like tooltips to dynamic anchors, replacing fragile absolute positioning hacks that break when elements resize or move.","A technical explanation of the CSS Anchor Positioning API. The video demonstrates how to use the `anchor()` function and `anchor-name` property to tether elements together, solving the layout fragility issues common with traditional absolute positioning.",[178],"o-tnUHH0vRzSahG5i_SGjsAhA7kRULwYrLlcXogqXxg",{"id":5002,"title":5003,"ai":5004,"body":5010,"categories":5492,"created_at":147,"date_modified":147,"description":136,"extension":148,"faq":147,"featured":149,"kicker_label":147,"meta":5493,"navigation":165,"path":5503,"published_at":147,"question":147,"scraped_at":5504,"seo":5505,"sitemap":5506,"source_id":5507,"source_name":5508,"source_type":5509,"source_url":5510,"stem":5511,"tags":5512,"thumbnail_url":147,"tldr":5513,"tweet":147,"unknown_tags":5514,"__hash__":5515},"summaries\u002Fsummaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary.md","CSS Scroll-Driven Animations via Animation Timeline API",{"provider":7,"model":5005,"input_tokens":5006,"output_tokens":5007,"processing_time_ms":5008,"cost_usd":5009},"x-ai\u002Fgrok-4.1-fast",8497,1663,18977,0.00250825,{"type":14,"value":5011,"toc":5487},[5012,5016,5023,5121,5132,5173,5176,5180,5195,5241,5251,5305,5324,5331,5369,5372,5376,5387,5471,5483],[17,5013,5015],{"id":5014},"map-scroll-progress-to-keyframe-animations","Map Scroll Progress to Keyframe Animations",[22,5017,5018,5019,5022],{},"Drive CSS keyframe animations with an element's viewport position instead of duration by adding ",[33,5020,5021],{},"animation-timeline: view()",". This scrubs through keyframes from 0% (element bottom enters viewport) to 100% (element top exits viewport). For example:",[5024,5025,5028],"pre",{"className":5026,"code":5027,"language":178,"meta":136,"style":136},"language-css shiki shiki-themes github-light github-dark","@keyframes fadeIn {\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}\n.elem {\n  animation: fadeIn;\n  animation-timeline: view();\n}\n",[33,5029,5030,5047,5069,5085,5090,5098,5107,5116],{"__ignoreMap":136},[5031,5032,5035,5039,5043],"span",{"class":5033,"line":5034},"line",1,[5031,5036,5038],{"class":5037},"szBVR","@keyframes",[5031,5040,5042],{"class":5041},"s4XuR"," fadeIn",[5031,5044,5046],{"class":5045},"sVt8B"," {\n",[5031,5048,5049,5053,5056,5060,5063,5066],{"class":5033,"line":137},[5031,5050,5052],{"class":5051},"sScJk","  0%",[5031,5054,5055],{"class":5045}," { ",[5031,5057,5059],{"class":5058},"sj4cs","opacity",[5031,5061,5062],{"class":5045},": ",[5031,5064,5065],{"class":5058},"0",[5031,5067,5068],{"class":5045},"; }\n",[5031,5070,5071,5074,5076,5078,5080,5083],{"class":5033,"line":162},[5031,5072,5073],{"class":5051},"  100%",[5031,5075,5055],{"class":5045},[5031,5077,5059],{"class":5058},[5031,5079,5062],{"class":5045},[5031,5081,5082],{"class":5058},"1",[5031,5084,5068],{"class":5045},[5031,5086,5087],{"class":5033,"line":161},[5031,5088,5089],{"class":5045},"}\n",[5031,5091,5093,5096],{"class":5033,"line":5092},5,[5031,5094,5095],{"class":5051},".elem",[5031,5097,5046],{"class":5045},[5031,5099,5101,5104],{"class":5033,"line":5100},6,[5031,5102,5103],{"class":5058},"  animation",[5031,5105,5106],{"class":5045},": fadeIn;\n",[5031,5108,5110,5113],{"class":5033,"line":5109},7,[5031,5111,5112],{"class":5058},"  animation-timeline",[5031,5114,5115],{"class":5045},": view();\n",[5031,5117,5119],{"class":5033,"line":5118},8,[5031,5120,5089],{"class":5045},[22,5122,5123,5124,5127,5128,5131],{},"Scrolling advances the animation proportionally to the element's viewport coverage, measured as a percentage (100% at full entry, 0% at full exit). Apply standard timing functions like ",[33,5125,5126],{},"cubic-bezier(0.15, 0.75, 0.35, 1)"," for ease-out effects or ",[33,5129,5130],{},"linear()"," for springs:",[5024,5133,5135],{"className":5026,"code":5134,"language":178,"meta":136,"style":136},".box {\n  animation: spin var(--spring);\n  animation-timeline: view();\n}\n",[33,5136,5137,5144,5163,5169],{"__ignoreMap":136},[5031,5138,5139,5142],{"class":5033,"line":5034},[5031,5140,5141],{"class":5051},".box",[5031,5143,5046],{"class":5045},[5031,5145,5146,5148,5151,5154,5157,5160],{"class":5033,"line":137},[5031,5147,5103],{"class":5058},[5031,5149,5150],{"class":5045},": spin ",[5031,5152,5153],{"class":5058},"var",[5031,5155,5156],{"class":5045},"(",[5031,5158,5159],{"class":5041},"--spring",[5031,5161,5162],{"class":5045},");\n",[5031,5164,5165,5167],{"class":5033,"line":162},[5031,5166,5112],{"class":5058},[5031,5168,5115],{"class":5045},[5031,5170,5171],{"class":5033,"line":161},[5031,5172,5089],{"class":5045},[22,5174,5175],{},"This leverages existing keyframe knowledge—no new syntax for basics—while avoiding JavaScript for simple scroll effects.",[17,5177,5179],{"id":5178},"control-animation-timing-with-ranges","Control Animation Timing with Ranges",[22,5181,5182,5183,5186,5187,5190,5191,5194],{},"Override default ",[33,5184,5185],{},"cover"," range (full viewport traversal) using ",[33,5188,5189],{},"animation-range"," to start\u002Fend at specific points. ",[33,5192,5193],{},"contain"," triggers only when fully in viewport, ideal for complete animations like offscreen slides:",[5024,5196,5198],{"className":5026,"code":5197,"language":178,"meta":136,"style":136},".shape {\n  animation: slideIn backwards;\n  animation-timeline: view();\n  animation-range: contain;\n}\n",[33,5199,5200,5207,5220,5226,5237],{"__ignoreMap":136},[5031,5201,5202,5205],{"class":5033,"line":5034},[5031,5203,5204],{"class":5051},".shape",[5031,5206,5046],{"class":5045},[5031,5208,5209,5211,5214,5217],{"class":5033,"line":137},[5031,5210,5103],{"class":5058},[5031,5212,5213],{"class":5045},": slideIn ",[5031,5215,5216],{"class":5058},"backwards",[5031,5218,5219],{"class":5045},";\n",[5031,5221,5222,5224],{"class":5033,"line":162},[5031,5223,5112],{"class":5058},[5031,5225,5115],{"class":5045},[5031,5227,5228,5231,5233,5235],{"class":5033,"line":161},[5031,5229,5230],{"class":5058},"  animation-range",[5031,5232,5062],{"class":5045},[5031,5234,5193],{"class":5058},[5031,5236,5219],{"class":5045},[5031,5238,5239],{"class":5033,"line":5092},[5031,5240,5089],{"class":5045},[22,5242,5243,5246,5247,5250],{},[33,5244,5245],{},"entry"," animates during top-to-bottom entry (perfect for fade-ins on images), ",[33,5248,5249],{},"exit"," during top-edge exit (fade-outs). Combine via comma-separated values:",[5024,5252,5254],{"className":5026,"code":5253,"language":178,"meta":136,"style":136},"img {\n  animation: fadeIn linear, fadeOut linear;\n  animation-timeline: view(), view();\n  animation-range: entry, exit;\n}\n",[33,5255,5256,5264,5281,5294,5301],{"__ignoreMap":136},[5031,5257,5258,5262],{"class":5033,"line":5034},[5031,5259,5261],{"class":5260},"s9eBZ","img",[5031,5263,5046],{"class":5045},[5031,5265,5266,5268,5271,5274,5277,5279],{"class":5033,"line":137},[5031,5267,5103],{"class":5058},[5031,5269,5270],{"class":5045},": fadeIn ",[5031,5272,5273],{"class":5058},"linear",[5031,5275,5276],{"class":5045},", fadeOut ",[5031,5278,5273],{"class":5058},[5031,5280,5219],{"class":5045},[5031,5282,5283,5285,5288,5291],{"class":5033,"line":162},[5031,5284,5112],{"class":5058},[5031,5286,5287],{"class":5045},": view(), ",[5031,5289,5290],{"class":5058},"view",[5031,5292,5293],{"class":5045},"();\n",[5031,5295,5296,5298],{"class":5033,"line":161},[5031,5297,5230],{"class":5058},[5031,5299,5300],{"class":5045},": entry, exit;\n",[5031,5302,5303],{"class":5033,"line":5092},[5031,5304,5089],{"class":5045},[22,5306,5307,5308,5311,5312,5315,5316,5319,5320,5323],{},"For precision, use percentages: ",[33,5309,5310],{},"animation-range: cover 0% cover 50%"," starts at first pixel entry, ends at viewport midpoint. Long-form ",[33,5313,5314],{},"animation-range-start: cover 0%; animation-range-end: cover 50%;"," offers clarity. Mix ranges like ",[33,5317,5318],{},"contain 0%"," to ",[33,5321,5322],{},"exit 50%"," for extended effects.",[22,5325,5326,5327,5330],{},"Use ",[33,5328,5329],{},"scroll()"," timeline for global progress, like fixed reading indicators:",[5024,5332,5334],{"className":5026,"code":5333,"language":178,"meta":136,"style":136},".readingIndicator {\n  animation: expand linear;\n  animation-timeline: scroll();\n}\n",[33,5335,5336,5343,5354,5365],{"__ignoreMap":136},[5031,5337,5338,5341],{"class":5033,"line":5034},[5031,5339,5340],{"class":5051},".readingIndicator",[5031,5342,5046],{"class":5045},[5031,5344,5345,5347,5350,5352],{"class":5033,"line":137},[5031,5346,5103],{"class":5058},[5031,5348,5349],{"class":5045},": expand ",[5031,5351,5273],{"class":5058},[5031,5353,5219],{"class":5045},[5031,5355,5356,5358,5360,5363],{"class":5033,"line":162},[5031,5357,5112],{"class":5058},[5031,5359,5062],{"class":5045},[5031,5361,5362],{"class":5058},"scroll",[5031,5364,5293],{"class":5045},[5031,5366,5367],{"class":5033,"line":161},[5031,5368,5089],{"class":5045},[22,5370,5371],{},"This scales a bar from 0 to total page scroll distance, though scrollbars often suffice.",[17,5373,5375],{"id":5374},"link-timelines-between-elements","Link Timelines Between Elements",[22,5377,5378,5379,5382,5383,5386],{},"Decouple tracking from animation: name a ",[33,5380,5381],{},"view-timeline"," on the trigger element, reference it elsewhere via ",[33,5384,5385],{},"timeline-scope"," on a shared ancestor.",[5024,5388,5390],{"className":5026,"code":5389,"language":178,"meta":136,"style":136},"main {\n  timeline-scope: --tracked-elem;\n}\n.content {\n  view-timeline: --tracked-elem;\n}\n.square {\n  animation: fadeIn backwards, fadeOut forwards;\n  animation-timeline: --tracked-elem, --tracked-elem;\n  animation-range: entry, exit;\n}\n",[33,5391,5392,5399,5407,5411,5418,5425,5429,5436,5451,5459,5466],{"__ignoreMap":136},[5031,5393,5394,5397],{"class":5033,"line":5034},[5031,5395,5396],{"class":5260},"main",[5031,5398,5046],{"class":5045},[5031,5400,5401,5404],{"class":5033,"line":137},[5031,5402,5403],{"class":5058},"  timeline-scope",[5031,5405,5406],{"class":5045},": --tracked-elem;\n",[5031,5408,5409],{"class":5033,"line":162},[5031,5410,5089],{"class":5045},[5031,5412,5413,5416],{"class":5033,"line":161},[5031,5414,5415],{"class":5051},".content",[5031,5417,5046],{"class":5045},[5031,5419,5420,5423],{"class":5033,"line":5092},[5031,5421,5422],{"class":5058},"  view-timeline",[5031,5424,5406],{"class":5045},[5031,5426,5427],{"class":5033,"line":5100},[5031,5428,5089],{"class":5045},[5031,5430,5431,5434],{"class":5033,"line":5109},[5031,5432,5433],{"class":5051},".square",[5031,5435,5046],{"class":5045},[5031,5437,5438,5440,5442,5444,5446,5449],{"class":5033,"line":5118},[5031,5439,5103],{"class":5058},[5031,5441,5270],{"class":5045},[5031,5443,5216],{"class":5058},[5031,5445,5276],{"class":5045},[5031,5447,5448],{"class":5058},"forwards",[5031,5450,5219],{"class":5045},[5031,5452,5454,5456],{"class":5033,"line":5453},9,[5031,5455,5112],{"class":5058},[5031,5457,5458],{"class":5045},": --tracked-elem, --tracked-elem;\n",[5031,5460,5462,5464],{"class":5033,"line":5461},10,[5031,5463,5230],{"class":5058},[5031,5465,5300],{"class":5045},[5031,5467,5469],{"class":5033,"line":5468},11,[5031,5470,5089],{"class":5045},[22,5472,5473,5474,5476,5477,5479,5480,5482],{},"Scroll on ",[33,5475,5415],{}," fades sticky ",[33,5478,5433],{},", even if not descendants—",[33,5481,5385],{}," propagates the named timeline. Limit: names are scoped to creator and descendants unless elevated.",[5484,5485,5486],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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 .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":136,"searchDepth":137,"depth":137,"links":5488},[5489,5490,5491],{"id":5014,"depth":137,"text":5015},{"id":5178,"depth":137,"text":5179},{"id":5374,"depth":137,"text":5375},[146],{"content_references":5494,"triage":5501},[5495,5498],{"type":4907,"title":5496,"url":5497,"context":4911},"Whimsical Animations","https:\u002F\u002Fwhimsy.joshwcomeau.com\u002F",{"type":153,"title":5499,"url":5500,"context":156},"Lipsum.com","https:\u002F\u002Fwww.lipsum.com\u002F",{"relevance":161,"novelty":162,"quality":161,"actionability":161,"composite":163,"reasoning":5502},"Category: Design & Frontend. The article provides practical insights into using the Animation Timeline API for scroll-driven animations, which directly addresses the needs of designers and developers looking to enhance UI\u002FUX. It includes specific code examples and techniques that can be immediately applied in projects.","\u002Fsummaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary","2026-05-03 17:02:04",{"title":5003,"description":136},{"loc":5503},"0541a873071e8673","Josh W. Comeau","article","https:\u002F\u002Fwww.joshwcomeau.com\u002Fanimation\u002Fscroll-driven-animations\u002F","summaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary",[177,4996,178],"Replace time-based keyframes with scroll progress using animation-timeline: view() to trigger animations as elements enter\u002Fexit viewport; customize ranges like entry\u002Fexit for precise control without JavaScript.",[178],"H-OMxl4xx30p7NefpUpuI0olBbU-dSy34fNFMO-yhMk",{"id":5517,"title":5518,"ai":5519,"body":5524,"categories":5664,"created_at":147,"date_modified":147,"description":136,"extension":148,"faq":147,"featured":149,"kicker_label":147,"meta":5665,"navigation":165,"path":5675,"published_at":5676,"question":147,"scraped_at":5677,"seo":5678,"sitemap":5679,"source_id":5680,"source_name":5681,"source_type":173,"source_url":5682,"stem":5683,"tags":5684,"thumbnail_url":5686,"tldr":5687,"tweet":5688,"unknown_tags":5689,"__hash__":5690},"summaries\u002Fsummaries\u002F20c8a07ac262eba4-modern-web-ui-new-css-and-browser-primitives-summary.md","Modern Web UI: New CSS and Browser Primitives",{"provider":7,"model":8,"input_tokens":5520,"output_tokens":5521,"processing_time_ms":5522,"cost_usd":5523},9829,762,4513,0.00360025,{"type":14,"value":5525,"toc":5657},[5526,5530,5533,5537,5540,5578,5582,5585,5619,5623,5626,5646,5650],[17,5527,5529],{"id":5528},"the-modern-web-ux-framework","The Modern Web UX Framework",[22,5531,5532],{},"Modern web development is shifting toward five core principles: respecting user preferences, implementing natural interactions, providing guided navigation, maximizing content\u002Freducing noise, and adapting to form factors. The goal is to bridge the gap between high-performance graphics and the semantic web.",[17,5534,5536],{"id":5535},"advanced-css-theming-and-personalization","Advanced CSS Theming and Personalization",[22,5538,5539],{},"Building dynamic themes that respect system-level preferences is becoming significantly easier with new CSS primitives:",[49,5541,5542,5548,5554,5568],{},[52,5543,5544,5547],{},[55,5545,5546],{},"contrast-color()",": A function that automatically returns black or white based on the WCAG 2 algorithm for a given background color, ensuring accessible text contrast.",[52,5549,5550,5553],{},[55,5551,5552],{},"light\u002Fdark()",": A native utility to toggle values based on system color schemes. This has been extended to support images, allowing developers to swap assets based on theme.",[52,5555,5556,5559,5560,5563,5564,5567],{},[55,5557,5558],{},"Style Queries & @function",": By combining custom properties with style queries, developers can create custom conditional logic. The new ",[33,5561,5562],{},"@function"," and ",[33,5565,5566],{},"if()"," function allow for complex conditional styling directly within property values, reducing the need for JavaScript-heavy state management.",[52,5569,5570,5573,5574,5577],{},[55,5571,5572],{},"Text Scaling",": The new ",[33,5575,5576],{},"meta=text-scale"," tag allows browsers to handle system-level font size changes natively, ensuring layouts remain responsive without manual base font size calculations.",[17,5579,5581],{"id":5580},"natural-interactions-and-motion","Natural Interactions and Motion",[22,5583,5584],{},"To make web interfaces feel like native applications, developers should prioritize physics-based motion:",[49,5586,5587,5596,5610],{},[52,5588,5589,5592,5593,5595],{},[55,5590,5591],{},"Linear Easing",": While true spring physics are still in development, the ",[33,5594,5130],{}," easing function allows for complex, multi-step animation curves that approximate natural bounce and overshoot effects.",[52,5597,5598,5601,5602,5605,5606,5609],{},[55,5599,5600],{},"Dialog and Popover Enhancements",": The ",[33,5603,5604],{},"\u003Cdialog>"," element now supports declarative light dismiss (",[33,5607,5608],{},"closedby=\"any\"","), allowing modals to close via escape keys or back gestures without custom JavaScript.",[52,5611,5612,5601,5615,5618],{},[55,5613,5614],{},"Corner Shapes",[33,5616,5617],{},"corner-shape"," property moves beyond simple border-radius, supporting bevel, notch, scoop, and squircle shapes, which are fully animatable.",[17,5620,5622],{"id":5621},"view-transitions-and-navigation","View Transitions and Navigation",[22,5624,5625],{},"View Transitions are evolving from simple page-wide animations to granular, stateful controls:",[49,5627,5628,5634,5640],{},[52,5629,5630,5633],{},[55,5631,5632],{},"Element-Scoped View Transitions",": This allows developers to trigger transitions on a specific DOM subtree without blocking the rest of the page. This is ideal for micro-interactions like filtering lists or adding items to a cart while keeping the navigation bar and other UI elements interactive.",[52,5635,5636,5639],{},[55,5637,5638],{},"View Transitions Toolkit",": A utility library that provides helpers for hardware-accelerated animations (using scale\u002Ftranslate instead of width\u002Fheight) and scrub functions to sync animations with scroll events or drag gestures.",[52,5641,5642,5645],{},[55,5643,5644],{},"Two-Phase View Transitions",": A prototype feature that allows cross-document transitions to initiate immediately, improving perceived performance by not waiting for the full DOM to load.",[17,5647,5649],{"id":5648},"html-in-canvas","HTML-in-Canvas",[22,5651,5652,5653,5656],{},"A new paradigm for high-performance graphics, this feature allows developers to render accessible, semantic DOM content directly inside a ",[33,5654,5655],{},"\u003Ccanvas>"," element, bridging the gap between game-like performance and accessible web standards.",{"title":136,"searchDepth":137,"depth":137,"links":5658},[5659,5660,5661,5662,5663],{"id":5528,"depth":137,"text":5529},{"id":5535,"depth":137,"text":5536},{"id":5580,"depth":137,"text":5581},{"id":5621,"depth":137,"text":5622},{"id":5648,"depth":137,"text":5649},[146],{"content_references":5666,"triage":5672},[5667,5669],{"type":153,"title":5638,"url":5668,"context":4911},"https:\u002F\u002Fgoo.gle\u002Fio26-web-ui-codepen-demos",{"type":5670,"title":5671,"context":156},"podcast","The CSS Podcast",{"relevance":161,"novelty":162,"quality":161,"actionability":162,"composite":5673,"reasoning":5674},3.6,"Category: Design & Frontend. The article discusses new CSS functions and browser primitives that enhance UI\u002FUX design, addressing the audience's interest in building functional interfaces. It provides specific examples like the contrast-color() function, which can directly improve accessibility in web applications.","\u002Fsummaries\u002F20c8a07ac262eba4-modern-web-ui-new-css-and-browser-primitives-summary","2026-05-22 16:11:55","2026-06-06 15:50:55",{"title":5518,"description":136},{"loc":5675},"20c8a07ac262eba4","Chrome for Developers","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=uT7MVcCQ4rw","summaries\u002F20c8a07ac262eba4-modern-web-ui-new-css-and-browser-primitives-summary",[4996,5685,177,178],"web-performance","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FuT7MVcCQ4rw\u002Fhqdefault.jpg","The web platform is evolving to support high-quality, native-feeling experiences through new CSS functions like contrast-color(), element-scoped view transitions, and improved accessibility primitives.","This session from Google I\u002FO 2026 provides a technical overview of modern CSS and browser APIs designed to improve UI adaptability and user experience. It focuses on native primitives for theming, responsive design, and interaction, rather than external frameworks.\n\n* [@function](https:\u002F\u002Fgoo.gle\u002F42E2HNu) — CSS custom functions for conditional logic\n* [Style Queries](https:\u002F\u002Fgoo.gle\u002F4nA8SvR) — querying parent styles for component adaptation\n* [contrast-color()](https:\u002F\u002Fgoo.gle\u002F4derGNv) — automatic WCAG-compliant text color selection\n* [Element-scoped View Transitions](https:\u002F\u002Fgoo.gle\u002F42DlZTi) — granular control over page transitions\n* [Scroll-triggered Animations](https:\u002F\u002Fgoo.gle\u002F4wDZvzo) — native browser-based animation hooks\n* [meta=text-scale](https:\u002F\u002Fgoo.gle\u002F4ugEnxx) — handling system-level font size preferences\n* [Overscroll Gestures Explainer](https:\u002F\u002Fgoo.gle\u002F3PsNV9o) — documentation on native gesture interactions\n* [Modern Web Guidance](https:\u002F\u002Fgoo.gle\u002Fmodern-web-guidance) — best practices for modern UI development\n* [CodePen Demos](https:\u002F\u002Fgoo.gle\u002Fio26-web-ui-codepen-demos) — interactive examples of the features discussed",[178],"fH-ZeN6oZSprF9i2I0Gs31PwT293cugbDZhvTU0nlNA"]