Top Pens of 2017 on CodePen

These are the most hearted Pens of 2017. The number itself is how many people hearted the Pen, but the ranking takes into account heart-levels as well. Source: Top Pens of 2017 on CodePen



CSS Timeline Examples From CodePen

With the emergence of social media, timelines have started to become popular and be used in other type of websites, such as blogs, portfolios, news portals, weather apps and many more. With the help of CSS & JS you can create stunning timelines that can be used in your current and future projects. That’s why… continue reading



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