Create a Custom Stream Elements Overlay for YouTube Subscribers

I recently got into streaming video games on a consistent basis and needed a better call to action (CTA) to encourage subscribers. In an attempt to encourage more subscriptions, I thought it’d be beneficial to show to my viewers how many current subscriptions I had and have them watch the number increase if they choose to subscribe.

While I could just show static plain text of this, I thought it’d be more professional to have it nicely formatted and updating live. For this I stumbled upon Stream Elements.

With Stream Elements I could create web overlays to show on my stream. However, I was responsible with the design of these overlays.

In this tutorial, I’m going to share how I created a custom widget for showing total YouTube subscribers on my stream.

Generate Images from HTML with Gulp and Puppeteer

Have you ever needed to generate an image from your HTML? Whether it be for design purposes or for marketing purposes with social media, knowing how to get a screenshot of your HTML design without manually taking the screenshot can be a great thing.

A use-case I was interested in was around feature graphics for each of my blog posts. Sure I could open a graphic design tool like Affinity Photo, or use the same feature graphic for every tutorial, but what if I wanted to automatically generate them based on certain criteria?

In this tutorial we’re going to see how to use Puppeteer to take screenshots of our HTML through a headless Gulp task.

Animate HTML Components In An Angular Application

When building a web application, not only do you need amazing features, but you also need a stunning user experience and that can often be managed by making good use of UI components. When I’m using my favorite web applications, the way components are displayed on the screen are sometimes what makes the application so memorable. Designers will often animate components to make them stand out.

When building a web application you can use CSS keyframe animations, but if you’re using Angular, there is another way. We’re going to see how to use the Angular Animations component to animate UI components on the screen.

Changing A NativeScript CSS Skin At Runtime

CSS is usually a subject I avoid due to me being artistically illiterate, but recently a student of mine asked me an interesting question regarding theming an Angular NativeScript application with dynamic CSS files loaded at runtime. Given the nature of Angular, it becomes difficult to load files at runtime because of how Angular compiles and builds projects. NativeScript Angular projects are no exception when it comes to switching a CSS skin.

So what if we want to apply a set of CSS styles on demand, but keep them separated in their own files?

We’re going to see how to switch between files to apply a CSS skin to a NativeScript Angular application on demand at runtime.

Adding Background Images To Ionic Framework Apps

I started working on an app and decided it was time to step up my design game. Usually my apps suffer from looking plain or dated even though they have some insanely awesome functionality (ex: OTP Safe). However, after looking at many other apps, I came to the conclusion that an app can look more attractive just by including a logo or some other kind of branding images.

The tricky part here is, how might you add images to your Ionic Framework application and have them look good across devices with multiple screen densities? After doing some research I found that this could easily be accomplished by using background images created with CSS.

Why I’ve Gone Hybrid Over Native For Mobile Apps

I started developing mobile Android applications in late 2011. It wasn’t until 2012 that I released my first application to the Android Marketplace, now known as the Google Play Store. Up until early 2014, I only made native Android applications using the official Android SDK. As of now, I have only been using web technologies to create mobile hybrid applications for Android and iOS.

The following will explain why I’ve chosen to develop using modern web technologies rather than native mobile languages.

Use Font Awesome Glyph Icons With Ionic Framework

In a previous article I explained how to use Font Awesome glyph icons in your native Android application. Ionic Framework ships with IonicIcons included, but what if you wanted to include Font Awesome or any other font for that matter?

The following will show you how to include Font Awesome into your Android and iOS Ionic Framework project.