How To Blur Popup Background in Ionic/Angular

How To Blur Popup Background in Ionic/Angular using manual method:

To achieve this in Ionic 1, you need to set the main div’s class (that is displayed in the background of your popup) to use the blur css class .

CSS:

// css file 

.blur{
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

HTML:

//In your html set the main div of your app to use a dynamic class
 
<div ng-class="blurClass"></div>

JS Controller:


//In JS file set the blur variable to the blur class
 
$scope.blurClass = "blur";

// when done just set the blur to false

$scope.blurClass = false;

How To Open $ionicPopover Popup from Controller

How To Open $ionicPopover from Controller programmatically without a mouse click event:


var self = this; // store reference to 'this' controller object

this.openCustomPopover = function ($event) {

        $event = document.getElementsById('myElementID'); // html element ID 

        $ionicPopover.fromTemplateUrl('popovers/myhtmlpopover.html', {
                scope: $scope
            }).then(function (popover) {
                console.log('in the popover then function');
                self.popover = popover;
                self.popover.show($event);
            });
        }

You can call this function from your controller without a true click event, by faking the $event object.

How to Display and Format Code Snippets on WordPress

How to Display and Format Code Snippets on WordPress ?

What I use is Pretty print, and it’s very simple to setup.

1. Include this script in your header run_prettify.js

2. Start your code with the pre tag

<pre class="prettyprint">
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}
</pre>

More information at https://github.com/google/code-prettify

How to Dynamically Load Dark Mode CSS with JavaScript

How to Dynamically Load Dark Mode CSS in your Website or WebApp (Ionic, React, or Angular):

1. Create the two separete css files, one for dark colors and one for bright
2. Upload those to your server to css folder
3. Use the script example below to load the appropriate css file based on the hours in the day.


