DEV Community: robinjangu

Top 5 Most Popular Desktop Browsers in 2018

robinjangu — Thu, 04 Aug 2022 10:19:00 +0000

Browsers rule over internet like gods. It’s amazing how a few line of code lets you explore the virtual world with such finesse. I made a bet with my colleague so as to which browser will win the popularity contest in the office. Needless to say, I had my chips on Chrome.

I won, but it was really close. With the intent of exploring more and expanding my data set, I turned to internet.

1>Google Chrome

Important Stats

Browsershare as per W3Schools : 66.17%
Browsershare as per Stats Counter: 77.9 %
Latest Browser Versions: 66.0.3359
Most Popular Browser Version: 63

Over the past few years, a lot of browsers tried to dethrone chrome but failed. Many have fallen in love with chrome and more will fall. Chrome is high performance google browser that is best simply because it is as fast as it is stable. Having backed by Google, the chrome ecosystem is vast. Be it powerful tools, extensions the compatibility and integrity of chrome is simply seamless.

On visiting multiple sources to find out the percentage share of browsers, it was clear that chrome is the king. With 65% (approx.) browser market, chrome seems to be miles ahead.
The leading browser statistics like W3school and Statcounter all agree that google chrome is the undisputed crown prince. Google has been very careful while designing chrome. You can simply surf on the internet reading, shopping while having no technological background and on the other hand it is highly customizable with variety of DevTools library for your tech knack.

Chrome is infamous for being too resource hungry. If you have resources available readily on your machine then chrome is best.

Google has always strived for perfection and in order to accomplish that they have started working on new and innovative features.

Generating a password can be hectic, as certain websites puts too much restriction. To help the modern user in making a strong password, chrome provides you with suggestions.
Another brilliant feature in chrome is the multi tab multimedia control, listen to your favorite music while putting all of the other multimedia at rest.
Chrome also supports advanced Virtual Reality tech, and using chrome you can view the VR content without any other specialized softwares.

2>Mozilla Firefox

Important Stats

Browsershare as per W3Schools : 11.78%
Browsershare as per Stats Counter: 11.8 %
Latest Browser Versions: 59.0.3
Most Popular Browser Version: 58

Up until last year there seemed no browser that could challenge chrome, that was until the latest version of firefox was released last year. Newly developed UI is very impressive and the fact that its performance is almost equal to Chrome, brings Firefox again closer to the browser race. Right now it is the best alternative to chrome. In fact the new versions of Firefox are more customizable. Quantum, the new web engine empowers the browser by using multiple processor cores and uses a new CSS engine to reduce memory and power utilization and tweak performance.

There is a general trend that with ubuntu and linux versions of OS, Firefox works very efficiently. Talking about community and ecosystem, it is no less than chrome in any field. MDN (Mozilla Developers Network) in the last few months has seen great support from the community, more and more people are supporting this powerful yet effective browser.

Contrary to chrome, the resource utilization of Firefox is also minimal. It is a light powerful browser that goes easy on your RAM.

To improve the performance and optimize resource use, Firefox uses several techniques. If the new tab you opened is within the navigation of a certain website, then instead of loading the whole page it duplicates most of the data resulting in faster navigation.
Firefox Multi-Account Containers lets you keep parts of your online life separated into color-coded tabs that preserve your privacy. Cookies are separated by container, allowing you to use the web with multiple identities or accounts simultaneously.

3>Edge and Explorer

Important Stats

Browsershare as per W3Schools : 11.43%
Browsershare as per Stats Counter: 8.1 %
Latest Browser Versions: 41.16299.15.0 & 11.0.56 resp.
Most Popular Browser Version: 16 & 11 resp

Internet explorer is widely criticised all around the world for crashing badly and Edge for lacking backward compatibility. Microsoft offers this pair to satisfy the browsing needs. Microsoft follows this approach as Edge is a more user friendly on the other hand Explorer scales better for enterprise.

The biggest pro of Edge seems to be its integration with windows 10 and also in tablets edge seems to perform well. The integration with Cortana also seems to be going well as far as Microsoft is concerned. Grudges aside Edge seems to be a pleasant experience, it is apparent that Microsoft learnt from the mistakes that led to explorer’s downfall.

Explorer, once used to be the undisputed king lags behind its two competitors. Internet Explorer 11 has all the good qualities of a good browser. Clean, fast, highly compatible and in addition uses a lot less RAM than Chrome and Firefox. The only problem is the lack of add-ons and extensions that its competitors seems to have.

To better suit the modern user Microsoft too has involved certain features.

You can scribble over web pages for future reference and even share with other people, the feature seems simple but it can ease a lot of tasks.
Cortana is efficiently integrated with the framework of Edge making it a brilliant positive point for Edge.

If you are new to Playwright Automation, this is for you: Getting Started With Playwright Framework.

4>Safari

Important Stats

Browsershare as per W3Schools : 5.48%
Browsershare as per Stats Counter: 3.3 %
Latest Browser Versions: 11
Most Popular Browser Version: Safari iphone

The reason of Safari’s success is that it is the browser for Apple devices specifically. But last few years marked owners deserting the company browser and started switching to chrome. A recent fall in safari users indicate that chrome seems to be infiltrating the Apple computers.
Powered by WebKit engine Safari has everything a modern browser needs. Nitro JavaScript engine is indeed fast. With features like speculative loading, which loads documents, scripts and style information ahead of time.Safari tools integration too favors the Mac needs, Safari-reader for distraction free reading. In addition to the tools there are a lot of extensions which you can use. For Apple devices Safari seems to be the fastest.

Safari too has evolved into a brilliant browser with a few ace features up its sleeve.

Safari offers native support for Netflix and plays HTML5 video everywhere it’s available.
Safari runs web pages in separate processes, any harmful code you come across in one page is confined to a single browser tab, so it can’t crash the whole browser or access your data. The process is called Sandboxing.

Check this out: Test Selenium Automation- Test on Selenium Grid Cloud of 3000+ Desktop & Mobile Browsers. Test in parallel and cut down test execution by more than 10x.

5>Opera

Important Stats

Browsershare as per W3Schools : 2.33%
Browsershare as per Stats Counter: 1.5 %
Latest Browser Versions: 52.0.2871.99
Most Popular Browser Version: Opera mini 32

Opera shares a lot of similarities with chrome, having evolved from chromium engine it is very light. Opera is really fast browser with a wonderful and neat UI. It can do everything that its competitors can do.

The most unique feature of Opera is its Turbo mode that serves your browsing needs very efficiently even when the connection is poor. Turbo mode compresses your web traffic and by routing it through opera’s servers it provides you with seamless browsing. The routing algorithms of opera are really great, while visiting secure sites it lets you go free with the traffic. Privacy and security is given due attention while you browse on opera.

Opera also comes with an inbuilt ad-blocker, which can be turned off though and also a battery saving mode for longer battery life. You also get an inbuilt VPN to tackle any ISP restrictions. You can use some of the chrome extensions on opera. The only problem with opers is the support and ecosystem being still too young, I am sure that more people will opt opera because it is indeed amazing.

Opera lets you pin icons to toolbars and its homepage to get you to your favorite websites fast.
While most browsers feel like “Chrome alternatives,” Opera very much has its own identity.
Facebook and Whatsapp are just a click away with Opera.

Mobile Browsers

When it comes to mobile browsers, chrome leads worldwide with more than 50% of the market share. While once Android browsers held the crown the improved version of chrome seems to have shook the mobile market. Chrome Beta 67 (67.0.3396.29) is the latest version . While in U.S. Safari managed to be holding half percentage of market. The competition seems tough as UC web, Firefox and newcomers like Dolphin browser have entered the mobile browser market.

