React provides powerful tools for creating dynamic web apps. The two most important hooks for dealing with routing and URLs are useLocation and useParams. In this blog post, we’ll explore these hooks’ functionality, discuss their application with examples, and show you how to combine them to give your React projects smooth navigation. Understanding useLocation The […]
Posts Tagged ‘front-end’
The Power Of Objects In JavaScript: Part 2
Jump into the fascinating world of JavaScript objects with us! We’re going to explore cool methods and tricks that can make your coding skills even better. If you’re new to objects in JavaScript, no stress! Our guide, ” The Power of Objects in Javascript: Part 1” is there to help. It breaks down both the […]
The Power of Objects in JavaScript: Part 1
Objects are an essential building block for data manipulation in JavaScript, the language that runs the internet. Developers may easily organize and arrange data by using JavaScript objects, which are versatile containers. Together, we will unravel objects and examine many essential techniques that simplify our interactions with them. Understanding Objects in JavaScript An object in […]
Internationalization (I18n) Implementation in React
Internationalization (I18n) is a crucial aspect of building web applications that cater to a global audience. It involves adapting your application to different languages and regions seamlessly. In this blog, we will explore the implementation of I18n in a React app, ensuring a smooth user experience for diverse audiences. Why Internationalization? Before delving into the […]
Type-checking Made Easy: Exploring PropTypes in React
In React development, ensuring proper data validation is crucial for building robust and reliable applications. One powerful tool for type-checking is PropTypes, a built-in feature in React that enables developers to validate the props passed to components. In this blog, we will explore the concept of type-checking with PropTypes, understand its benefits, and provide brief […]
Understanding the Context API in React: Simplifying State Management
Introduction The Context API in React allows components to share data with each other, even if they are not directly related. It helps avoid the problem of passing data through many components by letting components access shared data directly. It helps in preventing the prop drilling problem. Consider the diagram to represent a chain of […]
Unboxing the Box-Sizing Property in CSS
Box-sizing property in CSS Box-sizing is a CSS property that helps us set the height and width of an element. Sometimes, when we set the height and width of an element, it doesn’t work as expected. In such situations, we can use the box-sizing property to adjust the element’s size. Box-model: The Box-model is a […]
What’s New with Sitecore’s Bootstrap 5 Grid
With Sitecore 10.2, Bootstrap 5 was added as a grid system option. Previous options were Bootstrap 3, Bootstrap 4, Foundation, and Grid960. While Bootstrap 4 was the default prior to 10.2, Sitecore Bootstrap 5 is the new default grid system. Here’s what’s new with Bootstrap 5. Speed One of the most exciting things about Bootstrap […]
Implementing Custom Play/Pause Button for Embedded YouTube Videos Using IFrame Player API
Recently, I worked on one bug where GTM tracking was breaking for an embedded YouTube video with a custom play button. The video played perfectly fine on the click of the play button, but it was not getting tracked by GTM. I didn’t find anything wrong in the code, so I researched and found that […]
Solved with CSS: Image Captions Done Right
There is a problem with the default styling of the figure caption (figcaption) element that is intrinsic to the way HTML and CSS work on their simplest level. Elements don’t know or care about the other elements around them; they behave in their own way, no matter what content comes before or after them. Let’s […]
Finally, Support for Responsive Images in Sitecore!
Responsive Web Design (RWD) offers a cost effective, high quality and easily managed delivery of content to a variety of devices. Many teams build sites in RWD by using custom or popular responsive frameworks like Twitter Bootstrap or Foundation Zurb. But how can we combine the responsive design goodness with an intuitive content authoring experience […]
Heroes in a Sass Shell: Mixin Power!
The end of the year is here, and it’s a time to kick back and enjoy ourselves and our families; a time to have some fun. A time to build a set of minimalist Teenage Mutant Ninja Turtle characters in CSS! Outside of being a fun exercise in general, this is a great look into […]