{"id":346482,"date":"2021-08-09T12:15:09","date_gmt":"2021-08-09T19:15:09","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=346482"},"modified":"2021-08-13T14:14:30","modified_gmt":"2021-08-13T21:14:30","slug":"210-yapping-about-astro","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/210-yapping-about-astro\/","title":{"rendered":"#210: Yapping About Astro"},"content":{"rendered":"\n

I think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We’ll get into that in the video. How can we call it a framework if it asks you to “bring your own framework”?! I’d say the main thing that compels me about Astro is that you get to build a static-by-default site using JavaScript components and only load whatever JavaScript you need by opting into it very carefully. But I also really like the data fetching model, which we’ll see is fundamental to the little idea for the little site I made. We also show off Astro’s trick for conditional loading, which is compelling, but I wonder if people focus on it a little too heavily.<\/p>\n","protected":false},"excerpt":{"rendered":"

I think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We’ll get into that in the video. How can we call it a framework if it asks you to “bring your own framework”?! I’d say the main thing that compels me about Astro is that you […]<\/p>\n","protected":false},"author":3,"featured_media":346484,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"Video: Yapping About Astro","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[18965,13031],"acf":[],"jetpack-related-posts":[{"id":344317,"url":"https:\/\/css-tricks.com\/video-screencasts\/206-building-a-data-backed-next-js-site-with-prisma-app-platform\/","url_meta":{"origin":346482,"position":0},"title":"#206: Building a Data-Backed Next.js Site with Prisma & App Platform","date":"July 12, 2021","format":false,"excerpt":"I'm joined by Chris Sev from Digital Ocean to talk about their new App Platform. We're going to use it to build a little website. The site will be blog-like: posts with IDs, titles, content, and the more dynamic bit, \"likes.\" We're going to use some pretty modern tech to\u2026","rel":"","context":"In \"digitalocean\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/app-platform-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":187264,"url":"https:\/\/css-tricks.com\/lodge\/svg\/27-animating-svg-javascript\/","url_meta":{"origin":346482,"position":1},"title":"27: Animating SVG with JavaScript","date":"November 1, 2014","format":false,"excerpt":"JavaScript is the last of the ways we'll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can't do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":146654,"url":"https:\/\/css-tricks.com\/video-screencasts\/127-basics-of-javascript-templating\/","url_meta":{"origin":346482,"position":2},"title":"#127: Basics of JavaScript Templating","date":"August 13, 2013","format":false,"excerpt":"A template is a chunk of HTML that you need to inject onto the page. Often templates are created \"server side\" - in that they come to the JavaScript fully formed and just need to be put into the DOM. But sometimes that isn't feasible or would require and extra\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147851,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/01-welcome-to-the-learning-jquery-course\/","url_meta":{"origin":346482,"position":3},"title":"#01: Welcome to the Learning jQuery Course","date":"August 22, 2013","format":false,"excerpt":"Welcome! The goal of this course is to take you, you beautiful front end developer you, from someone with very little or no jQuery or JavaScript knowledge and up you to someone who is quite comfortable working with and writing jQuery and JavaScript. There are other courses out there, this\u2026","rel":"","context":"With 16 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5356,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/fallback-content\/","url_meta":{"origin":346482,"position":4},"title":"JavaScript Required Content with Fallback Content","date":"January 21, 2010","format":false,"excerpt":"JavaScript-required area is hidden with inline CSS, and then shown after it loads with a small snippet of JavaScript. Below that, noscript tags are used for fallback content. So only one or the other of these bits of content will be required depending on if JavaScript is enabled or not.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":149647,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/07-2\/","url_meta":{"origin":346482,"position":5},"title":"#07: Do!","date":"September 10, 2013","format":false,"excerpt":"As we've talked about, jQuery can be thought of as a \"select and do\" library. We've talked about selecting quite a bit, so now let's talk about some doings. Remember that pattern basically looks like this: \/\/ Select something! $(\".something\") \/\/ Do something! .hide(); Rather than working with more theoretical\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/346482"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=346482"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/346482\/revisions"}],"predecessor-version":[{"id":346492,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/346482\/revisions\/346492"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/346484"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=346482"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=346482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}