Ecosia Browser is a new browser which has all the browsing features and in addition to that it donates 80% of its profits to plant trees, and it is free too.

Check this out: Cypress Cloud- Execute & analyse Cypress test scripts online. Deploy quality builds faster with 40+ browser versions on cloud.

Conclusion

The more the competition, better will the browsers. The battle between these browsers has pushed their creators further into the uncharted domains of latest web technologies. While new innovations seem to roll out every now and then, the current scenario seems to favor the Chrome. Firefox is runner up, however this open source browser has potential to displace the leaders as with Quantum they are growing at an unprecedented rate. If Microsoft combines the two separate products IE and Edge they can too hope of getting the market share, as the integrability with windows 10 shows a lot of promise. Safari and Opera both seems to be working well and targeted a specific audience, both have shown promise in mobile browsing. Overall the situation seems to be benefiting us users.

Take care and happy browsing!

Breaking Mobile Website Compatibility Barriers In 2018

robinjangu — Wed, 03 Aug 2022 10:45:00 +0000

Apple has 18+ different types of smartphone devices, android has thousands. Each one a little different in their underlying technology and therefore renders a webpage a little differently. Cross Browser compatibility is not limited to desktop browsers. You need to make sure that your website is cross mobile browser compatible as well.

Mobile First Approach

When you hear the word ‘Millennial’, what’s the first image that pops into your head?

A cool hip guy/girl wearing skinny denims, face immersed in mobile phone.

The last decade has seen drastic changes, with more and more people getting access to the world wide web. The race of making device unique, has pushed the mobile companies to go to extreme ends to attract the users. The situation in 2K18 is such that mobile users have overtaken desktop users, on an average we spend more than 90 hours a month online latched onto the powerful smartphones. That’s twice the Desktop traffic.

This huge popularity of mobiles has now forced companies to think mobile first. In this approach, the websites are developed first for mobiles then onto bigger screens.

The biggest hurdle is optimization of UI and UX for mobiles. The era of buttons in mobile phones has long sailed away, screen touch is the new thing. You need to curate the website elements to provide a seamless experience for mobile browsing.
For building websites through this approach mobile devices should be the focus meanwhile keeping the content to the very core of the development.

Problems faced with Mobile Compatibility

You can never be sure as to where your users may try to reach, you have to be ready for everything. Average phones these days offer more than 1 GB RAM, which packs enough power to support the latest mobile technologies. The hardware and software modifications have made these phones equal to desktops, to some extent more as they provide additional features. To make mobile browser compatible websites requires knowledge about the features that are supported.

Responsive Design

While designing the layout of your website you need to make sure that it must be responsive. Basically a responsive website is one which makes use of the browser resolution and adjust accordingly. This can only be achieved with perfection when kept a closed eye during the development of website. Not even the design but also the elements of the website must be scalable too i.e. they should adapt to the changing resolution.

The most prominent difference between a desktop website and a mobile website is that the mobile website is compact. To achieve this collapsible menu and widgets are used and in doing so the UI too becomes clean and sleek. Also while developing try to linearize the elements into a single column and shrinking the header.

In case you are looking for a free next-gen browser to build, test & debug mobile websites you can try LT Browser a dev-friendly browser in which you can see the mobile view of your website on Android and iOS resolutions & check its responsiveness.

DOWNLOAD LT BROWSER

Check this out: Playwright Automation Online- Run your Playwright test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud. Execute Playwright testing in parallel and cut down your test execution time by multiple folds.

How to make Website Responsive?

There are basically three kinds of designs.

Fixed layout is the one which is the least or almost non responsive, certain sites are built just for the sake of protocol. These sites don’t have a lot of traffic or they don’t perform business online.
Adaptive designs are solutions offered to make already existing website in case of less resources. These designs are specifically made to target certain kinds of browsers. This method may be implemented when you have browser specific issues that can be resolved using additional CSS queries.
Fluid designs, as the name itself indicates point to the UI elements stack like a fluid. The most trending layout makes the elements extremely adaptable to the resolution changes and in the process you can make websites responsive. The thing with this method is that you’ll need to make the website from the scratch and it will cost you.

Mobile Browser Compatible Websites and Web Apps Development Frameworks

While developing a website you must be very careful of choosing the correct framework as only by choosing an apt framework you can achieve efficiency. If you are building the website using the JavaScript then try to go for smaller frameworks or libraries, this will not only help you tackle compatibility in browsers but also tweak the general performance of the website.

Preact

Emerging from react, it is powerful and compact library that has extensive use in mobile related app as well as website building. The Framework gained serious popularity after being deployed by a number of websites. If you want the functionalities of react but don’t want a lot of heavy features then this is the framework to go for.

Respond.js

If you are dealing with old browser versions in general then this is the library to go for. It offers a wide range of solutions in order to make the site responsive by toggling different scripts.

Adapt.960.js

This has a list of browsers specific scripts for executing complementing codes for CSS.

Bootstrap

An open source toolkit adored by everyone, Bootstrap made it extremely easy for making mobile-first designs responsive. Using this tool you can uncover all the aspects of leading Front-end libraries and provide you with breathtaking themes. Read more about it in the link mentioned below.

Top 10 Bootstrap Themes

Check this out: Cypress Test Automation Online- Execute & analyse Cypress testing scripts online. Deploy quality builds faster with 40+ browser versions on cloud.

Unsupported Features

With mobile-first approach you need to ensure that the features or the technology that you are using is supported by the mobile browser. Websites in general use a great lot of modern techniques using HTML, CSS and JS. During my research I found that mobile browsers lack support for a lot of such features.

Ogg/Theora video format

A wonderful format that is used these days for compressing videos. Certain mobile browsers like opera mini, chrome for android lack support for the same.

Custom protocol handling

It is a method for webpages to handle a given protocol using navigator.registerProtocolHandler. This allows certain URLs to be opened by a given web application.

Speech Recognition API

Giving verbal commands for the browsers also poses hurdles as most of the mobile browsers don’t support this yet.

Network Information API

The API gives web applications access to the network information, this feature is partially supported by the mobile browsers.

Full Screen API

This feature allows the video or media to take up whole screen.

Shared Web Workers

It is a method for allowing multiple scripts to communicate with a web worker.

Check this out: Test Selenium Automation Cloud- Exponentially increase your browser coverage by running your Selenium scripts on a cloud of 3000+ different desktop and mobile environments.

Conclusion

The inevitable shift of Business onto mobile devices has started, you need to take advantage of this wonderful opportunity. More mobile users will definitely profit you but only if you make your websites mobile friendly. Apart from the above mentioned features there are a lot more of CSS unsupported features that you must look out for, as they may vary with different mobile devices and browsers.

Perform comprehensive tests on your website to make it mobile compatible using LambdaTest.

And never stop perfecting, learn as much as you can.

Top Safari Browser Compatibility Issues in 2018

robinjangu — Tue, 02 Aug 2022 17:22:00 +0000

Apple offers a wonderful browser, power packed with state of the art web technology usage. Safari has a neat UI, good browsing speed and offers unique curated features. It is true that chrome has started infiltrating the apple machines for a while now, but Safari still grips crucial browser share. Taking into consideration it becomes paramount that the websites should pass the litmus test for performance in Safari. Webkit engine fueled with nitro JavaScript surely makes your browser experience smooth, but while making websites more compatible with it you need to abide by a few rules.

