LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

When it is okey to use TypeScript?
Last summer we had to convert a huge code base from Javascript to Typescript. During this transition I learned a lot about the differences and similarities of the two. I developed an idea about what makes a good use case for Typescript and when it doesn’t make sense to use it. Use cases for Typescript 1. Code size: When the source code is huge and more than one person works on the project, a type system can help avoid the obvious errors. This is specially true for SPAs. When someone can change code that potentially breaks another one’s code, it’s generally good to have some sort of safety mechanism. The TS transpiler reveals the obvious mistakes and is kinda smart (but can’t eliminate the need for debugging of course). If the source code is not huge, it probably doesn’t make sense to make it longer by adding type annotations. I have converted 180+ files from JS to TS and in most cases it added roughly 30% to the code size. 2. Previous baggage: if you or the majority of the team come from a strongly typed language like C# and does’t really want to go JS all the way, TS is a good alternative. Even though I recommend learning Javascript for good, there’s nothing preventing you from using Typescript without knowing Javascript. In fact Typescript is made by the same guy who made C# so the syntaxes are similar. In my company we had a team of C# developers who were coding a sophisticated desktop application in C#/WPF (which is front end in the desktop world) and then they were tasked to join my web project as full stack. So it was relatively a shorter path for them to learn Typescript for front end and leverage their C# knowledge for the backend. 3. As a replacement for Babel: The old Microsoft used to take something that is standard (for example Java) and add proprietary non-standard stuff to it (for example J++) and try to force developers pick one. Typescript is exactly the same thing to Javascript (after another try in 1996 divertingJScript from Javascript). Anyway, since ES6 is basically a subset of Typescript and the Typescript transpiler generates ES5 code, it’s practically possible to transpile ES6 code to ES5 (just as Babel) using the typescript transpiler. Though it’s not a strong use case IMHO. Typescript’s transpiler generates pretty readable ES5 code as output and that was one of the reasons Angular 2 team chose TS over Google’s own Dart language. 4. Promoted by lib/Framework: If you are using Angular 2 or another library that makes it particularly interesting to use Typescript, go for it. Just know that even though Typescript can use all Javascript libraries out of the box, if you want good syntax errors, you need to add the type definitions for those libraries externally. Fortunately the nice guys atDefinitelyTyped have made a community driven repo and tooling for that. But that is one extra step when you’re setting up your project (side note: for the JSX fans I should mention TSX). When you’re better off without Typescript? 1. Extra transpilation tax: There are no plans to support Typescript natively in the browsers (Chrome did some experiment but cancelled later). This means you will always have to transpile your TS code before running it on the browser. For the standard ES6 it’s a whole different story. When ES6 is supported by most browsers, the current ES6 to ES5 transpilation would be unnecessary. ES6 is the biggest change in the language and I suspect most people would settle there, but those who want to try the experimental features of the next version of the language will transpile anyway. You just modify the file and refresh the browser. That’s all — no “watching” or “transpiling on demand” or build system is necessary. If you choose TS, you probably end up doing some extra book keeping for the keeping the type definitions for Javascript library/frameworks up to date (using Definitely typed or writing your own type annotations). That’s something you wouldn’t do for pure JS projects. 2. Weird debugging edge cases: Sourcemaps make it easier to debug Typescript, but the status quo is not perfect and there are really annoying/confusing edge cases that the browser thinks you are running a certain line of code but you are not. Also there are some problems debugging the `this` keyword and properties attached to it (hint: `_this`works in most cases). That is because Sourcemaps currently don’t have a good support for variables (but that might change in the future). 3. Performance penalty: in our project we had 9000+ lines of ES5 Javascript that delivered pure horse power for a WebGL component but we kept it that way. Typescript transpiler (just like Babel), has features and generates code that no matter how good the transpiler is, can’t surpass the optimisations of a good programmer. So we decided to keep it in plain ES5 for ease of debug and deployment (no transpilation whatsoever). That being said, the performance penalty probably is negligible compared to benefits of a type system and more modern syntax for most projects, but there are cases that milliseconds and microseconds matter and in those cases transpilation of any kind is not recommended (even Babel, CoffeeScript, Dart, etc.). That being said, Typescript doesn’t add any extra code for runtime type checking. All the type checking happens at transpile time and the type annotations are removed in the generated Javascript code. 4. Agility: it’s quicker to set up something in Javascript. The lack of type system makes it super agile and easy to change stuff. Sure you can break things easily but if you know what you’re doing, Javascript is more flexible. Remember one of the main use cases for using a type system is to make it hard to break stuff. If Typescript is Windows, Javascript is Linux. In JS land you don’t get the “helper wheels” of a type system and you’re assumed to know what you’re doing but you can ride faster and maneuver easier. Particularly if you’re in the prototyping phase, don’t waste your time with Typescript because JS is simply more agile and flexible. That being said, if you use a typed language, it might be quicker to write/modify code in an IDE because the type system makes it easier to determine syntax. Source: https://medium.com... Read more
Adrian Ababei / Mar 28'2016
How Do You Create a Landing Page Web Design that... Converts? 5 Easy Tips to Try
When it comes to landing page web design, people tend to make mistakes – a lot of mistakes. Some web designers go for a minimalistic approach and strip the landing page to its bare minimum – just a call to action button without any other distractions. Others opt for a more traditional landing page design with navigation menus, plenty of text and images. Good landing page web design implies removing anything that can lead your potential users from the page’s goal.   Try a landing page design with no navigation menu Just 16% of landing pages are without a navigation menu – that’s quite alarming simply when you think about all the lost conversion opportunities. Numerous studies show that landing pages without any navigation menus fare much better than pages cluttered with links, videos and text. Although you may be tempted to keep certain links on your landing page try to keep in mind your landing page’s ultimate goal: having a high conversion rate.   Avoid stock images in your landing page design Generic images and stock images in general can have a negative effect on your conversion rate simply because they look insincere or for the use of a better word fake-ish. Stock images fail to inspire any trust from your potential customers and your conversion rate will take a dive for it as credibility is one of the main engines that can drive conversion rates up.   Another great landing page design trick is placing images on top of your catchy page headline. Research shows that headlines placed under images are read by 10% more users – this can lead to a snowball effect as when users actually read a headline, they are inclined to continue reading down the page.   If done properly, your call to action is worth its weight in gold One of the most important things on your page is the call to action – ironically, this is also the hardest thing to get right on a page. Think about your call to action’s colour – good colour contrast can help your users find and click your call to action. Another thing you should consider is size – yes, size does matter in landing page web design. Your call to action should be big enough to be easily readable by users but not gigantic. The button’s text should be persuasive, a mix of excitement and urgency all bottled up into one simple red or orange life-changing button.   Remove any other links or make them invisible We already removed the navigation menu but you might still have a footer menu or a company logo. The ultimate goal here is to create a single-action environment that boosts your conversion rate. If you can’t remove links directly, make them invisible to the user – lower contrast, make the link text smaller, tone down anything that’s competing with the call to action for your user’s attention. Fewer distractions equal more conversions.   Too many choices spoil the broth Consumers can get overwhelmed fairly quickly when faced with too many choices. Studies have shown that consumers tend to buy less when faced with a myriad of choices and that’s understandable. If you have 10 products on a page and you want to get the best one you should check all of them right? Who has time to compare 10 different products? Nobody – your visitors will leave your page thinking they will return some days later.   Landing page web design in a nutshell When it comes to landing page web design, think of the one goal of your page – converting users. Everything else is redundant and should be removed swiftly and without regret. ... Read more
Adrian Ababei / Mar 15'2016
How to Personalize Your Website so That It Serves Every Customer... Individually
Website personalization takes into account that users have different motivations, devices, locations and time constraints. With current technology, marketers can now gather specific information about what a website visitor is searching for and translate their visit into a higher conversion. Itai Sadan, co-founder and CEO of DudaMobile, a mobile website creation platform states: “Organizations spend tens or hundreds of thousands of dollars, and sometimes even millions of dollars, to create robust dynamic web experiences” DudaMobile recently released inSite, a service that adds dynamic web content to pages based on the customer’s behaviour in a bid to create personalized viewing experiences.   Here is a list of five ways companies can start to increase their conversion rate through website personalization: Visitor frequency can change your conversion rate Visitor frequency often determines different user experiences. A first time visitor will most likely look for different information than someone who has visited the site repeatedly. LegalAdvice’s marketing officer David Reischer suggests that tracking each user individually can offer visitors different user experiences: “We utilize a cookie to track a returning visitor so that we can direct them to the most appropriate and relevant page. This makes site navigation easier for repeat users.” First time visitors should have access to a contact form to capture leads, a phone number or business address or a video tutorial that explains a service or product. DudaMobile’s CEO explains the system for frequent visitors: “For frequent visitors, add a spot to sign up for a mailing list or add information about new products or services”   Geo-location is also important Geo-location blends offline and online marketing. Knowing where your user is located when visiting your website is a game changer for marketers – “Online we can follow our customer’s individual buying journey, optimizing it every step of the way” explains Bart Heilbron from BlueConic. He continues: “However, we were never able to use these insights in our offline interaction. With geo-location, we are now able to.”   If a potential customer is visiting your website from a very close distance there’s a high chance they will become a customer if they see an address and a coupon that says “Come in today and get 20% off”. Restaurants can use an open table button to make reservations quickly or a Google Map that provides directions to the businesses location.   Always adjust your content Adjusting your content to certain seasons, weeks or to your particular business hours can increase your conversion rate as well. You can replace your phone number with a contact form during the time your business is closed – this can help you avoid missing out on potential customers who want to reach you outside business hours. “The ability to offer different products over the course of a day based on targeted trends, habits or culture will increase conversions,” said CEO WebiMax, Ken Wisnefski. “For example, a restaurant offers a different menu throughout the day as they switch from lunch to dinner.”   Recognize special events and holidays Recognizing special events or holidays is a great way to connect with your customer and personalize your website. You can change your website’s theme during Valentine’s Day or during the 4th of July. “This could have a positive effect on customer engagement, and in turn conversion,” said Sadan from DudaMobile.   Adapt your content to your visitor source Knowing your visitor source and adapting accordingly can have a great impact on your conversion rate simply because you can create dedicated landing pages for your potential customers. According to Sadan, “Visitors that come to your site from an email marketing campaign or as a referral from another site should receive dedicated messaging that is aligned with the messaging they saw in the email or the referring site. Offering a coupon at this point could also be a good idea.” ... Read more
Adrian Ababei / Mar 07'2016