Web Components: Introducing Custom Elements

One of the new features in Safari Technology Preview 18 is Custom Elements v1 (Chrome/Opera already support for it): To define a custom element, simply invoke customElements.define with a new local name of the element and a subclass of HTMLElement. Example Code: class CustomProgressBar extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'closed'}); […]

CSS Variables: var(--subtitle);

As per usual, great talk by Lea Verou: The key takeaway to me is the very first one she mentioned: they’re just custom properties. This means that the normal behavior of inheritance is in place, you can manipulate them from within media queries, and you can even get/set them via style attributes or even JavaScript: […]

JavaScript Fatigue Fatigue

Axel Rauschmayer’s tips to fighting JavaScript Fatigue: Don’t try to know everything Wait for the critical mass. Stick to things you understand: don’t use more than 1–2 new technologies per project. Do exploratory toy projects Diversify in life When in doubt, you can always fall back to the solid base you already know: HTML, CSS, […]

You Can’t Get Comfortable in Web Development

Rey Bango, after having read the aforementioned “How it feels to learn JavaScript in 2016”: A lot of the discomfort we’re feeling is the belief that we need to know how to use every new framework or tool that comes out. It’s really not the case. There will always be someone building a new tool […]

Fukol™ Grids

Building a CSS Grid System isn’t that hard really, thanks to flexbox. Heydon has stripped it to its smallest form: .fukol-grid { display: flex; flex-wrap: wrap; margin: -0.5em; } .fukol-grid > * { flex: 1 0 10em; margin: 0.5em; } Fukol™ is a lightweight, breakpoint free, completely responsive, element query driven*, progressive enhancement based CSS […]

How it feels to learn Javascript in 2016

In the same style as the aforementioned “It’s the future!” — A fictional conversation on web development: … JSX? What is JSX? -JSX is just a JavaScript syntax extension that looks pretty much like XML. It’s kind of another way to describe the DOM, think of it as a better HTML. What’s wrong with HTML? […]

“It’s the future!” — A fictional conversation on web development

A fictional conversation on web development: I’m building a simple web app at the moment — a normal TODO app using HTML, CSS and JavaScript, and I’m planning to use jQuery. Is that the way to go? : Oh, no. That’s old school. jQuery is dead — no one uses it anymore. You need to use React now. That’s […]