Podcasts about styled components

Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem. Show Notes 00:00 Welcome to Syntax! 01:41 Brought to you by Sentry.io. 02:28 The State of React 2023. 03:11 The Main API Painpoints. 04:31 forwardRef. 05:27 memo. 06:39 Context API. 07:18 StrictMode. 08:45 Double rendering. 09:36 State management. 11:58 Hooks Pain Points. 12:11 useEffect. 12:33 Dependency arrays. 13:11 New API Pain Points. 13:19 React Server Components. 14:40 Taint API. 15:19 Libraries. 17:02 Jotai. 17:45 Apollo Client. 19:05 Redux. 20:57 Redwood. 21:26 React Aria. 21:55 Astro. 22:04 The most negative. 23:35 Component Libraries. 25:50 Other Component Libraries. 25:53 Mantine. 27:47 Details element. Tolin.ski/demos. 28:59 Honorable mentions. 29:07 Animations. 29:28 Data Visualization. 31:26 CSS Tools and Libraries. 33:14 Styled Components. 34:16 Meta Frameworks. 38:50 Hosting. 40:08 Other Services. 40:45 Back-end language trivia. 43:00 State management. 43:40 Data Loading. 44:08 Other Tools. 44:09 Testing Libraries. 44:45 React Renderers. 47:58 Podcasts, thank you! 48:14 Sick Picks & Shameless Plugs. Sick Picks Scott: Thermacell. Wes: Nerf Guns Shameless Plugs Wes: Syntax.fm. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Josh Comeau, an indie hacker and educator, delves into CSS in React Server Components, shares his journey in web development, offers insights on server-side rendering, and provides tips on mastering CSS for JavaScript developers. Links https://www.joshwcomeau.com https://twitter.com/joshwcomeau https://www.linkedin.com/in/joshwcomeau https://github.com/JoshWComeau https://css-for-js.dev We want to hear from you! How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend? Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket provides AI-first session replay and analytics that surfaces the UX and technical issues impacting user experiences. Start understand where your users are struggling by trying it for free at [LogRocket.com]. Try LogRocket for free today.(https://logrocket.com/signup/?pdr) Special Guest: Josh W. Comeau.

In Elixir Wizards Office Hours Episode 4, SmartLogic Product Designer Ava Slivkoff joins hosts Sundi Myint and Owen Bickford to discuss the product designer's role in software development. Ava shares her experience navigating client expectations, software design principles, and technical constraints. They explore the integration of design and development workflows and how designers and engineers can collaborate to meet a project's specific needs. The conversation emphasizes the value of cross-functional teams and the synergy that can arise when all team members work in harmony to bring a product to life. Key concepts discussed in the episode: The broad scope of the designer role in web app development The value of an MVP in the iterative software design process Challenges of aligning client expectations with design best practices Pros and cons of leveraging pre-built Tailwind CSS styled components Trends and evolution in web design aesthetics and patterns Leveraging open-source design systems like Tailwind UI Balancing technical constraints with design aspirations Communication and trust-building between designers and engineers Workflows for design handoffs and feedback loops Importance of user flows and mapping the product experience Challenges around the implementation of complex UI elements Benefits of regular design review meetings and syncs Fostering empathy and collaboration across disciplines Links mentioned Figma Dev Mode https://www.figma.com/dev-mode/ Tailwind CSS utility-first CSS framework https://tailwindcss.com/ Tailwind UI https://tailwindui.com/ https://devinai.ai/ Special Guest: Ava Slivkoff.

I would like to know your take on inline styles on large scale projects. Personally I am big fan of inline styles or having all styles in my jsx file. Also take on using Tailwind over a design system.Inline Styles vs CSS File Styles

A Future Founder Promise podcast clip from the "Stellate Office Hour" interview with Phil Plückthun, Staff Software Engineer at Stellate. Phil Plückthun is a veteran open source developer who created the GraphQL client urql, and he was also hire #01 at Stellate. Phil has been working with the React community since its early days. You may also know him from some other highly popular open source projects like styled-components, where he already started working with our CEO and podcast host Max Stoiber. Phil was also involved with react-ssr-prepass, and react-live. It is noteworthy that the aforementioned GraphQL client urql is now the third most popular choice in the community for GraphQL clients. Hear Phil's perspective on: First Job Startup Phase Early React Early Styled Components React Evolution Basic React Community Pendulum Swings Getting Into GraphQL and much more… We are currently doing a couple of team interviews to tell you more about the fine people who work with us at Stellate. We wanna document their stories, and share their perspectives with you. If you got interested in working with us as well, please take a look at our hiring page.

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Proposal to merge WASI based WebAssembly support That Old Certificate Expired and Started an Outage. This is What Happened Next Running Puma in AWS Migrating From Turbolinks To Turbo Simulate geolocation with Capybara and Headless Chrome Ruby-oembed - an oEmbed consumer library written in Ruby Web Discontinued Long Term Support for AngularJS Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust! How to Make a Component That Supports Multiple Frameworks in a Monorepo Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser How we migrated 541 components from Styled Components to Emotion with zero bugs Why practicing DRY in tests is bad for you Eleventy, a simpler static site generator React-Grid-Layout - a grid layout system Elf - a Reactive Store with Magical Powers Tinybase - a tiny, reactive JavaScript library for structured state and tabular data Danfojs - powerful javascript data analysis toolkit Ohm - a library and language for building parsers, interpreters, compilers, etc

In this episode we discuss the battle over CSS purity, Styled Components versus Emotion, and how to form a mental model around styling by using patterns for common layouts instead of technology.Travis Waith-Mair Twitter GitHub Home Page Bedrock Layout Home Page GitHub Links Composing Layouts in React React Round Up - Composing Layouts for React ★ Support this podcast ★

