What You’ll Be Creating Using this method you can create an email that has responsiveness baked in to the layout, without any need for CSS or media queries in the <head>, so that even in the worst case scenario of email rendering, your layout will remain intact. Is Developing HTML Email Still Hard? HTML email has… Continue reading Creating a Future-Proof Responsive Email Without Media Queries
Tag: attribute
How to Use ARIA Roles, Properties, and States in HTML
In this beginner’s accessibility tutorial we’re going to learn what ARIA is, why it is necessary to write our HTML with ARIA in mind, what ARIA roles, properties, and states are, and (very importantly) the 5 rules of ARIA use. What is ARIA? ARIA stands for Accessible Rich Internet Applications and it was created by the World… Continue reading How to Use ARIA Roles, Properties, and States in HTML
Understanding the Image Component in React Native
Images are an essential aspect of any mobile app. This tutorial will introduce you to the image component and show you how to use images in your React Native app. You will also learn how to create your own photo gallery! Prerequisites to Create a React Native App We will use the Expo CLI for… Continue reading Understanding the Image Component in React Native
Performance Tip: Use the Media Attribute for Faster Page Load Times
Sometimes web performance optimization takes a lot of work, and sometimes performance can be improved in just a moment. Adding the media attribute to conditional CSS files is an easy and quick way to speed up web page load times. TL;DR In short, if you add the media attribute to the <link> tag that calls… Continue reading Performance Tip: Use the Media Attribute for Faster Page Load Times
Axe-core 4.0 is Here!
Over the past few years, browsers like Firefox and Chrome have provided tools to better protect their users with advanced security features. The latest release of axe-core, axe-core 4.0 enables us to test accessibility even in the most security-aware environments. Improvements in axe-core 4.0 include support of Content Security Policy and has additional options for… Continue reading Axe-core 4.0 is Here!
6 Best Practices for Building Responsive Dropdown Menus
Creating a responsive dropdown menu is a tricky task. There are many decisions you have to make, in both the design and development phases. Recommended solutions usually depend on the characteristics of the website or application you’re building. However, there are also some general best practices that are recommended for all types of responsive dropdown… Continue reading 6 Best Practices for Building Responsive Dropdown Menus
A Guide to Accessible Interactive Components using React Libraries
May 29, 2020 Content Warning: This blog post contains gifs. I’ve wanted to write this blog post ever since I wrote a11y and JS – A Seemingly Unconventional Romance. I love JavaScript, and my job is to code in React. I often observe folks (rightly) critique that React Apps are inaccessible. According to the WebAIM… Continue reading A Guide to Accessible Interactive Components using React Libraries
How Accessibility Taught me to be Better at JavaScript – Part Two
January 14, 2020 Content Warning: There are gifs in this post. Hey friends! Today’s writing is going to be a follow up to How Accessibility Taught Me to be Better At JavaScript. If you have read my content, one of my favorite topics is about JavaScript and Accessibility. I speak about how JavaScript is actually… Continue reading How Accessibility Taught me to be Better at JavaScript – Part Two
How to Build an Animated Bootstrap Landing Page With Material Kit
In a previous tutorial, we discussed how to build a responsive landing page with Bootstrap 4. Today, we’ll learn how to create an animated landing page with Material Kit, a free Bootstrap 4 UI Kit based on Google’s Material Design. To implement it, we’ll use a combination of Bootstrap 4’s helper classes, Material Kit’s additional… Continue reading How to Build an Animated Bootstrap Landing Page With Material Kit
How to Build an Accordion Component With the CSS Checkbox Hack
What You’ll Be Creating In this short tutorial, we’ll learn how to build a CSS-only flexible accordion component by taking advantage of the “CSS checkbox hack technique”. Most importantly, our component will be fully responsive and its layout will switch between horizontal and vertical depending on the viewport size. Along the way, we’ll discuss how… Continue reading How to Build an Accordion Component With the CSS Checkbox Hack
How to Create a Web Booking Form With the Smart Forms Script
Booking forms can serve a lot of purposes on a website. You can use them to allow your visitors to book a hotel room or tickets to a popular event. They can also be used for other things like booking appointments with clients. They are a great way for people to simply give you all… Continue reading How to Create a Web Booking Form With the Smart Forms Script
Design Web Tables Without Screwing It Up – A 2019 Guide
Web tables are antiquated technology. If you don’t know this, welcome to the club that everyone else joined in 2010. Tables as a layout tool are a hack, a corruption of HTML used to create layouts that the code hadn’t thought of yet. When tables were added in HTML in 1996, this was in the… Continue reading Design Web Tables Without Screwing It Up – A 2019 Guide
How to Make a Beating Heart Animation for St. Valentine’s Day With SVG
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Let’s get into the spirit of St. Valentine’s day, getting all pink and smooshy in the process, and code ourselves a simple beating heart animation with SVG. Here’s what we’re going to create: This is a great exercise for familiarizing yourself with SVG syntax and authentic animation.… Continue reading How to Make a Beating Heart Animation for St. Valentine’s Day With SVG
Turn Your Static SVG Drawings Into Interactive Widgets and Infographics With Vue.js
What You’ll Be Creating SVG is powerful and flexible graphic format, which fits perfectly into the web medium. Unlike raster image formats, such as JPG, PNG, or GIF, SVG is vector-based and consists of “real” objects, which you can select and manipulate in whatever manner you want. So even with some basic scripting a static… Continue reading Turn Your Static SVG Drawings Into Interactive Widgets and Infographics With Vue.js
Create a PHP Email Script and Form
Forms on websites can be used for a lot of purposes besides being a place to contact the website administrators. In previous posts, I covered how to create a fully functional contact form in PHP and how to build your own Captcha and integrate it in your contact forms. In this tutorial, our focus will… Continue reading Create a PHP Email Script and Form
File Upload With Multer in Node.js and Express
When a web client uploads a file to a server, it is generally submitted through a form and encoded as multipart/form-data. Multer is middleware for Express and Node.js that makes it easy to handle this multipart/form-data when your users upload files. In this tutorial, I’ll show you how to use this library to handle different file upload situations… Continue reading File Upload With Multer in Node.js and Express
Keyboard Accessibility Tips Using HTML and CSS
Making your website accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS. A11y From the Beginning These tips are part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and… Continue reading Keyboard Accessibility Tips Using HTML and CSS
Site Accessibility: Getting Started With ARIA
.png)
What You’ll Be Creating Using standard HTML alone, modern web apps can lock out users with accessibility needs. HTML is the predominant markup language online, being used by nearly 83% of existing websites. While there have been some changes in the 25 years since its creation, even newer iterations, such as HTML5 and AMP, leave… Continue reading Site Accessibility: Getting Started With ARIA
Vivid.js – A JS library serving a set of 90+ SVG icons
Vivid.js is a JavaScript library built to serve 90+ pixel perfect and ready-to-use icons in SVG format. Vivid.js is really easy to use, you just need to include the JS file into the head section and use a data attribute to load an icon. In addition, Vivid.js is super lightweight and minified version equals around just… Continue reading Vivid.js – A JS library serving a set of 90+ SVG icons
Inclusive Design Mindset
At the end of a 72-hour race to complete the Student Design Challenge (SDC) hosted by Microsoft at IxDA this year, I was prompted to think about how my experience could not only benefit future designers, but also public school teachers. The challenge was to design an interactive way to teach rhythm to a student… Continue reading Inclusive Design Mindset
How to Change the Background Color of a Button on Mouse Click When Using jQuery
In this article am going to illustrate how you can change the background color of a button after it has been clicked when using jQuery. This kind of functionality makes a website or web application more responsive and interactive with the user especially when you have many buttons or links and you want your users… Continue reading How to Change the Background Color of a Button on Mouse Click When Using jQuery
Beginner’s Guide to Angular: Components
Building single-page applications is an art, with many impressive frameworks to choose from. One of the most intuitive and widely used frameworks for building both web and mobile applications is Angular. Today, Angular 10 is out, and there are many impressive features. However, you need to master components before you dig deep. First Things First:… Continue reading Beginner’s Guide to Angular: Components
Extending HTML by Creating Custom Tags
In this tutorial I will show you how easy it is to extend the HTML language with custom tags. The custom tags can be used to implement various behaviors, so they are a very convenient way to write less code and keep your HTML documents simpler. What Is a Custom HTML Tag? With HTML you… Continue reading Extending HTML by Creating Custom Tags
How to use breadcrumbs (the right way)
Bread crumbs…they bring up associations with the fairy tale of Hansel and Gretel, where Hansel leaves bread crumbs to help him find his way home again. Although the association with bread crumbs is perhaps still stronger in the realm of Grimm stories, that’s gradually changing as breadcrumbs in navigation help web designers create a better… Continue reading How to use breadcrumbs (the right way)