Category: Web Development

How to enable WordPress Debug Mode in 60 seconds

kyriakos

If you are a WordPress developer or if you just installed a misbehaving plugin you will need to enable WordPress’s debug mode in order to figure out what made your site get into the dreaded blank white page (unlike Windows WordPress has a White-Screen-Of-Death). So here’s the quick step-by-step guide to get you going:

Step by Step

  1. Connect via FTP to your site (use FileZilla which is free, if you don’t have an FTP client already installed) or just open your text editor if you are running local.  (15 seconds)
  2. Browse to WordPress home directory, and open wp-config.php for editing. (10 seconds)
  3. Hit Ctrl-Endor scroll to the bottom of the document, locate the line that says define(‘WP_DEBUG’, false);  – you can find it a few lines before the end of the file. (15 seconds)
  4. Change false to true and Save. (15 seconds)
  5. Refresh the page and you should be able to see the errors.  (5 seconds)

 

Total: 60 seconds.

 

Its recommended you don’t run this option on a live production site but if you really must, make sure you turn if back off when you are done. Alternatively you can enable the debug log to be sent to a file instead of the browser by also adding the following line in your config file:

define(‘WP_DEBUG_LOG’, true);

This will cause the error messages to be saved in a file called debug.log in the wp-content sub-folder of your installation. Again make sure this file is protected because by default anyone from the web can access it in the particular folder.

 

And if my instructions are not detailed enough you can look at the long version on the WordPress codex.

WooCommerce PDF Product Catalog Plugin v1.0.8

kyriakos

Has only been one and a half months since I published the PDF Catalog for WooCommerce plugin on CodeCanyon and since then I released 5 versions. Most feature additions came after requests from users who purchased the plugin.

The latest release 1.0.8 which went online this week and includes:

  • Support for high-res JPEG image embedding (the site’s admin can choose the resolution of images used based on a predefined list). Also added a slider to choose the JPEG compression quality coefficient.
  • User role restrictions – a highly requested feature which allows the admin to choose which WordPress User Roles have access to download the store catalog.
  • Enabled PDF Subsetting in TCPDF. The admin can still pick to disable it. Essentially this only embeds the required ligatures from the font in the PDF file. For UTF8 encoded catalogs cuts down the file size by about 300k depending on language and amount of text.
  • Ability to Hide ‘HIDDEN’ products. As weird as this might sound some users wanted to be able to see products in PDF for which they set their visibility to Hidden in the Product editor.

The plugin can still be downloaded from here.

Typescript compiler got a re-write and is now 5 times faster

kyriakos

According to Typescript’s blog on MSDN, they’ve rewritten its compiler from scratch and surprisingly also moved the compiler’s repository to GitHub. The new version which from a feature point of view identical to the previous version, generates Javascript code 5 times faster. For those who don’t know what Typescript is, its an attempt by Microsoft to make Javascript better, especially for large scale projects. Technically you can write pure Javascript and the compiler will just let is pass through but it will enforce variable types and declarations. So if you are already familiar with Javascript, it just ads a safety net layer for data types and some utility syntax for writing human-readable object oriented Javascript.

I still haven’t tested the new version but I can assure you the original one is noticeably slow. Running the compiler automatically through PHPStorm I found myself many times saving the .ts file then switching to the browser to test only to realize that compilation is still not done and had to switch back to confirm its done before re-refreshing the page. Hopefully this is now a thing of the past.

The announcement can be found here.

Recent Good CSS / Javascript Videos (July 2014)

kyriakos

More JSConf 2014 US edition were posted online a few hours ago. I didn’t have the time to watch them all yet but I’ll keep this post updated as I watch them.

 

Mark DiMarco: User Interface Algorithms

 

A very good talk about two algorithms and how they can be used in Web UI (he also makes some pretty funny Game of Thrones jokes). The talk focuses on two cases, one is how to increase the hit-state of elements on the page using Voronoi (quite complicated algorithm, but thankfully its already implemented in Javascript in D3, find out about it here). The other case is about menus with sub-menus, explains how to solve the problem we all faced in the past, having to move the mouse precisely horizontally on the popup sub-menu in order for the sub-menu to remain open. The solution is not that complicated and according to the video is used by Amazon’s mega menu. You can find a good explanation by Ben Kamens here.

Angelina Fabbro: CSS In Your Pocket – Mobile CSS Tips From The Trenches

 

Skip the first 4-5 (mostly introductory) minutes to get to the juicy stuff. Some good points about mobile web performance and compatibility are raised but the most interesting parts are about the cutting edge updates in Firefox DevTools including the CSS Coverage Report (which works for multiple pages showing you what entries in your stylesheets are unused). There is more information about it on https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage”>MDN here. Currently only works on Nightly builds of Firefox but hopefully will make it to Aurora soon (the channel I use).

 

G C Marty: Play DVDs in JavaScript for the sake of interoperability

 

