Blog posts

Using Firebase with webpack? You might be able to save 220kb

MARCH 2020 UPDATE: The new Firebase JS SDK Alpha makes your bundle up to 80% smaller! It now fully adopts tree-shaking and lets you import only what you truly need. In a lot of tutorials I came across the comfortable solution of just adding import * as firebase from ‘firebase’ for your firebase import. As it turns out, there are 4 modular packages for Firebase. Here they are along with their sizes:

Add ES7 Async/Await Support for your Webapp in 3 Easy Steps

Nearly all evergreen browsers support Async/Await natively Async/Await has been around the block already some time. Now that it is in stage-4 since July 2016 (stage finished in the ECMAScript proposals) and nearly all evergreen browsers support it natively, too (except IE is late to the party as usual 😪) — it’s definitely time to take a second look. TL;DR I WANT ASYNC/AWAIT SUPPORT NAO!!1 use babel-preset-env yarn add regenerator or npm install regenerator add node_modules/regenerator-runtime/runtime.

PWA: Create a "New Update Available" Notification using Service Workers

New Update available popup. PWAs are getting more and more coverage and support. They improve the web experience and can load your app instantly with their great ability for HTTP caching (among other things, but this post only covers caching). The thing with Offline-First is, that you cache all the resources that are needed for launching up the webapp — even your index.html! Note: No sweat!

iOS & Android Native Build Errors with Cordova Plugins

Lately I encountered some native build errors that slowed me down quite a bit. Here is an overview of some of them, their issue and solution which might save you some time if you come across one of the following native errors: iOS: ‘GoogleCloudMessaging.h’ file not found iOS: Duplicate Symbols Android: safeparcel.AbstractSafeParcelable not found Android: Force Close due to phonegap-push-plugin iOS: ‘GoogleCloudMessaging.h’ file not found error: ‘GoogleCloudMessaging.

Angular’s ng-repeat Finish Event

Demo,js,output Explanation Sometimes you need to execute code after your list has been rendered on the client side. // js angular.module('ngRepeatDemo', []) .controller('AppCtrl', function() { var vm = this; vm.alphabet = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ]; vm.finished = function() { alert('fired'); // now javascript execution has been stopped and you should see all DOM nodes been created // note: interpolation may not have been done completely }; }); <!

Laravel Redirect::to() vs Redirect::away()

For external redirection The use case here is to redirect the user to another domain. I haven’t come across Redirect::away() before, even though it’s been added in Laravel 4.0.8. Redirect::to() Redirect::away() Difference Redirect::to() does additional URL checks and generations. Those additional steps are done in Illuminate\Routing\UrlGenerator and do the following, if the passed URL is not a fully valid URL (even with protocol): Determines if URL is secure rawurlencode() the URL trim() URL

4 Very Useful Chrome Dev Tool Commands

$_ — last output maybe you don’t want to store results in a variable for quick calculations and just want to chain those computations. $0 — currently inspected element useful if you want to output or alter the selected element. angular.element($0).scope() — get AngularJS’s scope combined with $(0) this makes a great use to inspect a specific element and then check what it’s scope looks like.

Laravel's URL::to() vs URL::asset()

Short answer: No, not really. You want to have the following code: <script src="js/bootstrap.js"></script> Now you can achieve this using blade syntax: // using URL::to() <script src="{{ URL::to('js/bootstrap.js') }}"></script> // using URL::asset() <script src="{{ URL::asset('js/bootstrap.js') }}"></script> URL::to() The method is implemented like this: URL::asset() The method is implemented like this: Difference Both methods get the job done. URL::to() additionally encodes the segments of the passed url with rawurlencode URL::asset() removes index.

Design a beautiful REST API

Every dev at some point has made decisions how his backend API should look like. If you’re coming from the web, then mostly for ajax calls. But what if that API should also address calls from other sources and clients. To fill that gap i was watching an informative talk by Les Hazlewood about beautiful RESTful. I’ll cut this in several sections. This is merely an overview, the full coverage you can get from the youtube talk or the slides.