Category:Dev
DeepL Translator Browser Extension/Add-on (en)
Thank you for using or your interest in the DeepL Translator Browser Extension/Add-on!
If you have a question or feedback, please post it in the comment section below.
If you like this extension, please make a donation and/or support my other work.
Support DeepL as well for providing us a great alternative to Google Translate. I am not affiliated in any way wi… Read more
Ionic 5 + React: positioning a popover relative to the clicked element
In the documentation, the requirement to have an Ionic 5 popover present itself beside a clicked element that activates the popover, you need to pass the mouse event to it.
To do so, you must assign the event prop of the IonPopover with the event value.
However, since React also nullifies all event properties due to Event Pooling and Ionic is looking for the eve… Read more
Ionic 5: animated collapsible searchbar using only SCSS
Add this to your global.scss of your Ionic 5 project:
ion-searchbar.collapsible {
width: 55px; // match hard-coded padding-inline-end when collapsed
// .searchbar-input {
// @include padding(6px, 55px);
// }
transition: width 0.5s ease-in-out;
--border-radius: 4px;
.searchbar-input.sc-ion-searchbar-md {
transition-property: padding-inli… Read more
Ionic 5 + Angular: custom Alert enter and leave animations
Since it’s hard to find an example in the documentation and elsewhere on the Internet, here’s a simple implemention of a custom fade-in animation for Ionic 5 alerts with Angular. Note that we choose what elements of an ion-alert to animate by using querySelector on HTMLElement baseEl. The div with class alert-wrapper is the dialog, but you can … Read more
Backing up your Gitea Docker Installation
TL;DR:
docker exec -u git -it -w /data/gitea/backup $(docker ps -qf "name=gitea_server_1") bash -c '/app/gitea/gitea dump -c /data/gitea/conf/app.ini'
The dump will be found in ./gitea/gitea/backup relative to directory containing your docker-compose.yml. You should create this “backup” directory first otherwise you will get a &#… Read more
Navigating to a specific URL in your Angular PWA if its service worker is not yet registered
If you host an Angular Progressive Web App (PWA) on a web server, you will frequently have URLs that are handled by the Angular router to navigate to specific pages within the app.
However, without the service worker registered, navigation requests are not intercepted and sent to the PWA. In other words, if a user has never ran the PWA yet in his or her browser, a… Read more
Casual Events: a free alternative to Meetup
I have released a new app called Casual Events. Check it out here.
* * *
Of all the degeneracy and anti-social behaviour that social media has wrought, Meetup, while not strictly “social media”, is probably one of the more “social” things to emerge from the Internet. Certainly more social than say Facebook or T… Read more
Ionic 4 + Angular 7: Checking whether the generic parent of a component is the active page
There’s no straightforward way yet in getting the parent component of a component via dependency injection without knowing the type of the parent component. This poses a problem if you want your component consumed by many different types of parent components.
A common scenario where this problem occurs is an Ionic 4 app with several pages that use so… Read more
ngx-translate: translate your JSON file to other languages
For Angular 2/3/4/5/6/7 developers, use this gadget to translate your en.json file.
This is relevant for developers that use @ngx-translate/core similar to the following in app.module:
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
@NgModule({
/* ... */
imports: [
TranslateModule.forRoot({
loader: {
provide: Translat… Read more
Ionic 4 Beta: what it means if your Ionic component is not “hydrated” (visibility: hidden rather than visibility: inherit)
Since documentation and StackOverflow answers are currently sparse for Ionic 4, this tip may hopefully help you save a lot of time debugging if you are transitioning a project from Ionic 3 to Ionic 4.
If you discover one of your components is missing the “hydrated” class, a class programmatically applied to Ionic 4 components at run-time (your … Read more