DEV Community

Danny Engelman profile picture

Danny Engelman

Online since 1990, Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)

Location Amsterdam, the Netherlands Joined Joined on  Email address danny@engelman.nl github website

Education

TRS-80 Scriptkiddie '79+ 🎓 Computer Science '92

All 106 comments

The Future of Frameworks

I am more and more of the opinion the terms Web Components an...

A Quick Guide to Custom HTML Elements

Read the dev.to/p/editor_guide Especially the part where they...

A Quick Guide to Custom HTML Elements

Read what is already here on Dev.To tagged '#webcomponents'. ...

How to use the Google Map Web Component

All your examples are broken because the Google Maps API now ...

Build an Embeddable Widget using Preact and the Shadow DOM

So if you write it without dependencies in plain JavaScript, ...

Animated Circular progress bar using Html and CSS

If you don't mind loading a native JavaScript Web Component, ...

Stop using if else

Interesting.. no one mentions the Minification proces, and ho...

Lazy Loading SVG Icons using Web Components

Why fetch external SVG at all? You can let the Web Component ...

Understanding the Modern Web Stack: Running a Local Web Server

Live Server injects code in your source documents; most notab...

Some things to know about Lit

The biggest question with learning a new piece of software is...

How to make your to-do list editable with basic JavaScript

