We normally work with the stylesheets we develop for the content we create. This is one of the style sheets available and that interact in the CSS cascade: The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent style sheets The author of the Web page defines styles for the document. These are the most common style sheets The reader, the user of the browser, may have a custom style sheet to tailor its experience The user-agent is outside our control and it should stay that way. It's the...
When working on my piece about contrast I found myself writing about the CSS cascade. The more I realized I didn't understand the cascade itself. So this is my attempt at understanding the cascade, different types of style sheets and how they interact with each other. I'm also coming to the realization that this is one of the main issues that attract people to CSS in Javascript. The cascade is complicated and, sometimes, the interaction between user-agent and author style sheets can be a real PITA so any option that removes the cascade from the equation seems attractive. So rather...
Mavohttps://mavo.io/ is an extension to HTML created by Lea Verou as part of her work at MIT CSAIL. It caught my attention because it's a minimal setup system that does all of the heavy lifting for you as we'll see when we look at how it works and it can do fairly sophisticated projects. To test Mavo I will use it to create a project listing for a portfolio. It will test Mavo's storage capabilities, how to create multiple entries in a single application and Mavo scripting features built into the platform. What it is Mavo adds attributes to HTML...
Over time I've learned that performance is a two way street that requires good server configurations and good content management. You should avoid using .htaccess files completely if you have access to httpd main server config file. Using .htaccess files slows down your Apache http server. Any directive that you can include in a .htaccess file is better set in a Directory block, as it will have the same effect with better performance. Cross Origin Requests These rulles allow servers to work around the same-origin policyhttps://www.wikiwand.com/en/Same-originpolicy and accept resources origin This is not without risks as it opens your server...
Most languages that I've worked with have an additional tool for promises that covers items that we have to do at the end of a task, regardless of whether it succeeds or not. Using this example we'll explore uses for finally and compare with using async / await for the same task. fetchAndDisplay takes two parameters, a URL and the element you want to insert the content into. The original version does the following: - shows a loading spinner to indiccate the content is loading - Fetches the URL - If the fetch succeeds - Insert the text into the...
When we think about accessibility most of us think about screen readers but there's a lot more. The automated and manual techniques are a starting point. After you make all the changes suggested by the tools you still have to make decisions about your content. This is the beginning of my learning accessibility. Will report back along the learning path :-. Links and Resources - Accessibility - ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watsonhttps://www.youtube.com/watch?v=qdB8SRhqvFc - Leonie Watson: Using ARIA to solve everyday accessibility problemshttps://www.youtube.com/watch?v=gQADBOsjBTM - ARIA - Using ARIAhttps://w3c.github.io/using-aria/ - Best Practices - WAI-ARIA...
Now that we've created accessible components. Now we get to test them. To test accessible components we'll use 3 tools: The Accessibility Audit built into Chrome Dev Tools aXe and aXe Coconut from Deque Systemshttps://www.deque.com/ Screen Readers Lighthouse Accessibility Test In recent versions of Google Chrome, there is a new Audits panel in Dev Tools. I start here because it uses Lighthouse to run the test and aXe Core under the hood so, unless you have specific requirements why aXe Core or Coconut are required, this may be the only tool you need outside of a screen reader. To get...
Rather than reinvent the wheel I'll look at two collections of accessibility best practices: WAI-ARIA Authoring Practices 1.1https://www.w3.org/TR/wai-aria-practices-1.1/ and Ebay's MIND Patterns: Accessibility Patterns for the Webhttps://ebay.gitbooks.io/mindpatterns/ suggested by Rob Dodson. we will take the accordion example from the ARIA Authoring Practices and explore what we need to have in an accessible component. Note that, as of this writing, MIND does not have suggestions for an accordion element. This is a longer exercise than the one we did for the button demo earlier. Longer because of the element complexity, because there are many more moving parts and because there is...
Using ARIA Accessibility is one of the most important aspects of development and one that we don't pay as much attention as we should. We will look at ARIA Accessible Rich Internet Applications, what it is and how we can use it in our content to help improve the accessibility of web applications and pages. we will also discuss When it's better to use native elements and DOM interactions rather than create our own. we will also look at ARIA best practices and authoring guidelines. These are particularly suited to custom elements and components we create using Polymer or React-based...
HTTP/2 is the later evolution of the HTTP protocol that powers the web. It's main goal is to improve performance and latency over existing HTTP 1.1 implementations. For more details see Ilyia Gregorik's High Performance Browser Networking chapter on HTTP/2https://hpbn.co/http2/ HTTP/2 landed in Node.js 8.4 behind a flag. With Node.js 9, it became an experimental part of Node core, still at stability 1. This is the version we'll be working with. Do not run production workloads using this API yet, since it might change. Check the Node HTTP/2 API documentation for more information Getting an SSL certificate for localhost While...