Guidelines issued by Apple dictate the use of standard supported CSS, HTML and Javascript (ECMA6) content. For most common websites, latest Safari works normally like any other browser, but if the website has used anything novel, it gets into trouble. Apple is fast in keeping up with new tech. However when it comes to browsers, it is nowhere near as fast as Chrome or Firefox. While there can a lot of issues that may handicap your website, I have listed the major issues that will definitely put a dent on your website performance if not taken care of.

CSS

Unsupported CSS is the root cause for a lot of cross browser compatibility issues, same is the case with Safari too. The race for efficient styled content has led the developers to using the latest web technologies that sometimes lack the browser support. While it is advisable to aim for responsive design techniques to make styling flexible for multiple viewports, let us look for the features that lack support in the latest 11.1 version and which should be avoided.

CSSOM Scroll Behavior

It is a method for specifying scroll behavior for scrolling box, navigational scrolling specifically.

Web Animations API.

Lets you create animations that are run in browser and as well as inspect and manipulate animations created through declarative means like CSS.

CSS Containment

If you use this to limit the CSS content to boost the website efficiency, then switch to alternate method.

CSS Touch- action property

It keeps in check the control filtering of gesture events, developer options to selective disabling of touch scrolling.

CSS Text alignment lastCSS Overscroll BehaviorCSS Motion Path

ECMA 6

While Safari offers support to a wide range of ECMA 6 features like Geolocation API, and exclusively offers features like Tail Call optimisation which you can exploit efficiently, there are a few unsupported features.

Shared memory and atomicAsynchronous iteratorsLookbehind assertions in the RegExpBackground sync API

Multimedia

You must be extremely careful while choosing the multimedia formats as Safari has issues with certain formats. Forget about Flash-plugins, below mentioned are a few of the formats that lack the Safari support.

Media Recorder API

Mediastream recording targets to provide simplistic approach deployed by developers to record media from the user input and instantly use them in web apps, rather than having to perform manual encoding operations over and over again.

Ogg Vorbis audio format

Vorbis is a free and open source, commonly used in the Ogg container.

Ogg/ Theora video format

Free lossy video compression format.

WebM video format

Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM supports the video codec VP8 and VP9.

Opus

Another open codec by IETF, which incorporated SILK from Skype and CELT from Xiph.org, to serve higher sound quality and lower latency bit rate.

Check this out: Playwright Automated Testing Online- Run your Playwright test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud. Execute Playwright testing in parallel and cut down your test execution time by multiple folds.

Transport Layer problems

Safari has issues with some of the Transport layer features consistently. We take a look at the features that to this date haven’t given due attention.

TLS 1.3

Safari seems to lack support for the upcoming version of the Transport Layer Security (TLS) Protocol which will remove the weaker elliptic curves and hash functions. Both Chrome and Firefox are ahead of the curve with stable versions supporting the TLS.

ChaCha20 cipher suites

A set of cipher suites in TLS protocol which use symmetric encryption, in addition Poly 1305 which is used for authentication is also not given due attention by Safari.

Some more important features that remain without support are as follows:

Resource Hints: Prefetch

This feature is used and supported by leading browsers, informs the browsers so as to which resources should be prefetched in order for them to load more quickly.

Resize Observer

Observing and reacting to the changes occuring in the size of DOM.

Permission API

High level JavaScript API for checking and requesting permissions.

HTML Imports

Method of including and reusing HTML documents in other HTML documents.

Web MIDI API

The web MIDI API specification defines a means for web developers to enumerate, manipulate and access MIDI devices.

Public Key Pinning

Declare that a website’s HTTP certificate should only be treated as valid if the public key is contained in a specified list to prevent MITM attacks that use valid CA-issued certificates.

Web Authentication API

The Web Authentication API is an extension of the Credential Management API that enables strong authentication with public key cryptography, enabling password-less authentication or secure second-factor authentication without SMS texts.

Visualizing Layer in Web Inspector

The layers tab is an experiment feature for Web inspector and I must say it is quite helpful. On First look it may look similar to the Firefox’s Tilt however there is a difference as Layer tab gives a 3-D visualization of the inspected page’s compositing layer and informs how they are rendered whereas Tilt provides visual representation of DOM tree.

The 3-D representation of rendering has potential to eradicate a lot of performance issues, the feature has long term benefits of debugging.

Check this out: Cypress Test Automation Online- Execute & analyse Cypress testing scripts online. Deploy quality builds faster with 40+ browser versions on cloud

PWA Support

It seems that Safari finally realized that PWA’s are the future, Apple has finally made up its mind to support them wholeheartedly. If you want to know more about PWA, click on the below mentioned link.

Planning To Move Your App To A PWA: All You Need To Know

Service Worker API

Service workers hold the key for successful web apps as they provide a way to run the javascript in the background. Software giants including the E-commerce websites like Flipkart, Amazon, Aliexpress have all started focusing on PWA. With service worker support now the realization of fully functional PWA including offline access, faster and improved caching and last but no the lease push notification. Without SW users of Safari would not have been able to witness the miracle of PWA.

Web App Manifest

If you have any experience with PWA, you must know that even with SW support you’ll still need Web App Manifest to unleash the true potential of the PWA. Apple on 24th October last year announced that implementation of the Web App Manifest has started in Webkit. They will enable the users to configure the meta data in order to define how the app will be launched. Soon you’ll be able to add them to the home screen.

Check this out: Selenium Automation Cloud - Test on Selenium Grid Cloud of 3000+ Desktop & Mobile Browsers

Conclusion

With strong backing by Apple, Safari is not going to become obsolete anytime soon. Although by following the above steps, you can ensure website compatibility on Safari but it is of utmost importance that while developing you should be neutral and make a website that in true sense will be Cross Browser Compatible. We at LambdaTest provide solutions to all your testing needs, test your website on LambdaTest to find out additional problems.

Incompatible Multimedia Formats to look out for in 2018

robinjangu — Mon, 01 Aug 2022 08:10:00 +0000

Ever come across a wonderful website with lovely design and catchy animation, that you can’t help but fall in love with it?
One must have experienced such wonders as the internet has countless of them. Today, Multimedia has become a necessity for any modern website. Be it a meme that got shared, be it a tutorial video, an audio format or an animation that entertains the user during the loading time.

Multimedia is a perfect way of imparting knowledge, as visualization contracts the learning curve.

Check this out: Online Automation Testing Platform - Accelerate your release velocity with blazing fast test automation on cloud.

Codecs and their support

A codec is a program that speeds up the transfer of Multimedia by compressing then coding and decoding the file. These codecs support different Multimedia format and it is the duty of the web developer to keep in check what sort of formats are supported by the various browsers and their versions. Join in as we explore the numerous multimedia formats.

WebM

It is a restricted version of the Matroska format that allows VP8 or VP9 video codec and the Vorbis or Opus audio codec. While it has been accused of patent infringement by a group of companies which lead to formation of patent pool but MPEG LA have agreed to license to google.

Ogg Theora Vorbis

Ogg is the container and Theora is the video codec, while it supports majority of browsers like firefox, chrome, opera and to some extent can be used with safari by installing add-ons. Internet explorer lacks support completely. This format can be implemented for old browsers since the earlier versions lack support of the latest formats.

Ogg Opus

Ogg container sometimes facilitates audio encoding with the help of Opus codec. The format has wide support in mostly firefox browsers and also mobile browsers.

Ogg FLAC

It is very much similar with difference being the use of FLAC codec for encoding extensively used by Firefox, Thunderbird and SeaMonkey in both desktop and mobile.

MP4 (AAC or MP3)

Using H.264 video codec and AAC audio codec, it is widely supported by both desktops and mobiles. Internet Explorer, Safari and Chrome support this wonderful browser, however Chromium and opera lack proper support. H.264 is currently not a royalty free format, it is therefore unfit for open web platform. Mozilla wholeheartedly supports this format as google lacks .

