Skip to main content

Posts

Showing posts from August 12, 2018

Angular Progress Bars

In this tutorial, you will learn how to create loading indicators with angular. First, we will take at look at how to create a simple horizontal progress bar using just a DIV-element and some CSS.
Read More

Debugging Angular CLI Applications in Visual Studio Code

In this post, we are going to create an Angular CLI application, then add configuration to debug it in Visual Studio Code.
Read More

Your First Steps with Gatsby v2

We’ve previously explored the philosophy behind Gatsby as well as some of its major features, so it’s about time we jump in and start building websites with it. We’ll explore here how to get started with Gatsby v2. Gatsby v2 is still in beta at the time of this writing, so tread carefully.
Read More

Seriously, though. What is a progressive web app?

I’ve been familiar with the “progressive web app” (PWA) concept for a while now. But there’s always been an itch in the back of my mind about it. I’ve been to talks at conferences and meetups about the subject. I’ve read the main docs and top-level “what is a PWA” articles.
Read More

Create and Publish Web Components With Vue CLI 3

Are web components "the future" for the web platform? There are many opinions both for and against.
Read More

Using Refs in Stencil

Why Use Refs? The first question that you might ask yourself is why bother using element references? Let's clarify that. In a typical data flow, you will pass props from the parent to it's child elements. When passing props, the child component will re-render and you will get it's new state.
Read More

Types of Web Applications: From a Static Web Page to a Progressive Web App

The standards and requirements for online experience have been evolving along with the web app development technologies. The changes of visual presentation are now the most explicit, but they only became possible thanks to the transformation of web architecture.
Read More

GatsbyJS: Static Site Generator for React

Gatsby is a static site generator for React and allows web developers to create a static HTML file. Thus it provides fast initial load times and makes dealing with SEO much simpler.
Read More

Ionic Framework Development Glossary

We built this article as a guide of concepts related to Ionic Framework. We want this to be like a dictionary for the core concepts of Ionic and also a place where you can find lots of references to expand your expertise about Ionic Framework.
Read More

CLI Love Inside

The command line is a powerful tool, and sadly forsaken by most of us. The goal of this post is to reconcile some of you with the CLI (Command Line Interface), wether you are a developer or not.
Read More

Learn how to build End-to-End Encrypted (HIPAA-compliant) chat with Firebase using open source libraries

Today we have a post from David Szabo (@dszabosf) who is the VP of Developer Platform at Virgil Security. They created an End-to-End Encrypted Firebase integration and an E2EE Chat sample app for iOS and Android and he wants to share a bit more about it.
Read More

Angular Components: Pass by Reference or Pass by Value?

In Angular, you can pass data from a parent component to a child component using the @Input() decorator, and a child component can emit an event to a parent component using the @Output() decorator. You can learn more about the @Input() decorator and about the @Output decorator here.
Read More

Getting Started with Service Workers

A Service Worker is a relatively new API that’s been introduced in modern web browsers in the last few years. It’s a really important technology.
Read More

Shadow DOM in Ionic and Why It’s Awesome

SHADOW DOM! But, what exactly is Shadow DOM? Put simply, Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS.
Read More

Automatic Ionic 2 Builds For iOS Using Fastlane

When your project get’s close to release, it’s time to think about decent ways to build your Ionic app. Of course you can do this by hand, but if you are having multiple apps and configurations this can get out of hand very fast.
Read More

How To Develop iOS Apps On A Windows PC

How can you develop iOS apps on a Windows PC? The short answer is… you can’t! There are plenty of options to get around that, however. Let’s find out in this article! The problem is Xcode, the Integrated Development Environment (IDE) you use to design, develop and publish iOS apps.
Read More

New! GraphQL Glossary & FAQ guide

We work in an industry where we commonly use buzzwords and jargon to describe the simplest of things. When you’re learning a new technology, it can often be challenging because you have to understand the vocabulary before writing any code.
Read More

Building Mobile Apps with Ionic 2

Take Ionic 1, the most popular and powerful HTML5 mobile application framework, supercharge it with Angular 2 and the latest web tech and you have Ionic 2. Learn this revolutionary framework with Building Mobile Apps with Ionic 2.
Read More

Building a CRUD Ionic application with Firestore

Firestore is Firebase’s new database. It’s a managed NoSQL document-oriented database for mobile and web development. It’s designed to store and sync app data at global scale easily. Some of its key features include:
Read More

Use The ChromeiQL Extension For Google Chrome To Test GraphQL Queries

As you probably know, I’ve been doing a lot with GraphQL recently. I’ve released tutorials that include Java with GraphQL, Node.js with GraphQL, as well as Golang with GraphQL, but I’ve only ever demonstrated testing those GraphQL APIs with cURL.
Read More

AsciiDoc : Visual Studio Marketplace

