Business of Front-end Web Development

The talk was held in Mainz at the JAX on April 21, 2016 The language is german. „Software is eating the world“ und das moderne Web hat sicherlich einen sehr großen Anteil daran. Wie könnte aber die nächste Evolutionsstufe im Web aussehen? Ein Kandidat sind hier die Web Components, die einen sehr einfachen Einstieg in die komponentenbasierte Strukturierung von Webanwendungen bieten. Hierbei können auch einzelne Komponenten in bestehende Anwendungen integriert und nachgerüstet werden, ohne dabei das Entwickler-Know-how im konkreten Framework zu verlieren. In diesem Vortrag wird zunächst ein Überblick über den aktuellen Status quo von Web Components gegeben und anschließend beispielhaft gezeigt, wie sich Komponenten in eine bestehende AngularJS-Anwendung integrieren lassen. Ein Ausblick auf Tooling und kommende Features rundet den Vortrag ab.

This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.

Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Although responsive designs are already state-of-the-art in web development the whole trend still is in its infancy. When it comes to images, a lot of responsive websites just load the same big image on every viewport. Because of this, people judge responsive design as being detrimental to performance. New markup elements like &lt;picture> are in development right now but what are the alternatives, what is the best to use right now, and how do they work? I will lead you through the different techniques and polyfills and show you their pros and cons. After this talk you should be able to choose the best fitting responsive image solution for your project.

The document discusses progressive enhancement with JavaScript and Ajax. It defines progressive enhancement as testing for support of different technologies like JavaScript, DOM, and objects, and providing alternative interfaces when something is not supported. It recommends testing for dependencies before using them, and separating interfaces from styles using CSS for flexibility. While CSS-only solutions seem appealing, JavaScript is more powerful and reliable for building complex, accessible interfaces. The key is enhancing interfaces thoughtfully to improve the user experience, not just for the sake of enhancement.

We're past the honeymoon period of HTML5 by now. The excitement of inflated promises is over and we start wondering what to do – use HTML5 or just build an iOS app instead? In this talk Chris Heilmann of Mozilla will show what HTML5 is really good for, what its problems are, what causes a lot of these problems and how new operating systems like Firefox OS work and conversion tools like PhoneGap work around these issues. You'll see the now of HTML5 and what is cooking in the kitchens of browser makers and standards bodies that will developing and deploying apps cross-platform much easier than it is now. We have a lot of tools at our disposal, we simply need to dare to use them.

Keeping up with the state of web technology is one of the biggest challenges for us developers today. We invent new tools; we define new best practices, everything’s new, always... And we do all that for good user experience! We do all that to build the best possible web – it’s all about our users. But is it, really? Or do developers like to play with technology secretly loving the new and shiny? Or do we only pretend that it’s about users, and behind closed doors, it’s developer experience that matters to us? Did we lose direction? Is it time for a critical look at the state of the web and the role JavaScript plays in it?

This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that bring hardware-accelerated 3D graphics to the web through JavaScript.

The document provides an overview of HTML5, including: - A brief history of HTML and the development of HTML5. - An explanation of new HTML5 semantic elements like <header>, <nav>, <article>, <section>, and <footer> and how they improve the structure and readability of pages. - A discussion of new HTML5 form controls, validation, and output mechanisms like <progress>, <meter>, and <output>. - Introductions to new canvas scripting capabilities and native <video> and <audio> elements in HTML5.

Progressive enhancement is still an important approach for building responsive websites and web applications. While JavaScript can now be assumed to be widely available, progressive enhancement avoids single points of failure and improves performance by loading critical content first before non-essential enhancements. The distinction between websites and applications is also blurred, so progressive techniques remain applicable to most digital experiences on the web.

You’re probably a believer in the benefits of continuous delivery and DevOps (why else would you be at this meetup?). The rest of your organization... maybe not so much. Maybe you’re getting pushback on changes you believe will make your organization better. Maybe you’re not sure where or how to start to give yourself the best chance of making a change that will work. I’ll give you some tactics to start your journey toward continuous delivery (or toward any meaningful change, for that matter). I’ll also show how you might apply those tactics to address a specific challenge: adding test automation to a large legacy codebase. The goal is that you walk away with more tools in your “change toolkit” and a little more enthusiasm for shaking things up for the better where you work.

HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.

Jim Jagielski presents an overview of new features and enhancements in Apache HTTP Server version 2.4, including configuration and runtime improvements, new modules and capabilities, cloud and proxy enhancements, performance increases, and support for HTTP/2. Key highlights include finer-grained configuration controls, new modules like mod_lua and mod_macro, improved proxy and load balancing functionality, better performance through optimizations and new MPMs like Event, and initial HTTP/2 support.

A presentation questioning why we keep fighting the same fights as web developers when there are a lot more important things to worry about.

Slides from a debate on "CMS: Challenging the Consensus" given at the Institutional Web Management Workshop 2006 on 16 June 2006. See &lt;http: />.

A session talk for #NAGW2012 on: Mobile app, choices Dreamweaver’s place Creating Mobile Design (actual design, not code) Other helpful Adobe tools to create HTML/CSS jQuery Mobile in DW PhoneGap Build in DW

This document outlines 10 web performance lessons for the 21st century. The lessons are: 1) Measure first, optimize bottlenecks second 2) Measure what matters 3) Get a performance budget 4) Write JavaScript efficiently using mostly functions 5) Write code efficiently using mostly HTML 6) Consider static functional programming as JavaScript may not be enough 7) Observe how browsers work behind the scenes 8) Build fast organizations 9) Have courage in your minimalism 10) Sometimes keeping it simple with 9 lessons is enough. The document provides explanations and examples for each lesson along with relevant links to additional resources.

And while the Hitchhiker’s Guide to the Galaxy (HHGTTG) is a wholly remarkable book it doesn’t cover the nuances of cloud computing. Whether you want to build a public, private or hybrid cloud there are free and open source tools that can help provide you a complete solution or help augment your existing Amazon or other hosted cloud solution. That’s why you need the Hitchhiker’s Guide to (Open Source) Cloud Computing (HHGTCC) or at least to attend this talk understand the current state of open source cloud computing. This talk will cover infrastructure-as-a-service, platform-as-a-service and developments in big data and how to more effectively deploy and manage open source flavors of these technologies. Specific the guide will cover: Infrastructure-as-a-Service – The Systems Cloud – Get a comparison of the open source cloud platforms including OpenStack, Apache CloudStack, Eucalyptus and OpenNebula Platform-as-a-Service – The Developers Cloud – Learn about the tools that abstract the complexity for developers and used to build portable auto-scaling applications ton CloudFoundry, OpenShift, Stackato and more. Data-as-a-Service – The Analytics Cloud – Want to figure out the who, what, where, when and why of big data? You’ll get an overview of open source NoSQL databases and technologies like MapReduce to help parallelize data mining tasks and crunch massive data sets in the cloud. Network-as-a-Service – The Network Cloud – The final pillar for truly fungible network infrastructure is network virtualization. We will give an overview of software-defined networking including OpenStack Quantum, Nicira, open Vswitch and others. Finally this talk will provide an overview of the tools that can help you really take advantage of the cloud. Do you want to auto-scale to serve millions of web pages and scale back down as demand fluctuates. Are you interested in automating the total lifecycle of cloud computing environments You’ll learn how to combine these tools into tool chains to provide continuous deployment systems that will help you become agile and spend more time improving your IT rather than simply maintaining it. [Finally, for those of you that are Douglas Adams fans please accept the deepest apologies for bad analogies to the HHGTTG.]

Michal Hariš provides an overview of the evolution of VisualDNA's data architecture over the past 3 years. Originally, 10 people managed a single MySQL table holding 50M user profiles. They transitioned to using Cassandra and Hadoop to address scalability issues. Currently, they have a 120 person team using a lambda architecture with Java, Scala, Hadoop, Cassandra, Kafka, Redis, R and AngularJS. Real-time processing of 8.5k events/second is done alongside batch pipelines and machine learning. They have learned lessons around system design, testing, and remote collaboration while addressing challenges such as globally distributed APIs and bottlenecks in their data pipeline.

When you're writing a Ruby on Rails application, certain decisions seem appropriate and good at the beginning, but come back to bite you later on. In this talk, I list 20 different "traps," things that seem appealing, but which you should think twice before doing. The talk is based on my experience teaching Ruby and Rails classes to many people over the years, and was a presentation at the "Rails Israel 2012" conference held in Tel Aviv.

Domingo Suarez Torres presented on building an e-commerce business in Latin America with Grails technologies. He discussed two versions of the clickOnero site: Version 1 used typical Grails, caching, and messaging. Version 2 improved performance by splitting into static and API components, with the store built as a single page application consuming API JSON. Key lessons included improving caching, testing, and making content static to optimize load.

