A picture is worth a 1000 words not a 1000Mb

More often than not, when asked to troubleshoot slow web pages, one of the major contributing factors to load time is images. Beautiful, and often beneficial in illustrating concepts and content, they come at a cost: time and bandwidth. So what can we do to optimize them?

In this talk we will:
* explore HTML elements and properties that can help us customize our images for screen sizes and capabilities
* look at techniques to reduce content layout shifts
* consider when and how to lazy load images
* compare images in various file types

< div >ersify your HTML

Since the inception of the web, HTML has been one of the cornerstones of web development, but how well do we know and understand it? Each element not only has default styles provided by the browser, but also semantic meaning which helps us with code structure, maintainability, SEO and, Accessibility.
We regularly use divs, spans, buttons, paragraph tags and many more, but what about the ones that aren’t so common like < time > or < abbr >? In this talk we will go over some lesser known HTML elements that can help us create better content for our users.

CSS :is(.awesome)

For years I repeated the same phrase, “You can’t style an element based on its descendant’s class or state”, and I can clearly recall thinking we never would. With the introduction of :has(), I now need to change my tune. As new properties are being added to CSS, we can do so much more than we used to. We recently saw grid and flexbox added to our styling toolbox but we didn’t stop there. In this talk we will look at some of the new properties, pseudo-classes, and techniques that have recently become available and how we can apply them to our projects.

Popovers, toasts, dialogs, tooltips and more

One of the hard parts of popovers and tooltips is inevitably their positioning. Between their positioning, their accessibility, and all of the interactions around them it is no wonder it is one of those things that we usually just go find a library to help us accomplish. With the new Popover API and anchor positioning though, it is now easier than ever to create them ourselves by leveraging some of the new CSS properties currently being developed which significantly decrease the amount of JavaScript we need to write. In this talk we will cover:
- The difference between dialog and popover
- Using the dialog element to create a dialog and the CSS properties to style it and its backdrop
- Creating popovers and positioning them
- How popovers lead the way to the new selectmenu element

You promised to callback: working with JavaScript promises

While developing for the web, more often than not we interface with APIs which get us data to use on our pages or allows us to send data back to servers to be saved for later. Whether we are dealing with authentication, a form, or a dataUrl from File Reader, each of these activities have something in common; we need to wait for a response or event in order to move on. In this talk we will deep dive into JavaScript promises. By better understanding promises and how they work we can help reduce bugs like race conditions, increase code readability, and improve our project’s performance. We will cover:
- How to create a Promise
- Using .then() vs async / await
- How to handle waiting for multiple promises concurrently vs in sequence
- The pitfalls of promises when using them inside of loops
- Parallels with Observables and RXJS
- Turning callbacks into promises
- Error handling

Type-setting in CSS: Using typography to enhance your design

From hands, to chisels, quills, the printing press, and now the web, a written record of our existence has been a constant throughout history. Languages, and how they are depicted, have evolved alongside the tools we use to render them. Often overlooked in design, text content is an integral part of the visual aspect of an application and CSS allows us to control and manipulate its look and feel.

In this talk we will cover a little bit about the history of typography leading up to where we are today, how to make decisions about fonts and their usage in our application, and the CSS properties that allow us to manipulate our type for a polished beautiful design.

Sprinkle Vast Greatness into you Images: Harness the full power of the SVG.

Scalable Vector Graphics, or SVGs, have become a lot more common on the web today. We see them as alternate options to downloading entire icon font libraries, as replacements for pngs and jpegs but what more can they do? Did you know you can access their code directly and manipulate them? Even let you users interact with them?

In this talk we will go over what the SVG code looks like, what it means, and how to generate it. Then we will delve into not only how to manipulate the styles but also how to add functionality in them such as links and click events.

Kiss My Sass

For almost 15 years we have had Syntactically Awesome Stylesheets (SASS) to help us write our CSS. But are we really using sass to its fullest? We know about variables, and nesting properties is nice, but what else can it do for us? There is a lot that SASS can do that often goes ignored or underutilized. Furthermore, mixins, includes, and functions, can change how we architect our code. In this talk we will go over some of the more advanced features SASS provides, what their benefits are, how they affect the CSS output created, and implementation use cases.

Architecting for Accessibility

Accessibility has been a part of development since the very beginning of the web. And although we have been talking about it since Tim Berners-Lee was working for CERN, to this day the struggles seem to remain the same. Not just how do we make our applications accessible, but also how do we integrate testing into our workflow? Who should be responsible for what and what questions do we even need to ask?

Instead of looking at code implementation, this talk will cover what questions to ask when getting started and how to read and understand the specification. We will then look at how different roles on the team are affected and the impact and changes including accessibility as part of development will have on the development cycle.

