Eric Meyer describes his journey of learning about and implementing fully-Light-DOM web components.
You just take some normal HTML markup, wrap it with a custom element, and then write some JS to add capabilities which you can then style with regular CSS! Everything’s of the Light Side of the Web. No need to pierce the Vale of Shadows or whatever.
Jeremy Keith discusses what makes a custom element an HTML web component.
If your custom element is empty, it’s not an HTML web component. But if you’re using a custom element to extend existing markup, that’s an HTML web component.
React encouraged a mindset of replacement: “forgot [sic] what browsers can do; do everything in a React component instead, even if you’re reinventing the wheel.”
HTML web components encourage a mindset of augmentation instead.
In this piece, Karan Thapar emphasizes that:
In this article, Dave Rupert explains how testing in forced colors mode improves accessibility for users and reveals design flaws, such as excessive reliance on color cues.
In Level 3 of the Display specification, the value of
displayis defined as two keywords. These keywords define the outer value of display, which will beinlineorblockand therefore define how the element behaves in the layout alongside other elements. They also define the inner value of the element — or how the direct children of that element behave.This means that when you say
display: grid, what you are really saying isdisplay: block grid. You are asking for a block level grid container. An element that will have all of the block attributes — you can give it height and width, margin and padding, and it will stretch to fill the container. The children of that container, however, have been given the inner value ofgridso they become grid items. How those grid items behave is defined in the CSS Grid Specification: thedisplayspec gives us a way to tell the browser that this is the layout method we want to use.
As simply put by Rachel:
When you define layout on a box in CSS, you are defining what happens to this box in terms of how it behaves in relation to all of the other boxes in the layout. You are also defining how the children of that box behave.
(Discovered via Stefan Judis)
In web development, small design decisions can have a significant impact on accessibility and user experience. One such decision is how we handle borders on interactive elements.
When styling interactive elements like buttons, it’s common practice to remove default borders using border: none. However, this approach can lead to accessibility issues, especially in high contrast mode. As demonstrated in the image below, removing the border entirely can cause buttons to appear as floating text on the page, making it difficult for users with low vision to distinguish interactive elements.
Dave Rupert explains the importance of the default border and why it exists:
In the case of interactive form controls (inputs, textareas, buttons, etc.), those pesky borders were put there because they have an accessibility benefit when using High Contrast Mode, a feature used by 30.6% of low-vision users.
To address this issue, Dave recommends making the border or outline transparent instead of removing it entirely. This can be achieved with the following CSS:
button { border-color: transparent;}As demonstrated in the image below, this approach is effective for several reasons. First, sighted users will not notice the difference. Second, as Kilian Valkhof explains, in forced color mode, the border color or outline color “will be overwritten with the current text color, making it nicely visible again without needing any special adaption or re-styling for forced color mode.”
Using transparent borders offers additional benefits for user experience. Consider hover effects, for example.
button { border: none;}
button:hover { border: 2px solid navy;}In such situations, applying a visible border on hover can inadvertently change the element’s dimensions. This change in size can result in a jarring visual effect.
By setting a transparent border in the default state, we ensure smooth transitions and consistent element sizes across different states.
<div> <button class="no-border-btn">Button with no border</button> <button class="transparent-border-btn">Button with transparent border</button></div>.no-border-btn { border: none;
&:hover { border: 2px solid navy; }}
.transparent-border-btn { border: 2px solid transparent;
&:hover { border-color: navy; }}Transparent borders are also valuable in the context of themeable design systems. Brad Frost elaborates:
When supporting multiple theme, it can be common for some themes to use borders while others don’t. This flexibility is great! Each brand is able to express themselves how they see fit. But if implemented using different border widths, shifts in the box model happen.
By using border-color: transparent for themes without visible borders, designers and developers can maintain consistent element sizes across different variants and themes. This approach provides the flexibility to adapt the visual design while preserving the underlying structure and layout of the components.
Implementing transparent borders in your CSS addresses crucial accessibility concerns, enhances user experience across different display modes, and provides the flexibility needed for robust, adaptable design systems.
If there’s one thing you can do to make your websites better, it is to embrace what the web platform gives you: HTML, CSS, and JavaScript — in that order. Apply the Rule of Least Power. Build with progressive enhancement in mind. You’ll be a happier developer. Your visitors will be happier, too, as things work as expected.
Jim Nielsen makes the case for design engineers as professionals who do design work with code. He also emphasizes the limitations of traditional design tools, which often produce static images that don’t fully capture the dynamic nature of web interactions, and advocates for designing in the browser instead.
You need someone who can do design work with code.
That’s right: design work with code.
Pixels of an interface from a GUI tool are a static representations of a dynamic form. It’s the difference between a picture of me and the living, breathing, moving me.
Design engineers don’t just push pixels around in a GUI tool, they do it in a web browser — the medium of delivery — designing not just the visuals but the interactions that make sense for a living, breathing, moving interface.
This is one essay I re-read every year. In it, amongst other things, Bhagat Singh challenges blind faith and advocates for reason and critical thinking.
Bhagat Singh on the importance of critical thinking and the dangers of blind faith:
Criticism and independent thinking are the two indispensable qualities of a revolutionary. Because Mahatamaji is great, therefore none should criticise him. Because he has risen above, therefore everything he says —may be in the field of Politics or Religion, Economics or Ethics— is right. Whether you are convinced or not you must say: “Yes, that’s true”. This mentality does not lead towards progress. It is rather too obviously reactionary.
[…] Any man who stands for progress has to criticise, disbelieve and challenge every item of the old faith. Item by item he has to reason out every nook and corner of the prevailing faith. If after considerable reasoning one is led to believe in any theory or philosophy, his faith is welcomed. His reasoning can be mistaken, wrong, misled, and sometimes fallacious. But he is liable to correction because reason is the guiding star of his life. But mere faith and blind faith is dangerous: it dulls the brain and makes a man reactionary. A man who claims to be a realist has to challenge the whole of the ancient faith. If it does not stand the onslaught of reason it crumbles down.
Bhagat Singh on the Hindu concept of sufferings as a divine punishment for sins committed in the previous life:
Poverty is a sin, it is a punishment. I ask you how far would you appreciate a criminologist, a jurist or a legislator who proposes such measures of punishment which shall inevitably force men to commit more offences. Had not your God thought of this, or he also had to learn these things by experience, but at the cost of untold sufferings to be borne by humanity?
Bhagat Singh on divine inaction:
I ask why your omnipotent God does not stop every man when he is committing any sin or offence? He can do it quite easily. Why did he not kill warlords or kill the fury of war in them and thus avoid the catastrophe hurled down on the head of humanity by the Great War? Why does he not just produce a certain sentiment in the mind of the British people to liberate India? Why does he not infuse the altruistic enthusiasm in the hearts of all capitalists to forego their rights of personal possessions of means of production and thus redeem the whole labouring community —nay, the whole human society, from the bondage of capitalism? You want to reason out the practicability of socialist theory; I leave it for your almighty to enforce it. People recognise the merits of socialism in as much as the general welfare is concerned. They oppose it under the pretext of its being impracticable. Let the Almighty step in and arrange everything in an orderly fashion. Now don’t try to advance round about arguments, they are out of order. Let me tell you, British rule is here not because God wills it, but because they possess power and we do not dare to oppose them. Not that it is with the help of God that they are keeping us under their subjection, but it is with the help of guns and rifles, bomb and bullets, police and militia, and our apathy, that they are successfully committing the most deplorable sin against society —the outrageous exploitation of one nation by another. Where is God? What is he doing? Is he enjoying all these woes of human race? A Nero; a Changez!! Down with him!
Bhagat Singh on the belief in God:
If no God existed, how did the people come to believe in him? My answer is clear and brief. As they came to believe in ghosts and evil spirits; the only difference is that belief in God is almost universal and the philosophy well developed. Unlike certain of the radicals I would not attribute its origin to the ingenuity of the exploiters who wanted to keep the people under their subjection by preaching the existence of a supreme being and then claiming an authority and sanction from him for their privileged positions, though I do not differ with them on the essential point that all faiths, religions, creeds and such other institutions became in turn the mere supporters of the tyrannical and exploiting institutions, men and classes. Rebellion against king is always a sin, according to every religion.
As regards the origin of God, my own idea is that having realised the limitation of man, his weaknesses and shortcoming having been taken into consideration, God was brought into imaginary existence to encourage man to face boldly all the trying circumstances, to meet all dangers manfully and to check and restrain his outbursts in prosperity and affluence. God, both will his private laws and parental generosity, was imagined and painted in greater details. He was to serve as a deterrent factor when his fury and private laws were discussed, so that man may not become a danger to society. He was to serve as a father, mother, sister and brother, friend and helper, when his parental qualifications were to be explained. So that when man be in great distress, having been betrayed and deserted by all friends, he may find consolation in the idea that an ever-true friend, was still there to help him, to support him and that he was almighty and could do anything. Really that was useful to the society in the primitive age. The idea of God is helpful to man in distress.
He wrote all this while in jail when he was just a 23 year old.
Thanks to Kevin Powell, today I learned that the text-underline-offset property is named so because it only applies to underlines and not other text-decoration-line values like overline and line-through.
<a href="https://example.com">Example</a>a { text-decoration-line: underline overline; /* We can set multiple line-decoration properties at once */ text-underline-offset: 16px; /* Only impacts underline */}