Posts for: #Development

Amp It Up

#development  #frontend  #Google 

Lúcio, a character from Overwatch

has this skill where he speeds himself and everyone around him up, Google AMP tries to do this as well.

But while the speed goes up, there are some down sides as well.

AMP aims for mobile websites where lower speeds and bandwidths makes websites feel slow which raises the website’s bounce rate.

While there are certain restrictions to AMP, like

  • no JavaScript (which might be confusing at first)
  • stylings in the page’s head or inline
  • no more than 50kB of styling

it also introduces some other problems to the (new) battlefield of “my customer is able to measure my website’s speed, halp”.

Read more

Self Hosted Mail Server

#development  #mail  #security  #self-hosted 

Here we go again, running our own services like a boss.I’ve tried out some mail server solutions namely docker-mailserver and citadel.

In the following I want to name and discuss features, set-up procedures and cons.

Citadel

Is easy to set up because it comes with its own installer, completely handling software installation and filesystem tasks for you.

It also has an interactive graphical installation walking you through the setup process, which makes this process even faster.

Read more

A Standard Htaccess Everyone Should Consider Using

#htaccess  #apache  #development  #security 

Here is a default .htaccess with gzip compression and everything:

Also see my article about finding the htpasswd location.

#AuthType Basic
#AuthName "Password Protected Area"
#AuthUserFile /path/to/.htpasswd
#Require valid-user

<IfModule mod_deflate.c>
	# Force compression for mangled `Accept-Encoding` request headers
	<IfModule mod_setenvif.c>
		<IfModule mod_headers.c>
			SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
			RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
		</IfModule>
	</IfModule>

	# Compress all output labeled with one of the following media types.
	#
	# (!) For Apache versions below version 2.3.7 you don't need to
	# enable `mod_filter` and can remove the `<IfModule mod_filter.c>`
	# and `</IfModule>` lines as `AddOutputFilterByType` is still in
	# the core directives.
	#
	# https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype

	<IfModule mod_filter.c>
		AddOutputFilterByType DEFLATE application/atom+xml \
			application/javascript \
			application/json \
			application/ld+json \
			application/manifest+json \
			application/rdf+xml \
			application/rss+xml \
			application/schema+json \
			application/vnd.geo+json \
			application/vnd.ms-fontobject \
			application/x-font-ttf \
			application/x-javascript \
			application/x-web-app-manifest+json \
			application/xhtml+xml \
			application/xml \
			font/eot \
			font/opentype \
			image/bmp \
			image/svg+xml \
			image/vnd.microsoft.icon \
			image/x-icon \
			text/cache-manifest \
			text/css \
			text/html \
			text/javascript \
			text/plain \
			text/vcard \
			text/vnd.rim.location.xloc \
			text/vtt \
			text/x-component \
			text/x-cross-domain-policy \
			text/xml
	</IfModule>

	<IfModule mod_mime.c>
		AddEncoding gzip              svgz
	</IfModule>
</IfModule>

### Begin: Browser caching of resource files ###
# This affects Frontend and Backend and increases performance.
<IfModule mod_expires.c>

	ExpiresActive on
	ExpiresDefault                                      "access plus 1 month"

	ExpiresByType text/css                              "access plus 1 year"

	ExpiresByType application/json                      "access plus 0 seconds"
	ExpiresByType application/ld+json                   "access plus 0 seconds"
	ExpiresByType application/schema+json               "access plus 0 seconds"
	ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
	ExpiresByType application/xml                       "access plus 0 seconds"
	ExpiresByType text/xml                              "access plus 0 seconds"

	ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
	ExpiresByType image/x-icon                          "access plus 1 week"

	ExpiresByType text/x-component                      "access plus 1 month"

	ExpiresByType text/html                             "access plus 0 seconds"

	ExpiresByType application/javascript                "access plus 1 year"
	ExpiresByType application/x-javascript              "access plus 1 year"
	ExpiresByType text/javascript                       "access plus 1 year"

	ExpiresByType application/manifest+json             "access plus 1 week"
	ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
	ExpiresByType text/cache-manifest                   "access plus 0 seconds"

	ExpiresByType audio/ogg                             "access plus 1 month"
	ExpiresByType image/bmp                             "access plus 1 month"
	ExpiresByType image/gif                             "access plus 1 month"
	ExpiresByType image/jpeg                            "access plus 1 month"
	ExpiresByType image/png                             "access plus 1 month"
	ExpiresByType image/svg+xml                         "access plus 1 month"
	ExpiresByType image/webp                            "access plus 1 month"
	ExpiresByType video/mp4                             "access plus 1 month"
	ExpiresByType video/ogg                             "access plus 1 month"
	ExpiresByType video/webm                            "access plus 1 month"

	ExpiresByType application/atom+xml                  "access plus 1 hour"
	ExpiresByType application/rdf+xml                   "access plus 1 hour"
	ExpiresByType application/rss+xml                   "access plus 1 hour"

	ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
	ExpiresByType font/eot                              "access plus 1 month"
	ExpiresByType font/opentype                         "access plus 1 month"
	ExpiresByType application/x-font-ttf                "access plus 1 month"
	ExpiresByType application/font-woff                 "access plus 1 month"
	ExpiresByType application/x-font-woff               "access plus 1 month"
	ExpiresByType font/woff                             "access plus 1 month"
	ExpiresByType application/font-woff2                "access plus 1 month"

	ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

