Demystifying Redux

Redux is a library that helps you manage the status of your app. In this article, ‘Demystifying Redux,’  we will not discuss why to use it and how to use it correctly; we will only focus on how to create our own implementation by approaching the final result without having to cover all its aspects, details, and tools. The goal is to understand how it works in broad strokes to eliminate most of the mystery behind this simple library. Our demystifying redux example is based on a list of Korfbal players which we will be able to add as summoned in the match next week. It is the typical example but with a personal touch;)

Link: https://dzone.com/articles/demystifying-redux

Quick Tip: Dynamic Stencil Component Names With JSX

Components composition is the main way to work with Stencil. There are occasions that we would like to decide dynamically which component to render as child component in some parent component. This can happen if you get the name of the component to render from the outside or need to decide the component according to some state. What can we do then?
One way to solve this is to put switch/case or if statements inside the component render function and get over with it. This solution is valid and will work but one of the main features of Stencil is the usage of JSX. So, how can we use JSX in our favor?

Link: https://dzone.com/articles/quick-tip-dynamic-stencil-component-names-with-jsx?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Using Custom Fonts in a NativeScript App

Seasoned web and mobile developers know that an easy way to add some pizzazz to an app is to switch to a custom font face. Heck, I’ve been around long enough to remember the Verdana renaissance back in the late 90s!
While the waves and pastels of the 90s are long past us (RIP!), the desire to create engaging user interfaces has not changed. So let’s make this happen with NativeScript.

Link: https://dzone.com/articles/using-custom-fonts-in-a-nativescript-app?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How to Bind the Kendo UI Grid to a GraphQL API

By now you have almost certainly heard of GraphQL, the runtime query language for APIs. With rapidly growing popularity, it is becoming an increasingly adopted standard for API development. This has generated demand for frameworks and UI tools that can easily consume the data from a GraphQL API – just like the Kendo UI components can do, as we provide seamless integration through the DataSource component.
This post provides a comprehensive guide on how to setup the Kendo UI jQuery Grid component to perform CRUD operations through GraphQL queries and mutations. It includes a sample application, code snippets, and documentation resources to get you up and running with Kendo UI and GraphQL.

Link: https://dzone.com/articles/how-to-bind-the-kendo-ui-grid-to-a-graphql-api?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Pure CSS Slide-Down Animation

Sometimes something seems like it should be really easy, but it turns out to be extremely difficult. The case we’ll be checking out today is creating a slide-down animation using purely CSS. What could be so hard about that, right? 
What Are We Talking About?
If you’re not sure what I mean by a “slide-down animation," check out the slideDown method from jQuery. This function will take a hidden element and make it visible by increasing the element’s height from 0 to whatever the height of the element should be. That shouldn’t be too hard, right?

Link: https://dzone.com/articles/pure-css-slide-down-animation-1?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Working With SAPUI5 Locally and Deploying in SCP

When I work with SAPUI5 projects I normally use WebIDE. WebIDE is a great tool but I’m more confortable working locally with my local IDE.
I’ve had this idea in my mind but I never find the time to work on it. Finally, after finding this project from Holger Schäfer on GitHub, I realized how easy it is and I started to work with this project and adapt it to my needs.

Link: https://dzone.com/articles/working-with-sapui5-locally-and-deploying-in-scp?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Making Your Website/Application Accessible: A Guide for Front-End Developers

As front-end developers, our job is to present visual information that looks good and gives users cues to help them understand content quickly. Even a static, text-only web page is more than a collection of words. The page has a title that appears at the top. The title may be bold or in a large font size. In the body of the text, words are grouped into sentences that end with periods, and related sentences are grouped into paragraphs. Certain words in a sentence may be emphasized with bolding, underlining, or italics. These examples barely scratch the surface of the many, minute details of visual web page design.
These components may seem basic and unimportant, but for many people, accessing and reading text on a web page is difficult. For example, individuals with visual impairments often struggle to read the text. When we think of visual impairment, most of us automatically picture a person who is blind, but there are many other types of visual impairment to consider, including color blindness, low vision, sight problems caused by degenerative disorders, etc. The range of disabilities and handicaps our users may have extends far beyond the visual category to include hearing, cognitive, motor, and other types of issues. Therefore, making sure your website or application is accessible rises to the utmost importance.

Link: https://dzone.com/articles/making-your-websiteapplication-accessible-a-guide?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Did You Know? 10 Useful Telerik UI for ASP.NET AJAX Tips

With a toolset as mature and feature-rich as Telerik UI for ASP.NET AJAX, there are bound to be some features or functionality you are not aware of, so we’ve pulled together 10 Telerik UI for ASP.NET AJAX tips we think you’ll find useful. While it’s far from an exhaustive list, hopefully it will give you a good start if you are new to the suite, or show you something you didn’t know.  Happy Coding!

Link: https://dzone.com/articles/did-you-know-10-useful-telerik-ui-for-aspnet-ajax?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Using Refs in Stencil

Why Use Refs?
The first question that you might ask yourself is why bother using element references? Let’s clarify that.
In a typical data flow, you will pass props from the parent to it’s child elements. When passing props, the child component will re-render and you will get it’s new state. There are times that you will need to imperatively modify a child outside of this typical flow. Here are examples of things that might need different flow:

Link: https://dzone.com/articles/using-refs-in-stencil?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

GatsbyJS: Static Site Generator for React

Gatsby is a static site generator for React and allows web developers to create a static HTML file. Thus it provides fast initial load times and makes dealing with SEO much simpler. The user-side experience is very comfortable when JavaScript is enabled, and you don’t lose any content or navigation while having disabled JavaScript. By adding a single plugin, Gatsby can provide offline support as well, transforming your site into a Progressive Web Application. The Purpose and Background of GatsbyJS Gatsby allows web developers to create static HTML files for every single page. Right after loading the page, Gatsby will boot up React and enable the user to navigate through the website just like a single page app. 

Link: https://dzone.com/articles/gatsbyjs-static-site-generator-for-react?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev