The nice folks at Avocode have a series of blog posts where they interview important people of the web and ask them about their history and career. Probably by accident, I ended on their invite list and they just published a long blog post of me explaining some things.

The questions we answered were in detail:

• Hi Chris. Thanks for taking the time. Let’s start with who you are and what you do?
• You’re the legend of the IT industry, and I’m thrilled to hear your journey towards development. When was the moment you knew you wanted to become a developer?
• You’ve been using JavaScript since it came out, how would you compare the first version with what we use these days?
• You worked as a Principal Developer Evangelist at Mozilla. What is your favorite project that you launched while being there?
• Since 2015, you joined Microsoft. How did you end up here?
• When you joined Microsoft, you came to refresh their “browser activities” and form a team that was responsible for them. Tell us about the obstacles you faced during the process.
• How would you describe the journey of Internet Explorer and the last years of its life before being deprecated?
• It’s been 4 years since the initial release of Microsoft Edge. What do you think about its journey?
• Microsoft is on the rise of contributing to open-source projects. The acquisition of GitHub is another hint that Microsoft takes open-source seriously. What do you think about large corporations contributing to open-source?
• Speaking of GitHub, besides the Visual Studio IDE, Microsoft now “owns” Visual Studio Code and Atom editors. They even share a framework that powers them — Electron. Are you using any of these?
• We mentioned Electron, another GitHub project popular in the web-dev community. Many people from Microsoft help out with Electron. What do you think about web technologies landing in the “desktop world” thanks to Electron? Slack, VS Code, Spotify, Avocode depend on them. This, in turn, makes our computers run slower. Do you have any prediction where this trend will lead us?
• There are several Machine Learning projects, and research groups that focus on automatic code generation, locating and fixing bugs automatically, etc. Do you see this becoming the next big thing anytime soon?
• Do you have any tips on coming up with dev team code standards and maintaining them at all times? How can product managers educate their team in this matter?
• What’s an interesting or fun fact about yourself we wouldn’t find on your social media?
• What do you like to do when you’re not working?
• Where is the best place for people to connect with you online?

