How to Build a UIkit Lightbox With Dot Navigation

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Have you ever worked with the UIkit front-end framework? Its current version at the time of writing is 3.9.4, and in the next few months, YOOtheme (the team behind it) plan to release v4. This isn’t the first time I’ve written about UIkit; some years ago, while still… Continue reading How to Build a UIkit Lightbox With Dot Navigation

Creating Pretty Popup Messages Using SweetAlert2

Every now and then, you will have to show an alert box to your users to let them know about an error or notification. The problem with the default alert boxes provided by browsers is that they are not very attractive. When you are creating a website with great color combinations and fancy animation to… Continue reading Creating Pretty Popup Messages Using SweetAlert2

Accessible Routing in JavaScript Frameworks

Lost in Transition In my role as a Developer Consultant with Deque, I get asked a variety of questions on how to implement and fix technical accessibility issues. One topic that always seems to be at the forefront of everything else that developers have asked is ‘How do I manage focus in my JavaScript framework?’.… Continue reading Accessible Routing in JavaScript Frameworks

How to Build a MouseOver Navigation Slide Effect

Have you ever used the Slider Revolution WordPress plugin in a project? If the answer is “yes”, you might have noticed the mini toolbar that appears in the right corner of the plugin’s configuration page. Initially, only the icons are visible, keeping the whole thing nice and compact. Then each time you hover over an icon, its… Continue reading How to Build a MouseOver Navigation Slide Effect

Testing Components in React Using Jest and Enzyme

This is the second part of the series on Testing Components in React. If you have prior experience with Jest, you can skip ahead and use the GitHub code as a starting point.  In the previous article, we covered the basic principles and ideas behind test-driven development. We also set up the environment and the tools… Continue reading Testing Components in React Using Jest and Enzyme

Testing Components in React Using Jest: The Basics

What You’ll Be Creating Testing code is a confusing practice for many developers. That’s understandable because writing tests requires more effort, time, and the ability to foresee possible use cases. Startups and developers working on smaller projects usually favor ignoring tests altogether because of the lack of resources and manpower.  However, there are a couple… Continue reading Testing Components in React Using Jest: The Basics

Tips and Trick to Improve Your JavaScript’s SEO

JavaScript usage can have a surprising impact on SEO. But how? As you probably know, basic web crawlers are pretty dumb. They just read through the text files associated with your domain, following links and trawling through your code. But they can’t really “see” the website: only the code that comprises it. As a result,… Continue reading Tips and Trick to Improve Your JavaScript’s SEO

Getting Started with Chrome Developer Tools: Inspect Element

Google Chrome is one of the best consumer browsers on the market, but it also contains a number of powerful developer tools. We can reveal some of these tools with Chrome’s Inspect Element (or “Inspect”) tool. This developer tool provides insight into how websites are constructed and styled, and it can help you debug your own… Continue reading Getting Started with Chrome Developer Tools: Inspect Element

Micron.js – Create CSS Animations Controlled by JavaScript Power

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods. You can… Continue reading Micron.js – Create CSS Animations Controlled by JavaScript Power

Draggable: A lightweight drag & drop JS library

Draggable is a modern, responsive and lightweight drag & drop library released by Shopify. The library abstracts native browser events into a complex API to create a custom user experience. It’s the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps thanks to a lot of features such as fast DOM reordering,… Continue reading Draggable: A lightweight drag & drop JS library

How to Order and Align Items in Grid Layout

In this tutorial, you will learn how to control the order in which items are placed using the Grid Layout module. After that, we will discuss how to control the alignment of different items in the grid. In the past, we covered a few important Grid-related topics. We began by learning about different ways of… Continue reading How to Order and Align Items in Grid Layout

Get Notified when a DOM Element Enters or Exits

Posted · Category: MIT License, Tools You can Get notified when a DOM element enters or exits the viewport with in-view.js. It’s a small (~1.9kb gzipped), dependency-free, javascript utility for IE9+. With in-view, you can register handlers that are called when an element enters or exits the viewport. Each handler receives one element, the one… Continue reading Get Notified when a DOM Element Enters or Exits

11 Useful Third-Party Java Libraries

There is no doubt that java libraries are the first choice of developers. The reason behind this is java libraries provide so many useful, free and exciting features which are very helpful for the java developers. But these days, third-party java libraries are also very popular. In this collection, we are going to share with… Continue reading 11 Useful Third-Party Java Libraries

Selecting Parent Elements with CSS and jQuery

There have been occasions where I’ve wished I was able to select a parent element with CSS–and I’m not alone on this matter. However, there isn’t such thing as a Parent Selector in CSS, so it simply isn’t possible for the time being. In this tutorial we will walk through a few cases where having a CSS… Continue reading Selecting Parent Elements with CSS and jQuery

11 CSS3 Animation Tools For Developers

This post showcases 11 best and most amazing CSS3 animation tools that will be extremely helpful for the developers. CSS3 has got excellent reputation among designers and developers. It is here to help them create amazing results. With these animation tools, you can create breath taking animations in a hassle free manner. These resources will… Continue reading 11 CSS3 Animation Tools For Developers

Data Structures With JavaScript: Tree

What You’ll Be Creating * { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Trees are one of the most commonly used data structures in web development. This statement holds true for both developers and users. Every web developer who has written HTML and loaded it into a web browser has created a tree, which is referred… Continue reading Data Structures With JavaScript: Tree

Interactive Challenges & Writing jQuery in the Browser

Try jQuery is a combination of videos, interactive console challenges, and writing code in the browser. You’ll need about 2 hours of time to make it through everything. There is a gentle introduction to what jQuery is, and what it can do. It tells you how to search and walk through the DOM with selectors… Continue reading Interactive Challenges & Writing jQuery in the Browser