Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for August, 2019.

Archive for August, 2019

Avocode interviewed me about my career and what comes next

Friday, August 30th, 2019

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.

Chris Heilmann article

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?

“Tweet this page” bookmarklet

Friday, August 23rd, 2019

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.

Quick tip: using scrollIntoView() to show added elements to a container with overflow

Friday, August 9th, 2019

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.

elements not showing until the user scrolls

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;
});

scrollintoview showing the new elements

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;
});

scrollintoview showing the new elements smoothly

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.