Dmitry Yakovlev dimayakovlev

Creating URL slugs properly in PHP (including transliteration for UTF-8)

The point to use a slug (semantic URL) besides of improve the SEO of your articles is to prevent that the user, at the creation of for example an article, it uses special characters that aren't allowed in a URL, appropiate the usage etc. What target usage means, is context dependent.

In this article, you'll learn how to slugify a string in PHP properly, including (or not) support (conversion) for cyrilic and special latin characters.

Slugify in PHP

The following function exposes a simple way to convert text into a valid slug:

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Git Commit Best Practices

Basic Rules

Commit Related Changes

A commit should be a wrapper for related changes. For example, fixing two different bugs should produce two separate commits. Small commits make it easier for other developers to understand the changes and roll them back if something went wrong. With tools like the staging area and the ability to stage only parts of a file, Git makes it easy to create very granular commits.

Commit Often

Committing often keeps your commits small and, again, helps you commit only related changes. Moreover, it allows you to share your code more frequently with others. That way it‘s easier for everyone to integrate changes regularly and avoid having merge conflicts. Having large commits and sharing them infrequently, in contrast, makes it hard to solve conflicts.

	<?php
	/**
	* Get browser language, given an array of avalaible languages.
	*
	* @param [array] $availableLanguages Avalaible languages for the site
	* @param [string] $default Default language for the site
	* @return [string] Language code/prefix
	*/
	function get_browser_language( $available = [], $default = 'en' ) {
	if ( isset( $_SERVER[ 'HTTP_ACCEPT_LANGUAGE' ] ) ) {

	/* ----------------------------------------------------------------------------------------------------

	Super Form Reset

	A couple of things to watch out for:

	- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
	- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
	- You NEED to set the font-size and family on all form elements
	- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Title</title>
	<link href="stylesheets/main.css" rel="stylesheet">
	</head>
	<body>
	<header>
	<h1>Header</h1>

	<?php
	/**
	* GS 'Routing' demonstration module
	*
	* Demonstrates how to use "data_index" to modify the page data
	* and how to use url segments to control process flows in your
	* scripts.
	*
	* Required:
	* --------------------------------------------------------------

	/*
	https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/

	You can copy paste this code in your console on smashingmagazine.com
	in order to have cross-fade transition when change page.
	*/

	var cache = {};
	function loadPage(url) {
	if (cache[url]) {

	<!-- I got these buttons from simplesharebuttons.com -->
	<div id="share-buttons">

	<!-- Buffer -->
	<a href="https://bufferapp.com/add?url=https://simplesharebuttons.com&text=Simple Share Buttons" target="_blank">
	<img src="https://simplesharebuttons.com/images/somacro/buffer.png" alt="Buffer" />
	</a>

	<!-- Digg -->
	<a href="http://www.digg.com/submit?url=https://simplesharebuttons.com" target="_blank">

	$(window).scroll(function() {

	var st = $(this).scrollTop() /10;

	$(".object").css({
	"transform" : "translate3d(0px, " + st + "%, .01px)",
	"-webkit-transform" : "translate3d(0px, " + st + "%, .01px)"
	});

	});