[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"summary-modern-css-builds-rich-uis-without-javascript-summary":3,"summaries-facets-categories":606,"summary-related-modern-css-builds-rich-uis-without-javascript-summary":5011},{"id":4,"title":5,"ai":6,"body":13,"categories":561,"created_at":563,"date_modified":563,"description":79,"extension":564,"faq":563,"featured":565,"kicker_label":563,"meta":566,"navigation":588,"path":589,"published_at":590,"question":563,"scraped_at":591,"seo":592,"sitemap":593,"source_id":594,"source_name":595,"source_type":596,"source_url":597,"stem":598,"tags":599,"thumbnail_url":563,"tldr":603,"tweet":563,"unknown_tags":604,"__hash__":605},"summaries\u002Fsummaries\u002Fmodern-css-builds-rich-uis-without-javascript-summary.md","Modern CSS Builds Rich UIs Without JavaScript",{"provider":7,"model":8,"input_tokens":9,"output_tokens":10,"processing_time_ms":11,"cost_usd":12},"openrouter","x-ai\u002Fgrok-4.1-fast",8988,2710,25855,0.00312995,{"type":14,"value":15,"toc":556},"minimark",[16,21,25,28,31,35,38,41,44,47,51,54,552],[17,18,20],"h2",{"id":19},"csss-persistent-pain-points-and-why-they-persist","CSS's Persistent Pain Points and Why They Persist",[22,23,24],"p",{},"CSS draws ire for good reasons: it's not standalone (needs HTML), hard to test (no output or errors, relies on visual regression via headless browsers), global by nature (changes ripple unpredictably), and riddled with early design flaws. The CSS Working Group's wiki lists an 'incomplete list of mistakes'—decisions shipped hastily that can't be fixed without 'breaking the internet,' per the golden rule of web evolution. Developers copy-paste styles to avoid breakage, bloating codebases. Abstractions like Tailwind (utility classes) or CSS-in-JS (transpile JS to CSS) promise escape but leak, forcing raw CSS eventually.",[22,26,27],{},"Beattie, building web apps since 1992 (pre-CSS), notes CSS's unskippable role: unlike swapping Java for Python, web work demands it. Stack Overflow lumps it with HTML in surveys, as standalone CSS polls would skew 'most hated.' Yet, happiness breeds good code—CSS frustrates because it's undervalued. Quote: \"CSS is the programming language that everybody loves to hate, the most controversial color in the developers palette.\" (Dylan Beattie, opening hook—counters dismissal by Turing-complete purists.)",[22,29,30],{},"Tradeoffs: No unit tests mean Slack pings for unseen side effects (e.g., submit button vanishes on unrelated page). Visual regression is state-of-the-art but heavy. LLM training on public repos yields poor CSS suggestions due to widespread bad code.",[17,32,34],{"id":33},"historical-pattern-hacks-become-native-features","Historical Pattern: Hacks Become Native Features",[22,36,37],{},"Web features follow a cycle: designers crave brochure-like sites over OS-skewed defaults (gray buttons mimicking WinForms). Early hacks—Photoshop-sliced tables for rounded corners (£10\u002Fbutton in late '90s agencies)—go viral via CodePens, polyfills. Browsers standardize (border-radius after Netscape\u002FSafari; IE resisted until Windows 8's Metro flop). Novelty fades: \"No one looks at a website with rounded corners and goes, 'Wow, how did they do that?'\"",[22,39,40],{},"Roots in Mosaic (1992-93): Marc Andreessen dismissed rendering gripes as 'browser choices,' empowering user control (screen readers, text browsers) over pixel-perfect docs. Quote: \"Sorry, you're screwed. Oh well, live and learn or not.\" (Marc Andreessen, 1994 WWWALK list reply—highlights early web's philosophy of device-agnostic structure, clashing with modern branding demands.)",[22,42,43],{},"CSS\u002FHTML evolve rapidly: proposals to baseline in months (vs. 5 years), via auto-updates. Baseline project tracks cross-engine support; caniuse.com details rollout (e.g., Chrome 2011 lags). Smart specs from browser teams prioritize layout, accessibility, interactions—grids, flexbox, animations, view transitions—once JS-only.",[22,45,46],{},"Shift: Reclassify 'behavior' (form feedback, animations) as presentation. Less JS improves perf, accessibility. Quote: \"A lot of the stuff we thought was behavior, it's actually a presentation concern... The less JavaScript in the world the better.\" (Beattie, reframing pillars: semantic HTML=structure, CSS=presentation, JS=logic only.)",[17,48,50],{"id":49},"native-elements-css-for-framework-free-components","Native Elements + CSS for Framework-Free Components",[22,52,53],{},"Accordions (Bootstrap, Flowbite\u002FTailwind, Material UI) used div soups + JS for 10-15 years. HTML's ",[55,56,57],"details",{},[58,59,60,61,65,66,73,444,447,507,510,514],"summary",{}," (Chrome 2011, Safari 2012, Firefox 2016, Edge 2020) enables native expand\u002Fcollapse. Add ",[62,63,64],"code",{},"name"," attribute (baseline late 2024) for radio-like mutual exclusivity—Firefox\u002FSafari caught up recently, missed by most.",[22,67,68,69,72],{},"Beattie's discography demo: ",[62,70,71],{},"\u003Cdetails name=\"discog\">"," lists bands\u002Fphotos. CSS transforms defaults:",[74,75,80],"pre",{"className":76,"code":77,"language":78,"meta":79,"style":79},"language-css shiki shiki-themes github-light github-dark","details {\n  margin-bottom: 0.5rem;\n}\ndetails summary {\n  cursor: pointer;\n  border: 1px solid;\n  background: Gainsboro;\n  padding: 0.5rem;\n}\ndetails[open] {\n  border-color: navy;\n  background: royalblue;\n  border-radius: 0.5rem 0.5rem 0 0;\n}\ndetails::after { \u002F* Pseudo for content *\u002F\n  content: '';\n  display: block;\n  border: 2px solid transparent;\n  border-top: none;\n  padding: 0.5rem;\n}\ndetails[open]::after {\n  border-color: white;\n  border-radius: 0 0 0.5rem 0.5rem;\n}\nsummary + * {\n  padding-top: 0; \u002F* First sibling fix *\u002F\n}\n","css","",[62,81,82,94,114,120,130,143,162,175,189,194,209,222,234,258,263,278,292,305,324,337,350,355,371,383,405,410,423,439],{"__ignoreMap":79},[83,84,87,90],"span",{"class":85,"line":86},"line",1,[83,88,55],{"class":89},"s9eBZ",[83,91,93],{"class":92},"sVt8B"," {\n",[83,95,97,101,104,107,111],{"class":85,"line":96},2,[83,98,100],{"class":99},"sj4cs","  margin-bottom",[83,102,103],{"class":92},": ",[83,105,106],{"class":99},"0.5",[83,108,110],{"class":109},"szBVR","rem",[83,112,113],{"class":92},";\n",[83,115,117],{"class":85,"line":116},3,[83,118,119],{"class":92},"}\n",[83,121,123,125,128],{"class":85,"line":122},4,[83,124,55],{"class":89},[83,126,127],{"class":89}," summary",[83,129,93],{"class":92},[83,131,133,136,138,141],{"class":85,"line":132},5,[83,134,135],{"class":99},"  cursor",[83,137,103],{"class":92},[83,139,140],{"class":99},"pointer",[83,142,113],{"class":92},[83,144,146,149,151,154,157,160],{"class":85,"line":145},6,[83,147,148],{"class":99},"  border",[83,150,103],{"class":92},[83,152,153],{"class":99},"1",[83,155,156],{"class":109},"px",[83,158,159],{"class":99}," solid",[83,161,113],{"class":92},[83,163,165,168,170,173],{"class":85,"line":164},7,[83,166,167],{"class":99},"  background",[83,169,103],{"class":92},[83,171,172],{"class":99},"Gainsboro",[83,174,113],{"class":92},[83,176,178,181,183,185,187],{"class":85,"line":177},8,[83,179,180],{"class":99},"  padding",[83,182,103],{"class":92},[83,184,106],{"class":99},[83,186,110],{"class":109},[83,188,113],{"class":92},[83,190,192],{"class":85,"line":191},9,[83,193,119],{"class":92},[83,195,197,199,202,206],{"class":85,"line":196},10,[83,198,55],{"class":89},[83,200,201],{"class":92},"[",[83,203,205],{"class":204},"sScJk","open",[83,207,208],{"class":92},"] {\n",[83,210,212,215,217,220],{"class":85,"line":211},11,[83,213,214],{"class":99},"  border-color",[83,216,103],{"class":92},[83,218,219],{"class":99},"navy",[83,221,113],{"class":92},[83,223,225,227,229,232],{"class":85,"line":224},12,[83,226,167],{"class":99},[83,228,103],{"class":92},[83,230,231],{"class":99},"royalblue",[83,233,113],{"class":92},[83,235,237,240,242,244,246,249,251,254,256],{"class":85,"line":236},13,[83,238,239],{"class":99},"  border-radius",[83,241,103],{"class":92},[83,243,106],{"class":99},[83,245,110],{"class":109},[83,247,248],{"class":99}," 0.5",[83,250,110],{"class":109},[83,252,253],{"class":99}," 0",[83,255,253],{"class":99},[83,257,113],{"class":92},[83,259,261],{"class":85,"line":260},14,[83,262,119],{"class":92},[83,264,266,268,271,274],{"class":85,"line":265},15,[83,267,55],{"class":89},[83,269,270],{"class":204},"::after",[83,272,273],{"class":92}," { ",[83,275,277],{"class":276},"sJ8bj","\u002F* Pseudo for content *\u002F\n",[83,279,281,284,286,290],{"class":85,"line":280},16,[83,282,283],{"class":99},"  content",[83,285,103],{"class":92},[83,287,289],{"class":288},"sZZnC","''",[83,291,113],{"class":92},[83,293,295,298,300,303],{"class":85,"line":294},17,[83,296,297],{"class":99},"  display",[83,299,103],{"class":92},[83,301,302],{"class":99},"block",[83,304,113],{"class":92},[83,306,308,310,312,315,317,319,322],{"class":85,"line":307},18,[83,309,148],{"class":99},[83,311,103],{"class":92},[83,313,314],{"class":99},"2",[83,316,156],{"class":109},[83,318,159],{"class":99},[83,320,321],{"class":99}," transparent",[83,323,113],{"class":92},[83,325,327,330,332,335],{"class":85,"line":326},19,[83,328,329],{"class":99},"  border-top",[83,331,103],{"class":92},[83,333,334],{"class":99},"none",[83,336,113],{"class":92},[83,338,340,342,344,346,348],{"class":85,"line":339},20,[83,341,180],{"class":99},[83,343,103],{"class":92},[83,345,106],{"class":99},[83,347,110],{"class":109},[83,349,113],{"class":92},[83,351,353],{"class":85,"line":352},21,[83,354,119],{"class":92},[83,356,358,360,362,364,367,369],{"class":85,"line":357},22,[83,359,55],{"class":89},[83,361,201],{"class":92},[83,363,205],{"class":204},[83,365,366],{"class":92},"]",[83,368,270],{"class":204},[83,370,93],{"class":92},[83,372,374,376,378,381],{"class":85,"line":373},23,[83,375,214],{"class":99},[83,377,103],{"class":92},[83,379,380],{"class":99},"white",[83,382,113],{"class":92},[83,384,386,388,390,393,395,397,399,401,403],{"class":85,"line":385},24,[83,387,239],{"class":99},[83,389,103],{"class":92},[83,391,392],{"class":99},"0",[83,394,253],{"class":99},[83,396,248],{"class":99},[83,398,110],{"class":109},[83,400,248],{"class":99},[83,402,110],{"class":109},[83,404,113],{"class":92},[83,406,408],{"class":85,"line":407},25,[83,409,119],{"class":92},[83,411,413,415,418,421],{"class":85,"line":412},26,[83,414,58],{"class":89},[83,416,417],{"class":109}," +",[83,419,420],{"class":89}," *",[83,422,93],{"class":92},[83,424,426,429,431,433,436],{"class":85,"line":425},27,[83,427,428],{"class":99},"  padding-top",[83,430,103],{"class":92},[83,432,392],{"class":99},[83,434,435],{"class":92},"; ",[83,437,438],{"class":276},"\u002F* First sibling fix *\u002F\n",[83,440,442],{"class":85,"line":441},28,[83,443,119],{"class":92},[22,445,446],{},"Nested syntax (native, post-preprocessors like Sass):",[74,448,450],{"className":76,"code":449,"language":78,"meta":79,"style":79},"details {\n  \u002F* ... *\u002F\n  &[open] {\n    \u002F* open styles *\u002F\n  }\n  &::after { \u002F* content pseudo *\u002F\n    \u002F* ... *\u002F\n  }\n}\n",[62,451,452,458,463,472,477,482,494,499,503],{"__ignoreMap":79},[83,453,454,456],{"class":85,"line":86},[83,455,55],{"class":89},[83,457,93],{"class":92},[83,459,460],{"class":85,"line":96},[83,461,462],{"class":276},"  \u002F* ... *\u002F\n",[83,464,465,468,470],{"class":85,"line":116},[83,466,467],{"class":92},"  &[",[83,469,205],{"class":99},[83,471,208],{"class":92},[83,473,474],{"class":85,"line":122},[83,475,476],{"class":276},"    \u002F* open styles *\u002F\n",[83,478,479],{"class":85,"line":132},[83,480,481],{"class":92},"  }\n",[83,483,484,487,489,491],{"class":85,"line":145},[83,485,486],{"class":92},"  &",[83,488,270],{"class":204},[83,490,273],{"class":92},[83,492,493],{"class":276},"\u002F* content pseudo *\u002F\n",[83,495,496],{"class":85,"line":164},[83,497,498],{"class":276},"    \u002F* ... *\u002F\n",[83,500,501],{"class":85,"line":177},[83,502,481],{"class":92},[83,504,505],{"class":85,"line":191},[83,506,119],{"class":92},[22,508,509],{},"Results: Smooth, accessible accordion rivaling libraries. No JS (maybe 'tiny bit' elsewhere). Tradeoffs: Recent mutual exclusivity limits legacy support; monitor caniuse.",[17,511,513],{"id":512},"key-takeaways","Key Takeaways",[515,516,517,524,534,537,540,543,546,549],"ul",{},[518,519,520,521],"li",{},"Prioritize semantic HTML (",[55,522,523],{},") over div\u002FJS hacks—native since ~2011, mutual exclusive now baseline.",[518,525,526,527,529,530,533],{},"Use CSS pseudo-elements (",[62,528,270],{}," for content) and classes (",[62,531,532],{},":open",") for state-driven styling.",[518,535,536],{},"Nested CSS keeps rules collapsible, scoped—adopt over flat selectors.",[518,538,539],{},"Track evolution via caniuse.com\u002Fbaseline; features ship in months, not years.",[518,541,542],{},"Reframe interactions as presentation: cut JS for perf\u002Faccessibility unless business logic.",[518,544,545],{},"Test via visual regression; embrace CSS's globals by auditing cascades.",[518,547,548],{},"Cycle-proof: Hacks (rounded corners) become boring natives—leverage, don't reinvent.",[518,550,551],{},"Quote: \"You can't build software with it, but you can't avoid it.\" (Beattie on CSS's inescapability—pushes hands-on mastery over abstractions.)",[553,554,555],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":79,"searchDepth":96,"depth":96,"links":557},[558,559,560],{"id":19,"depth":96,"text":20},{"id":33,"depth":96,"text":34},{"id":49,"depth":96,"text":50},[562],"Design & Frontend",null,"md",false,{"content_references":567,"triage":585},[568,573,575,579,583],{"type":569,"title":570,"url":571,"context":572},"tool","Can I Use","https:\u002F\u002Fcaniuse.com","mentioned",{"type":569,"title":574,"context":572},"Tailwind",{"type":576,"title":577,"author":578,"context":572},"other","Incomplete list of mistakes in the design of CSS","CSS Working Group",{"type":580,"title":581,"url":582,"context":572},"event","PubConf","https:\u002F\u002Fpubconf.io",{"type":569,"title":584,"context":572},"Baseline",{"relevance":116,"novelty":116,"quality":122,"actionability":96,"composite":586,"reasoning":587},3.05,"Category: Design & Frontend. The article discusses modern CSS techniques for building UIs without JavaScript, which is relevant to the audience interested in design systems and frontend architecture. However, while it provides insights into CSS's evolution and challenges, it lacks specific actionable steps or frameworks that the audience can directly implement.",true,"\u002Fsummaries\u002Fmodern-css-builds-rich-uis-without-javascript-summary","2026-02-05 10:27:02","2026-04-19 01:20:07",{"title":5,"description":79},{"loc":589},"4f81e2f9f04ae882","AI Summaries (evaluation playlist)","article","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=nhbYveaV0pk","summaries\u002Fmodern-css-builds-rich-uis-without-javascript-summary",[600,601,602],"frontend","ui-ux","coding","Dylan Beattie shows how semantic HTML + evolving CSS features like details elements and pseudo-selectors create professional accordions and interactions—no JS or frameworks needed.",[],"RWVpUrlUBTPzA6FOKm2HNDT3ps4-OBumIBzUjA5i3pc",[607,610,612,615,617,620,623,625,628,630,632,634,636,638,640,642,645,647,649,651,653,655,657,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,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,970,972,974,976,978,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,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,4811,4813,4815,4817,4819,4821,4823,4825,4827,4829,4831,4833,4835,4837,4839,4841,4843,4845,4847,4849,4851,4853,4855,4857,4859,4861,4863,4865,4867,4869,4871,4873,4875,4877,4879,4881,4883,4885,4887,4889,4891,4893,4895,4897,4899,4901,4903,4905,4907,4909,4911,4913,4915,4917,4919,4921,4923,4925,4927,4929,4931,4933,4935,4937,4939,4941,4943,4945,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967,4969,4971,4973,4975,4977,4979,4981,4983,4985,4987,4989,4991,4993,4995,4997,4999,5001,5003,5005,5007,5009],{"categories":608},[609],"Business & SaaS",{"categories":611},[609],{"categories":613},[614],"AI News & Trends",{"categories":616},[],{"categories":618},[619],"AI Automation",{"categories":621},[622],"Marketing & Growth",{"categories":624},[562],{"categories":626},[627],"Software Engineering",{"categories":629},[619],{"categories":631},[],{"categories":633},[562],{"categories":635},[562],{"categories":637},[619],{"categories":639},[562],{"categories":641},[562],{"categories":643},[644],"AI & LLMs",{"categories":646},[562],{"categories":648},[562],{"categories":650},[],{"categories":652},[562],{"categories":654},[562],{"categories":656},[644],{"categories":658},[659],"Developer Productivity",{"categories":661},[644],{"categories":663},[644],{"categories":665},[644],{"categories":667},[614],{"categories":669},[644],{"categories":671},[619],{"categories":673},[609],{"categories":675},[614],{"categories":677},[622],{"categories":679},[],{"categories":681},[],{"categories":683},[619],{"categories":685},[619],{"categories":687},[619],{"categories":689},[622],{"categories":691},[644],{"categories":693},[659],{"categories":695},[614],{"categories":697},[],{"categories":699},[],{"categories":701},[],{"categories":703},[704],"Data Science & Visualization",{"categories":706},[],{"categories":708},[619],{"categories":710},[627],{"categories":712},[619],{"categories":714},[619],{"categories":716},[644],{"categories":718},[622],{"categories":720},[619],{"categories":722},[],{"categories":724},[],{"categories":726},[],{"categories":728},[562],{"categories":730},[562],{"categories":732},[619],{"categories":734},[622],{"categories":736},[659],{"categories":738},[562],{"categories":740},[644],{"categories":742},[627],{"categories":744},[644],{"categories":746},[],{"categories":748},[619],{"categories":750},[644],{"categories":752},[659],{"categories":754},[659],{"categories":756},[],{"categories":758},[622],{"categories":760},[609],{"categories":762},[644],{"categories":764},[609],{"categories":766},[609],{"categories":768},[619],{"categories":770},[622],{"categories":772},[619],{"categories":774},[609],{"categories":776},[619],{"categories":778},[562],{"categories":780},[644],{"categories":782},[562],{"categories":784},[644],{"categories":786},[609],{"categories":788},[644],{"categories":790},[622],{"categories":792},[],{"categories":794},[644],{"categories":796},[609],{"categories":798},[],{"categories":800},[614],{"categories":802},[627],{"categories":804},[],{"categories":806},[644],{"categories":808},[562],{"categories":810},[644],{"categories":812},[562],{"categories":814},[],{"categories":816},[619],{"categories":818},[],{"categories":820},[],{"categories":822},[],{"categories":824},[644],{"categories":826},[],{"categories":828},[644],{"categories":830},[644],{"categories":832},[562],{"categories":834},[644],{"categories":836},[659],{"categories":838},[619],{"categories":840},[622],{"categories":842},[659],{"categories":844},[659],{"categories":846},[659],{"categories":848},[622],{"categories":850},[622],{"categories":852},[644],{"categories":854},[644],{"categories":856},[562],{"categories":858},[609],{"categories":860},[562],{"categories":862},[627],{"categories":864},[609],{"categories":866},[609],{"categories":868},[609],{"categories":870},[562],{"categories":872},[],{"categories":874},[],{"categories":876},[644],{"categories":878},[644],{"categories":880},[627],{"categories":882},[644],{"categories":884},[644],{"categories":886},[],{"categories":888},[644],{"categories":890},[644],{"categories":892},[],{"categories":894},[644],{"categories":896},[614],{"categories":898},[614],{"categories":900},[],{"categories":902},[],{"categories":904},[622],{"categories":906},[622],{"categories":908},[627],{"categories":910},[644],{"categories":912},[],{"categories":914},[],{"categories":916},[619],{"categories":918},[644],{"categories":920},[644],{"categories":922},[],{"categories":924},[644,609],{"categories":926},[644],{"categories":928},[],{"categories":930},[644],{"categories":932},[644],{"categories":934},[],{"categories":936},[],{"categories":938},[619],{"categories":940},[644],{"categories":942},[644],{"categories":944},[619],{"categories":946},[644],{"categories":948},[],{"categories":950},[],{"categories":952},[644],{"categories":954},[],{"categories":956},[644],{"categories":958},[644],{"categories":960},[],{"categories":962},[619],{"categories":964},[562],{"categories":966},[],{"categories":968},[619,969],"DevOps & Cloud",{"categories":971},[644],{"categories":973},[619],{"categories":975},[644],{"categories":977},[],{"categories":979},[],{"categories":981},[],{"categories":983},[],{"categories":985},[644],{"categories":987},[619],{"categories":989},[],{"categories":991},[619],{"categories":993},[],{"categories":995},[644],{"categories":997},[],{"categories":999},[],{"categories":1001},[],{"categories":1003},[],{"categories":1005},[619],{"categories":1007},[562],{"categories":1009},[644],{"categories":1011},[622],{"categories":1013},[614],{"categories":1015},[609],{"categories":1017},[659],{"categories":1019},[],{"categories":1021},[619],{"categories":1023},[619],{"categories":1025},[644],{"categories":1027},[],{"categories":1029},[],{"categories":1031},[],{"categories":1033},[619],{"categories":1035},[],{"categories":1037},[619],{"categories":1039},[619],{"categories":1041},[614],{"categories":1043},[619],{"categories":1045},[644],{"categories":1047},[],{"categories":1049},[644],{"categories":1051},[],{"categories":1053},[614],{"categories":1055},[619,1056],"Product Strategy",{"categories":1058},[627],{"categories":1060},[969],{"categories":1062},[1056],{"categories":1064},[644],{"categories":1066},[619],{"categories":1068},[],{"categories":1070},[614],{"categories":1072},[614],{"categories":1074},[619],{"categories":1076},[],{"categories":1078},[619],{"categories":1080},[644],{"categories":1082},[644],{"categories":1084},[659],{"categories":1086},[644],{"categories":1088},[],{"categories":1090},[644,627],{"categories":1092},[614],{"categories":1094},[644],{"categories":1096},[614],{"categories":1098},[619],{"categories":1100},[614],{"categories":1102},[],{"categories":1104},[627],{"categories":1106},[609],{"categories":1108},[],{"categories":1110},[619],{"categories":1112},[619],{"categories":1114},[619],{"categories":1116},[619],{"categories":1118},[609],{"categories":1120},[562],{"categories":1122},[622],{"categories":1124},[],{"categories":1126},[619],{"categories":1128},[],{"categories":1130},[614],{"categories":1132},[614],{"categories":1134},[614],{"categories":1136},[619],{"categories":1138},[614],{"categories":1140},[644],{"categories":1142},[659],{"categories":1144},[644],{"categories":1146},[627],{"categories":1148},[644,659],{"categories":1150},[659],{"categories":1152},[659],{"categories":1154},[659],{"categories":1156},[659],{"categories":1158},[644],{"categories":1160},[],{"categories":1162},[],{"categories":1164},[622],{"categories":1166},[],{"categories":1168},[644],{"categories":1170},[659],{"categories":1172},[644],{"categories":1174},[562],{"categories":1176},[627],{"categories":1178},[],{"categories":1180},[644],{"categories":1182},[659],{"categories":1184},[622],{"categories":1186},[614],{"categories":1188},[627],{"categories":1190},[644],{"categories":1192},[],{"categories":1194},[627],{"categories":1196},[562],{"categories":1198},[609],{"categories":1200},[609],{"categories":1202},[],{"categories":1204},[562],{"categories":1206},[609],{"categories":1208},[614],{"categories":1210},[659],{"categories":1212},[619],{"categories":1214},[619],{"categories":1216},[644],{"categories":1218},[644],{"categories":1220},[614],{"categories":1222},[614],{"categories":1224},[659],{"categories":1226},[614],{"categories":1228},[],{"categories":1230},[1056],{"categories":1232},[619],{"categories":1234},[614],{"categories":1236},[614],{"categories":1238},[614],{"categories":1240},[644],{"categories":1242},[619],{"categories":1244},[619],{"categories":1246},[609],{"categories":1248},[609],{"categories":1250},[644],{"categories":1252},[614],{"categories":1254},[],{"categories":1256},[644],{"categories":1258},[609],{"categories":1260},[619],{"categories":1262},[619],{"categories":1264},[619],{"categories":1266},[562],{"categories":1268},[619],{"categories":1270},[659],{"categories":1272},[614],{"categories":1274},[614],{"categories":1276},[614],{"categories":1278},[614],{"categories":1280},[614],{"categories":1282},[],{"categories":1284},[],{"categories":1286},[659],{"categories":1288},[614],{"categories":1290},[614],{"categories":1292},[614],{"categories":1294},[],{"categories":1296},[644],{"categories":1298},[],{"categories":1300},[],{"categories":1302},[562],{"categories":1304},[609],{"categories":1306},[],{"categories":1308},[614],{"categories":1310},[619],{"categories":1312},[619],{"categories":1314},[619],{"categories":1316},[622],{"categories":1318},[619],{"categories":1320},[],{"categories":1322},[614],{"categories":1324},[614],{"categories":1326},[644],{"categories":1328},[],{"categories":1330},[622],{"categories":1332},[622],{"categories":1334},[644],{"categories":1336},[614],{"categories":1338},[609],{"categories":1340},[627],{"categories":1342},[644],{"categories":1344},[],{"categories":1346},[644],{"categories":1348},[644],{"categories":1350},[627],{"categories":1352},[644],{"categories":1354},[644],{"categories":1356},[644],{"categories":1358},[622],{"categories":1360},[614],{"categories":1362},[644],{"categories":1364},[644],{"categories":1366},[614],{"categories":1368},[619],{"categories":1370},[659],{"categories":1372},[609],{"categories":1374},[644],{"categories":1376},[659],{"categories":1378},[659],{"categories":1380},[],{"categories":1382},[622],{"categories":1384},[614],{"categories":1386},[614],{"categories":1388},[659],{"categories":1390},[619],{"categories":1392},[619],{"categories":1394},[619],{"categories":1396},[619],{"categories":1398},[562],{"categories":1400},[644],{"categories":1402},[644],{"categories":1404},[1056],{"categories":1406},[644],{"categories":1408},[644],{"categories":1410},[619],{"categories":1412},[609],{"categories":1414},[622],{"categories":1416},[],{"categories":1418},[609],{"categories":1420},[609],{"categories":1422},[],{"categories":1424},[562],{"categories":1426},[644],{"categories":1428},[],{"categories":1430},[],{"categories":1432},[614],{"categories":1434},[614],{"categories":1436},[614],{"categories":1438},[614],{"categories":1440},[],{"categories":1442},[614],{"categories":1444},[644],{"categories":1446},[644],{"categories":1448},[],{"categories":1450},[614],{"categories":1452},[614],{"categories":1454},[609],{"categories":1456},[644],{"categories":1458},[],{"categories":1460},[],{"categories":1462},[614],{"categories":1464},[614],{"categories":1466},[614],{"categories":1468},[644],{"categories":1470},[614],{"categories":1472},[614],{"categories":1474},[614],{"categories":1476},[614],{"categories":1478},[614],{"categories":1480},[],{"categories":1482},[619],{"categories":1484},[644],{"categories":1486},[622],{"categories":1488},[609],{"categories":1490},[619],{"categories":1492},[644],{"categories":1494},[],{"categories":1496},[622],{"categories":1498},[614],{"categories":1500},[614],{"categories":1502},[614],{"categories":1504},[614],{"categories":1506},[659],{"categories":1508},[627],{"categories":1510},[],{"categories":1512},[644],{"categories":1514},[619],{"categories":1516},[619],{"categories":1518},[619],{"categories":1520},[969],{"categories":1522},[619],{"categories":1524},[644],{"categories":1526},[644],{"categories":1528},[627],{"categories":1530},[969],{"categories":1532},[704],{"categories":1534},[644],{"categories":1536},[704],{"categories":1538},[],{"categories":1540},[622],{"categories":1542},[622],{"categories":1544},[562],{"categories":1546},[969],{"categories":1548},[619],{"categories":1550},[644],{"categories":1552},[644],{"categories":1554},[619],{"categories":1556},[619],{"categories":1558},[619],{"categories":1560},[659],{"categories":1562},[659],{"categories":1564},[619],{"categories":1566},[619],{"categories":1568},[],{"categories":1570},[619],{"categories":1572},[619],{"categories":1574},[644],{"categories":1576},[704],{"categories":1578},[619],{"categories":1580},[619],{"categories":1582},[619],{"categories":1584},[619],{"categories":1586},[609],{"categories":1588},[562],{"categories":1590},[614],{"categories":1592},[627],{"categories":1594},[969],{"categories":1596},[627],{"categories":1598},[704],{"categories":1600},[],{"categories":1602},[627],{"categories":1604},[],{"categories":1606},[],{"categories":1608},[627],{"categories":1610},[644],{"categories":1612},[],{"categories":1614},[],{"categories":1616},[],{"categories":1618},[609],{"categories":1620},[],{"categories":1622},[],{"categories":1624},[704],{"categories":1626},[644],{"categories":1628},[969],{"categories":1630},[644],{"categories":1632},[],{"categories":1634},[619],{"categories":1636},[659],{"categories":1638},[659],{"categories":1640},[622],{"categories":1642},[622],{"categories":1644},[622],{"categories":1646},[969],{"categories":1648},[627],{"categories":1650},[619],{"categories":1652},[609],{"categories":1654},[609],{"categories":1656},[627],{"categories":1658},[562],{"categories":1660},[704],{"categories":1662},[562],{"categories":1664},[],{"categories":1666},[644],{"categories":1668},[619],{"categories":1670},[619],{"categories":1672},[659],{"categories":1674},[619],{"categories":1676},[619],{"categories":1678},[562],{"categories":1680},[562],{"categories":1682},[619],{"categories":1684},[969],{"categories":1686},[644],{"categories":1688},[],{"categories":1690},[622],{"categories":1692},[619],{"categories":1694},[609],{"categories":1696},[619],{"categories":1698},[619],{"categories":1700},[],{"categories":1702},[644],{"categories":1704},[619],{"categories":1706},[619],{"categories":1708},[659],{"categories":1710},[619],{"categories":1712},[644],{"categories":1714},[],{"categories":1716},[619],{"categories":1718},[],{"categories":1720},[562],{"categories":1722},[659],{"categories":1724},[644],{"categories":1726},[627],{"categories":1728},[562],{"categories":1730},[659],{"categories":1732},[704],{"categories":1734},[659],{"categories":1736},[],{"categories":1738},[644],{"categories":1740},[644],{"categories":1742},[1056],{"categories":1744},[627],{"categories":1746},[644,619],{"categories":1748},[619],{"categories":1750},[644],{"categories":1752},[619],{"categories":1754},[619,627],{"categories":1756},[619],{"categories":1758},[644],{"categories":1760},[],{"categories":1762},[659],{"categories":1764},[644],{"categories":1766},[619],{"categories":1768},[644],{"categories":1770},[],{"categories":1772},[627],{"categories":1774},[609],{"categories":1776},[619],{"categories":1778},[],{"categories":1780},[704],{"categories":1782},[627],{"categories":1784},[619],{"categories":1786},[627],{"categories":1788},[],{"categories":1790},[619],{"categories":1792},[],{"categories":1794},[619],{"categories":1796},[],{"categories":1798},[],{"categories":1800},[562],{"categories":1802},[659],{"categories":1804},[644],{"categories":1806},[619],{"categories":1808},[],{"categories":1810},[619],{"categories":1812},[627],{"categories":1814},[644],{"categories":1816},[644],{"categories":1818},[627],{"categories":1820},[627],{"categories":1822},[659],{"categories":1824},[609],{"categories":1826},[],{"categories":1828},[644],{"categories":1830},[644],{"categories":1832},[644],{"categories":1834},[619],{"categories":1836},[644],{"categories":1838},[],{"categories":1840},[562],{"categories":1842},[644],{"categories":1844},[619],{"categories":1846},[],{"categories":1848},[644],{"categories":1850},[],{"categories":1852},[644],{"categories":1854},[],{"categories":1856},[],{"categories":1858},[],{"categories":1860},[644],{"categories":1862},[644],{"categories":1864},[644],{"categories":1866},[644],{"categories":1868},[],{"categories":1870},[644],{"categories":1872},[644],{"categories":1874},[644],{"categories":1876},[],{"categories":1878},[644],{"categories":1880},[],{"categories":1882},[622],{"categories":1884},[644],{"categories":1886},[],{"categories":1888},[],{"categories":1890},[],{"categories":1892},[644],{"categories":1894},[614],{"categories":1896},[614],{"categories":1898},[],{"categories":1900},[619],{"categories":1902},[644],{"categories":1904},[],{"categories":1906},[644],{"categories":1908},[644],{"categories":1910},[614],{"categories":1912},[],{"categories":1914},[644],{"categories":1916},[614],{"categories":1918},[619],{"categories":1920},[644],{"categories":1922},[],{"categories":1924},[],{"categories":1926},[],{"categories":1928},[619],{"categories":1930},[619],{"categories":1932},[619],{"categories":1934},[619],{"categories":1936},[644],{"categories":1938},[562],{"categories":1940},[562],{"categories":1942},[619],{"categories":1944},[619],{"categories":1946},[659],{"categories":1948},[1056],{"categories":1950},[659],{"categories":1952},[659],{"categories":1954},[644],{"categories":1956},[619],{"categories":1958},[644],{"categories":1960},[659],{"categories":1962},[644],{"categories":1964},[619],{"categories":1966},[619],{"categories":1968},[619],{"categories":1970},[619],{"categories":1972},[619],{"categories":1974},[644],{"categories":1976},[659],{"categories":1978},[659],{"categories":1980},[622],{"categories":1982},[619],{"categories":1984},[],{"categories":1986},[619],{"categories":1988},[],{"categories":1990},[614],{"categories":1992},[644],{"categories":1994},[],{"categories":1996},[609],{"categories":1998},[562],{"categories":2000},[562],{"categories":2002},[619],{"categories":2004},[619],{"categories":2006},[644],{"categories":2008},[644],{"categories":2010},[614],{"categories":2012},[614],{"categories":2014},[969],{"categories":2016},[619],{"categories":2018},[614],{"categories":2020},[],{"categories":2022},[644],{"categories":2024},[619],{"categories":2026},[619],{"categories":2028},[619],{"categories":2030},[619],{"categories":2032},[644],{"categories":2034},[644],{"categories":2036},[644],{"categories":2038},[644],{"categories":2040},[619],{"categories":2042},[619],{"categories":2044},[619],{"categories":2046},[619],{"categories":2048},[],{"categories":2050},[562],{"categories":2052},[644],{"categories":2054},[644],{"categories":2056},[644],{"categories":2058},[],{"categories":2060},[622],{"categories":2062},[],{"categories":2064},[659],{"categories":2066},[],{"categories":2068},[619],{"categories":2070},[659],{"categories":2072},[562],{"categories":2074},[659],{"categories":2076},[],{"categories":2078},[659],{"categories":2080},[659],{"categories":2082},[],{"categories":2084},[562],{"categories":2086},[619],{"categories":2088},[619],{"categories":2090},[659],{"categories":2092},[644],{"categories":2094},[644],{"categories":2096},[],{"categories":2098},[614],{"categories":2100},[],{"categories":2102},[622],{"categories":2104},[],{"categories":2106},[562],{"categories":2108},[614],{"categories":2110},[562],{"categories":2112},[562],{"categories":2114},[562],{"categories":2116},[562],{"categories":2118},[562],{"categories":2120},[562],{"categories":2122},[562],{"categories":2124},[562],{"categories":2126},[562],{"categories":2128},[562],{"categories":2130},[],{"categories":2132},[619],{"categories":2134},[562],{"categories":2136},[644],{"categories":2138},[644],{"categories":2140},[562],{"categories":2142},[562],{"categories":2144},[562],{"categories":2146},[562],{"categories":2148},[562],{"categories":2150},[562],{"categories":2152},[562],{"categories":2154},[644,562],{"categories":2156},[562],{"categories":2158},[562],{"categories":2160},[562],{"categories":2162},[562],{"categories":2164},[],{"categories":2166},[562],{"categories":2168},[562],{"categories":2170},[562],{"categories":2172},[562],{"categories":2174},[562],{"categories":2176},[562],{"categories":2178},[562],{"categories":2180},[562],{"categories":2182},[562],{"categories":2184},[562,644],{"categories":2186},[562],{"categories":2188},[562],{"categories":2190},[],{"categories":2192},[614],{"categories":2194},[],{"categories":2196},[644],{"categories":2198},[],{"categories":2200},[619],{"categories":2202},[969],{"categories":2204},[1056],{"categories":2206},[619],{"categories":2208},[619],{"categories":2210},[],{"categories":2212},[619],{"categories":2214},[],{"categories":2216},[619],{"categories":2218},[],{"categories":2220},[],{"categories":2222},[644],{"categories":2224},[644],{"categories":2226},[644],{"categories":2228},[614],{"categories":2230},[614],{"categories":2232},[614],{"categories":2234},[614],{"categories":2236},[],{"categories":2238},[614],{"categories":2240},[],{"categories":2242},[614],{"categories":2244},[644],{"categories":2246},[614],{"categories":2248},[614],{"categories":2250},[614],{"categories":2252},[614],{"categories":2254},[644],{"categories":2256},[614],{"categories":2258},[619],{"categories":2260},[],{"categories":2262},[619],{"categories":2264},[614],{"categories":2266},[644],{"categories":2268},[614],{"categories":2270},[614],{"categories":2272},[614],{"categories":2274},[644],{"categories":2276},[644],{"categories":2278},[644],{"categories":2280},[],{"categories":2282},[],{"categories":2284},[644],{"categories":2286},[614],{"categories":2288},[],{"categories":2290},[644],{"categories":2292},[619],{"categories":2294},[644],{"categories":2296},[619],{"categories":2298},[619],{"categories":2300},[644],{"categories":2302},[],{"categories":2304},[],{"categories":2306},[619],{"categories":2308},[619],{"categories":2310},[619],{"categories":2312},[619],{"categories":2314},[619],{"categories":2316},[619],{"categories":2318},[619],{"categories":2320},[619],{"categories":2322},[],{"categories":2324},[619],{"categories":2326},[619],{"categories":2328},[619],{"categories":2330},[644],{"categories":2332},[644],{"categories":2334},[644],{"categories":2336},[614],{"categories":2338},[644],{"categories":2340},[644],{"categories":2342},[644],{"categories":2344},[619],{"categories":2346},[622],{"categories":2348},[622],{"categories":2350},[622],{"categories":2352},[619],{"categories":2354},[],{"categories":2356},[644],{"categories":2358},[],{"categories":2360},[],{"categories":2362},[644],{"categories":2364},[],{"categories":2366},[619],{"categories":2368},[562],{"categories":2370},[659],{"categories":2372},[704],{"categories":2374},[644],{"categories":2376},[619],{"categories":2378},[562],{"categories":2380},[],{"categories":2382},[619],{"categories":2384},[622,609],{"categories":2386},[619],{"categories":2388},[619],{"categories":2390},[969],{"categories":2392},[627],{"categories":2394},[622],{"categories":2396},[659],{"categories":2398},[644],{"categories":2400},[],{"categories":2402},[644],{"categories":2404},[],{"categories":2406},[644],{"categories":2408},[644],{"categories":2410},[619],{"categories":2412},[],{"categories":2414},[644],{"categories":2416},[619],{"categories":2418},[644],{"categories":2420},[659],{"categories":2422},[619],{"categories":2424},[644],{"categories":2426},[644,659],{"categories":2428},[659],{"categories":2430},[],{"categories":2432},[644],{"categories":2434},[644],{"categories":2436},[644],{"categories":2438},[],{"categories":2440},[],{"categories":2442},[619],{"categories":2444},[622],{"categories":2446},[614],{"categories":2448},[619],{"categories":2450},[644],{"categories":2452},[614],{"categories":2454},[],{"categories":2456},[659],{"categories":2458},[614],{"categories":2460},[],{"categories":2462},[704],{"categories":2464},[622],{"categories":2466},[609],{"categories":2468},[614],{"categories":2470},[644],{"categories":2472},[619],{"categories":2474},[644],{"categories":2476},[619],{"categories":2478},[619],{"categories":2480},[614],{"categories":2482},[659],{"categories":2484},[562],{"categories":2486},[609],{"categories":2488},[644],{"categories":2490},[644],{"categories":2492},[],{"categories":2494},[],{"categories":2496},[644],{"categories":2498},[],{"categories":2500},[644],{"categories":2502},[614],{"categories":2504},[],{"categories":2506},[619],{"categories":2508},[659],{"categories":2510},[614],{"categories":2512},[659],{"categories":2514},[619],{"categories":2516},[644],{"categories":2518},[],{"categories":2520},[619],{"categories":2522},[619],{"categories":2524},[562],{"categories":2526},[619],{"categories":2528},[562],{"categories":2530},[619],{"categories":2532},[619],{"categories":2534},[562],{"categories":2536},[],{"categories":2538},[],{"categories":2540},[562],{"categories":2542},[562],{"categories":2544},[562],{"categories":2546},[627],{"categories":2548},[659],{"categories":2550},[659],{"categories":2552},[619],{"categories":2554},[614],{"categories":2556},[659],{"categories":2558},[659],{"categories":2560},[622],{"categories":2562},[562],{"categories":2564},[619],{"categories":2566},[619],{"categories":2568},[644],{"categories":2570},[659],{"categories":2572},[644],{"categories":2574},[],{"categories":2576},[969],{"categories":2578},[1056],{"categories":2580},[],{"categories":2582},[],{"categories":2584},[619],{"categories":2586},[614],{"categories":2588},[622],{"categories":2590},[622],{"categories":2592},[704],{"categories":2594},[562],{"categories":2596},[704],{"categories":2598},[704],{"categories":2600},[619],{"categories":2602},[],{"categories":2604},[],{"categories":2606},[704],{"categories":2608},[627],{"categories":2610},[644],{"categories":2612},[627],{"categories":2614},[704],{"categories":2616},[627],{"categories":2618},[704],{"categories":2620},[609],{"categories":2622},[627],{"categories":2624},[659],{"categories":2626},[644],{"categories":2628},[],{"categories":2630},[704],{"categories":2632},[969],{"categories":2634},[],{"categories":2636},[644],{"categories":2638},[644],{"categories":2640},[],{"categories":2642},[],{"categories":2644},[644],{"categories":2646},[644],{"categories":2648},[614],{"categories":2650},[644],{"categories":2652},[],{"categories":2654},[614],{"categories":2656},[],{"categories":2658},[],{"categories":2660},[614],{"categories":2662},[614],{"categories":2664},[644],{"categories":2666},[644],{"categories":2668},[644],{"categories":2670},[644],{"categories":2672},[644],{"categories":2674},[644],{"categories":2676},[622],{"categories":2678},[],{"categories":2680},[644],{"categories":2682},[],{"categories":2684},[],{"categories":2686},[619],{"categories":2688},[659],{"categories":2690},[],{"categories":2692},[969],{"categories":2694},[644,969],{"categories":2696},[644],{"categories":2698},[],{"categories":2700},[562],{"categories":2702},[562],{"categories":2704},[562],{"categories":2706},[562],{"categories":2708},[562],{"categories":2710},[],{"categories":2712},[],{"categories":2714},[],{"categories":2716},[627],{"categories":2718},[619],{"categories":2720},[609],{"categories":2722},[627],{"categories":2724},[659],{"categories":2726},[562],{"categories":2728},[],{"categories":2730},[622],{"categories":2732},[1056],{"categories":2734},[704],{"categories":2736},[704],{"categories":2738},[704],{"categories":2740},[659],{"categories":2742},[1056],{"categories":2744},[659],{"categories":2746},[],{"categories":2748},[609],{"categories":2750},[627],{"categories":2752},[644],{"categories":2754},[562],{"categories":2756},[622],{"categories":2758},[627],{"categories":2760},[622],{"categories":2762},[644],{"categories":2764},[562],{"categories":2766},[627],{"categories":2768},[969],{"categories":2770},[644],{"categories":2772},[614],{"categories":2774},[627],{"categories":2776},[],{"categories":2778},[644],{"categories":2780},[627],{"categories":2782},[627],{"categories":2784},[619],{"categories":2786},[],{"categories":2788},[622],{"categories":2790},[622],{"categories":2792},[622],{"categories":2794},[619],{"categories":2796},[644],{"categories":2798},[],{"categories":2800},[609],{"categories":2802},[659],{"categories":2804},[659],{"categories":2806},[704],{"categories":2808},[609],{"categories":2810},[614],{"categories":2812},[704],{"categories":2814},[],{"categories":2816},[614],{"categories":2818},[614],{"categories":2820},[614],{"categories":2822},[644],{"categories":2824},[609],{"categories":2826},[644],{"categories":2828},[],{"categories":2830},[],{"categories":2832},[],{"categories":2834},[627],{"categories":2836},[619],{"categories":2838},[],{"categories":2840},[659],{"categories":2842},[562],{"categories":2844},[],{"categories":2846},[622],{"categories":2848},[],{"categories":2850},[562],{"categories":2852},[644],{"categories":2854},[659],{"categories":2856},[609],{"categories":2858},[],{"categories":2860},[562],{"categories":2862},[562],{"categories":2864},[644],{"categories":2866},[],{"categories":2868},[],{"categories":2870},[627],{"categories":2872},[644],{"categories":2874},[],{"categories":2876},[619],{"categories":2878},[644],{"categories":2880},[],{"categories":2882},[627],{"categories":2884},[619],{"categories":2886},[644],{"categories":2888},[704],{"categories":2890},[644],{"categories":2892},[],{"categories":2894},[704],{"categories":2896},[644],{"categories":2898},[627],{"categories":2900},[644],{"categories":2902},[704],{"categories":2904},[619],{"categories":2906},[644],{"categories":2908},[644],{"categories":2910},[644,619],{"categories":2912},[619],{"categories":2914},[619],{"categories":2916},[619],{"categories":2918},[562],{"categories":2920},[659],{"categories":2922},[644],{"categories":2924},[659],{"categories":2926},[562],{"categories":2928},[644],{"categories":2930},[],{"categories":2932},[],{"categories":2934},[644],{"categories":2936},[644],{"categories":2938},[644],{"categories":2940},[619],{"categories":2942},[644],{"categories":2944},[],{"categories":2946},[644],{"categories":2948},[644],{"categories":2950},[619],{"categories":2952},[619],{"categories":2954},[644],{"categories":2956},[644],{"categories":2958},[],{"categories":2960},[644],{"categories":2962},[],{"categories":2964},[644],{"categories":2966},[644],{"categories":2968},[644],{"categories":2970},[644],{"categories":2972},[644],{"categories":2974},[644],{"categories":2976},[644],{"categories":2978},[],{"categories":2980},[644],{"categories":2982},[614],{"categories":2984},[614],{"categories":2986},[],{"categories":2988},[],{"categories":2990},[644],{"categories":2992},[],{"categories":2994},[644],{"categories":2996},[644,969],{"categories":2998},[],{"categories":3000},[614],{"categories":3002},[],{"categories":3004},[644],{"categories":3006},[],{"categories":3008},[],{"categories":3010},[],{"categories":3012},[644],{"categories":3014},[],{"categories":3016},[644],{"categories":3018},[],{"categories":3020},[644],{"categories":3022},[644],{"categories":3024},[],{"categories":3026},[],{"categories":3028},[644,969],{"categories":3030},[969,644],{"categories":3032},[614],{"categories":3034},[],{"categories":3036},[644],{"categories":3038},[],{"categories":3040},[644],{"categories":3042},[644],{"categories":3044},[],{"categories":3046},[614],{"categories":3048},[644,609],{"categories":3050},[614],{"categories":3052},[627],{"categories":3054},[],{"categories":3056},[619],{"categories":3058},[644],{"categories":3060},[622],{"categories":3062},[644],{"categories":3064},[659],{"categories":3066},[659],{"categories":3068},[969],{"categories":3070},[614],{"categories":3072},[644],{"categories":3074},[969],{"categories":3076},[627],{"categories":3078},[644],{"categories":3080},[659],{"categories":3082},[],{"categories":3084},[644],{"categories":3086},[],{"categories":3088},[],{"categories":3090},[644],{"categories":3092},[],{"categories":3094},[644],{"categories":3096},[627],{"categories":3098},[609],{"categories":3100},[659],{"categories":3102},[622],{"categories":3104},[619],{"categories":3106},[659],{"categories":3108},[],{"categories":3110},[622],{"categories":3112},[],{"categories":3114},[],{"categories":3116},[644],{"categories":3118},[614],{"categories":3120},[622],{"categories":3122},[],{"categories":3124},[644],{"categories":3126},[614],{"categories":3128},[614],{"categories":3130},[622],{"categories":3132},[614],{"categories":3134},[644],{"categories":3136},[614],{"categories":3138},[644],{"categories":3140},[],{"categories":3142},[644],{"categories":3144},[644],{"categories":3146},[644],{"categories":3148},[614],{"categories":3150},[],{"categories":3152},[],{"categories":3154},[562],{"categories":3156},[614],{"categories":3158},[],{"categories":3160},[644],{"categories":3162},[644],{"categories":3164},[644],{"categories":3166},[644],{"categories":3168},[644],{"categories":3170},[644],{"categories":3172},[644],{"categories":3174},[644],{"categories":3176},[644],{"categories":3178},[622],{"categories":3180},[644,562],{"categories":3182},[614],{"categories":3184},[614],{"categories":3186},[644],{"categories":3188},[627],{"categories":3190},[704],{"categories":3192},[644],{"categories":3194},[644],{"categories":3196},[],{"categories":3198},[],{"categories":3200},[644],{"categories":3202},[644],{"categories":3204},[],{"categories":3206},[562],{"categories":3208},[562],{"categories":3210},[659],{"categories":3212},[644],{"categories":3214},[659],{"categories":3216},[644],{"categories":3218},[644],{"categories":3220},[],{"categories":3222},[644],{"categories":3224},[],{"categories":3226},[],{"categories":3228},[644],{"categories":3230},[],{"categories":3232},[],{"categories":3234},[614],{"categories":3236},[],{"categories":3238},[644],{"categories":3240},[644],{"categories":3242},[644],{"categories":3244},[],{"categories":3246},[644],{"categories":3248},[614],{"categories":3250},[1056],{"categories":3252},[619],{"categories":3254},[644],{"categories":3256},[],{"categories":3258},[619],{"categories":3260},[644],{"categories":3262},[],{"categories":3264},[644],{"categories":3266},[],{"categories":3268},[619],{"categories":3270},[],{"categories":3272},[],{"categories":3274},[619],{"categories":3276},[619],{"categories":3278},[619],{"categories":3280},[644],{"categories":3282},[],{"categories":3284},[619],{"categories":3286},[619],{"categories":3288},[],{"categories":3290},[],{"categories":3292},[619],{"categories":3294},[644],{"categories":3296},[614],{"categories":3298},[1056],{"categories":3300},[622],{"categories":3302},[],{"categories":3304},[562],{"categories":3306},[644],{"categories":3308},[644],{"categories":3310},[609],{"categories":3312},[614],{"categories":3314},[614],{"categories":3316},[614],{"categories":3318},[614],{"categories":3320},[],{"categories":3322},[619],{"categories":3324},[619],{"categories":3326},[619],{"categories":3328},[619],{"categories":3330},[659],{"categories":3332},[644],{"categories":3334},[609],{"categories":3336},[],{"categories":3338},[659],{"categories":3340},[619],{"categories":3342},[562],{"categories":3344},[562],{"categories":3346},[562],{"categories":3348},[562],{"categories":3350},[562],{"categories":3352},[562],{"categories":3354},[644,609],{"categories":3356},[619],{"categories":3358},[609],{"categories":3360},[614],{"categories":3362},[614],{"categories":3364},[659],{"categories":3366},[],{"categories":3368},[],{"categories":3370},[622],{"categories":3372},[],{"categories":3374},[644],{"categories":3376},[622],{"categories":3378},[644],{"categories":3380},[627],{"categories":3382},[619],{"categories":3384},[609],{"categories":3386},[619],{"categories":3388},[627],{"categories":3390},[659],{"categories":3392},[619],{"categories":3394},[],{"categories":3396},[659],{"categories":3398},[],{"categories":3400},[],{"categories":3402},[619],{"categories":3404},[619],{"categories":3406},[619],{"categories":3408},[644],{"categories":3410},[644],{"categories":3412},[644],{"categories":3414},[644],{"categories":3416},[644],{"categories":3418},[],{"categories":3420},[969],{"categories":3422},[644],{"categories":3424},[],{"categories":3426},[],{"categories":3428},[],{"categories":3430},[659],{"categories":3432},[],{"categories":3434},[644],{"categories":3436},[],{"categories":3438},[614],{"categories":3440},[644],{"categories":3442},[614],{"categories":3444},[644],{"categories":3446},[619],{"categories":3448},[],{"categories":3450},[644],{"categories":3452},[644],{"categories":3454},[],{"categories":3456},[704],{"categories":3458},[704],{"categories":3460},[627],{"categories":3462},[562],{"categories":3464},[],{"categories":3466},[644],{"categories":3468},[619],{"categories":3470},[],{"categories":3472},[],{"categories":3474},[644],{"categories":3476},[627],{"categories":3478},[619],{"categories":3480},[609],{"categories":3482},[659,627],{"categories":3484},[627],{"categories":3486},[644],{"categories":3488},[619],{"categories":3490},[],{"categories":3492},[],{"categories":3494},[],{"categories":3496},[],{"categories":3498},[],{"categories":3500},[],{"categories":3502},[644],{"categories":3504},[],{"categories":3506},[],{"categories":3508},[644],{"categories":3510},[],{"categories":3512},[],{"categories":3514},[],{"categories":3516},[644],{"categories":3518},[614],{"categories":3520},[],{"categories":3522},[],{"categories":3524},[],{"categories":3526},[644],{"categories":3528},[],{"categories":3530},[644],{"categories":3532},[644],{"categories":3534},[],{"categories":3536},[644],{"categories":3538},[627],{"categories":3540},[],{"categories":3542},[659],{"categories":3544},[659],{"categories":3546},[],{"categories":3548},[622],{"categories":3550},[],{"categories":3552},[],{"categories":3554},[],{"categories":3556},[562],{"categories":3558},[614],{"categories":3560},[619],{"categories":3562},[644],{"categories":3564},[609],{"categories":3566},[644],{"categories":3568},[],{"categories":3570},[],{"categories":3572},[609],{"categories":3574},[622],{"categories":3576},[619],{"categories":3578},[],{"categories":3580},[969],{"categories":3582},[],{"categories":3584},[622],{"categories":3586},[644],{"categories":3588},[644],{"categories":3590},[622],{"categories":3592},[644],{"categories":3594},[562],{"categories":3596},[619],{"categories":3598},[644],{"categories":3600},[619],{"categories":3602},[644],{"categories":3604},[619],{"categories":3606},[659],{"categories":3608},[659],{"categories":3610},[562],{"categories":3612},[],{"categories":3614},[644],{"categories":3616},[644],{"categories":3618},[622],{"categories":3620},[1056],{"categories":3622},[659],{"categories":3624},[614],{"categories":3626},[644],{"categories":3628},[614],{"categories":3630},[644],{"categories":3632},[644],{"categories":3634},[],{"categories":3636},[644],{"categories":3638},[],{"categories":3640},[644],{"categories":3642},[622],{"categories":3644},[644],{"categories":3646},[644],{"categories":3648},[644],{"categories":3650},[],{"categories":3652},[644],{"categories":3654},[644],{"categories":3656},[1056],{"categories":3658},[],{"categories":3660},[614],{"categories":3662},[969],{"categories":3664},[627],{"categories":3666},[],{"categories":3668},[704],{"categories":3670},[],{"categories":3672},[],{"categories":3674},[614],{"categories":3676},[644],{"categories":3678},[],{"categories":3680},[644],{"categories":3682},[644],{"categories":3684},[619],{"categories":3686},[644],{"categories":3688},[614],{"categories":3690},[614],{"categories":3692},[562],{"categories":3694},[562],{"categories":3696},[562],{"categories":3698},[644],{"categories":3700},[704],{"categories":3702},[614],{"categories":3704},[659],{"categories":3706},[],{"categories":3708},[562],{"categories":3710},[562],{"categories":3712},[969],{"categories":3714},[562],{"categories":3716},[562],{"categories":3718},[619],{"categories":3720},[614],{"categories":3722},[969],{"categories":3724},[644],{"categories":3726},[644],{"categories":3728},[644],{"categories":3730},[644],{"categories":3732},[],{"categories":3734},[619],{"categories":3736},[644],{"categories":3738},[562],{"categories":3740},[],{"categories":3742},[],{"categories":3744},[614],{"categories":3746},[],{"categories":3748},[619],{"categories":3750},[619],{"categories":3752},[619],{"categories":3754},[619],{"categories":3756},[619],{"categories":3758},[619],{"categories":3760},[619],{"categories":3762},[619],{"categories":3764},[],{"categories":3766},[],{"categories":3768},[644],{"categories":3770},[],{"categories":3772},[619],{"categories":3774},[659],{"categories":3776},[659],{"categories":3778},[704],{"categories":3780},[609],{"categories":3782},[],{"categories":3784},[],{"categories":3786},[],{"categories":3788},[562],{"categories":3790},[644],{"categories":3792},[],{"categories":3794},[609],{"categories":3796},[609],{"categories":3798},[562],{"categories":3800},[659],{"categories":3802},[704],{"categories":3804},[562],{"categories":3806},[562],{"categories":3808},[],{"categories":3810},[619],{"categories":3812},[609],{"categories":3814},[609],{"categories":3816},[644],{"categories":3818},[619],{"categories":3820},[627],{"categories":3822},[562],{"categories":3824},[],{"categories":3826},[622],{"categories":3828},[704],{"categories":3830},[614],{"categories":3832},[614],{"categories":3834},[614],{"categories":3836},[969],{"categories":3838},[],{"categories":3840},[619],{"categories":3842},[],{"categories":3844},[619],{"categories":3846},[619],{"categories":3848},[644],{"categories":3850},[644],{"categories":3852},[627],{"categories":3854},[619],{"categories":3856},[627],{"categories":3858},[],{"categories":3860},[619],{"categories":3862},[562],{"categories":3864},[562],{"categories":3866},[562],{"categories":3868},[644],{"categories":3870},[619],{"categories":3872},[644],{"categories":3874},[609],{"categories":3876},[614],{"categories":3878},[562],{"categories":3880},[614],{"categories":3882},[644],{"categories":3884},[],{"categories":3886},[614],{"categories":3888},[619],{"categories":3890},[614],{"categories":3892},[614],{"categories":3894},[614],{"categories":3896},[614],{"categories":3898},[],{"categories":3900},[],{"categories":3902},[614],{"categories":3904},[614],{"categories":3906},[],{"categories":3908},[614],{"categories":3910},[614],{"categories":3912},[644],{"categories":3914},[644],{"categories":3916},[614],{"categories":3918},[614],{"categories":3920},[644],{"categories":3922},[],{"categories":3924},[644],{"categories":3926},[619],{"categories":3928},[644],{"categories":3930},[644],{"categories":3932},[],{"categories":3934},[644],{"categories":3936},[644],{"categories":3938},[644],{"categories":3940},[614],{"categories":3942},[],{"categories":3944},[],{"categories":3946},[],{"categories":3948},[],{"categories":3950},[644],{"categories":3952},[644],{"categories":3954},[],{"categories":3956},[622],{"categories":3958},[614],{"categories":3960},[],{"categories":3962},[],{"categories":3964},[],{"categories":3966},[],{"categories":3968},[],{"categories":3970},[644],{"categories":3972},[],{"categories":3974},[],{"categories":3976},[644],{"categories":3978},[],{"categories":3980},[619],{"categories":3982},[619],{"categories":3984},[619],{"categories":3986},[609],{"categories":3988},[],{"categories":3990},[622],{"categories":3992},[627],{"categories":3994},[627],{"categories":3996},[969],{"categories":3998},[614],{"categories":4000},[],{"categories":4002},[644],{"categories":4004},[644],{"categories":4006},[609],{"categories":4008},[],{"categories":4010},[609],{"categories":4012},[],{"categories":4014},[],{"categories":4016},[],{"categories":4018},[627],{"categories":4020},[619],{"categories":4022},[619],{"categories":4024},[619],{"categories":4026},[619],{"categories":4028},[619],{"categories":4030},[],{"categories":4032},[614],{"categories":4034},[644],{"categories":4036},[644],{"categories":4038},[644],{"categories":4040},[],{"categories":4042},[609],{"categories":4044},[],{"categories":4046},[562],{"categories":4048},[704],{"categories":4050},[562],{"categories":4052},[],{"categories":4054},[],{"categories":4056},[644],{"categories":4058},[619],{"categories":4060},[],{"categories":4062},[644],{"categories":4064},[644],{"categories":4066},[644],{"categories":4068},[619],{"categories":4070},[619],{"categories":4072},[644],{"categories":4074},[704],{"categories":4076},[619],{"categories":4078},[],{"categories":4080},[644],{"categories":4082},[],{"categories":4084},[1056],{"categories":4086},[627],{"categories":4088},[704],{"categories":4090},[627],{"categories":4092},[969],{"categories":4094},[644],{"categories":4096},[627],{"categories":4098},[614],{"categories":4100},[969],{"categories":4102},[627],{"categories":4104},[562],{"categories":4106},[562],{"categories":4108},[],{"categories":4110},[627],{"categories":4112},[],{"categories":4114},[659],{"categories":4116},[627],{"categories":4118},[],{"categories":4120},[704],{"categories":4122},[704],{"categories":4124},[1056],{"categories":4126},[],{"categories":4128},[644],{"categories":4130},[627],{"categories":4132},[969],{"categories":4134},[619],{"categories":4136},[619],{"categories":4138},[704],{"categories":4140},[644],{"categories":4142},[659],{"categories":4144},[644],{"categories":4146},[],{"categories":4148},[],{"categories":4150},[],{"categories":4152},[622],{"categories":4154},[644],{"categories":4156},[562],{"categories":4158},[627],{"categories":4160},[627],{"categories":4162},[644],{"categories":4164},[622],{"categories":4166},[659],{"categories":4168},[644],{"categories":4170},[627],{"categories":4172},[644],{"categories":4174},[627],{"categories":4176},[659],{"categories":4178},[659],{"categories":4180},[619],{"categories":4182},[659],{"categories":4184},[627],{"categories":4186},[609],{"categories":4188},[627],{"categories":4190},[627],{"categories":4192},[627],{"categories":4194},[627],{"categories":4196},[],{"categories":4198},[614],{"categories":4200},[],{"categories":4202},[704],{"categories":4204},[644],{"categories":4206},[644],{"categories":4208},[],{"categories":4210},[],{"categories":4212},[],{"categories":4214},[644],{"categories":4216},[614],{"categories":4218},[644],{"categories":4220},[644],{"categories":4222},[],{"categories":4224},[644],{"categories":4226},[562],{"categories":4228},[644],{"categories":4230},[644],{"categories":4232},[644],{"categories":4234},[],{"categories":4236},[],{"categories":4238},[],{"categories":4240},[969],{"categories":4242},[969],{"categories":4244},[609],{"categories":4246},[619],{"categories":4248},[609,622],{"categories":4250},[644],{"categories":4252},[614],{"categories":4254},[],{"categories":4256},[562],{"categories":4258},[704],{"categories":4260},[644],{"categories":4262},[627],{"categories":4264},[644],{"categories":4266},[],{"categories":4268},[704],{"categories":4270},[969],{"categories":4272},[619],{"categories":4274},[609],{"categories":4276},[969],{"categories":4278},[619],{"categories":4280},[659],{"categories":4282},[619],{"categories":4284},[659],{"categories":4286},[644],{"categories":4288},[659],{"categories":4290},[659],{"categories":4292},[627],{"categories":4294},[704],{"categories":4296},[644],{"categories":4298},[622],{"categories":4300},[],{"categories":4302},[644],{"categories":4304},[562],{"categories":4306},[704],{"categories":4308},[609],{"categories":4310},[644],{"categories":4312},[704],{"categories":4314},[659],{"categories":4316},[644],{"categories":4318},[644],{"categories":4320},[704],{"categories":4322},[644],{"categories":4324},[659],{"categories":4326},[644],{"categories":4328},[],{"categories":4330},[644],{"categories":4332},[644],{"categories":4334},[644],{"categories":4336},[644],{"categories":4338},[],{"categories":4340},[619],{"categories":4342},[969],{"categories":4344},[],{"categories":4346},[],{"categories":4348},[644],{"categories":4350},[609],{"categories":4352},[622],{"categories":4354},[609],{"categories":4356},[609],{"categories":4358},[619],{"categories":4360},[],{"categories":4362},[644],{"categories":4364},[614],{"categories":4366},[644],{"categories":4368},[644],{"categories":4370},[],{"categories":4372},[619],{"categories":4374},[614],{"categories":4376},[644,969],{"categories":4378},[619,969],{"categories":4380},[969],{"categories":4382},[644],{"categories":4384},[619],{"categories":4386},[619],{"categories":4388},[627],{"categories":4390},[627],{"categories":4392},[627],{"categories":4394},[644],{"categories":4396},[562],{"categories":4398},[619],{"categories":4400},[],{"categories":4402},[969],{"categories":4404},[],{"categories":4406},[969],{"categories":4408},[969],{"categories":4410},[609],{"categories":4412},[619],{"categories":4414},[],{"categories":4416},[969],{"categories":4418},[644],{"categories":4420},[614],{"categories":4422},[644],{"categories":4424},[562],{"categories":4426},[627],{"categories":4428},[627],{"categories":4430},[627],{"categories":4432},[969],{"categories":4434},[],{"categories":4436},[],{"categories":4438},[],{"categories":4440},[644],{"categories":4442},[627],{"categories":4444},[644],{"categories":4446},[627],{"categories":4448},[969],{"categories":4450},[969],{"categories":4452},[644],{"categories":4454},[619],{"categories":4456},[],{"categories":4458},[644],{"categories":4460},[644],{"categories":4462},[644],{"categories":4464},[],{"categories":4466},[],{"categories":4468},[969],{"categories":4470},[969],{"categories":4472},[644,969],{"categories":4474},[619],{"categories":4476},[619],{"categories":4478},[619],{"categories":4480},[619],{"categories":4482},[619],{"categories":4484},[619],{"categories":4486},[],{"categories":4488},[627],{"categories":4490},[644],{"categories":4492},[627],{"categories":4494},[622],{"categories":4496},[644],{"categories":4498},[1056],{"categories":4500},[1056],{"categories":4502},[619],{"categories":4504},[627],{"categories":4506},[],{"categories":4508},[619],{"categories":4510},[644],{"categories":4512},[],{"categories":4514},[562],{"categories":4516},[],{"categories":4518},[644],{"categories":4520},[619],{"categories":4522},[614],{"categories":4524},[644],{"categories":4526},[],{"categories":4528},[],{"categories":4530},[562],{"categories":4532},[562],{"categories":4534},[659],{"categories":4536},[562],{"categories":4538},[619],{"categories":4540},[],{"categories":4542},[619],{"categories":4544},[614],{"categories":4546},[644],{"categories":4548},[644],{"categories":4550},[],{"categories":4552},[644],{"categories":4554},[659],{"categories":4556},[644],{"categories":4558},[],{"categories":4560},[704],{"categories":4562},[627],{"categories":4564},[627],{"categories":4566},[609],{"categories":4568},[609],{"categories":4570},[609],{"categories":4572},[619],{"categories":4574},[609],{"categories":4576},[619],{"categories":4578},[969],{"categories":4580},[1056],{"categories":4582},[614],{"categories":4584},[614],{"categories":4586},[614],{"categories":4588},[969],{"categories":4590},[614,609],{"categories":4592},[704],{"categories":4594},[619],{"categories":4596},[],{"categories":4598},[644],{"categories":4600},[],{"categories":4602},[627],{"categories":4604},[704],{"categories":4606},[562],{"categories":4608},[627],{"categories":4610},[659],{"categories":4612},[],{"categories":4614},[619],{"categories":4616},[],{"categories":4618},[1056],{"categories":4620},[],{"categories":4622},[562],{"categories":4624},[562],{"categories":4626},[704],{"categories":4628},[],{"categories":4630},[644],{"categories":4632},[704],{"categories":4634},[],{"categories":4636},[644],{"categories":4638},[644],{"categories":4640},[],{"categories":4642},[659],{"categories":4644},[644],{"categories":4646},[],{"categories":4648},[644],{"categories":4650},[],{"categories":4652},[],{"categories":4654},[619],{"categories":4656},[619],{"categories":4658},[],{"categories":4660},[627],{"categories":4662},[627],{"categories":4664},[627],{"categories":4666},[644,619],{"categories":4668},[619],{"categories":4670},[619],{"categories":4672},[619],{"categories":4674},[704],{"categories":4676},[704],{"categories":4678},[],{"categories":4680},[614],{"categories":4682},[644],{"categories":4684},[704],{"categories":4686},[704],{"categories":4688},[614],{"categories":4690},[609],{"categories":4692},[619],{"categories":4694},[627],{"categories":4696},[644],{"categories":4698},[644],{"categories":4700},[619],{"categories":4702},[627],{"categories":4704},[619],{"categories":4706},[644],{"categories":4708},[622],{"categories":4710},[],{"categories":4712},[644],{"categories":4714},[],{"categories":4716},[644],{"categories":4718},[644],{"categories":4720},[627],{"categories":4722},[],{"categories":4724},[704],{"categories":4726},[644],{"categories":4728},[619],{"categories":4730},[619],{"categories":4732},[627],{"categories":4734},[659],{"categories":4736},[659],{"categories":4738},[614],{"categories":4740},[644],{"categories":4742},[619],{"categories":4744},[],{"categories":4746},[619],{"categories":4748},[644],{"categories":4750},[614],{"categories":4752},[644],{"categories":4754},[644],{"categories":4756},[644],{"categories":4758},[619],{"categories":4760},[704],{"categories":4762},[644],{"categories":4764},[562],{"categories":4766},[644],{"categories":4768},[644],{"categories":4770},[644],{"categories":4772},[644],{"categories":4774},[],{"categories":4776},[644],{"categories":4778},[704],{"categories":4780},[562],{"categories":4782},[644],{"categories":4784},[562],{"categories":4786},[],{"categories":4788},[],{"categories":4790},[],{"categories":4792},[644],{"categories":4794},[],{"categories":4796},[],{"categories":4798},[],{"categories":4800},[],{"categories":4802},[619],{"categories":4804},[659],{"categories":4806},[619],{"categories":4808},[619],{"categories":4810},[627],{"categories":4812},[609],{"categories":4814},[644],{"categories":4816},[644],{"categories":4818},[644],{"categories":4820},[609],{"categories":4822},[659],{"categories":4824},[],{"categories":4826},[704],{"categories":4828},[622],{"categories":4830},[644],{"categories":4832},[562],{"categories":4834},[659],{"categories":4836},[659],{"categories":4838},[1056],{"categories":4840},[619],{"categories":4842},[644],{"categories":4844},[644],{"categories":4846},[659],{"categories":4848},[644],{"categories":4850},[],{"categories":4852},[],{"categories":4854},[969],{"categories":4856},[562],{"categories":4858},[659],{"categories":4860},[644],{"categories":4862},[614],{"categories":4864},[659],{"categories":4866},[609],{"categories":4868},[619],{"categories":4870},[619],{"categories":4872},[614],{"categories":4874},[644],{"categories":4876},[],{"categories":4878},[],{"categories":4880},[],{"categories":4882},[644],{"categories":4884},[],{"categories":4886},[614],{"categories":4888},[],{"categories":4890},[644],{"categories":4892},[],{"categories":4894},[614],{"categories":4896},[619],{"categories":4898},[644],{"categories":4900},[969],{"categories":4902},[644],{"categories":4904},[659],{"categories":4906},[644],{"categories":4908},[659],{"categories":4910},[659],{"categories":4912},[],{"categories":4914},[],{"categories":4916},[659],{"categories":4918},[659],{"categories":4920},[659],{"categories":4922},[],{"categories":4924},[659],{"categories":4926},[619],{"categories":4928},[619],{"categories":4930},[],{"categories":4932},[644],{"categories":4934},[622],{"categories":4936},[704],{"categories":4938},[644],{"categories":4940},[],{"categories":4942},[659],{"categories":4944},[644],{"categories":4946},[1056],{"categories":4948},[659],{"categories":4950},[659],{"categories":4952},[622],{"categories":4954},[627],{"categories":4956},[627],{"categories":4958},[],{"categories":4960},[627],{"categories":4962},[644],{"categories":4964},[],{"categories":4966},[],{"categories":4968},[619],{"categories":4970},[],{"categories":4972},[619],{"categories":4974},[619],{"categories":4976},[614],{"categories":4978},[644],{"categories":4980},[614],{"categories":4982},[659],{"categories":4984},[614],{"categories":4986},[627],{"categories":4988},[627],{"categories":4990},[627],{"categories":4992},[614],{"categories":4994},[644],{"categories":4996},[619],{"categories":4998},[969],{"categories":5000},[609],{"categories":5002},[969],{"categories":5004},[969],{"categories":5006},[627],{"categories":5008},[969],{"categories":5010},[969],[5012,5161,5527,5754],{"id":5013,"title":5014,"ai":5015,"body":5020,"categories":5130,"created_at":563,"date_modified":563,"description":79,"extension":564,"faq":563,"featured":565,"kicker_label":563,"meta":5131,"navigation":588,"path":5148,"published_at":5149,"question":563,"scraped_at":5150,"seo":5151,"sitemap":5152,"source_id":5153,"source_name":5154,"source_type":596,"source_url":5155,"stem":5156,"tags":5157,"thumbnail_url":563,"tldr":5158,"tweet":563,"unknown_tags":5159,"__hash__":5160},"summaries\u002Fsummaries\u002Fcss-grid-scrollers-auto-grids-adaptive-layouts-summary.md","CSS Grid: Scrollers, Auto-Grids, Adaptive Layouts",{"provider":7,"model":8,"input_tokens":5016,"output_tokens":5017,"processing_time_ms":5018,"cost_usd":5019},9124,2221,22116,0.0029128,{"type":14,"value":5021,"toc":5124},[5022,5026,5053,5057,5075,5079,5098,5102,5109],[17,5023,5025],{"id":5024},"horizontal-overflow-scrollers-with-grid-and-snap","Horizontal Overflow Scrollers with Grid and Snap",[22,5027,5028,5029,5032,5033,5036,5037,5040,5041,5044,5045,5048,5049,5052],{},"Create touch-friendly horizontal card scrollers using CSS Grid's ",[62,5030,5031],{},"grid-auto-flow: column"," to stack items vertically into columns, paired with ",[62,5034,5035],{},"grid-auto-columns: 300px"," for uniform width and ",[62,5038,5039],{},"gap: 1rem",". Add ",[62,5042,5043],{},"overflow-x: scroll"," to enable scrolling without page reflow. Enhance usability with ",[62,5046,5047],{},"scroll-snap-type: x mandatory"," on the container and ",[62,5050,5051],{},"scroll-snap-align: center"," on children (* selector via nesting)—snaps cards to center on scroll, eliminating awkward shift-scrolling on desktop. Mandatory snaps aggressively for precise alignment; avoid proximity for scrollers as it allows leeway. Trade-off: Feels like scrolljacking if overused on full sections, but perfect for compact galleries.",[17,5054,5056],{"id":5055},"non-overflowing-auto-fit-grids","Non-Overflowing Auto-Fit Grids",[22,5058,5059,5060,5063,5064,103,5067,5070,5071,5074],{},"Responsive card grids overflow on narrow viewports when using ",[62,5061,5062],{},"repeat(auto-fit, minmax(200px, 1fr))","—minimums like 400px total force horizontal scroll. Fix by nesting ",[62,5065,5066],{},"min()",[62,5068,5069],{},"repeat(auto-fit, minmax(min(300px, 100%), 1fr))",". Below 300px container width, grids collapse to 100% (full-width single column); above, they expand to 300px min with fr growth. Memory trick: auto-fit\u002Ffill → minmax → min(ideal-px, 100%), 1fr. Use CSS var ",[62,5072,5073],{},"--min-card-size: 300px"," for reuse. Auto-fit collapses empty tracks (vs. auto-fill's fixed count)—no difference here, but default to fit. Result: Intrinsic, fluid layouts that scale from mobile stack to desktop multi-column without breakpoints.",[17,5076,5078],{"id":5077},"adaptive-sidebars-via-container-queries","Adaptive Sidebars via Container Queries",[22,5080,5081,5082,5085,5086,5089,5090,5093,5094,5097],{},"Media queries fail for sidebars that shrink on wide viewports (e.g., narrow sidebar → full-width → narrow again). Use container queries: Set parent ",[62,5083,5084],{},"container-type: inline-size",", then ",[62,5087,5088],{},"@container (width > 500px) { .promo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } }",". Stacks vertically below 500px (narrow contexts); grids to 3 columns above. Declare on closest ancestor (e.g., ",[62,5091,5092],{},"aside"," or ",[62,5095,5096],{},"section","). Support is strong outside legacy browsers. Solves viewport-agnostic adaptation—far simpler than breakpoint juggling.",[17,5099,5101],{"id":5100},"polish-with-scooped-corners-and-scroll-driven-animations","Polish with Scooped Corners and Scroll-Driven Animations",[22,5103,5104,5105,5108],{},"Elevate cards: ",[62,5106,5107],{},"border-radius: 16px; border-color: white; corner-shape: scoop","—scoops corners progressively (falls back to radius). New property; also supports squircle\u002Fbevel\u002Finset for ticket-like promos.",[22,5110,5111,5112,5115,5116,5119,5120,5123],{},"Supercharge scrollers: ",[62,5113,5114],{},"@keyframes scroller { 0%, 100% { opacity: 0.5; scale: 0.5; } 35%, 65% { opacity: 1; scale: 1; } }"," on snapped children, with ",[62,5117,5118],{},"animation: scroller linear both; animation-timeline: scroll(x)",". Fades\u002Fscales edge items low-opacity\u002Fsmall, centers active card at full size—driven by horizontal scroll progress, no duration needed. ",[62,5121,5122],{},"both"," fills animation ends. Makes scrollers feel premium and satisfying.",{"title":79,"searchDepth":96,"depth":96,"links":5125},[5126,5127,5128,5129],{"id":5024,"depth":96,"text":5025},{"id":5055,"depth":96,"text":5056},{"id":5077,"depth":96,"text":5078},{"id":5100,"depth":96,"text":5101},[562],{"content_references":5132,"triage":5145},[5133,5136,5139,5142],{"type":569,"title":5134,"url":5135,"context":572},"Code from this video","https:\u002F\u002Fcodepen.io\u002Feditor\u002Fkevinpowell\u002Fpen\u002F019dab2d-dfd3-7988-86c5-69986ea33e4c",{"type":576,"title":5137,"url":5138,"context":572},"Understanding CSS corner-shape and the power of the superellipse","https:\u002F\u002Ffrontendmasters.com\u002Fblog\u002Funderstanding-css-corner-shape-and-the-power-of-the-superellipse\u002F",{"type":576,"title":5140,"url":5141,"context":572},"The difference between auto-fit and auto-fill","https:\u002F\u002Fyoutu.be\u002FOZ6qKoq7RJU",{"type":576,"title":5143,"url":5144,"context":572},"More on scroll-driven animations","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=UmzFk68Bwdk",{"relevance":122,"novelty":116,"quality":122,"actionability":122,"composite":5146,"reasoning":5147},3.8,"Category: Design & Frontend. The article provides practical techniques for implementing CSS Grid layouts, addressing specific pain points like horizontal scrolling and responsive design, which are relevant to the target audience. It includes actionable code snippets and explanations that developers can apply directly to their projects.","\u002Fsummaries\u002Fcss-grid-scrollers-auto-grids-adaptive-layouts-summary","2026-04-29 13:00:49","2026-05-03 16:58:49",{"title":5014,"description":79},{"loc":5148},"2b203a4b2e111123","Kevin Powell","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=R1kiLX-Z-Io","summaries\u002Fcss-grid-scrollers-auto-grids-adaptive-layouts-summary",[600,601,602],"Build horizontal scrollers with grid-auto-flow: column + snap; prevent auto-grid overflow via minmax(min(300px, 100%), 1fr); adapt sidebars using container queries at 500px width.",[],"TZIZOLA-hm2sIF24r3wYOQJ5BHOe6_wLqEx1EENPyr8",{"id":5162,"title":5163,"ai":5164,"body":5169,"categories":5497,"created_at":563,"date_modified":563,"description":79,"extension":564,"faq":563,"featured":565,"kicker_label":563,"meta":5498,"navigation":588,"path":5515,"published_at":5516,"question":563,"scraped_at":5516,"seo":5517,"sitemap":5518,"source_id":5519,"source_name":5520,"source_type":596,"source_url":5521,"stem":5522,"tags":5523,"thumbnail_url":563,"tldr":5524,"tweet":563,"unknown_tags":5525,"__hash__":5526},"summaries\u002Fsummaries\u002Fgsap-easereverse-tailored-easing-for-reversible-me-summary.md","GSAP easeReverse: Tailored Easing for Reversible Menus",{"provider":7,"model":8,"input_tokens":5165,"output_tokens":5166,"processing_time_ms":5167,"cost_usd":5168},4305,1714,13072,0.00169535,{"type":14,"value":5170,"toc":5492},[5171,5175,5197,5200,5289,5292,5296,5311,5375,5385,5449,5467,5471,5489],[17,5172,5174],{"id":5173},"independent-easing-for-forward-and-reverse-prevents-jarring-toggles","Independent Easing for Forward and Reverse Prevents Jarring Toggles",[22,5176,5177,5178,5181,5182,5185,5186,5189,5190,5192,5193,5196],{},"GSAP's ",[62,5179,5180],{},"easeReverse"," (new in v3.15) lets reverse animations use a distinct easing curve instead of mirroring the forward ease backwards. Forward ",[62,5183,5184],{},"ease-out"," (smooth entry) reverses to ",[62,5187,5188],{},"ease-in"," (sluggish exit) without it, feeling off for UI like menus or modals. Set ",[62,5191,5180],{}," to reuse the forward ease adaptively or specify a new one, like ",[62,5194,5195],{},"easeReverse: 'elastic.out(0.3)'",", giving each direction unique character without duplicate timelines.",[22,5198,5199],{},"Apply it to tweens:",[74,5201,5205],{"className":5202,"code":5203,"language":5204,"meta":79,"style":79},"language-javascript shiki shiki-themes github-light github-dark","tl.to(item, {\n  x, y, opacity: 0, rotation: gsap.utils.random(-30, 30),\n  duration: 0.7,\n  ease: 'expo',\n  easeReverse: er('elastic.out(0.3)'),\n});\n","javascript",[62,5206,5207,5218,5248,5259,5269,5284],{"__ignoreMap":79},[83,5208,5209,5212,5215],{"class":85,"line":86},[83,5210,5211],{"class":92},"tl.",[83,5213,5214],{"class":204},"to",[83,5216,5217],{"class":92},"(item, {\n",[83,5219,5220,5223,5225,5228,5231,5234,5237,5240,5243,5245],{"class":85,"line":96},[83,5221,5222],{"class":92},"  x, y, opacity: ",[83,5224,392],{"class":99},[83,5226,5227],{"class":92},", rotation: gsap.utils.",[83,5229,5230],{"class":204},"random",[83,5232,5233],{"class":92},"(",[83,5235,5236],{"class":109},"-",[83,5238,5239],{"class":99},"30",[83,5241,5242],{"class":92},", ",[83,5244,5239],{"class":99},[83,5246,5247],{"class":92},"),\n",[83,5249,5250,5253,5256],{"class":85,"line":116},[83,5251,5252],{"class":92},"  duration: ",[83,5254,5255],{"class":99},"0.7",[83,5257,5258],{"class":92},",\n",[83,5260,5261,5264,5267],{"class":85,"line":122},[83,5262,5263],{"class":92},"  ease: ",[83,5265,5266],{"class":288},"'expo'",[83,5268,5258],{"class":92},[83,5270,5271,5274,5277,5279,5282],{"class":85,"line":132},[83,5272,5273],{"class":92},"  easeReverse: ",[83,5275,5276],{"class":204},"er",[83,5278,5233],{"class":92},[83,5280,5281],{"class":288},"'elastic.out(0.3)'",[83,5283,5247],{"class":92},[83,5285,5286],{"class":85,"line":145},[83,5287,5288],{"class":92},"});\n",[22,5290,5291],{},"This keeps dismissals snappy and playful, improving interruptible interactions.",[17,5293,5295],{"id":5294},"clip-path-menu-reveal-with-scattering-images","Clip-Path Menu Reveal with Scattering Images",[22,5297,5298,5299,5302,5303,5306,5307,5310],{},"Open the menu by scattering cover images outward from viewport center while revealing via ",[62,5300,5301],{},"clip-path",": start at ",[62,5304,5305],{},"polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)"," and expand. Reset states with ",[62,5308,5309],{},"gsap.set()"," before building the timeline:",[74,5312,5314],{"className":5202,"code":5313,"language":5204,"meta":79,"style":79},"gsap.set(coverItems, { x: 0, y: 0, rotation: 0, opacity: 1 });\ngsap.set(menu, { clipPath: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)' });\nmenuTimeline = createMenuTimeline(reverseEase);\n",[62,5315,5316,5347,5361],{"__ignoreMap":79},[83,5317,5318,5321,5324,5327,5329,5332,5334,5337,5339,5342,5344],{"class":85,"line":86},[83,5319,5320],{"class":92},"gsap.",[83,5322,5323],{"class":204},"set",[83,5325,5326],{"class":92},"(coverItems, { x: ",[83,5328,392],{"class":99},[83,5330,5331],{"class":92},", y: ",[83,5333,392],{"class":99},[83,5335,5336],{"class":92},", rotation: ",[83,5338,392],{"class":99},[83,5340,5341],{"class":92},", opacity: ",[83,5343,153],{"class":99},[83,5345,5346],{"class":92}," });\n",[83,5348,5349,5351,5353,5356,5359],{"class":85,"line":96},[83,5350,5320],{"class":92},[83,5352,5323],{"class":204},[83,5354,5355],{"class":92},"(menu, { clipPath: ",[83,5357,5358],{"class":288},"'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)'",[83,5360,5346],{"class":92},[83,5362,5363,5366,5369,5372],{"class":85,"line":116},[83,5364,5365],{"class":92},"menuTimeline ",[83,5367,5368],{"class":109},"=",[83,5370,5371],{"class":204}," createMenuTimeline",[83,5373,5374],{"class":92},"(reverseEase);\n",[22,5376,5377,5378,5381,5382,5384],{},"Use a helper ",[62,5379,5380],{},"er()"," to toggle ",[62,5383,5180],{}," on\u002Foff for comparison:",[74,5386,5388],{"className":5202,"code":5387,"language":5204,"meta":79,"style":79},"const er = (value) => {\n  return easeReverseCheckbox.checked ? value || true : false;\n};\n",[62,5389,5390,5416,5444],{"__ignoreMap":79},[83,5391,5392,5395,5398,5401,5404,5408,5411,5414],{"class":85,"line":86},[83,5393,5394],{"class":109},"const",[83,5396,5397],{"class":204}," er",[83,5399,5400],{"class":109}," =",[83,5402,5403],{"class":92}," (",[83,5405,5407],{"class":5406},"s4XuR","value",[83,5409,5410],{"class":92},") ",[83,5412,5413],{"class":109},"=>",[83,5415,93],{"class":92},[83,5417,5418,5421,5424,5427,5430,5433,5436,5439,5442],{"class":85,"line":96},[83,5419,5420],{"class":109},"  return",[83,5422,5423],{"class":92}," easeReverseCheckbox.checked ",[83,5425,5426],{"class":109},"?",[83,5428,5429],{"class":92}," value ",[83,5431,5432],{"class":109},"||",[83,5434,5435],{"class":99}," true",[83,5437,5438],{"class":109}," :",[83,5440,5441],{"class":99}," false",[83,5443,113],{"class":92},[83,5445,5446],{"class":85,"line":116},[83,5447,5448],{"class":92},"};\n",[22,5450,5451,5452,5455,5456,5459,5460,5455,5463,5466],{},"Rebuild timeline on checkbox change via ",[62,5453,5454],{},"menuTimeline.revert()"," and ",[62,5457,5458],{},"rebuildMenuTimeline()",", preserving progress with ",[62,5461,5462],{},"clamp(progress, 0, 1)",[62,5464,5465],{},"menuTimeline.progress(safeProgress).pause()",".",[17,5468,5470],{"id":5469},"interrupt-testing-separates-speed-from-curve","Interrupt Testing Separates Speed from Curve",[22,5472,5473,5474,5477,5478,5481,5482,5484,5485,5488],{},"Simulate mid-animation toggles: ",[62,5475,5476],{},"menuTimeline.timeScale(interruptReverseTimeScale).reverse()",". A slider controls ",[62,5479,5480],{},"timeScale()"," for reverse speed, isolating it from easing curve effects. This reveals how ",[62,5483,5180],{}," smooths interruptions—unchecked reverts to old behavior for side-by-side tests. Result: forward scatter feels explosive (",[62,5486,5487],{},"expo","), reverse elastic and bouncy, enhancing game-like playfulness without complexity.",[553,5490,5491],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":79,"searchDepth":96,"depth":96,"links":5493},[5494,5495,5496],{"id":5173,"depth":96,"text":5174},{"id":5294,"depth":96,"text":5295},{"id":5469,"depth":96,"text":5470},[562],{"content_references":5499,"triage":5513},[5500,5503,5506,5509],{"type":569,"title":5501,"url":5502,"context":572},"EaseReverseClipMenu Demo","https:\u002F\u002Ftympanus.net\u002FDevelopment\u002FEaseReverseClipMenu",{"type":569,"title":5504,"url":5505,"context":572},"EaseReverseClipMenu GitHub","https:\u002F\u002Fgithub.com\u002Fcodrops\u002FEaseReverseClipMenu",{"type":576,"title":5507,"url":5508,"context":572},"GSAP 3.15 Release Notes","https:\u002F\u002Fgsap.com\u002Fblog\u002F3-15\u002F",{"type":569,"title":5510,"url":5511,"context":5512},"GSAP Tween easeReverse Docs","https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FGSAP\u002FTween#easeReverse","recommended",{"relevance":116,"novelty":96,"quality":122,"actionability":116,"composite":586,"reasoning":5514},"Category: Design & Frontend. The article discusses GSAP's `easeReverse` feature, which is relevant for frontend developers working on UI\u002FUX design, particularly in creating smooth animations for toggleable menus. While it provides some practical examples, the content is somewhat niche and may not address broader pain points for product builders.","\u002Fsummaries\u002Fgsap-easereverse-tailored-easing-for-reversible-me-summary","2026-04-26 17:23:27",{"title":5163,"description":79},{"loc":5515},"d9ca0983d454314e","Codrops","https:\u002F\u002Ftympanus.net\u002Fcodrops\u002F2026\u002F04\u002F22\u002Fa-playful-clip-menu-with-gsaps-easereverse\u002F","summaries\u002Fgsap-easereverse-tailored-easing-for-reversible-me-summary",[600,601,602],"GSAP's easeReverse applies custom easing to reverse animations, preventing awkward backwards playback—ideal for toggleable UIs like menus, as shown in a clip-path scatter demo.",[],"dUR180LkevxTyAk58EYv8UwsHhHdpCH0mcDMN5SVy7Y",{"id":5528,"title":5529,"ai":5530,"body":5534,"categories":5736,"created_at":563,"date_modified":563,"description":79,"extension":564,"faq":563,"featured":565,"kicker_label":563,"meta":5737,"navigation":588,"path":5742,"published_at":5743,"question":563,"scraped_at":5744,"seo":5745,"sitemap":5746,"source_id":5747,"source_name":595,"source_type":596,"source_url":5748,"stem":5749,"tags":5750,"thumbnail_url":563,"tldr":5751,"tweet":563,"unknown_tags":5752,"__hash__":5753},"summaries\u002Fsummaries\u002F10-fresh-css-html-apis-for-smarter-layouts-and-eff-summary.md","10 Fresh CSS\u002FHTML APIs for Smarter Layouts and Effects",{"provider":7,"model":8,"input_tokens":5531,"output_tokens":5017,"processing_time_ms":5532,"cost_usd":5533},8960,21644,0.00287985,{"type":14,"value":5535,"toc":5729},[5536,5540,5558,5568,5571,5575,5586,5589,5613,5616,5619,5623,5637,5644,5653,5660,5663,5666,5670,5673,5676,5678],[17,5537,5539],{"id":5538},"native-masonry-and-layout-fixes-end-hacky-workarounds","Native Masonry and Layout Fixes End Hacky Workarounds",[22,5541,5542,5543,5546,5547,5550,5551,5455,5554,5557],{},"Scott Tolinsky kicks off with the Grid Lines API (",[62,5544,5545],{},"display: grid-lines","), calling it the \"best possible thing\" for Pinterest-style masonry layouts. Unlike CSS columns, which snake vertically, or imperfect grid ",[62,5548,5549],{},"pack-fit"," hacks requiring fixed heights, this fills items left-to-right (or customizable directions) using familiar ",[62,5552,5553],{},"grid-template-columns",[62,5555,5556],{},"gap",". Wes Bos agrees it's dead simple—no new learning curve—and opens creative doors beyond photo grids, like shuffling footer links. Available now in Safari 26.4, behind flags in Chrome\u002FFirefox.",[22,5559,5560,5561,5455,5564,5567],{},"Multi-column CSS gets usable fixes with ",[62,5562,5563],{},"column-wrap",[62,5565,5566],{},"column-height",". Previously, specifying columns forced horizontal overflow; now excess text wraps to new rows. Ideal for unbroken paragraphs (vs. segmented divs in flexbox). Scott notes he avoided multi-column before, but these tweaks make it viable. Sticky positioning now works per-axis (Chrome 148), perfect for horizontal-scroll tables in tournaments or conferences—tables notoriously tough on mobile.",[22,5569,5570],{},"Wes and Scott lament MDN demos' shortcomings, pushing for better examples to showcase these evolutions.",[17,5572,5574],{"id":5573},"html-in-canvas-unlocks-next-gen-accessible-ui-effects","HTML-in-Canvas Unlocks Next-Gen, Accessible UI Effects",[22,5576,5577,5578,5581,5582,5585],{},"Wes geeks out over the experimental HTML-in-Canvas API (Chrome flag), letting you nest regular HTML inside ",[62,5579,5580],{},"\u003Ccanvas>"," and paint it via JS APIs like ",[62,5583,5584],{},"requestDrawing()",". Solves canvas's HTML-drawing limits and accessibility woes—no more custom input code or SVG hacks.",[22,5587,5588],{},"Demos steal the show:",[515,5590,5591,5594,5597,5600,5603,5610],{},[518,5592,5593],{},"Pixelated, editable form inputs.",[518,5595,5596],{},"Magnifying glass distorting live text.",[518,5598,5599],{},"Frosted glass: mouse \"wipes\" blur from underlying content, random each load.",[518,5601,5602],{},"Matt Rothenberg's form: glowing focus borders track inputs; submit scan-line stretches\u002Fblurs content off-page.",[518,5604,5605,5606,5609],{},"Jelly slider: pure ",[62,5607,5608],{},"\u003Cinput>"," with wobbly canvas effects.",[518,5611,5612],{},"Jake Archibald's CRT curve on editable HTML.",[22,5614,5615],{},"Scott calls it a \"powerhouse,\" preserving DOM interactivity\u002Faccessibility. Wes ties it to unfulfilled Houdini dreams, enabling shaders, warps, and pixel control—like iOS volume sliders pushing content. He plans more demos; both hope it ships despite experimental status.",[22,5617,5618],{},"\"The world has opened up to me,\" Wes says of discovering it. \"You can put most HTML inside of a canvas element and then apply any shaders or whatever things that you want.\"",[17,5620,5622],{"id":5621},"scoped-and-dynamic-styling-boosts-maintainability","Scoped and Dynamic Styling Boosts Maintainability",[22,5624,5625,5626,5455,5629,5632,5633,5636],{},"Name-only container queries (Firefox 149, Chrome\u002FSafari 148\u002F26.4) scope CSS via ",[62,5627,5628],{},"container-name: sidebar",[62,5630,5631],{},"@container sidebar {}","—no size\u002Fstyle queries needed. Scott spotted it via Chris Coyier; Wes praises it over ",[62,5634,5635],{},"@scope","'s clunky feel, combining scoping with queries (style queries incoming). Baked-in, class-free alternative to scoping hacks.",[22,5638,5639,5640,5643],{},"CSS ",[62,5641,5642],{},"random(0, 10, 2)"," generates even numbers between bounds—Wes's favorite for avoiding JS vars, seeded randoms for SSR, or manual card rotations. Safari-only for now.",[22,5645,5646,5455,5649,5652],{},[62,5647,5648],{},"::search-text",[62,5650,5651],{},"::search-text:current"," style browser find-in-page highlights, including the active match. Scott loves theming beyond default yellow; Wes gripes about lazy-loaded sites (e.g., Twitter) not re-highlighting—calls for DOM-change awareness.",[22,5654,5655,5656,5659],{},"Safari axed haptic feedback workarounds (checkbox ",[62,5657,5658],{},"switch"," toggles), enforcing user-gesture rules like popups\u002Faudio. Frustrates Wes\u002FScott, who see native apps abusing it.",[22,5661,5662],{},"Border shapes improve; element-scoped view transitions enable cleaner animations.",[22,5664,5665],{},"\"Every time I need randomness in CSS, I have to go into my view layer... This is a straight-up CSS API,\" Wes explains.",[17,5667,5669],{"id":5668},"trade-offs-hype-vs-practical-power-in-a-tailwind-world","Trade-offs: Hype vs. Practical Power in a Tailwind World",[22,5671,5672],{},"Hosts critique AI obsession and Tailwind dominance sidelining CSS innovation—none of these in Tailwind yet. Scott: \"There's so much cool stuff added to CSS that is super powerful.\" Wes: \"CSS that doesn't get the props that it needs.\" They urge playing with flags, linking syntax.fm\u002F996 for demos\u002Fposts (e.g., WebKit on grid-lines).",[22,5674,5675],{},"\"Can it like get any more simple than that? It is really super cool. That's it. There's nothing to learn here,\" Scott on grid-lines.",[17,5677,513],{"id":512},[515,5679,5680,5686,5689,5700,5707,5713,5723,5726],{},[518,5681,5682,5683,5685],{},"Use ",[62,5684,5545],{}," today in Safari for effortless masonry—no more column hacks or fixed heights.",[518,5687,5688],{},"Experiment with HTML-in-canvas (Chrome flag) for canvas effects on live, accessible DOM elements like inputs.",[518,5690,5691,5692,5695,5696,5699],{},"Scope styles natively with name-only container queries: ",[62,5693,5694],{},"container-name"," + ",[62,5697,5698],{},"@container"," beats class bloat.",[518,5701,5702,5703,5706],{},"Generate CSS randomness with ",[62,5704,5705],{},"random()"," to skip JS for rotations, avoiding SSR seeding headaches.",[518,5708,5709,5710,5712],{},"Style ",[62,5711,5651],{}," for branded find-in-page; push sites to handle lazy-load re-highlights.",[518,5714,5715,5716,5719,5720,5722],{},"Leverage bi-directional ",[62,5717,5718],{},"sticky"," for complex tables; multi-column ",[62,5721,5563],{}," for paragraph flows.",[518,5724,5725],{},"Check flags in Chrome\u002FFirefox\u002FSafari 26.4+; ignore Tailwind gaps—pure CSS ships faster.",[518,5727,5728],{},"Build demos like frosted glass or CRT curves to prototype next-gen UIs without accessibility loss.",{"title":79,"searchDepth":96,"depth":96,"links":5730},[5731,5732,5733,5734,5735],{"id":5538,"depth":96,"text":5539},{"id":5573,"depth":96,"text":5574},{"id":5621,"depth":96,"text":5622},{"id":5668,"depth":96,"text":5669},{"id":512,"depth":96,"text":513},[562],{"content_references":5738,"triage":5739},[],{"relevance":116,"novelty":116,"quality":122,"actionability":116,"composite":5740,"reasoning":5741},3.25,"Category: Design & Frontend. The article discusses new CSS and HTML APIs that enhance frontend development, addressing practical UI challenges. While it provides some innovative features, it lacks detailed implementation guidance for developers to act on immediately.","\u002Fsummaries\u002F10-fresh-css-html-apis-for-smarter-layouts-and-eff-summary","2026-04-15 11:01:38","2026-04-19 01:20:19",{"title":5529,"description":79},{"loc":5742},"85dd0b7471805afa","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=unqPqGeJMck","summaries\u002F10-fresh-css-html-apis-for-smarter-layouts-and-eff-summary",[600,601,602],"Wes Bos and Scott Tolinski unpack new CSS features like native masonry grids, HTML-in-canvas for accessible effects, and scoped queries, solving longstanding UI pain points with simple, powerful APIs.",[],"nwosFn5r6OyOuxRQaMa_cZhtRb9eXENGYBtuMGRsrT4",{"id":5755,"title":5756,"ai":5757,"body":5761,"categories":5924,"created_at":563,"date_modified":563,"description":79,"extension":564,"faq":563,"featured":565,"kicker_label":563,"meta":5925,"navigation":588,"path":5932,"published_at":5743,"question":563,"scraped_at":5933,"seo":5934,"sitemap":5935,"source_id":5747,"source_name":595,"source_type":596,"source_url":5748,"stem":5936,"tags":5937,"thumbnail_url":563,"tldr":5938,"tweet":563,"unknown_tags":5939,"__hash__":5940},"summaries\u002Fsummaries\u002F10-new-css-html-apis-for-smarter-layouts-and-effec-summary.md","10 New CSS\u002FHTML APIs for Smarter Layouts and Effects",{"provider":7,"model":8,"input_tokens":5531,"output_tokens":5758,"processing_time_ms":5759,"cost_usd":5760},2517,27657,0.003028,{"type":14,"value":5762,"toc":5916},[5763,5767,5770,5773,5777,5784,5786,5808,5811,5815,5818,5822,5829,5839,5843,5849,5855,5858,5864,5867,5873,5878,5883,5888,5890],[17,5764,5766],{"id":5765},"masonry-layouts-finally-native-with-grid-lines-api","Masonry Layouts Finally Native with Grid Lines API",[22,5768,5769],{},"Scott Tolinski leads with excitement over the CSS Grid Lines API (display: grid-lines), calling it the 'best possible thing' for Pinterest-style masonry layouts. Unlike past hacks like CSS columns (which snake vertically) or fixed-height grid with pack-fit, this fills items left-to-right (or customizable directions) using familiar properties like grid-template-columns and gap. Wes Bos agrees it's 'super simple'—no new learning curve—and opens creative uses beyond photos, like shuffling footer links.",[22,5771,5772],{},"Available now in Safari 26.4; Chrome\u002FFirefox behind flags. Scott notes it's a game-changer for sites needing dynamic shuffling without JavaScript workarounds. 'Can it get any more simple than that?' Scott asks, emphasizing how it eliminates gotchas like fixed heights.",[17,5774,5776],{"id":5775},"html-in-canvas-unlocks-next-gen-ui-effects","HTML-in-Canvas Unlocks Next-Gen UI Effects",[22,5778,5779,5780],{},"Wes Bos geeks out hardest here: 'My brain has been opened up by some of these demos... the world has opened up to me.' This experimental API lets you nest regular HTML (forms, inputs, text) inside a ",[5781,5782,5783],"canvas",{}," element, then paint it via JS APIs for shaders, distortions, and effects—while keeping full accessibility and interactivity.",[22,5785,5588],{},[515,5787,5788,5791,5794,5797,5800,5805],{},[518,5789,5790],{},"Pixelated form inputs where you type live.",[518,5792,5793],{},"Magnifying glass over inputs with distortion.",[518,5795,5796],{},"Frosted glass effect: blur canvas-behind content, 'wipe' frost with mouse\u002Ffinger.",[518,5798,5799],{},"Matt Rothenberg's form: glowing focus borders follow inputs; submit triggers a stretching\u002Fblurring scan-line wipe.",[518,5801,5605,5802,5609],{},[5803,5804],"input",{},[518,5806,5807],{},"Jake Archibold's CRT TV curve on HTML content.",[22,5809,5810],{},"Wes built frosted window and plans more, comparing it to unfulfilled Houdini dreams or iOS volume sliders that warp screen pixels. Scott highlights accessibility win: no custom input code needed. Behind Chrome flag; Wes hopes it ships for 'control over how pixels are painted in the DOM.'",[17,5812,5814],{"id":5813},"scoped-styling-via-name-only-container-queries","Scoped Styling via Name-Only Container Queries",[22,5816,5817],{},"Scott spotlights this under-the-radar gem in Firefox 149, Chrome 148, Safari 26.4: container-name: sidebar on a wrapper, then @container sidebar {} scopes styles natively—no class bloat. Wes calls @scope 'didn't feel right' in practice; this feels better, especially with style queries incoming. Builds on container queries for true platform scoping. Scott found it via Chris Coyier tweet and Frontend Masters post; Anthony Ferner confirmed support on Bluesky.",[17,5819,5821],{"id":5820},"dynamic-and-thematic-utilities","Dynamic and Thematic Utilities",[22,5823,5824,5828],{},[5825,5826,5827],"strong",{},"CSS random()",": Wes praises Safari's random(0, 10, 100) for even numbers between bounds—no more JS vars, seeded random for SSR, or per-element hacks. Perfect for rotating card values on page load.",[22,5830,5831,5834,5835,5838],{},[5825,5832,5833],{},"::search-text and ::search-text:current",": Scott demos styling browser find-in-page highlights (Cmd+F). Match site theme; ",[5836,5837],"current",{}," styles the active match. Simple stacking pseudo-classes. Both gripe about lazy-loading sites (e.g., Twitter) not re-highlighting—needs DOM update triggers.",[17,5840,5842],{"id":5841},"layout-fixes-for-real-world-use","Layout Fixes for Real-World Use",[22,5844,5845,5848],{},[5825,5846,5847],{},"Sticky positioning both axes",": Una's post notes Chrome 148 enables per-axis sticking (top\u002Fbottom + left\u002Fright). Scott ties to mobile tables, conferences, tournaments—solves scrolling in grids.",[22,5850,5851,5854],{},[5825,5852,5853],{},"Multi-column CSS improvements",": New column-wrap and column-height let long paragraphs flow into specified columns, wrapping rows if overflow. Scott avoids multi-col usually but welcomes fixes over flexbox segmentation.",[22,5856,5857],{},"Safari axed haptic feedback workaround (checkbox switch spam)—Scott blames intentional limits; Wes wants user permissions like webcam.",[22,5859,5860,5863],{},[5825,5861,5862],{},"Border shapes and view transitions",": Quick hits on improved curves; element-scoped transitions for smoother animations. Wes laments MDN demos needing better handholding.",[22,5865,5866],{},"Throughout, they bemoan CSS hype drought amid AI\u002FTailwind focus—'so much cool stuff added... super powerful,' Wes says. Sponsor shoutout: Sentry.io for error tracking.",[5868,5869,5870],"blockquote",{},[22,5871,5872],{},"\"I can't wait to talk about the HTML and canvas thing... now the world has opened up to me.\" —Wes Bos, on pixel effects without losing HTML interactivity.",[5868,5874,5875],{},[22,5876,5877],{},"\"Display: grid-lines... Can it like get any more simple than that? It is really super cool.\" —Scott Tolinski, on native masonry layouts.",[5868,5879,5880],{},[22,5881,5882],{},"\"Every time I need randomness in CSS, I have to... pass in a CSS variable... This is a straight up CSS API.\" —Wes Bos, on random() eliminating JS hacks.",[5868,5884,5885],{},[22,5886,5887],{},"\"You're able to stick them to the top or offset... now they work in both directions.\" —Scott Tolinski, via Una, on dual-axis sticky.",[17,5889,513],{"id":512},[515,5891,5892,5895,5901,5904,5907,5910,5913],{},[518,5893,5894],{},"Enable Chrome flags to demo Grid Lines (display: grid-lines) for masonry—pair with grid-template-columns\u002Fgap; ships soon in Safari.",[518,5896,5897,5898],{},"Experiment with HTML-in-Canvas: nest DOM in ",[5781,5899,5900],{},", use requestDraw() for shaders\u002Fdistortions; keeps accessibility.",[518,5902,5903],{},"Scope CSS natively: container-name: foo then @container foo {}—Firefox\u002FChrome\u002FSafari ready.",[518,5905,5906],{},"Generate random CSS values: random(0, 100, 2) for even numbers; no JS needed.",[518,5908,5909],{},"Style browser search: ::search-text:current for themed find-in-page highlights.",[518,5911,5912],{},"Use dual-axis sticky for tables\u002Fgrids; multi-column with column-height for paragraph flows.",[518,5914,5915],{},"Track support via syntax.fm show notes; build demos now for production edge.",{"title":79,"searchDepth":96,"depth":96,"links":5917},[5918,5919,5920,5921,5922,5923],{"id":5765,"depth":96,"text":5766},{"id":5775,"depth":96,"text":5776},{"id":5813,"depth":96,"text":5814},{"id":5820,"depth":96,"text":5821},{"id":5841,"depth":96,"text":5842},{"id":512,"depth":96,"text":513},[562],{"content_references":5926,"triage":5930},[5927],{"type":569,"title":5928,"url":5929,"context":5512},"Sentry","https:\u002F\u002Fsentry.io\u002Fsyntax",{"relevance":116,"novelty":116,"quality":122,"actionability":96,"composite":586,"reasoning":5931},"Category: Design & Frontend. The article discusses new CSS\u002FHTML APIs that enhance frontend development, which is relevant to the audience. While it provides interesting insights into experimental features, it lacks detailed actionable steps for implementation.","\u002Fsummaries\u002F10-new-css-html-apis-for-smarter-layouts-and-effec-summary","2026-04-19 14:56:01",{"title":5756,"description":79},{"loc":5932},"summaries\u002F10-new-css-html-apis-for-smarter-layouts-and-effec-summary",[600,601,602],"Wes Bos and Scott Tolinski unpack experimental CSS features like Grid Lines for masonry, HTML-in-Canvas for pixel-perfect effects, and utilities like CSS random—most behind flags but ready for demos today.",[],"6kNXl40rPzAzc3mZOIU_B2n-6h5HX7DB-NrAUHROVxQ"]