twitch
Streaming on Twitch twice a week

Videos

I stream live on Twitch twice a week and record the occasional individual video walking you through web development concepts.

April 8, 2022

Responsive grid layout and dark mode with Tailwind CSS

After completing the CV page’s content, I make it work across all breakpoints and fix the colors in dark mode.

Watch on YouTube
April 6, 2022

Recreating my CV in Tailwind CSS

I recently redid my CV/consultant profile in Sketch. To make this information more easily available, I’m adding it to my personal website. With Tailwind CSS, I’m trying to get the styling as close to the original document as possible.

Watch on YouTube
April 5, 2022

Creating a videos page in Next.js with data from the YouTube API

After adding YouTube statistics to my metrics dashboard, I’m adding a separate page to my portfolio that shows all my uploaded videos. We use the YouTube API to get a list of all my uploads and use that as the data source for a Next.js route.

Watch on YouTube
April 1, 2022

Reading from the YouTube API in Next.js

To expand my metrics dashboard beyond Twitch and visitor analytics, I add data from the YouTube API to it. My dashboard now shows how many videos I uploaded, how many subscribers I have, and how many views my videos have in total.

Watch on YouTube
March 31, 2022

Redesigning with Sketch and Tailwind CSS

After redesigning the landing page of my side project Retroulette, I tackle the list of activities in this video. We start in Sketch and transfer it to code styled with Tailwind CSS once we have a rough layout.

Watch on YouTube
March 29, 2022

Adding visitor and page view metrics to my Next.js site

I extend my open metrics dashboard by adding numbers representing how many people visited my site and how many pages they viewed over the last 30 days.

Watch on YouTube
March 11, 2022

Adding my Twitch live status to my Next.js website

In this video, I’m adding whether I’m live on Twitch or not to the footer of my personal website.

Watch on YouTube
March 9, 2022

Showing Twitch stats on a metrics dashboard in Next.js

To emphasize my working in public, I’m collecting some of my numbers on a public metrics dashboard. In this video, I’m exploring what values I can get from the Twitch API and putting a few values from that on the dashboard.

Watch on YouTube
March 2, 2022

Cleaning up a Next.js project

I’m updating how I embed logos on my personal portfolio. While I’m at it, I also bring back the banner at the top of the page, now linking to my Twitch channel.

Watch on YouTube
February 24, 2022

Playing games to learn CSS flexbox and grid

Follow along as I play Flexbox Froggy (https://codepip.com/games/flexbox-froggy/) and Grid Garden (https://codepip.com/games/grid-garden/).

Watch on YouTube
February 22, 2022

Moving React.js components into a reusable library

In this build-in-public session, I extract components from my various projects into a component library and use them in the others. By keeping my projects DRY, I only have to maintain each component in one central location instead of keeping copy-paste’d versions in each of them.

Watch on YouTube
February 21, 2022

Adding a Podcast component to an MDX blog post in Next.js (Part 2)

This is part 2 of this build-in-public session. The stream was interrupted due to a bad connection. We’re picking up right where we left off in the previous video.

Watch on YouTube
February 20, 2022

Adding a Podcast component to an MDX blog post in Next.js (Part 1)

One of the articles on my personal website lists podcasts in the “founders talking through their challenges” format. To make this more visually interesting, I’m turning the plain list of text into a grid of cards that also includes the podcasts’ artwork.

Watch on YouTube
February 12, 2022

Speedrunning more LinkedIn Skill Assessment quizzes

I attempted to get the JSON, Outlook, PowerPoint, Excel, Word, Python, and Agile skill badges on LinkedIn. With lots of help from the chat, I managed to get all but the two I’m most proficient with.

Watch on YouTube
February 9, 2022

A Senior Consultant attempts LinkedIn Skill Assessments

In an effort to add some more life to my LinkedIn profile, I try to do a few of the timed Skill Assessment quizzes that they offer. The questions are randomly selected from a pool of potential questions, and each one is on a strict time limit.

Watch on YouTube
February 4, 2022

Test-driven development with TypeScript and Jest

In this video, I take some of the helper functions I use in my projects or that I shared on Twitter to start turning them into a library.

Watch on YouTube
February 2, 2022

Planning and designing a web development agency website

In this livestream, I worked on a mockup for an upcoming version of my company’s website in Sketch. On different altitudes, we looked at what needs to go on there, what some of the components could look like, and why we can’t change the Twitter logo to a random color.

Watch on YouTube
January 28, 2022

Dark Patterns: when interfaces become evil

We take a look at what Dark Patterns are, explore a few different ones, and talk about why they happen.

Watch on YouTube
January 26, 2022

Exploring layout in Sketch, Figma, and Framer

I’m looking for a design tool that makes it easy to design a layout across multiple breakpoints. Looking at Sketch, Figma, and Framer, one makes it quite a bit easier than the others.

Watch on YouTube
January 21, 2022

Taking a look at Remix

I’m taking a look at the Remix framework and drawing parallels to Next.js. Following their quickstart guide shows us some of the most interesting features of Remix, like loaders and actions.

Watch on YouTube
January 19, 2022

101 TypeScript errors on the wall

When turning on strict TypeScript checking on my project, 101 new errors appear. In this video, we’re tackling some of them. Note that I have not explored TypeScript like this before, so I’m learning things as I go along.

Watch on YouTube
January 14, 2022

Adding Open Graph tags to a Next.js application

In this video, I look at some of the SEO recommendations made by the ahrefs webmaster tools and add some Open Graph information to one of my projects.

Watch on YouTube
August 9, 2021

Progressive enhancement with @supports

With the @supports media query, we can use upcoming features in CSS only in browsers that support it. Older browsers, or those that have not caught up to the specification yet, will ignore those styles and use a fallback instead.

Watch on YouTube
August 4, 2021

Draw Icons Yourself: Clouds

In this video, we’re drawing an SVG cloud icon from basic shapes in Sketch. The icon will be part of my icon set that you can get at https://lovelicons.com

Watch on YouTube
June 22, 2021

Dom Live: Some design upgrades with Tailwind CSS

In preparing for a larger site-wide redesign, I’m updating the look of two of the elements on my portfolio over on domhabersack.com

Watch on YouTube