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

Build Great-Looking Web Apps Fast With WebJars and Wicket

WebJars is a well-known project that offers a huge set of client-side web libraries packed as Jars that are ready to be used. Each Jar contains the full distribution of a specific library version, which means that we can easily integrate these libraries with our familiar build tools (like Maven, Gradle, etc..) without the burden of installing and using web development tools like npm, Node, Bower, etc.
Things get even more interesting if we decide to use WebJars to theme our website with one of the many open source templates or themes freely available on the Internet. In this case, WebJars is a self-contained source for front-end libraries, meaning that with a single artifact we get the whole library with all the required dependencies.

Link: https://dzone.com/articles/build-great-looking-web-apps-fast-with-webjars-and

Techniques for Animating on the Canvas in React

I recently experimented with audio visualization in React on the Twilio blog. While I meant to teach myself more about the web audio API I found that I picked up a few techniques for animating in canvas within a React project. If you’re creating a canvas animation in React then perhaps this will help you too.
Good References
First up, if you’ve used React before you’ll know that you’re supposed to avoid touching the DOM and let React handle it. If you’ve worked with an HTML5 before, you’ll also know that to get a context with which to draw on the canvas, you need to call directly on the canvas element itself. Thankfully this is an edge case that React supports through refs.

Link: https://dzone.com/articles/techniques-for-animating-on-the-canvas-in-react

JavaScript Asynchrony and Async/Await in Selenium WebDriver Tests

Selenium is a wonderful library. It supports all major browsers, has all the features we will probably need, and is currently the de-facto standard in browser tests today, and rightfully so.
(For those that don’t know, browser tests are tests that run a browser, automate the browser to interact with your front-end application, and test it that way.)

Link: https://dzone.com/articles/javascript-asynchrony-and-asyncawait-in-selenium-w?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How to Test React Components With Jest and Enzyme, Part 1

Testing React components may be challenging for beginners and experienced developers who have already worked with tests. It may be interesting to compare your own approaches with the ones we use in our project. In order to cover the codebase, you have to know which components must be tested and which code exactly in a component should be covered.
During reading, I’ll cover the next topics:

Link: https://dzone.com/articles/what-and-how-to-test-with-jest-and-enzyme-full-ins?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Understanding Angular 6 Animations

Animation is defined as the transition from an initial state to a final state. It is an integral part of any modern web application. Animation not only helps us to create a great UI but it also makes the application interesting and fun to use. A well-structured animation keeps the user glued to the application and enhances the user experience.
Angular allows us to create animations, which provides us with native-like performance. In this article, we will learn how we can create animations using Angular 6.

Link: https://dzone.com/articles/understanding-angular-6-animations?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev