Essentials Archives | portalZINE NMN | Development meets Creativity

18. May 2019

Screenshot Service with Node.js

Manet is a REST API server which allows capturing screenshots of websites using various parameters.

The Node.js server can use SlimerJS or PhantomJS as headless browser engines.

I have build similar with CasperJS, but this is far better for those that want a simple straight solution.

@GitHub

5. February 2019

SVG Cleaner – streamline your vectors

svgcleaner has been around for some time and is constantly being optimized! It helps you clean up your SVG files, keeping them free from unnecessary data.

Temporary data used by the vector editing application
Non-optimal SVG structure representation
Unused and invisible graphical elements

Github project.

The GUI application adds batch file processing, decompression & compression and parallel cleaning jobs, GUI application.

10. February 2018

IMAP Wrapper client for PHP & Default IMAP Search Criteria

There are many variations of these out there, SSilence/php-imap-client is a lib with a nice set of methods, clean integration and pretty good documentation.
Adding it to my goto essentials !

$mailbox = 'my.imapserver.com';
$username = 'username';
$password = 'secret';
$encryption = Imap::ENCRYPT_SSL;

// Open connection
try{
    $imap = new Imap($mailbox, $username, $password, $encryption);
    // You can also check out example-connect.php for more connection options

}catch (ImapClientException $error){
    echo $error->getMessage().PHP_EOL;
    die(); // Oh no :( we failed
}

// Get all folders as array of strings
$folders = $imap->getFolders();
foreach($folders as $folder) {
    echo $folder;
}

// Select the folder Inbox
$imap->selectFolder('INBOX');

// Count the messages in current folder
$overallMessages = $imap->countMessages();
$unreadMessages = $imap->countUnreadMessages();

$mailbox = 'my.imapserver.com';

$username = 'username';

$password = 'secret';

$encryption = Imap::ENCRYPT_SSL;

// Open connection

try{

$imap = new Imap($mailbox, $username, $password, $encryption);

// You can also check out example-connect.php for more connection options

}catch (ImapClientException $error){

echo $error->getMessage().PHP_EOL;

die(); // Oh no :( we failed

}

// Get all folders as array of strings

$folders = $imap->getFolders();

foreach($folders as $folder) {

echo $folder;

}

// Select the folder Inbox

$imap->selectFolder('INBOX');

// Count the messages in current folder

$overallMessages = $imap->countMessages();

$unreadMessages = $imap->countUnreadMessages();

GitHub

Enjoy coding …

Default IMAP Search Criteria

ALL
      All messages in the mailbox; the default initial key for
	ANDing.

ANSWERED
	Messages with the \Answered flag set.

BCC 
	Messages that contain the specified string in the envelope
	structure's BCC field.

BEFORE 
	Messages whose internal date (disregarding time and timezone)
	is earlier than the specified date.

BODY 
	Messages that contain the specified string in the body of the
	message.

CC 
	Messages that contain the specified string in the envelope
	structure's CC field.

DELETED
	Messages with the \Deleted flag set.

DRAFT
	Messages with the \Draft flag set.

FLAGGED
	Messages with the \Flagged flag set.

FROM 
	Messages that contain the specified string in the envelope
	structure's FROM field.

HEADER  
	Messages that have a header with the specified field-name (as
	defined in [RFC-2822]) and that contains the specified string
	in the text of the header (what comes after the colon).  If the
	string to search is zero-length, this matches all messages that
	have a header line with the specified field-name regardless of
	the contents.

KEYWORD 
	Messages with the specified keyword flag set.

LARGER 
	Messages with an [RFC-2822] size larger than the specified
	number of octets.

NEW
	Messages that have the \Recent flag set but not the \Seen flag.
	This is functionally equivalent to "(RECENT UNSEEN)".

NOT 
	Messages that do not match the specified search key.

