AI Web Develoment

Here is a fancy new project: the world’s first AI platform that designs websites. And the Worlds very first AI developer seems to speak English and have a sense of humor 🙂

Here is what they say on their website:

This is not a website builder. This is your personal AI web developer. Its first masterpiece is the website you’re looking at right now.

Sure thing it makes sense to look into the code, turns out there are actually some helpful comments in English, like these:

// Don't follow link
      event.preventDefault();

or even like these:

catch (e) {
    // noop
  }

Man, it’s Super-Future-Cyberpunk-Christmas-Today, this things seems like fun until it actually decides to take over the world.

Update: Local Subdomains under Ubuntu 14.04 Linux and Apache 2.4

Here we went through the Ubuntu 13.10 process, Ubuntu 14.04, though using the same Apache 2.4, again has a small thing that have to be done differently:

Config files in sites-available have a .conf (and not .config) extension
gksudo gedit /etc/apache2/sites-available/project.conf

As for the rest, previous Ubuntu 13.10 Tutorial can be used for newer Ubuntu as well.

Local Subdomains under Ubuntu Linux and Apache 2.4 Tutorial

The whole process was described in this article, but there are few quirks to fix in newer Ubuntu (namely 13.10 / Apache 2.4).

  1. Every config file in sites-available has to have a .config extension now, so instead of
    sudo nano /etc/apache2/sites-available/project
    use
    sudo nano /etc/apache2/sites-available/project.config
    if upgrading fist add the extension to the /etc/apache2/sites-available/project config file, then delete /etc/apache2/sites-enabled/project and re-run “sudo a2ensite project” / restart apache.
  2. If your project root is located in your home directory you might get a persistent 403 / Forbidden error, that (weird as it is) has nothing to do with Linux permissions. To fix it add “Require all granted” directory directive. Here is how the new config file might look:
    <VirtualHost *:80>
    DocumentRoot /home/user/project
    ServerName project.localhost
    <Directory /home/user/project>
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
    </Directory>
    </VirtualHost>

So here are updated instructions for Ubuntu 13.10+ (and maybe some older versions). Continue reading

How To Fix Laravel 4.0 – 4.1 Upgrade

Recently I’ve upgraded a Laravel 4 application from version 4.0.10 to 4.1.18. Despite Laravel’s website having a nice upgrade guide I did encounter few quirks that needed a little attention and some extra work.

So the very first thing to do, would be to follow the mentioned guide, hopefully you’ll end up with working new version of your application and wouldn’t need anything else (use “php artisan” command in your application folder to check out the current Laravel version).

Though I ended up with the following error each time I tried to run an artisan command (including simple “php artisan”):

PHP Fatal error: Class 'Illuminate\Foundation\Providers\ConsoleSupportServiceProvider' not found ...

And there were indeed no ConsoleSupportServiceProvider in my installation. Surely “composer.phar update” did not work as well as it tries to execute “php artisan …” commands and suggested “composer.phar update –no-scripts” worked, but didn’t fix anything.

After a bit of research I ended up with a kind of “clean install” solution, so if you have the same or similar issue you may try following: Continue reading

jQuery Background Switcher: Navigation

Another update for our Unobtrusive Background Image Switcher jQuery plugin: new option to show the navigation links so that the user can switch between the images manually.

This option is disabled by default, to use it just enable the “links” option, the rest is up to CSS:

<div id="bg-body"></div>

<script type="text/javascript">
// array with image paths 
var srcBgArray = [
  "/path/to/image1.jpg",
  "/path/to/image2.jpg",
  "/path/to/image3.jpg"
];

$(document).ready(function() {
  $('#bg-body').bcatBGSwitcher({
    urls: srcBgArray,
    alt: 'Alt text',
    links: true
  });
});
</script>

Since the images are not loaded at the time of the page load, they might have to be fetched after user clicks the link, in this case the loader animation has to be shown.

Loader element is created automatically if the links are enabled, the animation itself can be styled just as anything else, we included the default implementation in the demo.

Since we put few extra bytes to implement the new features, we now distribute the minified (with UglifyJS) version that is as light as 2.8 kb. If you want the source code – feel free to check out the Git repository.

Demo and downloads:

Update: jQuery Background Image Switcher

Updated our Unobtrusive Background Image Switcher jQuery plugin: added support for multiple instances per page. This means it can be called from multiple elements on the same page like that:

<div id="bg-body"></div>

<script type="text/javascript">
var srcBgArray = [
  "/path/to/image1.jpg",
  "/path/to/image2.jpg",
  "/path/to/image3.jpg"
];

$(document).ready(function() {
  $('#bg-body').bcatBGSwitcher({
    urls: srcBgArray,
    alt: 'Alt text'
  });
});
</script>

/* some other stuff here */

<div id="content-slider"></div>

<script type="text/javascript">
var srcContentImgArray = [
  "/path/to/content-image1.jpg",
  "/path/to/content-image2.jpg",
  "/path/to/content-image3.jpg"
];

$(document).ready(function() {
  $('#content-slider').bcatBGSwitcher({
    urls: srcContentImgArray,
    alt: 'Alt text'
  });
});
</script>

Not really useful for background images, but if you have a background image switcher as well as a content image slider and wouldn’t want to load too much scripts this might just be your thing, was also our reason for this update.

Demo and download links remain the same:

jQuery Unobtrusive Background Image Switcher

Since our MooTools class worked well on many projects we went ahead and rewritten it for jQuery (after all it’s a jQuery world out there).

The idea as well as functionality remains pretty much the same: we need to use as many (probably background) images as we want no matter how heavy they are, while minimizing their influence on load times.

Here are the basic requirements:

  • Only the first image has to be loaded, the rest must “wait for their turn” and load as needed.
  • The image has to be preloaded and only shown after the load is completed. We now use fade effect for every image including the first one.
  • Support for responsive full screen background feature without breaking the image’s proportions on any screen/window size.
  • It has to be lightweight and play well with other front end features.

So here is the jQuery version:

No need to pass the full screen option any more, for jQuery version of this plugin it is handled entirely by the CSS – again if you want the full screen feature to work, download the whole package and take a look at our bare bones style.css. The CSS part is based on Perfect Full Page Background Image / CSS-Only Technique #2 from css-tricks.

Images used in this demo are copyrighted and only intended for this demo.

Further information, usage and options: Continue reading

Google Mirror API

Welcome to the future of mobile development – Google rolls out the Mirror API for future Glass developers.

Glass is a unique platform that is mobile but fundamentally different than existing mobile platforms in both design and use. To develop great experiences and effectively test them, you need to have Glass and use it in your everyday life. This is why the Google Mirror API is in a Developer Preview and actual access to the API service will be rolled out slowly, starting with the Glass Explorers as they get their Glass.

In the meantime, start reading about the Google Mirror API and start dreaming about the next, great, mobile experience. We hope you are as excited as we are, and we can’t wait to see the great things you’ll build!

Sounds like fun, let’s hope they wouldn’t close it in a year like other not-so-lucky projects…