MP4 FLAC

Using the FLAC codec MP4 files can be played with or without MediaSource Extension and DRM support.

MP3

MP3 audio format is different from the MP3 audio contained within the MP4 container, it is actually supported in audio tag. Firefox, Chrome, Safari and android mobile browsers support this format too.

WAVE PCM

The WAVE container format, taps into the PCM audio codec, it is supported by desktop browsers such as Firefox and Safari along with mobile browsers.

FLAC

The format has support in the mozilla browser. Files are worked upon using FLAC audio/video codec.

Wav audio format

Waveform Audio Format, aka WAV or WAVE, a typically compressed audio format.

Do you know you can perform cross browser testing with Android emulator. Ditch your in-house android browser emulator and test your website on cloud with official android emulators online.

Animations today

In the starting I mentioned about animations that steal your heart. Animations had always been part of the society but earlier the bandwidth didn’t allow them. Today, the scenario is different altogether. It is now possible to include animations in various new formats that not only catch the attention of the user but also do that without hindering with the efficiency of website.

Websites offer animations in different formats like GIF,SVG or simply video. Before this Flash was extensively used for this. But now the progress in CSS, HTML, canvas, JavaScript etc has solved the puzzle. New web animation API boosts up the animation making them easier and quicker for browsers to process.

Adobe too has made it clear that they will terminate the Flash support by 2020.
People use animations in UI quite a lot, in the logos, loading screen, chat bots, hovering media and animations are made in a way that they sooth the user’s eye. Following are the animation directives that you should take a look before you put animations in your website.

CSS Animation

It is a complex method that grants the designer with the power of animating element properties. Almost all the browsers including mobile browsers support this except Opera Mini.

Web Animations API

This API lets you create animations as well as manipulate and inspect them through declarative means like CSS. While Firefox supports it completely, google along with android chrome,UC and Samsung offer partial support and IE, Edge, Safari, Opera offer none.

requestAnimationFrame

This API allows efficient ways of running script-based animation, compared to traditional methods using timeouts. This is supported by almost all browsers except Opera Mini.

SVG SMIL animation

It enables the method of using animation elements to animate SVG images. SVG is the new upcomer in the media and all browsers except IE, Edge and Opera Mini support them.

Certain methods that enable SMIL animation in the web pages, namely XHTML and SMIL animation used in web pages have no browser support yet.

Check this out: what is Regression testing, its importance and types, and how to perform it.

Conclusion

Compatibility with multimedia is really necessary as without multimedia your website will be mundane. Ensure that your animation is supported too. Unsupported HTML5 and CSS3 amounts for most of the compatibility issues, understanding them would solve half of our problems. Multimedia files have a special place in content, it is up-to us to choose browser compatible formats and codecs till the time there is a standard format.

Till then, Goodbye!

Cross Browser Compatibility in WordPress Websites

robinjangu — Fri, 29 Jul 2022 10:20:00 +0000

WordPress is like a lighthouse, that lightens up 30% of the internet. Pivotal reason behind it’s huge success is the level of customization that it offers along with huge amount of community support in the form of plugins, themes, extensions, etc. .
You can make a state of the art website with all the modern web technologies or simply a plug and play website for blog posts.

WordPress is easy to use, easy to deploy, easy to customize, easy to scale, easy to maintain, and easy to learn. So, if so many people are using then it must be easy to make the WordPress website cross browser compatible. But everything is not rainbows and unicorns in the internet world.

“With great customization, comes great responsibility for compatibility”.

Whoever said it, must have been given task of achieving cross browser compatibility.

Each and every website made from it, is uniquely built to serve distinct purpose and nearly every website is a little different in design and content. Out of the box WordPress is not adequate enough to power custom business needs. To make up for functionality gaps, webmasters use third party themes and plugins, along with custom CSS and JS codes.Developers use a wide range of API’s, features and technologies to fulfill the requirements. And that’s from where cross browser compatibility issues start.

Now perform live interactive manual testing of your WordPress websites on LambdaTest.

Source of Browser Compatibility Issues in WordPress

A problem with having too many unknown components integrated within your website is that when there is an issue with the website then debugging gets complex. Plug-in, API, Templates and many more supporting customization allows you to curate a wonderful UI & UX.

Browser Compatible WordPress Themes

Who doesn’t like beautiful and customizable themes, probably a guy who feels browser compatibility should also be a necessity. If you don’t choose/make a cross browser compatible theme, then in layman terms you are doomed. Website won’t work with certain browsers and versions or elements may behave in an abrupt and unusual manner.

It is not mandatory that you have to make yourself a theme from the scratch, there are open source theme templates available. While making theme WordPress offers directives to ensure website’s theme is fully operational.

Out of the box WordPress software based websites are pretty cross browser compatible. However as I said before, nobody uses vanilla wordpress.

Layout:

Layout builder plugin makes it so easy to design a website layout, with simple and efficient UI. While it makes it easier to setup the layout, but it doesn’t at all guarantee browser compatibility. Overlooked details become the compatibility nightmares. If you don’t want them to haunt you then you must always test your website to resolve layout discrepancies. Most of the issues are due to the lack of responsiveness that spawns compatibility anomalies across different devices.

Templates:

They are predefined designs which you modify to fit for your website’s modus operandi. As a theme developer, templates provide theme users with more flexibility and modification levels in themes. PHP knowledge is required to deal and customize templates to suit your themes. WordPress templates are made up of PHP and HTML. While developing you have to abide by a few extra rules. For instance a few words are reserved by WordPress that can’t be used as filenames.

Buttons:

Everyone likes customized and unique buttons on their website. With new HTML & CSS, you can bring your imagination into reality. The problem with them is that different browsers offers different degrees of customizations to the developers and designers.

Navigation:

Most of the websites use Bootstrap, while it reduces the time for setting up the website. Sometimes there are issues with certain functionalities which cripple the navigation. You must be very careful while choosing and while doing so look for cross browser compatibility. Often times, website suffers navigational issues on mobile devices especially.

Hey! Do you know you can perform cross browser testing with Android emulator. Ditch your in-house android browser emulator and test your website on cloud with official android emulators online.

Media

As the bandwidth opened up, new possibilities came up cruising. Faster connections contributed to the rise of multimedia content. Audio/video streams have taken the place besides images in the mainstream content. The latest chrome version will feature picture search bar which will show relevant images to the search. Latest surveys reveals that the habitual internet users never return to the websites with incompatible media formats. Cross browser compatible formats are crucial if you wish for your website’s success.

Language barriers and Compatibility

It doesn’t at all matter what type of language or framework you are using. As long as you address the elephant in the room named compatibility. The stack you want to use is for you to decide based on the functionalities and features that you wish to have. A leading number of websites have started using JavaScript because of the extensive ecosystem surrounding the wonderful language.

‘JavaScript shares your burden by letting you use predefined libraries that take care of browser compatibility.’

It is a white lie told and believed by amateur developers, in reality nothing fits perfectly. You have to mold the script code to suit your requirements. Same goes with other languages too.

Glitches in the Matrix

To make your WordPress website compatible, you have to wrestle the CSS and HTML issues. If you trace the issues back, it will lead to the browsers.

Yes! Browsers are the reason cross browser compatibility exists in the first place.

All browsers have different and unique features, the support too is selective for every version let alone different browsers. The disparity breeds compatibility issues as developers usually have a certain browser in their mind while building a website.

