34 Ways to Save Time on Manual Cross-Browser Testing, Part 1: Methods 1-10

oOne of the major hurdles that web developers, as well as app developers, face is testing their website/app across different browsers. This is also called ‘Cross-Browser Testing.’ There are so many browsers and browser versions (Google Chrome, Mozilla Firefox, Internet Explorer, Microsoft Edge, Opera, Yandex, etc.), numerous ways in which your website/app can be accessed (via desktop, smartphones, tablets, etc.) and numerous operating systems (Windows, MacOS, Linux, Android, iOS, etc.) which might be used to access your website. Ensuring that your website’s UI/UX and its functionalities work without any flaws on the combination of ‘Browsers + Browser Version + Operating Systems + Device Profiles’ would involve numerous man-hours for development, testing, and maintenance. Though testing might include automated cross-browser testing, you would always prefer to have a round of manual cross-browser testing before the final release.
The major pain-point with manual cross-browser testing is that testers might need to spend a significant amount of time testing different web pages, cross-browser testing web apps across different breakpoints on a growing list of ‘complex’ combinations. Hence, it is recommended that one round of manual cross-browser testing is performed in the staging environment before the changes are pushed to the production environment. Since the development branch would involve changes from multiple developers, you can expect another round of cross-browser testing on these changes before they make their way to the ‘prod/production server.’ Though you might be following a ‘model for software development,’ there are many activities that become unplanned/ad-hoc and manual cross-browser testing is often considered one of them. The Turnaround Time (TAT) for the resolution of bugs could vary based on the synergy between teams. TAT could increase if the teams indulge in blame games and this behavior can result in an overall delay. You cannot change human tendencies, but you can definitely ensure that processes are kept in place to improve the speed at which tests are performed without compromising the Turnaround Time.

Link: https://dzone.com/articles/34-ways-to-save-time-on-manual-cross-browser-testi?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React.js and Front-End Development

With more than 1,300 developers and over 94,000 sites utilizing React.js, it wouldn’t be an overstatement to call React the future of front-end development. After all, Fortune 500 companies like Facebook, PayPal, Uber, Instagram, and Airbnb utilize this JavaScript-based UI library for a major part of their applications’ front-end development for web as well as mobile.
Before React Arrived
When React came around, Angular was the only major contender in the JS framework space. While Angular was a very complete framework (it still is), it was a nightmare for developers. They had to do a lot of coding, and with a steep learning curve even for seasoned JavaScript developers, AngularJS was never the most desirable way to build JS applications. It has more functionalities than most developers need.

Link: https://dzone.com/articles/why-choose-react-for-front-end-development?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How to Learn React.js, Part 2: The React Road Map for Modern Web Developers

Welcome back! If you missed Part 1, check it out here! 8. Form Helpers Apart from type checkers, it’s also good to learn form helpers, like Redux Form, which provides the best way to manage your form state in Redux. Apart from Redux Form, you can also take a look at Formik, Formsy, and Final form.

Link: https://dzone.com/articles/how-to-learn-reactjs-part-2-the-react-road-map-for?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

[DZone Research] JavaScript Flavors and Frameworks

This post is part of the Key Research Findings in the 2018 DZone Guide to Dynamic Web and Mobile Development. 
Introduction
For this year’s DZone Guide to Databases, we surveyed software professionals from across the IT industry. We received 1,202 responses with a 64% completion rating. Based on these numbers, we calculated the margin of error at 3%. In this article, we discuss the various flavors of JavaScript developers use as well as their favorite front-end development frameworks.

Link: https://dzone.com/articles/dzone-research-javascript-flavors-and-frameworks?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

When to Start a Project With the Front-End

Any senior developer knows that it is better and easier, by far, to start working on a software project on the backend and move on to the front-end later on. Personally, when it is possible for me, I like that approach a lot more. However, we have a very important factor that usually makes us change that order: the client or the user (hereafter referred to as the user).

Link: https://dzone.com/articles/when-to-start-a-project-by-the-front-end?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Adding Off Canvas Layout to a Visual Builder Application [Video]

Off Canvas layout is a common UI pattern for modern applications, especially on mobile devices. The concept is aimed at saving space on your page, allowing you to pop out a “drawer" of additional information. This helps reduce clutter on the main page but still provide access to important data when needed without leaving the page context. You can see an example of the runtime behavior at the top of this post.
Oracle JET provides this type of "off-canvas" behavior as a built in component, and they have a demo of it working as part of the cookbook here.

Link: https://dzone.com/articles/adding-off-canvas-layout-to-a-visual-builder-appli

Making It Easier for Kids to Learn to Code

Web languages — HTML, CSS, and JavaScript — are the best choice for kids and for amateur programmers, because they are very simple, and with them, you can create many interesting things: sites, mobile and desktop applications, web servers, and robotics — what else does an amateur programmer need for happiness?
Visual Programming!
Visual programming frees programmers from monitoring a program’s syntax. It is useful for training. This is the next stage in development of text-based programming languages.

Link: https://dzone.com/articles/redesign-of-web-programming?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Redesigning a Website Using CSS Grid and Flexbox

For the last 15 years, I’ve been using floats for laying out web pages on dri.es. This approach to layout involves a lot of trial and error, including hours of fiddling with widths, max-widths, margins, absolute positioning, and the occasional calc() function.
I recently decided it was time to redesign my site, and decided to go all-in on CSS Grid and Flexbox. I had never used them before but was surprised by how easy they were to use. After all these years, we finally have a good CSS layout system that eliminates all the trial-and-error.

Link: https://dzone.com/articles/redesigning-a-website-using-css-grid-and-flexbox?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Installing Client-Side Libraries in ASP.NET Core

As a relative newcomer to the web front-end, one thing that always surprised me was how many moving parts you need to get something running. This is probably true elsewhere (i.e. in backend development and desktop development) but we just do a better job of hiding it. In the past, people writing web-pages have always had an uneasy relationship with Microsoft. Maybe it started in the late ’90s when, in order to win the battle of the browsers with Netscape, Microsoft started giving its product away. Since then, IE has become more and more bloated, as it had to support 10 years worth of old technology, and people have had to ensure it still worked on IE 6 and 7. But now things are different, Microsoft is a rebranded company and nobody hates them anymore… and when you create a brand new ASP.NET Core 2.1 project, you can use npm to install client-side packages, use them in your web page, and it all just works — end of the post.

Link: https://dzone.com/articles/installing-client-side-libraries-in-aspnet-core