It’s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, and more! 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. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website. 05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line? 18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support? 07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular 22:48 - Do you think it’s worth learning WordPress for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money. 30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch? 36:52 - Do you guys ever see your premium courses pirated on sites like Udemy, Skillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this? 39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it? 42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys! 50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work. 54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice? Links Fastify RedwoodJS Keystone.js 10up Vite Safari + Dev tools Browsersync localtunnel ngrok Xcode simulator Mike Birbiglia Brian Douglas YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: 3 in 1 Multi USB Charging Cable Wes: Milk Frother Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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

Today we discuss CSS, and the preprocessors + variations such as SCSS, SASS, CSS Modules, and Styled Components.CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser. The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain. SASS, SCSS, and LESS are examples of theseA CSS Module is a CSS file in which all class names and animation names are scoped locally by default. The key words here are scoped locally. With CSS Modules, your CSS class names become similar to local variables in JavaScript. By the way, a 'CSS Module' is just a .css file. You call it a 'CSS Module' if you plan on using it with a CSS Modules compiler.Styled Components are tagged template literals combined with the power of CSS, which allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!ResourcesCSS PreprocessorsSASS vs SCSS vs LESSCSS ModulesStyled ComponentsConnect With Us!Instagram: @badforeducationpodcastTwitter: @badforedupodEmail: badforeducationpodcast@gmail.comSend us questions! Or say hello to  us via email!Want a free $20 Amazon gift card and to start your own podcast with Buzzsprout?It's as simple as one click in our link below. Get started today, and have access to their extensive network and assistance. Podcasting isn't hard when you have the right partners!Click our link here

On this week's episode, Chris and Steph reflect on their top themes and technical picks for 2020. This episode is brought to you by: ScoutAPM (https://scoutapm.com/bikeshed) - Give Scout a try for free today and Scout will donate $5 to the open source project of your choice when you deploy ExpressVPN (https://www.expressvpn.com/bikeshed) - Click through to can get an extra 3 months free on a one-year package. Tailwind CSS (https://tailwindcss.com/) BEM CSS (http://getbem.com/) Styled Components (https://styled-components.com/) css-modules (https://github.com/css-modules/css-modules) BikeShed Episode: I'm a Designer Now (https://www.bikeshed.fm/252) ActiveModel Error Objects (https://blog.saeloun.com/2020/06/17/rails-active-model-errors.html) Razer Kiyo (https://www.razer.com/streaming-cameras/razer-kiyo/RZ19-02320100-R3M1) Upright Go 2 (https://store.uprightpose.com/products/upright-go2) Svelte (https://svelte.dev/) Phoenix Live View (https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html) Laravel Livewire (https://laravel-livewire.com/) Stimulus (https://stimulus.hotwire.dev/) Inertia.js (https://inertiajs.com/)

It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more! 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. 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 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow. 03:20 - Which JS library/framework do you think beginners might find the easiest to understand? 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere? 09:23 - My question is about the difference between a framework and a library. Should we have two separate words? 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas. 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library? 21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects? 29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored? 35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something? 38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website? 40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER. 47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.) 48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev? 50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)? 54:20 - What’s your approach for handling padding + margin with components? 57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do? 59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines? Links Syntax 002: Webcam and audio access with WebRTC and getUserMedia() Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy Daily.co Twilio Svelte https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case Master Gatsby Syntax 292: How to Make Freelancing Easier https://github.com/formium/tsdx https://nx.dev/react https://github.com/lerna/lerna https://www.npmjs.com/package/babel-plugin-module-resolver Deno Rust wasm-pack https://rocket.rs/ Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More! Modern CSS Layouts Modern CSS Design Systems Digital Ocean App Platform ××× SIIIIICK ××× PIIIICKS ××× Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook Wes: Levi’s Barstow Western Shirt Shameless Plugs Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%! Wes: Master Gatsby - Black Friday Sale: All courses 50% off! 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

It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader and more! 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. 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 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”? 06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips. 11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel). 13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level? 18:01 - Why should you choose Styled Components over other ways of writing CSS? 22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa. 26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better? 31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal. 37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do. Links inputmag.com Focus app TSdx Rollup Webapck Parcel Beginner Javascript Typescript Darknet Diaries ××× SIIIIICK ××× PIIIICKS ××× Scott: Malicious Life Podcast Wes: LaCie Rugged USB-C External HDD Shameless Plugs Scott: Modern CSS Design Systems - Sign up for the year and save 25%! Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off! 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

