No Script Show

In this episode of the No Script Show, David Waumsley and Nathan Wrigley get into the subject of container queries. These mark a serious advancement in what browsers will allow us to do, but we are asking what does that mean for us right now? In this episode, we cover: CSS container queries: How they mark a significant advancement in responsive design. Evolution from media queries: Understanding the shift towards container queries for more granular control. Application in component-based design systems: Discussing the relevance for those building complex design systems. Potential for page builders and CSS frameworks: Exploring the impact on visual design tools and frameworks. Considerations for responsive images: The holdup in adoption due to the reliance on media queries. 00:00 Miriam Suzanne, an expert on CSS. 03:21 Moving towards more flexibility with container queries. 08:21 Describing old use of media queries in web design. 13:10 Adapt design to fit different screen sizes. 14:55 Barker explains flexible content placement for websites. 17:39 SVGs allow flexible design for logos. 20:10 Consider for design systems and page builders. 23:19 Suzanne created Susie framework, now prefers modern CSS. 26:28 New browser technology, explore it now. Links provided.

In this episode of the No Script Show, David Waumsley and Nathan Wrigley delve into the concept of component based web design, what it is and do we need it. In this episode, we cover: 1. Discussing the advantages of using a component-based design system for complex projects and team collaboration. 2. Exploring the atomic design hierarchy and the role of React in managing and styling web components. 3. Addressing the shift in design practices from separating HTML/CSS to isolating individual components. 4. Debating the potential downsides of rigid design systems and the challenges of adapting to changes and onboarding new members. 5. Looking into the future of web development, pondering a decrease in JavaScript dependency, and teasing the next episode on container queries. 00:00 Page builders streamline website component creation process. 04:52 Realised need for simple designs over features. 10:18 Complete buy-in to component-based process. Atom, molecule, organism hardwired in users' heads. 11:16 React solved CSS encapsulation issue for teams. 16:12 Material design's usability issue with input labels. 17:36 Mistakes in forms, challenges with CSS/JavaScript. 21:59 Custom elements with JavaScript managing YouTube and podcast. 25:21 Description of using a web component for audio player customisation. 28:39 Styling is registered in JavaScript under shadow dom. 33:26 HTML/CSS didn't meet demands, led to React. 34:11 Shift from relying solely on JavaScript likely. 37:37 No script show. Watch on YouTube too.

In this episode of the No Script Show, David Waumsley and Nathan Wrigley delve into the concept of intrinsic web design and its implications for modern front-end web development. In this episode, we cover: 1. The evolution of web layout and the emergence of intrinsic design 2. The shift in mindset from fixed designs to flexible, content-driven layouts 3. The challenges and benefits of adopting intrinsic design in web development 4. The impact of technology advancements on web design approaches 5. The potential future of web standards and accessibility in the context of intrinsic design 00:00 New technology changes approach to web design. 04:50 New challenge in web design, responsive era. 09:01 "Intrinsic design is the future evolution." 10:22 She championed web mission, emphasizing universal communication. 15:11 Reflecting on the market's evolution and reality. 18:44 Reeducation needed for changes in CSS model. 19:32 Relearning and unlearning for a new journey. 23:49 Changing web project organization, intrinsic to web standards. 26:12 Designer's role is more inventive and important. 29:58 Design matters for web accessibility and beauty. 32:21 Discussing component-based design and web components for future episodes.

Here, we are looking at the principles of modern web layouts and to understand that we are referring a talk by Rachel Andrew from 2019 called "Refactoring the way we talk about CSS". She writes: "We need to look again at what it is to learn CSS. We need to leave our old ideas behind. It is only when we do, that we will stop supporting the idea that CSS is the fragile, broken, quirky language that its detractors would like to believe." Her talk shows how CSS has become a logical system and if we understand the problems it is solving, it is far easier to understand. General Points On CSS Layout Modern CSS layout: Has progressed from a series of hacks to a logically refactored system. Is partly reclaiming the universal and responsive web we started with. Reminds us that "What we see is NOT what they will get". Gives us resilient superpowers and creative freedom we have not had before. Specific Points On CSS Layout Below are the topic covered in Rachel Andrew's talk: Flow layout Changing the value of display Out of flow elements Writing modes Logical properties and values (Box) Alignment Sizing We have linked above to the appropriate MDN web docs where Rachel is also a key contributor. You can find all of the links by going to the noscript.show website, and hunt for episode 3.

What is coming over the next few week on The No Script Show. We name the people, the technologies and look at the history we'll be focussing upon over the next few weeks.

Welcome to the first episode of a new show on modern frontend web design. It’s a discussion show, but one where we will also be sharing the practical applications of our chats. To do this we’ll be live developing the noscript.show website. It’s bare bones as we record this, but we shall be constantly changing and experimenting with it as part of the show. Before we introduce ourselves and our backgrounds, I’ll quickly summarise the purpose for this show. The hint in this episode’s title which is “borrowed” from a talk by Jen Simmonds back in 2018 called “Everything You Know About Web Design Just Changed”. In it she argues that “We’re standing at the threshold of an entirely new era in digital design”. Since, it has become more of a reality with a much improved spec from the W3C and great advances in what web browsers can now do for us now. We felt it was time we dug into this and to do that justice we are going to put aside web building frameworks and platforms (as the impact there would be felt later) and directly concentrate on what’s coming from the W3C and browsers vendors. As earlier adopters of low-code page builders we have become quite detached from that and are very much going back to school. But It’s not coming from a deep desire to be coding experts. It is the tantalising prospect that we might be able to do a better job with less code and complexity and to use foundational knowledge to employ tools as appropriately as possible.