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.

CodePen and JavaScript: Powerful When Used Separately So... What If You Used Them Together?
A lot of devs are now using CodePen for a variety of front end web development tasks and tricks. CodePen can be used to create Pens which are made up of JavaScript, CSS and HTML. A great thing about CodePen is that you can see your results immediately, effectively making this tool indispensable for any front end dev. But what can we do if we combine JavaScript and CodePen? 1. Add any library you need in one place You can add custom settings to any Pen you create: you can set the External JavaScript you need or want to use. Just go to the Quick Add dropdown to do it or simply start typing the required library and a variety of choices will appear. This way you’ll be able to find thousands of CDN hosted libraries. 2. Write in ES2015 Practice your ES2015 skills with CodePen by simply enabling the Babel JavaScript pre-processor. Now you’re able to use ES2015’s features and Babel will process them into an older version of JavaScript, enabling it to work everywhere. You can also do it without using Babel whatsoever but it may lead to browser support issues. 3. You can use the console for debugging and output With CodePen, you can also use your browser’s DevTools if you set its context to demo. CodePen also features a built-in console which you can use. Keep in mind that your URL might change when you close or open different code panels. There are four numbers which stand for HTML, CSS, JS and Console respectively so the URL parameter ?editors=0001 stands for Console open while the others are closed. Replacing the last number with a 2 maximizes the console. This way you can share a Pen when the output is intentionally set only for the console. 4. Use JSX and React Babel also supports JXSX so if you add ReactDOM and React you’ll be able to build in react as well. Apart from Babel, CodePen also offers LiveScript, TypeScript and CoffeeScript. TypeScript is able to process the JSX as well. 5. You can also include other pens as resources Using JavaScript for another Pen is also possible by simply dropping the URL of your other Pen in the External JavaScript function and that’s all there is to it. You’ll be able to create multiple Pens that use the same JavaScript – this way it will be easier to update it when necessary. This little trick also works for CSS in the same way. When it comes to HTML you can include the Pen URL in triple brackets within the HTML itself. 6. Get Ajax from other Pens With CodePen you can use other Pens as resources and you can access the code from Pens located at certain URLs. If you want to access just JavaScript from another pen, you can add .js to the end of the URL you’re targeting. This technique can be especially useful when storing data in another Pen so you won’t have to meddle with the JavaScript code in the Pen you’re currently working on. 7. Learn new stuff with CodePen Devs can use CodePen as a learning tool as well – it’s real code which you can write, edit but also see the results of. You can create Pens for learning purposes specifically but our favourite is the Professor Mode which allows other devs to watch you code in real time and give pointers through the built in chat system. Collab Mode is another useful tool which can be used for teaching purposes – this mode allows multiple people to work on a Pen concurrently for hands-on teaching. 8. You can see coding errors in real time Another feature we love about CodePen is that you can see any errors in your code right in the editor itself. This feature also works for JavaScript – the lines with errors will be highlighted and a special icon will be revealed. Clicking the icon will reveal the error message which is a huge help in understanding the problem and fixing it. CodePen also tries to prevent executing infinite loops which can lock your browser and prevent you from saving your Pen. 9. Lint your JavaScript CodePen can check your JavaScript code with JS Hint as well. This is a tool which detects potential problems or errors in your code. Use this tool to uncover non execution stopping errors most devs tend to miss. If the error message doesn’t provide enough help for you to fix it, there are built-in “Google it” links to find more information. CodePen also lints your JavaScript which is great because if you’re using a pre-processor, it will lint the code for linting warnings. If JS Hint finds any issues it will show you the problems directly in the code. 10. Clean code – easier work CodePen also has a feature which can help to clean up your code. This feature works with JSX as well.   ... Read more
Adrian Ababei / Jun 20'2016
Google’s Springboard: Main Reasons Why You’d Want to Use It
  Your very own digital assistant Google offers two new services for its enterprise customers, the most notable being Google Springboard – your very own digital assistant especially designed for enterprise companies which use Google’s services for business purposes. Springboard has been in testing with a small number of customers until now but it’s been finally released so you can enjoy more power at your fingertips. Google Springboard features a single search interface which uses artificial intelligence to gather and sort information from Google’s other products such as Google Docs, Calendar, Gmail, Google Drive and more. Prabhakar Raghavan, VP of Engineering for Google Apps states „the average knowledge worker [currently] spends the equivalent of one full day a week searching for and gathering information.” Apart from its improved search capabilities, Springboard also provides users with “useful and actionable information and recommendations” which they can use to solve tasks and assignments throughout their day. Google Sites gets better as well Google Sites also boasts a new design as well as a few interesting features. Google Sites is Google’s information portal used to house internal company information such as newsletters, reports and so on. Google Sites users can now use the improved drag and drop interface for easier use and editing can be done in real time by different parties. Google Sites also became friendlier towards different kinds of screen – now it can support any screen from a 30 inch monitor to a smart phone or laptop. Conclusions It will be interesting to see the users’ reaction to these new apps. It remains to be seen if Google’s Springboard can fully replace a personal assistant, but I guess we’ll see the answer to that in the future – Google plans to expand and improve Springboard with more useful features.       ... Read more
