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.
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.
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.
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.
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
Copy-paste the rules.
List your favorite tools, libraries, and services for web development.
List obvious ones as well, they may not be obvious to others.
Tag other web dev bloggers and let them know.
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.
Quite often I’m asked whether I know HTML5, which I do. I see other web development companies throwing around that fancy HTML5 logo in hope to get new clients. Clearly there is a lot of buzz around it, but do people know what HTML5 actually means?
Most people must have read or heard that HTML5 is the latest shizzle, and that they should demand it from their nearby 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 latest version.
What does HTML5 include? Actually, HTML5 is still under development! Some browsers implement some of its features. As usual, browser vendors like Mozilla, Microsoft, and Google have disagreements and do things differently. Read all about it on the excellent Dive Into HTML5 website.
Watch out for the HTML5 gang
Having said that, HTML5 includes several different features. First of all it supports new HTML semantic tags. If you’re not a web developer, this shouldn’t matter to you that much. It does introduce cool things like email and search form fields. Browsers, especially mobile, treat them differently, e.g., by loading the email keyboard. Take a look at the HTML5 cheat sheet for new tags if you’re up to it.
One of the hot HTML5 features is a built-in browser video player. Wait a sec, but didn’t we already have browser video players? Yes we did, but they were mostly Flash based and demanded extra downloads for them to work. Download no more, for modern browsers shall cometh with their own video player. It could be customized to all your visual desires. Here’s all the rant about it.
Canvas, a web browser drawing surface, is another cool HTML5 feature. Yes, up to now Flash ruled the realm if you wanted to do animations or games. Canvas shall be built-in to all browsers thus rendering Flash obsolete. Even 3D is coming soon to the web via standards such as WebGL.
Other features include geolocation, local storage, offline support, and more all hopefully ready in your browser. Hopefully!? Yes, not all features are fully implemented for all browsers. Older browsers may need fallback on older technologies, or simply be discarded in favor of the new.
To sum it up, instead of blindly asking for HTML5, ask for the features that you actually need whether it’s video, animations, offline storage, etc. Take into consideration that not all browsers, new or old, may support them natively via HTML5 and they may require a fallback mechanism. HTH.
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:
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.
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.
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.
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
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.
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?
Bottom line – nice to see a different and logical approach, needs way more time to mature.
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.
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.
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,
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.
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.
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.
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.
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.
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”.
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:
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!
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.
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:
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.
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.
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
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.
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.