Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

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.

Read More

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.

Read More

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.

Read More

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.

Read More

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.

Read More

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.

Read More


Follow Us

The Polyglot Developer


Subscribe to the newsletter for monthly tips and tricks on subjects such as mobile, web, and game development.

The Polyglot Developer

Support This Site