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 YouTubeVideos
When I’m not doing client work, I stream live on Twitch twice a week. I also record the occasional individual video walking you through web development and design concepts.
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 YouTubeCreating 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 YouTubeReading 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 YouTubeRedesigning 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 YouTubeAdding 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 YouTubeAdding 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 YouTubeShowing 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 YouTubeCleaning 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 YouTubePlaying 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 YouTubeMoving 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 YouTubeAdding 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 YouTubeAdding 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 YouTubeSpeedrunning 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 YouTubeA 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 YouTubeTest-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 YouTubePlanning 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 YouTubeDark 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 YouTubeExploring 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 YouTubeTaking 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 YouTube101 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 YouTubeAdding 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 YouTubeProgressive 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 YouTubeDraw 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 YouTubeDom 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 YouTubeDom 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