It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:37 - Q: Why does React bill itself as a library instead of a framework? 03:14 - Q: Are y’all still using Firefox now that it has been six months? 06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace! 09:34 - Q: Who would win in a thumb war, Wes or Scott? 10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache. 14:53 - Q: Should I start a new project with jQuery or React? 17:21 - Q: I’m a young teen (60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management? 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it? Links React Firefox Brave CodeSandbox VS Code in the browser CodePen Source Making Design Patterns Figma Auto Layout ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Myths and Legends Podcast 2: Fictional Podcast Wes: Parchment Paper Baking Sheets Shameless Plugs Scott: Sapper For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript Course - Use the coupon code ‘Syntax’ for $10 off! 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

It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam? 10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics? 12:00 - What is one thing that really annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be? 15:08 - Have you tried Fauna DB? 19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course. 23:58 - A site you’re maintaining is hacked, how do you handle fixing it? 30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks into folders, I end up with so much that I don’t even know how to use them. What do you guys do for managing bookmarks on browsers? 34:15 - How would you recommend integrating React and other modern JS frameworks into (more or less) “static” or “brochure” websites? Say for instance I have a banking website that has mostly static content, but also has complicated JS pieces such as calculators, location finders and sign-up forms? I currently reach for jQuery & jQuery plugins for these pieces of functionality, but React and Vue sound like they could also help solve these one-off pieces of functionality. Most tutorials and examples are based on creating apps from the ground up, but what if you only want to sprinkle these frameworks in and only use them where JS is necessary? How might the both of you solve for these scenarios? 38:00 - I was wondering whether you could share which backpack, or bag do you use for carrying your laptops? I’m looking for something that would be useful for carrying my 16" Macbook Pro, but also could hold some other stuff like groceries, clothes, or other various things that one may want to put there. 41:50 - Do you write out a vanilla fetch() in your components that need it, or do you use a fetch “wrapper” written by yourself or someone else? If so, what does it look like? 46:16 - Have you ever done any automation projects using a Raspberry Pi? I am trying my hand at remote access to the solar power setup at our ‘bach’ (pronounced ‘batch’) here in New Zealand, which is the same thing as a ‘cottage’ in Canada. Finding it hard to find good resources for this online as most get really technical really fast. My idea is to take the RS485 modbus data and just send it up to a DB every 5 minutes or so. 51:38 - What do Wes and Scott think about beards and have you ever thought about growing one? Links Syntax 215: Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components r/SyntaxFM/ Fauna Hasura neo4j Wes’ Advanced React Course Pocket Full Stack Radio 132: Caleb Porzio - Just Enough JavaScript with Alpine.js Peak Design Everyday Bag Raspberry Pi Extreme ironing ××× SIIIIICK ××× PIIIICKS ××× Scott: Shogun Wheel Yoga Wheel Wes: Velcro Cable Ties Shameless Plugs Scott: How To Make a GraphQL Server - Sign up for the year and save 25%! Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off! 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

In this episode of React Native Radio Josh Justice interviews Yassir Hartani. Yassir writes a blog about all he learns while programming with React Native. They begin by discussing his article about React Native Navigation. Yassir explains why he prefers React Native Navigation and walks Josh through the article.    They move on to share tips for getting into React Native development. Yassir shares the differences between React Native development and developing on the web. He explains the difference in base components, syntax, and naming. For those used to developing on the web he recommends using styled-components.   Next, the discuss best practices for upgrading and explain why upgrading in React Native can be painful. They discuss tips for improving user experience including, keyboards, clickable buttons, native feedback, and safe area view.  Developer experience tips are next. Yassir recommends building for both iOS and Android, test for both platforms as well. They also recommend testing on a physical device. The panel shares other testing tips and gives error tracking recommendations.   Panelists Josh Justice Guest Yassir Hartani Sponsors G2i  Infinite Red CacheFly ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links An Introduction to React-Native-Navigation  Styled Components for React Native  React Native Upgrade Helper  React Native CLI “upgrade” command  KeyboardAvoidingView  TouchableNativeFeedback  React-native-platform-touchable  SafeAreaView  https://facebook.github.io/react-native/docs/improvingux  Sentry  Bugsnag  Android keystores  Fastlane  CircleCI  App Center  CodePush  Detox  Travis CI  https://www.facebook.com/ReactNativeRadio/ https://twitter.com/R_N_Radio Picks Josh Justice: Big Nerd Ranch Guides  PouchDB  `pouchdb-react-native`  Yassir Hartani: Deep Work  4-Hour Workweek 

In this episode of React Native Radio Josh Justice interviews Yassir Hartani. Yassir writes a blog about all he learns while programming with React Native. They begin by discussing his article about React Native Navigation. Yassir explains why he prefers React Native Navigation and walks Josh through the article.    They move on to share tips for getting into React Native development. Yassir shares the differences between React Native development and developing on the web. He explains the difference in base components, syntax, and naming. For those used to developing on the web he recommends using styled-components.   Next, the discuss best practices for upgrading and explain why upgrading in React Native can be painful. They discuss tips for improving user experience including, keyboards, clickable buttons, native feedback, and safe area view.  Developer experience tips are next. Yassir recommends building for both iOS and Android, test for both platforms as well. They also recommend testing on a physical device. The panel shares other testing tips and gives error tracking recommendations.   Panelists Josh Justice Guest Yassir Hartani Sponsors G2i  Infinite Red CacheFly ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links An Introduction to React-Native-Navigation  Styled Components for React Native  React Native Upgrade Helper  React Native CLI “upgrade” command  KeyboardAvoidingView  TouchableNativeFeedback  React-native-platform-touchable  SafeAreaView  https://facebook.github.io/react-native/docs/improvingux  Sentry  Bugsnag  Android keystores  Fastlane  CircleCI  App Center  CodePush  Detox  Travis CI  https://www.facebook.com/ReactNativeRadio/ https://twitter.com/R_N_Radio Picks Josh Justice: Big Nerd Ranch Guides  PouchDB  `pouchdb-react-native`  Yassir Hartani: Deep Work  4-Hour Workweek 

In this Hasty Treat, Scott and Wes talk about Wes’ new website, uses.tech — the stack he chose for building it, as well as what it does and how to use it! 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 2:23 - What is uses.tech? 5:33 - The stack 8:13 - Avatars 10:43 - Filtering 15:51 - Github actions 19:25 - Favicon 21:30 - Search 22:03 - Hosting Links uses.tech awesome-uses repo Gatsby React Gatsby Node API Clearbit API unavatar Now.sh webserv.nl country-emoji Andrew Luca joi Making setInterval Declarative with React Hooks Netlify Algolia 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

It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries and more! 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”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)? 11:30 - Q: What is your opinion on AWS Lambda functions? 15:42 - Q: How do you push new Syntax.fm episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date? 21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship? 30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job? 36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’? 41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax? 44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector? 46:39 - Q: What the best way to handle media queries in Gatsby with styled components? Links Webpack Parcel Gulp Codeship Semaphore r/reactjs r/webdev Wordpress Upwork Fiverr Svelte Syntax 173: Hasty Treat - Wes & Scott Look At Svelte 3 Firefox CSS Grid Inspector ××× SIIIIICK ××× PIIIICKS ××× Scott: DIY Air Filter Box Fan Air Filter Wes: Ripride with Andy Roy - Episode 6 with Steve-O Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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