Update: Moved the code to GitHub, make sure to drag it from there to your toolbars
Update: Fixed now for Chrome – there were some issues with whitespace :(

I like tweeting about pages I read in the following format:

"Headline"
https://example.com

Most “share this” buttons add a lot of cruft and if there is none, it is annoying having to copy the text first and then the URL into Twitter.

With this bookmarklet, you can highlight some text, click the bookmarklet and get a tweet window in a new tab. This is the source in a more readable manner – this will not work as a bookmarklet, see the link below instead!

(function(){
    n=getSelection().anchorNode;
    if(!n) {
        t = document.title;
    } else {
        t = n.nodeType === 3 ? n.data : n.innerText;
    }
    t = '“' + t.trim() + '”\n\n';
    window.open(
        `https://twitter.com/intent/tweet?text=
        ${encodeURIComponent(t)}
        ${document.location.href}`
    )
})();

Explanation:

• We wrap the whole thing in an IIFE to avoid the browser redirecting to “javascript://”
• We get the anchorNode of the current Selection object
• If there is no highlighted text, we grab the document title
• We check the type. If it’s a text node, we read the data, if it is HTML, we get the innerText
• We remove any whitespace, add the quotes and some line breaks
• We open a window (which these days results in a new tab) and call the Twitter intend with the text followed by two line breaks and the URL of the document.

That’s it. Drag the bookmarklet to the toolbar from the GitHub Demo page or check the code.

Voilà, happy tweeting.

Often we want to have an interface where we have a container with overflow: scroll with a header and a footer.
One problem with that is that when we add new elements to the container, they do get added to the end of it but the element won’t show up before the user scrolls down.

In the past we hacked around this issue by comparing scrollHeight and clientHeight and setting the scrollTop property of the element. This is error prone and seems overly complicated.

Enter scrollIntoView. Using this API ensuring that a new element shows up to the user is as simple as calling it on the element itself.

Say we have the following list of characters and a button to add more of them.

HTML:

<div class="scrollbody">
    <ul>
        <li>Billy Butcher</li>
        <li>Hughie Campbell</li>
        <li>Mother's Milk</li>
        <li>The Frenchman</li>
  </ul>
</div> 
<button>Add new character</button>

In the CSS, we limit the body to scroll and set it to overflow.

.scrollbody {
  height: 6em;
  overflow: scroll;
}

With a bit of JavaScript, we can now add new characters every time we click the button:

let characters = ['The Female (of the Species)',
'Lieutenant Colonel Greg D. Mallory','The Legend','The Homelander',
'Black Noir','Queen Maeve','A-Train','The Deep','Jack from Jupiter',
'The Lamplighter','Starlight','Mister Marathon','Big Game',
'DogKnott','PopClaw','Blarney Cock','Whack Job',
'Gunpowder','Shout Out'];
 
let count = 0;
document.querySelector('button').addEventListener('click', (ev) => {
    if (count < characters.length) {
    let item = document.createElement('li');
    item.innerText = characters[count];
    document.querySelector('ul').appendChild(item);
    count = count + 1;
  }
  ev.preventDefault;
});

Now, if you try this out, you see that the new characters are in fact added, but not visible until you scroll down to them.

That’s bad. To remedy this, you all you need to to is to add the scrollIntoView call after adding the new list item:

/* list of characters */
let count = 0;
document.querySelector('button').addEventListener('click', (ev) => {
    if (count < characters.length) {
    let item = document.createElement('li');
    item.innerText = characters[count];
    document.querySelector('ul').appendChild(item);
 
    item.scrollIntoView();
 
    count = count + 1;
  }
  ev.preventDefault;
});

As an extra bonus, you can define the behaviour of the scroll to be smooth, which scrolls it in slowly and not as jarringly:

/* list of characters */
let count = 0;
document.querySelector('button').addEventListener('click', (ev) => {
    if (count < characters.length) {
    let item = document.createElement('li');
    item.innerText = characters[count];
    document.querySelector('ul').appendChild(item);
 
    item.scrollIntoView({behavior: 'smooth'});
 
    count = count + 1;
  }
  ev.preventDefault;
});

Another reminder to keep looking into what’s in the standard these days rather than finding an old solution on StackOverFlow and keep too complex and not browser-optimised code alive.

Update: there was a simplification about Custom Attributes being not supporting concatenation, thanks to Sime Vidas, Brian Kardell and Greg Whitworth to set this straight.

Over the last few iterations of CSS the boundaries between CSS and JavaScript started to blur. CSS was a static language, meant to define colours, look and feel, but not interactivity. You could use percentages in dimensions as sort of interactivity to the enviroment, but reacting to things changing was the job of JavaScript.

In the days of old HTML was there to give structure, CSS look and feel and JavaScript interactivity. Or, as I put it in my book in 2006, if your website were a movie HTML would be the script, CSS the cinematography and direction and JavaScript the special effects.

Nowadays, CSS is much more powerful. We have animations, transitions, calc() and much more flexible values like em, rem, vw, vh and more. We also have interactivity with pseudo selectors like hover, focus and states of interactive elements like buttons. We can even hack with checkboxes to write full games in pure CSS.

This is great! CSS aficionados are much more likely to have the patience and knowledge to make an animation or interaction look and behave exactly right. And CSS engines are responsible to perform well and not clobber the interactivity or battery life of the end user device. Browser makers can concentrate on optimising the engine rather than competing with the developer on who has the job to keep things smooth.

However, there are still boundaries and use cases where CSS is not enough, and you need JavaScript. Often these are about reading the current state of something happening to the browser window or an interaction not considered in the CSS spec.

Switching fully to JavaScript in that case feels like a knee-jerk reaction and it makes more sense to me to find a way for JavaScript and CSS to interact. JavaScript to read the value and to make it available to CSS in some way.

In the past, the only way to do that was to store classes on parent elements or remove classes when certain conditions were met. But with Custom Properties (“CSS variables”), it has become much easier to interact between JavaScript and CSS.

Custom properties allow you to set “variables” in CSS and use them later. For example:

::root {
  --company-blue: #369;
} 
 
h1 {
  color: var(--company-blue);
}

Custom properties are somehow limited and are not strings like they are in CSS preprocessors, so you can’t readily concatenate them Custom properties work differently to CSS variables in preprocessors. You can concatenate them, but there are limitations.

Thanks to Šime Vidas who showed a working demo on Twitter and to Brian Kardell pointing to the discussion on the CSS standards group .

As my colleague Greg Whitworth explains:

This is not actually true regarding custom props. The issue I think you’re primarily referring to are potential limitations in CSS in general, although I noticed that Sime already showed you that concatenation can be done but probably not in all scenarios where the only desire is to join actual strings (eg: “bar” calc(5 + 8) will get converted to \”foo\” calc(58) since it isn’t a valid calc and thus those are converted to a string as well but with escaped quotes. Everything within the variable is tokenized, so it can be a string or not depending on what the value is determined by the tokenizer. If it isn’t an invalid ident but isn’t one that can be matched, then it is converted to a string for use within CSS. Anything passed to JS is converted to a string. You can see this in this JSBin

The simplest way to alter CSS custom properties is to use calc() to multiply them with a value:

::root {
  --startwidth: 200;
} 
 
h1 {
  width: (var(--startwidth) * 1px);
}
h2 {
  width: (var(--startwidth) * 0.5px);
}

Now, as you can also define custom properties in JavaScript and add them to the styles collection of any element, this is a great way to only use JavaScript to read a value and leave the rest to CSS.

For example, if you wanted to know how far the document has scrolled, you can read this in JavaScript with an event handler and modify a CSS custom attribute:

JavaScript:

window.addEventListener('scroll', (e) => {
  document.body.style.setProperty('--scrolly', window.scrollY);
});

CSS:

h1 {
  position: fixed;
  width: calc(var(--scrolly)*1px);  
  background: #339;
}

You can try this out in this JSBin

By no means, this is a sensible demo, but I really like the fact that you can use JavaScript to reach where CSS can not, and still allow CSS to be the main driver and definition of interactivity.

I realised this week that I’ve been presenting at technology events for about 13 years now. The latter years were more or less dedicated to this and in some cases I covered 30 conferences a year.

Painting by Anke Mehlert

It is exhausting, but also fun work. And it brings a lot of extra opportunities. Both professionally – making contacts, meetings with companies and exposure. And on a personal level – seeing the world, trying out new places, meeting friends.

At a certain stage of your career speaking at a lot of events is great. You get outside validation, you bring back insights to your company and you make a name for yourself. If you are your own boss or you make money by speaking and giving courses, it is of course a no-brainer.

There comes a time in your career though where being on the road all the time becomes counter productive. And, even worse, it can become a barrier for others to engage and make their mark. I don’t want to be in the way – I want to pave a path.

Currently, my job is to empower others and to aid communication between departments. And to help coach and mentor people to become more visible inside and outside the company. This takes a lot of time and effort. But it is also rewarding to use your experience to help others avoid mistakes you made and follow best practices you discovered.

This is why I will take a step back from covering lots of conferences myself. I am lucky to know a lot of people that I can help fill in the spots, so please keep the offers coming. I hope that there is a great opportunity to get other people to make your event a success. I will try especially hard to ensure that the people I connect you to:

• are reliable and great at their job
• are new and different faces with more diverse backgrounds than me
• get all the help they need to ensure that working with you is easy
• find their own unique voice and get channels to get heard

On a related note, I am impressed about some of the talent that cropped up the last years on the speaking circuit. There are a lot of incredible people to choose from and it is exciting to find and support new people with different ideas.

I understand that there are harsh realities of having to sell tickets for your event. I also understand that picking well-known headliners make this a safer bet. I hope that there is a middle ground though. I can help get new people on stage and amplify their presence at your event on my communication channels.

I’m seeing a lot of new talent burn out and people who have been around for ages becoming repetitive. I don’t want to become either and I’d prefer helping new voices get onto the circuit without burning out.

I’m looking forward to hearing from you and try to make that happen.