Travel to Live Blog

Stories of our adventures and updates about the site.

Author: Matt (page 2 of 2)

Collaborate on trips with your friends!

Plan, share, and collaborate on trips: that’s our motto! Last time we talked about how to add a trip widget to your blog, so that’s the share but what about collaborate on trips? We’re most excited about collaboration at Travel to Live. In fact, you might even say this feature is our raison d’être. Planning a trip with friends can be a frustrating experience. Where do you write it all down? How do you keep track of everything? It was that struggle that gave us the idea for the site in the first place. Collaboration let’s you plan and dream together.

How to collaborate on trips

You can collaborate on any existing or new trip. If you don’t have any, you’ll need to create a trip first. Once your trip is created, look in the itinerary (on the left-hand side of the screen) for the “invite collaborators” text.

Click to invite collaborators

Click it and get the one-time use code from the following popup.

It's easy to collaborate on trips - just share the URL!

Give the URL to the friend you want to collaborate with. Once they are signed into Travel to Live, they will be added as a collaborator. You need to generate a link for each friend you want to add. Just push the reload button or open the popup again to get a new code.

That’s it! You’re now collaborating. There’s just one last detail: you can always see who you’re collaborating with on the left-hand side of the itinerary.

See your fellow collaborators in the itinerary

You can also click on their pictures to bring up a link to their profile. Give it a try.

Start collaborating!

Now that you know how to collaborate on trips, get planning your next group travel adventure. And if you want to share your experiences on your blog, don’t forget to check out how you can promote your travel blog with Travel to Live!

Add a trip widget to your travel blog

Writing about your travels is a lot of fun but many of us are visual consumers of information. Who doesn’t like pulling out the map or spinning the globe, to see where that place is in the world? I know when I’m travelling, my parents are always at home with an atlas, trying to get a picture of where I’ve been or where I’m going. Our trip widget helps you do just that on your travel blog!

Our trip to Travel Tech Europe in London.

Adding Your Trip Widget is Easy

You don’t need to be an HTML wiz to use our trip widget. All you need is one little line of HTML – that’s it!

 <iframe src=”https://travelto.live/embedded/trip/AX6pz/”></iframe>

There’s nothing to it. Just replace the trip id above with your own and plug the code into your blog. It’s that simple. Here are some easy steps to follow to get a trip into your blog.

  1. Create a trip on Travel to Live.
  2. Once created, you’ll see your browser’s URL has changed to https://travelto.live/map/trip/xxx/. If you don’t know how to find the URL in your browser, look for the share button in the top right of the page. Click it and you’ll see the current link. Copy that xxx!
  3. Replace AX6pz in the above code with what you copied.
  4. In your blog editor, switch to HTML and paste in the code. Done!

Now you have your very own trip widget embedded in your blog. This trip widget will update as you update the trip on our site. You don’t need to do any more work or ever touch the code again. Easy right?

Advanced Users

There are a couple things you can do to customize the trip widget. Depending on your blog editor, you might be able to change the width and height. Our version of WordPress always sets the width and height of an iframe automatically but if you’ve got more control, you can change the appearance very easily. Just add width=”xxx” or height=”xxx” to the above code, as seen below.

<iframe src=”https://travelto.live/embedded/trip/AX6pz/” width=”300″ height=”300″></iframe>

Go ahead and set it to whatever you want. Switch back to Visual mode or look at a preview to see how it looks.

Another thing you can do is limit your trip to a certain day. Travel to Live allows you to add any number of days to your trip. To show only one of them, add ?day=xxx to the end of the URL in the code.

 <iframe src=”https://travelto.live/embedded/trip/AX6pz/?day=1“></iframe>

The above example would show only events on the first day of your trip. This way, you can show your readers only the stuff related to your latest blog post.

WordPress Plugin

We realize some of you don’t want to muck around with HTML. Although our trip widget is very easy to add to any blog that supports HTML, we also plan to make it even easier. In the future, you’ll be able to add the widget with a WordPress plugin, so stay tuned to this blog for future updates.

Get Started Now

What are you waiting for? Create a trip now or read more about how to promote your travel blog with Travel to Live. Then add a trip widget or two to your blog!

Planning my trip on Travel to Live

As I look back on the month and 2016, I wanted to take some time to talk about planning my trip on Travel to Live. When we were making our plans for our Vienna trip, my wife and I needed a place to share our ideas with each other: Travel to Live is such a great tool to do that. In the past, we used Google Docs because the most important thing for group travel or couple travel is that you have one place that you can all see. Improving on that experience was a guiding factor when building the site.