What happens when a subject matter expert won’t or can’t provide required information to the person whose job it is to write about it? All is not lost! Drawing on their experiences, the presenters will cover identifying and addressing issues technical communicators face with reluctant SMEs.

HigherEdWeb Michigan 2014 Rapidfire presentation by Kendall Arbogast-Wilson, Creative Director, WTW Design Group. Delivered May 23, 2014.

Presented at SXSW Interactive 2014. As responsive design and progressive enhancement become mainstream design practices, the decades old approach of using Adobe Photoshop to comp up page designs for clients is becoming increasingly irrelevant. A quick search online shows designers quickly clamoring for a better way to do their work. Along with new tools to learn, there's also the challenge of acclimating a client base that has been used to seeing fully-rendered Photoshop designs for decades. How do these new practices benefit them? This presentation looks at some "post-Photoshop" design practices and how they might fit into a designer's workflow. Additionally, Jeremy will share how a new design workflow has worked for his team at Clickfarm and how clients have received this new way of looking at their projects.

The current trend surrounding responsive web design is one part of an overall move towards responsive experiences. A responsive experience may take place in part in the browser, but it extends well beyond media queries and image sets. This isn’t a talk about media queries or “big data” analysis. Rather, we’ll focus on how data as a material and data as tooling in the design process - Datatium - can shape deeply engaging and responsive experiences, that even go offline. There won’t be any hard maths, instead there will be plenty of guidance and examples showing how aspects of data science is changing design, and how you can start working with Datatium too.

A version of my Rapid Product Design in the Wild talk at Agile Iceland 2014. http://www.agileisland.is How do you know you're developing the right product? This talk will help you think creatively about how to do customer development using Agile and Lean User Experience methods. I share what we learnt about using rapid, iterative prototyping techniques to develop a minimum viable product at a software conference. In August 2012 we attended Kscope, a conference for Oracle developers. Instead of doing the usual product demonstrations, we turned our stand into a live lab and took Agile development processes out of the office and in front of our customers. Our stand included an area for customer research, a Kanban board and information radiators in the form of a whiteboard, blank wall and a large digital screen. Over 3 days we ran 9 sprints and conducted 25 customer interviews, using a paper prototype to get feedback. We collected invaluable information about our customers' development environments, how they work with their teams, their processes, tasks and pain points. By the end of the conference my colleague had developed an interactive HTML/CSS prototype which potential customers could evaluate. The team went through several rapid build-measure-learn cycles to improve our product concept and validate the market need. Opening up our development process at a trade show provided visitors to the stand with an opportunity to experience Agile and Lean methods first-hand.

Presented at Webstock '08 on February 15th in Wellington, New Zealand. Social networks are an unavoidable part of life on the Web today, but most exist as walled gardens with interactions and identities trapped in a silo. OpenID is one of a number of initiatives that are trying to break down these walls and enable new social applications to bootstrap off each other.

**This version of our presentation is for World Information Architecture Day, Feb 9 2013 in Ann Arbor** Chris and Farris expose the differences between how user experience designers and analytics practitioners think. While UXD weave best practices and user research into their designs, digital analysts spend their time confirming or refuting hypotheses in a data-driven way. One approach is decidedly qualitative, the other decidedly quantitative. In this presentation you will learn through their conversations how it is possible to leverage both enlightened design and deep data to continuously optimize user experiences. If you work on either side of this debate, this is how to better state your case… and get along with the other side.

There are many accessibility rules and several sets of accessibility guildelines. Developing an accessible website is hard. Drupal can help you. The most important thing Drupal does for your website, is that by default it makes sure your website is not inaccessible. The road to accessibility is much longer though. We'll step through several processes you can put in place to ensure accessibility of a website. This session will introduce the different accessibility guildelines. What they are, which ones you should pay close attention to and how they apply to a website. We'll see which components of the accessbility rules relates to Drupal as a CMS, which parts relates to editors and webmasters and different tools you can use with Drupal to help you ensure a website stays accessible over time.

An introduction to microdata, schema.org, authorship and Google+ and its relevance to website developers. Delivered at the Joomla! World Conference on 17th November 2012, this presentation will be available in video format via the official Joomla! distribution channels in due course.

Este documento describe un curso de posgrado de 20 créditos (200 horas) sobre programación web con tecnologías avanzadas como PHP, HTML5, CSS3 y AJAX. El curso cubre temas como el desarrollo frontend y backend, diseño responsive, bases de datos, integración con APIs y patrones de diseño. Los estudiantes completarán un proyecto integral y escucharán conferencias de empresas líderes. El curso finaliza con presentaciones de proyectos de los alumnos y casos de éxito de graduados que trabajan en empresas de desarrollo web.