The only viable solution is straightforward, don’t keep in mind any particular browser. Keep up to date with the addition and deprecation of features in all the major browsers that people use to access your website. The styling theme or design that you might use should be cross browser compatible. Make your website responsive and ensure it by testing.

Check this out if you are looking for Regression testing: what is Regression testing, its importance and types, and how to perform it.

Complex Problems, Easy Solutions

While complete cross browser compatibility is our aim, your priority should be fixing the website for the browsers/devices that your users use. If you don’t already know then I must suggest you to understand Google Analytics, KISSmetrics, FoxMetrics, Clicky and Piwik. These are wonderful tools that enable you to understand the website statistics and user behavior. By using such tool you are able to identify with what kind of browser version, devices, geography of user base, and other data that helps you synchronize with them.
Now, after finding about everything, the real work begins. Test your website in those browsers to find out about the bugs that infest different browsers. In case you don’t have any idea about the issues that arise due to unsupported features then I suggest you read about the browsers in their own developer blogs. Browsers like Mozilla and Chrome offer you with variety of DevTools to make your website efficient and compatible. You can also take the help of wonderful websites such as Caniuse and W3schools.

Code validation is the final nail in the coffin, it will put to rest the compatibility problems. There are countless online validation that offer this service for free.

Check this out: Online Automation Testing Platform - Accelerate your release velocity with blazing fast test automation on cloud.

Epilogue

In the road to browser compatibility there are a thousand hurdles. It is a gradual process that demands you to be flexible as well as following the rigid directives and rules set by the different browsers. There will never be a time that all the browsers will have standard guidelines, for the essence of uniqueness will be lost. It is and will be the responsibility of the curator to make sure that your wonderful WordPress website doesn’t fall in compatibility pit. You are not alone in it, there is a strong community that backs WordPress. All you have to do is try your best and definitely you will succeed.

Until next time!

Guide to Browser Compatibility for Online Learning Platforms

robinjangu — Thu, 28 Jul 2022 11:05:00 +0000

Cross Browser Compatibility is not limited to high end business or eCommerce websites. It is not just limited to just a testing process or checkbox to tick to signify test completion. Cross Browser compatibility testing plays a vital in making sure that cutting edge technology innovations benefit a broad spectrum of audience, changing their life forever. And no other industry understands the need of cross browser and cross device compatibility than education technology industry.

Developing Smart Educational WebApps

I remember sitting in the classroom, hoping I had a pause button. Almost everybody would empathize with the students being forced to attend long lectures.

That is something that is rapidly changing right now. Edutech or educational technology companies are at the forefront of bringing revolutionary changes on how we learn and educate and most of this innovation is happening through digital online media.

With students getting smarter, it is our moral duty that we deliver the smart education that they deserve. Thanks to the new education technologies, the scenario has taken digital turn. Feature rich websites with addictive content have made learning fun again. Students now have the pause button, that enables self pacing for the new generation of learners.

Cross Browser Compatibility?

Similar to the tests that student have to take to pass certain subjects, educational websites too have to undergo testing. You can’t impart knowledge over internet if students can’t leverage all the content. Modern educational websites exploring new web technologies to enhance the learning experience. It is the duty of developers and testers that they deliver that promise of education. While there are countless tests within a certain browser, the big picture is always cross browser compatibility.

Hey! Do you know Gray Code to Decimal converter is a free online converter that converts any gray code format into Decimal number base.

Pain Points for Edutech Support

We all know that Apple grips the US gadget industry but did you know that there are 3 million chromebook users. The fact illustrates that you can’t get away with your website working fine with one platform only. The better alternative would be to target devices and browsers that your users frequently use.

Multimedia: Most important Measure for Browser Compatibility

Developers had a hard time dealing with the multimedia, thanks to the web technologies and greater bandwidth they have more problems now! (XD)

Multimedia is at the core of any educational website’s content, if they wanted text they would go to school.It is not just audio, video and images. It has transcended to animations, emojis and gif.

Lots of hard work goes into making the informative as well as interesting videos, it would a shame to let is go to waste. I urge you to read the blogs to get more information about mistakes that developers often commit related to cross browser compatibility of multimedia formats and browser compatibility of emoji Unicode characters.

Tips:
Almost all the browsers provide with the directives on what media formats to use. Target specific browsers or you can compare the multimedia support on really descriptive websites like Caniuse. Not only for multimedia but for all the unsupported features.

Live Streaming:Real Time Communication

Thanks to the open source projects like WebRTC, real time communication through the web is now possible on the devices. Live streaming of lectures, Webinars have become seamless. But the latest technology is often backwards incompatible. While latest browsers lavishly use the feature, old browsers lack support. I am not saying to not tap into the latest web technologies but keep in mind the browsers and offer alternatives if possible.

While modern desktops are laced with the support, devices like mobile and tabs lack support for the such advanced features.

Gamification aims to inspire deeper, more engaged relationships and to change behavior, but it needs to be implemented thoughtfully. Most attempts at gamification currently miss the mark, but successful and sustainable gamification can convert customers into fans, turn work into fun, or make learning a joy.

Examining Website with Analytic tools

Anyone familiar with Google Analytics can easily determine the target browsers in seconds with 3 clicks. For those who are unfamiliar, let me blow your mind with an amazing analytics tool. Analytics tool keeps track of almost everything related to your website. They reveal the behavior of users on your website along with the keen details related to the user like the devices or even the browser versions they use.

Marketing advantages aside analytic tools like Crazy egg visually represent the heatmap of the user experience. It can be quite critical in finding the visual bugs nesting within the UI. For developers too there are wide range of analytics that make it easier to highlight the performance issues that may be unknown. I suggest you really look into analytic tools if you really want to provide the best UX to the students.

Tips:
You should look into UTM (Urchin Tracking Module), they provide greater command to you. Keeping tracks of ‘how’ and from ‘where’ the users access your website. Using UTM’s along with analytics, you can target potential users.

Do you know, decimal to roman numeral converter compares the base value of each place of decimal number and assigns a unique roman numeral associated with the decimal number.

Cloud strategy for Cross Browser Compatibility

Not only the educational websites but in general all the website with quite a stockpile of content often use cloud services. The previous year saw giants rising to the cloud computing. As a result of the competition there is a revolution in the cloud services. Innovation in the Cloud technologies have made websites efficient with lightning fast load time. Like all the other modern websites, education too relies heavily on the cloud technologies. Multimedia parsing boosted up with features like lazy loading, some services even offer responsive elements along with basic storage. Video tutorials, images of diagrams and voice of the teacher all in synchronization for delivering knowledge to the future.

Using cloud service requires keen knowledge, as integrating with them often lead to compatibility problem. Variety of rules and directives that different browsers have, is the first reason they become incompatible.

Tips:
A few of the learning websites have started using Alexa to provide the user with audio based content, many more features. Cloud is a burning service that you should get your hand into.

Frameworks to go for Educational websites

Educational websites have started to opt for gamification of the learning experiences. Online laboratories, customized software and even real educational games are being developed to enrich the learning experience with entertainment. Developing such websites is a complex task. Since most of these tasks are done using JavaScript, debugging gets even complicate. While developing such websites you need to choose the technological stack carefully. Putting too much features may pose performance problems.

Even the use of VR/AR requires intricate level of integration, API plugins lack much needed support in browsers too. Funbrain is a wonderful mix of content with framework. Who can forget W3schools for that matter.

Tips:
Try choosing isomorphic frameworks/libraries, also it is true that JavaScript is a powerful language but you needn’t use it too much. More JS injection may kill efficiency.

Want to know about Regression testing? Check this out: What is Regression testing, its importance and types, and how to perform it.

Conclusion

