This is a follow-up to Web Components, FTWhttps://publishing-project.rivendellweb.net/web-components.ftw which was getting too long and adds more areas of interest and further research. Accessibility And elementInternals The Guide to Accessible Web Componentshttps://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/ I want to highlight elementInternalshttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals, in particular the accessibility portion of the interface. The interface provides a way for custom elements to handle forms. It also exposes the Accessibility Object Model AOMhttps://wicg.github.io/aom/explainer.html. Using this interface is in addition to the manual work that you do to create accessibility affordances. You can also override the default values provided by the interface by setting aria- attributes directly on the element. These...
Material Design 3 is a very good design library coming from Google and it's the latest version of their Material Designhttps://m3.material.io/ design language. There are versions of Material for all the languages and libraries Google makes available: Webhttps://m3.material.io/develop/web Flutterhttps://m3.material.io/develop/android/jetpack-compose Android MDC Androidhttps://m3.material.io/develop/android/mdc-android Jetpack Composehttps://m3.material.io/develop/android/jetpack-compose Angularhttps://material.angular.io/ This post will concentrate on Material Design Web and try to do the following: Explain what is Material Design Explain how to build a design/layout with Material Design Web Decide if the library is still worth using since it went into maintenance modehttps://github.com/material-components/material-web/discussions/5642discussion-6805266 due to Google reassigning the engineering team working on Material Web to...
Laravel for PHP and Ruby on Rails for Ruby provide a full set of opinionated, 'batteries included' of tools, libraries and processes to create web applications. In Why We Don't Have a Laravel For JavaScript... Yethttps://wasp-lang.dev/blog/2024/05/29/why-we-dont-have-laravel-for-javascript-yet, Vinny a DevRel engineer at Wasp discusses his views on why Javascript doesn't have an opinionated framework like Ruby on Rails or Laravel. I have a different opinion of why Javascript doesn't have an equivalent tool and will discuss it in this post, along with a set of ideas I would use to build an equivalent platform. I will also base the content of...
I've been busy writing content but there are things that I'm either long overdue in implementing or want to explore. This should keep me busy when not writing posts and working on other projects. Dark Theme Re-evaluate the existing color palette and come up with a decent dark color palette Use the light-darkhttps://developer.mozilla.org/en-US/docs/Web/CSS/colorvalue/light-dark function to simplify the color schemes Web Components Color.js elementshttps://elements.colorjs.io/ — Lea Verou Be mindful that these components are under development and they may change without notice Is forking at this point worth consideration? playground-elementshttps://github.com/google/playground-elements — Google share-urlhttps://nigelotoole.github.io/share-url/ to create share links for different platforms Evaluate if...
This post will discuss how to keep a mono repo with projects written in multiple languages using Bazel as the common build tool for all four. The languages are: Go Typescript Javascript PostCSS I chose these three languages because they are what I'm most familiar with. I also chose to make a distinction between Javascript and Typescript since they require different toolchains and are written differently. I chose Bazel because it allows developers to use a single tool across a variety of languages. Bazel has specific characteristics that I find appealing: Reproducibility : Bazel produces pure functional builds where your...
CSS has had the ability to use keyframe animations for a long time. This post will concentrate in the animation timing functions available and how they affect the animations they are attached to. Review: The CSS Animation Property The animation CSS property applies an animation between styles. It is a shorthand for the following properties: animation-delayhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay : Specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. : The animation can start later, immediately from its beginning, or immediately and partway through the animation. animation-directionhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction : Sets the direction the...
Import maps allow developers to instead specify arbitrary text in the module specifier when importing a module; the map provides a corresponding value that will replace the text when the module URL is resolved. An import map lives in a script element with a type="importmap" attribute and it should be the first script element on the page. You have to define the import map before you can use it. Let's assume that we have a set of modules to do operations in three different geometrical modules: squares, circles and triangles. The modules live in a modules directory at the root...
Web Components have come a long way since they were introduced and the original Polymer library made them useful for non-experts. Since the landscape has changed so much, we'll look at some of the new things around web components specifications and APIs, we'll look at Lit, a low-level framework to build web components, Web Components libraries like Wired Elements and Shoelace AKA Web Awesome and a new strategy to build web components What Are Web Components? The term "web components" is an umbrella for a series of specifications that allow developers to create custom HTML elements. The component specifications are:...
Whether we know it or not we work with URLs all the time. Whenever we enter a web address into the browser's omni-bar, click on a link on a web page or click on an email link, all those are URLs. Despite their use everywhere, defining a URL is hard. URLs are defined in RFC 3986https://datatracker.ietf.org/doc/html/rfc3986 and in the WHATWG URL Living Standardhttps://url.spec.whatwg.org/ but even with these specifications, many inconsistent implementations can turn things into a security nightmare. In this post, we'll look at what URLs are and how they can potentially be abused. What is a URL A URL...
There are many ways we can improve our CSS, both in terms of readability and ease of use. This post will discuss some of these new ways of doing things and start thinking about ways to incorporate these new ways into existing projects. Using custom properties to make things more readable Until CSS gained custom properties AKA CSS variableshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSScascadingvariables there was no way to reuse values across one or more stylesheets; if/when we need to make changes, we have to make the changes everywhere we use these values which is tedious and error-prone. In this example, we use the same...