Getting Started

Everybody plans differently but, often, you don’t know exactly what you want to do. You have some ideas for some places you definitely want to go. There are some things you want to do. You know what area you’re going to stay in. Don’t you just want to start pinning them on a map, so you can get some idea of what you’re looking at?

Planning my trip on Travel to Live

All our ideas, unsorted

This isn’t quite what we had in the beginning. Originally, there were few connections between the points, with even more points than what you see now. It looks quite daunting, doesn’t it? Well, it has definitely given support to our future plans for sorting and tagging options. But, for now, you can already sort your plans into different Locations and Days. Sometimes you don’t know where or when you’re going, so you just want to list all the ideas. You can do that too.

Save your ideas on Travel to Live

This was actually the main section we used in the beginning. We just kept adding and adding to this list. Then, when we wanted to plan a specific day, we would look into this list or check their locations on the map to figure out what we wanted to do that day. The list can grow to be quite unwieldy but, as I mentioned, we are looking into tagging and sorting options, which will improve the experience.

Sorting your trip

Pin your ideas on Travel to Live

Day 3 of our Vienna trip

We actually kept planning the trip each night, while we were on the trip. Each night, we would sit down on the computer and think about what we wanted to do the next day. We’d drag the ideas into the next day or some future day and come out with something like the above. Sometimes we changed the plan retroactively, so we could share our true journey later. I think you’ll agree the above picture is much easier to read and understand. This picture is focused only on Day 3 and gives a clear overview.

Planning my trip provided many insights

As I mentioned in Eating your own dog food, it’s important that you use your own product. Testing is one thing but really using the product is something else entirely. I quickly found a variety of issues with the site, both in terms of usability and outright bugs. With our week-long trip to Vienna, it wasn’t long before we became overwhelmed by all our ideas. It wasn’t a problem because I know my way around the site and how to use the existing sorting options. Are new users able to use the site in the same way? Do they understand the sorting options? Do they even come to the point where they have so many ideas? These are all important questions that we need to monitor and address.

The site is already very easy to use and straightforward for planning my trip but there will always be improvements that can be made. If you haven’t already, try planning your trip now on Travel to Live. Give us some feedback on what features you’d like to see. Coming soon: the ability to collaborate on one trip with your friends!

Eating your own dog food

No, this post isn’t about man’s best friend or his favourite dishes. Eating your own dog food refers to a company using its own products. Believed to have originated at Microsoft in the 1980s, it’s a colloquialism I’ve always believed in at every place I’ve worked for. It’s not always easily achievable but you need to find a way to use your own product, if you truly want to understand it as consumers do.

It’s easy to get into a bubble and focus only on what you think your product is or what you hope your product will do. Sometimes programmers are assigned a task and they view it purely as a task to be accomplished. I worked at a company previously who was making a Facebook version of their popular web game. Some fellow coders told me how they had never tried the game yet because they didn’t use Facebook. That’s great but we’re making a Facebook game, so you better start using Facebook now. Often I hear arguments about how a feature ought to work, from people who have never themselves used the product and don’t realize that it doesn’t work as they planned it to. That’s why you’ve got to use your own product; you’ve got to be eating your own dog food.

Thus, I came to the conclusion that the designer of a new system must not only be the implementor and the first large-scale user; the designer should also write the first user manual. The separation of any of these four components would have hurt TeX significantly. If I had not participated fully in all these activities, literally hundreds of improvements would never have been made, because I would never have thought of them or perceived why they were important. – Donald E. Knuth, The Errors Of TeX”

Making a product you believe in

Perhaps we’re very fortunate at Travel to Live because we’re making a product we really believe in. We hatched the whole idea when we were flying back from one of our many travels. This is a product that, by definition, is one we want to and do use. That’s why when I started planning my Vienna trip, I started planning it on Travel to Live.

You can gain a lot of insight by eating your own dog food. Regular bug testing won’t catch everything because you won’t think of every use case. By using the product naturally, you find those corner cases or you find the places your app breaks down and stops being fun. You think of new ideas for the future. Soon, your bug list has exploded, your wish list has created work for the next ten years, and your understanding of the product has deepened immensely.

Staying focused

It sounds like all upsides but it isn’t. It’s easy to become distracted or to lose focus. Every software developer knows that you can’t implement every dream feature or fix every bug. The first thing I learned when I started working at Electronic Arts is that the typical game ships with hundreds or thousands of bugs. Most of these errors are simple: the user will never see them. But it’s a reality every project manager needs to consider when prioritizing tasks and assigning work.