function loadcssfile(filename, filetype){
    if (filetype=="css"){ //check filename is an external CSS file
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

var date = new Date();

 if (date.getHours() >= 19 || date.getHours() <= 7) // after 7pm before 7am
	loadcssfile("../css/darkmode.css", "css");
 else
	loadcssfile("../css/lightmode.css", "css");

Don't blind your readers at night -_-

If you want to incorporate sunset and sunrise you can look into Suncal library, but you will have to request user's location which is always rude and not recommended.

How to Fix Your Cast Iron Skillet

Follow these simple steps to restore your iron skillet:

Iron Skillet
Credit: Tsuji/Getty

1. Remove all the rust (duh)

Use fine steel wool to remove the rust. Don’t stop until the skillet returns to raw cast iron.

2. Wash the skillet

Wash the cast iron with warm water and dish soap. Scrub with bristle brush, or mesh sponge.

3. Dry the skillet

Dry the cast iron with a clean towel or paper towels.

4. Cover the pan with a coating of oil

Apply a small amount of cooking oil of your choice to the entire pan, handle included.

5. Bake in the oven at 350°F

Place the cast iron on the top rack of your oven, upside down. Place a sheet of aluminum foil, a pan, or baking sheet on the bottom rack to catch any oil. Bake the pan for one hour.

6. Let the pan cool off

Let cast iron cool before taking it for a spin.

And that is all! You are ready to use your brand new cast iron skillet!

Good luck.

How to Find Visible HTML Element by class in JavaScript

How to Find Visible HTML Element by class in JavaScript?

We can use the same logic jQuery uses with this code:

element.offsetWidth > 0 && element.offsetHeight > 0;

You can simply go through the list of your class elements to find the one currently displayed.

for (var i = 0; i < document.getElementsByClassName('myclass').length; i++) 
{
   if (document.getElementsByClassName('myclass')[i].offsetWidth > 0 &&
       document.getElementsByClassName('myclass')[i].offsetHeight > 0) 
       {
           //found the visible element of class 'myclass'
            break;
       }
}

How to Fix Your Apache setup on macOS Mojave using Brew

Every time Apple releases a major OS it seems to break my web development, so I switched my setup to use Brew which made things even more confusing –at first.

The folder locations might be a little different for you, but the point is: I was editing the wrong file and seeing no results.

Here are a few things to keep in mind when debugging your system issues:

1. There are two instances of Apache if you used brew (one from Apple, and one from Brew), and each is started differently

Brew: sudo brew services restart httpd
macOS: sudo apachectl -k restart

2. This also means I was looking at wrong httpd.conf files, there are multiple ones:

Brew: /usr/local/etc/httpd/httpd.conf
macOS: private/etc/apache2/httpd.conf

3. I also have different installation of php libraries now that I switched to Brew

(installed with brew install php@7.3)

Brew: /usr/local/etc/php/7.3/php.ini
macOS: /Library/Server/Web/Config/php/php.ini

Apple overwrites your httpd.conf file when upgrading the system, but it saves an old version, you just have to rename it.

Great instructions how to setup Apache on Mac using Brew ->
Setup Apache on Mac

Another good article how to Setup apache and php on macOS Mojave -> Apache on Mojave with multiple versions

How to fork and pipe multiple processes on Linux

The C code here is used for reference of how to pipe 3 separate children processes. It can be improved to support a dynamic amount of processes and corresponding pipes and system calls.

// This program is an example of how to run a command such as
// ps aux | grep root | grep sbin
// using C and Unix.
// pipe_example.c

#include 
#include 
#include 

int pid;
int pipe1[2];
int pipe2[2];

void exec1();
void exec2();
void exec3();

int main()
{

	// create pipe1
	if (pipe(pipe1) == -1)
	{
		perror("bad pipe1");
		exit(1);
	}

	// create pipe2
	if (pipe(pipe2) == -1)
	{
		perror("bad pipe2");
		exit(1);
	}

	// fork (ps aux)
	if ((pid = fork()) == -1)
	{
		perror("bad fork1");
		exit(1);
	}
	else if (pid == 0)
	{
		// stdin --> ps --> pipe1
		exec1();
	}
	// parent

	// fork (grep root)
	if ((pid = fork()) == -1)
	{
		perror("bad fork2");
		exit(1);
	}
	else if (pid == 0)
	{
		// pipe1 --> grep --> pipe2
		exec2();
	}
	// parent

	// close unused fds
	close(pipe1[0]);
	close(pipe1[1]);

	// fork (grep sbin)
	if ((pid = fork()) == -1)
	{
		perror("bad fork3");
		exit(1);
	}
	else if (pid == 0)
	{
		// pipe2 --> grep --> stdout
		exec3();
	}
	// parent
}

void exec1()
{
	// input from stdin (already done)
	// output to pipe1
	dup2(pipe1[1], 1);
	// close fds
	close(pipe1[0]);
	close(pipe1[1]);
	// exec
	execlp("ls", "ls", NULL);
	// exec didn't work, exit
	perror("bad exec ls");
	_exit(1);
}

void exec2()
{
	// input from pipe1
	dup2(pipe1[0], 0);
	// output to pipe2
	dup2(pipe2[1], 1);
	// close fds
	close(pipe1[0]);
	close(pipe1[1]);
	close(pipe2[0]);
	close(pipe2[1]);
	// exec
	execlp("grep", "grep", "c", NULL);
	// exec didn't work, exit
	perror("bad exec grep c");
	_exit(1);
}

void exec3()
{
	// input from pipe2
	dup2(pipe2[0], 0);
	// output to stdout (already done)
	// close fds
	close(pipe2[0]);
	close(pipe2[1]);
	// exec
	execlp("grep", "grep", "y", NULL);
	// exec didn't work, exit
	perror("bad exec grep y");
	_exit(1);
}

This code also works on Unix/Mac.
Compile with gcc pipe_example.c -o pipe_example.o
Run with ./pipe_example.o

Ionic HTTP posts don’t work on iOS

I ran into this strange problem today where HTTP requests stopped working on iOS alone. Even though I have the latest Ionic CLI, my project was running Ionic 1 still.

To solve this http error I removed this plugin:

ionic cordova plugin remove cordova-plugin-ionic-webview

And added this to config.xml:

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

Probably a bit unsafe to allow everything but had to get it working again.
If this doesn’t work for you try to also remove the iOS platform and re-add it.

good luck~

How To Embed and Open PDF files in Ionic App on iOS

This is a solution for storing and opening pdf files inside your app for offline use.

  cordova.plugins.fileOpener2.open(
        cordova.file.applicationDirectory + 'www/img/sample.pdf',
        'application/pdf',
        {
          error: function (e) {
            console.log('Error status:'+e.status+'- Error message:'+ e.message);
          },
          success: function () {
            console.log('file opened successfully');
          }
        }
      );

Opening the pdf should be fairly simple using the cordova.plugins.fileOpener2 plugin, but I ran into a strange issue because my app name in the config.xml contained a space such as: <name>My App</name>. This caused the iOS to misread the file path. Removing this space in the app name fixed the file path on iOS.

I put the sample pdf doc in the ionic project under my images folder www/img/sample.pdf.

Good luck!