I wanted to be able to check the platform my app is running on without importing Capacitor, thereby improving my web build’s bundle size. Capacitor already exposes the following methods for querying the current platform:
I wanted to test an interval was being respected which required me to add a seconds-based interval value to a Carbon date object.
Using Laravel Eloquent, I wanted to only get a specific property - the
id - from the first matching model of my query.
In my app, I have a promotion’s table which has a field called
phone_restrictions, which is an array of phone numbers a promotion is restricted to.
I wanted to return a translated date string from a Carbon date object and after some research, used the below solution which worked for me. It is quite brief, do leave a comment if you’ve got a question.
I’ve been working on coupon/promotion codes functionality and one requirement is only allowing the re-use of a coupon code after a period of time has passed. It could be a couple of hours, a couple of days, or a month at most.
Below is the validation language line we want to test, It’s found in
resources/lang/fr/validation.php my app supports just two languages at this time, English and French.
Below is the validation language line we want to test, I added it to the array in
Build command input field, enter
ng build --prod, and in the
Publish directory input field, enter
idle event is fired after the last frame rendered before the map enters an “idle” state. When this event is fired, we are sure of the following things:
- All currently requested tiles have loaded.
- No camera transitions are in progress.
- All fade/transition animations have completed.
If you don’t have
http-server installed, go ahead and install it globally.
I’ve been working on the PWA version of a mobile app and it was brought to my attention that when using the PWA offline, some icons that were placed in the
/src/assets directory fail to load.
Say we’re using Mapbox to render a map that contains a couple of icons representing places. When the map loads for the first time, no marker should be rendered.
ionic-image-loader is an Ionic 2+ component that loads images in a background thread and caches them for later use. It also makes available a service to manually preload images, which will be the focus of this post.
Imagine in your app there’s a page with a list of items, and clicking on an item navigates to and item details page. On the details page, you’d like to be able to swipe left to bring up the previous item, or right to bring up the next item. This post aims to provide an implementation for such functionality.
If you’d like to view the source code of Laravel’s validation rules on Github, have a look here Validator.php#L1102.
After a long search through the Laravel Github repositories, I finally had a break and found the link through this Stackoverflow answer. I wanted to see how the framework actually validates integers.
I’ve recently added Spatie’s Laravel Dashboard to a backend admin app and didn’t realize it is configured as a full webpage already, with an opening
<body> all setup.
What if you never have to write the –proxy-config CLI option again when serving your Angular application?
This post might seem trivial but I did spend a good amount of time searching this online just to be sure. So here we are lol.
To set a function parameter or return type as nullable, add a question mark in front of the type declaration.
Today at Switchn we had the need to redirect users by country and browser language on our Netlify hosted site. That is, send those visiting our site from English speaking countries to
/en/ and those from French speaking countries to
/fr/. Also if the user’s browser sends an
accept-language header in the request (e.g.
accept-language: en-US,en;q=0.9), we’d like to take that into consideration too.
I’ve spent like the last 30 minutes searching the web for how to convert dates to human-readable strings with Carbon in PHP/Laravel. Here’s a compilation of a couple of useful Carbon methods for my future self.
I have the following datatable class generated by Infyom’s Laravel Generator:
In this post, we’ll have an in-depth look at RxJS’s
distinctUntilChanged operator, it’s signature and what it does, it’s parameters
keySelector, and typical use cases for each of them and both of them.
Imagine in your app there’s a search input that triggers an http request on each keystroke as a user types in their query. As your userbase grows, search operations quickly become expensive due to the increased traffic to your server.
If your Laravel app uses multiple locales, it can get tedious keeping track of translations that are yet to be added to the appropriate translation files, e.g English translations in
resources/lang/en/validation.php and French translations in
This is a middleware that takes care of setting the app locale to the passed in locale string (e.g
To access an instance of your app’s
App\Http\Kernel class, you can use Laravel’s built in
resolve() helper function:
Demo and source code
To specify a default value for Netlify CMS’s
string widget, add the
default property to it’s definition and assign it a value, as follows:
Here’s the best resources I’ve found for configuring syntax highlight with Route in Jekyll:
This post assumes you’re currently able to add an
image to your post front matter, for example:
To enable adb debug on MTN Smart T running KaiOS, dial this code to open a menu and from there enable the USB debugging:
Say you have the following validation message in the
custom array of your language file -
resources/lang/xx/validation.php - (or another location depending on your use case).
My typical use-case for RxJS first() operator is to emit only the first item of an observable stream. What if you want the first value based on a certain condition instead?
With my Angular app’s Scully build broken due to proxy redirect issues, I was very happy today discovering we can control the underlying mechanism of rendering the pages to some degree.
When working on a PHP codebase, one thing I really miss from the Typescript world is the ability to pass properly typed objects and array into functions.
I recently refactored an Ionic Angular app that previously made use of jQuery to fetch data and update the view 😔. Having moved the API calls into dedicated services, all API requests were blocked by the browser given the different origins (localhost vs external api url).
Here’s how to dynamically create a
div, set it’s
id property, and append it to the
body element in an Angular service or component. I’ll use the example of creating a recaptcha container div on the fly.
If you want to pass additional parameters to an Angular service, what you are looking for is @Inject decorator. It helps you pass your parameters to the service through Angular’s dependency injection mechanism.
I’ll start by saying YAML is awesome! It’s like that thing you’ve been looking for but never knew existed, at least for my use case.
The past couple of weeks I’ve been adding new functionality to an API and today began updating the Angular front-end application to reflect these changes.
So I’ve been working with Akveo’s Nebular UI Kit for a while now and it’s been a real issue adding custom content to
While using the Twitter web app, I noticed it displays a
Try Again button for failed requests in different sections of the user interface. This allows the user retry each failed request without affecting the rest of the application, quite neat.
Wouldn’t it be great if instead of doing
ng serve --proxy-config proxy.conf.js you simply use
ng serve and the Angular CLI takes care of the proxy redirect command? Well, you can.
I’ve had this longstanding issue with setting the size of modals created with NbDialogService.
To test your Angular build locally:
There are many articles on the web showing various methods of getting a reference to the window object in Angular (primarily through the dependency injection mechanism). However those that are popular on Google search are from 2016, 2017, etc, and the methods are mostly overly complicated (understandably).
Lately i’ve been trying to apply the concept of using the url as the single source of truth in Angular applications I work on. Today I wrote some functionality that demonstrates this quite well.
<time [dateTime]="'2019-08-09 16:22:20'">8/9/2019</time>
A few days back while looking into strongly typing reactive forms in Angular, I came across this post by Alex Klaus. Given reactive forms don’t currently support strong typing (see issues #13721 and #17000), he suggests making use of Daniele Morosinotto solution which involves leveraging Typescript declaration files (
Ever had this issue where for some reason you can’t navigate to a route even though everything seems ok, and the route’s data resolvers are all executing?
This assumes you’ve already setup API authentication in your Laravel application.
From the agGrid documentation,
FYI, this is a to the point guide on adding and Bootstrap 4 styles (scss) to an Angular project.
I may flesh this out with a detailed post later, but if you have any questions or encounter any issues feel free to reach out to me.
This little utility function can help you easily determine if a url string contains a protocol and add one if missing.
Say you have an object you’d like to conditionally add a member to, here’s a neat little trick to do it with the spread operator.
I’ve spent a few hours trying to get fragment navigation working properly for a use case on Xamcademy (https://xamcademy.com).
A few months back while working on a location based taxi calling app, I had to build in functionality to render the route from the user’s location to the selected or searched listing on the map.
trackBy is a function which will return a unique identifier for each item in the array provided to *ngFor.
Normally when the array changes, Angular re-renders the whole DOM tree. But if you use trackBy, Angular will know which element has changed and will only make DOM changes for that particular element.
Having created a good number of custom form controls in Angular, it always felt repetitive implementing the ControlValueAccessor interface in each custom component.