I’m on day 4 of my trip and I’ve already thought of months worth of work, all of which would derail us from our current plans. Right now, we want to focus on user acquisition and the early experience. As a power user of this site, the things that matter to me aren’t the things that matter to our target users. You can’t lose sight of that. You can’t allow bias to cloud your judgement and change your plans. I would absolutely love to implement a tagging feature right now, to make sorting my Ideas much easier, but it’s not a top priority. It’s going to have to wait a little longer.

The most important thing to do is fill out the bug reports and write down the new user stories. Don’t lose all this valuable data. Issues can be closed and rejected or simply scheduled for the future. You lose nothing by recording these valuable insights.

Eating your own dog food is important at all levels of the company

The most difficult thing is keeping all employees engaged. In a small startup, it’s not so difficult, because the company is made up of a tight group of passionate people. They wouldn’t be working on the project if they weren’t interested. It’s a different story in a larger company, meaning startups need to keep their culture as they grow. As companies grow, they hire people to do a task, not always because they are passionate about the product. It’s important to keep a culture of eating your own dog food in the company because employees may not do it without prompting.

Like many millennials, I believe everybody has something to contribute, at all levels. I believe everybody should feel included. You want the people at the lowest level of the company to be able to raise issues that might be important, issues which the highest levels might find important. If everybody is using the product, you maximize the number of different internal viewpoints on the product, which can only be a good thing. You don’t need to implement everything Joe in QA wants; however, he just might be using the product in a way you never imagined.

Time to eat more

I’ve been writing this article from Cafe Tirolerhof in Vienna, Austria. I’m on vacation but an entrepreneur is never truly on vacation. After all, I’m eating my own dog food every day I’m here. Follow my adventures on my personal blog or view my Vienna trip on Travel to Live! Coming soon: blog integration with your personal profile! Stay tuned for more details.

Google Polymer: Making the Switch

I’ll say up front that I’m a happiness is a boring stack kind of guy, so when Elon came up with the idea to switch to Google Polymer, I was apprehensive. I learned web design somewhere between the years of 1995 and 2005, a time of radical change for web design to be sure, but the ideas were quite different than the world of AngularJS, Material Design, and Web Components. Still, I agreed that we could take a look into it. Elon maintained that Polymer would solve several existing problems we had with the site.

About Google Polymer

If you haven’t heard of it, Google Polymer is an open-source JavaScript project developed by Google. It includes things like simplified creation of custom elements, two-way data binding (more on that later), computed properties, conditional and repeat templates, and gesture events. The Polymer Element Catalog is a library of already created custom elements, many of which you will absolutely be using in any project. You hopefully already know about the newer tags added in HTML5, such as <article> or <header> but with Polymer, you’ll be writing things like <my-cool-custom-input>, with all the functionality hidden away in that custom element. Nifty.

Making the Switch

Maybe you’re still considering making the switch to Polymer and don’t know where to start. With a new project, it’s a lot easier because the shift in code organization and design can be taken from the beginning. If you’re switching and you want to take full advantage of Polymer, you’re going to want to re-write all your code. Let me say that again, because it’s the terrifying truth, you’re going to want to re-write all your code. (but you don’t have to!)

It’s not that bad but in many ways it is. Polymer offers a lot of benefits and saves on a lot of coding but in order to take advantage of them and really drink the Google Polymer Kool-aid, you’re going to have to change the way you’ve been writing your website. We began by converting as little as possible, creating a single-page version of the site, using Polymer’s <app-route>, among other components. Because we wanted to majorly overhaul and redesign the itinerary, we took this as the first component to create.

Getting a basic Google Polymer project up and running was really fast. Getting it to work with our existing code produced a nightmare of Frankenstein code. Introducing any new framework is a pain but what allowed us to get going fast is that once you include the polyfill and Polymer libraries, you can pretty much dive in and get going right away. If you want to get your feet wet and create just one small component to start, you can. You don’t need to switch over to anything like TypeScript, for example.

Polymer uses two-way binding, which basically allows you to keep everything in sync between your components automatically. If the user renames an Event in one interface, it’s automatically updated in the Itinerary, without even writing a single line of code. The problem is, we already stored and updated our data in MapData.js and doing it in the Polymer way would have forced us to rewrite all code everywhere. Our solution was to create the ttl-data-bridge, which bridged our old data system with the new data system. Not very elegant, right? Yes, it was a big source of headaches, confusion, and bugs.

Google Polymer makes it easy to create custom components for your website

Every component is bound and, therefore, kept up-to-date automatically.