Education is a lifelong lesson. The moment you stop learning, is the moment you stop living. Online learning is a bliss, with the depth of mental processing is more. For all around education, it becomes necessary that digital literacy too is taken seriously. Internet is the teacher for the coming generation to learn from, let’s make it accessible for everyone. Do cross browser compatibility test for your educational website today.

Special discounts for non-profit educational websites.

Get set TEST!

Write Browser Compatible JavaScript Code using BabelJS

robinjangu — Wed, 27 Jul 2022 14:15:00 +0000

Cross browser compatibility can simply be summed up as a war between testers and developers versus the world wide web. Sometimes I feel that to achieve browser compatibility, you may need to sell your soul to devil while performing a sacrificial ritual. Even then some API plugins won’t work.(XD)

I apologize for the mental imagery, but incompatibility issues get me riled up. All this was before I wasn’t familiar with Babel.

The Rise of JavaScript Compatibility Issues

Not so long ago, the compatibility problems due to old browsers made it quite hard for the developers to solve. After the open source communities showered comprehensive support for the JavaScript frameworks/libraries, JS became viral in web development world. In the beginning however, hardcore developers had concerns. It seemed that the JavaScript was as powerful as it was heavy on the efficiency. But with rapid development in browser and digital technology, it was possible for the JS community to flourish.

With more and more developers contributing to the community, more and more framework versions came into existence. On the other hand, all browsers evolved with different philosophies following what they thought was the idea of perfection. Not all JavaScript innovations were picked up by the list of browsers for native support. This in-turn resulted in a huge gap between JavaScript language and it’s blanket support by all browsers. The older versions however were left in shambles, they lacked the support for the JavaScript. Even the different versions of frameworks when put together added to the developer’s anxiety.

Leveraging Babel for Browser Compatibility

Babel is a transpiler and a brilliant one indeed. Everyday developers face challenges when integrating the functionalities of different libraries. Different versions of JavaScript often lead to messy botched up jobs, reason for compromised efficiency.
Transpilers are often mistaken for compilers, but they are a bit different. They work on the source code and return a more sturdy compatible source code only. Developers can even customize Babel to suit them better.

Do you know? URL encoding stands for replacing certain characters in a URL with character triplets that consist of the % character followed by two hexadecimal digits. These hexadecimal digits represent the numeric values of the replaced characters. URL encoding is also called percent encoding because it uses % as an escape character.

How does it work?

Babel’s function is pretty straightforward and easy. It converts incompatible source code or the library functionality into browser supported code which your browser may find compatible. Babel does that in 3 simple steps.

Parsing

The first thing it does is finding the unsupported or incompatible parts in the code that is passed. It does that by using AST (Abstract Syntax Tree).

Abstract Syntax Tree
As the name itself indicates it is an abstract representation of code. You must have heard of JSON, Babel too works similarly. It creates a data structure of the program code which is given as input, this comes in handy. With the representation, the manipulation of code becomes easier. Simple yet effective way to solve the coding transformation.

Transforming

The highlighted part of the source code is transformed into the compatible one. This is done with the help of the AST so as not to handicap any functionality of the program. You can even customize your own Babel plug-in.

Generation

You have now the transformed code, now you need additional plugins that will help you effectively use the transpiled code. Source map helps you in this, it works well with the V8 (chrome & node js). It allows you take the transpiled to the address website url for it to parse.

Hey! Do you know URL Parser provides a quick way to break down URLs into its individual components revealing the scheme, protocol, username, password, hostname, port, domain, subdomain, tld — or top-level domain — path and query string.

Additional Babel Plugins used for Compatibility

Babel alone is not enough for your JavaScript to be compatible. You need more tool so for efficient cross browser compatibility. Webpack is another tool that helps in reducing the bundle size. Sourcemap mentioned earlier is also useful when bundling or catenating. Babel too has a lot of Presets that are used to transpile the new JavaScript code for the old browsers or solving the ECMAScript version problems. Polyfill in Babel includes a custom regenerator runtime and core.js. It emulates ES2015+ custom environment which is used in applications, meaning you can even use new built-ins like Promise, weakmap along with a couple of new Array functionalities. It automatically loads with babel.

Leading JavaScript framework/libraries like React too have abundant use of this amazing tool.

Check this out: Android Emulator - You can perform cross browser testing with Android browser emulator. Ditch your in-house android browser emulator and test your website on cloud with official android emulators online.

Conclusion

It is genuinely a great tool that has potential to resolve a lot of cross browser compatibility issues in JavaScript code. We wanted to give back to the community for showering so much love on us. LambdaTest is proud to announce that we support Babel and want it to be a great success. Till then, Keep Testing!

Top 11 Best Newsletters All Web Designers & Developers Should Subscribe Now

robinjangu — Fri, 22 Jul 2022 09:51:00 +0000

The world has no mercy for the outdated and old.

We need to educate ourselves to keep up with the latest trends.

In this issue, we bring to you the top 11 newsletters every Designer and Developer should subscribe to.

Why Newsletters?

Don’t you feel being helped when any latest news lands directly to your inbox saving manual research by googling it around? This is what newsletters helps us to!

Saving time and providing quality content directly to your inbox.

Newsletter is very old trick. They have been around since the age of RSS feeds and even right now is one of the best ways to re-engage with subscribed audience. They are a tried and tested way to get relevant and curated content in this chaos ridden tech frenzie. Through newsletters you can can get instant notifications about everything that’s trending from sources that you trust. So, all the developers and designers out there, fasten your seatbelts, it’s time jump into the world of push notifications.

1. CODE PROJECT

Code Project provides all around development for engineers and coders. Issued weekly, it has programming libraries and tutorials about testing. Simple and trustworthy, you can browse through all the free study materials easily available. It indeed follows the policy of no spamming and abides by its promise of only sending exciting newsletters.

2. Coding Jag

One of the best compilations of the latest updates and news from the testing world, Coding Jag is a great way to supercharge your wisdom around Testing, Development, CI/CD and Automation. Apart from some great reads, you will also find the best podcasts, videos and events delivered right to your inbox.

3. CREATIVE BLOQ

A treat for the designers, Creative Bloq provides the best newsletters ridden with the latest trends in designing. Traditional or digital artist, 3D, VFX, web designers, illustrators are welcome to check out this amazing newsletter. They also issue ebooks, filled with class material and insight into the wonderful design world.

Check this out: Lorem Ipsum Generator- It generates text that won’t trigger your browser, word processor, or similar tool’s spellcheck. Just fill in the number and type of text you want to generate and easily copy the output text.

4. THE SMASHING EMAIL NEWSLETTER

One of the oldest online publication of all thing web, Smashing Magazine, sends two newsletters to its readers monthly. A goldmine of useful tips and tricks of the design and development world. Free ebooks are also provided by them, filled with relevant insights. If you are a beginner, then this is the newsletter for you.

5. UXDESIGN.CC

You get 10 links which are highlighted in this newsletter, related to User Experience, Interaction Design, Product Design and Usability. Links that will make you think. Fabricio and Ciao bring for you the highlights of the week, following the motto “learn from the community, give back to the community”.

6. CODING HORROR

Packed with humor and fun, this is probably the most entertaining newsletter providing the subscribers with information while entertaining them with witty puns. It has a lot to offer beyond coding and developing. Jeff Atwood openly shares his experiences with passion, it is definitely worth subscribing.

7. SIDEBAR

There is a reason Sidebar is leading all the other newsletters, it’s the user friendly interactions that make Sidebar stand aside from other newsletters. This unique newsletter provides you with 5 handpicked links, right into your inbox. Providing spot on, compact, and genuine information without flooding your inbox with useless advertisement.

