Blog


WordPress Video Gallery Plugins Review

1 Comment// Posted in Uncategorized by on 09.01.12.

One of my clients requested a video gallery as part of her WordPress site. Her requirements were simple:

  1. Thumbnail image previews of YouTube videos.
  2. Play the videos in a dialog upon click.
  3. Have several different galleries with different titles on one page.

We decided to keep costs low and use a plugin. Unfortunately finding the right plugin took quite a bit of time.

TubePress

At first glance this seemed to be the biggest plugin with its own website and plenty of documentation. However, the plugin was very limited, at least using its free version.

Unfortunately it comes in a preset format that didn’t fit my client’s needs. I didn’t see any way to have several galleries in one page and customize its look. Next!

Cool Video Gallery

This was my next choice. You can use it to create custom galleries and add videos to them from YouTube, Vimeo, or via upload. However, it had several problems.

The UI was uncomfortable. I had to do spend plenty of time to setup the galleries. E.g., why require the exact YouTube video ID? Why not ask for the YouTube URL and retrieve the ID automatically? Also, the plugin uses JWPlayer instead of the native YouTube player to play the videos. It’s not that bad, but I found it ugly and redundant.

The biggest fault however was even worse. For a while the plugin was great, until I got a call from my client. It suddenly stopped working. Looking at the plugin support page other people had the same problem with no response from the author. Thus, I bid it farewell and moved on.

YouTube SimpleGallery

I was about to despair and write my own plugin. Fortunately doing some deeper Google searches I found YouTube SimpleGallery, a fantastic and easy to use yet unknown plugin. It had exactly what I needed – a quick and easy way to create a gallery of YouTube videos, easy to customize CSS, and an intuitive UI.

The plugin works by listing the YouTube URLs line by line and surrounding them with some shortcode. Fantastic! I setup the needed galleries very quickly and added custom CSS. I also installed Fancybox which integrates with the plugin to display the videos in a nifty dialog.

Conclusion

YouTube SimpleGallery proved to be the best plugin. It’s very easy to use, simple to customize, and works great with Fancybox or your favorite display plugin. If you’re looking for a solid WordPress plugin to display a YouTube video gallery, I highly recommend it.


Back from the UK

No Comments// Posted in Uncategorized by on 07.22.12.

This year I decided to fulfill a dream and go travelling for a month in the UK, that is Scotland, England and Wales. I’ve had an amazing time and got to see 2 of my favorite bands in concert – The Stone Roses reunion at Heaton Park in Manchester (magical!), and The Vaccines at The Eden Project in Cornwall.

The UK is really connected. Booking bus and train tickets is cheaper if you do it online, and sometimes can only booked online with a company like Megabus. Smartphones are abound. I got an all you can eat pay as you go data deal with the Three network for 15 GBP. Apps like Yelp and Urban Spoon work well in the UK. Here are some more suggestions from The Guardian.

Now I’m back to work, celebrating 2 years of freelance web development. Business is booming. A few projects have been waiting for my return and I already have several new offers. I’d like to expand my business with more manpower, create a Hebrew website for my SMB services, and do continue blogging about my experiences. See you soon.

Scottish Highlands


My Favorite Web Dev Things

2 Comments// Posted in Uncategorized by on 05.30.12.

This is a new blog post chain – My Favorite Web Dev Things. It’s purpose – sharing great tools and services with other web developers.

These are the rules

  1. Copy-paste the rules.
  2. List your favorite tools, libraries, and services for web development.
  3. List obvious ones as well, they may not be obvious to others.
  4. Tag other web dev bloggers and let them know.
  5. Link back to the post that tagged you.

These are a few of my favorite web dev things:

  • Aptana - It’s free, speaks any language, and version 3 is great. I love how I can edit remote files via FTP, synch them locally, and commit it all to a local GIT repository.
  • HTML5 Reset WordPress Theme – Excellent blank slate theme with all the best practices and HTML5 Boiler Plate built-in. I’ve also seen the Roots Theme and it looks quite cool though I haven’t used it yet.
  • W3C Total Cache – Amazing WordPress plugin that speeds up WP sites like mad. Can’t live without it, can’t believe it’s free.
  • CSS Sprites Generator – Easy to use sprites generator. Lacks some features, but definitely helps and saves loads of time.
  • Run PHP Code Online – When you’re too lazy to create some test file.
  • Firebug for Firefox – ‘Nough said. Some people moved to Chrome for web dev, but it still doesn’t beat the comfort of Firebug.
  • jScrollPane – The best jQuery scrolling plugin ever. It’s so good that I wrote a separate post for it.
  • Online YUI Compressor – minify your JS scripts without having to run that annoying command line tool.
  • Balsamiq – Super intuitive tool for wireframing. Napkee even turns the wireframes into actual working web pages.
  • Paint.net – Great for doing super-basic graphic work and for measuring pixel sizes and capturing colors.
  • VMWare Player – Runs virtual machines for free. You can create virtual disks with QEMU, here are example instructions for Win XP.
  • TeamViewer – Connects me to my customers’ desktops to debug voodoo browser problems remotely.
  • Google Apps – Obvious, but too few use it. Gives me Gmail, docs, calendar, and everything for my idosius.com domain.

Tagging: Shay.co, A List Apart


The HTML5 Buzz

No Comments// Posted in Uncategorized by on 05.22.12.

Watch out for the HTML5 gang

Watch out for the HTML5 gang

I’m often asked whether I know HTML5, which I do. I see other web development companies throwing around that fancy HTML5 logo, hoping to impress new clients. Clearly, there is a lot of buzz around it, but do people know what HTML5 actually means?

Folks must have read or heard that HTML5 is the latest shizzle, and that they should demand it from their friendly neighborhood web developer. Fair enough. Nonetheless, I’d like to clear it up and help you understand what you’re actually asking for.

Basically, HTML5 is the latest version of the HTML standard. Just like a new version of MS Word gets released every now and then with new features, so does HTML. Previous versions include 2.0, 3.2, 4.0, etc. HTML 5.0 is the new version, and older versions will still be supported by the browsers.

What does HTML5 include? Actually, HTML5 is still under development. Some browsers implement some of its features. As usual, vendors like Mozilla, Microsoft, and Google have disagreements and do things differently. Read all about it on the excellent Dive Into HTML5 website.

Having said that, HTML5 includes several new features. First of all, it supports new HTML semantic tags. If you’re not a web developer, this shouldn’t matter to you except for a few cool things like email and search form fields. Browsers, especially mobile, treat them differently, for example by loading the email keyboard when filling an email field. Take a look at the HTML5 cheat sheet for new tags if you’re up to it.

One of the hottest HTML5 features is a built-in video player. Wait a sec, don’t we already have browser video players? Yes we do, but they are Flash based and need the Flash plugin to work. Flash no more, for modern browsers shall cometh with their own video player that works on iPhones and iPads and can be customized with a new look.

Canvas, a web browser drawing surface, is another cool feature. It brings in-browser animation and gaming to the masses, pushing Flash off the throne. They are even working on 3D standards such as WebGL, coming soon to a web browser near you.

Other features include geolocation, local storage, offline support, and more, all hopefully in your browser. Hopefully!? Yeah, not all features are fully implemented for all browsers yet. Furthermore, old browsers will have to rely on fallback technologies, like Flash, and eventually have to be upgraded.

To sum it up, instead of blindly asking for HTML5, ask for the features that you actually need. Whether it’s video, animation, or offline storage, let your web developer figure out how to implement it . HTH.


Better Office Seating Arrangements

1 Comment// Posted in Uncategorized by on 05.16.12.

Doing freelance work at the offices of SimilarGroup I’ve realized something important. Seating arrangements in hi-tech companies are all wrong.

In the beginning I was sat in a big room with 6-10 people. The assumption was that I should sit next to the other frontend guy. This room has lots of noise, arguments, and a general feeling of stress and lack of privacy.

Fortunately one of the other offices was cleared, so while 3 arguments were happening in the big room I took the chance to infiltrate the office together with another employee who had had enough. The result is peace and quiet, more effective work, and a new friend.

Usually the seating is done by function. Teams are stuck together in the same room, managers in different rooms, and so on. It assumes that sitting next to someone you work with will bring the most use.

However, seating arrangements by function are useless. With smart phones, instant messaging, voice chat, email, and lest you forget, legs, people from the same team don’t need to sit next to each other to talk. Heck, they can be in entirely different countries.