Finishing what we started

Eventually, we decided to take the plunge and rewrite all MapData-related code, which was the bulk of, well, everything on the site. Happily some of that rewriting was actually just deleting, as Polymer simplifies a lot of data handling and updating. You don’t need to write show and hide calls all over your code when you can write <my-component hidden$=”[[_calculatedHideMyComponent(hideOrShowProperty)]]”> instead. Where we were updating different UI elements on data change, now the components update themselves with data binding.

My suggestion would be to start much smaller and only replace smaller components. Build up to it and don’t try to bite off more than you can chew. You won’t be able to reap all the benefits of Polymer right away but if you have deadlines to meet, it’ll be your only choice.

There are some real benefits

I just said there were some benefits of Google Polymer but what are they? After the horror story I just described, you might be questioning if it’s still the right way to go. I’ll leave the final decision up to you but consider the benefits.

  • Data-binding is really cool. As already mentioned, data-binding saves you a lot of work by updating your variables automatically for you without any additional code. Write <span>[[name]]</span> in one component and <input value=”{{name::change}}”> in another and you get a text that updates automatically on user input.
  • It forces you to code better. It’s easy to write spaghetti code. We’ve all done it. You want to prototype something or a deadline is fast approaching and the quickest way is just to write and write and write but not really think about the bigger picture. I’ll fix it later, except there never is a later, so you won’t. Well the whole point of Polymer’s custom elements is that these encapsulated elements work on their own or according to their explicitly stated dependencies. Technically, you aren’t forced to do anything but if you follow the design principles of Polymer, your code is going to be easier to maintain, easier to read, and easier to re-use. This is where Polymer truly shines.
  • Conditional and repeat templates are cool. Using dom-if and dom-repeat, you can output your custom elements (or anything) according to the data you provide. In just a few lines of HTML, you can automatically show all the map markers on the map, according to ever-changing data. If the user adds a new Event in the itinerary, thanks to data-binding, your Google Map component will find out about it automatically. From there, the dom-repeat iterates over that data and adds or removes markers as required. With dom-if, you can conditionally include components according to variables or computed functions you provide. Pretty slick.
Google Polymer introduces dom-repeat, making it easy to control what appears on your site

An example from our Google Maps code, showing dom-repeat

It isn’t all roses

The pitfalls of Polymer might be a show-stopper for you. In retrospect, I don’t know if I would have implemented Polymer given the effort it’s taken to convert our codebase. Now that it’s part of the project and the conversion is behind us, I’m quite pleased.

  • Lack of documentation: Polymer’s own documentation can sometimes leave you wanting but we all know the most truly important documentation resides on Stack Overflow. Well, don’t expect much here. Things are so dire that the Polymer Slack channel explicitly asks users to post their questions on Stack Overflow, so as to build up the knowledge base. It’s an unfortunate drawback of any new technology. If you’re a web developer who is used to every problem already having been solved 10 years ago on Stack Overflow, you’re in for a rough ride with Google Polymer.
  • It’s too new: I mentioned the <app-route> component earlier in the article. As of this writing, the first thing that appears on the page is app-route 0.9.3, followed by app-route is still in beta. We expect it will need some changes. We’re counting on your feedback! Wait – what?! This is Polymer 1.0, right? That’s not what I want to read on the documentation for a component that is at the foundation of my app! There’s a reason why people still  use old versions of PHP or tried and true programming languages like C++. When using Polymer, be prepared for a cutting-edge but bumpy ride.
  • Browser support: Google is promoting their version of Web Components here and not everybody is on board yet with all of it. The end result is that Polymer is slower in Firefox and performs the best in, you guessed it, Google Chrome. When 53% of mobile users abandon a slow site, this is no laughing matter. And it better be okay to abandon older browsers. Before Polymer, we sometimes tested the site in the abandoned Windows version of Safari. Now it doesn’t load at all. Cutting off support for older browsers could be a deal breaker for your business.

Polymer is a work in progress but it's come a long way

The good thing is that the Polymer community will solve all these problems problems in time. Documentation is growing, programmers are writing articles and asking questions, Polymer 2.0 is on the way, and all browser vendors have already or plan soon to implement the necessary technologies. I expect 2017 to look very different and much brighter for Google Polymer.

Lessons learned

Earlier, I praised data binding but there’s a difference between that and two-way binding. Polymer gives you the option of one-way and two-way data binding, the obvious difference being that the latter also sends changes back up the chain. We got so excited about data binding that we used it everywhere, all the time. This turned out to be a mistake, leading to unexplained or unwanted behaviour and triggering of events. Make sure to reserve any sort of data binding only for when you legitimately need it. Only use it when you have considered what the immediate communication of all data changes might do to your component.

