Essentials Archives | portalZINE NMN | Development meets Creativity

30. May 2019

Have you heard of GatsbyJS?

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

What they have to say …

Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.
Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast — no manual tuning required.
Host at Scale for Pennies. Gatsby sites don’t require servers so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on services like GitHub Pages and Netlify.

What I have to say …

While researching some popular static site generation tools, GatsbyJS comes up often. I have played with NuxtJS and Hugo in the past, but what I REALLY like about GatsbyJS is the plugin / modular system. You can build your website with plain-old React and CSS styles, but make your development more efficient by adding node_modules.

Also being able to import any data source with ease, using GraphQL, is amazing. And when it comes to content management, you can easily hook a headless WordPress or Drupal setup into the mix and consume their REST APIs :)

I am not switching my own website to GatsbyJS anytime soon, but its another tool in my toolbox for future project consideration !

There are many tutorials on Youtube about getting started, maybe something to consider for the next freetime testdrive ;) Enjoy …

GatsbyJS @ Github

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 ;)