Hasty Treat - Stylin the Unstylables

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 17 May 2021

⏱️ 22 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes Can it be styled? Solutions 04:28 - Just style the defaults Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style. This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs. Select Input - number, date, etc. Very hard to style Often need appearance: none; for mobile Checkbox / Radio Generally speaking, these CSS Properties can be applied to all inputs: font-size color padding margin background / images outline (remember focus) border 08:20 - Overlap with more dom elements, set background images Checkbox / Radio / Toggle buttons Often used :before and :after along with labels — e.g. label + input:checked Select can have element overlap 14:13 - Re-implement the UI with JavaScript Video / Audio HUGE rabbit hole of things to code Very important to maintain accessibility 15:46 - Use a UI Library Bootstrap Foundation Ant Design Carbon Design Fast Lightning Design System Material Design Chakra 17:20 - Open UI Documenting all the different types of web UI controls https://open-ui.org/ https://twitter.com/stubbornella/status/1384889551924121605 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

Transcript

Click on a timestamp to play from that location

0:00.0	Monday Monday
0:02.0	Open wide dev fans get ready to stuff your face with JavaScript CSS node module barbecue tips get work flows break dancing soft skills web development the hastiest the
0:13.5	Carrazius the tastiest web development treats coming in hot. Here is West
0:19.2	Barracuda boss and Scott L. Toro. Look go to Lenski
0:25.3	Welcome to syntax in this Monday hasty treat. We're going to be talking about
0:32.6	Stylen the installables and you might not think about this offhand, but there are a number of things that are
0:39.4	Insanely painful to try to CSS in HTML and me I like CSS and stuff
0:45.0	So we're going to be talking all about the different types of things that are difficult to style and CSS a little bit about how you can style them and then
0:52.5	Some future tech around this same subject. My name is Scott Talinsky. I'm a developer from Denver, Colorado and with me is always is West boss coming to you from the full stack
1:02.1	Shack. Yes, I'm out here Internet is a little bit better today. So me and Scott are having a decent time talking
1:09.7	Absolutely. I thought you had more there. So yeah, I'll pick it right back up
1:14.9	Yeah, we're having a great time talking and in between this episode and the other one just dropped my new head
1:19.0	Trimmer just arrived so shout out to the head streamer. That was very excited about in the last episode that we just recorded
1:24.2	This episode is sponsored by two excellent sponsors and I'm talking about sanity and log rocket West
1:31.0	Would you like to take sanity and I'll take a log rocket? Yes, sanity is they I love it
1:37.2	They've every time I visit their homepage. They've they're very clearly distilling down what it is they do and now their website
1:45.1	It just says content is data. So basically it's a CMS where you can create your content types
1:51.5	You can create relationships between the two and then you pull that data into whatever
1:57.9	UI you've wanted whether that is I've talked to them about some pretty cool
2:03.1	Use cases that they've used it for obviously pull it into a mobile app or a website, but it could be pulled in literally anywhere
2:10.8	So I really like it myself. They have this really slick thing called sanity studio, which is I'm going to say the best
2:18.3	Editor I have ever worked in if you've you've been using WordPress forever check out sanity studio because they have spent so much time
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.