G C Marty explains his quest to play his huge collection of DVDs on his mobile phone directly in the browser. His aim was to replicate the full DVD experience including menus, chapters, multiple angles, audio tracks and subtitles. He tried several methods, including using a proxy server to decode the video in real time and send it to the mobile browser via WebRTC which failed with sync issues and high hardware requirements and pre-converting DVDs into WebM using a Raspberry Pi running nginx to do the streaming. He released his project in open source on github.

PDF Product Catalog for WooCommerce – my new plugin

kyriakos

The idea for this plugin came to me after a request from a client for whom I developed a WordPress / WooCommerce based online store. The client wanted to have downloadable price lists in PDF format for each product category. His original plan was to generate the PDFs manually offline and upload them to the site but obviously there was a better way. So after doing some research and tests on some PHP classes for generating PDF files I made a polished WordPress plugin and published to CodeCanyon.

At the time of writing it has the following features:

  • Widget for PDF Download Buttons
  • 5 PDF Catalog Templates included.
  • Create your own PDF templates in HTML.
  • Generate per Category PDF and/or Complete Store catalog.
  • 4 pages of admin options to fine tune your catalog content and design.
  • Tested with stores with more than 1000 products.
  • Pure PHP Solution (no need to install any plugins / does not use external services).
  • Hide / Show catalog elements (e.g. SKU, descriptions, prices).
  • Upload your own logo.
  • Support for UTF8 catalogs (non-latin characters in PDF)
  • Customize catalog text.
  • Include product images in catalog.
  • Support for product variations.
  • Customize colors from Admin Panel.
  • Hyperlinks in PDF for each product
  • Caching for increased performance (catalogs are only generated once)
  • Automatic page numbering.
  • Header / Footer on each page.
  • Send PDF to browser or force download option.
  • Customise which categories appear in catalogs.
  • Full Documentation included.
  • Tested with WordPress 3.8, 3.8, 3.9 and WooCommerce 2.1.x

Thanks to comments I received on CodeCanyon I got ideas for other features, especially integration with other WooCommerce plugins which hopefully I’ll manage to implement soon.

The plugin can be purchased here for 15USD.

Google Web Designer – my take

kyriakos

Google Web Designer

Yesterday Google released a new design tool going by the name ‘Google Web Designer’. I installed it and played around a bit. It seems like they got carried away with the title cause it certainly isn’t a web design tool in the sense of Dreamweaver, its more of an animated banner creation tool. Its output is an ‘HTML5’ document (sorry for the cliche) and uses both Canvas 2D and 3D elements to create banners in a user interface that reminds me of Adobe’s Flash (still have nightmares of that) and Adobe’s new animation tool Edge Animate. If you ignore this app’s bad title, its a pretty decent tool for making banners for AdSense or other purposes. The code produced by the tool is not the leanest but works on modern browsers, and even on mobile. To see the extend of how much overhead is included check out this gist on github; the author created a new document, drew a rectangle with a sold color and saved and that was the result. This means that if you are making a very simple banner, the CSS and Javascript overhead can be substantial (consider that each banner on a page will be running on its own IFrame); on the bright site it can do things without coding that you’d normally need flash for without losing mobile compatibility. Moreover it allows you to create responsive ads; a feature that Google’s own AdSense product now supports (after many years of publisher requests).

Even if it’s destined for ads, it doesn’t mean you can’t use it to put together a single page website, but lets hope that Google Web Designer won’t be the beginning of another ‘Flash’-like era where Canvas is used instead of the Flash container plugin leading to bloated, hard to maintain, and non-indexable websites all over again.

You can have a look of how it works here:

and download it for free here:

PhpStorm – an IDE worth its name

kyriakos

I recently switched to JetBrains PhpStorm as my main IDE for PHP/HTML/JS/CSS development. I tried many solutions in the past such as Dreamweaver (please don’t try it), NetBeans, Aptana, Eclipse PDT, before settling with Zend Studio for quite sometime and finally a couple of months ago I gave ZendStudio the boot and switched to PhpStorm. I am currently using version 6.0 from the Early Access Program (the current stable is version 5) – and I am planning to buy it once 6.0 final is out. Read More

FineUploader: A well-thought HTML5 file upload component

kyriakos

FineUploader is a modern open source file upload component available for free to use in any web project. It uses the HTML5’s XMLHttpRequest2 object which allows asynchronous file uploading through the browser and has progress report (i.e. you can see how much of the file has been uploaded at any instant) without the need of server-side support or Flash. It also works with older non-HTML5 browsers down to IE7 by using the hidden iframe upload method – so no backward compatibility problems.

I’ve been using plupload until now but I’m giving FineUploader a go in my current project, plupload even though its extremely powerful its very heavyweight and its licensing is not as open as FineUploader’s. It’s very quick to setup, just include one CSS, one JS file and instantiate the uploader with a single Javascript statement and you are good to go. On the server-side, they provide out of the box file receiver implementations for PHP, node.js, Python, .NET, Java and even Coldfusion (People still use that?).

Latest version can be obtained from its Github page and you can view demos at FineUploader.com.