Adrian Ababei / Jun 14'2016
The Objectives of an Enterprise-Level Content Marketer
According to Content Marketing Institute’s latest report, only 28 percent consider their efforts effective. That’s less than B2B or B2C content marketers reported, suggesting that enterprise businesses face some unique challenges when it comes to building an effective content marketing campaign. To help combat these challenges, here are five primary objectives content marketers should target when working with an enterprise-level business. 1. Staying organized. Content marketing is a complicated task for businesses of any size, but enterprise marketers seem to have the most difficulty staying organized. Only 31 percent of enterprise marketers actually have a documented strategy. And fewer than half have a dedicated content marketing group. This likely poses major challenges for managing all the component parts of a successful content marketing campaign, such as: • Setting goals • Creating content • Managing social media • Promoting content • Analyzing your efforts Content marketing is a continuous process that only works well if all these tasks are consistently managed. Building a team that’s accountable for each task is an invaluable objective in making content marketing more effective in an enterprise environment. The team can develop and manage a documented strategy, which makes it possible to measure, adjust, and improve your efforts later on. 2. Marketing to diverse audiences. Enterprise companies have more audiences to target than any other kind of business. The average number is six, but some target more than 10. It’s good that enterprise businesses are already making the effort to develop targeted content that suits many different tastes, but diverse marketing is still a major challenge in and of itself. Enterprise content marketers need to go beyond developing several buyer personas and creating a customer journey for each with their content. They also have to make sure their efforts are properly segmented, which is not an easy task with six or more audiences to reach. That’s why it’s important for enterprise content marketers to take advantage of various marketing and segmentation tools to create the most personalized experience possible -- for their whole audience. 3. Finding the right talent. Gaps in knowledge and skills of the internal team, finding trained content marketing professionals, and producing a variety of content are all bigger challenges for enterprise marketers than other businesses. Even major companies with a large pool of employees can’t get optimum marketing results without taking advantage of the right outside talent. Inbound marketers as a whole have been increasing their use of outside talent for their marketing content: This is an important strategy that enterprise content marketers need to pay attention to if they want to overcome the gaps in knowledge of their internal team. The right freelance or agency talent can provide a quick solution to the need to create a variety of content as well. Writers, designers, programmers, social media specialists and more can be found affordably online and the potential return on investment (ROI) can be high compared to retraining current employees or hiring new ones. 4. Communicating across departments. Enterprise companies, much more than other B2B companies, say the lack of integration across marketing is a major challenge. This issue makes sense considering the traditional structure of enterprise companies – departments are often siloed, making it difficult to effectively collaborate on marketing tasks. Content marketing requires close collaboration between diverse teams, such as: • IT workers • Writers • Sales teams • Designers • Public relations Communicating across departments is an objective that enterprise-level content marketers need to focus heavily on. The task becomes easier if: • You put content marketing leaders in each department in charge of encouraging communication • You make efforts to meet regularly and discuss your campaigns with employees involved • You take advantage of marketing platforms and communication tools that simplify remote collaboration 5. Getting buy-in. Enterprise B2B content marketers also struggle with getting buy-in/vision from people in charge in their organization. This disconnect between the apparent value of content marketing and its adoption is also reflected in marketing spend based on company size: The bigger the business, the less spent on inbound strategies. The fact that enterprise companies struggle more than other businesses to get budget and buy-in for content marketing makes sense if you consider what’s involved. For a small business, it only takes one person understanding the value of content marketing to revamp the business strategy. When you’re working with business executives who’ve spent their lives marketing outbound, on the other hand, getting buy-in and budget can be a challenge. Meeting this challenge should be a major focus for enterprise content marketers who want to have an impactful strategy. The best way to do this is to demonstrate the benefits of content marketing for your business. Proving ROI is the most powerful way to get buy-in and unlock budget -- marketers who show ROI are more likely to secure bigger budgets year-to-year. Source: https://www.entrepreneur.com ... Read more
Adrian Ababei / Jun 13'2016
Microsoft Detects Cancer Clues in Search Queries
Microsoft scientists have demonstrated that by analyzing large samples of search engine queries they may in some cases be able to identify internet users who are suffering from pancreatic cancer, even before they have received a diagnosis of the disease. The scientists said they hoped their work could lead to early detection of cancer. “We asked ourselves, ‘If we heard the whispers of people online, would it provide strong evidence or a clue that something’s going on?’” Dr. Horvitz said. The researchers focused on searches conducted on Bing, Microsoft’s search engine, that indicated someone had been diagnosed with pancreatic cancer. From there, they worked backward, looking for earlier queries that could have shown that the Bing user was experiencing symptoms before the diagnosis. Those early searches, they believe, can be warning flags. While five-year survival rates for pancreatic cancer are extremely low, early detection of the disease can prolong life in a very small percentage of cases. The study suggests that early screening can increase the five-year survival rate of pancreatic patients to 5 to 7 percent, from just 3 percent. The researchers reported that they could identify from 5 to 15 percent of pancreatic cases with false positive rates of as low as one in 100,000. The researchers noted that false positives could lead to raised medical costs or create significant anxiety for people who later found out they were not sick. The data used by the researchers was anonymized, meaning it did not carry identifying markers like a user name, so the individuals conducting the searches could not be contacted. A logical next step would be to figure out what to do with that search information. One possibility would be some sort of health service where users could allow their searches to be collected, allowing scientists to monitor for questions that indicate warning flag symptoms. “The question, ‘What might we do? Might there be a Cortana for health some day?’” said Dr. Horvitz, in a reference to the company’s speech-oriented online personal assistant software service. Although the researchers declined to offer specific details, Dr. White is now the chief technology officer of health intelligence in a recently created Health & Wellness division at Microsoft. They acknowledged that health-related data generated from web search histories was still new territory for the medical profession. “I think the mainstream medical literature has been resistant to these kinds of studies and this kind of data,” Dr. Horvitz said. “We’re hoping that this stimulates quite a bit of interesting conversation.” The new research is based on the ability of the Microsoft team to accurately distinguish between web searches that are casual or based on anxiety and those that are genuine searches for specific medical symptoms by people who are experiencing them, he noted. Both a computer scientist and a medical doctor by training, Dr. Horvitz said he had been exploring this area in part because of a phone conversation with a close friend who had described symptoms. Based on their conversation, Dr. Horvitz advised him to contact his doctor. He received a diagnosis of pancreatic cancer and died several months later. The availability of vast sets of behavior data based on individual web queries using the search engines offered by companies like Google and Microsoft has for a number of years been seen as a potential indicator of health-related information. In 2009, Google published a research paper that explored the potential of early detection of flu epidemics based on statistical analysis of web search logs, though the results of that effort ultimately fell short of what had been hoped. More recently, Microsoft researchers have had significant success in finding early evidence of adverse drug reactions from patterns observed in web logs. In 2013, they detected unreported side effects of prescription drugs before they were found by the Food and Drug Administration’s warning system. The researchers are exploring evidence related to a range of devastating diseases. They also said that unlike the drug interaction data, which would be of direct value to the F.D.A. as an early alert, it was possible that symptom alert data might be made available as part of a broader online health service that a company like Microsoft might offer. Source: http://www.nytimes.com ... Read more
Adrian Ababei / Jun 10'2016
Introducing Google’s New Layout: A Rich Cards-Based One
Card based design is growing more and more popular and now Google wants to get in on the action as well. Google wants to switch its mobile search results to a new design called „rich cards”. The new design is a direct successor to Google’s already popular rich snippets feature. But the makeover doesn’t stop there – Google’s planning to redesign desktop search results with a completely new layout. Google Search Gets a Makeover Rich snippets are search results composed from a preview of the page’s text as well as small pictures. Google doesn’t intend to replace rich snippets but only complement and build on them in order to improve user experience.   Rich cards will be displayed in a carousel format which is easy to navigate by simply swiping right or left. The carousel can show cards from different sites or the same site.   Webmasters are excited about Google’s makeover since it allows them to stand out in the search results and market their products more effectively. This new design based on rich cards can also improve organic traffic in some cases. Currently, Google is implementing the new layout for just two content categories: movies and recipes. Content Categories Based on Visuals Will Experience The Change First  These two content categories are perfect for this change – the visual nature of these categories will increase organic traffic for websites. Food site owners can create rich previews of their website’s content by featuring appealing images for each dish or recipe. The same applies to movie sites with graphics and posters. The main difference between the original snippets and Google’s upgraded rich card snippets is simply the number of images which webmasters can features. Rich snippets were released 6 years ago and could feature just one image in search results. Nowadays webmasters will be able to feature a series of images with the carousel system.   Before you go mobile to check out Google’s new layout keep in mind that right now only people using the English mobile version of Google can see the rich cards layout. The new layout will also experience multiple changes and improvements as Google is experimenting with new ways of providing richer previews in their search results and it’s only a matter of time before other types of content will benefit from rich card snippets. Google Webmaster Tools Gets Upgraded Google also offers integration with the Google Search Console, also known as Google Webmaster Tools – site owners will be able to see data related to their rich cards. This will help them monitor search performance more closely. If you want to check out how the rich cards work in Search just head on to Google’s Search Gallery and see screenshots of mark-up type samples and cards.   Another interesting change is Google’s Knowledge Graph – this is the system that collects information about people, things and places in order to understand how they are all connected. Knowledge Graph cards will be placed inline, effectively prioritizing them over competing website. This leads to a more cleaner and simplified look for Google’s search results.   The new desktop search design has practical features as well – now users have to scroll down to see more results – Knowledge Graph cards for locations can take up a lot of space. Here is the list of changes for Desktop Search Results: Wider tabs for News, Images and All tabs Sub-links will show up under the main result, in a group with the same cards Stories from the „in the news” list will appear in the same card The „people also search for” list will show up at the bottom of the search results page and not in the sidebar Google’s new experimental layout will surely help site owners get noticed much easier in mobile search results and receive more organic traffic. It’s likely that the carrousels will replace written text more and more and the movement towards rich, image-based snippets as opposed to simple text content is obvious. ... Read more
Adrian Ababei / Jun 09'2016
New Technologies That Speed up Your Website
The internet is constantly changing and speed is quickly becoming the major metric of progress and a key indicator for website developers. Here are a few new features which can help you speed up your website and reap the rewards of faster internet. HTTP/2 HTTP/2 was first published in May 2015 and has been supported since the second half of 2015 – HTTP/2 is a new and improved version of the WWW protocol. HTTP/2’s main improvement is the ability to cover multiple requests with a single connection – this improved ability, called multiplexing has the capacity to revolutionize the world of web designers forever. Current techniques used such as Data URIs and sprites won’t be used anymore. HTTP/1 used to be efficient when loading one large image but when it was necessary to load several smaller images the situation changed drastically – it simply wasn’t able to cover multiple concomitant requests. The new version improves this situation and HTTP/2 can handle multiple simultaneous requests with ease. HTTP/2 compresses headers before requested data is sent, which ultimately simplifies the transport by a great deal. This newer version is also non-textual and binary, unlike the previous version – this improves performance by a whopping 50%! The difficult thing about upgrading to HTTP/2 is not the HTTP itself but the fact that browsers only support it over SSL. So if you want to implement HTTP/2, the first thing you should do is get a SLL certificate. Once you have the SSL certificate, you can implement HTTP/2 on your own if you have administrator rights for your server. Otherwise, it depends on your server hosting or web hosting company. The SSL Certificate SSL certificates encrypt the connection between a client and a server. Getting your own SSL certificate is not as hard as you think – you can actually get one for free with Let’s Encrypt. Let’s Encrypt is a relatively new authority when it comes to SSL certificates – their ultimate goal is to eliminate all manual processes required to obtain a certificate. With Let’s Encrypt the whole process is automated and finished in just a couple of minutes. You can also get a certificate through your server hosting company or web hosting provider. Brotli Brotli was recently introduced by Google – this new compression algorithm will reduce the size of transported data, effectively increasing the speed of your website. Compared to other compression solutions, Brotli offers a 20 to 25% better compression ratio. As such, webmasters can save up to 40% on HTML files traffic and around 25% on JavaScript and CSS related traffic. Unfortunately, Brotli is only supported by Firefox and Chrome at the moment but other major browsers will follow soon. Major servers such as Node.js, Apache and Nginx all require a packet installation – there’s no server offering Brotli by default at the moment. Content Delivery Network A Content Delivery Network or CDN for short is a set of servers located in different parts all around the world. These servers all contain a replica of your website and all its assets – software, videos, images, etc. When someone accesses your website, the data is loaded from a server that’s closer to the visitor, thus increasing your website’s loading speed. Another advantage to CDN systems is the improved reliability of your website – the content is spread around many other servers which means that your hosting server doesn’t have to bear such a large load of traffic. Usually, websites that use a CDN system will load 50% faster compared to regular websites which use only one hosting server. ... Read more
Adrian Ababei / Jun 07'2016
A Look into the Future of Technology: WebGL Will Soon Replace Flash
Back in the day projects featuring crazy sound effects, animations and interactions were all the rage. These effects created intense user experiences hence is why they became so popular – most of these projects were built using Adobe Flash. Flash is close to death and the era of rich multimedia platforms has come to an end but there’s good news – a fresher successor will replace Flash. Three.js and WebGL technologies are growing very fast, allowing developers to create projects similar to those built in Flash but without any security issues. The Three.js and WebGL combo is one of the most powerful tools you can use to create immersive UX. WebGL and Three.js WebGL is the foundation that provides developers with ways to manipulate interactive 2D and 3D graphic elements. It allows users to mix elements with HTML and combine them with other constituents of the background or page. On the other hand, Three.js is a Javascript library with a long list of features which allow developers to operate with geometry, lights, cameras, scenes and more. Three.js helps unlock WebGL’s true potential by adding extra functionality options. With these two in place, it’s very easy to create 3D animations accelerated through GPU without needing any browser plugins. Compatibility issues   When different technologies get combined, dilemmas appear – should you create a “one size fits all” project that can run on different devices and offer consistent experience or risk it all and impress the audience you can reach. When working with Three.js and WebGL it’s the same. Most mobile browsers can be a real hassle especially since many users are stuck with legacy browsers – full compatibility can be tricky to achieve. The good news is that support is growing and the technologies are developing fast – as long as you don’t use Three.js and WebGL for any critical part of your project, you should be fine. ... Read more
Adrian Ababei / Jun 06'2016
Meet WebGazer: The Free Technology that Turns Your Webcam into an Eye Tracker
Eye tracking technology has been in the research phase for quite a while now but the good news is that this new software opens the door to it for anyone with a website. Just about any website owner can use Webgazer to optimize their content and graphics.   WebGazer – where it all began WebGazer.js was developed by the scientists at Brown University – it’s very easy to implement and can be added to any site in just a couple of minutes with a few lines of code. The software runs on the website visitor’s browser, effectively turning the webcam into an eye tracker which can see where the visitor is looking on the page. The idea behind this is to help developers make websites more user friendly by optimizing content. Once the software is embedded onto a website, WebGazer will ask users for permission to access their webcams – once permission is given, WebGazer will use face detection software to locate the user’s eyes and face. The program will then convert the image to black and white in order to clearly distinguish the user’s eyes and iris. Once the iris is located, the system uses a statistical model which is calibrated via the user’s cursor movements and clicks. This model works by assuming that a visitor looks at the spot where they just clicked and each click tells the model where the eye looks when it’s viewing a part of the page. Reasonable calibration is achieved in around three clicks and after that WebGazer can accurately guess the viewer’s gaze in real time. Alexandra Papoutsaki, a graduate student from Brown University states: “We see this as a democratization of eye-tracking. Anyone can add WebGazer to their site and get a much richer set of analytics compared to just tracking clicks or cursor movements.”   Privacy and experiments There’s no need to worry about privacy when using WebGazer as no video is shared through the software – only the user’s gaze is reported back to the website. Alexandra P. performed a few experiments in order to properly test and evaluate the system – results show that it can infer gaze location in 100-200 screen pixels. While this may not be as accurate as commercial eye tracking software, it’s still a good estimation of where your users are looking. WebGazer could help developers optimize their pages, create more eye catching content or plan their prices space accordingly. Not only that but in the future we might see WebGazer being used for accessibility reasons or eye controlled gaming. WebGazer’s code is currently available for free use by anyone interested.  It will be fascinating to see how WebGazer will evolve and change the way we view the web. ... Read more
Adrian Ababei / Jun 03'2016
Speed And Mobile Testing Just Got Easier
Google recently launched a new tool which aims to help business owners determine their website speed and mobile friendliness on tablets and smartphones.Mobile searches recently surpassed desktop searches and since more and more people surf the internet through mobile devices it’s critical for webmasters to check if their website is performant, functional, accessible and mobile friendly. Google’s New ToolGoogle’s new website testing tool is very simple and user friendly – you don’t have to be a technical person to try it out. Just type in your website’s address and the tool will analyse your site, scoring it according to certain requirements. The tool offers more detailed reports as well as suggestions on how to fix things – you can then use this information yourself or pass it along to your webmaster.Google offers plenty of testing tools for sites, including the Mobile Friendly Test, PageSpeed Insights and PageSpeed Tools but most of these tools are aimed at users with some technical knowledge – the new testing tool is aimed at business owners and non-technical users simply through its ease of use. Faster resultsThe tool shows scores in green for good, yellow for fair and red for poor. The user interface is greatly simplified as well. That being said, the new tool is powered by PageSpeed Insights – the idea is to get a fast overview of your website’s speed, mobile friendliness and performance at a glance.Google has increased its effort on mobile web where it created new technologies such as Accelerated Mobile Pages or AMP – these pages load much faster than web pages and use much less data. Google’s search algorithm has also been updated and having a mobile friendly website is more important than ever. More and more users shift to mobile devices and Google is paving the way to a more pleasurable user experience for all parties involved.... Read more
Adrian Ababei / Jun 02'2016