On this week's episode Chris is joined by Michael Chan aka @chantastic, host of the React Podcast and prolific maker and sharer throughout the internets. They discuss Micheal's work on the React Podcast and themes in open source in general, Michael's focus on communication and delivering value, and the honest take that no one has all the answers or a silver bullet. Michael Chan @chantastic - Michael on twitter React Podcast Michael's Blog Michael's writing on dev.to Hot Garbage - the Death Of Clean Code War of Art Sandi Metz Styled Components Emotion CSS Variables React: CSS in JS - talk by Christopher "vjeux" Chedeau BEM Lerna Web components Paul Henschel on React Spring - React Podcast episode

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Ruby 2.7: The Pipeline Operator, Ruby-2.7 adds Enumerable#filter_map, Introduce support for ActionView::Component, Rails 6 adds private option to delegate method и The Ultimate Checklist to Properly Internationalize Devise Normalization, Consistency, and Clowne, A Rails middleware to change log level at runtime, Impersonator - a Ruby library to record and replay object interactions и Compacting GC in Ruby 2.7 - Aaron Patterson Web Entropic: a federated package registry for anything (The economics of open source by C J Silverio), Announcing styled-components v5: Beast Mode, Promise combinators, The reduce ({…spread}) anti-pattern и When should you be using Web Workers? Algorithm Visualizer is an interactive online platform that visualizes algorithms from code, Pika CDN: A CDN for Modern JavaScript, Readme-md-generator - CLI that generates beautiful README.md files и Relearn CSS layout

In this talk James will discuss his recent research and exploration of React and TypeScript tooling for building and developing design systems. He will also be sharing a starter pack that you can start playing with these technologies right away. Storybook, Syleguidist, and Styled Components will be discussed. Presenter: James Stone

In this talk James will discuss his recent research and exploration of React and TypeScript tooling for building and developing design systems. He will also be sharing a starter pack that you can start playing with these technologies right away. Storybook, Syleguidist, and Styled Components will be discussed. Presenter: James Stone

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm. Show Notes 2:52 - What is a CSS framework? Pre-written CSS that takes over the basic styling of your app Can include just utilities or lots of styles (minimal to overboard) Twitter Bootstrap and Zurb Foundation were the pioneers Follow different CSS styles from “functional CSS” to utility-first to BEM 7:33 - Functional (aka Utility) based Tachyons Tailwind 9:59 - Preprocessor based Bootstrap 11:33 - Styled Components based Rebass Styled Systems Facepaint 15:50 - Why use one? Makes styling FAST Makes hard things easy Some, like Bootstrap, have themes Keeps your own CSS minimal and organized Built on an established system Lots of people use the same CSS 19:22 - Why not use one? CSS class hell Stops you from learning how CSS works Size (not all have this problem) Brotli, Purify CSS You will be overriding a ton of it You like exclusively writing the code you need and nothing else Links Jamstack Gatsby Hugo Jekyll Bootstrap Foundation Tailwind CSS Tachyons Styled System REBASS Facepaint Brotli Purify CSS Cloudflare 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

