As a developer, you want to create more inclusive and accessible digital experiences for your users. Great! It’s possible, however, that you might be feeling a bit confused or overwhelmed by the element attributes that can affect the usability for users of assistive technology. ARIA (or WAI-ARIA, Web Accessibility Initiative-Accessible Rich Internet Applications) defines some… Continue reading Distinguishing between ARIA and native HTML attributes
Tag: DOM
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 Create a Split-Screen Slider With JavaScript
In today’s video tutorial I’m going to show you how to create a “split-screen” slider element (or UI, whatever you prefer to call it) using JavaScript. Inspiration for this came from a page on the Corsair website; let’s see how we can build one for our own projects. What We’re Going to Build Let’s first… Continue reading How to Create a Split-Screen Slider With JavaScript
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
Component Inheritance in Angular 2
Angular 2.3 is released! One of the exciting new feature is component inheritance. Component inheritance is very powerful and it can increase your code reusability. What does component inheritance provide us? Component Inheritance Component Inheritance in Angular 2.3 covers all of the following: Metadata (decorators): metadata (e.g. @Input(), @Output), etc. defined in a derived class… Continue reading Component Inheritance in Angular 2
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