Voor het maken van single page web applications lijkt MVC met databinding de standaard. Daarmee zijn fouten lastig te achterhalen. Facebook ondervond dat ook en koos voor een functionele aanpak: ReactJS. Deze sessie geeft een introductie, gaat dieper in op ogenschijnlijke snelheid nadelen en laat zien hoe je herbruikbare React componenten bouwt. Tevens zal ASP.NET MVC gebruikt worden voor server side rendering van de initiële state, ideaal voor search engines die meestal een probleem hebben met single page apps. Na deze sessie zul je nooit meer hetzelfde denken over web UI’s.

"Using Cascalog to build an app with City of Palo Alto Open Data" by Paco Nathan, presented at OSCON 2013 in Portland. Based on a case study from "Enterprise Data Workflows with Cascading" http://shop.oreilly.com/product/0636920028536.do

This document discusses using the F# programming language for financial trading applications. It provides examples of how F# can be used to model financial domains like orders, time in force, and currency conversions. It also discusses benefits of F# for financial applications like increased productivity, efficiency, correctness, and managing complexity. Finally it shows examples of F# used in trading screens and with type providers to interface with data.

This document provides a taxonomy of Scala concepts including object-oriented features, pattern matching, functional programming, actors, futures, implicits, type theory, macros, and category theory. It aims to serve as a reference for many of the terms used in the Scala community. The document covers topics such as case classes, lazy definitions, imports, objects, tuples, pattern matching examples, immutable collections, higher order functions, parallel collections, partial functions, currying, actors, futures, implicit conversions, implicit parameters, implicit classes, type inference, type classes, higher kinded types, algebraic data types, macros, concepts and arrows in category theory, morphisms, and functors.

Chef is an open source configuration management and automation framework used to configure, deploy and manage infrastructure of every type. Deploying to the cloud has made it easy to run large numbers of servers and Chef makes it even easier to deploy to nearly every public and private cloud platform as well as virtualized and physical servers. This talk will provide a quick introduction to Chef and is intended for sysadmins and developers familiar with the concepts behind managing applications and infrastructure in the cloud, without diving too deeply into technical specifics.

This document summarizes a presentation by Dr. Jason Davis from Etsy about how they use big data and data-driven experiments to improve their products. It discusses how Etsy analyzes over 1.4 billion pageviews and $525 million in sales to conduct dozens of experiments monthly across search, advertising, and analytics. It emphasizes investing in tools for analysis, understanding tradeoffs, and appreciating the complexity of building big data products and algorithms at scale.

Media queries, server-side or client-side sniffers, how do we determine if the user is a mobile or desktop device? This tech talk will discuss which is the right solution(s) and how to implement it taking into consideration the various mobile user's browser capacity, bandwidth restrictions, as well as user choice. Jenifer Hanen @msjen http://blackphoebe.com/msjen

Bruce Lawson of Opera toured Indonesian Universities discussing web standards, HTML5, CSS Media Queries and cross-device development.

Real world aspects of implementing flexible, mobile and future-friendly sites through responsive design.

Bootstrap is an open-source HTML, CSS, and JavaScript framework for developing responsive mobile-first projects. It provides pre-built components and utilities for common tasks like responsive grid system, typography, forms, buttons, navigation and other interfaces. The document discusses what Bootstrap is, why it is popular, how to get started, its grid system for responsive design, and customizing Bootstrap with additional CSS.

Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.

Perchè la tua istanza Drupal non performa e cosa puoi fare per invertire la rotta. D'altronde è una questione complessa: i moduli, la qualità del codice, l'uso delle cache, ma anche la versione di PHP, il proxy-cacher, il tuo hosting e, in ultimo, le cavallette... di Daniele Piaggesi

This document provides tips and tricks for speeding up a Drupal website. It discusses the importance of web performance and how page load times can impact business metrics like revenue and traffic. Faster sites are especially important as mobile usage increases. The document then gives several recommendations for optimizing Drupal performance through software changes like updating modules, enabling caching, and using a CDN. It also provides server-level optimizations such as using PHP 7, Nginx web server, and caching databases like Memcache/Redis. The overall message is that following these best practices can help websites load faster and provide a better experience for users.