Special Guest: Kris Van Houten: @krivaten | krivaten.com In this episode, we are joined by Kris Van Houten to chat about Functional CSS and Styled Components: pros and cons, the problems that they are trying to solve, and how to choose between one or the other. This show was produced by Mandy Moore, aka @therubyrep of DevReps, LLC. Transcript: DAVID: Hello, everyone. Welcome to Episode 116 of The Frontside Podcast. I'm David Keathley, a software developer here at Frontside and I'll be your host for today's episode. Joining me as a co-host is Jeffrey Cherewaty. JEFFREY:: Hey, there. DAVID: And we've got an amazing guest with us today, Kris Van Houten. Kris is the author of a very interesting functional CSS library called Elassus, a good friend of mine and today, we're going to be talking about how that compares with another new pattern I've been seeing everywhere recently: styled-components. Hi Kris. KRIS: Hey, how's it going? DAVID: Doing great. Let's just go ahead and jump into things. Kris, you want to give us a little introduction to your functional CSS library? KRIS: Yeah, for sure. I guess, first of all about me. I've been primarily a frontend developer for about seven or eight years now. I don't know, at some point you start losing count but over the years, I worked largely within the Ember framework but I've also worked within React and Vue. Like most of developers over the years, you tend to require an affinity towards certain areas of software development and for me, those areas tend to lean towards accessibility but also, learning how to write CSS with what I call like the future in mind. To try to keep the story as short as possible but a couple of years ago, I was working on a project and started to realize that our CSS is one of those things that just continues to grow over time along with the rest of our application but I also noticed that we tend to have a lot of areas of repetition within our CSS, like how many times are we setting text align to center, how many times are we setting the text color to the primary color or to gray or something of that nature and maybe we could create a utility library that just does all the stuff for us, similar to if you've ever worked with Bootstrap that they had utility classes that allow you to do some things like set the text alignment or the text color or font size and things of that nature. I started thinking around it but eventually, I changed jobs and that idea kind of just went to the side but then, I'd say about a year and a half or two years ago, I came across a blog post called '15kb of CSS is all you'll ever need' and so, immediately I was intrigued. It was actually a blog post on Medium that was talking about the benefits of using something like Tachyons or base CSS, which are two different functional CSS libraries. To explain what I mean by functional CSS, it's just a whole library, a whole arsenal of these utility classes that just do one or two things that allow you to basically take any design and implement it by composing all these classes together throughout your HTML. I was looking at Tachyons, looking at base CSS and thinking, there's a couple of things I like to customize about this but at the time, when I was looking at it, I couldn't really figure out how to customize those values very easily and so, I did every developer does and just decided to make my own and that's where Elassus came into play, where it's a CSS library that is entirely made up of functions that generate your CSS based off of the value of variables in Sass. Everything is customizable, all the way down to how the class names look and the syntax that you use. If you hate what I'm doing, you can customize it very easily. A lot of people might wonder why would you want to use functional CSS, what are the benefits that you get out of it and really, one of the first two things that comes to mind for me that really attracted me to it was that your CSS files start small and they stay small. For the most part, depending on the configuration and the particular library that you're using, your entire CSS payload can be anywhere from 10 to 20 kilobytes, minified and gzipped, which is in stark contrast to some other projects I've worked on, where just one of the many CSS files you're downloading are 745 kilobytes. Dramatic improvements there, so that's why it was instantly appealing to me. But one of the other nice things you kind of get for free by default is a consistent design pattern, right out of the box. Because if you're working on a large team that has maybe multiple designers and many developers, one designer might implement something with the spacing system that's maybe based on five pixels: your padding, your margins, your widths, might be five, 10, 15, 30 pixels, 45 pixels but then maybe, another designer is implementing something based off of more material design, which is base-4 pixels, so it's like four pixels, eight pixels, 16 and so on. Over time, little differences like this can really show up as you navigate between pages of your application and with functional CSS, you're given a limited number of options to choose from. As a result, it actually makes your application feel like it's one cohesive consistent piece of software between pages and between the features that you're navigating through. Those are really two areas that have really attracted me to functional CSS and I guess, is a tl;dr -- if that was a tl;dr in fact -- of what functional CSS is and why I like it. DAVID: One of the things we've got here was the problem that functional CSS and styled-components are both trying to solve. KRIS: Like I said earlier, a lot of the applications that many of us might be working on, they tend to grow at time by either adding features or rewriting and improving existing feature. In JavaScript, over the years, we have made tremendous improvements in our tooling with things like code splitting and tree shaking to really limit and minimize the amount of payload that we're sending to our users at the end of the day. But really, it's only up until recently we hadn't really been talking about how we do that for CSS and typically, as developers, we had deadlines, we're working with them in sprints, we had a real strict time constraints on what we can work on and for how long and so, we tend to focus on making sure the features look right, they work right, and that our test passed. In CSS cleanup is just one of those things that often doesn't get cleaned up as often as you would like. Sometimes, that's also because we assume that a particular set of styles is probably getting used by another team, working on a completely different part of the application. As a result of just not being able to work on this problem or this issue, we likely have many, many kilobytes of orphan styles being shipped to our users at the end of day and our style sheets tend to grow over time. If there's one thing that's kind of become a mantra within software development over the last few years, it's that every kilobyte matters. One of the main reasons I wanted to come and talk to guys today was about some things that I've been tinkering with on the side, just to figure out how we solve this problem and so, their approach of using functional CSS is one of those things but using something like styled-components, which is mostly used in React library of the solution of writing your CSS in your JavaScript and that's another approach to how to tackle this problem. DAVID: That's an interesting thing you said there. I remember, whenever I started off in software development, one of the big no-nos for styling is don't put your styles in your JavaScript. It's interesting to see that that has kind of changed. KRIS: Yeah, indeed. I remember listening to a podcast about two, maybe three years ago and they had a panel on and they were talking about there's a new thing called CSS and JS and I was like screaming in my car like, "This is the most horrible thing in the world you could possibly do. Why would someone want to do this?" and obviously over the last couple few years, the technology has definitely matured and they definitely hardened it, to where when I was working on updating my personal blog, working on moving over to Gatsby, I didn't want to have to pull an entire functional CSS library because I kind of thought that would be overkill for just a couple small pages and so I was like, "Let me try this whole styled-component thing. That way if I'm going to hate it, I can hate it from the experience point of view." I actually found that the developer experience of working with styled-components was really nice and so, I kind of became converted over to that way of thinking about, "I'm not a hater. It's actually a really nice way to write your CSS for your blog or your applications." JEFFREY:: I count myself still as a skeptic about this whole idea, so I'm excited that we're going to talk about it now and then, you have the opportunity to sell me on it, which should be fun. Some of the work I've been doing on lately, we've been doubling down on the idea of CSS modules, that at least fix some of the encapsulation and problems around CSS where everything is sending up in a global scope. How do these ideas of functional CSS kind of take that even farther? What advantages are there over using, just simply using say, CSS modules where we're fixing the global namespace. KRIS: I'd say with functional CSS, again the things that kind of mine for me are you keep the file size small, you have your design patterns that you can get for free right out of the box. Your styles are pretty low specificity, meaning that if you ever have a need to where you get a really customized something because you just can't do a functional CSS, which I found to be very, very few and far between as far as the number and instances I've come across, it's very easy to overwrite if you need to go back into, I guess old fashioned way of actually writing some CSS yourself. But then you also have the benefit of not having to come up with clever class names to describe the different states or different use cases of your component that you're working on or the future that you're trying to implement and so, I'd say those are definitely some of the pros of why I like using functional CSS at the end of the day. I will say that there are some cons -- I'll be completely honest -- and say that one of the areas where functional CSS tends to have a weak spot is in the area of browser specific issues. In my experience, I tend to have a lot of issues with iOS Safari and it's like the bane in my system sometimes. Sometimes, worse than i11 but if you have to really target something that's exclusively for a specific browser, that's really not doable from what I've seen in functional CSS. That's where we should have to go back in and handwrite some CSS for that kind of situation. But also, one of the cons is that sometimes, depending on the element or the component you're trying to style, I think the example is if you have a nav bar that can toggle between being a sidebar but also a top nav bar, that's a completely different set of styles and to achieve those few layouts at the end the day, you have to have a completely different collection of class names that you have to toggle between based off of the state of that component or that feature that you're working on. While that's doable, especially with something like a frontend framework like Vue, React or Ember, it's just a little pain point that sometimes you have to work around but I say, those are the pros and admittedly some of the cons of using something like functional CSS to tackle your styling needs. JEFFREY:: My favorite thing that you mentioned there was how hard naming is. I think everyone can agree, very strong of it, just naming things is the hardest thing. What has been your experience in learning these? They're almost new domain languages for like we want to padding of this amount. Have you found that pretty easy to get up to speed and get fluent in or have you run into some blocks in kind of learning these new languages that some of these CSS tools have presented. KRIS: That's a really good question. When I first started digging into Tachyons -- that was the first functional CSS library I started working with -- there is definitely, I'd say a small learning curve of maybe, I was trying to implement it just to see how it worked and it took me, maybe a couple of hours, if that, to kind of get a feel for how they write their classes and how the classes are put together to do certain things. But once you kind of get through that little initial pain point, it's pretty easy. In one of the things that when I was working on my own implementation of it, I wanted to make sure that no matter what you're doing, all the class names are consistent, that the patterns that you use to your class naming is consistent and I guess, because I wrote it, then it wasn't so hard for me but I also understand that that's not the case for everybody. When I wrote Elassus, one of the things I did is I actually was able to create a compiled JSON version of all the CSS and actually, use that to create like a little React search tool. If you're looking for padding or margin, you can just enter that in a search bar and it'll tell you all the options in the classes that are associated with that and that's one thing I did to kind of help with that barrier but it definitely can be a bit of a learning curve but like I said, it's maybe an hour or two of your time to really get familiar with it. JEFFREY:: That is not bad. KRIS: No, not at all. I was actually really surprised at how fast I got up and running with it. DAVID: That actually ties into something that I was kind of curious about myself. Whenever I went through the coding bootcamp that I did a couple years ago, after we finished going over raw CSS and how that works and the basics of that, they introduced us to Bootstrap as our first real CSS library to play with. That was fairly achievable for someone brand new to frontend work in general. What I was curious about is would you see these functional CSS libraries as equally accessible or maybe, more advanced than something like Bootstrap or Foundation. KRIS: I never thought about that before. I think I kind of see it like as the next step. I've worked on several products over the years where Bootstrap was what they started with. As we went on to build out the feature set of the product, we started to find ourselves battling with the various styles that we get at from Bootstrap for free. I think one of the things about working on a website, where actually using Bootstrap is that sometimes you can just kind of tell that it's a Bootstrap based website. I don't know if I'm making any sense to you guys -- DAVID: Oh, yeah. Definitely. KRIS: That was another reason why I wanted to have something... That had basically forced me to decide how my navigation bar looked. It forced me to think more about how my sidebar is looked or what my spacing scale -- it's the term I like to use -- based on what you're using for your pure margins, your paddings or what's your heights, things like that. It make me think about what those values should be and that's how you kind of break out of the box of having everything look like it was built in the same framework. I would say it's more of a next step if you're talking about your experience as a developer. Yeah, learn CSS. I think it's still incredibly valuable to know CSS and for me, like you David, I kind of got started and learned about this thing called Bootstrap and you can quote me. Back in the day, I said, "This is like the jQuery for CSS. It's amazing," but quickly, I kind of ran into some of those issues that I mentioned earlier and kind of force me think about, "Maybe, I don't want to use Bootstrap. Maybe, I want to handle my own thing," and so, I say functional CSS, as far as like again your education level, it's more or less that step of if you think about how do you want to solve certain problems in our design. DAVID: Okay. We've gone over functional CSS with some and styled-components, how would you choose between the two? KRIS: This is actually really hard because I actually like both approaches. I'm not one of those guys that's like, "That one sucks. I don't want to use it." I actually think both have their place and so, I know I kind of sound like the typical 'this versus that' blog post in technology right now but I will say that there's a few questions you should ask yourself and ask your team if you're considering changing up your approach to CSS. One of those is what is the preferred developer experience of your team. That's something we've been talking about a lot at the company. What we mean by that is how enjoyable is it to work in a particular codebase? Do your developers mind writing their CSS, instead of a JavaScript file? Or would they prefer to have something where they can actually read the HTML and build a C, just by looking at the elements in the classes that are being applied there? What this layout looks like or what's being applied to this layout? You know, questions like that can definitely help determine what direction you should go. Again like I said, one thing I love is that both approaches remove the developer's burden from having to come up with clever class names for all the different use cases or states of your components. I think you're going to get a win-win either way there. However, if you're using React, we already have a ton going on in our JSX and so, if adding a series of class names to determine your design tips is overwhelming for you, then maybe give styled-component a try because it can definitely simplify your JSX output a little bit. If the idea of having JS to handle your CSS seems a little fishy, I think one of the cons of using styled-components is that we're asking JavaScript to do yet another thing for us. If you're one of those people who has a problem with that, then give functional CSS a try. There's definitely more than one flavor out there and I've tried out almost all of them and like them. They all have their nice tidbits inside of them. I'll say, if you prefer to have easy theming, if you're working on a project that has to have a lot of theming involved, then I might be more toward styled-components. If design consistency and design patterns is a priority, then maybe functional CSS is an option for you. With both of those scenarios, easy theming in patterns is possible in both. It's just one is harder in one than the other. With styled-components, there are implementations of it in Vue and Ember but they don't seem to be very widely used yet, so I'd say use at your own risk or contribute to open source to make them better. I'd say for right now, if you don't mind being locked into using React, then styled-components is pretty cool. It also allows you to transfer your styled-components from one project to another without having to worry about. [inaudible] all the CSS because that's a big deal but I would ask myself those kind of questions to determine what solution I would choose. JEFFREY:: I am interested in the performance implications of these tools. You touch earlier on by using tools like this, you can definitely shrink your CSS payload by a lot, so what is the actual output of using these tools? What will it look like? Do you end up with still an external CSS file or is it a scenario where you're kind of getting some CSS injected into your markup? KRIS: Yes with one and no on the other. With functional CSS, you typically have a CSS file that is compiled and maybe, you're using Sass to do the operation for you or post-CSS, so you get an output CSS file that you help you fetch on the frontend of your application. Like I said, [inaudible] if these files are between 10 to 20 kilobytes, which is remarkably small. With styled-components, it's a totally different approach. It's a totally different implementation as well, unless you have a normalize or perhaps a reset CSS that you're fetching on the frontend, all the styles are actually -- I guess, I should start with earlier. What happens is you define your styles in your JavaScripts and at runtime, the component will read the styles that you set and then create a unique class for that instance into the head of your document. It's basically a single class use for that component and so, all in all, it gets compiled at runtime. There's no additional CSS files being injected. It's actually being created dynamically in your actual HTML document. One of the things I was first concerned about was what are the performance implications of having JavaScript do this for us and over the last couple of years, as the technology has been maturing, performance has been an issue but I think it was with V4 -- version 4 styled-components that just released, I want to say, in September or October, they have tremendous performance improvements. It's rapidly fast now, so it's not really something you need to be concerned about. I'd say again, it's one of those things: Can you get over the mental hurdle of having JavaScript do one more thing for you? And can you get used to the developer's ergonomic practice of writing CSS inside a JavaScript file? I know it kind of takes a little bit of getting over that because it just seems so strange but you also get a lot of perks by doing that with having easy access to theming, you get to use some of the power of JavaScript to help build out your CSS, which can be nice as well even if it kind of feels weird. JEFFREY:: Yeah, I agree with the ergonomics do feel weird but you'll get some benefits out of doing that. In the styled-components where it'd bring on the fly, I'm happy to kind of figured out the performance like runtime implications with that but it seems to me that now you no longer have a cache CSS and that you're having to get that all the time on the fly. Maybe for some systems, that is okay but that's definitely something that I would miss having -- the idea that CSS actually can be a little heavier because it will always be cached. KRIS: That is totally a valid point. I think one thing I do kind of like about the styled-component approach is that when you delete a component, all the styles go with it, so you no longer have orphaned styles just hanging out there that are getting shipped down to your user. I agree that the caching is definitely a concern but I just kind of start to weigh the pros and cons and again, you have to decide for your product, for your team what works best for you. Also, one of the pros that I would bring up is that you don't have any orphan CSS hanging out in your application anymore, which is definitely one of the key contributors to growing bloat in your files over time. JEFFREY:: That is very nice. KRIS: Yeah. DAVID: That ties into a question that I was kind of wondering. As your projects get larger and larger and more complex, your style sheets tend to grow along with that and one of the issues that you might have as time goes along is visual regressions like styling bugs. How does using functional CSS or styled-components sort of deal with that or prevent that? KRIS: With functional CSS, like I said, you have those patterns kind of built in out of the box. As long as you don't change the value of what a particular class renders out of, maybe someone goes in and without thinking of it, they change the second value of your spacing scale to a lot of pixels just because they felt they needed to. You're not going to have visual regression that happen over time because the whole premise of functional CSS, those values don't change. Those are basically meant to be seen as immutable values, immutable classes. You shouldn't have style regressions that pop up over time as people continue to work on your application. With styled-components you still have that risk unless you are setting all those same values and your theme properties that you can use within styled-components. Unless you're setting all your different spacing values, you have a tendency to potentially run the same issue. But actually, now that I think about it, maybe not because with styled-components, every component is unique. Every components styles are completely unique, so again, unless you're changing those core values of your themes, you should not have visual regression that happen in a totally separate part of your application when you're working on say, the home page. I would say both handle that pretty well, now that I'm thinking of it. DAVID: That's cool. KRIS: This reminds me, I'm working on a particular piece of software at a particular feature of my work and we don't use functional CSS or styled-components yet. I'm trying to get them to move over so again, this is all stuff I do on my free time but I'm working on editing a component and I had to make some pretty drastic changes to it and I was like, "How is this going to break on some other page that I'm not aware of yet," and so, this requires a lot more going back and checking all the various uses of this particular component. We used it in 10 or 11 different places on different pages and so, we have to go back to each and every single one of those use cases to make sure I didn't break something. Whereas if I was using one of these two approaches, it wouldn't be something that I would have to be concerned about. This is what I'm trying to push through on my own job as well. DAVID: Yeah, it really eat up your time. KRIS: Yeah. JEFFREY:: I want to talk for a few minutes about media queries because, I think that the situation is kind of handled. It's definitely something I've run into: CSS variables and with post-CSS tooling. I'm interested in kind of how does the media query story is handled with the setup. KRIS: With functional CSS, you tend to have, basically say, I have a class that sets a margin on the top of 16 pixels, for example. Let's say that that class name is MT-3... I don't know, meaning for like the third position in your spacing scale, 'MT' stands for margin top. If you wanted to only use that style for perhaps, like your medium break point, then different libraries have a different way to approach this, basically, you're 'MT-3--medium' or '--desktop.' It's the additional characters that you append to the class name to target that specific media query. Also, depending on the framework that you're using, you can also target pseudo states, whether or not this element is focused or on hover, maybe you want the background code to change. There's variations of those classes that allow you to target those specific states, which is really nice in functional CSS. Again, just by looking at the classes that you're adding to your DOM, you don't have to scroll through your style sidebar to figure out like what styles are associated with this class name and why it's being overwritten by these 10 other things that we have going on. Again, you can just look at the HTML and see what's happening and what should happen if you hover over an element. With styled-components, you can still use media queries and all that stuff right out of the box. In order to keep your media queries consistent, that way not everybody is having a handroll, at least by every single time that you need to use them. You can actually store your media queries in a separate JS files and it's kind of import them as you need them, which again, kind of feels like a weird developer ergonomic for your CSS but definitely, it comes in handy and definitely keeps your styling consistent the more you break out the various pieces into small pieces or small components like that. That's how to handle things like media queries and things like that. JEFFREY:: It's interesting how these approaches are kind of pushing the web towards, I'm feeling a lot more like native development, where you build your style and your visual look in conjunction with your component code and those things are not really ever separate. I think, there's some interesting influences coming in there from some made up things. KRIS: One thing I think about a lot, especially when I'm thinking about functional CSS is I'm reminded of this image I saw kind of posted on Twitter somewhere in the interwebs. It was a picture of the Super Mario Brothers start screen and the entire Super Mario Brothers video game was something like 23 kilobytes. This screen that you're looking at, which was like the start screen was like 345 kilobytes or something. My numbers are probably off but it was something drastic like that and this makes me think about, if you were to go back through, there's a couple of documentaries about how the loops that developers had to jump through in order to make old video games for Nintendo Entertainment System back in the late-80s -- I'm probably dating myself right now -- but the things they had to go through and to think about in order to make those games work the way they did is insane and I kind of feel like over the last... I don't know, maybe 10 or 15 years, because we've gotten such fast computers and such fast mobile devices and so on and so forth, we've kind of gotten crazy. I look at video games now and they're 100 gigabytes sometimes and I kind of feel like they didn't need to be 100 gigabyte video game and I think -- DAVID: But it's so much cooler because it is. KRIS: I'm not saying it's not cool but I'm think like if they really took the time to pay attention to some of these details, we probably could automate this a little better. Maybe, I'm just being biased but I think about we're kind of starting to do the same thing and talk about the same kind of problems in web development. Again, just because we can have a 745 kilobytes of CSS file and thought the world falling over, it doesn't mean we should, so maybe, let's take into consideration that not everybody is using a cinema display on a super-fast MacBook to view your application, what about the person who's using an outdated Android device that hasn't been updated in three or four years? How's your product going to work on their device? I'm really glad that people actually started to take that kind of thing into consideration and it even reminds me a little bit of another area that I think a lot about is the area of accessibility: how do people with various impairments or disabilities use your software and how can they use your software but also, outside of that, how do people, who maybe don't have the money to have a fancy mobile device like you have, use your product along those same veins. It kind of dips into the same vein of accessibility when we're talking about how do we optimize our products to make them usable by everyone despite their income level or their ability to have a fancy, nice desktop or a latest iPhone. JEFFREY:: Awesome. DAVID: Yeah. Definitely, you think about who are the majority of users on the internet these days and really, it's an emerging market with underpowered devices and the internet is becoming much more and more accessible for people to get on and browse, so you really got to keep those people in mind. KRIS: Definitely, especially if you're creating software that you want people across around the world to be using, a lot of people don't have access to crazy high speed internet like we do here in the States, so we should probably be taking more time to consider what it looks like for those people to use our product. At my company, what we've been talking about is like we should be testing and basically, starting mobile first with all of our development to see how does this work on our mobile device. I'm a remote developer so we're trying to figure out how to get me mobile devices that I can actually test on our VPN but it's something that we're trying to move towards at my company as well. DAVID: Okay, that about wraps up Episode 116, our final episode of 2018. Man, the year has gone by fast. We are the Frontside. We're the frontend specialists who make your largescale application projects run smoothly by helping your team assemble the right tools and implement the right automated processes. We can ensure your projects can move forward on time and without regressions while preserving quality and long term maintainability. If that's something you're interested in, please get in touch with us at @TheFrontside on Twitter or Contact@Frontside.io via email. Do send us any questions you might have, any topics you'd like to hear about in the future. We look forward to hearing from you. Thanks again to the wonderful Mandy Moore for producing today's podcast. You can find her on Twitter at @RubyRep and that's it.