OLD
	Messages that do not have the \Recent flag set.  This is
	functionally equivalent to "NOT RECENT" (as opposed to "NOT
	NEW").

ON 
	Messages whose internal date (disregarding time and timezone)
	is within the specified date.

OR  
	Messages that match either search key.

RECENT
	Messages that have the \Recent flag set.

SEEN
	Messages that have the \Seen flag set.

SENTBEFORE 
	Messages whose [RFC-2822] Date: header (disregarding time and
	timezone) is earlier than the specified date.

SENTON 
	Messages whose [RFC-2822] Date: header (disregarding time and
	timezone) is within the specified date.

SENTSINCE 
	Messages whose [RFC-2822] Date: header (disregarding time and
	timezone) is within or later than the specified date.

SINCE 
	Messages whose internal date (disregarding time and timezone)
	is within or later than the specified date.

SMALLER 
	Messages with an [RFC-2822] size smaller than the specified
	number of octets.

SUBJECT 
	Messages that contain the specified string in the envelope
	structure's SUBJECT field.

TEXT 
	Messages that contain the specified string in the header or
	body of the message.

TO 
	Messages that contain the specified string in the envelope
	structure's TO field.

UID 
	Messages with unique identifiers corresponding to the specified
	unique identifier set.  Sequence set ranges are permitted.

UNANSWERED
	Messages that do not have the \Answered flag set.

UNDELETED
	Messages that do not have the \Deleted flag set.

UNDRAFT
	Messages that do not have the \Draft flag set.

UNFLAGGED
	Messages that do not have the \Flagged flag set.

UNKEYWORD 
	Messages that do not have the specified keyword flag set.

UNSEEN
	Messages that do not have the \Seen flag set.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

ALL

All messages in the mailbox; the default initial key for

ANDing.

ANSWERED

Messages with the \Answered flag set.

BCC

Messages that contain the specified string in the envelope

structure's BCC field.

BEFORE

Messages whose internal date (disregarding time and timezone)

is earlier than the specified date.

BODY

Messages that contain the specified string in the body of the

message.

Messages that contain the specified string in the envelope

structure's CC field.

DELETED

Messages with the \Deleted flag set.

DRAFT

Messages with the \Draft flag set.

FLAGGED

Messages with the \Flagged flag set.

FROM

Messages that contain the specified string in the envelope

structure's FROM field.

HEADER

Messages that have a header with the specified field-name (as

defined in [RFC-2822]) and that contains the specified string

in the text of the header (what comes after the colon). If the

string to search is zero-length, this matches all messages that

have a header line with the specified field-name regardless of

the contents.

KEYWORD

Messages with the specified keyword flag set.

LARGER

Messages with an [RFC-2822] size larger than the specified

number of octets.

NEW

Messages that have the \Recent flag set but not the \Seen flag.

This is functionally equivalent to "(RECENT UNSEEN)".

NOT

Messages that do not match the specified search key.

OLD

Messages that do not have the \Recent flag set. This is

functionally equivalent to "NOT RECENT" (as opposed to "NOT

NEW").

Messages whose internal date (disregarding time and timezone)

is within the specified date.

Messages that match either search key.

RECENT

Messages that have the \Recent flag set.

SEEN

Messages that have the \Seen flag set.

SENTBEFORE

Messages whose [RFC-2822] Date: header (disregarding time and

timezone) is earlier than the specified date.

SENTON

Messages whose [RFC-2822] Date: header (disregarding time and

timezone) is within the specified date.

SENTSINCE

Messages whose [RFC-2822] Date: header (disregarding time and

timezone) is within or later than the specified date.

SINCE

Messages whose internal date (disregarding time and timezone)

is within or later than the specified date.

SMALLER

Messages with an [RFC-2822] size smaller than the specified

number of octets.

SUBJECT

Messages that contain the specified string in the envelope

structure's SUBJECT field.

TEXT

Messages that contain the specified string in the header or

body of the message.

Messages that contain the specified string in the envelope

structure's TO field.

UID

Messages with unique identifiers corresponding to the specified

unique identifier set. Sequence set ranges are permitted.

UNANSWERED

Messages that do not have the \Answered flag set.

UNDELETED

Messages that do not have the \Deleted flag set.

UNDRAFT

Messages that do not have the \Draft flag set.

UNFLAGGED

Messages that do not have the \Flagged flag set.

UNKEYWORD

Messages that do not have the specified keyword flag set.

UNSEEN

Messages that do not have the \Seen flag set.

10. February 2018

Screen Scraping with Goutte

We all have been in situations were we need content or information from a connected website, but have no access to a REST Api or any other backend feed.

In these cases screen scraping is the only option to get needed information to finalize an integration. You can do that directly in CURL, but that can be tedious. Far easier to use a nicely packaged solution that combines a component that simulates web browser behavior and a component that eases DOM navigation for HTML and XML documents. Meet Goutte!

STEP 0

Install via composer.

composer require fabpot/goutte

1	composer require fabpot/goutte

STEP 1

$client = new Client();
$crawler = $client->request('GET', 'https://www.page/login.php');

// select the form and fill in some values
$form = $crawler->selectButton('Login')->form();
$form['f_loginname'] = 'HelloMe';
$form['f_loginpass'] = 'securepass';

// submit that form
$crawler = $client->submit($form);

// go to next page    
$crawler = $client->request('GET', 'https://www.page.de/overview.php');

$client = new Client();

$crawler = $client->request('GET', 'https://www.page/login.php');

// select the form and fill in some values

$form = $crawler->selectButton('Login')->form();

$form['f_loginname'] = 'HelloMe';

$form['f_loginpass'] = 'securepass';

// submit that form

$crawler = $client->submit($form);

// go to next page

$crawler = $client->request('GET', 'https://www.page.de/overview.php');

STEP 2

Get the data you need.

// loop over html and filter out what you need

$crawler->filter('table.clients tr')->each(function ($node) {

  $node->filter('td')->each(function ($sub_node) {
    echo $sub_node->html();
  }
}

// loop over html and filter out what you need

$crawler->filter('table.clients tr')->each(function ($node) {

$node->filter('td')->each(function ($sub_node) {

echo $sub_node->html();

}

Goutte @ Github
BrowserKit Documentation
DOM Crawler Documentation

Enjoy coding …

27. January 2018

Never store sensitive credentials in your code again – PHP dotenv

PHP dotenv loads environment variables from .env to getenv(), $_ENV and $_SERVER automagically.

You should never store sensitive credentials in your code. Anything that is likely to change between deployment environments – such as database credentials or credentials for 3rd party services – should be extracted from the code into environment variables.

Add your application configuration to a .env file in the root of your project. Make sure the .env file is added to your .gitignore so it is not being checked-in.

DEFINE

S3_BUCKET="dotenv"
SECRET_KEY="souper_seekret_key"

1 2	S3_BUCKET="dotenv" SECRET_KEY="souper_seekret_key"

LOAD

$dotenv = new Dotenv\Dotenv(__DIR__);
$dotenv->load();

// OR WITH filename

$dotenv = new Dotenv\Dotenv(__DIR__, 'myconfig');
$dotenv->load();

$dotenv = new Dotenv\Dotenv(__DIR__);

$dotenv->load();

// OR WITH filename

$dotenv = new Dotenv\Dotenv(__DIR__, 'myconfig');

$dotenv->load();

ACCESS

$s3_bucket = getenv('S3_BUCKET');
$s3_bucket = $_ENV['S3_BUCKET'];
$s3_bucket = $_SERVER['S3_BUCKET'];

$s3_bucket = getenv('S3_BUCKET');

$s3_bucket = $_ENV['S3_BUCKET'];

$s3_bucket = $_SERVER['S3_BUCKET'];

GitHub

Enjoy coding and be secure …

10. January 2017

Paw – essential HTTP client to test your APIs

Paw is a full-featured HTTP client that lets you test the APIs you build or consume. It has a beautiful native OS X interface to compose requests, inspect server responses and generate client code out-of-the-box.

This is one of my go-to tools, when test-driving my API endpoints.

Paw for Mac

9. January 2017

Importing CSV files with HTML5 and Papa Parse!

Papa Parse is the powerful, in-browser CSV parser for big boys and girls :)
If you do need easy CSV parsing and conversion back to CSV, take a look at it!

// Parse CSV string
var data = Papa.parse(csv);

// Convert back to CSV
var csv = Papa.unparse(data);

// Parse local CSV file
Papa.parse(file, {
	complete: function(results) {
		console.log("Finished:", results.data);
	}
});

// Stream big file in worker thread
Papa.parse(bigFile, {
	worker: true,
	step: function(results) {
		console.log("Row:", results.data);
	}
});

// Parse CSV string

var data = Papa.parse(csv);

// Convert back to CSV

var csv = Papa.unparse(data);

// Parse local CSV file

Papa.parse(file, {

complete: function(results) {

console.log("Finished:", results.data);

}

});

// Stream big file in worker thread

Papa.parse(bigFile, {

worker: true,

step: function(results) {

console.log("Row:", results.data);

}

});

SIMPLE TESTDRIVE

 <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />

1	<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />

document.getElementById('txtFileUpload').addEventListener('change', upload, false);

 function upload(evt) {
  
	var data = null;
	var file = evt.target.files[0];
	var reader = new FileReader();
	reader.readAsText(file);
	reader.onload = function(event) {
		var csvData = event.target.result;
		
		 var data = Papa.parse(csvData, {header : true});
		
		console.log(data);
		
	};
	reader.onerror = function() {
		alert('Unable to read ' + file.fileName);
	};

}

document.getElementById('txtFileUpload').addEventListener('change', upload, false);

function upload(evt) {

var data = null;

var file = evt.target.files[0];

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function(event) {

var csvData = event.target.result;

var data = Papa.parse(csvData, {header : true});

console.log(data);

};

reader.onerror = function() {

alert('Unable to read ' + file.fileName);

};

}

Papa Parse @ GitHUB

28. August 2016

Use a Koala to compile Less, Sass, Compass and CoffeeScript

“Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.”

Koala / GitHub

20. November 2015

My Javascript Stack

Some time ago I said: “My perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony”.

Here is a list of some of my core components, that I use in combination or standalone.

CORE

jQuery – jquery.com
Underscore – underscorejs.org
Directives – github.com/mennovanslooten/jquery.directive.js

LAYOUT

Bootstrap – getbootstrap.com

TEMPLATING

jQuery loadTemplate – github.com/codepb/jquery-template
OR
jsViews / jsRender – jsviews.com/#jsrender

OBSERVABLES

jsViews Observable – jsviews.com/#jsoapi

ROUTER

Director – github.com/flatiron/director

STORAGE

simpleStorage – github.com/andris9/simpleStorage

DEPENDENCY MANAGER

RequireJS – requirejs.org
jQuery Tweak: If you have already loaded jQuery before RequireJS, you can not use define([“jquery”], …) in your module defines. Add this to your main RequireJS config before doing anything else …
define('jquery', [], function() { return jQuery; });
1
2
3
define('jquery', [], function() {
return jQuery;
});
NOW you can live happily ever after :)
OR
Loadrunner – github.com/danwrong/loadrunner

This is basically the core stack that I use to build out ideas :) While Angular is always an option, the above satisfies most of all needs and is often far slimmer. The rest depends on how you organize your code yourself, but at least you are not forced into fixed structures ;)

“

11. May 2015

Conditional Tags for Menus & Widgets

Conditional Tags are a powerful thing in WordPress and especially handy to show or hide things.

“The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. ”

Two plugins are part of my essentials, that utilize the Conditional Tags:

Widget Logic
“This plugin gives every widget an extra control field called “Widget logic” that lets you control the pages that the widget will appear on. The text field lets you use WP’s Conditional Tags, or any general PHP code.”
Menu Item Visibility Control
“Using this plugin you can use WordPress Conditional Tags to enable or disable menu items on the front-end. It works like ‘Widget Logic’ but for menu items.”

You can easily define your own Conditional Tags in your functions.php or plugin.