Moving Beyond Pretty: Making deliberate design choices

Have you ever heard the phrases “beauty is in the eye of the beholder” or “I like what I like” when someone is discussing your design? Or maybe design is your arch nemesis and you dread it. Too often design is only looked at for aesthetic and visual appeal, while purpose, goal, and usability are ignored.
Many features of good design are objective, not subjective, and can be either qualified or quantified with predictable results.
Together we will delve into the psychology, physiology, and mathematics of design principles for three key purposes:
- Making conscious design choices
- Improving our user experience
- Accessibility dos and don’ts

Everyday Accessibility

You’ve heard it: accessibility is important. We must make our websites and applications conform to accessibility standards. But what about the rest of our communications and interactions? As tech professionals we send emails, write documentation, write code, vent our frustrations on Twitter, and much more. We create content daily, whether we realize it or not, and there are many small things we can do to make our communication more accessible.
In this talk we will delve into the ways in which, especially when working remotely, we communicate and interact, and the little things we can do to make those communications more accessible for all.

Accessibility Cookbook: 10 easy recipes

If you ever use the elevator, subtitles to watch that cat video during a boring meeting, or tabbed through a form, you have used an accessibility feature.

As a community we understand that accessibility is necessary but when it comes to implementation, we often fall short.

In this talk you will learn
- Why accessibility is important
- 10 common accessibility fails
- How to test for them
- Solutions anyone can implement

Fabricating Fantastic Forms

A developer staple: the CRUD app. We all write them, and they all contain forms. Lots of forms.
In this talk you will learn how to make those forms more user friendly by delving into:
- UX techniques to guide the user
- Accessibility considerations and testing
- Form validation
- Error handling

Tables have their place, now let’s make them fit

Tables have gotten a bad reputation over the years. Historically, we used them for layout, a practice thoroughly frowned upon today. When responsive and fluid layouts came into the scene, they proved difficult to work with. As a result, we have shied away from them but it doesn’t have to be this way. In this talk we will go over:
- When to use tables, and when not too
- Techniques to make them work on mobile screen
- Accessibility considerations
- Alternate layout options when a table is not the correct option

I Don’t Need No Stinkin’ Framework - I Don’t Need No Stinkin’ Framework - Mastering Shadow DOM

Want to create components that work regardless of the front-end framework you are using?
Tired of throwing away your components when you change front-end frameworks?
Wish you could just code it once and reuse it on all of your projects?

Me too! Components are a staple of front-end development as they increase development speed, consistency, and reduce the need for repeat code. To create components often we turn to frameworks such as Angular, React, and Vue but we don't need to.

Using nothing more than HTML and Javascript that is readily available to us in all modern browsers we can create components that work without being tied to any one front-end framework.

You will walk away with the knowledge you need to go forth and create your own components, understand how to make them look gorgeous, and what if any limitations there are. Also, find out how you can bring back the blink tag!

Notes:
Based on article I wrote for Pluralsight without but focused on the js web component aspect:
https://www.pluralsight.com/guides/styling-when-encapsulated-in-angular

.CSS { display: What? }

As if css wasn't tricky enough as it was, they had to go and add all this new stuff to it like grid and flex… now which one am i supposed to use?

To make matters worse, many of the new css layout techniques use primarily the display property which now has over 40 possible values.

In this talk we will look at the history of the display property and ways you can use it to display, hide, and layout content.

Accessibility Basics

If you ever use the elevator, subtitles to watch that cat video during a boring meeting, or tabbed through a form, you have used an accessibility feature. As a community we understand that accessibility is necessary but when it comes to implementation, we often fall short.

This hands on workshop is for those interested in learning how to get started. You will take an existing website and identify and fix its accessibility issues.

You will learn:
- Accessibility principles
- Accessibility issues and their impact on users
- Tools and techniques to identify issues
- Strategies and methods for fixing accessibility issues

Predictable Spell Casting: Guiding your users with CSS animations

If you are not considering animations before an action and your web app fires, then you are unintentionally designing your app to simultaneously cast daze and confusion spells. Instead you want to ensure users roll a 20 on their spellcraft check and orient them without having to give them their own magic wand and book of spells. You need to show them which spells are being cast and get them excited about the next bit of magic that is about to occur. As your spell master, I will teach you to cast eloquent spells with a dash CSS transitions, a drop of keyframes and a pinch of html that you can quickly apply to your spells to remove daze and confusion.

Can you read me now?

15% of the world’s population has some form of disability, but only very few of our websites are actually accessible. But what does that word mean anyway? Accessible? In this talk we will go over what accessibility means in the context of web content and how to get your team started in making sure your content can be accessed by all.