Sitting arrangements should be by work environments. Different people work and feel better in different environments. These should be classified, and people who prefer similar environments should sit together. These are the factors at the very least:

  1. Noise level. Some people like their work environments loud & chaotic. Endless debates, shouting, people coming in and out. Other people prefer quiet, I’m among them. Loud people hate being told to be quiet and the quiet people hate it when it’s loud. Nope, earphones don’t help.
  2. Music. It’s always a yes/no answer whether people like to work with/out music. If yes, which kind of music is also a matter of importance. I’ve sat in the past with a woman who loved Israeli mainstream and hated electronic music while I was the opposite. This was cause for much arguments.
  3. Aircon. Have you ever sat with someone who turns on the aircon full blast to 15 degrees Celsius while you freeze into a popsicle? Or someone who feels cold while the sweat drips from your forehead at 30 degrees? Wars have been waged over aircon settings and while battles have been won the wars keep on waging.

If you make cutting edge technology, why not try cutting edge seating? Your employees will be happier and productivity will go up. Maybe even seating people from different teams with different knowledge together will allow everyone to learn new things and cause integration in the company to strengthen.


JavaScript MVC Alternatives

No Comments// Posted in Uncategorized by on 05.05.12.

I’ve been heavily working with jQueryMX for my latest web UI project, a JavaScript MVC chosen by my client. I’ve been wondering if there are alternative approaches. MVC wasn’t invented for UI after all, and quite often I find it confusing whether a certain piece of code should go in the model, view or controller.

Fortunately I ran across a few interesting alternatives lately and decided to share them. If you’re going to do some heavyweight JavaScript lifting for your next web app, and you feel experimental, you might try some of these JS frameworks out.

MVVM = Model View View-Model

This pattern was made for event driven UIs, thus making it perfect for web apps. Instead of writing loads of GUI code, it allows binding elements from the view to the model. Thus when one changes, so may the other.

Knockout.js uses this pattern. As you can see in their example code below, the HTML defines not only the layout, but also the events on each UI element and what it should trigger. The backend JS code binds to it and says what to do:

knockout.js example code

knockout.js example code

On first look I was shocked. Everything I know about JS so far, especially due to jQuery, was to keep Kosher and separate behavior from the view, i.e. the JS from the HTML. This framework puts at least part of the behavior in the HTML which is a big no no regularly.

On second look, what they did with a few lines of code would take plenty more if I had to write this otherwise. It also allows describing the UX in the HTML first and writing the backend code later, a rather cool way of development for a UX driven developer like me.

The real test would be to actually use it for a big ass web app and see what happens when the shit hits the fan. Does it work well with plugins and UI frameworks? Does it tango with AJAX? Is it easy to maintain?

Bottom line – looks really promising, needs to prove itself in big complicated web apps.

BEM = Block Element Modifier

One of my clients recently forwarded this Smash Magazine blog post about BEM. It was developed by Yandex, a big Russian search engine. Here is their full length article in GIT.

So, what is it all about? Elements are basic UI elements such as text boxes and buttons. Blocks are either groups of elements or other blocks, such as search (input + button), or site header (logo + nav + search).

The idea is that blocks are independent and can be glued anywhere in your project, thus allowing code reuse. In case you want them to be a little different somewhere in your app, a modifier is used. It could be implemented as an extra CSS class that’s appended to the HTML tag.

There’s logic to their approach. Recently I’ve separated myself UI elements in a web app to widgets and components, which correspond exactly to their separation between blocks and elements. However, is it worth it to throw away what we’ve learned from MVC and organize our code only by visual means?

Also, there’s too much custom stuff involved with BEM. They use their own language called BEMHTML which is based on XJST, their own JavaScript templating engine. Other frameworks have started as in-house frameworks, so maybe I’m being too suspicious. Still, I don’t see enough organized documentation in English, and they barely discuss the JavaScript behavioral part of it all which makes me reluctant to even try it out.

Bottom line – nice to see a different and logical approach, needs way more time to mature.

What to do? I may try knockout.js to prototype my next project and see how it handles. If it works well I’ll go with it, otherwise I’ll probably revert to the web’s most popular framework – backbone.js or stick with jQueryMX and JavaScriptMVC though it seems less popular.


8 Tips To Improve Your Draw Something Skills

