The Big Bang of Web Development: Let’s Talk About Accessibility

I want to take a break from the code focused session to talk about an important topic – accessibility. I was only recently enlightened as to how important this is at a conference I attended in April. Before we get too deep into this, if you want to review the coding stuff (as I will mention it occasionally in this post), review these posts:
1: Starting at index.html

Link: https://dzone.com/articles/the-big-bang-of-web-development-lets-talk-about-ac?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Live Editing HTML and CSS With Chrome DevTools

Chrome DevTools is a powerful suite of web development tools built right into the Chrome browser. One of the most useful features of DevTools for web developers is the ability to live edit the HTML and CSS on a page. This functionality allows any developer, even those with weaker HTML and CSS knowledge, to quickly prototype and iterate on potential changes to a web page.
While working on Lucidchart, one of my recent projects was to add some check marks into the inputs where users fill in their billing information in order to convey immediate feedback when the users entered properly formatted and valid information. Even though I am more comfortable working in our backend code than I am with CSS and HTML, I was able to easily implement these check marks with the power of live editing.

Link: https://dzone.com/articles/live-editing-html-and-css-with-chrome-devtools?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Minifying a Custom Element That Contains Inline CSS and HTML

I’ve created a ShareButton web component, it’s not great, but I like it and I’ve learned a lot about the Web Component ecosystem whilst I was creating it.
My main goal with this project was to encapsulate everything inside a single ES6 Class. I did this because I didn’t want any non-developer controlled web request emanating from my element. I think I achieved this, but it came at the expense of some readability of the code because I had to inline the HTML and CSS that define the element.

Link: https://dzone.com/articles/minifying-a-custom-element-that-contains-inline-cs?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Tabindex: A Quick Look

When dealing with element focusing, tabindex plays a big role. This attribute indicates if the element can be focusable and reachable via keyboard navigation. When pressing the Tab key, the browser shifts focus from one element to another. By using tabindex, we can change the tab order flow.
When creating an element, styling should be included.

Link: https://dzone.com/articles/tabindex-a-quick-look?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev