Full Stack Web Developer and Freelancer
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, 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
With a single line of CSS we can completely reorient any element on our page – we can move it, rotate it, resize it, or send it into another dimension (to an extent). This all comes to us via the transform property. While it is a single property, a lot of functionality is packed into… continue reading
I’ve been using CSS grid (which henceforth will be referred to as Grid) for quite a bit now, and although I often talk about how we can use grid to make all kinds of creative layouts, I’m fully aware that a basic grid is still a design pattern that is very much in demand on… continue reading
What’s the best way to understand Flexbox? Learn the fundamentals, then build lots of stuff. And that’s exactly what we’re going to do in this article. This article was written with intermediate developers in mind, and assumes you already know a bit about Flexbox… Source: The Ultimate Guide to Flexbox — Learning Through Examples
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 how to implement asynchronous form validation for your projects. This allows feedback before tedious forms are completed Source: Check username and email availability without a page refresh | Happy-CSS
As websites become more complicated to build, a frontend workflow automation tool of some sort becomes a necessity. Gulp is one such tool: gulp is a toolkit… Source: nystudio107 | A Gulp Workflow for Frontend Development Automation
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
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
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
This really is a must read for any JavaScript-based developer. I have written this article as a vital source of reference for learning shorthand JavaScript coding techniques that I have picked up over the years. To help you understand what is going on I have included the longhand versions to give some coding perspective. June… continue reading
Flexbox provides a more efficient way of laying out, aligning, and distributing items in containers. Today I’ll be showing you a practical…
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
If you aren’t familiar with CSS Grid, it is a two-dimensional layout system for the web that allows us to create layout patons natively in the browser. This means we can easily recreate familiar grids using just a few lines of CSS. It also means we can do a whole lot with CSS and layouts… continue reading