No need for prepend() and remove() Modern browsers (everythin...

Making a Toggle Switch into a New HTML Element

Everywhere you now use setAttribute to undo a state

Lazy Loading SVG Icons using Web Components

You can go smaller and faster with the iconmeister.github.io ...

Making a Toggle Switch into a New HTML Element

Good moment to learn classList.toggle and toggleAttribute

On Using Web Component Libraries

When making a comparison between Web Component Libraries and ...

Flexbox or Css Grids?

Apples or pears, Sets or Maps, left arrow key or right arrow ...

On Using Web Component Libraries

I have done a fair bit with Svelte. Its the fastest REPL arou...

On Using Web Component Libraries

I have added a 3rd term to my "Web Component" Lingo: BaseClas...

My second vanilla JavaScript Project: using APIs, promises, classes, error handling, and more!

Maybe use a native web component for flags, flagmeister.githu...

A Ridiculously Simple Way For Creating Responsive Web Apps

Give the guy a break, GunsyX. Simple applies to the author, ...

Distance Between Two Points (SVG)

It does do the touchmove. Your code needs to (always) attach ...

Distance Between Two Points (SVG)

I have a Acer Spin laptop (with touchscreen!) running W10 ma...

Distance Between Two Points (SVG)

hasTouch returns true on Chromium and FireFox Desktop browser...

Animated no-element typewriter

You are speaking in Berlin so must be German. Judging by this...

Distance Between Two Points (SVG)

It now only works on touch screens

Distance Between Two Points (SVG)

Would be great if it also worked with a mouse pointer

Web Component ideas: Building a carousel

You can rewrite: constructor() { super(); this.at...

7 cases where we can use HTML instead of CSS

Niets mis mee. Is een blanke vinoloog die universiteitsstude...

Frontend Development 2021

Ah, the endless debate on learning the Technology or the Tool...

YoffeeJS: Yet another Javascript framework. But this one's good, I think

Use Github Copilot to write code for you

YoffeeJS: Yet another Javascript framework. But this one's good, I think

Why does everyone want to be framed? And forget Vanilla Java...

Star rating system - only 168 BYTES 😲, no JS, no CSS, no images 😨, Accessible (kind of)...the war is over

It is easy to win a war if you only mention the 7 opposing pa...

The ONE star rating system — the future of rating

There are nine million bicycles in Beijing That's a fact It's...

Create To-do List using Vanilla JavaScript

Very good blog! One minor suggestion, append is powerful: ...

Let's Build a Colour Picker Web Component

LOL, that is the drawback of me not using TypeScript (any mor...

Let's Build a Colour Picker Web Component

Cool... but I am the laziest developer ever... drop the this ...

What's NOT new in React 18

Great blogs, but... techies only look at technology. Sure, I ...

React D3 Donut Chart

Apologies; couldn't resist doing it with a 999 (Gzip) Bytes ...

How to make a resizable panel control with Web Components

With lexical scope bind is old notation Event handlers don't...

What's NOT new in React 18

Does React have a future? The very interesting tr...

How to make a resizable panel control with Web Components

All this bind is totally not required; all methods you declar...

〈load-file〉Web Component, add external content to the DOM

Tnx, I added object and a link to vecta.io/blog/best-way-to-...

[tutorial] How to create a Web Component?

constructor(){ super(); this.attachShadow({mode: 'op...

Lit 2.0 Released: Building Fast and Lightweight Web Components

How come if I use lit.dev it says the library is 7.5 kB? No...

Web Components 101: What are Web Components?

Hold your horses! Safari does support Web Components; and h...

What do you think about strongly-annotated HTML?

You forgot <p align="left">, and 427 other attributes ...

Simplest Way to Include Icons in Your Project: Using Unpkg

Https://iconmeister.github.io has 7300 icons and bundles only...

Misadventures in web components

I forked your CodePen and refactored the Element definition.....

How to create a dot loading animation

Or do it all in one SVG:

Components are Pure Overhead

The most important aspect all these discussions forget is: ...

Components are Pure Overhead

Great article, I share most part of your tech vision, but wit...

8 Nice tricks Front-end Developers

Supported in Safari and Firefox... so if those are your userb...

The first of many HAX projects

Looking forward to your code, why the teaser and no code? Do ...

Shall we web component?

Cool, its 2021, and you show a graph not listing anything pas...

Web components in 2021: the Good, the Bad and the Ugly

When does hardly used then gets to the next stage? chromesta...

Web components in 2021: the Good, the Bad and the Ugly

One point to add. Web Component technology is older and mor...

We Should Stop Hating Web Components

One point to add. Web Component technology is older and mor...

We Should Stop Hating Web Components

I started a series of Dev.to posts last week; based on real w...

Web components with vanilla JavaScript

That double span didn't leave my mind today.. I would write ...

Web components with vanilla JavaScript

One more thing that helps: inline Event listener is what you ...

Web components with vanilla JavaScript

I was too soon with my <span> remark; missed that you a...

Web components with vanilla JavaScript

Since you explicitly asked for comments. It is your componen...

A shocking story about web development from the future 😲

Can you image what todays native W3C standard Web Components ...

DISCUSS: JavaScript just DIED! What language should replace it?

Fun fact; ES4 was, partially, implemented in Flash, but JavaS...

DISCUSS: JavaScript just DIED! What language should replace it?

The only language that comes to mind is "Eengekkanmeervragend...

DISCUSS: JavaScript just DIED! What language should replace it?

But Flash ActionScript was ECMAScript... and JavaScript.. is ...

Learn basic Web Components

If you don't take my word; then maybe you take this guy his c...

Learn basic Web Components

Yes, they do. They don't run on coal like Frameworks, they a...

Learn basic Web Components

Low-Level ?? They are part of the JavaScript engine, no lowe...

Learn basic Web Components

Can you motivate that statement, Benny innerHTML and append(...

Learn basic Web Components

See what code newcomers have to dig through (unless they don'...

Learn basic Web Components

One thing nearly everyone does is due to incorrect documentat...

What Web technologies are required to draw a Pie Chart in 2021? (spoiler alert: a standard Web Component will do) 🥧

It depends on what the team needs. If you do not have the JS ...

constructor() dynamic import()

Dont gaslight me, i fart pure alcohol. Code is wrong... your ...

constructor() dynamic import()

Can you explain what sketchTag does in this code. And where d...

8 JavaScript Tips & Tricks That No One Teaches 🚀

Interesting to learn that: let dogsNames = Array.from(dogs,...

Graphing with Web Components 1: SVG

You can replace many of those appendChild with append

Why would you want to learn ReactJS now?

The fact no React developer mentions is that the W3C and WHAT...

Web Components in Style

super.connectedCallback(); is a remnant from your Lit-Element...

🗿 Why Humans Invented HTML - Learning Frontend Deeply - Part 1

The dominant text-editor WordPerfect (the DOS version) used a...

Create Reusable Web Components in HTML

But if you think of Web Components as just a language feature...

Create Reusable Web Components in HTML

"Keep in mind, Web components have only been adopted into Fir...

Create Reusable Web Components in HTML

I don't understand this line: // Always call super first in c...

SVG icons are not "settled science"

"None of those SVG approaches come close to the simplicity of...

What is the Dom, the Virtual Dom, and the Shadow Dom

Important to note: DOM and ShadowDOM are W3C standards, "virt...

Webcomponents: It's really that easy!

I started with Z80 assembly in 1979 If assembly languages we...

Webcomponents: It's really that easy!

Or maybe simplify it to: <all-caps>this is uppercase...

How to make a tab control with Web Components

You are using syntax not supported in FireFox (and probably S...

Missing the Message Bus in HTML Custom Elements (and Micro-Frontends in General)

I don't get it why you want to 'drilldown' and not make ever...

I failed an interview because of an algorithm

Yes, indeed. Same concept: sort characters. It also shows why...

I failed an interview because of an algorithm

You are all still thinking in Numbers. (including those who i...

I failed an interview because of an algorithm

It is only going to get worse, Raul. Just wait till you have...

I failed an interview because of an algorithm

Typical example where humans fail. When they see numbers they...

Neater Icons with Web Components

I took it one step further with iconmeister.github.io

Benefits of SVG

iconmeister.github.io/ makes using Icons in a W3C CustomEleme...

Web Component Solutions: A Comparison

Your native version is bloated and full of oldskool ES5 patte...

How to get month list in your locale

And since year is not a parameter, no need for const year dec...

How to get month list in your locale

Using the 2nd parameter mapFn on Array.from instead of .map s...

What are Web Components ?

Alas HTML Imports is no longer part of the WC standard

7 Beginner's Tricks in Using Arrays in JavaScript

Not to sound like an old grumpy guy... Instead of reading a 1...

7 Beginner's Tricks in Using Arrays in JavaScript

You teach people .push but not .pop .shift .unshift That i...

Why I Switched From Visual Studio Code To JetBrains WebStorm

Very good comparison. In the end there is no winner, they ...

What's your coding origin story?

Cool, I had the exact same experience. That single semi-co...

Why you need to know about the Lindy effect, as a developer.

So Windows (1985) will outlast Linux (1991) ?

loading...