</IfModule>
### End: Browser caching of resource files ###

### Begin: MIME types ###
# Proper MIME types for all files
<IfModule mod_mime.c>
	# Data interchange
	AddType application/atom+xml                        atom
	AddType application/json                            json map topojson
	AddType application/ld+json                         jsonld
	AddType application/rss+xml                         rss
	AddType application/vnd.geo+json                    geojson
	AddType application/xml                             rdf xml

	# JavaScript
	AddType application/javascript                      js

	# Manifest files
	AddType application/manifest+json                   webmanifest
	AddType application/x-web-app-manifest+json         webapp
	AddType text/cache-manifest                         appcache

	# Media files
	AddType audio/mp4                                   f4a f4b m4a
	AddType audio/ogg                                   oga ogg opus
	AddType image/bmp                                   bmp
	AddType image/svg+xml                               svg svgz
	AddType image/webp                                  webp
	AddType video/mp4                                   f4v f4p m4v mp4
	AddType video/ogg                                   ogv
	AddType video/webm                                  webm
	AddType video/x-flv                                 flv
	AddType image/x-icon                                cur ico

	# Web fonts
	AddType application/font-woff                       woff
	AddType application/font-woff2                      woff2
	AddType application/vnd.ms-fontobject               eot
	AddType application/x-font-ttf                      ttc ttf
	AddType font/opentype                               otf

	# Other
	AddType application/octet-stream                    safariextz
	AddType application/x-bb-appworld                   bbaw
	AddType application/x-chrome-extension              crx
	AddType application/x-opera-extension               oex
	AddType application/x-xpinstall                     xpi
	AddType text/vcard                                  vcard vcf
	AddType text/vnd.rim.location.xloc                  xloc
	AddType text/vtt                                    vtt
	AddType text/x-component                            htc
</IfModule>

# UTF-8 encoding
AddDefaultCharset utf-8
<IfModule mod_mime.c>
	AddCharset utf-8 .atom .css .js .json .manifest .rdf .rss .vtt .webapp .webmanifest .xml
</IfModule>

### End: MIME types ###

# Send the CORS header for images when browsers request it.
<IfModule mod_setenvif.c>
	<IfModule mod_headers.c>
		<FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
			SetEnvIf Origin ":" IS_CORS
			Header set Access-Control-Allow-Origin "*" env=IS_CORS
		</FilesMatch>
	</IfModule>
</IfModule>

# Allow cross-origin access to web fonts.
<IfModule mod_headers.c>
	<FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
		Header set Access-Control-Allow-Origin "*"
	</FilesMatch>
</IfModule>

### End: Cross Origin ###

### Begin: Miscellaneous ###
# 404 error prevention for non-existing redirected folders
Options -MultiViews

# Make sure that directory listings are disabled.
<IfModule mod_autoindex.c>
	Options -Indexes
</IfModule>

<IfModule mod_headers.c>
	# Force IE to render pages in the highest available mode
	Header set X-UA-Compatible "IE=edge"
	<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svgz?|ttf|vcf|webapp|webm|webp|woff2?|xml|xpi)$">
		Header unset X-UA-Compatible
	</FilesMatch>

	# Reducing MIME type security risks
	Header set X-Content-Type-Options "nosniff"
</IfModule>

# ETag removal
<IfModule mod_headers.c>
	Header unset ETag
</IfModule>
FileETag None

### End: Miscellaneous ###
Read more

Find the Htaccess Location

#htaccess  #apache  #development  #DevOps  #hosting  #PHP 

Especially when working on foreign systems/servers it might be hard to determine where the .htpasswd file would go if you need an access restricted area while developing the website without taking the server offline.

Here is a short PHP script on how to find it:

*Info: Save this as findHtPasswd.php and run it on the host like https://this.host.com/findHtPasswd.php, copy the code and create a simple .htaccess file pointing to the correct location.

Read more