This document discusses jQuery and web performance. It describes how the jQuery Foundation maintains jQuery code and supports developers. It then discusses recent jQuery releases and how jQuery can be customized and used in different environments. The document outlines how the browser loads pages and the importance of prefetching resources. It recommends tools for analyzing page performance like YSlow, PageSpeed, and webpagetest.org. It provides tips for improving performance such as avoiding unnecessary layouts, optimizing JavaScript loops, and using developer tools to profile scripts and identify bottlenecks.

The document discusses front-end web development frameworks and tools. It covers full stack development, Git, Node.js, npm, and Bootstrap. Bootstrap is described as a free front-end framework that includes HTML, CSS templates for interfaces and optional JavaScript plugins. It also provides responsive designs and a mobile-first approach. The document then explains components of Bootstrap like grids, forms, navigation bars, cards, modals and preprocessors like Less and Sass which can be used to write CSS code.

My Slides about creating web sites which could also be useable even if you are not online! From Web Storages to Service Workers. Presented at Mobiletech Conference in Munich March 2017

Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details. "What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5. You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.

The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.

My Slides for my Talk about being Always On is a lie and how developers could add improvements to their web site to deliver a great experience even when the network is flaky!

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

Web accessibility is a crucial component of how we construct our websites today, some with legal requirements to ensure our websites cater to clients of all abilities and disabilities. But how much do we actually know about web accessibility, it's implications and it's implementation? How much do we know about the accessibility of the latest technologies like HTML5 and WAI-ARIA? And can we use these now? Once you begin to think about web accessibility and accessibility in general, you start to see the world in a very different way. In this talk, Tady Walsh, will take us through website accessibility, starting at the very beginning and will continue up to and including today's technologies. He will discuss, not only how to cater for the various types of disabilities our website visitors may have, but also the way we as developers and designers should be thinking about website accessibility, in every step of our work. Bio: Tady is a project manager and information architect with Arekibo Communications. With a background in front-end development, he has been working and thinking about web site design and development for the past 15 years. He's a vocal supporter of cool design, good user experience and considerate development methods. His thoughts and opinions can be found on twitter as @tadywankenobi, on his website at http://www.tadywalsh.com and also on Arekibo's blog http://blog.arekibo.com.

Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies.

This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.

The document discusses the Bootstrap framework for responsive web design. It explains that Bootstrap allows developers to create responsive websites without relying on graphic designers. It provides instructions for including Bootstrap's CSS and JavaScript files. The document also includes an example of how to use Bootstrap features like navbars and dropdown menus in an MVC application.

After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?

This is the slide deck from the workshop given at UI11 on October 9, 2006. This presentation was given with myself (David Malouf) and Bill Scott (AJAX Evangelist @ Yahoo!). The goal of the course was to teach people the basics of Interaction Design and then how to apply those principles to design using RIA technologies like AJAX and Flash.

- The document provides an overview and examples of CSS Grid Layout features such as grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row, and more. - It demonstrates how to size grid tracks using fixed, intrinsic, and flexible sizing functions like fr units, minmax(), auto, fit-content(), and others. - Examples are given for aligning and aligning content within grids using properties like justify-content, align-content, justify-items, align-items and more.

UNLOCKING THE POWER OF CSS GRID LAYOUT Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities. In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.

The document provides a summary of a WordPress Meetup on CSS Grid Layout. It discusses various grid sizing techniques like intrinsic sizing with auto, min-content, max-content, and fit-content. It also covers flexible sizing with fr units and minimum and maximum sizing with minmax(). Other topics include alignment of tracks with align-content and justify-content, alignment of items with align-items and justify-items, and writing modes. Throughout it provides code examples and links to further resources.

A talk demonstrating some of the new things in CSS, from layout to variable fonts, blend modes and animations.

The document provides a summary of Rachel Andrew's presentation on CSS layout at Smashing Conf London. It includes links to various CSS specifications and code examples demonstrating different CSS layout techniques like grid sizing, intrinsic sizing, flexible lengths with fr units, minimum and maximum sizing, and responsive design patterns using media queries and feature queries.

This document summarizes Rachel Andrew's presentation on solving layout problems with CSS Grid and friends. It discusses how CSS Grid creates an actual grid structure, unlike float-based or flexbox grids which only mimic a grid. Key features of CSS Grid like grid-template-columns, repeat, minmax, and fr units for column sizing are explained. The document also covers using features like float or flexbox as fallbacks for older browsers, and potential future additions to grid like subgrids and masonry layouts.