No Comments// Posted in Uncategorized by on 03.30.12.

Like the rest of the world I’ve caught the Draw Something madness. This is the best and funnest app ever. Its developer is a genius.

Playing it for hours and hours in the last week I realized not everyone has figured out how to play it well. So just in case, here are 8 tips how to improve your Draw Something skills, get lots of coins, and have more fun sketching.

  1. Set the context. Don’t just draw an abstract shape and leave it, draw its surroundings as well. Is it handheld? Sketch a hand holding it. Is it on the ground? Draw it on the ground under a sunny sky. Is it at sea? Paint the sea with some waves or it could be mistaken for a sky.
  2. Think associatively. Add anything that comes to mind when thinking about the sketch word. For example, if you get the word “Brazil” you can pinpoint Brazil on a world map, sketch the Brazilian flag, a carnival showgirl, a soccer ball, the beach, etc. The more, the merrier,
  3. Use the right colors. The sky should be blue, the ground yellow/brown/green, lips should be red. If you don’t have an expanded color set yet, use a substitute color and add text to tell your friend which color it should actually be.
  4. Stick to caricature stereotypes. Need to paint Lady Gaga? Do her big sunglasses and famous hair bow. Beyonce must be sketched with a bootylicious body. Give pirates and vikings a mean looking face and doctors and children big smiles. Mustaches should be hairy and giraffes should be tall.
  5. Do several sketches via the trash. Trashing your sketch is good in case you messed up, but you can also use it to do several sketches of the same thing. One sketch of popcorn could be someone holding a bucket of popcorn in the cinema. A second sketch could show a whole corn, one grain, a microwave, and then a popcorn.
  6. Use number for different states. To sketch the word bounce, mark 1 a ball about to drop on the ground, 2 as it goes on the way up, 3 when it drops again, 4 when it goes up again. That’s definitely clearer than just showing a ball coming towards the ground.
  7. Use arrows and circles. You can use arrows to show movement, actions, or point to a specific part in your painting. Circling can have a similar effect by emphasizing the most important part in your sketch.
  8. Give textual clues if you must. Only do it as a last resort, and choose them wisely to keep things fun. Personally I delete people who give away the word itself, but some cute clues can’t hurt. E.g., when sketching the word “twist” aside from showing a stickman twisting away I added the words “come on let’s _____ again”.

Have fun and good luck!


Problems moving WordPress to a different directory

No Comments// Posted in Uncategorized by on 03.13.12.

I have just spent several hours debugging why Arama’s new WordPress website stopped working after I moved the WP installation to a different directory.

Conclusions:

  1. Check the .htaccess file and change it accordingly.
  2. Use SQL search and replace to change all the relevant fields, including the GUID field in wp_posts. Better yet, use Velvet Blues Update URL Plugin to do it.
  3. Ultimately – follow the directory moving instructions on the WP website down to a tee.

How not to get Israeli SMBs online

No Comments// Posted in Uncategorized by on 02.26.12.

The Israeli Ministry of Industry Trade and Labor launched a new marketing campaign to get Israeli businesses online. It’s a joint operation together with Google, Visa and Israel Post, amongst others. This is a big campaign with Youtube video ads and even public adverts in bus stations:

Their offer sounds quite good – free website + domain for one year. One registers, chooses a website template out of a dozen or two, and gets going.

When I first saw this, I freaked! Am I going to lose business due to this big campaign with free offers? Is my business, which builds websites for SMBs, going to go bankrupt!?

Luckily, the answer is no. The technology behind this project is based on Webydo, a content management system built on ASP.NET. They’ve got some major problems:

  1. Usability sucks. I found that using the Webydo system to setup a demo site was extremely annoying. There are good intentions there. It’s a WYSIWYG, but not a very well thought out one. Heck, I wasn’t even able to publish my website since there was no publish button in sight!
  2. Closed system. If you’d like to have a different design or add new features, you’re f***ed. You’ll have to wait until Webydo develop it, if at all.
  3. Marketing ploy. You got a free site and domain. That’s cool. For one year. When time’s up you’ll have to pay Webydo for their services on a monthly basis. Data cannot be exported properly since their system only allows exporting the entire site as HTML files. Yuck.

