Hasty Treat - The Status of Element Queries / Container Queries

Hasty Treat - The Status of Element Queries / Container Queries

In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 4:30 - The General Idea Toward Responsive Elements — Brian Kardell 6:20 - Problems It’s not as easy as, “how do we write them” Some of the requirements may need a fundamental change to browser engines May be very impractical and take a long time “Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell 8:56 - What’s been happening? Lots of conversations Dead ends “How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell ‘containment’ and ResizeObserver, Implemented in all browsers in about 2 years 12:00 - Progress Lot’s of discussion Goog, Moz, Apple, smart people Not there yet Big ideas that could go somewhere .foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); } “A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell Or a system based on resizeObserver “In the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be ‘closer’ to a path that might be paveable.” ~ Brian Kardell https://github.com/ZeeCoder/container-query https://github.com/FreddyFY/styled-container-query Links uses.tech Ian Kilpatrick Jared Palmer’s tsdx Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Avsnitt(963)

CSS in JS 💅👩‍🎤💁🚒 (Drama Free!)

CSS in JS 💅👩‍🎤💁🚒 (Drama Free!)

The most requested syntax episode ever! We break down CSS in JavaScript. Pros/Cons? What is it? What problems does it solve? What libraries should you use? Is it stupid or amazing? Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Follow us on twitter! Wes Bos Scott Tolinski Syntax Show Notes BEM Styled Components Emotion Radium Glamorous Styled JSX Sick Picks Boxyapp Mail Client Airpods Shameless Plugs Grab Level Up Tuts before the price goes up! Modern Dev Tools

6 Sep 20171h 5min

Dang, that's handy! JavaScript Utility Libraries 🛠️

Dang, that's handy! JavaScript Utility Libraries 🛠️

Scott and talk all about different JavaScript utility libraries that make you say "Dang, that's handy!" Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Lodash Underscore You should follow John David Dalton on twitter Moment.js moment().endOf(‘term’) date-fns Slugify speakingurl Fetch API Axios Cookie Jar store.js Cross Storage Faker.js Woah URL.searchParams() is a thing Parse URI url-search-params-polyfill ngrok Browsesync Async Bling.js Sick Picks Essentialism Book Essentialism Audiobook Satechi Aluminum Multi-Port Adapter Satechi all Docks Shameless Plugs Dhanish Gajjar's Instagram Paweł Grzybek's Snippet Generator Twitter Wes Bos Scott Tolinski Syntax

30 Aug 201759min

Wes Bos Origin Story 🎸💼💻🔥🐷

Wes Bos Origin Story 🎸💼💻🔥🐷

In this episode, Wes talks about his career path from a MySpace customizer to where he is now. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Brootal PS20.itgo.com CDN Money 2004 WesBos.com The Success of Zara: Technology Makes It Possible REI BTM at Ryerson University WordPress Codex Angle Media Group Ryerson Co-op Jet Cooper Darcy Clarke DealPage Daily Deal Aggregation jQuery IRC YayQuery Ladies Learning Code HackerYou Wes' Blog Sublime Text Book Command Line Power User Flexbox.io React For Beginners ES6 for Everyone JavaScript30 This Podcast Sick Picks MotoRead Shameless Plugs Wes' Courses Level UP Tutorials Youtube Twitter Wes Bos Scott Tolinski Syntax

23 Aug 201756min

Scott Tolinski Origin Story 🎧 📹 💻 🕺

Scott Tolinski Origin Story 🎧 📹 💻 🕺

In this episode, Scott talks about his unconventional career path and how to grow your career by working on what you love. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes UofM Performing Arts Technology Devin Kerr Jamie Schefman Michelle Chamuel Guitar World Ghostly International Q LTD Michigan Creative Ford GTB Level Up Tutorials Scott Concussion Atya Sick Picks Good Hertz Shameless Plugs Wes' Courses Level Up Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax

16 Aug 201756min

Accepting Money on the Internet 💰💸

Accepting Money on the Internet 💰💸

In this episode we talk about how to accept money on the internet including the ups of Stripe, the downs of PayPal. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Apollo React Apollo GraphCool Stripe PayPal Braintree Stripe Docs HTML5 Autocomplete Types Stripe Radar Royal Bank PayPal WorkAround Stripe Atlas Transferwise Stripe Bitcoin Sick Picks ChefSteps What Cha Tea Shameless Plugs Wes' Courses Level UP Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax

9 Aug 20171h 3min

How to Slam Dunk Freelancing 🏀🤑

How to Slam Dunk Freelancing 🏀🤑

Sponsor Deliciousbrains WP Migrate DB Pro - Use the code SYNTAX for 20% off Show Notes Stickers - SOLD OUT MORE SOON Scott's Personal Website on Gatsby Gatsby Codealong Gatsby MJML Email Framework The E-Myth Revisited Book Design is a Job Breaking the Time Barrier Basecamp Trello Freshbooks Wave Sick Picks Hyper Key + Karabiner Elements Better Touch Tool King of the Road Twitter Wes Bos Scott Tolinski Syntax

2 Aug 201758min

JavaScript Tooling - 004

JavaScript Tooling - 004

Show Notes Deliciousbrains WP Migrate DB Pro WesBos Website Level Up Tutorials WHY USE WWW? Webpack Babel ESLint Prettier Babili Prepack Sick Picks Figma Turn Ideas into Products Faster Design, prototype, and gather feedback all in one place with Figma. CalDigit TS3 Dock The TS3 is designed for users who require their Thunderbolt™ dock to act as the main charging hub for their laptop. Delivering the reality of single cable charging, ONE Thunderbolt™ 3 cable is all it takes for a clean, elegant and streamlined workspace. Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. React Native for everyone Twitter Wes Bos Scott Tolinski

26 Juli 201749min

CSS Preprocessors and Structuring CSS - 003

CSS Preprocessors and Structuring CSS - 003

Show Notes WesBos Website Level Up Tutorials GraphQL Dinosaur JS Conference Angular Pug / Jade EJS BEM Methodology Stylus Rupture Less Sass PostCSS PostCSS Autoprefixer RuckSack cssnext LostGrid Bootstrap Haml Babel Flickity Plugin webpack Compass React Sick Picks Bartender 2 Lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar. Vanilla Hide menu bar icons on your Mac. Power Blocks One set of Power Block replaces racks of dumbbells Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. The Sketch Course & UX Prototyping with Principle Combo Limited Sale Price: $39.99 $49.99 Learn the new industry standard for web design. Become an expert in the app that is changing how designers work in the modern web and app design world. Animate Your Ideas, Design Better Apps Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. Twitter Wes Bos Scott Tolinski

19 Juli 20171h 3min

Populärt inom Politik & nyheter

aftonbladet-krim
svenska-fall
motiv
p3-krim
fordomspodden
rss-krimstad
flashback-forever
rss-viva-fotboll
blenda-2
aftonbladet-daily
grans
rss-sanning-konsekvens
rss-vad-fan-hande
dagens-eko
svd-nyhetsartiklar
olyckan-inifran
spar
rss-expressen-dok
rss-klubbland-en-podd-mest-om-frolunda
rss-frandfors-horna