Hey! Do you know? XML to JSON converter allows you to convert XML files to JSON files quickly and easily.

8. HACKINGUI

Coders paradise, HackingUI provides a platform for people who are interested in startup and front end coding. Newsletters issued weekly, podcasts full of real life experiences and a library with well researched content. HackingUI is not for developers only, designers can also find a lot to go through.
David and Sagi bring together a beautiful close knit community.

9. JAVASCRIPT WEEKLY

Just like its CSS counterpart, this weekly newsletters offers you all the latest developments in the Javascript world. A library of videos, tutorials and articles all just to quench your Javascript curiosity. If you really want to learn scripting or if you aspire to stay on top, you should definitely give it a try.

10. CSS WEEKLY

With more than 26K subscribers, CSS weekly brings you the latest developments in CSS and web development. If you are an aspiring front-end developer then this is the newsletter for you. Free demos, tutorials and articles make it the best if you are CSS lover.

11. UX NEWSLETTER

The UX Newsletter is a mail newsletter sent through mailing tool MailChimp, by the developers/designers behind the said newsletter tool, MailChimp. (English is a very punny language sometimes XD). Sent out once a month, UX Newsletters provides the latest trends in the design market. Keen research and experience is taken into consideration while releasing new issues. UX quips the subscribers with the information starting from how to develop your product, manage it and sell it. It is a paradise for those who have thirst for knowledge.

Do you know, HTML Minify removes unnecessary characters and lines in source code. Removing indentation, comments, and other such details changes the file size without affecting anything else.

CONCLUSION

Life is learning. Above mentioned newsletters all aim at providing you with the most relevant content, with insightful experiences and the latest trends. Each and every newsletter is the result of hardwork and years of experience. Save your precious time and at the same time learn from the experiences of the curators, subscribe and dive into these wonderful pieces of art. If you have subscribed to any other newsletters, do let us know in the comment section below.

Debugging Memory Leaks in JavaScript

robinjangu — Fri, 15 Jul 2022 11:06:00 +0000

Introduction

To understand the memory leakage issue, we must first understand how memory is allocated and recycled in a typical web browser operation.

You don’t even have to imagine, just look around. The renting and subletting is similar to memory allocation. The builders and contractors raise a building, and sell or rent the apartments to people in need. The owners in turn live in them or rent/sublet them further for profit. When I was 8 years old, there was a house that had been vacant forever. I would shiver at the thought of entering that ruin, that is what a memory leak is.

A JavaScript code has the same effect, the memory blocks are allocated for the various tasks, and when there is no need of them they return back to the free memory pool. When after using the allocated memory doesn’t get back to the free pool of memory, we define it as a memory leak.

Leaking Bad

Ever wonder why sometimes it takes forever loading a website, it may be because of this memory leakage issue. Memory Leakage greatly affects performance. Too much of leakage can even result in crashing. High latency will take away all your joy if you enjoy gaming. Memory leakage is a serious problem and it must be tackled similarly.

Hey! have you heard about the GOST hash function? It specifies the use of a 256-bit hash value to represent a message. The encrypted result is filled up with as many zeros as needed to ensure that the message is 256 bits. Convert any value to Gost Hash using the free online converter offered by LambdaTest.

Mark and Sweep

One of the reasons why JS is loved dearly by its users is also because of the fact that it is a garbage collected language.

‘What is Garbage Collected language’ you ask?

Basically it helps you keep track of the previously allocated memory and help you keep the leakage to the minimum and it does that by the simple yet effective algorithm that is called as ‘Mark and Sweep’.

Imagine a network of memory blocks interconnected, now you go to the root and mark all the reachable(referenced) blocks from the root. When it is done, you have all the memory that is allocated to your script. Now the rest of the blocks, which can’t be reached, must not be in use by your script. So they are swept away to the OS and put in the free memory pool. The algorithm seems almost perfect but still there are many ways that leakage still can happen.

Do you know Hash Generator is a free online developer tool that provides an easy way to generate the hash value of a string and compare it against the original value.

Finding Leakage in Memory

Browsers like chrome provide a variety of solutions to the memory crisis by providing specialized tools to the developers. Using Chrome task manager you can easily manage and keep track of the heap memory(allocated to JS) as well as DOM nodes.It informs you about how much memory the page is using in totality. If the Memory is increasing that means more and more DOM nodes are getting created.

Visualize your memory leaks using the timeline recording feature and even record your data for further comparison of before and after the garbage collection.Heap snapshot is very effective in knowing the DOM nodes creation and keeping in check the leakages due to the faulty scripts.

Allocation timelines help when you feel some action causes memory leakage. After clicking the record button, perform the action and then study the graph for unusual memory allocation.

Record allocation profile enables you to investigate further into the memory allocation while performing a suspected leakage task.

Check this out: The HMAC Generator- A free tool that lets you instantly generate an HMAC from a string with a secret key and compare it against the original to check for integrity.

Conclusion

Oscar Wilde once said “Memory is the diary that we all carry about with us”.

In the end we all want web pages to load faster, to work and perform efficiently without putting pressure on your system. To enable that we should follow good practices and follow efficient scripting. In the next few blogs we will discuss what causes memory leakage and how we can eradicate this problem.

Till then, Ciao!

Why Global variables Shouldn’t Be Much Global

robinjangu — Wed, 13 Jul 2022 09:57:00 +0000

One of the biggest blunder a JS developer can do while writing a code is declaring unnecessary global variables. Global variables are extremely helpful for the programmers but if not used carefully would rob the speed and efficiency of any browser.

Short note

There are mainly two types of variables that are used in JS, Local and Global. Local variables are defined and used within a function whereas Global variables are defined for the function window. In short till the time the code doesn’t terminate Global variable will be present lurking in the background.

Hey! Do you know? CRC32 hash generator lets you quickly generate the CRC32 checksum hash from a given string. In addition, you can generate CRC32 hashes via your web browser.

Effect on Memory

Variables storing feeble data won’t be too critical ,however if you store a lot of data on it it’ll choke your bandwidth and definitely threaten the page efficiency. Too much of data stored as cache slows the speed of your browser resulting in high latency, caches are website’s data that is stored and used when you revisit the site time and again.

Check this out: The character count- It allows programmers to calculate the length of any given string of text or numbers in order to check the total number of characters (including spaces) there are in the string.

Solution

We can’t deny the usefulness of global variables, however its best to try using local variables and use globals ones only in situations where it can’t be helped. However it’s important to change the value of the variables to NULL after using.

function Avengers() {
    var hero = "Nick Fury";
                          }

Accidental global variables are created when you assign a value to a variable that hasn’t been declared, by default it will be a Global variable.

function Avengers() {
           hero = "Nick Fury";
                          }

“Use strict”; is a brilliant way to keep the Global variables in check, just writing this magical command will solve half of the problems. Mostly used by developers, it doesn’t allow the menacing accidental variables by giving error if the variable hasn’t been declared.

<h2>Global "use strict" declaration.</h2>
<script>
"use strict";
Avengers();

function Avengers() {
    hero = "Nick Fury";                    // This will cause an error (hero is not defined)
}
</script>

Do you know, in computing and electronic systems, a binary-coded decimal (BCD) is a method of representing each decimal digit by its binary sequence. The BCD to Decimal Converter (BDC) converts a binary-coded decimal (BCD) to an integer.

Conclusion

The use of global variables isn’t that global anymore. In the next blog we will further explore other memory leakage problems.

Using Webpack 4 to Create Browser Compatible Apps

robinjangu — Tue, 09 Jul 2019 14:07:00 +0000