WordPress, the platform I gladly support and develop with, is the exact opposite:

  1. Great usability. Plenty of effort has been made through the years to make WP more comfortable to use. By far, its the easiest to use CMS I’ve seen out there and it keeps improving.
  2. Open system. WP is open source, so you can get down to the last line of code if you need to. Plus you can install any themes and plugins or develop new ones if you’d like. If you’re tired of WP you can export all the data in a standard XML.
  3. It’s free. Unlike companies who develop their own custom CMS, I don’t charge anything for the system, only for my services. Monthly costs for WP are only for hosting and nothing else.

I don’t understand why the ITL decided to go with a paid and constricting solution. Actually, I do. This is typical of Israel. As usual there’s money involved, lobbyists, connections, and I’ll scratch your back you’ll scratch mine mentality. Tomer Cohen’s post throws plenty of well deserved light on that darkness (translated).

If only the Israeli authorities had been more open, such a campaign would’ve used only open source technologies. Heck, maybe even the government would’ve thrown some money at developing them, maybe to translate more plugins and themes to Hebrew. It’s all there and ready. Even if it wouldn’t have been WordPress they could have gone for another open source solution like Joomla or Drupal. Damn capitalists.

My guess is plenty of SMBs will take up this offer for a free website. After a while, they’ll realize that they’re stuck with a system they can’t change and will soon have to pay plenty of shekels for. Israelis hate to be suckers, so by that point they’ll get angry, leave and look for a better solution.

Hello! My name is Ido and I make fantastic websites for SMBs :)


Who is your site about?

1 Comment// Posted in Uncategorized by on 02.14.12.

Lately I’ve been building more websites for small to medium businesses, and I’ve come to a realization. There is something wrong in the process by which most SMB websites are being built these days.

Usually the process works as follows. You want a website to show off who you are and what your business is about. You might have some idea what the site should look like and which cool features you’d like to copy from the competition. Then you give a call to your designer.

The designer meets you over a cup of Joe. She tries to realize what you want and takes it at face value. Then she’ll go home, make the magic happen, and come back with some fresh sketches. You’ll approve one of them, and voila, the entire website gets designed. Then it gets to the developer.

The developer usually knows one thing – how to develop. Some design corrections may happen following the developer’s feedback, but hopefully he’ll get the site done the way it was designed.

Then it’s back to you with the final result. Usually some minor corrections happen at this stage, then the site goes live.

Attribution: http://www.flickr.com/photos/kalavinka/4617897952/

What’s wrong here? Some crucial pieces of the puzzle are missing. You may not realize it, but the site is kaput, even if it looks like a million bucks and works flawlessly across all browsers.

Who is your site about? It’s about you, right? Let’s think about it. The designer and developer want you to be pleased, so they do exactly as you say. The problem is that you think the website is about your business. You’d like the site to make your business look real cool and that’s all. But you’re wrong.

Your website should be about your clients. They are the ones who are going to visit your website. Isn’t the whole point to get them to do something while they’re there? Maybe to fill a contact form, sign up to the mailing list, buy a product, etc. If all users get to the site, say “oh neat” and then leave, they’ll forget about you in 10 seconds. Would that make you happy? Probably not.

This raises important questions. Who are your clients? Maybe there are several client profiles rather than one? What do they want when they visit your website? Ultimately, what would you like them to do when they visit your website? The entire website should be built around that.

Having an about page is not enough. Writing some copy is not enough. The more users have to think to understand how you can help them get what they want, the higher of a chance they’ll use the most common feature in the web – the browser’s back button. In the words of Steven Krug, don’t make them think, give them what they want on a silver platter.

Unfortunately the client, the designer, and developer are oblivious to this. There is no fourth person in there to help them with the site strategy and structure. So we get plenty of ‘About Us’ websites while it should be ‘About Them’, about the clients. Because if they don’t easily get what they want from your site, they’ll go somewhere else and you’ll end up losing money.

In fact, looks like I’m also suffering from this problem. My own website is built all around me. My work, my abilities, my blog. In fact, it should be built around my clients – either startups who are looking for a frontend developer, or SMBs who’d like a website. I’m in the process of reassessing my business, so expect changes soon.

In the meantime, check yourself before you wreck yourself. Is your website about your clients? If you’re a designer or web developer, are the websites you’re making for your client’s clients?