
<Image src="browsers.jpg" alt="Different browsers logo on gradient background" />

During site development, we usually test our site only in the browser installed on our computer, but in the world of
browsers there are dozens, and maybe even thousands, of versions.

Therefore, cross-browser development and testing are considered a good tone in site development.

## Cross-browser development

Cross-browser development is when your site works not only in the latest Google Chrome, but also in Firefox, Safari,
Opera and Microsoft Edge, plus mobile browsers and tablets.

There are many methods and ways for such development, such
as [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix), [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill),
responsive design and [much more](https://ishadeed.com/article/cross-browser-development/).

I will write about all this in the next article, and today we will talk only about cross-browser testing and tools.

## Cross-browser testing

But how to check that the site you created looks and works the same on different browsers and devices?

The first thought that comes to mind is to install all your browsers on your computer and check everything there, but
there are several limitations here:

- Browser versions ( Usually you install the latest version )
- Operating systems ( You will not be able to install Safari on Windows )
- Devices ( How to check that your site works on an old iPhone )

All these questions are solved by the tools that we will discuss with you today.

## Browserstack

What is Browserstack? It is cross browser testing tools that help us to test our sites on real devices and operating
systems remotely. From Windows to macOS and iPhone.

<Image src="browserstack.jpg" alt="Browserstack main page UI" />

### Device test

Browserstack allows you to test your site on different devices. To do this, it is enough to select the device and
browser you need and that's it, everything is ready for testing.

<Image src="pixel-pro.jpg" alt="Google Pixel 7 testing screen in Browserstack" />


The screenshot shows that the site is not just running in an emulator, but is a real device (Google Pixel 7Pro) with a
serial number.

> Serial Number - 2B101FDH30XXXX

### Testing with different OS

Remember those green fields on the Windows XP? In just a couple of clicks, you can start a real computer
and test your site without installing Windows ☠️.

<Image src="windows-xp.jpg" alt="shramko.dev website on Windows XP" />

### Multi browser testing

If you want to quickly see how the site looks on many devices and browsers, you can
take [screenshots](https://www.browserstack.com/screenshots) of the pages you want.

<img src="/static/images/screenshots.gif" alt="Animated image with how site can look on browserstack app"/>

Yes, I know that my site does not work on IE. I did it on purpose. [IE 11 Must die](https://death-to-ie11.com/) 👾

### Browserstack developer tools

Sometimes bugs appear in a specific version of a browser or on a device, so you may not only need to look at the site
visually and click on it, but also open the developer tools in the browser and try to find the bug and fix it.

Browserstack can help with this. The DevTools tab opened familiar developer tools such as `Console`, `Network` and
others.

<Image src="dev-tools.jpg" alt="Developer tools" />

At this moment, several options are supported on the mobile phone:

- Safari developer tools
- Chrome developer tools

More on the desktop:

- Firefox developer tools
- Safari developer tools
- Chrome developer tools
- Internet Explorer developer tools

### Local testing

It is also possible to launch not only by URL, but also a local site on localhost.

To do this, you need to update the BrowserStackLocal application and follow
the [instructions](https://www.browserstack.com/docs/live/local-testing).

### Browserstack alternatives

Unfortunately, I've only worked with this tool and don't have the experience to recommend anything else, but you can
always [look at the competitors](https://www.g2.com/products/browserstack/competitors/alternatives) and try it
yourself.


Cross-browser testing and how to test your site with Browserstack

Mastering Cross-Browser Compatibility: A Comprehensive Guide to Testing


<Image alt="Astronaut with book in open space. Black background with stars" src="books.jpeg" priority={true} />

> “Knowledge must be shared”.

Developers must keep up with technology trends. So I'd like to share my tried-and-true list of top resources for
learning and maintaining knowledge.

## Courses

- [frontendmasters.com](https://frontendmasters.com/) - one of the best platform for learning Frontend
- [egghead.io](https://egghead.io/) - high quality, concise web development screencasts
- [epicreact.dev](https://www.epicreact.dev/) - probably the best course on React
- [freecodecamp.org/](https://www.freecodecamp.org/) - free verified certifications
- [edx.org](https://www.edx.org/) - courses from top universities (Harvard, MIT and others)
- [ui.dev](https://ui.dev/) - fun and nice courses about frontend ecosystem by Tyler McGinnis
- [coursera.org](https://www.coursera.org/) - learn computer science, business, languages, health, arts by top
  universities and authors
- [udacity.com](https://www.udacity.com/) - advance your mastery of data science and web
- [newline.co](https://www.newline.co/) - everything you need for full-stack development
- [pluralsight.com](https://www.pluralsight.com/) - online education platform that offers courses primarily geared
  toward software developers.
- [scrimba.com](https://scrimba.com/home) - interactive courses and tutorials. Watch the video and write the code directly
  online

## Blogs

- [Shramko Serhii](https://shramko.dev/) - my blog about web development
- [Dan Abramov](https://overreacted.io/) - co-author of Redux and Create React App
- [Kent C. Dodds](https://kentcdodds.com/) - React, Testing end more
- [Sarah Drasner](https://sarahdrasnerdesign.com/writing/) - cool blog about animations in web
- [Lea Verou](https://lea.verou.me/) - CSS secrets book author
- [Dr. Axel Rauschmayer](https://2ality.com/) - one of the best blog about JS Core
- [Lin Clark](https://www.code-cartoons.com/) - nice cartoons about development
- [Josh Comeau](https://www.joshwcomeau.com/) - nice tutorials about React and Web
- [Addy Osmani](https://addyosmani.com/blog/) - engineering Manager at Google working on Chrome
- [Sara Soueidan](https://www.sarasoueidan.com/blog/) - one of the best blog about <abbr title="Accessibility">
  A11y</abbr> and HTML

## Challenges

- [leetcode.com](https://leetcode.com/) - probably a better place to practice solving problems
  for <abbr title="Facebook, Amazon, Apple, Netflix and Google">FAANG</abbr>
- [hackerrank.com](https://www.hackerrank.com/) - place where you can prepare for Interviews
- [codewars.com](https://www.codewars.com/) - achieve code mastery through challenge

## YouTube

- [CS50](https://www.youtube.com/c/cs50) - Harvard Computer Science course
- [The Coding Train](https://www.youtube.com/c/TheCodingTrain) - not boring coding ❤️
- [Low Level JavaScript](https://www.youtube.com/c/LowLevelJavaScript) - channel goes deep into the heart of low level
  programming
- [Coding Garden](https://www.youtube.com/c/CodingGarden) - nice realtime coding sessions
- [Google Chrome Developers](https://www.youtube.com/c/GoogleChromeDevelopers) - all you need know about web
- [Computerphile](https://www.youtube.com/user/Computerphile) - videos all about computers and computer stuff

> It seems all for now! Don’t forget to share the link with friends 🫡


Check out a list of the best resources and blogs for developers in 2024.

Highly recommended resources for developers in 2024

Discover a collection of useful resources to elevate your skills and productivity in development.

Useful Resources2 articles

Articles

Cross-browser testing

Essential Tools and Guides Every Developer Should Utilize