CSS Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised. The Challenge The challenge is simple: building a button with an expanding border on hover. Source: Animating Border | CSS-Tricks

Enable Sass sourcemap in Ionic 2/3

By default, Ionic only enable sourcemap for .ts file and disable for .sass (https://github.com/driftyco/ionic-app-scripts/blob/master/config/sass.config.js#L16). So, if you want to enable and debug your stylesheets file, just follow 2 steps: Create config/sass.config.js module.exports = { sourceMap: true, } Update package.json “config”: { “ionic_sass”: “./config/sass.config.js”, }, And just re-run ionic serve command.

Data binding in Angular 2 vs. Angular 1

Data binding, one of the most loved and hated concepts of Angular 1, made its way to Angular 2. There are a couple of ways to bind data in Angular: interpolation, one way binding (unidirectional), two-way binding and event binding. These four types of data binding were already available in Angular 1, but now in… continue reading

Ionic 2 Login/Password Authentication with Firebase

If your Ionic 2 application need an authentication system, Firebase can be a solution. Though it, you could use several providers like Login/Password, Facebook, Google, Twitter, Github or your own custom system. In this article, we will see how to integrate a standard login/password authentication using Firebase system in a Ionic 2 application. Source: Ionic… continue reading

Learn by trying out CSS Grid Exercises

A lot of people are getting excited about CSS Grid, and want to learn it. A lot of people are also super busy. So let me teach you some very basic things about Grid, and get you started with a 5-minute taste. Unlike Bootstrap or any of the other layout frameworks we’ve been using for… continue reading

CSS Media Queries for iPads & iPhones

Many times I’ve had to design responsive websites targeting specific devices with CSS media queries, and not just base the break points from the site’s content. Because of this, I’ve ended up with a somewhat large list of CSS media queries for typical devices over the past year or two. I’ve posted these media queries… continue reading

Build an Ionic App with User Authentication

With Okta and OpenID Connect (OIDC) you can easily integrate authentication into an Ionic application, and never have to build it yourself again. OIDC allows you to authenticate directly against the Okta Platform API, and this article shows you how to do just that in an Ionic application

Generate random test data for MySQL using routines

Generate random test data for MySQL using routines Files Download the sql code: populate_dummy_data.sql. Download sql for generating random data for foreign-key dependent child tables: populate_fk.sql Install mysql -uUSER -pPASSWORD DATABASE_NAME < populate_dummy_data.sql mysql -uUSER -pPASSWORD DATABASE_NAME < populate_fk.sql Usage Run this SQL query call populate(‘DATABASE-NAME’,’TABLE-NAME’,NUMBER-OF-ROWS,DEBUG-MODE); DEBUG-MODE (‘Y’,’N’) will print an SQL that’s executed and… continue reading