Rejoice! Weekend is here. I know everybody wants to rush towards the doors and feel that freedom. But bear with me for a few minutes.

On February 25, 2018 Webpack 4 was released, it’s interesting that they named it ‘Legato’. Legato means to play all the notes without gaps. Webpack had proven itself time and again, the reason why it is an integral part of JavaScript development ecosystem. Heavyweights of JavaScript like React and Angular has already integrated Webpack within the framework just like Babel. And if you are building cross browser compatible web-apps, it is one of the most important and useful tool in your garage.

So, What’s new?

Often criticized by the JavaScript community for being a ‘Customization Hell’, Webpack has tried to try a new approach. With earlier versions you had to work extremely hard to keep up with the learning curve. The new approach has less customization, you can get your project up and running after few basic settings.

Hey, do you know? HTML is a standard way for content on the Internet to be marked up so that it displays properly in a web browser. It can be “enhanced” by the use of technologies such as Cascading Style Sheets and scripting languages like JavaScript.

Faster Build Times, Smaller Bundle Size, and Cross Browser Compatibility

Best thing about Webpack is the extended support and ecosystem. Webpack is critical for faster build times to tweak the performance of website or web app. In order to do that, it in turn needs support of UglifyJS and BabelJS. UglifyJS2 offers support minifying the ES6 syntax before Babel can transpile it into the ES5, which Webpack supports. Babel ensures that there are no discrepancies due to version or syntax of JS. This is especially useful for web coders who want to build browser compatible web apps and are worried about incompatibility issues of EcmaScript 6. The Webpack, along with tools like UglifyJS, BabelJS, and Browserlists, can be used to convert ES6 code to compatible JS code.

Introduction of sideEffects: false within json package, makes it easier to remove the unused code within the bundles. The support for import and export of any local WebAssembly module is also added.

In addition to all that, a great deal of community-build plugins are also there for extending Webpack functionality. For example, you can use Autoprefixer Polyfill plugin to parse your project’s CSS files and automatically add browser specific prefixes to the code to make it more cross browser compatible. LambdaTest provides you features to perform cross browser and responsive testing over an online browser farm of 3000+ browsers and operating system at scale. It also supports Selenium, Cypress testing, Playwright, End to end testing.

Have you heard? QR code generators make it easy to store data on a QR code, such as text or website addresses. You can easily create a QR code by entering text or a web address and download the image in high-resolution PNG or vector graphic (SVG, EPS).

Perfecting the defaults

As I mentioned to you earlier, the biggest problem with Webpack is that you have to customize everything. When I say everything, I mean that in most literal way possible. Good to see that Webpack 4 has improved a lot. It assumes ./src/ to be the entro property and exits the output to ./dist . This is known #0CJS (Zero Configuration JavaScript). This will save your precious time enabling faster deployment.

Specialized Modes for better builds

Webpack now offers two brilliant modes which offer distinct skill sets empowered to provide us with user specific bundles. Let’s explore more to see what the fuss is all about.

Production

The mode inculcates within itself out of the box optimizations and features. Almost like an Internet pirate’s treasure box. Tree-shaking, minification, side-effect-free module pruning all these helpful features make a good case for Webpack 4 being user friendly. Tree shaking effectively reduces the bundle size, removing unused codes. The feature is relief if you import JSON with ESModule syntax.

Development

For those who want superior speed with development ecosystem experience. Webpack added to its already existing mapping schemes for easily reading the source codes. Path names in bundle output and eval-source maps boost up the build times.

Deprecation

Significant cuts were made in order to make Webpack lighter. Node.js is no longer supported as source code finds itself upgraded to higher ecmascript version. CommonChunksPlugin too was removed, making way for optimization.splitsChunks. Other removed features include module.loaders, loaderContext.options, Compilation.notCacheable flag, NoErrorsPlugin, Dependency.isEqualResource, and NewWatchingPlugin.

Farewell CSS prefix cross browser Incompatibility

Not only this the Autoprefixer is another state of the art CSS prefix handler. With this packed inside Webpack forget what you know about CSS prefixes. It takes care of the Prefixes by checking the compatibility for different browsers and their versions on Caniuse. This amazing task is done with great speed. Apart from this, it even removes the outdated prefixes accounting for a whopping 10% (more or less) increase in Speed.

If you want to have support for specific browsers then you can easily do it. Using Browserlist you can leverage .browserlistrc and by cross referencing the list that you provide, all the specific CSS issues will be resolved. In this case you needn’t use Autofixer.

Let’s check out the competition

When we talk about competition, Webpack has its hand full. Parcel is like a new kid on the block with suave. With Parcel coming out, there was such a hype. I mean everybody was talking about it. For starters it needed no configuration and it worked! Everybody was so charmed by this up and comer, it also provided with even smaller bundle size.

Parcel pushed Webpack to innovate and improve even further. Also parcel’s learning curve wasn’t even near to Webpack, this too greatly added to its popularity. Parcel is good, but it lacks on some fronts. For instance you can’t use CSS and SASS variables using import, this does pose some problems but there is a simple solution as by exporting CSS files from JavaScript you can make sure that it handles dependencies.

There are others too like Browserify and Rollup that lack build time optimizations like Tree shaking or lack in some other aspects.

Check this out: What is Regression testing, its importance and types, and how to perform it.

Conclusion

It is evident that Webpack isn’t going anywhere. We have yet to see what new features are brought by the competition. Being backed by heavy hitters like React & Angular adds to Webpack having more support in the wonderful JavaScript planet. We’re out time I’m am afraid, I bid you farewell.

Until next time!

Happy Weekend!

SyntaxError : Reserved Word

robinjangu — Fri, 19 Apr 2019 10:54:22 +0000

Remember when you were a mere beginner in JavaScript, while learning you must have come across the term ‘reserved words’. These are the words that you can’t use as names for variables. Apart from mainstream keywords like break, var, if…else etc. there are many more reserved keywords.

SyntaxError: "x" is a reserved identifier  (Firefox)
SyntaxError: Unexpected reserved word (Chrome)

Following will be the error messages you will receive if by accident you use such words. Seasoned JS developers too commit such blunders while scripting.

Do you know URL addresses can only be copied over to the Internet if they use ASCII characters. These addresses contain characters outside the ASCII set, so they must first be converted into an ASCII format. URL encoding replaces unsafe ASCII characters with a percent sign (%) followed by two hexadecimal digits.

Strict mode

Strict mode has become a necessity because of its many benefits. It keeps in check and streamlines the code flow, error debugging too becomes very easy. I wouldn’t say that it has shortcomings but you need to be extra careful while implementing this.

In addition to the already existing reserved keywords, Strict mode reserves a few more keywords like implements, interface, let, package, private, protected, public, as, yield and static.

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using a reserved word as variable name, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
var public = 'Thanos';  // This will cause an error (public is reserved in strict mode).
</script>

</body>
</html>

Check this out: Base64 encoding- A way of translating binary data into text form so that it can be transmitted more easily via e-mail and HTML form data.

Now we change the variable name to avengerEnemy, now it will work.

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>No reserved word used</h3>

<p>Activate debugging in your browser (F12) to see the avengerEnemy.</p>

<script>
"use strict";
var avengerEnemy = 'Thanos';  //  avengerEnemy is not a reserved word in strict mode.
console.log(avengerEnemy);
</script>

</body>
</html>

Do you know the URL Parse Online allows splitting up the query string into a human-readable format and takes care of decoding the parameters.

If you still get the same error, it may be due to the outdated browser version. Try updating the browser, as the old versions have old reserved words that need to be revised.

Happy scripting!