Stefan und Peter haben für diese Revision als Entschuldigung vorzubringen, dass der eine als frischgebackener Papa und der andere als überarbeiteter Erklärbär Schlafdefizite aufweisen, bei denen ein Bailout dringend angebracht gewesen wäre. Stattdessen gibt’s einen Podcast. Schaunotizen [00:00:16] CSS-Gate Der äußerest umtriebige Max Stoiber (u.A. Autor von Styled Components) hat mit einem harmlos anmutenden Quiz […]

On my AMA (https://github.com/kentcdodds/ama/issues/396)

Today we caught up with Max Stoiber, the creator of Styled Components and React Boilerplate (among many other projects), and a massive contributor overall to the world of open-source Javascript. We dig into Max's background, designing with code, building in the open, and so much more.

Max Stoiber, Gant Laborde of Infinite Red, and Nader Dabit talk about Styled Components and creating and maintaining successful open source projects.

Max Stoiber, Gant Laborde of Infinite Red, and Nader Dabit talk about Styled Components and creating and maintaining successful open source projects.

On today's episode, Aimee and Chuck welcome Maximillian "Max" Stoiber to the show. Max hails from Austria and is an expert in open source development at Think Mill. Tune in to JSJ 245 Styled Components and React-Boilerplate with Max Stoiber.

On today's episode, Aimee and Chuck welcome Maximillian "Max" Stoiber to the show. Max hails from Austria and is an expert in open source development at Think Mill. Tune in to JSJ 245 Styled Components and React-Boilerplate with Max Stoiber.

On today's episode, Aimee and Chuck welcome Maximillian "Max" Stoiber to the show. Max hails from Austria and is an expert in open source development at Think Mill. Tune in to JSJ 245 Styled Components and React-Boilerplate with Max Stoiber.

Hans, Stefan und Schepp besprechen heute den kürzlich veröffentlichten Paketmanager Yarn und die „Styled Components“ CSS Lösung für React. Schaunotizen [00:01:51] Yarn Yarn schickt sich an als neuer Paket-Manager für NPM und Bower die ultimative Lösung für den Web-Entwickler von heute zu sein, der sowohl am Front-End als auch bei Node die bestmöglichen Ergebnisser erzielt: […]