Hawk Ticehurst

@hawkticehurst.com

1655 Followers 335 Following

UX Engineer @vscode.dev. He/Him 🕸️ hawkticehurst.com 📍 New York, NY

Screenshot of the official JS Framework Benchmark run for Chrome 148. The implementation for Roqa is highlighted, showing it is in the second place position.
Demo of the small web app that generates VS Code release note images. A mouse moves around screen showing off functionality. First a platform dropdown changes the image from Twitter to Bluesky resolution, then another dropdown switches the theme from dark to light. In the canvas area the text field are editable and the title, version number, and a feature title are changed. Finally a Download PNG button is clicked, downloading the updated release note.
Hacker News front page. "CSS Web Components for marketing sites" blog post is in the number one spot
A VS Code extension page showing the "Enable" extension split button menu. The menu has two options "Enable" and "Enable (Workspace)". The "Enable (Workspace)" menu item is highlighted.
Top right corner of VS Code. Two red arrows point at two different icons in the top bar that will open the VS Code Chat view when clicked.
VS Code chat thread. A prompt message says "Can you update package.json to add typescript as a depedency?" A tool call permission widget is rendered below the prompt saying "Allow edits to sensitive files? The model wants to edit sensitive files (package.json). Do you want to allow this?" A file diff is shown below that text and then two buttons saying "Allow" and "Skip".
Beginning of New York Times article from 2021 that reads: “Nicki Minaj and Husband Sued, Accused of Harassing Sexual Assault Victim. Jennifer Hough said in a lawsuit filed in New York that the couple pressured her to recant her account of the rapper’s husband, Kenneth Petty, sexually assaulting her in 1994.”
Snow covered pathway in Morningside Park at nighttime. A large fallen tree branch sits in the foreground. An ornate lamp post and stone stair case sit just beyond in the distance. Black and white filter applied to photo.
VS Code Insiders showing an Example.js file. The file contains: import { Component, html, defineComponent } from '../../@lib/client.js'; class CounterButton extends Component { count = 0; render() { return html` <button onclick=${() => { this.count++; this.rerender(); }} > Clicked ${this.count} ${this.count === 1 ? 'time' : 'times'} </button> ${() => { if (this.count === 5) { return html`<p>You got to 5! Keeping going!</p>`; } if (this.count === 10) { this.count = 0; return html`<p>Incredible! You win!</p>`; } }} <ul> ${() => { const items = []; for (let i = 1; i <= this.count; i++) { items.push(html`<li>Item ${i}</li>`); } return items; }} </ul> `; } } defineComponent('counter-button', CounterButton);
An old Obsidian note containing the following code snippet: import { Component, signal } from 'ripple'; class Button extends Component { count = signal (0); increment() { this.count(this.count() + 1); } <button onclick={this.increment}> Count is {this.count()} </button> <style> button { color: pink; } </style> }
A rack of men’s shirts, pants, and jackets at Nordstroms with a sign above the rack saying “Eleventy”
Screenshot of the JS Framework Benchmark results run locally on my computer. The order of results from most performant to least is: 1. Vanilla JS 2. Web Components 1 3. Web Components 2 Fast 4. Web Components 2 3. Web Components 3 Fast 4. Svelte 1 5. Solid 2 6. Solid 1 7. Web Components 3 8. Solid 3 9. Svelte 2 10. Svelte 3
Screenshot of JS Framework Benchmark. It's a table with all the same frameworks listed but it contains metrics about the transferred size (in kilobytes) and first paint.
Screenshot of terminal logs emitted by the JS Framework Benchmark. Two sections are highlighted that indicate paint events are being measured and saved to a JSON file with the name "first-paint."
Screenshot of the JS Framework benchmark. The Vanilla JS Portable Web Components implementation is highlighted as being in 5th place.
A screenshot of a local run of the JS Framework Benchmark. The portable HTML web component implementation is the fastest. Faster than Vanilla JS.
Another screenshot of a local run of the JS Framework Benchmark. Two columns are highlighted showing Solid’s performance as the 8th fastest implementation and Solid with HTML web components performance as the 3rd fastest implementation.
A screenshot of a local run of the JS Framework Benchmark. Several popular web frameworks are shown along with the vanilla JS implementations. The run for a vanilla JS HTML web components implementation is highlighted as the second fastest right behind vanilla JS.
A screenshot of the JS Framework Benchmark. Only a few of the framework tests have been run for vanilla JS, a framework called Sonnet, vanilla web components, Svelte, Solid, React, and Progressive Element. Progressive element is now situated between vanilla JS and vanilla web components in terms of performance.
A screenshot of the JS Framework Benchmark. Only a few of the framework tests have been run for vanilla JS, a framework called Sonnet, vanilla web components, Svelte, Solid, and Progressive Element. Progressive element is situated between Svelte and Solid in terms of performance while all the other implementations are faster.
A drawing of four skeletons. From left to right the first skeleton is pile of bones with the word "content" underneath. The next skeleton is a regular skeleton with the word "HTML." The third skeleton has clothing with the word "CSS." The final skeleton is clothed and dancing with the word "JavaScript."
Web component wrench logo with the saturation and contrast cranked way up. At the bottom edge is purple text saying “Design is my passion.” The WC emoji is repeated along all the other edges of the image at different sizes.
Web component with lots of wrenches logo, but every single wrench, the letters, and background have an intense drop shadow applied.
A very large button overlayed on top of the Web Component Wrench log. The button is in the style of the 11ty documentation button with the text "Web Components" and some text underneath the button reads "Zach said the button should be bigger and as you can see he was right."
The proposed Web Component logo with even more wrenches in the background.
A version of the Web Component and Custom Elements logo with a bunch of tiny wrenches in the logo background
A row of web technology logos. It includes a prototype HTML logo created by Adam Argyle, a proposed Web Components and Custom Elements logo created by Hawk Ticehurst, the new CSS logo, the JavaScript logo, the TypeScript logo, and the Web Assembly logo.
A proposed web component logo. It's a very slightly rounded red-orange square with the top left corner sliced off at a 45 degree angle. In the bottom right corner is a white condensed font saying "CE" for "Custom Elements." There's also a dark mode and light mode version of the same logo using a black and white color palette.
Another version of the original web component logo, but instead of the letters "WC" the letters are "CE" for "Custom Elements." There's also a dark mode and light mode version of the logo using a black and white color palette.
A version of the proposed web component logo that emulates the styles of the WC emoji. The background is a blue color that has a gradient going to white at the top.
A proposed web component logo. It's a very slightly rounded red-orange square with the top left corner sliced off at a 45 degree angle. In the bottom right corner is a white condensed font saying "WC". Also in the image is the JavaScript and CSS logos and some reference illustrations showing the process of how the web component logo was created.
Screenshot of graze.social. It had a dark mode theme but the text font is black and unreadable.
Firefox dev tools open on the GitHub homepage.
Three websites shown on one screen in a grid like view.
A cursor right clicks the side bar and picks a context menu setting called "Change Theme Colors." A color picker UI is then displayed with the ability to select multiple colors that are automatically reflected in the Zen browser shell as a nice looking gradient of the selected colors.
The mouse cursor hovers over a set of vertical tabs and a small rectangular preview of each page is shown.
A google search for "astrojs" is initially shown. A cursor then shift clicks the link and a scrollable preview of the web page is shown above the google search. An expand button is then clicked to open the page in a new tab.
Opening a new tab in Zen and going to css-tricks.com. The page loads quickly and then is scrolled back and forth very quickly to show that Zen can keep up with rendering the rapid changes.
Zen browser compact mode. No browser UI is shown.
Screenshot from an animated movie where two dogs are holding a “no war” banner but image has been edited so the “no” is crossed out
Hawk climbing a V5 to V7 indoor boulder at Seattle Bouldering Project in Fremont, Seattle.
An animated video showing how custom data attribute can be used with CSS attribute selectors to create semantically named UI styles/variants like you might find in a modern web framework component library.
The Stellar logo placed above a blue and purple gradient background.
An instance of VS Code with a tab that days Demo and a screen filled with components from the Webview UI Toolkit. Above the VS Code instance is the text "Webview UI Toolkit for Visual Studio Code."