3 Things you can do right now to improve your Ionic and Firebase app performance

You want to give your users the best experience when using your app, heck, and I was constantly Googling or going into the Ionic forums to ask “Why is Ionic + Firebase so slow?“.
Read More

GoogleChrome/puppeteer

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
Read More

The What and How of Angular Schematics: The Super Simple Version

A summary of Angular Schematics: the what, how and why. Here's the super simple version!
Read More

Code-Sharing: Angular and NativeScript

With the combination of NativeScript and Angular's platform-agnostic architecture, we are presented with the opportunity to make an Android, iOS, and Web code-sharing combination. All you need are the Angular CLI and the NativeScript Schematics.
Read More

Angular Testing with Headless Chrome

Headless Chrome is a useful tool for running automated tests in environments where it isn’t practical to actually launch a browser. In this article we explain how to configure Angular CLI to run your Unit and E2E Tests using Headless Chrome.
Read More

New Course: Machine Learning With Google TensorFlow

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 
Read More

Production/Development Environment Variables in Ionic & Angular

Often, our production environments are quite different to our development environments. Whilst your application is in development you might just want to make requests to a database running locally on your machine.
Read More

How to Deploy an App to Firebase With Angular CLI

Angular CLI is a command-line interface for Angular and one of the easiest ways to get your app started. The beauty of using Angular CLI is that it lets you focus on your code, without having to worry about the structure of your application, since all the necessary files are generated for you.
Read More

Redesigning a Site to Use CSS Grid Layout

In this article, we’re going to see CSS Grid in action by creating a responsive multi-column website layout. CSS Grid is a new, hot trend in web development these days.
Read More

monday.com: the Total Team Management Tool

Whether you're a solo freelancer, an open source team, a large company, or a worldwide organization, having a consistent and usable team management tool is the difference between a well oiled machine and chaos.  Managing people, projects, tasks, payments...there's always so much going on!  monday.
Read More

Refactoring UI

takes everything we know about design and bundles it into one comprehensive package, including a book, screencasts, a component gallery, custom designed assets, and more. It’s exactly what I needed when I was struggling to make my projects look awesome.
Read More

Ionic/Cordova: How to Debug on a Device with Visual Studio Code

Modus loves Ionic! As an Ionic Trusted Partner, we do a lot of hybrid app development for various clients using Ionic Framework.
Read More

NgRx + Facades: Better State Management

Prior to Nx 6.2, Nx already provided scalable state management with NgRx. Now there is a new option when generating NgRx files to also generate a facade on top of your state management… to help you work even better at-scale.
Read More

Can I write my Cloud Functions in separate files?

He wanted to know if there was a way to keep Cloud Functions on separate files, I hadn’t given it much thought since I was using mostly a couple of functions per app. My thinking was since it’s a standard node environment written in TypeScript, then import/export should work.
Read More

Continuous Deployment

Continuous deployment works by connecting a git repository to a Netlify site and keeping the two in sync. It works for plain static sites, but it’s even more powerful when you’re using a static site generator or a front end build tool like Grunt, Gulp or Broccoli.
Read More

Implement Infinite Scrolling Using Angular 6

In this article, we are going to implement the infinite scroll in our Angular 6 app. When we are developing any application, at that time we deal with tons of records at a time.
Read More

Lazy Loading Images in Angular 6

In most web apps, images form a huge chunk of the size of the content. If you had, let’s say over 50 images with each having 100Kbs (after compression and resizing) in size, the total of that would be 100 x 50 which is 5MBs in total size.
Read More

Ionic 4 vanilla WC router

Get started with Angular Grid in 5 minutes

The paradigm of a data grid should be familiar to most developers. It’s a component used for displaying tabular data in a series of rows and columns. Perhaps the most common example of a data grid on Desktop is Excel.
Read More

Styling a Shadow DOM in Ionic 4

Since the release of Ionic 4, many of Ionic’s components now make use of a Shadow DOM.
Read More

mermaid · GitBook

Generation of diagrams and flowcharts from text in a similar manner as markdown. Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
Read More

Learning Observable By Building Observable

Frequently via social media, or in person at events, I’m asked questions about “hot” vs “cold” observables, or whether or not an observable is “multicast” or “unicast”. People seem to be really mystified by what they feel to be the dark inner-workings of `Rx.Observable`.
Read More

Using CSS Grid Today

CSS Grid opens up a world of opportunities for layout on the web, and it's ready for use right now. This talk will feature examples of how I've been using CSS Grid use currently in production, as well as the process and challenges I faced.
Read More

GoogleChromeLabs/pwacompat

PWACompat is a library that brings the Web App Manifest to non-compliant browsers. If you've created a manifest.json but want to have wide support everywhere else, look no further ? Learn more about the Web App Manifest or watch a video on modern theming!
Read More