As I said, Polymer is a big shift in thinking when it comes to the technical design of your website. There’s a learning curve and we made our share of avoidable mistakes, had we only understood a particular component’s functionality better. Don’t bite off more than you can chew at once and feel free to introduce Polymer into your project slowly. Although you will want to go full Polymerization, as we have taken to calling it, the beauty of Polymer is you can include as little as one simple custom element, if you so choose.

We hope to continue to share our experiences with Polymer with you as we continue development of Travel to Live. Ask more about our experiences in the comments below!

Our Travel Planner Explained

We thought we’d write a little more about using our Travel Planner than is available in the demo. From the beginning, we wanted to create something that is easy-to-use and straightforward. To accomplish that, we needed a drag-and-drop and “it just works” kind of design. We think you’ll agree that we’ve achieved that goal.

Getting Started with the Travel Planner

Create your trip with our easy-to-use Travel Planner

Start by creating your trip. After a few short steps, you’ll be in the Itinerary, where all the planning takes place. Look in the bottom corner at the green button. Click it and you’ll be presented with some different options: Location, Day, Event, Idea. Locations are essentially groups; you can type anything you want here. Days extend the duration of your trip and are placed within Locations. Events are where you’re going and what you’re doing. They must correspond to somewhere on the map and are planned on a Day. Ideas are like events but are useful when you don’t really know all the details yet. Ideas can just be text, don’t need a day, and don’t need to appear on the map.

It’s Easy

Our Travel Planner has an easy-to-use drag-and-drop interfacePick the components you want to use to plan your trip and start dragging them into place in the Itinerary. The greatest part about our travel planner is that you can order and re-order your whole trip with these simple drags. Everything is dragged in place from the green button but you can also click to add too: simply click any option in the menu as many times as you want to quickly add more Days, Events, etc. This way, you can easily fill out the shell of your trip and then re-arrange it how you like afterwards.

Once you’re ready to start adding some more specifics for an Event, just click! When you click on an Event, you’ll see a new screen with some different fields, where you can fill out the nitty gritty of your trip. If Google has data for this location, you might also see some automatically filled out data, like opening hours, price level, website, rating, and phone number. We fetch it all from Google, so you don’t have to switch tabs so often.

Using the Map to Plan Your Trip

Use our Travel Planner to plan your European backpacking trip

Sometimes when you’re planning, you’re not sure what the names of the places are where you want to go. Other times, they’re in languages you can’t type with your keyboard! Don’t worry, our travel planner has you covered. You can also click on the map directly to add new Events and Ideas. Since events are automatically added to the currently selected day, pay attention to the filter drop-downs at the top of the map. If no day is selected, the travel planner will instead add your destination as an Idea. No pressure – you can change back and forth between Events and Ideas any time you like.

We hope you have a better understanding now of how to get started. Why not start planning your next trip?

Best Travel Quotes: Our Favourites!

We’re busy on the next update for the site, which should bring a lot of speed improvements and other general fixes. For now, we thought we’d take a break to share our collection of the best travel quotes!

“Life begins at the end of your comfort zone.” ~ Neale Donald Walsch

That one’s our favourite but there are so many inspiring quotes out there. From time to time, we share them on twitter and Pinterest, but we wanted to save them all in one place. We’ll update them as time goes on too, so check back in the future.

Go, read on and get inspired!

New welcome page

We’ve just done a major overhaul of the in the latest update. The design of the new welcome page is now much cleaner and more professional. One piece of feedback we received is that people want more information about the site before they dive in; we’ve taken that into account when creating the new design. You’ll also find a new demo, which explains some basic concepts of the site. New also in this update is the display of featured trips. Featured trips showcase some interesting and informative trips from the community. If you’ve created a cool trip and would like it featured, send us a mail and let us know about it!

There are many smaller fixes in this update, including some important bug fixes with data loading, mobile display problems, and some browser specific issues. Keep the feedback coming and don’t forget to follow us on social media!

Introducing the new developers blog!

We thought it was about time to start a developers blog, so we can share our future ideas with you guys. Maybe we’ll also post about our travels or some interesting travel tips – who knows! At least, you can watch this spot to find about the latest updates to Travel to Live.

We’d also love to hear your feedback here. Comments, suggestions, questions – just write them all in the comments section below.

Newer posts

© 2017 Travel to Live Blog

Theme by Anders NorenUp ↑